@particle-academy/react-fancy 5.30.0 → 5.32.0

package/dist/{chunk-3FG5K7A7.js.map → chunk-VYHZEQIG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmojiSelect/EmojiSelect.tsx"],"names":[],"mappings":"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","file":"chunk-3FG5K7A7.js","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { EMOJI_CATEGORY_ORDER, EMOJI_DATA, type EmojiCategoryKey, type EmojiEntry } from \"../../data/emoji-data\";\nimport { applyTone, SKIN_TONES, type SkinTone } from \"../../data/emoji-utils\";\nimport type { EmojiSelectProps } from \"./EmojiSelect.types\";\n\nconst TONE_STORAGE_KEY = \"fancy:emoji-tone\";\nconst LONG_PRESS_MS = 400;\nconst HOVER_INTENT_MS = 120;\nconst HOVER_LEAVE_GRACE_MS = 220;\n\ntype ToneTarget = {\n  emoji: EmojiEntry;\n  rect: { left: number; top: number; width: number };\n};\n\n// Deliberately no hover-capability gate. We use `pointerType` on pointer events so touch\n// inputs never trigger the hover path (they go through long-press instead), and mouse/pen\n// inputs always work regardless of what `(hover: hover)` resolves to in the current env.\n\nfunction readStoredTone(): SkinTone | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const v = window.localStorage?.getItem(TONE_STORAGE_KEY);\n    return (SKIN_TONES as readonly string[]).includes(v ?? \"\") ? (v as SkinTone) : null;\n  } catch {\n    return null;\n  }\n}\n\nexport function EmojiSelect({ value, defaultValue, onChange, placeholder = \"Search emojis...\", className }: EmojiSelectProps) {\n  const [selected, setSelected] = useControllableState(value, defaultValue ?? \"\", onChange);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeCategory, setActiveCategory] = useState<EmojiCategoryKey>(\"smileys\");\n  const [tone, setToneState] = useState<SkinTone | null>(() => readStoredTone());\n  const [toneTarget, setToneTarget] = useState<ToneTarget | null>(null);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const setTone = useCallback((t: SkinTone | null) => {\n    setToneState(t);\n    if (typeof window === \"undefined\") return;\n    try {\n      if (t) window.localStorage?.setItem(TONE_STORAGE_KEY, t);\n      else window.localStorage?.removeItem(TONE_STORAGE_KEY);\n    } catch {}\n  }, []);\n\n  const filtered = useMemo(() => {\n    if (!query) return null;\n    const lower = query.toLowerCase();\n    const hits: EmojiEntry[] = [];\n    for (const group of Object.values(EMOJI_DATA)) {\n      for (const e of group.emojis) {\n        if (e.name.includes(lower)) hits.push(e);\n      }\n    }\n    return hits;\n  }, [query]);\n\n  const closePicker = useCallback(() => setToneTarget(null), []);\n\n  const openPicker = useCallback((target: ToneTarget) => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n    setToneTarget(target);\n  }, []);\n\n  const scheduleClose = useCallback(() => {\n    if (leaveTimer.current) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(closePicker, HOVER_LEAVE_GRACE_MS);\n  }, [closePicker]);\n\n  const cancelClose = useCallback(() => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n  }, []);\n\n  const pick = (emoji: EmojiEntry) => {\n    const char = emoji.skinTones && tone ? applyTone(emoji.char, tone) : emoji.char;\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  const pickTone = (emoji: EmojiEntry, t: SkinTone) => {\n    setTone(t);\n    const char = applyTone(emoji.char, t);\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  useEffect(() => {\n    if (!open) closePicker();\n  }, [open, closePicker]);\n\n  return (\n    <div className={cn(\"relative inline-block\", className)} data-react-fancy-emoji-select=\"\">\n      <button\n        type=\"button\"\n        className=\"flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24]\"\n        onClick={() => setOpen((v) => !v)}\n      >\n        {selected ? <span className=\"text-xl\">{selected}</span> : <span className=\"text-zinc-400\">Pick emoji</span>}\n      </button>\n\n      {open && (\n        <div className=\"absolute z-50 mt-1 w-80 rounded-lg border border-zinc-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 fancy-fade-in\">\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder={placeholder}\n            className=\"mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100\"\n            autoFocus\n          />\n\n          {!query && (\n            <div className=\"mb-2 flex gap-1 overflow-x-auto border-b border-zinc-100 pb-2 dark:border-zinc-700\">\n              {EMOJI_CATEGORY_ORDER.map((key) => (\n                <button\n                  key={key}\n                  type=\"button\"\n                  onClick={() => setActiveCategory(key)}\n                  className={cn(\n                    \"shrink-0 rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n                    activeCategory === key && \"bg-zinc-100 dark:bg-zinc-700\",\n                  )}\n                  aria-label={EMOJI_DATA[key].label}\n                >\n                  {EMOJI_DATA[key].icon}\n                </button>\n              ))}\n            </div>\n          )}\n\n          <div className=\"max-h-64 overflow-y-auto\">\n            {query ? (\n              <EmojiGrid\n                emojis={filtered ?? []}\n                tone={tone}\n                openPicker={openPicker}\n                scheduleClose={scheduleClose}\n                cancelClose={cancelClose}\n                onPick={pick}\n              />\n            ) : (\n              <div>\n                <div className=\"px-1 py-1 text-xs font-semibold uppercase text-zinc-500\">\n                  {EMOJI_DATA[activeCategory].label}\n                </div>\n                <EmojiGrid\n                  emojis={EMOJI_DATA[activeCategory].emojis}\n                  tone={tone}\n                  openPicker={openPicker}\n                  scheduleClose={scheduleClose}\n                  cancelClose={cancelClose}\n                  onPick={pick}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {toneTarget && typeof document !== \"undefined\" &&\n        createPortal(\n          <TonePopover\n            target={toneTarget}\n            onPickBase={() => pick(toneTarget.emoji)}\n            onPickTone={(t) => pickTone(toneTarget.emoji, t)}\n            onMouseEnter={cancelClose}\n            onMouseLeave={scheduleClose}\n          />,\n          document.body,\n        )}\n    </div>\n  );\n}\n\ntype GridProps = {\n  emojis: EmojiEntry[];\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: (emoji: EmojiEntry) => void;\n};\n\nfunction EmojiGrid({ emojis, tone, openPicker, scheduleClose, cancelClose, onPick }: GridProps) {\n  return (\n    <div className=\"grid grid-cols-8 gap-0.5\">\n      {emojis.map((emoji) => (\n        <EmojiCell\n          key={emoji.char}\n          emoji={emoji}\n          tone={tone}\n          openPicker={openPicker}\n          scheduleClose={scheduleClose}\n          cancelClose={cancelClose}\n          onPick={() => onPick(emoji)}\n        />\n      ))}\n    </div>\n  );\n}\n\ntype CellProps = {\n  emoji: EmojiEntry;\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: () => void;\n};\n\nfunction EmojiCell({ emoji, tone, openPicker, scheduleClose, cancelClose, onPick }: CellProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const longPressed = useRef(false);\n\n  const tonable = !!emoji.skinTones;\n  const displayChar = tonable && tone ? applyTone(emoji.char, tone) : emoji.char;\n\n  useEffect(() => () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n  }, []);\n\n  const triggerOpen = () => {\n    const node = buttonRef.current;\n    if (!node) return;\n    const r = node.getBoundingClientRect();\n    openPicker({ emoji, rect: { left: r.left, top: r.top, width: r.width } });\n  };\n\n  const handlePointerEnter = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType === \"touch\") return;\n    cancelClose();\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n    hoverTimer.current = setTimeout(triggerOpen, HOVER_INTENT_MS);\n  };\n\n  const handlePointerLeave = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    if (hoverTimer.current) {\n      clearTimeout(hoverTimer.current);\n      hoverTimer.current = null;\n    }\n    if (tonable) scheduleClose();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType !== \"touch\") return;\n    longPressed.current = false;\n    longPressTimer.current = setTimeout(() => {\n      longPressed.current = true;\n      triggerOpen();\n    }, LONG_PRESS_MS);\n  };\n  const handlePointerUp = () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    longPressTimer.current = null;\n  };\n\n  const handleClick = () => {\n    if (longPressed.current) {\n      longPressed.current = false;\n      return;\n    }\n    onPick();\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      className=\"relative rounded p-1 text-xl hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n      aria-label={emoji.name}\n      title={emoji.name}\n    >\n      {displayChar}\n      {tonable && (\n        <span className=\"absolute right-0.5 bottom-0.5 h-1 w-1 rounded-full bg-amber-400\" aria-hidden />\n      )}\n    </button>\n  );\n}\n\ntype PopoverProps = {\n  target: ToneTarget;\n  onPickBase: () => void;\n  onPickTone: (tone: SkinTone) => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n};\n\nfunction TonePopover({ target, onPickBase, onPickTone, onMouseEnter, onMouseLeave }: PopoverProps) {\n  const { emoji, rect } = target;\n  if (!emoji.skinTones) return null;\n\n  const centerX = rect.left + rect.width / 2;\n  const top = rect.top;\n  const POPOVER_HEIGHT_APPROX = 44;\n  const flipDown = top < POPOVER_HEIGHT_APPROX + 8;\n\n  const style: React.CSSProperties = flipDown\n    ? { position: \"fixed\", left: centerX, top: top + 32, transform: \"translateX(-50%)\" }\n    : { position: \"fixed\", left: centerX, top: top - 4, transform: \"translate(-50%, -100%)\" };\n\n  return (\n    <div\n      style={{ ...style, zIndex: 9999 }}\n      className=\"flex gap-0.5 rounded-md border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800\"\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <button\n        type=\"button\"\n        onClick={onPickBase}\n        className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n        aria-label={`${emoji.name} (no tone)`}\n      >\n        {emoji.char}\n      </button>\n      {SKIN_TONES.map((t, i) => (\n        <button\n          key={t}\n          type=\"button\"\n          onClick={() => onPickTone(t)}\n          className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n          aria-label={`${emoji.name} ${t} skin tone`}\n        >\n          {emoji.skinTones![i]}\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/EmojiSelect/EmojiSelect.tsx"],"names":[],"mappings":"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","file":"chunk-VYHZEQIG.js","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { EMOJI_CATEGORY_ORDER, EMOJI_DATA, type EmojiCategoryKey, type EmojiEntry } from \"../../data/emoji-data\";\nimport { applyTone, SKIN_TONES, type SkinTone } from \"../../data/emoji-utils\";\nimport type { EmojiSelectProps } from \"./EmojiSelect.types\";\n\nconst TONE_STORAGE_KEY = \"fancy:emoji-tone\";\nconst LONG_PRESS_MS = 400;\nconst HOVER_INTENT_MS = 120;\nconst HOVER_LEAVE_GRACE_MS = 220;\n\ntype ToneTarget = {\n  emoji: EmojiEntry;\n  rect: { left: number; top: number; width: number };\n};\n\n// Deliberately no hover-capability gate. We use `pointerType` on pointer events so touch\n// inputs never trigger the hover path (they go through long-press instead), and mouse/pen\n// inputs always work regardless of what `(hover: hover)` resolves to in the current env.\n\nfunction readStoredTone(): SkinTone | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const v = window.localStorage?.getItem(TONE_STORAGE_KEY);\n    return (SKIN_TONES as readonly string[]).includes(v ?? \"\") ? (v as SkinTone) : null;\n  } catch {\n    return null;\n  }\n}\n\nexport function EmojiSelect({ value, defaultValue, onChange, placeholder = \"Search emojis...\", className }: EmojiSelectProps) {\n  const [selected, setSelected] = useControllableState(value, defaultValue ?? \"\", onChange);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeCategory, setActiveCategory] = useState<EmojiCategoryKey>(\"smileys\");\n  const [tone, setToneState] = useState<SkinTone | null>(() => readStoredTone());\n  const [toneTarget, setToneTarget] = useState<ToneTarget | null>(null);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const setTone = useCallback((t: SkinTone | null) => {\n    setToneState(t);\n    if (typeof window === \"undefined\") return;\n    try {\n      if (t) window.localStorage?.setItem(TONE_STORAGE_KEY, t);\n      else window.localStorage?.removeItem(TONE_STORAGE_KEY);\n    } catch {}\n  }, []);\n\n  const filtered = useMemo(() => {\n    if (!query) return null;\n    const lower = query.toLowerCase();\n    const hits: EmojiEntry[] = [];\n    for (const group of Object.values(EMOJI_DATA)) {\n      for (const e of group.emojis) {\n        if (e.name.includes(lower)) hits.push(e);\n      }\n    }\n    return hits;\n  }, [query]);\n\n  const closePicker = useCallback(() => setToneTarget(null), []);\n\n  const openPicker = useCallback((target: ToneTarget) => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n    setToneTarget(target);\n  }, []);\n\n  const scheduleClose = useCallback(() => {\n    if (leaveTimer.current) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(closePicker, HOVER_LEAVE_GRACE_MS);\n  }, [closePicker]);\n\n  const cancelClose = useCallback(() => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n  }, []);\n\n  const pick = (emoji: EmojiEntry) => {\n    const char = emoji.skinTones && tone ? applyTone(emoji.char, tone) : emoji.char;\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  const pickTone = (emoji: EmojiEntry, t: SkinTone) => {\n    setTone(t);\n    const char = applyTone(emoji.char, t);\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  useEffect(() => {\n    if (!open) closePicker();\n  }, [open, closePicker]);\n\n  return (\n    <div className={cn(\"relative inline-block\", className)} data-react-fancy-emoji-select=\"\">\n      <button\n        type=\"button\"\n        className=\"flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24]\"\n        onClick={() => setOpen((v) => !v)}\n      >\n        {selected ? <span className=\"text-xl\">{selected}</span> : <span className=\"text-zinc-400\">Pick emoji</span>}\n      </button>\n\n      {open && (\n        <div className=\"absolute z-50 mt-1 w-80 rounded-lg border border-zinc-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 fancy-fade-in\">\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder={placeholder}\n            className=\"mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100\"\n            autoFocus\n          />\n\n          {!query && (\n            <div className=\"mb-2 flex gap-1 overflow-x-auto border-b border-zinc-100 pb-2 dark:border-zinc-700\">\n              {EMOJI_CATEGORY_ORDER.map((key) => (\n                <button\n                  key={key}\n                  type=\"button\"\n                  onClick={() => setActiveCategory(key)}\n                  className={cn(\n                    \"shrink-0 rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n                    activeCategory === key && \"bg-zinc-100 dark:bg-zinc-700\",\n                  )}\n                  aria-label={EMOJI_DATA[key].label}\n                >\n                  {EMOJI_DATA[key].icon}\n                </button>\n              ))}\n            </div>\n          )}\n\n          <div className=\"max-h-64 overflow-y-auto\">\n            {query ? (\n              <EmojiGrid\n                emojis={filtered ?? []}\n                tone={tone}\n                openPicker={openPicker}\n                scheduleClose={scheduleClose}\n                cancelClose={cancelClose}\n                onPick={pick}\n              />\n            ) : (\n              <div>\n                <div className=\"px-1 py-1 text-xs font-semibold uppercase text-zinc-500\">\n                  {EMOJI_DATA[activeCategory].label}\n                </div>\n                <EmojiGrid\n                  emojis={EMOJI_DATA[activeCategory].emojis}\n                  tone={tone}\n                  openPicker={openPicker}\n                  scheduleClose={scheduleClose}\n                  cancelClose={cancelClose}\n                  onPick={pick}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {toneTarget && typeof document !== \"undefined\" &&\n        createPortal(\n          <TonePopover\n            target={toneTarget}\n            onPickBase={() => pick(toneTarget.emoji)}\n            onPickTone={(t) => pickTone(toneTarget.emoji, t)}\n            onMouseEnter={cancelClose}\n            onMouseLeave={scheduleClose}\n          />,\n          document.body,\n        )}\n    </div>\n  );\n}\n\ntype GridProps = {\n  emojis: EmojiEntry[];\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: (emoji: EmojiEntry) => void;\n};\n\nfunction EmojiGrid({ emojis, tone, openPicker, scheduleClose, cancelClose, onPick }: GridProps) {\n  return (\n    <div className=\"grid grid-cols-8 gap-0.5\">\n      {emojis.map((emoji) => (\n        <EmojiCell\n          key={emoji.char}\n          emoji={emoji}\n          tone={tone}\n          openPicker={openPicker}\n          scheduleClose={scheduleClose}\n          cancelClose={cancelClose}\n          onPick={() => onPick(emoji)}\n        />\n      ))}\n    </div>\n  );\n}\n\ntype CellProps = {\n  emoji: EmojiEntry;\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: () => void;\n};\n\nfunction EmojiCell({ emoji, tone, openPicker, scheduleClose, cancelClose, onPick }: CellProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const longPressed = useRef(false);\n\n  const tonable = !!emoji.skinTones;\n  const displayChar = tonable && tone ? applyTone(emoji.char, tone) : emoji.char;\n\n  useEffect(() => () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n  }, []);\n\n  const triggerOpen = () => {\n    const node = buttonRef.current;\n    if (!node) return;\n    const r = node.getBoundingClientRect();\n    openPicker({ emoji, rect: { left: r.left, top: r.top, width: r.width } });\n  };\n\n  const handlePointerEnter = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType === \"touch\") return;\n    cancelClose();\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n    hoverTimer.current = setTimeout(triggerOpen, HOVER_INTENT_MS);\n  };\n\n  const handlePointerLeave = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    if (hoverTimer.current) {\n      clearTimeout(hoverTimer.current);\n      hoverTimer.current = null;\n    }\n    if (tonable) scheduleClose();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType !== \"touch\") return;\n    longPressed.current = false;\n    longPressTimer.current = setTimeout(() => {\n      longPressed.current = true;\n      triggerOpen();\n    }, LONG_PRESS_MS);\n  };\n  const handlePointerUp = () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    longPressTimer.current = null;\n  };\n\n  const handleClick = () => {\n    if (longPressed.current) {\n      longPressed.current = false;\n      return;\n    }\n    onPick();\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      className=\"relative rounded p-1 text-xl hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n      aria-label={emoji.name}\n      title={emoji.name}\n    >\n      {displayChar}\n      {tonable && (\n        <span className=\"absolute right-0.5 bottom-0.5 h-1 w-1 rounded-full bg-amber-400\" aria-hidden />\n      )}\n    </button>\n  );\n}\n\ntype PopoverProps = {\n  target: ToneTarget;\n  onPickBase: () => void;\n  onPickTone: (tone: SkinTone) => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n};\n\nfunction TonePopover({ target, onPickBase, onPickTone, onMouseEnter, onMouseLeave }: PopoverProps) {\n  const { emoji, rect } = target;\n  if (!emoji.skinTones) return null;\n\n  const centerX = rect.left + rect.width / 2;\n  const top = rect.top;\n  const POPOVER_HEIGHT_APPROX = 44;\n  const flipDown = top < POPOVER_HEIGHT_APPROX + 8;\n\n  const style: React.CSSProperties = flipDown\n    ? { position: \"fixed\", left: centerX, top: top + 32, transform: \"translateX(-50%)\" }\n    : { position: \"fixed\", left: centerX, top: top - 4, transform: \"translate(-50%, -100%)\" };\n\n  return (\n    <div\n      style={{ ...style, zIndex: 9999 }}\n      className=\"flex gap-0.5 rounded-md border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800\"\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <button\n        type=\"button\"\n        onClick={onPickBase}\n        className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n        aria-label={`${emoji.name} (no tone)`}\n      >\n        {emoji.char}\n      </button>\n      {SKIN_TONES.map((t, i) => (\n        <button\n          key={t}\n          type=\"button\"\n          onClick={() => onPickTone(t)}\n          className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n          aria-label={`${emoji.name} ${t} skin tone`}\n        >\n          {emoji.skinTones![i]}\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/chunk-WHOVPDC5.js

