Nesting BleepsAnimator, Animator, and Grid components causes mangled HTML about arwes HOT 3 CLOSED

import React, { useEffect, type ReactElement, useState, ReactNode } from 'react';
import { createRoot } from 'react-dom/client';

import { type CSSObject, Global } from '@emotion/react';

import {
  createAppTheme,
  createAppStylesBaseline,
  type AnimatorGeneralProviderSettings,
  AnimatorGeneralProvider,
  Animator,
  Animated,
  aaVisibility,
  aa,
  type BleepsProviderSettings,
  BleepsProvider,
  useBleeps,
  BleepsOnAnimator,
  FrameSVGCorners,
  GridLines,
  Dots,
  MovingLines,
  Text,
  FrameSVGNefrex,
  AnimatorInterface,
  AnimatorNode,
  useAnimator,
  AnimatorProps,
} from '@arwes/react';

interface ExperimentItemProps extends AnimatorProps {
  children?: ReactNode
}

const ExperimentItem = ({ children, ...animator }: ExperimentItemProps): ReactElement => {
  return (
    <Animator {...animator}>
      <Animated
        style={{ margin: 5, width: 40, height: 15, backgroundColor: '#777' }}
        animated={{
          transitions: {
            entering: {
              x: [0, 50],
              backgroundColor: ['#0ff', '#ff0'],
              options: { easing: 'linear' }
            },
            exiting: {
              x: [50, 0],
              backgroundColor: ['#ff0', '#0ff'],
              options: { easing: 'linear' }
            }
          }
        }}
        hideOnExited={false}
      />
      <div style={{ marginLeft: 20 }}>
        {children}
      </div>
    </Animator>
  );
};

const Experiment = () => {
  return (
    <AnimatorGeneralProvider duration={{ enter: 0.4, stagger: 0.1 }}>
      <ExperimentItem manager='sequence' combine>

        <ExperimentItem manager='parallel' combine>
          {Array(5).fill(0).map((_, i) => <ExperimentItem key={i} />)}
        </ExperimentItem>

        <ExperimentItem manager='stagger' combine>
          {Array(5).fill(0).map((_, i) => <ExperimentItem key={i} />)}
        </ExperimentItem>

        <ExperimentItem manager='sequence' combine>
          {Array(5).fill(0).map((_, i) => <ExperimentItem key={i} />)}
        </ExperimentItem>

      </ExperimentItem>
    </AnimatorGeneralProvider>
  )
}

const theme = createAppTheme();
const stylesBaseline = createAppStylesBaseline(theme);

const Background = (): ReactElement => {
  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        backgroundColor: theme.colors.primary.bg(1),
        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("bg1.jpeg")',
        backgroundSize: 'cover',
      }}
    >
      <GridLines lineColor={theme.colors.primary.deco(0)} />
      <Dots color={theme.colors.primary.deco(1)} />
      <MovingLines lineColor={theme.colors.primary.deco(2)} />
    </div>
  );
};

const TagLines = () => {
  const childrenList = [
    'TEAM PLAYER',
    'SOFTWARE ENGINEER',
    'JAVASCRIPT DEVELOPER',
    'NODE.JS DEVELOPER',
    'FRONT END DEVELOPER',
    'API DEVELOPER',
    'CLOUD ENGINEER',
    'PEOPLE FIRST DEVELOPER',
    'LIFE LONG LEARNER'
  ];

  const [childrenIndex, setChildrenIndex] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => {
      const isLastIndex = childrenIndex === childrenList.length - 1;
      const nextIndex = isLastIndex ? 0 : childrenIndex + 1;
      setChildrenIndex(nextIndex);
    }, 2000);
    return () => clearTimeout(timeout);
  }, [childrenIndex, childrenList.length]);

  return (
    <h4>
      <Animator duration={{ enter: 1, exit: 1 }}>
        <Text fixed>
          {childrenList[childrenIndex]}
        </Text>
      </Animator>
    </h4>
  );
}

const Sandbox = () => {
  // ignoring the hydration errors
  // TODO: check if awres library has recommendations for <AnimatorGeneralProvider ...> usage
  const [floatingButtonVisible, setFloatingButtonVisible] = useState(false);
  return (
    <>
      <Global styles={stylesBaseline as Record<string, CSSObject>} />
      <AnimatorGeneralProvider duration={{
        enter: 0.2,
        exit: 0.2,
        stagger: 0.04
      }}>
        <BleepsProvider
          master={{ volume: 0.9 }}
          bleeps={{
            intro: {
              sources: [{ src: 'https://next.arwes.dev/assets/sounds/intro.mp3', type: 'audio/mpeg' }]
            },
            click: {
              sources: [{ src: 'https://next.arwes.dev/assets/sounds/click.mp3', type: 'audio/mpeg' }]
            }
          }}>
          <Animator active={true} combine manager='stagger'>
            <Animator>
              <Background />
            </Animator>
            <Animator>
              <div>
                <div>
                  <Text
                    style={{ color: '#ddd', fontFamily: 'monospace' }}
                    manager='decipher'
                    easing='outSine'
                    fixed
                  >
                    <Animator active={true} duration={{ enter: 1.5, exit: 1.5 }}>
                      <h1
                        style={{
                          width: '320px',
                          textAlign: 'center',
                          fontSize: '48px'
                        }}>
                        <span></span>
                      </h1>
                    </Animator>
                  </Text>
                </div>
                <div>
                  <TagLines />
                </div>
                <div>
                  <div
                    style={{ marginTop: '50px' }}>
                    <button
                      id="about-btn"
                      // href="#about"
                      // variant="outlined"
                      onClick={() => {
                        console.log('clicked')
                        setFloatingButtonVisible(!floatingButtonVisible);
                      }}
                    >About</button>
                    <button
                      id="experiment-btn"
                      // href="#experiment"
                      // variant="outlined"
                      style={{
                        margin: '5px'
                      }}
                      onClick={() => {
                        setFloatingButtonVisible(!floatingButtonVisible);
                      }}
                    >Experiment</button>
                  </div>
                </div>
              </div>
            </Animator>
            <Animator>
              <div>
                <div>
                  <h1 style={{ width: '220px', fontSize: '16px', marginBottom: '10%' }} id="about">
                    <Text style={{ color: 'yellow' }}>
Hello                    </Text>
                  </h1>
                </div>
                <div>
                  <h1 style={{ width: '220px', fontSize: '16px', marginBottom: '10%' }}>
                    <Text style={{ color: 'yellow' }}>
From year to year I had op
                    </Text>
                  </h1>
                </div>
                <div>

                  <h1 style={{ width: '220px', fontSize: '16px', marginBottom: '10%' }}>
                    <Text style={{ color: 'yellow' }}>
                    I am
                    </Text>
                  </h1>

                </div>
                <div>
                  <h1 style={{ width: '220px', fontSize: '16px', marginBottom: '10%' }}>
                    <Text style={{ color: 'yellow' }}>
                      Noodles available upon request.
                    </Text>
                  </h1>
                </div>
              </div>
            </Animator>
          </Animator>
        </BleepsProvider>
      </AnimatorGeneralProvider >
      <div>
        <div>
          <div id="experiment">
            <Experiment />
          </div>
        </div>
      </div>
      <div
        onClick={() => {
          setFloatingButtonVisible(!floatingButtonVisible);
        }}
        style={{
          display: floatingButtonVisible ? 'block' : 'none'
        }}>
        <div>
          <div>
            <div />
          </div>
        </div>
      </div >
    </>
  );
};

createRoot(document.querySelector('#root') as HTMLElement).render(<Sandbox />);