Orchestration

import { Dialog } from '@base-ui/react/dialog';
import { motion, stagger } from 'motion/react';

// Content starts at 180ms, 100ms after the panel, with 60ms between items.
const content = {
  hidden: {},
  shown: { transition: { delayChildren: stagger(0.06, { startDelay: 0.18 }) } }
};
const item = { hidden: { opacity: 0, y: 8 }, shown: { opacity: 1, y: 0 } };

type Props = { open: boolean; onOpenChange: (open: boolean) => void };

export function WelcomeDialog({ open, onOpenChange }: Props) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        {/* 1. The backdrop fades in over 200ms. */}
        <Dialog.Backdrop className='fixed inset-0 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:opacity-0' />
        {/* 2. 80ms later the panel scales up over 300ms. Both close together in 150ms. */}
        <Dialog.Popup className='fixed top-1/2 left-1/2 w-96 max-w-[calc(100vw-3rem)] -translate-1/2 rounded-2xl border bg-background p-6 text-center shadow-xl outline-none transition-[opacity,scale] delay-80 duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:scale-96 data-ending-style:opacity-0 data-ending-style:delay-0 data-ending-style:duration-150 data-starting-style:scale-96 data-starting-style:opacity-0'>
          {/* 3. The avatar, text, and buttons follow in order. */}
          <motion.div
            variants={content}
            initial='hidden'
            animate='shown'
            className='flex flex-col items-center gap-3'
          >
            <motion.img
              variants={item}
              src='/avatars/maya.png'
              alt=''
              className='size-14 rounded-full'
            />
            <motion.div variants={item}>
              <Dialog.Title className='text-lg font-semibold'>
                Welcome aboard, Maya
              </Dialog.Title>
              <Dialog.Description className='text-sm text-muted-foreground'>
                Your workspace is ready. Pick a template to start.
              </Dialog.Description>
            </motion.div>
            {/* Opacity doesn't block clicks, so the buttons work right away. */}
            <motion.div variants={item} className='flex gap-2'>
              <Dialog.Close className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted'>
                Skip for now
              </Dialog.Close>
              <Dialog.Close className='rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground'>
                Browse templates
              </Dialog.Close>
            </motion.div>
          </motion.div>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}