Function RevealText

packages/emcn/src/components/toast/toast.tsx:199–269

* Truncated text that reveals its hidden lines on hover: the head shows the * first `clampLines` lines, and when hovered (and actually overflowing) the * remaining lines mount below and blur in as one continuous block. Text that * fits within the clamp is never truncated and the card never grows

({
  text,
  expanded,
  clampLines,
  lineHeightPx,
  leadingIcon,
  className,
  reduceMotion,
}: RevealTextProps)

 * fits within the clamp is never truncated and the card never grows for it.
 */
function RevealText({
  text,
  expanded,
  clampLines,
  lineHeightPx,
  leadingIcon,
  className,
  reduceMotion,
}: RevealTextProps) {
  const headRef = useRef<HTMLDivElement>(null)
  const [truncated, setTruncated] = useState(false)
  const clampHeight = clampLines * lineHeightPx

  useLayoutEffect(() => {
    const el = headRef.current
    if (!el) return
    const check = () => setTruncated(el.scrollHeight - el.clientHeight > 1)
    check()
    const observer = new ResizeObserver(check)
    observer.observe(el)
    return () => observer.disconnect()
  }, [text])

  const open = expanded && truncated
  const fadeStart = Math.max(0, clampHeight - lineHeightPx * 1.5)
  const collapsedMask = `linear-gradient(to bottom, #000 ${fadeStart}px, transparent ${clampHeight}px)`

  return (
    <div>
      <div
        ref={headRef}
        className={cn('overflow-hidden', className)}
        style={{
          maxHeight: clampHeight,
          maskImage: truncated && !open ? collapsedMask : undefined,
          WebkitMaskImage: truncated && !open ? collapsedMask : undefined,
        }}
      >
        {leadingIcon}
        {text}
      </div>
      <AnimatePresence initial={false}>
        {open ? (
          <motion.div
            className='overflow-hidden'
            aria-hidden
            initial={reduceMotion ? false : { height: 0 }}
            animate={{ height: 'auto' }}
            exit={{ height: 0 }}
            transition={
              reduceMotion ? { duration: 0 } : { duration: RESIZE_DURATION, ease: TOAST_EASE }
            }
          >
            <motion.div
              className={className}
              style={{ marginTop: -clampHeight }}
              initial={reduceMotion ? false : { opacity: 0, filter: 'blur(5px)' }}
              animate={{ opacity: 1, filter: 'blur(0px)' }}