@devalok/shilp-sutra 0.45.0 → 0.46.0

package/dist/composed/rich-text-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../src/composed/rich-text-editor.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlignCenter,\n  IconAlignLeft,\n  IconAlignRight,\n  IconArrowBackUp,\n  IconArrowForwardUp,\n  IconBlockquote,\n  IconBold,\n  IconCode,\n  IconH2,\n  IconH3,\n  IconHighlight,\n  IconItalic,\n  IconLineDashed,\n  IconLink,\n  IconList,\n  IconListCheck,\n  IconListNumbers,\n  IconMoodSmile,\n  IconPaperclip,\n  IconPhoto,\n  IconStrikethrough,\n  IconUnderline,\n} from '@tabler/icons-react'\nimport Highlight from '@tiptap/extension-highlight'\nimport Image from '@tiptap/extension-image'\nimport { ListKit } from '@tiptap/extension-list'\nimport Mention from '@tiptap/extension-mention'\nimport TextAlign from '@tiptap/extension-text-align'\nimport { Placeholder } from '@tiptap/extensions'\nimport { type Editor,EditorContent, useEditor, useEditorState } from '@tiptap/react'\nimport StarterKit from '@tiptap/starter-kit'\nimport * as React from 'react'\n\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport type { EmojiSet } from './emoji-picker'\nimport { loadEmojiData, lookupEmoji } from './extensions/emoji-data'\nimport { EmojiNode } from './extensions/emoji-node'\nimport { createEmojiSuggestion } from './extensions/emoji-suggestion'\nimport { FileAttachment } from './extensions/file-attachment'\nimport { createSuggestionRenderer } from './extensions/mention-suggestion'\n\nconst PROSE_CLASSES = [\n  'prose prose-sm max-w-none',\n  'font-body text-ds-md leading-relaxed text-surface-fg',\n  '[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-surface-fg',\n  '[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-surface-fg',\n  '[&_p]:mb-ds-02b [&_p]:text-surface-fg-muted',\n  '[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal',\n  '[&_li]:text-surface-fg-muted',\n  '[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-accent-11',\n  '[&_pre]:rounded-surface [&_pre]:bg-surface-raised [&_pre]:p-ds-04',\n  '[&_strong]:font-semibold [&_strong]:text-surface-fg',\n  '[&_blockquote]:border-l-[3px] [&_blockquote]:border-accent-6 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-surface-fg-subtle',\n  '[&_mark]:rounded-xs [&_mark]:bg-warning-3 [&_mark]:px-[2px]',\n  '[&_ul[data-type=\"taskList\"]]:ml-0 [&_ul[data-type=\"taskList\"]]:list-none [&_li[data-type=\"taskItem\"]]:flex [&_li[data-type=\"taskItem\"]]:items-start [&_li[data-type=\"taskItem\"]]:gap-ds-02',\n  '[&_hr]:my-ds-04 [&_hr]:border-surface-border-strong',\n  '[&_a]:text-accent-11 [&_a]:underline [&_a]:decoration-accent-6 hover:[&_a]:decoration-accent-11',\n  '[&_img]:max-w-full [&_img]:rounded-control [&_img]:my-ds-03',\n  '[&_.mention]:rounded-control-inner [&_.mention]:bg-accent-2 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-accent-11',\n] as const\n\ninterface ToolbarButtonProps {\n  onClick: () => void\n  isActive?: boolean\n  disabled?: boolean\n  title: string\n  children: React.ReactNode\n}\n\nfunction ToolbarButton({\n  onClick,\n  isActive = false,\n  disabled = false,\n  title,\n  children,\n}: ToolbarButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      title={title}\n      aria-label={title}\n      aria-pressed={isActive}\n      className={cn(\n        'inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control transition-colors duration-fast-01 ease-productive-standard',\n        'hover:bg-surface-raised-hover',\n        'disabled:pointer-events-none disabled:opacity-action-disabled',\n        isActive\n          ? 'bg-surface-raised-hover text-accent-11'\n          : 'text-surface-fg-subtle',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction LinkButton({ editor }: { editor: Editor }) {\n  const [showInput, setShowInput] = React.useState(false)\n  const [url, setUrl] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const { isLink } = useEditorState({\n    editor,\n    selector: ({ editor: e }) => ({ isLink: e.isActive('link') }),\n  })\n\n  const handleToggle = () => {\n    if (isLink) {\n      editor.chain().focus().unsetLink().run()\n      return\n    }\n    const previousUrl = editor.getAttributes('link').href || ''\n    setUrl(previousUrl)\n    setShowInput(true)\n    setTimeout(() => inputRef.current?.focus(), 0)\n  }\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    if (url.trim()) {\n      editor.chain().focus().setLink({ href: url.trim() }).run()\n    }\n    setShowInput(false)\n    setUrl('')\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setShowInput(false)\n      setUrl('')\n      editor.commands.focus()\n    }\n  }\n\n  return (\n    <div className=\"relative\">\n      <ToolbarButton onClick={handleToggle} isActive={isLink} title=\"Link\">\n        <Icon icon={IconLink} size=\"sm\" />\n      </ToolbarButton>\n      {showInput && (\n        <form\n          onSubmit={handleSubmit}\n          aria-label=\"Edit link URL\"\n          className=\"absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-control bg-surface-overlay p-ds-02 shadow-raised-hover\"\n        >\n          <input\n            ref={inputRef}\n            type=\"url\"\n            value={url}\n            onChange={(e) => setUrl(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder=\"https://...\"\n            className=\"h-ds-sm w-[240px] rounded-control-inner border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-hidden\"\n          />\n          <Button type=\"submit\" variant=\"solid\" size=\"sm\">\n            Apply\n          </Button>\n        </form>\n      )}\n    </div>\n  )\n}\n\nfunction ToolbarDivider() {\n  return <div className=\"mx-ds-02 h-[16px] w-px bg-surface-border\" />\n}\n\nfunction Toolbar({ editor, toolbar, onImageClick, onFileClick, onEmojiClick }: {\n  editor: Editor\n  toolbar?: ToolbarItem[]\n  onImageClick?: () => void\n  onFileClick?: () => void\n  onEmojiClick?: () => void\n}) {\n  // v3: useEditorState subscribes to specific state slices so the toolbar\n  // re-renders only when active-state or can-undo/redo actually changes.\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: e }) => ({\n      isBold: e.isActive('bold'),\n      isItalic: e.isActive('italic'),\n      isUnderline: e.isActive('underline'),\n      isStrike: e.isActive('strike'),\n      isHighlight: e.isActive('highlight'),\n      isH2: e.isActive('heading', { level: 2 }),\n      isH3: e.isActive('heading', { level: 3 }),\n      isBlockquote: e.isActive('blockquote'),\n      isBulletList: e.isActive('bulletList'),\n      isOrderedList: e.isActive('orderedList'),\n      isTaskList: e.isActive('taskList'),\n      isCodeBlock: e.isActive('codeBlock'),\n      isLink: e.isActive('link'),\n      isAlignLeft: e.isActive({ textAlign: 'left' }),\n      isAlignCenter: e.isActive({ textAlign: 'center' }),\n      isAlignRight: e.isActive({ textAlign: 'right' }),\n      canUndo: e.can().undo(),\n      canRedo: e.can().redo(),\n    }),\n  })\n\n  const show = (item: ToolbarItem) => !toolbar || toolbar.includes(item)\n\n  // Each group is an array of ToolbarItem names that belong to it.\n  // A divider renders between two adjacent groups only if both have at least one visible item.\n  const hasInline = show('bold') || show('italic') || show('underline') || show('strike') || show('highlight')\n  const hasBlock = show('h2') || show('h3') || show('blockquote')\n  const hasList = show('bulletList') || show('orderedList') || show('taskList') || show('codeBlock')\n  const hasMedia = show('link') || (!!onImageClick && show('image')) || (!!onFileClick && show('file')) || show('hr')\n  const hasAlign = show('alignLeft') || show('alignCenter') || show('alignRight')\n  const hasEmojiGroup = !!onEmojiClick && show('emoji')\n  const hasHistory = show('undo') || show('redo')\n\n  return (\n    <div role=\"toolbar\" aria-label=\"Text formatting\" className=\"flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b\">\n      {/* Inline formatting */}\n      {show('bold') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleBold().run()} isActive={state.isBold} title=\"Bold\">\n          <Icon icon={IconBold} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('italic') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleItalic().run()} isActive={state.isItalic} title=\"Italic\">\n          <Icon icon={IconItalic} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('underline') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={state.isUnderline} title=\"Underline\">\n          <Icon icon={IconUnderline} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('strike') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleStrike().run()} isActive={state.isStrike} title=\"Strikethrough\">\n          <Icon icon={IconStrikethrough} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('highlight') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleHighlight().run()} isActive={state.isHighlight} title=\"Highlight\">\n          <Icon icon={IconHighlight} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n\n      {hasInline && hasBlock && <ToolbarDivider />}\n\n      {/* Block formatting */}\n      {show('h2') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} isActive={state.isH2} title=\"Heading 2\">\n          <Icon icon={IconH2} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('h3') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} isActive={state.isH3} title=\"Heading 3\">\n          <Icon icon={IconH3} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('blockquote') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleBlockquote().run()} isActive={state.isBlockquote} title=\"Blockquote\">\n          <Icon icon={IconBlockquote} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n\n      {hasBlock && hasList && <ToolbarDivider />}\n\n      {/* Lists */}\n      {show('bulletList') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleBulletList().run()} isActive={state.isBulletList} title=\"Bullet list\">\n          <Icon icon={IconList} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('orderedList') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleOrderedList().run()} isActive={state.isOrderedList} title=\"Ordered list\">\n          <Icon icon={IconListNumbers} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('taskList') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleTaskList().run()} isActive={state.isTaskList} title=\"Task list\">\n          <Icon icon={IconListCheck} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('codeBlock') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleCodeBlock().run()} isActive={state.isCodeBlock} title=\"Code block\">\n          <Icon icon={IconCode} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n\n      {hasList && hasMedia && <ToolbarDivider />}\n\n      {/* Media & Links */}\n      {show('link') && <LinkButton editor={editor} />}\n      {onImageClick && show('image') && (\n        <ToolbarButton onClick={onImageClick} title=\"Insert image\">\n          <Icon icon={IconPhoto} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {onFileClick && show('file') && (\n        <ToolbarButton onClick={onFileClick} title=\"Attach file\">\n          <Icon icon={IconPaperclip} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('hr') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setHorizontalRule().run()} title=\"Horizontal rule\">\n          <Icon icon={IconLineDashed} size=\"sm\" />\n        </ToolbarButton>\n      )}\n\n      {hasMedia && hasAlign && <ToolbarDivider />}\n\n      {/* Alignment */}\n      {show('alignLeft') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('left').run()} isActive={state.isAlignLeft} title=\"Align left\">\n          <Icon icon={IconAlignLeft} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('alignCenter') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('center').run()} isActive={state.isAlignCenter} title=\"Align center\">\n          <Icon icon={IconAlignCenter} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('alignRight') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('right').run()} isActive={state.isAlignRight} title=\"Align right\">\n          <Icon icon={IconAlignRight} size=\"sm\" />\n        </ToolbarButton>\n      )}\n\n      {hasAlign && (hasEmojiGroup || hasHistory) && <ToolbarDivider />}\n\n      {/* Emoji */}\n      {onEmojiClick && show('emoji') && (\n        <ToolbarButton onClick={onEmojiClick} title=\"Emoji\">\n          <Icon icon={IconMoodSmile} size=\"sm\" />\n        </ToolbarButton>\n      )}\n\n      {/* History */}\n      {show('undo') && (\n        <ToolbarButton onClick={() => editor.chain().focus().undo().run()} disabled={!state.canUndo} title=\"Undo\">\n          <Icon icon={IconArrowBackUp} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('redo') && (\n        <ToolbarButton onClick={() => editor.chain().focus().redo().run()} disabled={!state.canRedo} title=\"Redo\">\n          <Icon icon={IconArrowForwardUp} size=\"sm\" />\n        </ToolbarButton>\n      )}\n    </div>\n  )\n}\n\nconst LazyPicker = React.lazy(() => import('@emoji-mart/react'))\n\nfunction EmojiPickerLazy({ set = 'native', onSelect }: { set?: string; onSelect: (emoji: { id: string; native: string }) => void }) {\n  const [data, setData] = React.useState<unknown>(null)\n  const { colorMode } = useColorMode()\n\n  React.useEffect(() => {\n    loadEmojiData(set).then((d) => setData(d))\n  }, [set])\n\n  const fallback = <div className=\"flex h-[350px] w-[352px] items-center justify-center rounded-surface bg-surface-overlay shadow-raised-hover\"><span className=\"text-ds-sm text-surface-fg-subtle\">Loading...</span></div>\n\n  if (!data) return fallback\n\n  return (\n    <React.Suspense fallback={fallback}>\n      <LazyPicker\n        data={data}\n        set={set}\n        onEmojiSelect={(emoji: { native: string; id: string }) => onSelect({ id: emoji.id, native: emoji.native })}\n        theme={colorMode === 'dark' ? 'dark' : 'light'}\n        previewPosition=\"none\"\n        skinTonePosition=\"none\"\n      />\n    </React.Suspense>\n  )\n}\n\nexport type ToolbarItem =\n  | 'bold' | 'italic' | 'underline' | 'strike' | 'highlight'\n  | 'h2' | 'h3' | 'blockquote'\n  | 'bulletList' | 'orderedList' | 'taskList' | 'codeBlock'\n  | 'link' | 'image' | 'file' | 'hr'\n  | 'alignLeft' | 'alignCenter' | 'alignRight'\n  | 'emoji' | 'undo' | 'redo'\n\nexport interface MentionItem {\n  id: string\n  label: string\n  avatar?: string\n}\n\n/**\n * A Tiptap-powered rich text editor with a configurable toolbar, @mentions,\n * emoji suggestions, file/image uploads, and task lists.\n * Outputs sanitized HTML via `onChange`.\n */\nexport interface RichTextEditorProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'content'> {\n  /** Initial HTML content. Updates are NOT reactive — use `onChange` for controlled state. */\n  content?: string\n  placeholder?: string\n  /** Called with the editor's HTML string whenever content changes. */\n  onChange?: (html: string) => void\n  className?: string\n  /** Set to false to render in read-only mode (e.g. for previewing). */\n  editable?: boolean\n  /** Called when an image is pasted/dropped. Return a URL. If not provided, images inline as base64. */\n  onImageUpload?: (file: File) => Promise<string>\n  /** Called when a non-image file is dropped/pasted. If not provided, non-image files are ignored. */\n  onFileUpload?: (file: File) => Promise<{ url: string; name: string; size: number }>\n  /** Whitelist of toolbar items to display. Omit to show all. */\n  toolbar?: ToolbarItem[]\n  /** Static list of mentionable items (shown when user types @). */\n  mentions?: MentionItem[]\n  /** Async mention search. Takes precedence over static `mentions` list. */\n  onMentionSearch?: (query: string) => Promise<MentionItem[]>\n  /** Called when a mention is selected from the suggestion dropdown. */\n  onMentionSelect?: (item: MentionItem) => void\n  /** Emoji art style. @default 'native' */\n  emojiSet?: EmojiSet\n}\n\nconst RichTextEditor = React.forwardRef<HTMLDivElement, RichTextEditorProps>(\n  function RichTextEditor({\n  content = '',\n  placeholder = 'Start writing...',\n  onChange,\n  className,\n  editable = true,\n  toolbar,\n  onImageUpload,\n  onFileUpload,\n  mentions,\n  onMentionSearch,\n  onMentionSelect,\n  emojiSet = 'native',\n  ...props\n}, ref) {\n  const editorRef = React.useRef<ReturnType<typeof useEditor>>(null)\n  const isInternalChangeRef = React.useRef(false)\n  const [showEmojiPicker, setShowEmojiPicker] = React.useState(false)\n  const emojiPickerRef = React.useRef<HTMLDivElement>(null)\n  const imageInputRef = React.useRef<HTMLInputElement>(null)\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleImageInsert = async (file: File) => {\n    const ed = editorRef.current\n    if (!ed) return\n    if (onImageUpload) {\n      const url = await onImageUpload(file)\n      if (url && /^https?:\\/\\//i.test(url)) {\n        ed.chain().focus().setImage({ src: url }).run()\n      }\n    } else {\n      const reader = new FileReader()\n      reader.onload = () => {\n        ed.chain().focus().setImage({ src: reader.result as string }).run()\n      }\n      reader.readAsDataURL(file)\n    }\n  }\n\n  const handleFileInsert = async (file: File) => {\n    const ed = editorRef.current\n    if (!ed || !onFileUpload) return\n    const result = await onFileUpload(file)\n    ed.chain().focus().insertContent({\n      type: 'fileAttachment',\n      attrs: { url: result.url, name: result.name, size: result.size },\n    }).run()\n  }\n\n  const editor = useEditor({\n    immediatelyRender: false, // SSR-safe — prevents hydration mismatch in Next.js\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [2, 3] },\n        // v3: Underline + Link are now included in StarterKit\n        link: {\n          openOnClick: false,\n          protocols: ['http', 'https', 'mailto'],\n          validate: (href: string) => /^(https?:\\/\\/|mailto:)/i.test(href),\n          HTMLAttributes: {\n            rel: 'noopener noreferrer',\n            target: '_blank',\n          },\n        },\n      }),\n      Placeholder.configure({\n        placeholder,\n        emptyEditorClass:\n          'before:content-[attr(data-placeholder)] before:text-surface-fg-subtle before:float-left before:h-0 before:pointer-events-none',\n      }),\n      Highlight.configure({ multicolor: false }),\n      ListKit.configure({\n        bulletList: false,  // Already in StarterKit\n        orderedList: false, // Already in StarterKit\n        listItem: false,    // Already in StarterKit\n        listKeymap: false,  // Already in StarterKit\n        taskList: {},\n        taskItem: { nested: true },\n      }),\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Image.configure({\n        allowBase64: true,\n        HTMLAttributes: {\n          class: 'max-w-full rounded-control',\n        },\n      }),\n      FileAttachment,\n      ...(mentions || onMentionSearch ? [\n        Mention.configure({\n          HTMLAttributes: { class: 'mention' },\n          suggestion: {\n            items: async ({ query }: { query: string }) => {\n              if (onMentionSearch) return await onMentionSearch(query)\n              if (mentions) return mentions.filter(m => m.label.toLowerCase().includes(query.toLowerCase())).slice(0, 8)\n              return []\n            },\n            render: createSuggestionRenderer(onMentionSelect),\n          },\n        }),\n      ] : []),\n      EmojiNode,\n      createEmojiSuggestion(emojiSet),\n    ],\n    content,\n    editable,\n    editorProps: {\n      handleDrop: (_view, event, _slice, moved) => {\n        if (moved || !event.dataTransfer?.files.length) return false\n        const file = event.dataTransfer.files[0]\n        if (!file) return false\n        if (file.type.startsWith('image/')) {\n          handleImageInsert(file)\n          return true\n        }\n        if (onFileUpload) {\n          handleFileInsert(file)\n          return true\n        }\n        return false\n      },\n      handlePaste: (_view, event) => {\n        const file = event.clipboardData?.files[0]\n        if (!file) return false\n        if (file.type.startsWith('image/')) {\n          handleImageInsert(file)\n          return true\n        }\n        if (onFileUpload) {\n          handleFileInsert(file)\n          return true\n        }\n        return false\n      },\n      attributes: {\n        class: cn(\n          ...PROSE_CLASSES,\n          'focus:outline-hidden',\n          'min-h-[120px] px-ds-04 py-ds-04',\n        ),\n      },\n    },\n    onUpdate: ({ editor: ed }) => {\n      isInternalChangeRef.current = true\n      onChange?.(ed.getHTML())\n      queueMicrotask(() => {\n        isInternalChangeRef.current = false\n      })\n    },\n  })\n\n  React.useEffect(() => {\n    editorRef.current = editor\n  }, [editor])\n\n  // Close emoji picker on click outside\n  React.useEffect(() => {\n    if (!showEmojiPicker) return\n    const handleClickOutside = (e: MouseEvent) => {\n      if (emojiPickerRef.current && !emojiPickerRef.current.contains(e.target as Node)) {\n        setShowEmojiPicker(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [showEmojiPicker])\n\n  React.useEffect(() => {\n    if (isInternalChangeRef.current) return\n    if (editor && content !== editor.getHTML()) {\n      editor.commands.setContent(content, { emitUpdate: false })\n    }\n  }, [editor, content])\n\n  if (!editor) return null\n\n  return (\n    <div ref={ref} {...props} className={cn('relative', className)}>\n      {/* Emoji picker rendered outside the overflow-hidden box so it isn't clipped */}\n      {showEmojiPicker && (\n        <div\n          ref={emojiPickerRef}\n          className=\"absolute bottom-full right-0 z-popover mb-ds-02\"\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') {\n              e.stopPropagation()\n              setShowEmojiPicker(false)\n            }\n          }}\n        >\n          <EmojiPickerLazy\n            set={emojiSet}\n            onSelect={async ({ id, native }) => {\n              const data = await loadEmojiData(emojiSet)\n              const resolved = lookupEmoji(data, id)\n              if (resolved) {\n                editor.chain().focus().insertContent({\n                  type: 'emojiNode',\n                  attrs: { id, native: resolved.native, set: emojiSet, x: resolved.x, y: resolved.y },\n                }).run()\n              } else {\n                editor.chain().focus().insertContent(native).run()\n              }\n              setShowEmojiPicker(false)\n            }}\n          />\n        </div>\n      )}\n      <div\n        className={cn(\n          'overflow-hidden rounded-surface border border-surface-border-strong bg-surface-raised',\n          'transition-colors ease-productive-standard focus-within:border-surface-border-strong',\n        )}\n      >\n        <input\n          ref={imageInputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          aria-label=\"Upload image\"\n          className=\"hidden\"\n          onChange={(e) => {\n            const file = e.target.files?.[0]\n            if (file) handleImageInsert(file)\n            e.target.value = ''\n          }}\n        />\n        {onFileUpload && (\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            aria-label=\"Upload file\"\n            className=\"hidden\"\n            onChange={(e) => {\n              const file = e.target.files?.[0]\n              if (file) handleFileInsert(file)\n              e.target.value = ''\n            }}\n          />\n        )}\n        {editable && (\n          <Toolbar\n            editor={editor}\n            toolbar={toolbar}\n            onImageClick={() => imageInputRef.current?.click()}\n            onFileClick={onFileUpload ? () => fileInputRef.current?.click() : undefined}\n            onEmojiClick={() => setShowEmojiPicker((prev) => !prev)}\n          />\n        )}\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  )\n},\n)\n\nRichTextEditor.displayName = 'RichTextEditor'\n\nexport interface RichTextViewerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {\n  content: string\n  className?: string\n}\n\nconst RichTextViewer = React.forwardRef<HTMLDivElement, RichTextViewerProps>(\n  function RichTextViewer({ content, className, ...props }, ref) {\n  const editor = useEditor({\n    immediatelyRender: false, // SSR-safe — prevents hydration mismatch in Next.js\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [2, 3] },\n        link: {\n          openOnClick: true,\n          protocols: ['http', 'https', 'mailto'],\n          validate: (href: string) => /^(https?:\\/\\/|mailto:)/i.test(href),\n          HTMLAttributes: {\n            rel: 'noopener noreferrer',\n            target: '_blank',\n          },\n        },\n      }),\n      Highlight.configure({ multicolor: false }),\n      ListKit.configure({\n        bulletList: false,\n        orderedList: false,\n        listItem: false,\n        listKeymap: false,\n        taskList: {},\n        taskItem: { nested: true },\n      }),\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Image.configure({\n        allowBase64: true,\n        HTMLAttributes: {\n          class: 'max-w-full rounded-control',\n        },\n      }),\n      FileAttachment,\n      Mention.configure({\n        HTMLAttributes: { class: 'mention' },\n      }),\n    ],\n    content,\n    editable: false,\n    editorProps: {\n      attributes: {\n        class: cn(...PROSE_CLASSES),\n      },\n    },\n  })\n\n  if (!editor) return null\n\n  return (\n    <div ref={ref} {...props} className={className}>\n      <EditorContent editor={editor} />\n    </div>\n  )\n},\n)\n\nRichTextViewer.displayName = 'RichTextViewer'\n\nexport { RichTextEditor, RichTextViewer }\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAM,IAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAUD,SAAS,EAAc,EACrB,YACA,cAAW,IACX,cAAW,IACX,UACA,eACqB;AACrB,QACE,kBAAC,UAAD;EACE,MAAK;EACI;EACC;EACH;EACP,cAAY;EACZ,gBAAc;EACd,WAAW,EACT,iJACA,iCACA,iEACA,IACI,2CACA,yBACL;EAEA;EACM,CAAA;;AAIb,SAAS,EAAW,EAAE,aAA8B;CAClD,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EACjD,CAAC,GAAK,KAAU,EAAM,SAAS,GAAG,EAClC,IAAW,EAAM,OAAyB,KAAK,EAC/C,EAAE,cAAW,EAAe;EAChC;EACA,WAAW,EAAE,QAAQ,SAAS,EAAE,QAAQ,EAAE,SAAS,OAAO,EAAE;EAC7D,CAAC;AA8BF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAe,eA9BQ;AACzB,QAAI,GAAQ;AACV,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;AACxC;;AAKF,IAFA,EADoB,EAAO,cAAc,OAAO,CAAC,QAAQ,GACtC,EACnB,EAAa,GAAK,EAClB,iBAAiB,EAAS,SAAS,OAAO,EAAE,EAAE;;GAsBN,UAAU;GAAQ,OAAM;aAC5D,kBAAC,GAAD;IAAM,MAAM;IAAU,MAAK;IAAO,CAAA;GACpB,CAAA,EACf,KACC,kBAAC,QAAD;GACE,WAxBc,MAAuB;AAM3C,IALA,EAAE,gBAAgB,EACd,EAAI,MAAM,IACZ,EAAO,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAI,MAAM,EAAE,CAAC,CAAC,KAAK,EAE5D,EAAa,GAAM,EACnB,EAAO,GAAG;;GAmBJ,cAAW;GACX,WAAU;aAHZ,CAKE,kBAAC,SAAD;IACE,KAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAM,EAAO,EAAE,OAAO,MAAM;IACvC,YAxBa,MAA2B;AAChD,KAAI,EAAE,QAAQ,aACZ,EAAa,GAAM,EACnB,EAAO,GAAG,EACV,EAAO,SAAS,OAAO;;IAqBjB,aAAY;IACZ,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAK;cAAK;IAEvC,CAAA,CACJ;KAEL;;;AAIV,SAAS,IAAiB;AACxB,QAAO,kBAAC,OAAD,EAAK,WAAU,4CAA6C,CAAA;;AAGrE,SAAS,EAAQ,EAAE,WAAQ,YAAS,iBAAc,gBAAa,mBAM5D;CAGD,IAAM,IAAQ,EAAe;EAC3B;EACA,WAAW,EAAE,QAAQ,SAAS;GAC5B,QAAQ,EAAE,SAAS,OAAO;GAC1B,UAAU,EAAE,SAAS,SAAS;GAC9B,aAAa,EAAE,SAAS,YAAY;GACpC,UAAU,EAAE,SAAS,SAAS;GAC9B,aAAa,EAAE,SAAS,YAAY;GACpC,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC;GACzC,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC;GACzC,cAAc,EAAE,SAAS,aAAa;GACtC,cAAc,EAAE,SAAS,aAAa;GACtC,eAAe,EAAE,SAAS,cAAc;GACxC,YAAY,EAAE,SAAS,WAAW;GAClC,aAAa,EAAE,SAAS,YAAY;GACpC,QAAQ,EAAE,SAAS,OAAO;GAC1B,aAAa,EAAE,SAAS,EAAE,WAAW,QAAQ,CAAC;GAC9C,eAAe,EAAE,SAAS,EAAE,WAAW,UAAU,CAAC;GAClD,cAAc,EAAE,SAAS,EAAE,WAAW,SAAS,CAAC;GAChD,SAAS,EAAE,KAAK,CAAC,MAAM;GACvB,SAAS,EAAE,KAAK,CAAC,MAAM;GACxB;EACF,CAAC,EAEI,KAAQ,MAAsB,CAAC,KAAW,EAAQ,SAAS,EAAK,EAIhE,IAAY,EAAK,OAAO,IAAI,EAAK,SAAS,IAAI,EAAK,YAAY,IAAI,EAAK,SAAS,IAAI,EAAK,YAAY,EACtG,IAAW,EAAK,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,aAAa,EACzD,IAAU,EAAK,aAAa,IAAI,EAAK,cAAc,IAAI,EAAK,WAAW,IAAI,EAAK,YAAY,EAC5F,IAAW,EAAK,OAAO,IAAK,CAAC,CAAC,KAAgB,EAAK,QAAQ,IAAM,CAAC,CAAC,KAAe,EAAK,OAAO,IAAK,EAAK,KAAK,EAC7G,IAAW,EAAK,YAAY,IAAI,EAAK,cAAc,IAAI,EAAK,aAAa,EACzE,IAAgB,CAAC,CAAC,KAAgB,EAAK,QAAQ,EAC/C,IAAa,EAAK,OAAO,IAAI,EAAK,OAAO;AAE/C,QACE,kBAAC,OAAD;EAAK,MAAK;EAAU,cAAW;EAAkB,WAAU;YAA3D;GAEG,EAAK,OAAO,IACX,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;IAAE,UAAU,EAAM;IAAQ,OAAM;cACrG,kBAAC,GAAD;KAAM,MAAM;KAAU,MAAK;KAAK,QAAO;KAAS,CAAA;IAClC,CAAA;GAEjB,EAAK,SAAS,IACb,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;IAAE,UAAU,EAAM;IAAU,OAAM;cACzG,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,QAAO;KAAS,CAAA;IACpC,CAAA;GAEjB,EAAK,YAAY,IAChB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAa,OAAM;cAC/G,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAK,QAAO;KAAS,CAAA;IACvC,CAAA;GAEjB,EAAK,SAAS,IACb,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;IAAE,UAAU,EAAM;IAAU,OAAM;cACzG,kBAAC,GAAD;KAAM,MAAM;KAAmB,MAAK;KAAK,QAAO;KAAS,CAAA;IAC3C,CAAA;GAEjB,EAAK,YAAY,IAChB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAa,OAAM;cAC/G,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAK,QAAO;KAAS,CAAA;IACvC,CAAA;GAGjB,KAAa,KAAY,kBAAC,GAAD,EAAkB,CAAA;GAG3C,EAAK,KAAK,IACT,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;IAAE,UAAU,EAAM;IAAM,OAAM;cAClH,kBAAC,GAAD;KAAM,MAAM;KAAQ,MAAK;KAAK,QAAO;KAAS,CAAA;IAChC,CAAA;GAEjB,EAAK,KAAK,IACT,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;IAAE,UAAU,EAAM;IAAM,OAAM;cAClH,kBAAC,GAAD;KAAM,MAAM;KAAQ,MAAK;KAAK,QAAO;KAAS,CAAA;IAChC,CAAA;GAEjB,EAAK,aAAa,IACjB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAc,OAAM;cACjH,kBAAC,GAAD;KAAM,MAAM;KAAgB,MAAK;KAAK,QAAO;KAAS,CAAA;IACxC,CAAA;GAGjB,KAAY,KAAW,kBAAC,GAAD,EAAkB,CAAA;GAGzC,EAAK,aAAa,IACjB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAc,OAAM;cACjH,kBAAC,GAAD;KAAM,MAAM;KAAU,MAAK;KAAK,QAAO;KAAS,CAAA;IAClC,CAAA;GAEjB,EAAK,cAAc,IAClB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAe,OAAM;cACnH,kBAAC,GAAD;KAAM,MAAM;KAAiB,MAAK;KAAK,QAAO;KAAS,CAAA;IACzC,CAAA;GAEjB,EAAK,WAAW,IACf,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAY,OAAM;cAC7G,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAK,QAAO;KAAS,CAAA;IACvC,CAAA;GAEjB,EAAK,YAAY,IAChB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;IAAE,UAAU,EAAM;IAAa,OAAM;cAC/G,kBAAC,GAAD;KAAM,MAAM;KAAU,MAAK;KAAK,QAAO;KAAS,CAAA;IAClC,CAAA;GAGjB,KAAW,KAAY,kBAAC,GAAD,EAAkB,CAAA;GAGzC,EAAK,OAAO,IAAI,kBAAC,GAAD,EAAoB,WAAU,CAAA;GAC9C,KAAgB,EAAK,QAAQ,IAC5B,kBAAC,GAAD;IAAe,SAAS;IAAc,OAAM;cAC1C,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAK;KAAO,CAAA;IACrB,CAAA;GAEjB,KAAe,EAAK,OAAO,IAC1B,kBAAC,GAAD;IAAe,SAAS;IAAa,OAAM;cACzC,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAO,CAAA;IACzB,CAAA;GAEjB,EAAK,KAAK,IACT,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK;IAAE,OAAM;cACpF,kBAAC,GAAD;KAAM,MAAM;KAAgB,MAAK;KAAO,CAAA;IAC1B,CAAA;GAGjB,KAAY,KAAY,kBAAC,GAAD,EAAkB,CAAA;GAG1C,EAAK,YAAY,IAChB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,aAAa,OAAO,CAAC,KAAK;IAAE,UAAU,EAAM;IAAa,OAAM;cAClH,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAO,CAAA;IACzB,CAAA;GAEjB,EAAK,cAAc,IAClB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,aAAa,SAAS,CAAC,KAAK;IAAE,UAAU,EAAM;IAAe,OAAM;cACtH,kBAAC,GAAD;KAAM,MAAM;KAAiB,MAAK;KAAO,CAAA;IAC3B,CAAA;GAEjB,EAAK,aAAa,IACjB,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,aAAa,QAAQ,CAAC,KAAK;IAAE,UAAU,EAAM;IAAc,OAAM;cACpH,kBAAC,GAAD;KAAM,MAAM;KAAgB,MAAK;KAAO,CAAA;IAC1B,CAAA;GAGjB,MAAa,KAAiB,MAAe,kBAAC,GAAD,EAAkB,CAAA;GAG/D,KAAgB,EAAK,QAAQ,IAC5B,kBAAC,GAAD;IAAe,SAAS;IAAc,OAAM;cAC1C,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAO,CAAA;IACzB,CAAA;GAIjB,EAAK,OAAO,IACX,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;IAAE,UAAU,CAAC,EAAM;IAAS,OAAM;cACjG,kBAAC,GAAD;KAAM,MAAM;KAAiB,MAAK;KAAO,CAAA;IAC3B,CAAA;GAEjB,EAAK,OAAO,IACX,kBAAC,GAAD;IAAe,eAAe,EAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;IAAE,UAAU,CAAC,EAAM;IAAS,OAAM;cACjG,kBAAC,GAAD;KAAM,MAAM;KAAoB,MAAK;KAAO,CAAA;IAC9B,CAAA;GAEd;;;AAIV,IAAM,IAAa,EAAM,WAAW,OAAO,qBAAqB;AAEhE,SAAS,EAAgB,EAAE,SAAM,UAAU,eAAyF;CAClI,IAAM,CAAC,GAAM,KAAW,EAAM,SAAkB,KAAK,EAC/C,EAAE,iBAAc,GAAc;AAEpC,GAAM,gBAAgB;AACpB,IAAc,EAAI,CAAC,MAAM,MAAM,EAAQ,EAAE,CAAC;IACzC,CAAC,EAAI,CAAC;CAET,IAAM,IAAW,kBAAC,OAAD;EAAK,WAAU;YAA8G,kBAAC,QAAD;GAAM,WAAU;aAAoC;GAAiB,CAAA;EAAM,CAAA;AAIzN,QAFK,IAGH,kBAAC,EAAM,UAAP;EAA0B;YACxB,kBAAC,GAAD;GACQ;GACD;GACL,gBAAgB,MAA0C,EAAS;IAAE,IAAI,EAAM;IAAI,QAAQ,EAAM;IAAQ,CAAC;GAC1G,OAAO,MAAc,SAAS,SAAS;GACvC,iBAAgB;GAChB,kBAAiB;GACjB,CAAA;EACa,CAAA,GAZD;;AA4DpB,IAAM,IAAiB,EAAM,WAC3B,SAAwB,EACxB,aAAU,IACV,iBAAc,oBACd,aACA,cACA,cAAW,IACX,YACA,kBACA,iBACA,aACA,oBACA,oBACA,cAAW,UACX,GAAG,KACF,GAAK;CACN,IAAM,IAAY,EAAM,OAAqC,KAAK,EAC5D,IAAsB,EAAM,OAAO,GAAM,EACzC,CAAC,GAAiB,KAAsB,EAAM,SAAS,GAAM,EAC7D,IAAiB,EAAM,OAAuB,KAAK,EACnD,IAAgB,EAAM,OAAyB,KAAK,EACpD,IAAe,EAAM,OAAyB,KAAK,EAEnD,IAAoB,OAAO,MAAe;EAC9C,IAAM,IAAK,EAAU;AAChB,QACL,KAAI,GAAe;GACjB,IAAM,IAAM,MAAM,EAAc,EAAK;AACrC,GAAI,KAAO,gBAAgB,KAAK,EAAI,IAClC,EAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,GAAK,CAAC,CAAC,KAAK;SAE5C;GACL,IAAM,IAAS,IAAI,YAAY;AAI/B,GAHA,EAAO,eAAe;AACpB,MAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,EAAO,QAAkB,CAAC,CAAC,KAAK;MAErE,EAAO,cAAc,EAAK;;IAIxB,IAAmB,OAAO,MAAe;EAC7C,IAAM,IAAK,EAAU;AACrB,MAAI,CAAC,KAAM,CAAC,EAAc;EAC1B,IAAM,IAAS,MAAM,EAAa,EAAK;AACvC,IAAG,OAAO,CAAC,OAAO,CAAC,cAAc;GAC/B,MAAM;GACN,OAAO;IAAE,KAAK,EAAO;IAAK,MAAM,EAAO;IAAM,MAAM,EAAO;IAAM;GACjE,CAAC,CAAC,KAAK;IAGJ,IAAS,EAAU;EACvB,mBAAmB;EACnB,YAAY;GACV,EAAW,UAAU;IACnB,SAAS,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAE;IAE3B,MAAM;KACJ,aAAa;KACb,WAAW;MAAC;MAAQ;MAAS;MAAS;KACtC,WAAW,MAAiB,0BAA0B,KAAK,EAAK;KAChE,gBAAgB;MACd,KAAK;MACL,QAAQ;MACT;KACF;IACF,CAAC;GACF,EAAY,UAAU;IACpB;IACA,kBACE;IACH,CAAC;GACF,EAAU,UAAU,EAAE,YAAY,IAAO,CAAC;GAC1C,EAAQ,UAAU;IAChB,YAAY;IACZ,aAAa;IACb,UAAU;IACV,YAAY;IACZ,UAAU,EAAE;IACZ,UAAU,EAAE,QAAQ,IAAM;IAC3B,CAAC;GACF,EAAU,UAAU,EAAE,OAAO,CAAC,WAAW,YAAY,EAAE,CAAC;GACxD,EAAM,UAAU;IACd,aAAa;IACb,gBAAgB,EACd,OAAO,8BACR;IACF,CAAC;GACF;GACA,GAAI,KAAY,IAAkB,CAChC,EAAQ,UAAU;IAChB,gBAAgB,EAAE,OAAO,WAAW;IACpC,YAAY;KACV,OAAO,OAAO,EAAE,eACV,IAAwB,MAAM,EAAgB,EAAM,GACpD,IAAiB,EAAS,QAAO,MAAK,EAAE,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,GACnG,EAAE;KAEX,QAAQ,EAAyB,EAAgB;KAClD;IACF,CAAC,CACH,GAAG,EAAE;GACN;GACA,EAAsB,EAAS;GAChC;EACD;EACA;EACA,aAAa;GACX,aAAa,GAAO,GAAO,GAAQ,MAAU;AAC3C,QAAI,KAAS,CAAC,EAAM,cAAc,MAAM,OAAQ,QAAO;IACvD,IAAM,IAAO,EAAM,aAAa,MAAM;AAUtC,WATK,IACD,EAAK,KAAK,WAAW,SAAS,IAChC,EAAkB,EAAK,EAChB,MAEL,KACF,EAAiB,EAAK,EACf,MAEF,KATW;;GAWpB,cAAc,GAAO,MAAU;IAC7B,IAAM,IAAO,EAAM,eAAe,MAAM;AAUxC,WATK,IACD,EAAK,KAAK,WAAW,SAAS,IAChC,EAAkB,EAAK,EAChB,MAEL,KACF,EAAiB,EAAK,EACf,MAEF,KATW;;GAWpB,YAAY,EACV,OAAO,EACL,GAAG,GACH,wBACA,kCACD,EACF;GACF;EACD,WAAW,EAAE,QAAQ,QAAS;AAG5B,GAFA,EAAoB,UAAU,IAC9B,IAAW,EAAG,SAAS,CAAC,EACxB,qBAAqB;AACnB,MAAoB,UAAU;KAC9B;;EAEL,CAAC;AA2BF,QAzBA,EAAM,gBAAgB;AACpB,IAAU,UAAU;IACnB,CAAC,EAAO,CAAC,EAGZ,EAAM,gBAAgB;AACpB,MAAI,CAAC,EAAiB;EACtB,IAAM,KAAsB,MAAkB;AAC5C,GAAI,EAAe,WAAW,CAAC,EAAe,QAAQ,SAAS,EAAE,OAAe,IAC9E,EAAmB,GAAM;;AAI7B,SADA,SAAS,iBAAiB,aAAa,EAAmB,QAC7C,SAAS,oBAAoB,aAAa,EAAmB;IACzE,CAAC,EAAgB,CAAC,EAErB,EAAM,gBAAgB;AAChB,IAAoB,WACpB,KAAU,MAAY,EAAO,SAAS,IACxC,EAAO,SAAS,WAAW,GAAS,EAAE,YAAY,IAAO,CAAC;IAE3D,CAAC,GAAQ,EAAQ,CAAC,EAEhB,IAGH,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAO,WAAW,EAAG,YAAY,EAAU;YAA9D,CAEG,KACC,kBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,aACZ,EAAE,iBAAiB,EACnB,EAAmB,GAAM;;aAI7B,kBAAC,GAAD;IACE,KAAK;IACL,UAAU,OAAO,EAAE,OAAI,gBAAa;KAElC,IAAM,IAAW,EADJ,MAAM,EAAc,EAAS,EACP,EAAG;AAStC,KARI,IACF,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc;MACnC,MAAM;MACN,OAAO;OAAE;OAAI,QAAQ,EAAS;OAAQ,KAAK;OAAU,GAAG,EAAS;OAAG,GAAG,EAAS;OAAG;MACpF,CAAC,CAAC,KAAK,GAER,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAO,CAAC,KAAK,EAEpD,EAAmB,GAAM;;IAE3B,CAAA;GACE,CAAA,EAER,kBAAC,OAAD;GACE,WAAW,EACT,yFACA,uFACD;aAJH;IAME,kBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,QAAO;KACP,cAAW;KACX,WAAU;KACV,WAAW,MAAM;MACf,IAAM,IAAO,EAAE,OAAO,QAAQ;AAE9B,MADI,KAAM,EAAkB,EAAK,EACjC,EAAE,OAAO,QAAQ;;KAEnB,CAAA;IACD,KACC,kBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,cAAW;KACX,WAAU;KACV,WAAW,MAAM;MACf,IAAM,IAAO,EAAE,OAAO,QAAQ;AAE9B,MADI,KAAM,EAAiB,EAAK,EAChC,EAAE,OAAO,QAAQ;;KAEnB,CAAA;IAEH,KACC,kBAAC,GAAD;KACU;KACC;KACT,oBAAoB,EAAc,SAAS,OAAO;KAClD,aAAa,UAAqB,EAAa,SAAS,OAAO,GAAG,KAAA;KAClE,oBAAoB,GAAoB,MAAS,CAAC,EAAK;KACvD,CAAA;IAEJ,kBAAC,GAAD,EAAuB,WAAU,CAAA;IAC7B;KACF;MA5EY;EA+ErB;AAED,EAAe,cAAc;AAO7B,IAAM,IAAiB,EAAM,WAC3B,SAAwB,EAAE,YAAS,cAAW,GAAG,KAAS,GAAK;CAC/D,IAAM,IAAS,EAAU;EACvB,mBAAmB;EACnB,YAAY;GACV,EAAW,UAAU;IACnB,SAAS,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAE;IAC3B,MAAM;KACJ,aAAa;KACb,WAAW;MAAC;MAAQ;MAAS;MAAS;KACtC,WAAW,MAAiB,0BAA0B,KAAK,EAAK;KAChE,gBAAgB;MACd,KAAK;MACL,QAAQ;MACT;KACF;IACF,CAAC;GACF,EAAU,UAAU,EAAE,YAAY,IAAO,CAAC;GAC1C,EAAQ,UAAU;IAChB,YAAY;IACZ,aAAa;IACb,UAAU;IACV,YAAY;IACZ,UAAU,EAAE;IACZ,UAAU,EAAE,QAAQ,IAAM;IAC3B,CAAC;GACF,EAAU,UAAU,EAAE,OAAO,CAAC,WAAW,YAAY,EAAE,CAAC;GACxD,EAAM,UAAU;IACd,aAAa;IACb,gBAAgB,EACd,OAAO,8BACR;IACF,CAAC;GACF;GACA,EAAQ,UAAU,EAChB,gBAAgB,EAAE,OAAO,WAAW,EACrC,CAAC;GACH;EACD;EACA,UAAU;EACV,aAAa,EACX,YAAY,EACV,OAAO,EAAG,GAAG,EAAc,EAC5B,EACF;EACF,CAAC;AAIF,QAFK,IAGH,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAkB;YACnC,kBAAC,GAAD,EAAuB,WAAU,CAAA;EAC7B,CAAA,GALY;EAQrB;AAED,EAAe,cAAc"}
+{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../src/composed/rich-text-editor.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlignCenter,\n  IconAlignLeft,\n  IconAlignRight,\n  IconArrowBackUp,\n  IconArrowForwardUp,\n  IconBlockquote,\n  IconBold,\n  IconCode,\n  IconH2,\n  IconH3,\n  IconHighlight,\n  IconItalic,\n  IconLineDashed,\n  IconLink,\n  IconList,\n  IconListCheck,\n  IconListNumbers,\n  IconMoodSmile,\n  IconPaperclip,\n  IconPhoto,\n  IconStrikethrough,\n  IconUnderline,\n} from '@tabler/icons-react'\nimport Highlight from '@tiptap/extension-highlight'\nimport Image from '@tiptap/extension-image'\nimport { ListKit } from '@tiptap/extension-list'\nimport Mention from '@tiptap/extension-mention'\nimport TextAlign from '@tiptap/extension-text-align'\nimport { Placeholder } from '@tiptap/extensions'\nimport { type Editor,EditorContent, useEditor, useEditorState } from '@tiptap/react'\nimport StarterKit from '@tiptap/starter-kit'\nimport * as React from 'react'\n\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { MENTION_TOKEN_CLASS } from '../ui/lib/mention'\nimport { cn } from '../ui/lib/utils'\nimport type { EmojiSet } from './emoji-picker'\nimport { loadEmojiData, lookupEmoji } from './extensions/emoji-data'\nimport { EmojiNode } from './extensions/emoji-node'\nimport { createEmojiSuggestion } from './extensions/emoji-suggestion'\nimport { FileAttachment } from './extensions/file-attachment'\nimport { createSuggestionRenderer } from './extensions/mention-suggestion'\n\nconst PROSE_CLASSES = [\n  'prose prose-sm max-w-none',\n  'font-body text-ds-md leading-relaxed text-surface-fg',\n  '[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-surface-fg',\n  '[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-surface-fg',\n  '[&_p]:mb-ds-02b [&_p]:text-surface-fg-muted',\n  '[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal',\n  '[&_li]:text-surface-fg-muted',\n  '[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-accent-11',\n  '[&_pre]:rounded-surface [&_pre]:bg-surface-raised [&_pre]:p-ds-04',\n  '[&_strong]:font-semibold [&_strong]:text-surface-fg',\n  '[&_blockquote]:border-l-[3px] [&_blockquote]:border-accent-6 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-surface-fg-subtle',\n  '[&_mark]:rounded-xs [&_mark]:bg-warning-3 [&_mark]:px-[2px]',\n  '[&_ul[data-type=\"taskList\"]]:ml-0 [&_ul[data-type=\"taskList\"]]:list-none [&_li[data-type=\"taskItem\"]]:flex [&_li[data-type=\"taskItem\"]]:items-start [&_li[data-type=\"taskItem\"]]:gap-ds-02',\n  '[&_hr]:my-ds-04 [&_hr]:border-surface-border-strong',\n  '[&_a]:text-accent-11 [&_a]:underline [&_a]:decoration-accent-6 hover:[&_a]:decoration-accent-11',\n  '[&_img]:max-w-full [&_img]:rounded-control [&_img]:my-ds-03',\n  MENTION_TOKEN_CLASS,\n] as const\n\ninterface ToolbarButtonProps {\n  onClick: () => void\n  isActive?: boolean\n  disabled?: boolean\n  title: string\n  children: React.ReactNode\n}\n\nfunction ToolbarButton({\n  onClick,\n  isActive = false,\n  disabled = false,\n  title,\n  children,\n}: ToolbarButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      title={title}\n      aria-label={title}\n      aria-pressed={isActive}\n      className={cn(\n        'inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control transition-colors duration-fast-01 ease-productive-standard',\n        'hover:bg-surface-raised-hover',\n        'disabled:pointer-events-none disabled:opacity-action-disabled',\n        isActive\n          ? 'bg-surface-raised-hover text-accent-11'\n          : 'text-surface-fg-subtle',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nfunction LinkButton({ editor }: { editor: Editor }) {\n  const [showInput, setShowInput] = React.useState(false)\n  const [url, setUrl] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const { isLink } = useEditorState({\n    editor,\n    selector: ({ editor: e }) => ({ isLink: e.isActive('link') }),\n  })\n\n  const handleToggle = () => {\n    if (isLink) {\n      editor.chain().focus().unsetLink().run()\n      return\n    }\n    const previousUrl = editor.getAttributes('link').href || ''\n    setUrl(previousUrl)\n    setShowInput(true)\n    setTimeout(() => inputRef.current?.focus(), 0)\n  }\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    if (url.trim()) {\n      editor.chain().focus().setLink({ href: url.trim() }).run()\n    }\n    setShowInput(false)\n    setUrl('')\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setShowInput(false)\n      setUrl('')\n      editor.commands.focus()\n    }\n  }\n\n  return (\n    <div className=\"relative\">\n      <ToolbarButton onClick={handleToggle} isActive={isLink} title=\"Link\">\n        <Icon icon={IconLink} size=\"sm\" />\n      </ToolbarButton>\n      {showInput && (\n        <form\n          onSubmit={handleSubmit}\n          aria-label=\"Edit link URL\"\n          className=\"absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-control bg-surface-overlay p-ds-02 shadow-raised-hover\"\n        >\n          <input\n            ref={inputRef}\n            type=\"url\"\n            value={url}\n            onChange={(e) => setUrl(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder=\"https://...\"\n            className=\"h-ds-sm w-[240px] rounded-control-inner border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-hidden\"\n          />\n          <Button type=\"submit\" variant=\"solid\" size=\"sm\">\n            Apply\n          </Button>\n        </form>\n      )}\n    </div>\n  )\n}\n\nfunction ToolbarDivider() {\n  return <div className=\"mx-ds-02 h-[16px] w-px bg-surface-border\" />\n}\n\nfunction Toolbar({ editor, toolbar, onImageClick, onFileClick, onEmojiClick }: {\n  editor: Editor\n  toolbar?: ToolbarItem[]\n  onImageClick?: () => void\n  onFileClick?: () => void\n  onEmojiClick?: () => void\n}) {\n  // v3: useEditorState subscribes to specific state slices so the toolbar\n  // re-renders only when active-state or can-undo/redo actually changes.\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: e }) => ({\n      isBold: e.isActive('bold'),\n      isItalic: e.isActive('italic'),\n      isUnderline: e.isActive('underline'),\n      isStrike: e.isActive('strike'),\n      isHighlight: e.isActive('highlight'),\n      isH2: e.isActive('heading', { level: 2 }),\n      isH3: e.isActive('heading', { level: 3 }),\n      isBlockquote: e.isActive('blockquote'),\n      isBulletList: e.isActive('bulletList'),\n      isOrderedList: e.isActive('orderedList'),\n      isTaskList: e.isActive('taskList'),\n      isCodeBlock: e.isActive('codeBlock'),\n      isLink: e.isActive('link'),\n      isAlignLeft: e.isActive({ textAlign: 'left' }),\n      isAlignCenter: e.isActive({ textAlign: 'center' }),\n      isAlignRight: e.isActive({ textAlign: 'right' }),\n      canUndo: e.can().undo(),\n      canRedo: e.can().redo(),\n    }),\n  })\n\n  const show = (item: ToolbarItem) => !toolbar || toolbar.includes(item)\n\n  // Each group is an array of ToolbarItem names that belong to it.\n  // A divider renders between two adjacent groups only if both have at least one visible item.\n  const hasInline = show('bold') || show('italic') || show('underline') || show('strike') || show('highlight')\n  const hasBlock = show('h2') || show('h3') || show('blockquote')\n  const hasList = show('bulletList') || show('orderedList') || show('taskList') || show('codeBlock')\n  const hasMedia = show('link') || (!!onImageClick && show('image')) || (!!onFileClick && show('file')) || show('hr')\n  const hasAlign = show('alignLeft') || show('alignCenter') || show('alignRight')\n  const hasEmojiGroup = !!onEmojiClick && show('emoji')\n  const hasHistory = show('undo') || show('redo')\n\n  return (\n    <div role=\"toolbar\" aria-label=\"Text formatting\" className=\"flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b\">\n      {/* Inline formatting */}\n      {show('bold') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleBold().run()} isActive={state.isBold} title=\"Bold\">\n          <Icon icon={IconBold} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('italic') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleItalic().run()} isActive={state.isItalic} title=\"Italic\">\n          <Icon icon={IconItalic} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('underline') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={state.isUnderline} title=\"Underline\">\n          <Icon icon={IconUnderline} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('strike') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleStrike().run()} isActive={state.isStrike} title=\"Strikethrough\">\n          <Icon icon={IconStrikethrough} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('highlight') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleHighlight().run()} isActive={state.isHighlight} title=\"Highlight\">\n          <Icon icon={IconHighlight} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n\n      {hasInline && hasBlock && <ToolbarDivider />}\n\n      {/* Block formatting */}\n      {show('h2') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} isActive={state.isH2} title=\"Heading 2\">\n          <Icon icon={IconH2} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('h3') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} isActive={state.isH3} title=\"Heading 3\">\n          <Icon icon={IconH3} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('blockquote') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleBlockquote().run()} isActive={state.isBlockquote} title=\"Blockquote\">\n          <Icon icon={IconBlockquote} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n\n      {hasBlock && hasList && <ToolbarDivider />}\n\n      {/* Lists */}\n      {show('bulletList') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleBulletList().run()} isActive={state.isBulletList} title=\"Bullet list\">\n          <Icon icon={IconList} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('orderedList') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleOrderedList().run()} isActive={state.isOrderedList} title=\"Ordered list\">\n          <Icon icon={IconListNumbers} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('taskList') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleTaskList().run()} isActive={state.isTaskList} title=\"Task list\">\n          <Icon icon={IconListCheck} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n      {show('codeBlock') && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleCodeBlock().run()} isActive={state.isCodeBlock} title=\"Code block\">\n          <Icon icon={IconCode} size=\"sm\" stroke=\"bold\" />\n        </ToolbarButton>\n      )}\n\n      {hasList && hasMedia && <ToolbarDivider />}\n\n      {/* Media & Links */}\n      {show('link') && <LinkButton editor={editor} />}\n      {onImageClick && show('image') && (\n        <ToolbarButton onClick={onImageClick} title=\"Insert image\">\n          <Icon icon={IconPhoto} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {onFileClick && show('file') && (\n        <ToolbarButton onClick={onFileClick} title=\"Attach file\">\n          <Icon icon={IconPaperclip} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('hr') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setHorizontalRule().run()} title=\"Horizontal rule\">\n          <Icon icon={IconLineDashed} size=\"sm\" />\n        </ToolbarButton>\n      )}\n\n      {hasMedia && hasAlign && <ToolbarDivider />}\n\n      {/* Alignment */}\n      {show('alignLeft') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('left').run()} isActive={state.isAlignLeft} title=\"Align left\">\n          <Icon icon={IconAlignLeft} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('alignCenter') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('center').run()} isActive={state.isAlignCenter} title=\"Align center\">\n          <Icon icon={IconAlignCenter} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('alignRight') && (\n        <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('right').run()} isActive={state.isAlignRight} title=\"Align right\">\n          <Icon icon={IconAlignRight} size=\"sm\" />\n        </ToolbarButton>\n      )}\n\n      {hasAlign && (hasEmojiGroup || hasHistory) && <ToolbarDivider />}\n\n      {/* Emoji */}\n      {onEmojiClick && show('emoji') && (\n        <ToolbarButton onClick={onEmojiClick} title=\"Emoji\">\n          <Icon icon={IconMoodSmile} size=\"sm\" />\n        </ToolbarButton>\n      )}\n\n      {/* History */}\n      {show('undo') && (\n        <ToolbarButton onClick={() => editor.chain().focus().undo().run()} disabled={!state.canUndo} title=\"Undo\">\n          <Icon icon={IconArrowBackUp} size=\"sm\" />\n        </ToolbarButton>\n      )}\n      {show('redo') && (\n        <ToolbarButton onClick={() => editor.chain().focus().redo().run()} disabled={!state.canRedo} title=\"Redo\">\n          <Icon icon={IconArrowForwardUp} size=\"sm\" />\n        </ToolbarButton>\n      )}\n    </div>\n  )\n}\n\nconst LazyPicker = React.lazy(() => import('@emoji-mart/react'))\n\nfunction EmojiPickerLazy({ set = 'native', onSelect }: { set?: string; onSelect: (emoji: { id: string; native: string }) => void }) {\n  const [data, setData] = React.useState<unknown>(null)\n  const { colorMode } = useColorMode()\n\n  React.useEffect(() => {\n    loadEmojiData(set).then((d) => setData(d))\n  }, [set])\n\n  const fallback = <div className=\"flex h-[350px] w-[352px] items-center justify-center rounded-surface bg-surface-overlay shadow-raised-hover\"><span className=\"text-ds-sm text-surface-fg-subtle\">Loading...</span></div>\n\n  if (!data) return fallback\n\n  return (\n    <React.Suspense fallback={fallback}>\n      <LazyPicker\n        data={data}\n        set={set}\n        onEmojiSelect={(emoji: { native: string; id: string }) => onSelect({ id: emoji.id, native: emoji.native })}\n        theme={colorMode === 'dark' ? 'dark' : 'light'}\n        previewPosition=\"none\"\n        skinTonePosition=\"none\"\n      />\n    </React.Suspense>\n  )\n}\n\nexport type ToolbarItem =\n  | 'bold' | 'italic' | 'underline' | 'strike' | 'highlight'\n  | 'h2' | 'h3' | 'blockquote'\n  | 'bulletList' | 'orderedList' | 'taskList' | 'codeBlock'\n  | 'link' | 'image' | 'file' | 'hr'\n  | 'alignLeft' | 'alignCenter' | 'alignRight'\n  | 'emoji' | 'undo' | 'redo'\n\nexport interface MentionItem {\n  id: string\n  label: string\n  avatar?: string\n}\n\n/**\n * A Tiptap-powered rich text editor with a configurable toolbar, @mentions,\n * emoji suggestions, file/image uploads, and task lists.\n * Outputs sanitized HTML via `onChange`.\n */\nexport interface RichTextEditorProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'content'> {\n  /** Initial HTML content. Updates are NOT reactive — use `onChange` for controlled state. */\n  content?: string\n  placeholder?: string\n  /** Called with the editor's HTML string whenever content changes. */\n  onChange?: (html: string) => void\n  className?: string\n  /** Set to false to render in read-only mode (e.g. for previewing). */\n  editable?: boolean\n  /** Called when an image is pasted/dropped. Return a URL. If not provided, images inline as base64. */\n  onImageUpload?: (file: File) => Promise<string>\n  /** Called when a non-image file is dropped/pasted. If not provided, non-image files are ignored. */\n  onFileUpload?: (file: File) => Promise<{ url: string; name: string; size: number }>\n  /** Whitelist of toolbar items to display. Omit to show all. */\n  toolbar?: ToolbarItem[]\n  /** Static list of mentionable items (shown when user types @). */\n  mentions?: MentionItem[]\n  /** Async mention search. Takes precedence over static `mentions` list. */\n  onMentionSearch?: (query: string) => Promise<MentionItem[]>\n  /** Called when a mention is selected from the suggestion dropdown. */\n  onMentionSelect?: (item: MentionItem) => void\n  /** Emoji art style. @default 'native' */\n  emojiSet?: EmojiSet\n}\n\nconst RichTextEditor = React.forwardRef<HTMLDivElement, RichTextEditorProps>(\n  function RichTextEditor({\n  content = '',\n  placeholder = 'Start writing...',\n  onChange,\n  className,\n  editable = true,\n  toolbar,\n  onImageUpload,\n  onFileUpload,\n  mentions,\n  onMentionSearch,\n  onMentionSelect,\n  emojiSet = 'native',\n  ...props\n}, ref) {\n  const editorRef = React.useRef<ReturnType<typeof useEditor>>(null)\n  const isInternalChangeRef = React.useRef(false)\n  const [showEmojiPicker, setShowEmojiPicker] = React.useState(false)\n  const emojiPickerRef = React.useRef<HTMLDivElement>(null)\n  const imageInputRef = React.useRef<HTMLInputElement>(null)\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleImageInsert = async (file: File) => {\n    const ed = editorRef.current\n    if (!ed) return\n    if (onImageUpload) {\n      const url = await onImageUpload(file)\n      if (url && /^https?:\\/\\//i.test(url)) {\n        ed.chain().focus().setImage({ src: url }).run()\n      }\n    } else {\n      const reader = new FileReader()\n      reader.onload = () => {\n        ed.chain().focus().setImage({ src: reader.result as string }).run()\n      }\n      reader.readAsDataURL(file)\n    }\n  }\n\n  const handleFileInsert = async (file: File) => {\n    const ed = editorRef.current\n    if (!ed || !onFileUpload) return\n    const result = await onFileUpload(file)\n    ed.chain().focus().insertContent({\n      type: 'fileAttachment',\n      attrs: { url: result.url, name: result.name, size: result.size },\n    }).run()\n  }\n\n  const editor = useEditor({\n    immediatelyRender: false, // SSR-safe — prevents hydration mismatch in Next.js\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [2, 3] },\n        // v3: Underline + Link are now included in StarterKit\n        link: {\n          openOnClick: false,\n          protocols: ['http', 'https', 'mailto'],\n          validate: (href: string) => /^(https?:\\/\\/|mailto:)/i.test(href),\n          HTMLAttributes: {\n            rel: 'noopener noreferrer',\n            target: '_blank',\n          },\n        },\n      }),\n      Placeholder.configure({\n        placeholder,\n        emptyEditorClass:\n          'before:content-[attr(data-placeholder)] before:text-surface-fg-subtle before:float-left before:h-0 before:pointer-events-none',\n      }),\n      Highlight.configure({ multicolor: false }),\n      ListKit.configure({\n        bulletList: false,  // Already in StarterKit\n        orderedList: false, // Already in StarterKit\n        listItem: false,    // Already in StarterKit\n        listKeymap: false,  // Already in StarterKit\n        taskList: {},\n        taskItem: { nested: true },\n      }),\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Image.configure({\n        allowBase64: true,\n        HTMLAttributes: {\n          class: 'max-w-full rounded-control',\n        },\n      }),\n      FileAttachment,\n      ...(mentions || onMentionSearch ? [\n        Mention.configure({\n          HTMLAttributes: { class: 'mention' },\n          suggestion: {\n            items: async ({ query }: { query: string }) => {\n              if (onMentionSearch) return await onMentionSearch(query)\n              if (mentions) return mentions.filter(m => m.label.toLowerCase().includes(query.toLowerCase())).slice(0, 8)\n              return []\n            },\n            render: createSuggestionRenderer(onMentionSelect),\n          },\n        }),\n      ] : []),\n      EmojiNode,\n      createEmojiSuggestion(emojiSet),\n    ],\n    content,\n    editable,\n    editorProps: {\n      handleDrop: (_view, event, _slice, moved) => {\n        if (moved || !event.dataTransfer?.files.length) return false\n        const file = event.dataTransfer.files[0]\n        if (!file) return false\n        if (file.type.startsWith('image/')) {\n          handleImageInsert(file)\n          return true\n        }\n        if (onFileUpload) {\n          handleFileInsert(file)\n          return true\n        }\n        return false\n      },\n      handlePaste: (_view, event) => {\n        const file = event.clipboardData?.files[0]\n        if (!file) return false\n        if (file.type.startsWith('image/')) {\n          handleImageInsert(file)\n          return true\n        }\n        if (onFileUpload) {\n          handleFileInsert(file)\n          return true\n        }\n        return false\n      },\n      attributes: {\n        class: cn(\n          ...PROSE_CLASSES,\n          'focus:outline-hidden',\n          'min-h-[120px] px-ds-04 py-ds-04',\n        ),\n      },\n    },\n    onUpdate: ({ editor: ed }) => {\n      isInternalChangeRef.current = true\n      onChange?.(ed.getHTML())\n      queueMicrotask(() => {\n        isInternalChangeRef.current = false\n      })\n    },\n  })\n\n  React.useEffect(() => {\n    editorRef.current = editor\n  }, [editor])\n\n  // Close emoji picker on click outside\n  React.useEffect(() => {\n    if (!showEmojiPicker) return\n    const handleClickOutside = (e: MouseEvent) => {\n      if (emojiPickerRef.current && !emojiPickerRef.current.contains(e.target as Node)) {\n        setShowEmojiPicker(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [showEmojiPicker])\n\n  React.useEffect(() => {\n    if (isInternalChangeRef.current) return\n    if (editor && content !== editor.getHTML()) {\n      editor.commands.setContent(content, { emitUpdate: false })\n    }\n  }, [editor, content])\n\n  if (!editor) return null\n\n  return (\n    <div ref={ref} {...props} className={cn('relative', className)}>\n      {/* Emoji picker rendered outside the overflow-hidden box so it isn't clipped */}\n      {showEmojiPicker && (\n        <div\n          ref={emojiPickerRef}\n          className=\"absolute bottom-full right-0 z-popover mb-ds-02\"\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') {\n              e.stopPropagation()\n              setShowEmojiPicker(false)\n            }\n          }}\n        >\n          <EmojiPickerLazy\n            set={emojiSet}\n            onSelect={async ({ id, native }) => {\n              const data = await loadEmojiData(emojiSet)\n              const resolved = lookupEmoji(data, id)\n              if (resolved) {\n                editor.chain().focus().insertContent({\n                  type: 'emojiNode',\n                  attrs: { id, native: resolved.native, set: emojiSet, x: resolved.x, y: resolved.y },\n                }).run()\n              } else {\n                editor.chain().focus().insertContent(native).run()\n              }\n              setShowEmojiPicker(false)\n            }}\n          />\n        </div>\n      )}\n      <div\n        className={cn(\n          'overflow-hidden rounded-surface border border-surface-border-strong bg-surface-raised',\n          'transition-colors ease-productive-standard focus-within:border-surface-border-strong',\n        )}\n      >\n        <input\n          ref={imageInputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          aria-label=\"Upload image\"\n          className=\"hidden\"\n          onChange={(e) => {\n            const file = e.target.files?.[0]\n            if (file) handleImageInsert(file)\n            e.target.value = ''\n          }}\n        />\n        {onFileUpload && (\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            aria-label=\"Upload file\"\n            className=\"hidden\"\n            onChange={(e) => {\n              const file = e.target.files?.[0]\n              if (file) handleFileInsert(file)\n              e.target.value = ''\n            }}\n          />\n        )}\n        {editable && (\n          <Toolbar\n            editor={editor}\n            toolbar={toolbar}\n            onImageClick={() => imageInputRef.current?.click()}\n            onFileClick={onFileUpload ? () => fileInputRef.current?.click() : undefined}\n            onEmojiClick={() => setShowEmojiPicker((prev) => !prev)}\n          />\n        )}\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  )\n},\n)\n\nRichTextEditor.displayName = 'RichTextEditor'\n\nexport interface RichTextViewerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {\n  content: string\n  className?: string\n}\n\nconst RichTextViewer = React.forwardRef<HTMLDivElement, RichTextViewerProps>(\n  function RichTextViewer({ content, className, ...props }, ref) {\n  const editor = useEditor({\n    immediatelyRender: false, // SSR-safe — prevents hydration mismatch in Next.js\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [2, 3] },\n        link: {\n          openOnClick: true,\n          protocols: ['http', 'https', 'mailto'],\n          validate: (href: string) => /^(https?:\\/\\/|mailto:)/i.test(href),\n          HTMLAttributes: {\n            rel: 'noopener noreferrer',\n            target: '_blank',\n          },\n        },\n      }),\n      Highlight.configure({ multicolor: false }),\n      ListKit.configure({\n        bulletList: false,\n        orderedList: false,\n        listItem: false,\n        listKeymap: false,\n        taskList: {},\n        taskItem: { nested: true },\n      }),\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Image.configure({\n        allowBase64: true,\n        HTMLAttributes: {\n          class: 'max-w-full rounded-control',\n        },\n      }),\n      FileAttachment,\n      Mention.configure({\n        HTMLAttributes: { class: 'mention' },\n      }),\n    ],\n    content,\n    editable: false,\n    editorProps: {\n      attributes: {\n        class: cn(...PROSE_CLASSES),\n      },\n    },\n  })\n\n  if (!editor) return null\n\n  return (\n    <div ref={ref} {...props} className={className}>\n      <EditorContent editor={editor} />\n    </div>\n  )\n},\n)\n\nRichTextViewer.displayName = 'RichTextViewer'\n\nexport { RichTextEditor, RichTextViewer }\n"],"mappings":"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"}

package/dist/tokens/base.css

@@ -6,6 +6,12 @@
    ═══════════════════════════════════════════════════════════════════ */
 
 @layer base {
+  /* Headings default to the display face (Manrope). Consumers that wire
+     their own heading font in unlayered CSS still win over this default. */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
+  }
+
   /* Prevent iOS Safari auto-zoom on inputs with font-size < 16px.
      Applies only on narrow viewports where iOS is the common browser. */
   @media screen and (max-width: 767px) {

package/dist/tokens/index.css

@@ -5,7 +5,7 @@
  *   primitives             → defines --pink-*, --neutral-*, etc. (private palette)
  *   semantic               → @theme public tokens referencing the primitives +
  *                            :root meta-tokens + .dark overrides + forced-colors block
- *   typography             → @font-face for Inter, Ranade (load early)
+ *   typography             → @font-face for Inter, Manrope, Ranade (load early)
  *   typography-semantic    → --typo-* composites referencing @theme --text-ds-* etc.
  *   base                   → @property --border-angle + iOS font-size fix
  *   animations             → @keyframes referenced by component animations

package/dist/tokens/semantic.css

@@ -51,7 +51,7 @@
   /* Font families — consumers override with next/font CSS variables.
      TW4 namespace: --font-* → font-* utility */
   --font-sans: "Inter", system-ui, sans-serif;
-  --font-display: "Inter", system-ui, sans-serif;
+  --font-display: "Manrope", "Inter", system-ui, sans-serif;
   --font-body: "Inter", system-ui, sans-serif;
   --font-accent: Ranade, sans-serif;
   --font-mono: "SF Mono", "Fira Code", monospace;

package/dist/tokens/typography.css

@@ -24,6 +24,16 @@
   font-display: swap;
 }
 
+/* Manrope (display/heading) — Variable font: supports weights 200-800.
+   No italic axis exists for Manrope; italic display text falls back. */
+@font-face {
+  font-family: 'Manrope';
+  src: url('../../fonts/Manrope-Variable.woff2') format('woff2');
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Ranade (accent — brand moments, hero headings, special callouts) */
 @font-face {
   font-family: 'Ranade';

package/dist/tokens/utilities.css

@@ -17,6 +17,7 @@
    ─────────────────────────────────────────────────────────────────── */
 
 @utility text-heading-2xl {
+  font-family:    var(--font-display);
   font-size:      var(--typo-heading-2xl-size);
   font-weight:    var(--typo-heading-2xl-weight);
   line-height:    var(--typo-heading-2xl-leading);
@@ -24,6 +25,7 @@
 }
 
 @utility text-heading-xl {
+  font-family:    var(--font-display);
   font-size:      var(--typo-heading-xl-size);
   font-weight:    var(--typo-heading-xl-weight);
   line-height:    var(--typo-heading-xl-leading);
@@ -31,6 +33,7 @@
 }
 
 @utility text-heading-lg {
+  font-family:    var(--font-display);
   font-size:      var(--typo-heading-lg-size);
   font-weight:    var(--typo-heading-lg-weight);
   line-height:    var(--typo-heading-lg-leading);
@@ -38,6 +41,7 @@
 }
 
 @utility text-heading-md {
+  font-family:    var(--font-display);
   font-size:      var(--typo-heading-md-size);
   font-weight:    var(--typo-heading-md-weight);
   line-height:    var(--typo-heading-md-leading);
@@ -45,6 +49,7 @@
 }
 
 @utility text-heading-sm {
+  font-family:    var(--font-display);
   font-size:      var(--typo-heading-sm-size);
   font-weight:    var(--typo-heading-sm-weight);
   line-height:    var(--typo-heading-sm-leading);
@@ -52,6 +57,7 @@
 }
 
 @utility text-heading-xs {
+  font-family:    var(--font-display);
   font-size:      var(--typo-heading-xs-size);
   font-weight:    var(--typo-heading-xs-weight);
   line-height:    var(--typo-heading-xs-leading);

package/dist/ui/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA+EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAiFV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}

package/dist/ui/avatar.js

@@ -3,11 +3,12 @@ import { $t as e, Qt as t, en as n } from "../_chunks/primitives.js";
 import { springs as r } from "./lib/motion.js";
 import { t as i } from "../_chunks/vendor-utils.js";
 import { cn as a } from "./lib/utils.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { motion as l } from "framer-motion";
+import { Skeleton as o } from "./skeleton.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { motion as u, useReducedMotion as d } from "framer-motion";
 //#region src/ui/avatar.tsx
-var u = o.createContext("circle"), d = o.createContext("md"), f = i("relative flex shrink-0 overflow-hidden", {
+var f = s.createContext("circle"), p = s.createContext("md"), m = i("relative flex shrink-0 overflow-hidden", {
 	variants: {
 		size: {
 			xs: "h-ds-xs w-ds-xs",
@@ -26,37 +27,37 @@ var u = o.createContext("circle"), d = o.createContext("md"), f = i("relative fl
 		size: "md",
 		shape: "circle"
 	}
-}), p = {
+}), h = {
 	online: "bg-success-9",
 	offline: "bg-surface-raised-hover",
 	busy: "bg-error-9",
 	away: "bg-warning-9"
-}, m = {
+}, g = {
 	online: "Online",
 	offline: "Offline",
 	busy: "Busy",
 	away: "Away"
-}, h = {
+}, _ = {
 	xs: "h-ds-02b w-ds-02b",
 	sm: "h-[8px] w-[8px]",
 	md: "h-ds-03 w-ds-03",
 	lg: "h-[12px] w-[12px]",
 	xl: "h-ds-04 w-ds-04"
-}, g = {
+}, v = {
 	lead: "ring-accent-7",
 	admin: "ring-warning-7",
 	client: "ring-info-7"
-}, _ = {
+}, y = {
 	circle: "rounded-pill",
 	square: "rounded-none",
 	rounded: "rounded-control"
-}, v = {
+}, b = {
 	xs: "text-ds-2xs",
 	sm: "text-ds-xs",
 	md: "text-ds-sm",
 	lg: "text-ds-md",
 	xl: "text-ds-lg"
-}, y = [
+}, x = [
 	{
 		bg: "bg-accent-3",
 		text: "text-accent-11"
@@ -90,43 +91,43 @@ var u = o.createContext("circle"), d = o.createContext("md"), f = i("relative fl
 		text: "text-category-cyan-11"
 	}
 ];
-function b(e) {
+function S(e) {
 	let t = 5381;
 	for (let n = 0; n < e.length; n++) t = (t << 5) + t + e.charCodeAt(n) | 0;
-	return y[Math.abs(t) % y.length];
+	return x[Math.abs(t) % x.length];
 }
-var x = o.forwardRef(({ className: e, size: t, shape: i, status: o, ring: v, badge: y, loading: b, children: x, ...S }, C) => {
-	let w = i ?? "circle", T = v && v !== "none" ? a("ring-2 ring-offset-2 ring-offset-surface-raised", g[v], _[w]) : void 0;
-	if (b) return /* @__PURE__ */ s("span", {
-		ref: C,
-		className: a("relative inline-flex shrink-0", T),
-		children: /* @__PURE__ */ s("span", {
-			className: a(f({
+var C = s.forwardRef(({ className: e, size: t, shape: i, status: s, ring: b, badge: x, loading: S, children: C, ...w }, T) => {
+	let E = i ?? "circle", D = d(), O = b && b !== "none" ? a("ring-2 ring-offset-2 ring-offset-surface-raised", v[b], y[E]) : void 0;
+	if (S) return /* @__PURE__ */ c("span", {
+		ref: T,
+		className: a("relative inline-flex shrink-0", O),
+		children: /* @__PURE__ */ c(o, {
+			className: a(m({
 				size: t,
 				shape: i
-			}), "animate-pulse bg-surface-raised-hover"),
+			})),
 			"data-slot": "avatar-skeleton"
 		})
 	});
-	let E = y !== void 0 && y !== 0;
-	return /* @__PURE__ */ s(u.Provider, {
-		value: w,
-		children: /* @__PURE__ */ s(d.Provider, {
+	let k = x !== void 0 && x !== 0;
+	return /* @__PURE__ */ c(f.Provider, {
+		value: E,
+		children: /* @__PURE__ */ c(p.Provider, {
 			value: t ?? "md",
-			children: /* @__PURE__ */ c("span", {
-				className: a("relative inline-flex shrink-0", T),
+			children: /* @__PURE__ */ l("span", {
+				className: a("relative inline-flex shrink-0", O),
 				children: [
-					/* @__PURE__ */ s(n, {
-						ref: C,
-						className: a(f({
+					/* @__PURE__ */ c(n, {
+						ref: T,
+						className: a(m({
 							size: t,
 							shape: i
 						}), e),
-						...S,
-						children: x
+						...w,
+						children: C
 					}),
-					o && (o === "online" ? /* @__PURE__ */ s(l.span, {
-						className: a("absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
+					s && (s === "online" && !D ? /* @__PURE__ */ c(u.span, {
+						className: a("absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised", h[s], _[t ?? "md"]),
 						animate: { opacity: [
 							1,
 							.75,
@@ -138,37 +139,37 @@ var x = o.forwardRef(({ className: e, size: t, shape: i, status: o, ring: v, bad
 							ease: "easeInOut"
 						},
 						role: "img",
-						"aria-label": m[o]
-					}) : /* @__PURE__ */ s("span", {
-						className: a("absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
+						"aria-label": g[s]
+					}) : /* @__PURE__ */ c("span", {
+						className: a("absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised", h[s], _[t ?? "md"]),
 						role: "img",
-						"aria-label": m[o]
+						"aria-label": g[s]
 					})),
-					E && (y === "dot" ? /* @__PURE__ */ s("span", {
+					k && (x === "dot" ? /* @__PURE__ */ c("span", {
 						className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-pill bg-error-9 ring-2 ring-surface-raised",
 						"data-slot": "avatar-badge-dot",
 						"aria-hidden": "true"
-					}) : typeof y == "number" ? /* @__PURE__ */ s(l.span, {
+					}) : typeof x == "number" ? /* @__PURE__ */ c(u.span, {
 						initial: { scale: 0 },
 						animate: { scale: 1 },
-						transition: r.bouncy,
+						transition: r.smooth,
 						className: "absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised",
 						"data-slot": "avatar-badge",
 						role: "status",
-						"aria-label": `${y > 99 ? "99+" : y} notifications`,
-						children: y > 99 ? "99+" : y
-					}) : /* @__PURE__ */ s("span", {
+						"aria-label": `${x > 99 ? "99+" : x} notifications`,
+						children: x > 99 ? "99+" : x
+					}) : /* @__PURE__ */ c("span", {
 						className: "absolute -right-1 -top-1",
 						"data-slot": "avatar-badge-custom",
-						children: y
+						children: x
 					}))
 				]
 			})
 		})
 	});
 });
-x.displayName = n.displayName;
-var S = o.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ s(l.span, {
+C.displayName = n.displayName;
+var w = s.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ c(u.span, {
 	initial: {
 		opacity: 0,
 		scale: .96
@@ -179,23 +180,23 @@ var S = o.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ s(l.span, {
 	},
 	transition: r.smooth,
 	className: "absolute inset-0 h-full w-full",
-	children: /* @__PURE__ */ s(e, {
+	children: /* @__PURE__ */ c(e, {
 		ref: i,
 		className: a("aspect-square h-full w-full", t),
 		...n
 	})
 }));
-S.displayName = e.displayName;
-var C = o.forwardRef(({ className: e, colorSeed: n, children: r, ...i }, c) => {
-	let l = typeof r == "string" ? r : "", f = b(n ?? l), p = o.useContext(u), m = o.useContext(d), h = p === "square" ? "rounded-none" : p === "rounded" ? "rounded-control" : "rounded-pill", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
-	return /* @__PURE__ */ s(t, {
-		ref: c,
+w.displayName = e.displayName;
+var T = s.forwardRef(({ className: e, colorSeed: n, children: r, ...i }, o) => {
+	let l = typeof r == "string" ? r : "", u = S(n ?? l), d = s.useContext(f), m = s.useContext(p), h = d === "square" ? "rounded-none" : d === "rounded" ? "rounded-control" : "rounded-pill", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
+	return /* @__PURE__ */ c(t, {
+		ref: o,
 		"data-slot": "avatar-fallback",
-		className: a("flex h-full w-full items-center justify-center font-semibold", h, v[m], f.bg, f.text, g, e),
+		className: a("flex h-full w-full items-center justify-center font-semibold", h, b[m], u.bg, u.text, g, e),
 		...i,
 		children: r
 	});
 });
-C.displayName = t.displayName;
+T.displayName = t.displayName;
 //#endregion
-export { x as Avatar, C as AvatarFallback, S as AvatarImage, f as avatarVariants };
+export { C as Avatar, T as AvatarFallback, w as AvatarImage, m as avatarVariants };

package/dist/ui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\nconst statusColorMap: Record<AvatarStatus, string> = {\n  online: 'bg-success-9',\n  offline: 'bg-surface-raised-hover',\n  busy: 'bg-error-9',\n  away: 'bg-warning-9',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/**\n * Dot size classes that scale with the avatar size.\n * xs/sm get a smaller dot, md gets medium, lg/xl get a larger dot.\n */\nconst statusDotSizeMap: Record<string, string> = {\n  xs: 'h-ds-02b w-ds-02b',\n  sm: 'h-[8px] w-[8px]',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-[12px] w-[12px]',\n  xl: 'h-ds-04 w-ds-04',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-ds-2xs',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-md',\n  xl: 'text-ds-lg',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <span\n          className={cn(avatarVariants({ size, shape }), 'animate-pulse bg-surface-raised-hover')}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        status === 'online' ? (\n          <motion.span\n            className={cn('absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])}\n            animate={{ opacity: [1, 0.75, 1] }}\n            transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}\n            role=\"img\"\n            aria-label={statusLabelMap[status]}\n          />\n        ) : (\n          <span className={cn('absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])} role=\"img\" aria-label={statusLabelMap[status]} />\n        )\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-pill bg-error-9 ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.bouncy}\n            className=\"absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ opacity: 0, scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion, useReducedMotion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\nconst statusColorMap: Record<AvatarStatus, string> = {\n  online: 'bg-success-9',\n  offline: 'bg-surface-raised-hover',\n  busy: 'bg-error-9',\n  away: 'bg-warning-9',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/**\n * Dot size classes that scale with the avatar size.\n * xs/sm get a smaller dot, md gets medium, lg/xl get a larger dot.\n */\nconst statusDotSizeMap: Record<string, string> = {\n  xs: 'h-ds-02b w-ds-02b',\n  sm: 'h-[8px] w-[8px]',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-[12px] w-[12px]',\n  xl: 'h-ds-04 w-ds-04',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-ds-2xs',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-md',\n  xl: 'text-ds-lg',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n  // MotionConfig can't stop this opacity loop (non-transform), so guard it locally.\n  const prefersReduced = useReducedMotion()\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        status === 'online' && !prefersReduced ? (\n          <motion.span\n            className={cn('absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])}\n            animate={{ opacity: [1, 0.75, 1] }}\n            transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}\n            role=\"img\"\n            aria-label={statusLabelMap[status]}\n          />\n        ) : (\n          <span className={cn('absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised', statusColorMap[status], statusDotSizeMap[size ?? 'md'])} role=\"img\" aria-label={statusLabelMap[status]} />\n        )\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-pill bg-error-9 ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.smooth}\n            className=\"absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ opacity: 0, scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}

package/dist/ui/badge-indicator.js

@@ -34,7 +34,7 @@ function l({ count: l, max: u = 99, dot: d = !1, color: f = "error", invisible:
 				scale: 0,
 				opacity: 0
 			},
-			transition: e.bouncy,
+			transition: e.smooth,
 			className: t("absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-raised", c[f], s[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
 			children: !d && b
 		}, "indicator") })]