Function ToastItem

packages/emcn/src/components/toast/toast.tsx:271–374

({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: ToastItemProps)

}

function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: ToastItemProps) {
  const contentRef = useRef<HTMLDivElement>(null)
  const [hovered, setHovered] = useState(false)
  const Icon = VARIANT_ICON[t.variant]

  /**
   * Report the natural height — measured on the unconstrained inner content so
   * the outer `<li>` clamp can't feed back — so the provider lays the fan and
   * collapsed clamp against real heights. `useLayoutEffect` avoids a paint jump.
   */
  useLayoutEffect(() => {
    const el = contentRef.current
    if (!el) return
    const report = () => onMeasure(t.id, el.offsetHeight + CARD_BORDER_PX)
    report()
    const observer = new ResizeObserver(report)
    observer.observe(el)
    return () => observer.disconnect()
  }, [t.id, onMeasure])

  const dismiss = useCallback(() => onDismiss(t.id), [onDismiss, t.id])

  const { y, scale, height, zIndex } = geometry
  const cornerRadius = height <= COMPACT_CARD_HEIGHT_PX ? COMPACT_RADIUS_PX : CONCENTRIC_RADIUS_PX
  /** One fixed-duration tween so all cards reshuffle in unison; height tracks content instantly. */
  const transition = reduceMotion
    ? { duration: 0 }
    : {
        duration: STACK_DURATION,
        ease: TOAST_EASE,
        height: { duration: 0 },
      }

  return (
    <motion.li
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      initial={reduceMotion ? false : { opacity: 0, y: height }}
      animate={{ opacity: 1, y, scale, height }}
      exit={{
        opacity: 0,
        scale: 0.95,
        transition: reduceMotion ? { duration: 0 } : { duration: 0.15, ease: 'easeIn' },
      }}
      transition={transition}
      style={{ zIndex, transformOrigin: 'bottom', width: TOAST_WIDTH, borderRadius: cornerRadius }}
      className='pointer-events-auto absolute right-0 bottom-0 m-0 overflow-hidden border border-[var(--border-1)] bg-[var(--bg)] shadow-[var(--shadow-overlay)]'
    >
      <div ref={contentRef} className='flex flex-col gap-2 p-2'>
        <div className='flex items-start gap-2'>
          <div className='min-w-0 flex-1'>
            <RevealText
              text={t.message}
              expanded={hovered}
              clampLines={2}
              lineHeightPx={20}
              leadingIcon={
                <span className='mr-1.5 inline-flex h-5 items-center align-top'>