@@ -0,0 +1,215 @@
+import { useControllableState } from './chunk-EDYAXGUM.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { forwardRef, useRef, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function usePastePills({
+  threshold,
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange
+} = {}) {
+  const [heldPastes, setHeldPastes] = useControllableState(
+    controlledHeldPastes,
+    [],
+    onHeldPastesChange
+  );
+  const nextId = useRef(0);
+  const handlePaste = useCallback(
+    (event) => {
+      if (!threshold || threshold <= 0) return false;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (text.length < threshold) return false;
+      event.preventDefault();
+      nextId.current += 1;
+      const id = `paste-${nextId.current}`;
+      setHeldPastes((current) => [...current, { id, text }]);
+      return true;
+    },
+    [threshold, setHeldPastes]
+  );
+  const expand = useCallback(
+    (id) => {
+      const found = heldPastes.find((p) => p.id === id);
+      if (found === void 0) return void 0;
+      setHeldPastes((current) => current.filter((p) => p.id !== id));
+      return found.text;
+    },
+    [heldPastes, setHeldPastes]
+  );
+  const remove = useCallback(
+    (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
+    [setHeldPastes]
+  );
+  const clear = useCallback(() => setHeldPastes([]), [setHeldPastes]);
+  return { heldPastes, handlePaste, expand, remove, clear };
+}
+var PREVIEW_CHARS = 20;
+function withSeparators(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function endsOf(text) {
+  if (text.length <= PREVIEW_CHARS * 2) return text;
+  return `${text.slice(0, PREVIEW_CHARS)} \u2026 ${text.slice(-PREVIEW_CHARS)}`;
+}
+var Composer = forwardRef(
+  function Composer2({
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onSubmit,
+    placeholder = "Type a message...",
+    actions,
+    disabled = false,
+    className,
+    pasteThreshold,
+    heldPastes: controlledHeldPastes,
+    onHeldPastesChange
+  }, ref) {
+    const [value, setValue] = useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const pills = usePastePills({
+      threshold: pasteThreshold,
+      heldPastes: controlledHeldPastes,
+      onHeldPastesChange
+    });
+    const heldPastes = pills.heldPastes;
+    const textareaRef = useRef(null);
+    const handlePaste = useCallback(
+      (e) => {
+        pills.handlePaste(e);
+      },
+      [pills]
+    );
+    const composeOutgoing = useCallback(
+      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n"),
+      [value, heldPastes]
+    );
+    const hasContent = value.trim().length > 0 || heldPastes.length > 0;
+    const handleSubmit = useCallback(() => {
+      if (!hasContent || disabled) return;
+      onSubmit?.(composeOutgoing());
+      setValue("");
+      pills.clear();
+      textareaRef.current?.focus();
+    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, pills]);
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    const insertPaste = useCallback(
+      (paste) => {
+        const text = pills.expand(paste.id);
+        if (text === void 0) return;
+        setValue((current) => current ? `${current}
+
+${text}` : text);
+        textareaRef.current?.focus();
+      },
+      [pills, setValue]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-composer": "",
+        ref,
+        className: cn(
+          "rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          heldPastes.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-react-fancy-composer-paste-pills": "",
+              className: "flex flex-wrap gap-1.5 px-3 pt-3",
+              children: heldPastes.map((paste) => (
+                // `group` + `group-hover` rather than hover state: the preview is
+                // presentation, and a useState for it would be one more thing an
+                // agent could desynchronise.
+                /* @__PURE__ */ jsxs("span", { className: "group relative inline-flex", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill": paste.id,
+                      onClick: () => insertPaste(paste),
+                      disabled,
+                      "aria-label": `Insert this pasted text, ${withSeparators(paste.text.length)} characters`,
+                      "aria-describedby": `${paste.id}-preview`,
+                      className: "inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700",
+                      children: /* @__PURE__ */ jsxs("span", { children: [
+                        "Pasted text \xB7 ",
+                        withSeparators(paste.text.length),
+                        " characters"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill-remove": paste.id,
+                      onClick: () => pills.remove(paste.id),
+                      disabled,
+                      "aria-label": "Discard this pasted text",
+                      className: "absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100",
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: `${paste.id}-preview`,
+                      "data-react-fancy-composer-paste-pill-preview": paste.id,
+                      role: "tooltip",
+                      className: "pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900",
+                      children: endsOf(paste.text)
+                    }
+                  )
+                ] }, paste.id)
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder,
+              disabled,
+              rows: 3,
+              className: "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: disabled || !hasContent,
+                className: "rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100",
+                children: "Send"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Composer.displayName = "Composer";
+
+export { Composer, usePastePills };
+//# sourceMappingURL=chunk-WHOVPDC5.js.map
+//# sourceMappingURL=chunk-WHOVPDC5.js.map

package/dist/chunk-WHOVPDC5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-paste-pills.ts","../src/components/Composer/Composer.tsx"],"names":["Composer","useRef","useCallback"],"mappings":"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","file":"chunk-WHOVPDC5.js","sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useControllableState } from \"./use-controllable-state\";\n\n/**\n * A paste held beside a composer rather than inserted into it.\n *\n * There is deliberately **no `length` field.** It would be `text.length` and\n * nothing else, and a derived value stored beside its source is a value that can\n * disagree with it — the two drift the moment anything edits one. Read\n * `paste.text.length`.\n */\nexport interface HeldPaste {\n  id: string;\n  text: string;\n}\n\n/**\n * The minimum of a clipboard event this hook touches.\n *\n * Structural rather than `React.ClipboardEvent` so a host can call it from a\n * native listener, a synthetic one, or a test double. React's own event satisfies\n * it.\n */\nexport interface PasteEventLike {\n  clipboardData?: { getData(type: string): string } | null;\n  preventDefault(): void;\n}\n\nexport interface UsePastePillsOptions {\n  /**\n   * Hold a paste of at least this many characters. Try 500 — about a long\n   * paragraph.\n   *\n   * **No default, on purpose.** Paste is a fundamental interaction, so holding one\n   * is something a host asks for rather than something it discovers. Omit this and\n   * `handlePaste` always returns `false` and touches nothing.\n   */\n  threshold?: number;\n  /** Own the list yourself. Omit to let the hook keep it. */\n  heldPastes?: HeldPaste[];\n  onHeldPastesChange?: (pastes: HeldPaste[]) => void;\n}\n\nexport interface UsePastePillsResult {\n  heldPastes: HeldPaste[];\n  /**\n   * Call this from your OWN paste handler. Returns `true` if it took the paste —\n   * in which case it has already called `preventDefault()` — and `false` if it\n   * declined, having touched nothing.\n   *\n   * Composable on purpose: a host whose handler already intercepts paste for its\n   * own reasons needs to ask \"did you want this?\" rather than hand over the event.\n   *\n   *     function onPaste(e) {\n   *       if (pills.handlePaste(e)) return;\n   *       // ...your own handling\n   *     }\n   */\n  handlePaste: (event: PasteEventLike) => boolean;\n  /**\n   * Removes the paste and returns its text, for the host to insert into its own\n   * surface. `undefined` if there is no such id.\n   *\n   * The hook cannot insert it — it owns no DOM and does not know what a host's\n   * surface is. That is the point.\n   */\n  expand: (id: string) => string | undefined;\n  /** Discard one without returning it. */\n  remove: (id: string) => void;\n  /** Empty the list, e.g. after a send. */\n  clear: () => void;\n}\n\n/**\n * Hold a large paste as state, so a composer can show it as a pill instead of\n * turning itself into a scrolling wall.\n *\n * ---------------------------------------------------------------------------\n * Why this is a hook and not just a feature of `Composer`\n * ---------------------------------------------------------------------------\n *\n * `Composer` shipped the behaviour in 5.31.0 and the MOIC estate, who specified it,\n * then established something I had missed: their chat input is a contenteditable\n * rendering inline `[deal:42|Acme]` badges, so they **cannot** adopt `Composer` (a\n * plain textarea) however much they want its behaviour. Their plan to delete their\n * own composer when ours landed could never have worked.\n *\n * So the logic lives here and **`Composer` is its first caller.** One\n * implementation rather than two, which matters more than the convenience: two\n * copies of a rule drift, and the copy nobody reads is the one that rots. The rule\n * that must not drift is the one in `Composer`'s own tests — a send with pills\n * still closed carries the text.\n *\n * It owns no DOM. The host renders the pills.\n */\nexport function usePastePills({\n  threshold,\n  heldPastes: controlledHeldPastes,\n  onHeldPastesChange,\n}: UsePastePillsOptions = {}): UsePastePillsResult {\n  const [heldPastes, setHeldPastes] = useControllableState<HeldPaste[]>(\n    controlledHeldPastes,\n    [],\n    onHeldPastesChange,\n  );\n\n  /*\n   * A counter rather than `crypto.randomUUID()` or an index.\n   *\n   * An index is not an id — removing the first pill renumbers the rest, and a host\n   * keying its DOM on that remounts every pill and loses hover state. A counter in\n   * a ref is stable for the life of the component and needs no platform API that a\n   * server renderer might lack.\n   */\n  const nextId = useRef(0);\n\n  const handlePaste = useCallback(\n    (event: PasteEventLike): boolean => {\n      if (!threshold || threshold <= 0) return false;\n\n      const text = event.clipboardData?.getData(\"text/plain\") ?? \"\";\n\n      // Below the threshold, decline WITHOUT touching the event. A host calling\n      // this from inside its own handler has to be able to carry on as if the hook\n      // were not there.\n      if (text.length < threshold) return false;\n\n      event.preventDefault();\n      nextId.current += 1;\n      const id = `paste-${nextId.current}`;\n      setHeldPastes((current) => [...current, { id, text }]);\n\n      return true;\n    },\n    [threshold, setHeldPastes],\n  );\n\n  const expand = useCallback(\n    (id: string): string | undefined => {\n      const found = heldPastes.find((p) => p.id === id);\n\n      if (found === undefined) return undefined;\n\n      setHeldPastes((current) => current.filter((p) => p.id !== id));\n\n      return found.text;\n    },\n    [heldPastes, setHeldPastes],\n  );\n\n  const remove = useCallback(\n    (id: string) => setHeldPastes((current) => current.filter((p) => p.id !== id)),\n    [setHeldPastes],\n  );\n\n  const clear = useCallback(() => setHeldPastes([]), [setHeldPastes]);\n\n  return { heldPastes, handlePaste, expand, remove, clear };\n}\n","import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { usePastePills, type HeldPaste } from \"../../hooks/use-paste-pills\";\nimport type { ComposerProps } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview. */\nconst PREVIEW_CHARS = 20;\n\n/**\n * Thousands separators, written out rather than left to `toLocaleString()`.\n *\n * The number exists so someone can size the paste at a glance, and `2,036` sizes\n * faster than `2036`. It is not left to the runtime locale because the label beside\n * it (\"Pasted text\") is not localised either, so a locale-formatted number next to\n * an English noun would be half a translation.\n */\nfunction withSeparators(n: number): string {\n  return String(n).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n\n/** First and last N characters, middle elided. The ends say WHICH paste this is. */\nfunction endsOf(text: string): string {\n  if (text.length <= PREVIEW_CHARS * 2) return text;\n\n  return `${text.slice(0, PREVIEW_CHARS)} … ${text.slice(-PREVIEW_CHARS)}`;\n}\n\nexport const Composer = forwardRef<HTMLDivElement, ComposerProps>(\n  function Composer(\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onSubmit,\n      placeholder = \"Type a message...\",\n      actions,\n      disabled = false,\n      className,\n      pasteThreshold,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n    },\n    ref,\n  ) {\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    /*\n     * The holding logic lives in `usePastePills` and this is its first caller.\n     *\n     * It moved out in 5.32.0 because the estate that specified the feature cannot\n     * use this component at all — their chat input is a contenteditable rendering\n     * inline tag badges, which a textarea cannot do. One implementation rather than\n     * two: two copies of a rule drift, and the copy nobody reads is the one that\n     * rots. The rule that must not drift is the one below — a send with pills still\n     * closed carries the text.\n     */\n    const pills = usePastePills({\n      threshold: pasteThreshold,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n    });\n    const heldPastes = pills.heldPastes;\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n        // Composable by design, so this reads as a question rather than a handover.\n        // Nothing else here wants the paste, so the answer is simply ignored.\n        pills.handlePaste(e);\n      },\n      [pills],\n    );\n\n    /** Everything the person believes they are sending, in the order they built it. */\n    const composeOutgoing = useCallback(\n      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\"),\n      [value, heldPastes],\n    );\n\n    const hasContent = value.trim().length > 0 || heldPastes.length > 0;\n\n    const handleSubmit = useCallback(() => {\n      if (!hasContent || disabled) return;\n\n      /*\n       * THE DANGEROUS STATE, and the reason this feature needed a spec rather than\n       * a guess. A pill reads as \"your paste is attached\" — so a send that drops it\n       * means asking a question about a document without the document, and nobody\n       * can tell: the sender believes it went, the receiver sees a question about\n       * nothing.\n       *\n       * Held pastes go out in arrival order, after what was typed, because people\n       * type the question BEFORE pasting the thing it is about.\n       */\n      onSubmit?.(composeOutgoing());\n      setValue(\"\");\n      pills.clear();\n      textareaRef.current?.focus();\n    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, pills]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    /** Click a pill: dump it into the input, APPENDED to what is already typed. */\n    const insertPaste = useCallback(\n      (paste: HeldPaste) => {\n        // `expand` removes it and hands back the text; inserting is this\n        // component's job because the hook owns no DOM.\n        const text = pills.expand(paste.id);\n\n        if (text === undefined) return;\n\n        setValue((current) => (current ? `${current}\\n\\n${text}` : text));\n        textareaRef.current?.focus();\n      },\n      [pills, setValue],\n    );\n\n    return (\n      <div\n        data-react-fancy-composer=\"\"\n        ref={ref}\n        className={cn(\n          \"rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        {heldPastes.length > 0 && (\n          <div\n            data-react-fancy-composer-paste-pills=\"\"\n            className=\"flex flex-wrap gap-1.5 px-3 pt-3\"\n          >\n            {heldPastes.map((paste) => (\n              // `group` + `group-hover` rather than hover state: the preview is\n              // presentation, and a useState for it would be one more thing an\n              // agent could desynchronise.\n              <span key={paste.id} className=\"group relative inline-flex\">\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill={paste.id}\n                  onClick={() => insertPaste(paste)}\n                  disabled={disabled}\n                  // No `title`. A native tooltip plus the hover preview below\n                  // renders TWO tooltips on the same hover, at different delays.\n                  // The label says what clicking does; the preview says what the\n                  // text is, and it is linked rather than merely adjacent so a\n                  // screen reader reaches it too.\n                  aria-label={`Insert this pasted text, ${withSeparators(paste.text.length)} characters`}\n                  aria-describedby={`${paste.id}-preview`}\n                  // `pr-7` leaves room for the absolutely-positioned × that sits\n                  // over this button's right edge. With a smaller right padding the\n                  // × lands on top of the label.\n                  className=\"inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700\"\n                >\n                  <span>\n                    Pasted text · {withSeparators(paste.text.length)} characters\n                  </span>\n                </button>\n\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill-remove={paste.id}\n                  onClick={() => pills.remove(paste.id)}\n                  disabled={disabled}\n                  aria-label=\"Discard this pasted text\"\n                  className=\"absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100\"\n                >\n                  ×\n                </button>\n\n                <span\n                  id={`${paste.id}-preview`}\n                  data-react-fancy-composer-paste-pill-preview={paste.id}\n                  role=\"tooltip\"\n                  className=\"pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900\"\n                >\n                  {endsOf(paste.text)}\n                </span>\n              </span>\n            ))}\n          </div>\n        )}\n\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          placeholder={placeholder}\n          disabled={disabled}\n          rows={3}\n          className=\"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\"\n        />\n        <div className=\"flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800\">\n          <div className=\"flex items-center gap-1\">{actions}</div>\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={disabled || !hasContent}\n            className=\"rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100\"\n          >\n            Send\n          </button>\n        </div>\n      </div>\n    );\n  },\n);\n\nComposer.displayName = \"Composer\";\n"]}

package/dist/{chunk-N6K2CTSU.cjs → chunk-WIS4QRGK.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkXCZZVRBY_cjs = require('./chunk-XCZZVRBY.cjs');
-var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var reactDom = require('react-dom');
@@ -21,7 +21,7 @@ function readStoredTone() {
   }
 }
 function EmojiSelect({ value, defaultValue, onChange, placeholder = "Search emojis...", className }) {
-  const [selected, setSelected] = chunkOUOEQZHY_cjs.useControllableState(value, defaultValue ?? "", onChange);
+  const [selected, setSelected] = chunkSNHU2AI4_cjs.useControllableState(value, defaultValue ?? "", onChange);
   const [open, setOpen] = react.useState(false);
   const [query, setQuery] = react.useState("");
   const [activeCategory, setActiveCategory] = react.useState("smileys");
@@ -288,5 +288,5 @@ function TonePopover({ target, onPickBase, onPickTone, onMouseEnter, onMouseLeav
 }
 
 exports.EmojiSelect = EmojiSelect;
-//# sourceMappingURL=chunk-N6K2CTSU.cjs.map
-//# sourceMappingURL=chunk-N6K2CTSU.cjs.map
+//# sourceMappingURL=chunk-WIS4QRGK.cjs.map
+//# sourceMappingURL=chunk-WIS4QRGK.cjs.map

package/dist/{chunk-N6K2CTSU.cjs.map → chunk-WIS4QRGK.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmojiSelect/EmojiSelect.tsx"],"names":["SKIN_TONES","useControllableState","useState","useRef","useCallback","useMemo","EMOJI_DATA","applyTone","useEffect","jsxs","cn","jsx","EMOJI_CATEGORY_ORDER","createPortal"],"mappings":";;;;;;;;;AAQA,IAAM,gBAAA,GAAmB,kBAAA;AACzB,IAAM,aAAA,GAAgB,GAAA;AACtB,IAAM,eAAA,GAAkB,GAAA;AACxB,IAAM,oBAAA,GAAuB,GAAA;AAW7B,SAAS,cAAA,GAAkC;AACzC,EAAA,IAAI,OAAO,MAAA,KAAW,WAAA,EAAa,OAAO,IAAA;AAC1C,EAAA,IAAI;AACF,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,YAAA,EAAc,OAAA,CAAQ,gBAAgB,CAAA;AACvD,IAAA,OAAQA,4BAAA,CAAiC,QAAA,CAAS,CAAA,IAAK,EAAE,IAAK,CAAA,GAAiB,IAAA;AAAA,EACjF,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;AAEO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,YAAA,EAAc,UAAU,WAAA,GAAc,kBAAA,EAAoB,WAAU,EAAqB;AAC5H,EAAA,MAAM,CAAC,UAAU,WAAW,CAAA,GAAIC,uCAAqB,KAAA,EAAO,YAAA,IAAgB,IAAI,QAAQ,CAAA;AACxF,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,EAAE,CAAA;AACrC,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAA2B,SAAS,CAAA;AAChF,EAAA,MAAM,CAAC,IAAA,EAAM,YAAY,IAAIA,cAAA,CAA0B,MAAM,gBAAgB,CAAA;AAC7E,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAA4B,IAAI,CAAA;AACpE,EAAA,MAAM,UAAA,GAAaC,aAA6C,IAAI,CAAA;AAEpE,EAAA,MAAM,OAAA,GAAUC,iBAAA,CAAY,CAAC,CAAA,KAAuB;AAClD,IAAA,YAAA,CAAa,CAAC,CAAA;AACd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACnC,IAAA,IAAI;AACF,MAAA,IAAI,CAAA,EAAG,MAAA,CAAO,YAAA,EAAc,OAAA,CAAQ,kBAAkB,CAAC,CAAA;AAAA,WAClD,MAAA,CAAO,YAAA,EAAc,UAAA,CAAW,gBAAgB,CAAA;AAAA,IACvD,CAAA,CAAA,MAAQ;AAAA,IAAC;AAAA,EACX,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,QAAA,GAAWC,cAAQ,MAAM;AAC7B,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,IAAA,MAAM,KAAA,GAAQ,MAAM,WAAA,EAAY;AAChC,IAAA,MAAM,OAAqB,EAAC;AAC5B,IAAA,KAAA,MAAW,KAAA,IAAS,MAAA,CAAO,MAAA,CAAOC,4BAAU,CAAA,EAAG;AAC7C,MAAA,KAAA,MAAW,CAAA,IAAK,MAAM,MAAA,EAAQ;AAC5B,QAAA,IAAI,EAAE,IAAA,CAAK,QAAA,CAAS,KAAK,CAAA,EAAG,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,MACzC;AAAA,IACF;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,cAAcF,iBAAA,CAAY,MAAM,cAAc,IAAI,CAAA,EAAG,EAAE,CAAA;AAE7D,EAAA,MAAM,UAAA,GAAaA,iBAAA,CAAY,CAAC,MAAA,KAAuB;AACrD,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AAAA,IACvB;AACA,IAAA,aAAA,CAAc,MAAM,CAAA;AAAA,EACtB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAA,GAAgBA,kBAAY,MAAM;AACtC,IAAA,IAAI,UAAA,CAAW,OAAA,EAAS,YAAA,CAAa,UAAA,CAAW,OAAO,CAAA;AACvD,IAAA,UAAA,CAAW,OAAA,GAAU,UAAA,CAAW,WAAA,EAAa,oBAAoB,CAAA;AAAA,EACnE,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAsB;AAClC,IAAA,MAAM,IAAA,GAAO,MAAM,SAAA,IAAa,IAAA,GAAOG,4BAAU,KAAA,CAAM,IAAA,EAAM,IAAI,CAAA,GAAI,KAAA,CAAM,IAAA;AAC3E,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,OAAA,CAAQ,KAAK,CAAA;AACb,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,WAAA,EAAY;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAmB,CAAA,KAAgB;AACnD,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,MAAM,IAAA,GAAOA,2BAAA,CAAU,KAAA,CAAM,IAAA,EAAM,CAAC,CAAA;AACpC,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,OAAA,CAAQ,KAAK,CAAA;AACb,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,WAAA,EAAY;AAAA,EACd,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAM,WAAA,EAAY;AAAA,EACzB,CAAA,EAAG,CAAC,IAAA,EAAM,WAAW,CAAC,CAAA;AAEtB,EAAA,uBACEC,eAAA,CAAC,SAAI,SAAA,EAAWC,oBAAA,CAAG,yBAAyB,SAAS,CAAA,EAAG,iCAA8B,EAAA,EACpF,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAU,sKAAA;AAAA,QACV,SAAS,MAAM,OAAA,CAAQ,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,QAE/B,QAAA,EAAA,QAAA,mBAAWA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,QAAA,EAAS,CAAA,mBAAUA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA,YAAA,EAAU;AAAA;AAAA,KACtG;AAAA,IAEC,IAAA,oBACCF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sIAAA,EACb,QAAA,EAAA;AAAA,sBAAAE,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,MAAA;AAAA,UACL,KAAA,EAAO,KAAA;AAAA,UACP,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,UACxC,WAAA;AAAA,UACA,SAAA,EAAU,6KAAA;AAAA,UACV,SAAA,EAAS;AAAA;AAAA,OACX;AAAA,MAEC,CAAC,yBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oFAAA,EACZ,QAAA,EAAAC,sCAAA,CAAqB,GAAA,CAAI,CAAC,GAAA,qBACzBD,cAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,MAAM,iBAAA,CAAkB,GAAG,CAAA;AAAA,UACpC,SAAA,EAAWD,oBAAA;AAAA,YACT,uEAAA;AAAA,YACA,mBAAmB,GAAA,IAAO;AAAA,WAC5B;AAAA,UACA,YAAA,EAAYJ,4BAAA,CAAW,GAAG,CAAA,CAAE,KAAA;AAAA,UAE3B,QAAA,EAAAA,4BAAA,CAAW,GAAG,CAAA,CAAE;AAAA,SAAA;AAAA,QATZ;AAAA,OAWR,CAAA,EACH,CAAA;AAAA,sBAGFK,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACZ,QAAA,EAAA,KAAA,mBACCA,cAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,MAAA,EAAQ,YAAY,EAAC;AAAA,UACrB,IAAA;AAAA,UACA,UAAA;AAAA,UACA,aAAA;AAAA,UACA,WAAA;AAAA,UACA,MAAA,EAAQ;AAAA;AAAA,OACV,mCAEC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAA,cAAA,CAAC,SAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAAL,4BAAA,CAAW,cAAc,EAAE,KAAA,EAC9B,CAAA;AAAA,wBACAK,cAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQL,4BAAA,CAAW,cAAc,CAAA,CAAE,MAAA;AAAA,YACnC,IAAA;AAAA,YACA,UAAA;AAAA,YACA,aAAA;AAAA,YACA,WAAA;AAAA,YACA,MAAA,EAAQ;AAAA;AAAA;AACV,OAAA,EACF,CAAA,EAEJ;AAAA,KAAA,EACF,CAAA;AAAA,IAGD,UAAA,IAAc,OAAO,QAAA,KAAa,WAAA,IACjCO,qBAAA;AAAA,sBACEF,cAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,MAAA,EAAQ,UAAA;AAAA,UACR,UAAA,EAAY,MAAM,IAAA,CAAK,UAAA,CAAW,KAAK,CAAA;AAAA,UACvC,YAAY,CAAC,CAAA,KAAM,QAAA,CAAS,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,UAC/C,YAAA,EAAc,WAAA;AAAA,UACd,YAAA,EAAc;AAAA;AAAA,OAChB;AAAA,MACA,QAAA,CAAS;AAAA;AACX,GAAA,EACJ,CAAA;AAEJ;AAWA,SAAS,SAAA,CAAU,EAAE,MAAA,EAAQ,IAAA,EAAM,YAAY,aAAA,EAAe,WAAA,EAAa,QAAO,EAAc;AAC9F,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,4BACZ,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,qBACXA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MAEC,KAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA,EAAQ,MAAM,MAAA,CAAO,KAAK;AAAA,KAAA;AAAA,IANrB,KAAA,CAAM;AAAA,GAQd,CAAA,EACH,CAAA;AAEJ;AAWA,SAAS,SAAA,CAAU,EAAE,KAAA,EAAO,IAAA,EAAM,YAAY,aAAA,EAAe,WAAA,EAAa,QAAO,EAAc;AAC7F,EAAA,MAAM,SAAA,GAAYR,aAAiC,IAAI,CAAA;AACvD,EAAA,MAAM,cAAA,GAAiBA,aAA6C,IAAI,CAAA;AACxE,EAAA,MAAM,UAAA,GAAaA,aAA6C,IAAI,CAAA;AACpE,EAAA,MAAM,WAAA,GAAcA,aAAO,KAAK,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAU,CAAC,CAAC,KAAA,CAAM,SAAA;AACxB,EAAA,MAAM,WAAA,GAAc,WAAW,IAAA,GAAOI,2BAAA,CAAU,MAAM,IAAA,EAAM,IAAI,IAAI,KAAA,CAAM,IAAA;AAE1E,EAAAC,eAAA,CAAU,MAAM,MAAM;AACpB,IAAA,IAAI,cAAA,CAAe,OAAA,EAAS,YAAA,CAAa,cAAA,CAAe,OAAO,CAAA;AAC/D,IAAA,IAAI,UAAA,CAAW,OAAA,EAAS,YAAA,CAAa,UAAA,CAAW,OAAO,CAAA;AAAA,EACzD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAM,OAAO,SAAA,CAAU,OAAA;AACvB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,CAAA,GAAI,KAAK,qBAAA,EAAsB;AACrC,IAAA,UAAA,CAAW,EAAE,KAAA,EAAO,IAAA,EAAM,EAAE,MAAM,CAAA,CAAE,IAAA,EAAM,GAAA,EAAK,CAAA,CAAE,GAAA,EAAK,KAAA,EAAO,CAAA,CAAE,KAAA,IAAS,CAAA;AAAA,EAC1E,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,CAAA,KAA0B;AACpD,IAAA,IAAI,CAAC,OAAA,IAAW,CAAA,CAAE,WAAA,KAAgB,OAAA,EAAS;AAC3C,IAAA,WAAA,EAAY;AACZ,IAAA,IAAI,UAAA,CAAW,OAAA,EAAS,YAAA,CAAa,UAAA,CAAW,OAAO,CAAA;AACvD,IAAA,UAAA,CAAW,OAAA,GAAU,UAAA,CAAW,WAAA,EAAa,eAAe,CAAA;AAAA,EAC9D,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,CAAA,KAA0B;AACpD,IAAA,IAAI,CAAA,CAAE,gBAAgB,OAAA,EAAS;AAC/B,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AAAA,IACvB;AACA,IAAA,IAAI,SAAS,aAAA,EAAc;AAAA,EAC7B,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,CAAA,KAA0B;AACnD,IAAA,IAAI,CAAC,OAAA,IAAW,CAAA,CAAE,WAAA,KAAgB,OAAA,EAAS;AAC3C,IAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AACtB,IAAA,cAAA,CAAe,OAAA,GAAU,WAAW,MAAM;AACxC,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,MAAA,WAAA,EAAY;AAAA,IACd,GAAG,aAAa,CAAA;AAAA,EAClB,CAAA;AACA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,cAAA,CAAe,OAAA,EAAS,YAAA,CAAa,cAAA,CAAe,OAAO,CAAA;AAC/D,IAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,EAC3B,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,YAAY,OAAA,EAAS;AACvB,MAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AACtB,MAAA;AAAA,IACF;AACA,IAAA,MAAA,EAAO;AAAA,EACT,CAAA;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,SAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,cAAA,EAAgB,kBAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,aAAA,EAAe,iBAAA;AAAA,MACf,WAAA,EAAa,eAAA;AAAA,MACb,eAAA,EAAiB,eAAA;AAAA,MACjB,SAAA,EAAU,uEAAA;AAAA,MACV,cAAY,KAAA,CAAM,IAAA;AAAA,MAClB,OAAO,KAAA,CAAM,IAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,QACA,2BACCE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iEAAA,EAAkE,eAAW,IAAA,EAAC;AAAA;AAAA;AAAA,GAElG;AAEJ;AAUA,SAAS,YAAY,EAAE,MAAA,EAAQ,YAAY,UAAA,EAAY,YAAA,EAAc,cAAa,EAAiB;AACjG,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAK,GAAI,MAAA;AACxB,EAAA,IAAI,CAAC,KAAA,CAAM,SAAA,EAAW,OAAO,IAAA;AAE7B,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,KAAA,GAAQ,CAAA;AACzC,EAAA,MAAM,MAAM,IAAA,CAAK,GAAA;AACjB,EAAA,MAAM,qBAAA,GAAwB,EAAA;AAC9B,EAAA,MAAM,QAAA,GAAW,MAAM,qBAAA,GAAwB,CAAA;AAE/C,EAAA,MAAM,KAAA,GAA6B,WAC/B,EAAE,QAAA,EAAU,SAAS,IAAA,EAAM,OAAA,EAAS,GAAA,EAAK,GAAA,GAAM,EAAA,EAAI,SAAA,EAAW,oBAAmB,GACjF,EAAE,UAAU,OAAA,EAAS,IAAA,EAAM,SAAS,GAAA,EAAK,GAAA,GAAM,CAAA,EAAG,SAAA,EAAW,wBAAA,EAAyB;AAE1F,EAAA,uBACEF,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,QAAQ,IAAA,EAAK;AAAA,MAChC,SAAA,EAAU,6GAAA;AAAA,MACV,YAAA;AAAA,MACA,YAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAE,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,UAAA;AAAA,YACT,SAAA,EAAU,8DAAA;AAAA,YACV,YAAA,EAAY,CAAA,EAAG,KAAA,CAAM,IAAI,CAAA,UAAA,CAAA;AAAA,YAExB,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,SACT;AAAA,QACCX,4BAAA,CAAW,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qBAClBW,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,UAAA,CAAW,CAAC,CAAA;AAAA,YAC3B,SAAA,EAAU,8DAAA;AAAA,YACV,YAAA,EAAY,CAAA,EAAG,KAAA,CAAM,IAAI,IAAI,CAAC,CAAA,UAAA,CAAA;AAAA,YAE7B,QAAA,EAAA,KAAA,CAAM,UAAW,CAAC;AAAA,WAAA;AAAA,UANd;AAAA,SAQR;AAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-N6K2CTSU.cjs","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { EMOJI_CATEGORY_ORDER, EMOJI_DATA, type EmojiCategoryKey, type EmojiEntry } from \"../../data/emoji-data\";\nimport { applyTone, SKIN_TONES, type SkinTone } from \"../../data/emoji-utils\";\nimport type { EmojiSelectProps } from \"./EmojiSelect.types\";\n\nconst TONE_STORAGE_KEY = \"fancy:emoji-tone\";\nconst LONG_PRESS_MS = 400;\nconst HOVER_INTENT_MS = 120;\nconst HOVER_LEAVE_GRACE_MS = 220;\n\ntype ToneTarget = {\n  emoji: EmojiEntry;\n  rect: { left: number; top: number; width: number };\n};\n\n// Deliberately no hover-capability gate. We use `pointerType` on pointer events so touch\n// inputs never trigger the hover path (they go through long-press instead), and mouse/pen\n// inputs always work regardless of what `(hover: hover)` resolves to in the current env.\n\nfunction readStoredTone(): SkinTone | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const v = window.localStorage?.getItem(TONE_STORAGE_KEY);\n    return (SKIN_TONES as readonly string[]).includes(v ?? \"\") ? (v as SkinTone) : null;\n  } catch {\n    return null;\n  }\n}\n\nexport function EmojiSelect({ value, defaultValue, onChange, placeholder = \"Search emojis...\", className }: EmojiSelectProps) {\n  const [selected, setSelected] = useControllableState(value, defaultValue ?? \"\", onChange);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeCategory, setActiveCategory] = useState<EmojiCategoryKey>(\"smileys\");\n  const [tone, setToneState] = useState<SkinTone | null>(() => readStoredTone());\n  const [toneTarget, setToneTarget] = useState<ToneTarget | null>(null);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const setTone = useCallback((t: SkinTone | null) => {\n    setToneState(t);\n    if (typeof window === \"undefined\") return;\n    try {\n      if (t) window.localStorage?.setItem(TONE_STORAGE_KEY, t);\n      else window.localStorage?.removeItem(TONE_STORAGE_KEY);\n    } catch {}\n  }, []);\n\n  const filtered = useMemo(() => {\n    if (!query) return null;\n    const lower = query.toLowerCase();\n    const hits: EmojiEntry[] = [];\n    for (const group of Object.values(EMOJI_DATA)) {\n      for (const e of group.emojis) {\n        if (e.name.includes(lower)) hits.push(e);\n      }\n    }\n    return hits;\n  }, [query]);\n\n  const closePicker = useCallback(() => setToneTarget(null), []);\n\n  const openPicker = useCallback((target: ToneTarget) => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n    setToneTarget(target);\n  }, []);\n\n  const scheduleClose = useCallback(() => {\n    if (leaveTimer.current) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(closePicker, HOVER_LEAVE_GRACE_MS);\n  }, [closePicker]);\n\n  const cancelClose = useCallback(() => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n  }, []);\n\n  const pick = (emoji: EmojiEntry) => {\n    const char = emoji.skinTones && tone ? applyTone(emoji.char, tone) : emoji.char;\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  const pickTone = (emoji: EmojiEntry, t: SkinTone) => {\n    setTone(t);\n    const char = applyTone(emoji.char, t);\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  useEffect(() => {\n    if (!open) closePicker();\n  }, [open, closePicker]);\n\n  return (\n    <div className={cn(\"relative inline-block\", className)} data-react-fancy-emoji-select=\"\">\n      <button\n        type=\"button\"\n        className=\"flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24]\"\n        onClick={() => setOpen((v) => !v)}\n      >\n        {selected ? <span className=\"text-xl\">{selected}</span> : <span className=\"text-zinc-400\">Pick emoji</span>}\n      </button>\n\n      {open && (\n        <div className=\"absolute z-50 mt-1 w-80 rounded-lg border border-zinc-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 fancy-fade-in\">\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder={placeholder}\n            className=\"mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100\"\n            autoFocus\n          />\n\n          {!query && (\n            <div className=\"mb-2 flex gap-1 overflow-x-auto border-b border-zinc-100 pb-2 dark:border-zinc-700\">\n              {EMOJI_CATEGORY_ORDER.map((key) => (\n                <button\n                  key={key}\n                  type=\"button\"\n                  onClick={() => setActiveCategory(key)}\n                  className={cn(\n                    \"shrink-0 rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n                    activeCategory === key && \"bg-zinc-100 dark:bg-zinc-700\",\n                  )}\n                  aria-label={EMOJI_DATA[key].label}\n                >\n                  {EMOJI_DATA[key].icon}\n                </button>\n              ))}\n            </div>\n          )}\n\n          <div className=\"max-h-64 overflow-y-auto\">\n            {query ? (\n              <EmojiGrid\n                emojis={filtered ?? []}\n                tone={tone}\n                openPicker={openPicker}\n                scheduleClose={scheduleClose}\n                cancelClose={cancelClose}\n                onPick={pick}\n              />\n            ) : (\n              <div>\n                <div className=\"px-1 py-1 text-xs font-semibold uppercase text-zinc-500\">\n                  {EMOJI_DATA[activeCategory].label}\n                </div>\n                <EmojiGrid\n                  emojis={EMOJI_DATA[activeCategory].emojis}\n                  tone={tone}\n                  openPicker={openPicker}\n                  scheduleClose={scheduleClose}\n                  cancelClose={cancelClose}\n                  onPick={pick}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {toneTarget && typeof document !== \"undefined\" &&\n        createPortal(\n          <TonePopover\n            target={toneTarget}\n            onPickBase={() => pick(toneTarget.emoji)}\n            onPickTone={(t) => pickTone(toneTarget.emoji, t)}\n            onMouseEnter={cancelClose}\n            onMouseLeave={scheduleClose}\n          />,\n          document.body,\n        )}\n    </div>\n  );\n}\n\ntype GridProps = {\n  emojis: EmojiEntry[];\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: (emoji: EmojiEntry) => void;\n};\n\nfunction EmojiGrid({ emojis, tone, openPicker, scheduleClose, cancelClose, onPick }: GridProps) {\n  return (\n    <div className=\"grid grid-cols-8 gap-0.5\">\n      {emojis.map((emoji) => (\n        <EmojiCell\n          key={emoji.char}\n          emoji={emoji}\n          tone={tone}\n          openPicker={openPicker}\n          scheduleClose={scheduleClose}\n          cancelClose={cancelClose}\n          onPick={() => onPick(emoji)}\n        />\n      ))}\n    </div>\n  );\n}\n\ntype CellProps = {\n  emoji: EmojiEntry;\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: () => void;\n};\n\nfunction EmojiCell({ emoji, tone, openPicker, scheduleClose, cancelClose, onPick }: CellProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const longPressed = useRef(false);\n\n  const tonable = !!emoji.skinTones;\n  const displayChar = tonable && tone ? applyTone(emoji.char, tone) : emoji.char;\n\n  useEffect(() => () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n  }, []);\n\n  const triggerOpen = () => {\n    const node = buttonRef.current;\n    if (!node) return;\n    const r = node.getBoundingClientRect();\n    openPicker({ emoji, rect: { left: r.left, top: r.top, width: r.width } });\n  };\n\n  const handlePointerEnter = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType === \"touch\") return;\n    cancelClose();\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n    hoverTimer.current = setTimeout(triggerOpen, HOVER_INTENT_MS);\n  };\n\n  const handlePointerLeave = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    if (hoverTimer.current) {\n      clearTimeout(hoverTimer.current);\n      hoverTimer.current = null;\n    }\n    if (tonable) scheduleClose();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType !== \"touch\") return;\n    longPressed.current = false;\n    longPressTimer.current = setTimeout(() => {\n      longPressed.current = true;\n      triggerOpen();\n    }, LONG_PRESS_MS);\n  };\n  const handlePointerUp = () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    longPressTimer.current = null;\n  };\n\n  const handleClick = () => {\n    if (longPressed.current) {\n      longPressed.current = false;\n      return;\n    }\n    onPick();\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      className=\"relative rounded p-1 text-xl hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n      aria-label={emoji.name}\n      title={emoji.name}\n    >\n      {displayChar}\n      {tonable && (\n        <span className=\"absolute right-0.5 bottom-0.5 h-1 w-1 rounded-full bg-amber-400\" aria-hidden />\n      )}\n    </button>\n  );\n}\n\ntype PopoverProps = {\n  target: ToneTarget;\n  onPickBase: () => void;\n  onPickTone: (tone: SkinTone) => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n};\n\nfunction TonePopover({ target, onPickBase, onPickTone, onMouseEnter, onMouseLeave }: PopoverProps) {\n  const { emoji, rect } = target;\n  if (!emoji.skinTones) return null;\n\n  const centerX = rect.left + rect.width / 2;\n  const top = rect.top;\n  const POPOVER_HEIGHT_APPROX = 44;\n  const flipDown = top < POPOVER_HEIGHT_APPROX + 8;\n\n  const style: React.CSSProperties = flipDown\n    ? { position: \"fixed\", left: centerX, top: top + 32, transform: \"translateX(-50%)\" }\n    : { position: \"fixed\", left: centerX, top: top - 4, transform: \"translate(-50%, -100%)\" };\n\n  return (\n    <div\n      style={{ ...style, zIndex: 9999 }}\n      className=\"flex gap-0.5 rounded-md border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800\"\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <button\n        type=\"button\"\n        onClick={onPickBase}\n        className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n        aria-label={`${emoji.name} (no tone)`}\n      >\n        {emoji.char}\n      </button>\n      {SKIN_TONES.map((t, i) => (\n        <button\n          key={t}\n          type=\"button\"\n          onClick={() => onPickTone(t)}\n          className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n          aria-label={`${emoji.name} ${t} skin tone`}\n        >\n          {emoji.skinTones![i]}\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/EmojiSelect/EmojiSelect.tsx"],"names":["SKIN_TONES","useControllableState","useState","useRef","useCallback","useMemo","EMOJI_DATA","applyTone","useEffect","jsxs","cn","jsx","EMOJI_CATEGORY_ORDER","createPortal"],"mappings":"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","file":"chunk-WIS4QRGK.cjs","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { EMOJI_CATEGORY_ORDER, EMOJI_DATA, type EmojiCategoryKey, type EmojiEntry } from \"../../data/emoji-data\";\nimport { applyTone, SKIN_TONES, type SkinTone } from \"../../data/emoji-utils\";\nimport type { EmojiSelectProps } from \"./EmojiSelect.types\";\n\nconst TONE_STORAGE_KEY = \"fancy:emoji-tone\";\nconst LONG_PRESS_MS = 400;\nconst HOVER_INTENT_MS = 120;\nconst HOVER_LEAVE_GRACE_MS = 220;\n\ntype ToneTarget = {\n  emoji: EmojiEntry;\n  rect: { left: number; top: number; width: number };\n};\n\n// Deliberately no hover-capability gate. We use `pointerType` on pointer events so touch\n// inputs never trigger the hover path (they go through long-press instead), and mouse/pen\n// inputs always work regardless of what `(hover: hover)` resolves to in the current env.\n\nfunction readStoredTone(): SkinTone | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const v = window.localStorage?.getItem(TONE_STORAGE_KEY);\n    return (SKIN_TONES as readonly string[]).includes(v ?? \"\") ? (v as SkinTone) : null;\n  } catch {\n    return null;\n  }\n}\n\nexport function EmojiSelect({ value, defaultValue, onChange, placeholder = \"Search emojis...\", className }: EmojiSelectProps) {\n  const [selected, setSelected] = useControllableState(value, defaultValue ?? \"\", onChange);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeCategory, setActiveCategory] = useState<EmojiCategoryKey>(\"smileys\");\n  const [tone, setToneState] = useState<SkinTone | null>(() => readStoredTone());\n  const [toneTarget, setToneTarget] = useState<ToneTarget | null>(null);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const setTone = useCallback((t: SkinTone | null) => {\n    setToneState(t);\n    if (typeof window === \"undefined\") return;\n    try {\n      if (t) window.localStorage?.setItem(TONE_STORAGE_KEY, t);\n      else window.localStorage?.removeItem(TONE_STORAGE_KEY);\n    } catch {}\n  }, []);\n\n  const filtered = useMemo(() => {\n    if (!query) return null;\n    const lower = query.toLowerCase();\n    const hits: EmojiEntry[] = [];\n    for (const group of Object.values(EMOJI_DATA)) {\n      for (const e of group.emojis) {\n        if (e.name.includes(lower)) hits.push(e);\n      }\n    }\n    return hits;\n  }, [query]);\n\n  const closePicker = useCallback(() => setToneTarget(null), []);\n\n  const openPicker = useCallback((target: ToneTarget) => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n    setToneTarget(target);\n  }, []);\n\n  const scheduleClose = useCallback(() => {\n    if (leaveTimer.current) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(closePicker, HOVER_LEAVE_GRACE_MS);\n  }, [closePicker]);\n\n  const cancelClose = useCallback(() => {\n    if (leaveTimer.current) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = null;\n    }\n  }, []);\n\n  const pick = (emoji: EmojiEntry) => {\n    const char = emoji.skinTones && tone ? applyTone(emoji.char, tone) : emoji.char;\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  const pickTone = (emoji: EmojiEntry, t: SkinTone) => {\n    setTone(t);\n    const char = applyTone(emoji.char, t);\n    setSelected(char);\n    setOpen(false);\n    setQuery(\"\");\n    closePicker();\n  };\n\n  useEffect(() => {\n    if (!open) closePicker();\n  }, [open, closePicker]);\n\n  return (\n    <div className={cn(\"relative inline-block\", className)} data-react-fancy-emoji-select=\"\">\n      <button\n        type=\"button\"\n        className=\"flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24]\"\n        onClick={() => setOpen((v) => !v)}\n      >\n        {selected ? <span className=\"text-xl\">{selected}</span> : <span className=\"text-zinc-400\">Pick emoji</span>}\n      </button>\n\n      {open && (\n        <div className=\"absolute z-50 mt-1 w-80 rounded-lg border border-zinc-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 fancy-fade-in\">\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder={placeholder}\n            className=\"mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100\"\n            autoFocus\n          />\n\n          {!query && (\n            <div className=\"mb-2 flex gap-1 overflow-x-auto border-b border-zinc-100 pb-2 dark:border-zinc-700\">\n              {EMOJI_CATEGORY_ORDER.map((key) => (\n                <button\n                  key={key}\n                  type=\"button\"\n                  onClick={() => setActiveCategory(key)}\n                  className={cn(\n                    \"shrink-0 rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n                    activeCategory === key && \"bg-zinc-100 dark:bg-zinc-700\",\n                  )}\n                  aria-label={EMOJI_DATA[key].label}\n                >\n                  {EMOJI_DATA[key].icon}\n                </button>\n              ))}\n            </div>\n          )}\n\n          <div className=\"max-h-64 overflow-y-auto\">\n            {query ? (\n              <EmojiGrid\n                emojis={filtered ?? []}\n                tone={tone}\n                openPicker={openPicker}\n                scheduleClose={scheduleClose}\n                cancelClose={cancelClose}\n                onPick={pick}\n              />\n            ) : (\n              <div>\n                <div className=\"px-1 py-1 text-xs font-semibold uppercase text-zinc-500\">\n                  {EMOJI_DATA[activeCategory].label}\n                </div>\n                <EmojiGrid\n                  emojis={EMOJI_DATA[activeCategory].emojis}\n                  tone={tone}\n                  openPicker={openPicker}\n                  scheduleClose={scheduleClose}\n                  cancelClose={cancelClose}\n                  onPick={pick}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {toneTarget && typeof document !== \"undefined\" &&\n        createPortal(\n          <TonePopover\n            target={toneTarget}\n            onPickBase={() => pick(toneTarget.emoji)}\n            onPickTone={(t) => pickTone(toneTarget.emoji, t)}\n            onMouseEnter={cancelClose}\n            onMouseLeave={scheduleClose}\n          />,\n          document.body,\n        )}\n    </div>\n  );\n}\n\ntype GridProps = {\n  emojis: EmojiEntry[];\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: (emoji: EmojiEntry) => void;\n};\n\nfunction EmojiGrid({ emojis, tone, openPicker, scheduleClose, cancelClose, onPick }: GridProps) {\n  return (\n    <div className=\"grid grid-cols-8 gap-0.5\">\n      {emojis.map((emoji) => (\n        <EmojiCell\n          key={emoji.char}\n          emoji={emoji}\n          tone={tone}\n          openPicker={openPicker}\n          scheduleClose={scheduleClose}\n          cancelClose={cancelClose}\n          onPick={() => onPick(emoji)}\n        />\n      ))}\n    </div>\n  );\n}\n\ntype CellProps = {\n  emoji: EmojiEntry;\n  tone: SkinTone | null;\n  openPicker: (target: ToneTarget) => void;\n  scheduleClose: () => void;\n  cancelClose: () => void;\n  onPick: () => void;\n};\n\nfunction EmojiCell({ emoji, tone, openPicker, scheduleClose, cancelClose, onPick }: CellProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const longPressed = useRef(false);\n\n  const tonable = !!emoji.skinTones;\n  const displayChar = tonable && tone ? applyTone(emoji.char, tone) : emoji.char;\n\n  useEffect(() => () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n  }, []);\n\n  const triggerOpen = () => {\n    const node = buttonRef.current;\n    if (!node) return;\n    const r = node.getBoundingClientRect();\n    openPicker({ emoji, rect: { left: r.left, top: r.top, width: r.width } });\n  };\n\n  const handlePointerEnter = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType === \"touch\") return;\n    cancelClose();\n    if (hoverTimer.current) clearTimeout(hoverTimer.current);\n    hoverTimer.current = setTimeout(triggerOpen, HOVER_INTENT_MS);\n  };\n\n  const handlePointerLeave = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    if (hoverTimer.current) {\n      clearTimeout(hoverTimer.current);\n      hoverTimer.current = null;\n    }\n    if (tonable) scheduleClose();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!tonable || e.pointerType !== \"touch\") return;\n    longPressed.current = false;\n    longPressTimer.current = setTimeout(() => {\n      longPressed.current = true;\n      triggerOpen();\n    }, LONG_PRESS_MS);\n  };\n  const handlePointerUp = () => {\n    if (longPressTimer.current) clearTimeout(longPressTimer.current);\n    longPressTimer.current = null;\n  };\n\n  const handleClick = () => {\n    if (longPressed.current) {\n      longPressed.current = false;\n      return;\n    }\n    onPick();\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      className=\"relative rounded p-1 text-xl hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n      aria-label={emoji.name}\n      title={emoji.name}\n    >\n      {displayChar}\n      {tonable && (\n        <span className=\"absolute right-0.5 bottom-0.5 h-1 w-1 rounded-full bg-amber-400\" aria-hidden />\n      )}\n    </button>\n  );\n}\n\ntype PopoverProps = {\n  target: ToneTarget;\n  onPickBase: () => void;\n  onPickTone: (tone: SkinTone) => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n};\n\nfunction TonePopover({ target, onPickBase, onPickTone, onMouseEnter, onMouseLeave }: PopoverProps) {\n  const { emoji, rect } = target;\n  if (!emoji.skinTones) return null;\n\n  const centerX = rect.left + rect.width / 2;\n  const top = rect.top;\n  const POPOVER_HEIGHT_APPROX = 44;\n  const flipDown = top < POPOVER_HEIGHT_APPROX + 8;\n\n  const style: React.CSSProperties = flipDown\n    ? { position: \"fixed\", left: centerX, top: top + 32, transform: \"translateX(-50%)\" }\n    : { position: \"fixed\", left: centerX, top: top - 4, transform: \"translate(-50%, -100%)\" };\n\n  return (\n    <div\n      style={{ ...style, zIndex: 9999 }}\n      className=\"flex gap-0.5 rounded-md border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800\"\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <button\n        type=\"button\"\n        onClick={onPickBase}\n        className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n        aria-label={`${emoji.name} (no tone)`}\n      >\n        {emoji.char}\n      </button>\n      {SKIN_TONES.map((t, i) => (\n        <button\n          key={t}\n          type=\"button\"\n          onClick={() => onPickTone(t)}\n          className=\"rounded p-1 text-lg hover:bg-zinc-100 dark:hover:bg-zinc-700\"\n          aria-label={`${emoji.name} ${t} skin tone`}\n        >\n          {emoji.skinTones![i]}\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}