@devalok/shilp-sutra 0.37.1 → 0.39.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 { 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-ds-lg [&_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-ds-md [&_img]:my-ds-03',\n  '[&_.mention]:rounded-ds-sm [&_.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-ds-md 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-ds-md border border-surface-border-strong 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-ds-sm 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\" className=\"h-ds-sm rounded-ds-sm bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10\">\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-ds-lg border border-surface-border-strong 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-ds-md',\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-ds-lg 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-ds-md',\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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"}
+{"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 { 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 border border-surface-border-strong 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\" className=\"h-ds-sm rounded-control-inner bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10\">\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 border border-surface-border-strong 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/composed/schedule-view.js

@@ -72,7 +72,7 @@ function _({ date: t, events: a, startHour: o, endHour: f, slotDuration: m, onEv
 					let r = h(t, o, f), i = p[t.color ?? "primary"];
 					return /* @__PURE__ */ n("button", {
 						type: "button",
-						className: e("absolute left-ds-01 right-ds-01 rounded-ds-sm border-l-[3px] px-ds-02 py-ds-01", "text-left text-ds-xs font-medium overflow-hidden cursor-pointer", "hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard", i),
+						className: e("absolute left-ds-01 right-ds-01 rounded-control-inner border-l-[3px] px-ds-02 py-ds-01", "text-left text-ds-xs font-medium overflow-hidden cursor-pointer", "hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard", i),
 						style: r,
 						onClick: (e) => {
 							e.stopPropagation(), g?.(t);
@@ -89,7 +89,7 @@ function _({ date: t, events: a, startHour: o, endHour: f, slotDuration: m, onEv
 					style: { top: `${w}%` },
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ n(i.span, {
-						className: "absolute -left-[5px] -top-[4px] h-[10px] w-[10px] rounded-ds-full bg-error-9",
+						className: "absolute -left-[5px] -top-[4px] h-[10px] w-[10px] rounded-pill bg-error-9",
 						animate: { scale: [
 							1,
 							1.3,
@@ -115,7 +115,7 @@ var v = t.forwardRef(({ view: i, date: o, events: c, onEventClick: l, onSlotClic
 		ref: y,
 		role: "region",
 		"aria-label": i === "day" ? `Schedule for ${s(o, "EEEE, MMMM d, yyyy")}` : `Week schedule starting ${s(b[0], "MMMM d, yyyy")}`,
-		className: e("flex rounded-ds-md border border-surface-border-strong bg-surface-raised overflow-hidden", "h-[480px]", h),
+		className: e("flex rounded-control border border-surface-border-strong bg-surface-raised overflow-hidden", "h-[480px]", h),
 		...v,
 		children: [/* @__PURE__ */ n(g, {
 			startHour: d,

package/dist/composed/schedule-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-view.js","names":[],"sources":["../../src/composed/schedule-view.tsx"],"sourcesContent":["'use client'\n\nimport {\n  addDays,\n  differenceInMinutes,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  isToday,\n  startOfWeek,\n} from 'date-fns'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport interface ScheduleEvent {\n  id: string\n  title: string\n  start: Date\n  end: Date\n  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\n/**\n * A day/week calendar schedule grid. Renders time-slotted events with\n * proportional height, color coding, click handlers, and a current-time indicator.\n */\nexport interface ScheduleViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display mode: single-day column or full-week (7 columns). */\n  view: 'day' | 'week'\n  /** Current day (day view) or any date within the target week (week view). */\n  date: Date\n  /** Events to display on the calendar grid. */\n  events: ScheduleEvent[]\n  /** Called when an event block is clicked. */\n  onEventClick?: (event: ScheduleEvent) => void\n  /** Called when an empty time slot is clicked, with the slot's start and end times. */\n  onSlotClick?: (start: Date, end: Date) => void\n  /** First visible hour (default 8). */\n  startHour?: number\n  /** Last visible hour -- exclusive (default 18). */\n  endHour?: number\n  /** Slot duration in minutes (default 30). */\n  slotDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/*  Color map                                                          */\n/* ------------------------------------------------------------------ */\n\nconst eventColorMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  primary: 'bg-accent-2 border-accent-7 text-accent-11',\n  success: 'bg-success-3 border-success-7 text-success-11',\n  warning: 'bg-warning-3 border-warning-7 text-warning-11',\n  error: 'bg-error-3 border-error-7 text-error-11',\n  info: 'bg-info-3 border-info-7 text-info-11',\n  neutral: 'bg-surface-raised border-surface-border-strong text-surface-fg-muted',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatHourLabel(hour: number): string {\n  if (hour === 0) return '12 AM'\n  if (hour < 12) return `${hour} AM`\n  if (hour === 12) return '12 PM'\n  return `${hour - 12} PM`\n}\n\nfunction getEventStyle(\n  event: ScheduleEvent,\n  startHour: number,\n  endHour: number,\n) {\n  const totalMinutes = (endHour - startHour) * 60\n  const eventStartMinutes =\n    (getHours(event.start) - startHour) * 60 + getMinutes(event.start)\n  const durationMinutes = differenceInMinutes(event.end, event.start)\n\n  const top = (eventStartMinutes / totalMinutes) * 100\n  const height = (durationMinutes / totalMinutes) * 100\n\n  return {\n    top: `${top}%`,\n    height: `${height}%`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\ninterface TimeColumnProps {\n  startHour: number\n  endHour: number\n}\n\nfunction TimeColumn({ startHour, endHour }: TimeColumnProps) {\n  const hours: number[] = []\n  for (let h = startHour; h < endHour; h++) {\n    hours.push(h)\n  }\n  const slotHeight = 100 / (endHour - startHour)\n\n  return (\n    <div\n      className=\"relative shrink-0 w-[60px] border-r border-surface-border-strong\"\n      aria-hidden=\"true\"\n    >\n      {hours.map((hour) => (\n        <div\n          key={hour}\n          className=\"text-ds-xs text-surface-fg-muted pr-ds-02 text-right\"\n          style={{ height: `${slotHeight}%` }}\n        >\n          {formatHourLabel(hour)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\ninterface DayColumnProps {\n  date: Date\n  events: ScheduleEvent[]\n  startHour: number\n  endHour: number\n  slotDuration: number\n  onEventClick?: (event: ScheduleEvent) => void\n  onSlotClick?: (start: Date, end: Date) => void\n  showHeader?: boolean\n}\n\nfunction DayColumn({\n  date,\n  events,\n  startHour,\n  endHour,\n  slotDuration,\n  onEventClick,\n  onSlotClick,\n  showHeader,\n}: DayColumnProps) {\n  const dayEvents = events.filter((e) => isSameDay(e.start, date))\n  const totalMinutes = (endHour - startHour) * 60\n  const slotCount = totalMinutes / slotDuration\n\n  const slots: { start: Date; end: Date }[] = []\n  for (let i = 0; i < slotCount; i++) {\n    const slotStart = new Date(date)\n    slotStart.setHours(startHour, i * slotDuration, 0, 0)\n    const slotEnd = new Date(slotStart)\n    slotEnd.setMinutes(slotEnd.getMinutes() + slotDuration)\n    slots.push({ start: slotStart, end: slotEnd })\n  }\n\n  const todayInView = isToday(date)\n\n  // Current time indicator position\n  let nowIndicatorTop: number | null = null\n  if (todayInView) {\n    const now = new Date()\n    const nowHour = getHours(now)\n    const nowMin = getMinutes(now)\n    if (nowHour >= startHour && nowHour < endHour) {\n      const nowMinutes = (nowHour - startHour) * 60 + nowMin\n      nowIndicatorTop = (nowMinutes / totalMinutes) * 100\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col min-w-[80px]\">\n      {showHeader && (\n        <div\n          className={cn(\n            'text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong',\n            todayInView\n              ? 'text-accent-11 bg-accent-2'\n              : 'text-surface-fg bg-surface-raised',\n          )}\n        >\n          {format(date, 'EEE d')}\n        </div>\n      )}\n      <div className=\"relative flex-1\">\n        {/* Slot grid lines */}\n        {slots.map((slot, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            className={cn(\n              'block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard',\n              i % 2 === 0 ? 'border-surface-border-strong' : 'border-surface-border-subtle',\n            )}\n            style={{ height: `${100 / slotCount}%` }}\n            onClick={() => onSlotClick?.(slot.start, slot.end)}\n            aria-label={`${format(slot.start, 'h:mm a')} to ${format(slot.end, 'h:mm a')}`}\n          />\n        ))}\n\n        {/* Events */}\n        {dayEvents.map((event) => {\n          const style = getEventStyle(event, startHour, endHour)\n          const colorClass =\n            eventColorMap[event.color ?? 'primary']\n          return (\n            <button\n              key={event.id}\n              type=\"button\"\n              className={cn(\n                'absolute left-ds-01 right-ds-01 rounded-ds-sm border-l-[3px] px-ds-02 py-ds-01',\n                'text-left text-ds-xs font-medium overflow-hidden cursor-pointer',\n                'hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard',\n                colorClass,\n              )}\n              style={style}\n              onClick={(e) => {\n                e.stopPropagation()\n                onEventClick?.(event)\n              }}\n              aria-label={`${event.title}, ${format(event.start, 'h:mm a')} to ${format(event.end, 'h:mm a')}`}\n            >\n              <span className=\"line-clamp-2\">{event.title}</span>\n            </button>\n          )\n        })}\n\n        {/* Current time indicator */}\n        {nowIndicatorTop != null && (\n          <div\n            className=\"absolute left-0 right-0 h-[2px] bg-error-9 z-10 pointer-events-none\"\n            style={{ top: `${nowIndicatorTop}%` }}\n            aria-hidden=\"true\"\n          >\n            <motion.span\n              className=\"absolute -left-[5px] -top-[4px] h-[10px] w-[10px] rounded-ds-full bg-error-9\"\n              animate={{ scale: [1, 1.3, 1] }}\n              transition={{ repeat: Infinity, duration: 2 }}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ScheduleView                                                       */\n/* ------------------------------------------------------------------ */\n\nconst ScheduleView = React.forwardRef<HTMLDivElement, ScheduleViewProps>(\n  (\n    {\n      view,\n      date,\n      events,\n      onEventClick,\n      onSlotClick,\n      startHour = 8,\n      endHour = 18,\n      slotDuration = 30,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const days: Date[] = React.useMemo(() => {\n      if (view === 'day') return [date]\n      const weekStart = startOfWeek(date, { weekStartsOn: 1 }) // Monday\n      return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))\n    }, [view, date])\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={\n          view === 'day'\n            ? `Schedule for ${format(date, 'EEEE, MMMM d, yyyy')}`\n            : `Week schedule starting ${format(days[0], 'MMMM d, yyyy')}`\n        }\n        className={cn(\n          'flex rounded-ds-md border border-surface-border-strong bg-surface-raised overflow-hidden',\n          'h-[480px]',\n          className,\n        )}\n        {...props}\n      >\n        <TimeColumn startHour={startHour} endHour={endHour} />\n        <div className=\"flex flex-1 divide-x divide-surface-border overflow-x-auto\">\n          {days.map((day) => (\n            <DayColumn\n              key={day.toISOString()}\n              date={day}\n              events={events}\n              startHour={startHour}\n              endHour={endHour}\n              slotDuration={slotDuration}\n              onEventClick={onEventClick}\n              onSlotClick={onSlotClick}\n              showHeader={view === 'week'}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  },\n)\nScheduleView.displayName = 'ScheduleView'\n\nexport { ScheduleView }\n"],"mappings":"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"}
+{"version":3,"file":"schedule-view.js","names":[],"sources":["../../src/composed/schedule-view.tsx"],"sourcesContent":["'use client'\n\nimport {\n  addDays,\n  differenceInMinutes,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  isToday,\n  startOfWeek,\n} from 'date-fns'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport interface ScheduleEvent {\n  id: string\n  title: string\n  start: Date\n  end: Date\n  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\n/**\n * A day/week calendar schedule grid. Renders time-slotted events with\n * proportional height, color coding, click handlers, and a current-time indicator.\n */\nexport interface ScheduleViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display mode: single-day column or full-week (7 columns). */\n  view: 'day' | 'week'\n  /** Current day (day view) or any date within the target week (week view). */\n  date: Date\n  /** Events to display on the calendar grid. */\n  events: ScheduleEvent[]\n  /** Called when an event block is clicked. */\n  onEventClick?: (event: ScheduleEvent) => void\n  /** Called when an empty time slot is clicked, with the slot's start and end times. */\n  onSlotClick?: (start: Date, end: Date) => void\n  /** First visible hour (default 8). */\n  startHour?: number\n  /** Last visible hour -- exclusive (default 18). */\n  endHour?: number\n  /** Slot duration in minutes (default 30). */\n  slotDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/*  Color map                                                          */\n/* ------------------------------------------------------------------ */\n\nconst eventColorMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  primary: 'bg-accent-2 border-accent-7 text-accent-11',\n  success: 'bg-success-3 border-success-7 text-success-11',\n  warning: 'bg-warning-3 border-warning-7 text-warning-11',\n  error: 'bg-error-3 border-error-7 text-error-11',\n  info: 'bg-info-3 border-info-7 text-info-11',\n  neutral: 'bg-surface-raised border-surface-border-strong text-surface-fg-muted',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatHourLabel(hour: number): string {\n  if (hour === 0) return '12 AM'\n  if (hour < 12) return `${hour} AM`\n  if (hour === 12) return '12 PM'\n  return `${hour - 12} PM`\n}\n\nfunction getEventStyle(\n  event: ScheduleEvent,\n  startHour: number,\n  endHour: number,\n) {\n  const totalMinutes = (endHour - startHour) * 60\n  const eventStartMinutes =\n    (getHours(event.start) - startHour) * 60 + getMinutes(event.start)\n  const durationMinutes = differenceInMinutes(event.end, event.start)\n\n  const top = (eventStartMinutes / totalMinutes) * 100\n  const height = (durationMinutes / totalMinutes) * 100\n\n  return {\n    top: `${top}%`,\n    height: `${height}%`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\ninterface TimeColumnProps {\n  startHour: number\n  endHour: number\n}\n\nfunction TimeColumn({ startHour, endHour }: TimeColumnProps) {\n  const hours: number[] = []\n  for (let h = startHour; h < endHour; h++) {\n    hours.push(h)\n  }\n  const slotHeight = 100 / (endHour - startHour)\n\n  return (\n    <div\n      className=\"relative shrink-0 w-[60px] border-r border-surface-border-strong\"\n      aria-hidden=\"true\"\n    >\n      {hours.map((hour) => (\n        <div\n          key={hour}\n          className=\"text-ds-xs text-surface-fg-muted pr-ds-02 text-right\"\n          style={{ height: `${slotHeight}%` }}\n        >\n          {formatHourLabel(hour)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\ninterface DayColumnProps {\n  date: Date\n  events: ScheduleEvent[]\n  startHour: number\n  endHour: number\n  slotDuration: number\n  onEventClick?: (event: ScheduleEvent) => void\n  onSlotClick?: (start: Date, end: Date) => void\n  showHeader?: boolean\n}\n\nfunction DayColumn({\n  date,\n  events,\n  startHour,\n  endHour,\n  slotDuration,\n  onEventClick,\n  onSlotClick,\n  showHeader,\n}: DayColumnProps) {\n  const dayEvents = events.filter((e) => isSameDay(e.start, date))\n  const totalMinutes = (endHour - startHour) * 60\n  const slotCount = totalMinutes / slotDuration\n\n  const slots: { start: Date; end: Date }[] = []\n  for (let i = 0; i < slotCount; i++) {\n    const slotStart = new Date(date)\n    slotStart.setHours(startHour, i * slotDuration, 0, 0)\n    const slotEnd = new Date(slotStart)\n    slotEnd.setMinutes(slotEnd.getMinutes() + slotDuration)\n    slots.push({ start: slotStart, end: slotEnd })\n  }\n\n  const todayInView = isToday(date)\n\n  // Current time indicator position\n  let nowIndicatorTop: number | null = null\n  if (todayInView) {\n    const now = new Date()\n    const nowHour = getHours(now)\n    const nowMin = getMinutes(now)\n    if (nowHour >= startHour && nowHour < endHour) {\n      const nowMinutes = (nowHour - startHour) * 60 + nowMin\n      nowIndicatorTop = (nowMinutes / totalMinutes) * 100\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col min-w-[80px]\">\n      {showHeader && (\n        <div\n          className={cn(\n            'text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong',\n            todayInView\n              ? 'text-accent-11 bg-accent-2'\n              : 'text-surface-fg bg-surface-raised',\n          )}\n        >\n          {format(date, 'EEE d')}\n        </div>\n      )}\n      <div className=\"relative flex-1\">\n        {/* Slot grid lines */}\n        {slots.map((slot, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            className={cn(\n              'block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard',\n              i % 2 === 0 ? 'border-surface-border-strong' : 'border-surface-border-subtle',\n            )}\n            style={{ height: `${100 / slotCount}%` }}\n            onClick={() => onSlotClick?.(slot.start, slot.end)}\n            aria-label={`${format(slot.start, 'h:mm a')} to ${format(slot.end, 'h:mm a')}`}\n          />\n        ))}\n\n        {/* Events */}\n        {dayEvents.map((event) => {\n          const style = getEventStyle(event, startHour, endHour)\n          const colorClass =\n            eventColorMap[event.color ?? 'primary']\n          return (\n            <button\n              key={event.id}\n              type=\"button\"\n              className={cn(\n                'absolute left-ds-01 right-ds-01 rounded-control-inner border-l-[3px] px-ds-02 py-ds-01',\n                'text-left text-ds-xs font-medium overflow-hidden cursor-pointer',\n                'hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard',\n                colorClass,\n              )}\n              style={style}\n              onClick={(e) => {\n                e.stopPropagation()\n                onEventClick?.(event)\n              }}\n              aria-label={`${event.title}, ${format(event.start, 'h:mm a')} to ${format(event.end, 'h:mm a')}`}\n            >\n              <span className=\"line-clamp-2\">{event.title}</span>\n            </button>\n          )\n        })}\n\n        {/* Current time indicator */}\n        {nowIndicatorTop != null && (\n          <div\n            className=\"absolute left-0 right-0 h-[2px] bg-error-9 z-10 pointer-events-none\"\n            style={{ top: `${nowIndicatorTop}%` }}\n            aria-hidden=\"true\"\n          >\n            <motion.span\n              className=\"absolute -left-[5px] -top-[4px] h-[10px] w-[10px] rounded-pill bg-error-9\"\n              animate={{ scale: [1, 1.3, 1] }}\n              transition={{ repeat: Infinity, duration: 2 }}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ScheduleView                                                       */\n/* ------------------------------------------------------------------ */\n\nconst ScheduleView = React.forwardRef<HTMLDivElement, ScheduleViewProps>(\n  (\n    {\n      view,\n      date,\n      events,\n      onEventClick,\n      onSlotClick,\n      startHour = 8,\n      endHour = 18,\n      slotDuration = 30,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const days: Date[] = React.useMemo(() => {\n      if (view === 'day') return [date]\n      const weekStart = startOfWeek(date, { weekStartsOn: 1 }) // Monday\n      return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))\n    }, [view, date])\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={\n          view === 'day'\n            ? `Schedule for ${format(date, 'EEEE, MMMM d, yyyy')}`\n            : `Week schedule starting ${format(days[0], 'MMMM d, yyyy')}`\n        }\n        className={cn(\n          'flex rounded-control border border-surface-border-strong bg-surface-raised overflow-hidden',\n          'h-[480px]',\n          className,\n        )}\n        {...props}\n      >\n        <TimeColumn startHour={startHour} endHour={endHour} />\n        <div className=\"flex flex-1 divide-x divide-surface-border overflow-x-auto\">\n          {days.map((day) => (\n            <DayColumn\n              key={day.toISOString()}\n              date={day}\n              events={events}\n              startHour={startHour}\n              endHour={endHour}\n              slotDuration={slotDuration}\n              onEventClick={onEventClick}\n              onSlotClick={onSlotClick}\n              showHeader={view === 'week'}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  },\n)\nScheduleView.displayName = 'ScheduleView'\n\nexport { ScheduleView }\n"],"mappings":"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"}

package/dist/composed/status-badge.js

@@ -8,7 +8,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { IconChevronDown as s } from "@tabler/icons-react";
 import { AnimatePresence as c, motion as l } from "framer-motion";
 //#region src/composed/status-badge.tsx
-var u = t("inline-flex items-center gap-ds-02b rounded-ds-full font-body", {
+var u = t("inline-flex items-center gap-ds-02b rounded-pill font-body", {
 	variants: {
 		status: {
 			active: "bg-success-3 text-success-11",
@@ -91,7 +91,7 @@ var u = t("inline-flex items-center gap-ds-02b rounded-ds-full font-body", {
 				...e(b),
 				children: [
 					!g && /* @__PURE__ */ a("span", {
-						className: n("shrink-0 rounded-ds-full", m === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]", r),
+						className: n("shrink-0 rounded-pill", m === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]", r),
 						"aria-hidden": "true"
 					}),
 					t,
@@ -120,7 +120,7 @@ var u = t("inline-flex items-center gap-ds-02b rounded-ds-full font-body", {
 			...e(b),
 			children: [
 				!g && /* @__PURE__ */ a("span", {
-					className: n("shrink-0 rounded-ds-full", m === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]", O),
+					className: n("shrink-0 rounded-pill", m === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]", O),
 					"aria-hidden": "true"
 				}),
 				D,

package/dist/composed/status-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.js","names":[],"sources":["../../src/composed/status-badge.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { motionProps } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\nconst statusBadgeVariants = cva(\n  'inline-flex items-center gap-ds-02b rounded-ds-full font-body',\n  {\n    variants: {\n      status: {\n        active: 'bg-success-3 text-success-11',\n        pending: 'bg-warning-3 text-warning-11',\n        approved: 'bg-success-3 text-success-11',\n        rejected: 'bg-error-3 text-error-11',\n        completed: 'bg-success-3 text-success-11',\n        blocked: 'bg-error-3 text-error-11',\n        'in-progress': 'bg-accent-3 text-accent-11',\n        review: 'bg-info-3 text-info-11',\n        cancelled: 'bg-surface-raised text-surface-fg-subtle',\n        draft: 'bg-surface-raised text-surface-fg-subtle',\n      },\n      color: {\n        success: 'bg-success-3 text-success-11',\n        warning: 'bg-warning-3 text-warning-11',\n        error: 'bg-error-3 text-error-11',\n        info: 'bg-info-3 text-info-11',\n        neutral: 'bg-surface-raised text-surface-fg-subtle',\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-01 text-ds-xs font-semibold',\n        md: 'px-ds-04 py-ds-02 text-ds-sm font-medium',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst dotColorMap: Record<string, string> = {\n  active: 'bg-success-9',\n  pending: 'bg-warning-9',\n  approved: 'bg-success-9',\n  rejected: 'bg-error-9',\n  completed: 'bg-success-9',\n  blocked: 'bg-error-9',\n  'in-progress': 'bg-accent-9',\n  review: 'bg-info-9',\n  cancelled: 'bg-disabled',\n  draft: 'bg-surface-fg-subtle',\n}\n\nconst colorDotMap: Record<string, string> = {\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\ninterface StatusBadgeBaseProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {\n  label?: string\n  hideDot?: boolean\n  size?: VariantProps<typeof statusBadgeVariants>['size']\n  onClick?: () => void\n  icon?: React.ReactNode\n}\n\ninterface StatusBadgeWithStatus extends StatusBadgeBaseProps {\n  status?: VariantProps<typeof statusBadgeVariants>['status']\n  color?: never\n}\n\ninterface StatusBadgeWithColor extends StatusBadgeBaseProps {\n  status?: never\n  color: 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\nexport type StatusBadgeProps = StatusBadgeWithStatus | StatusBadgeWithColor\n\n/* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — intentional for smooth morph */\nconst statusMorphTransition = { duration: 0.3, ease: 'easeOut' as const }\n\nconst StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(\n  ({ status, color, size, label, hideDot = false, onClick, icon, className, ...props }, ref) => {\n    const isClickable = onClick != null\n    const Tag = isClickable ? motion.button : motion.span\n    const clickableClasses = isClickable ? 'cursor-pointer hover:opacity-80 transition-opacity' : undefined\n\n    const trailingIcon = icon != null\n      ? icon\n      : isClickable\n        ? <Icon icon={IconChevronDown} size=\"xs\" className=\"text-current/50 -mr-0.5 shrink-0\" />\n        : null\n\n    if (color != null) {\n      // Color branch — color is the styling key\n      const displayLabel = label ?? (color.charAt(0).toUpperCase() + color.slice(1))\n      const dotColor = colorDotMap[color]\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <Tag\n            key={color}\n            ref={ref as any}\n            {...(isClickable ? { type: 'button' as const, onClick } : {})}\n            initial={{ opacity: 0.6, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0.6, scale: 0.95 }}\n            transition={statusMorphTransition}\n            className={cn(\n              statusBadgeVariants({ color, size }),\n              clickableClasses,\n              className,\n            )}\n            {...motionProps(props)}\n          >\n            {!hideDot && (\n              <span\n                className={cn(\n                  'shrink-0 rounded-ds-full',\n                  size === 'sm' ? 'h-ds-02b w-ds-02b' : 'h-[8px] w-[8px]',\n                  dotColor,\n                )}\n                aria-hidden=\"true\"\n              />\n            )}\n            {displayLabel}\n            {trailingIcon}\n          </Tag>\n        </AnimatePresence>\n      )\n    }\n\n    // Status branch — derive styling from status (default: 'pending')\n    const statusKey = status ?? 'pending'\n    const displayLabel = label ?? (statusKey.charAt(0).toUpperCase() + statusKey.slice(1))\n    const dotColor = dotColorMap[statusKey]\n\n    return (\n      <AnimatePresence mode=\"wait\">\n        <Tag\n          key={statusKey}\n          ref={ref as any}\n          {...(isClickable ? { type: 'button' as const, onClick } : {})}\n          initial={{ opacity: 0.6 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0.6 }}\n          transition={statusMorphTransition}\n          className={cn(\n            statusBadgeVariants({ status: statusKey, size }),\n            clickableClasses,\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          {!hideDot && (\n            <span\n              className={cn(\n                'shrink-0 rounded-ds-full',\n                size === 'sm' ? 'h-ds-02b w-ds-02b' : 'h-[8px] w-[8px]',\n                dotColor,\n              )}\n              aria-hidden=\"true\"\n            />\n          )}\n          {displayLabel}\n          {trailingIcon}\n        </Tag>\n      </AnimatePresence>\n    )\n  },\n)\nStatusBadge.displayName = 'StatusBadge'\n\nexport { StatusBadge, statusBadgeVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAsB,EAC1B,iEACA;CACE,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,SAAS;GACT,UAAU;GACV,UAAU;GACV,WAAW;GACX,SAAS;GACT,eAAe;GACf,QAAQ;GACR,WAAW;GACX,OAAO;GACR;EACD,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF,EAEK,IAAsC;CAC1C,QAAQ;CACR,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,SAAS;CACT,eAAe;CACf,QAAQ;CACR,WAAW;CACX,OAAO;CACR,EAEK,IAAsC;CAC1C,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV,EAuBK,IAAwB;CAAE,UAAU;CAAK,MAAM;CAAoB,EAEnE,IAAc,EAAM,YACvB,EAAE,WAAQ,UAAO,SAAM,UAAO,aAAU,IAAO,YAAS,SAAM,cAAW,GAAG,KAAS,MAAQ;CAC5F,IAAM,IAAc,KAAW,MACzB,IAAM,IAAc,EAAO,SAAS,EAAO,MAC3C,IAAmB,IAAc,uDAAuD,KAAA,GAExF,IAAe,MAEjB,IACE,kBAAC,GAAD;EAAM,MAAM;EAAiB,MAAK;EAAK,WAAU;EAAqC,CAAA,GACtF;AAEN,KAAI,KAAS,MAAM;EAEjB,IAAM,IAAe,KAAU,EAAM,OAAO,EAAE,CAAC,aAAa,GAAG,EAAM,MAAM,EAAE,EACvE,IAAW,EAAY;AAE7B,SACE,kBAAC,GAAD;GAAiB,MAAK;aACpB,kBAAC,GAAD;IAEO;IACL,GAAK,IAAc;KAAE,MAAM;KAAmB;KAAS,GAAG,EAAE;IAC5D,SAAS;KAAE,SAAS;KAAK,OAAO;KAAM;IACtC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,MAAM;KAAE,SAAS;KAAK,OAAO;KAAM;IACnC,YAAY;IACZ,WAAW,EACT,EAAoB;KAAE;KAAO;KAAM,CAAC,EACpC,GACA,EACD;IACD,GAAI,EAAY,EAAM;cAbxB;KAeG,CAAC,KACA,kBAAC,QAAD;MACE,WAAW,EACT,4BACA,MAAS,OAAO,sBAAsB,mBACtC,EACD;MACD,eAAY;MACZ,CAAA;KAEH;KACA;KACG;MA1BC,EA0BD;GACU,CAAA;;CAKtB,IAAM,IAAY,KAAU,WACtB,IAAe,KAAU,EAAU,OAAO,EAAE,CAAC,aAAa,GAAG,EAAU,MAAM,EAAE,EAC/E,IAAW,EAAY;AAE7B,QACE,kBAAC,GAAD;EAAiB,MAAK;YACpB,kBAAC,GAAD;GAEO;GACL,GAAK,IAAc;IAAE,MAAM;IAAmB;IAAS,GAAG,EAAE;GAC5D,SAAS,EAAE,SAAS,IAAK;GACzB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,IAAK;GACtB,YAAY;GACZ,WAAW,EACT,EAAoB;IAAE,QAAQ;IAAW;IAAM,CAAC,EAChD,GACA,EACD;GACD,GAAI,EAAY,EAAM;aAbxB;IAeG,CAAC,KACA,kBAAC,QAAD;KACE,WAAW,EACT,4BACA,MAAS,OAAO,sBAAsB,mBACtC,EACD;KACD,eAAY;KACZ,CAAA;IAEH;IACA;IACG;KA1BC,EA0BD;EACU,CAAA;EAGvB;AACD,EAAY,cAAc"}
+{"version":3,"file":"status-badge.js","names":[],"sources":["../../src/composed/status-badge.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { motionProps } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\nconst statusBadgeVariants = cva(\n  'inline-flex items-center gap-ds-02b rounded-pill font-body',\n  {\n    variants: {\n      status: {\n        active: 'bg-success-3 text-success-11',\n        pending: 'bg-warning-3 text-warning-11',\n        approved: 'bg-success-3 text-success-11',\n        rejected: 'bg-error-3 text-error-11',\n        completed: 'bg-success-3 text-success-11',\n        blocked: 'bg-error-3 text-error-11',\n        'in-progress': 'bg-accent-3 text-accent-11',\n        review: 'bg-info-3 text-info-11',\n        cancelled: 'bg-surface-raised text-surface-fg-subtle',\n        draft: 'bg-surface-raised text-surface-fg-subtle',\n      },\n      color: {\n        success: 'bg-success-3 text-success-11',\n        warning: 'bg-warning-3 text-warning-11',\n        error: 'bg-error-3 text-error-11',\n        info: 'bg-info-3 text-info-11',\n        neutral: 'bg-surface-raised text-surface-fg-subtle',\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-01 text-ds-xs font-semibold',\n        md: 'px-ds-04 py-ds-02 text-ds-sm font-medium',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst dotColorMap: Record<string, string> = {\n  active: 'bg-success-9',\n  pending: 'bg-warning-9',\n  approved: 'bg-success-9',\n  rejected: 'bg-error-9',\n  completed: 'bg-success-9',\n  blocked: 'bg-error-9',\n  'in-progress': 'bg-accent-9',\n  review: 'bg-info-9',\n  cancelled: 'bg-disabled',\n  draft: 'bg-surface-fg-subtle',\n}\n\nconst colorDotMap: Record<string, string> = {\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\ninterface StatusBadgeBaseProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {\n  label?: string\n  hideDot?: boolean\n  size?: VariantProps<typeof statusBadgeVariants>['size']\n  onClick?: () => void\n  icon?: React.ReactNode\n}\n\ninterface StatusBadgeWithStatus extends StatusBadgeBaseProps {\n  status?: VariantProps<typeof statusBadgeVariants>['status']\n  color?: never\n}\n\ninterface StatusBadgeWithColor extends StatusBadgeBaseProps {\n  status?: never\n  color: 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\nexport type StatusBadgeProps = StatusBadgeWithStatus | StatusBadgeWithColor\n\n/* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — intentional for smooth morph */\nconst statusMorphTransition = { duration: 0.3, ease: 'easeOut' as const }\n\nconst StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(\n  ({ status, color, size, label, hideDot = false, onClick, icon, className, ...props }, ref) => {\n    const isClickable = onClick != null\n    const Tag = isClickable ? motion.button : motion.span\n    const clickableClasses = isClickable ? 'cursor-pointer hover:opacity-80 transition-opacity' : undefined\n\n    const trailingIcon = icon != null\n      ? icon\n      : isClickable\n        ? <Icon icon={IconChevronDown} size=\"xs\" className=\"text-current/50 -mr-0.5 shrink-0\" />\n        : null\n\n    if (color != null) {\n      // Color branch — color is the styling key\n      const displayLabel = label ?? (color.charAt(0).toUpperCase() + color.slice(1))\n      const dotColor = colorDotMap[color]\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <Tag\n            key={color}\n            ref={ref as any}\n            {...(isClickable ? { type: 'button' as const, onClick } : {})}\n            initial={{ opacity: 0.6, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0.6, scale: 0.95 }}\n            transition={statusMorphTransition}\n            className={cn(\n              statusBadgeVariants({ color, size }),\n              clickableClasses,\n              className,\n            )}\n            {...motionProps(props)}\n          >\n            {!hideDot && (\n              <span\n                className={cn(\n                  'shrink-0 rounded-pill',\n                  size === 'sm' ? 'h-ds-02b w-ds-02b' : 'h-[8px] w-[8px]',\n                  dotColor,\n                )}\n                aria-hidden=\"true\"\n              />\n            )}\n            {displayLabel}\n            {trailingIcon}\n          </Tag>\n        </AnimatePresence>\n      )\n    }\n\n    // Status branch — derive styling from status (default: 'pending')\n    const statusKey = status ?? 'pending'\n    const displayLabel = label ?? (statusKey.charAt(0).toUpperCase() + statusKey.slice(1))\n    const dotColor = dotColorMap[statusKey]\n\n    return (\n      <AnimatePresence mode=\"wait\">\n        <Tag\n          key={statusKey}\n          ref={ref as any}\n          {...(isClickable ? { type: 'button' as const, onClick } : {})}\n          initial={{ opacity: 0.6 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0.6 }}\n          transition={statusMorphTransition}\n          className={cn(\n            statusBadgeVariants({ status: statusKey, size }),\n            clickableClasses,\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          {!hideDot && (\n            <span\n              className={cn(\n                'shrink-0 rounded-pill',\n                size === 'sm' ? 'h-ds-02b w-ds-02b' : 'h-[8px] w-[8px]',\n                dotColor,\n              )}\n              aria-hidden=\"true\"\n            />\n          )}\n          {displayLabel}\n          {trailingIcon}\n        </Tag>\n      </AnimatePresence>\n    )\n  },\n)\nStatusBadge.displayName = 'StatusBadge'\n\nexport { StatusBadge, statusBadgeVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAsB,EAC1B,8DACA;CACE,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,SAAS;GACT,UAAU;GACV,UAAU;GACV,WAAW;GACX,SAAS;GACT,eAAe;GACf,QAAQ;GACR,WAAW;GACX,OAAO;GACR;EACD,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF,EAEK,IAAsC;CAC1C,QAAQ;CACR,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,SAAS;CACT,eAAe;CACf,QAAQ;CACR,WAAW;CACX,OAAO;CACR,EAEK,IAAsC;CAC1C,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV,EAuBK,IAAwB;CAAE,UAAU;CAAK,MAAM;CAAoB,EAEnE,IAAc,EAAM,YACvB,EAAE,WAAQ,UAAO,SAAM,UAAO,aAAU,IAAO,YAAS,SAAM,cAAW,GAAG,KAAS,MAAQ;CAC5F,IAAM,IAAc,KAAW,MACzB,IAAM,IAAc,EAAO,SAAS,EAAO,MAC3C,IAAmB,IAAc,uDAAuD,KAAA,GAExF,IAAe,MAEjB,IACE,kBAAC,GAAD;EAAM,MAAM;EAAiB,MAAK;EAAK,WAAU;EAAqC,CAAA,GACtF;AAEN,KAAI,KAAS,MAAM;EAEjB,IAAM,IAAe,KAAU,EAAM,OAAO,EAAE,CAAC,aAAa,GAAG,EAAM,MAAM,EAAE,EACvE,IAAW,EAAY;AAE7B,SACE,kBAAC,GAAD;GAAiB,MAAK;aACpB,kBAAC,GAAD;IAEO;IACL,GAAK,IAAc;KAAE,MAAM;KAAmB;KAAS,GAAG,EAAE;IAC5D,SAAS;KAAE,SAAS;KAAK,OAAO;KAAM;IACtC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,MAAM;KAAE,SAAS;KAAK,OAAO;KAAM;IACnC,YAAY;IACZ,WAAW,EACT,EAAoB;KAAE;KAAO;KAAM,CAAC,EACpC,GACA,EACD;IACD,GAAI,EAAY,EAAM;cAbxB;KAeG,CAAC,KACA,kBAAC,QAAD;MACE,WAAW,EACT,yBACA,MAAS,OAAO,sBAAsB,mBACtC,EACD;MACD,eAAY;MACZ,CAAA;KAEH;KACA;KACG;MA1BC,EA0BD;GACU,CAAA;;CAKtB,IAAM,IAAY,KAAU,WACtB,IAAe,KAAU,EAAU,OAAO,EAAE,CAAC,aAAa,GAAG,EAAU,MAAM,EAAE,EAC/E,IAAW,EAAY;AAE7B,QACE,kBAAC,GAAD;EAAiB,MAAK;YACpB,kBAAC,GAAD;GAEO;GACL,GAAK,IAAc;IAAE,MAAM;IAAmB;IAAS,GAAG,EAAE;GAC5D,SAAS,EAAE,SAAS,IAAK;GACzB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,IAAK;GACtB,YAAY;GACZ,WAAW,EACT,EAAoB;IAAE,QAAQ;IAAW;IAAM,CAAC,EAChD,GACA,EACD;GACD,GAAI,EAAY,EAAM;aAbxB;IAeG,CAAC,KACA,kBAAC,QAAD;KACE,WAAW,EACT,yBACA,MAAS,OAAO,sBAAsB,mBACtC,EACD;KACD,eAAY;KACZ,CAAA;IAEH;IACA;IACG;KA1BC,EA0BD;EACU,CAAA;EAGvB;AACD,EAAY,cAAc"}

package/dist/hooks/index.d.ts

@@ -1,8 +1,8 @@
 "use client";
 export { type ColorMode, useColorMode } from './use-color-mode';
 export { useIsMobile } from './use-mobile';
-export type { ToastActionOptions, ToastOptions, ToastType, ToastUndoOptions, ToastUploadOptions, UploadFile, } from './use-toast';
-export { toast } from './use-toast';
+export type { ToastActionOptions, ToastOptions, ToastType, ToastUndoOptions, ToastUploadOptions, UploadFile, } from '../ui/toast-types';
+export { toast } from '../ui/toast';
 export { useTouchDevice } from './use-touch-device';
 export { useViewportHeight } from './use-viewport-height';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAC,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACX,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAC,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACX,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/hooks/index.js

@@ -2,7 +2,6 @@
 import { useIsMobile as e } from "./use-mobile.js";
 import { toast as t } from "../ui/toast.js";
 import { useColorMode as n } from "./use-color-mode.js";
-import "./use-toast.js";
 import { useTouchDevice as r } from "./use-touch-device.js";
 import { useViewportHeight as i } from "./use-viewport-height.js";
 export { t as toast, n as useColorMode, e as useIsMobile, r as useTouchDevice, i as useViewportHeight };

package/dist/shell/bottom-navbar.js

@@ -15,7 +15,7 @@ function _({ count: e }) {
 	let n = e > 99 ? "99+" : String(e), r = e >= 10;
 	return /* @__PURE__ */ u("span", {
 		"aria-label": `${e} notifications`,
-		className: t("absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75", r ? "px-0.5" : ""),
+		className: t("absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75", r ? "px-0.5" : ""),
 		children: n
 	});
 }
@@ -36,7 +36,7 @@ function v({ item: n, isActive: i, onClick: a }) {
 				children: [
 					i && /* @__PURE__ */ u(h.div, {
 						layoutId: "bottom-nav-indicator",
-						className: "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0",
+						className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0",
 						"aria-hidden": "true",
 						transition: s ? { duration: 0 } : e.snappy
 					}),
@@ -74,7 +74,7 @@ var y = i.forwardRef(({ currentPath: i = "/", user: _, primaryItems: y = [], mor
 			animate: { y: 0 },
 			exit: { y: "100%" },
 			transition: T ? { duration: 0 } : e.smooth,
-			className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03",
+			className: "absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03",
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
 				e.stopPropagation(), e.key === "Escape" && k();
@@ -87,7 +87,7 @@ var y = i.forwardRef(({ currentPath: i = "/", user: _, primaryItems: y = [], mor
 				}), /* @__PURE__ */ u("button", {
 					onClick: () => D(!1),
 					"aria-label": "Close more menu",
-					className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-raised-hover",
+					className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover",
 					children: /* @__PURE__ */ u(n, {
 						icon: p,
 						size: "sm",
@@ -99,7 +99,7 @@ var y = i.forwardRef(({ currentPath: i = "/", user: _, primaryItems: y = [], mor
 				children: b.map((e) => /* @__PURE__ */ d(w, {
 					href: e.href,
 					onClick: () => D(!1),
-					className: t("flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors ease-productive-standard", A(e.href, e.exact) ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"),
+					className: t("flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard", A(e.href, e.exact) ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"),
 					children: [/* @__PURE__ */ u("span", {
 						className: "[&>svg]:h-ico-md [&>svg]:w-ico-md",
 						children: e.icon
@@ -131,7 +131,7 @@ var y = i.forwardRef(({ currentPath: i = "/", user: _, primaryItems: y = [], mor
 				children: [
 					(E || j) && /* @__PURE__ */ u(h.div, {
 						layoutId: "bottom-nav-indicator",
-						className: "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0",
+						className: "absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0",
 						"aria-hidden": "true",
 						transition: T ? { duration: 0 } : e.snappy
 					}),

package/dist/shell/bottom-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  icon: React.ReactNode\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">{item.icon}</span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\">{item.icon}</span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}
+{"version":3,"file":"bottom-navbar.js","names":[],"sources":["../../src/shell/bottom-navbar.tsx"],"sourcesContent":["'use client'\n\n/**\n * BottomNavbar -- Mobile bottom navigation bar.\n *\n * Props-driven: accepts currentPath, user, navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport { IconDots, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface BottomNavItem {\n  title: string\n  href: string\n  icon: React.ReactNode\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Notification badge count. 0 or undefined = hidden, 1–99 = shown, >99 = \"99+\" */\n  badge?: number\n}\n\nexport interface BottomNavbarUser {\n  name: string\n  role?: string\n}\n\nexport interface BottomNavbarProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Currently active pathname */\n  currentPath?: string\n  /** User information (used to determine admin status, presence) */\n  user?: BottomNavbarUser | null\n  /** Primary nav items shown directly in the bottom bar (max 4 recommended) */\n  primaryItems?: BottomNavItem[]\n  /** Additional items shown in the \"More\" overflow menu */\n  moreItems?: BottomNavItem[]\n  /** Additional className for the nav element */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// NavBadge (internal)\n// -----------------------------------------------------------------------\n\nfunction NavBadge({ count }: { count: number }) {\n  if (!count || count <= 0) return null\n  const display = count > 99 ? '99+' : String(count)\n  const isMultiDigit = count >= 10\n  return (\n    <span\n      aria-label={`${count} notifications`}\n      className={cn(\n        'absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-9 text-[10px] font-semibold leading-none text-error-fg animate-in zoom-in-75',\n        isMultiDigit ? 'px-0.5' : '',\n      )}\n    >\n      {display}\n    </span>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction BottomNavLink({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: BottomNavItem\n  isActive: boolean\n  onClick?: () => void\n}) {\n  const Link = useLink()\n  const prefersReducedMotion = useReducedMotion()\n  return (\n    <motion.div whileTap={prefersReducedMotion ? undefined : { y: -2 }} transition={prefersReducedMotion ? { duration: 0 } : springs.snappy} className=\"flex max-w-[70px] flex-1\">\n      <Link\n        href={item.href}\n        onClick={onClick}\n        aria-label={item.title}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm transition-colors duration-fast-02 ease-productive-standard',\n          isActive\n            ? 'font-semibold text-accent-11'\n            : 'text-surface-fg-subtle',\n        )}\n      >\n        <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n          {isActive && (\n            <motion.div\n              layoutId=\"bottom-nav-indicator\"\n              className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n              aria-hidden=\"true\"\n              transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            />\n          )}\n          <div className=\"relative p-ds-03\">\n            <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">{item.icon}</span>\n            {item.badge != null && <NavBadge count={item.badge} />}\n          </div>\n          <span className=\"text-center\">{item.title}</span>\n        </div>\n      </Link>\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// BottomNavbar\n// -----------------------------------------------------------------------\n\nconst BottomNavbar = React.forwardRef<HTMLElement, BottomNavbarProps>(\n  (\n    {\n      currentPath = '/',\n      user: _user,\n      primaryItems = [],\n      moreItems = [],\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const prefersReducedMotion = useReducedMotion()\n    const [showMore, setShowMore] = useState(false)\n    const overlayRef = useRef<HTMLDivElement>(null)\n\n    const closeMore = useCallback(() => setShowMore(false), [])\n\n    // Focus first focusable item when overlay opens\n    useEffect(() => {\n      if (showMore && overlayRef.current) {\n        const firstFocusable = overlayRef.current.querySelector<HTMLElement>('a, button')\n        firstFocusable?.focus()\n      }\n    }, [showMore])\n\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    // Check if any \"more\" item is active\n    const isMoreActive = moreItems.some((item) =>\n      isActive(item.href, item.exact),\n    )\n\n    return (\n      <>\n        {/* More Menu Overlay */}\n        <AnimatePresence>\n        {showMore && (\n          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape\n          <div\n            className=\"fixed inset-0 z-overlay md:hidden\"\n            onClick={() => setShowMore(false)}\n          >\n          <div className=\"absolute inset-0 bg-overlay\" />\n          { }\n          <motion.div\n            ref={overlayRef}\n            role=\"dialog\"\n            aria-label=\"More navigation\"\n            initial={{ y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.smooth}\n            className=\"absolute bottom-[72px] left-0 right-0 rounded-t-bubble border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              e.stopPropagation()\n              if (e.key === 'Escape') closeMore()\n            }}\n          >\n            <div className=\"mb-ds-04 flex items-center justify-between\">\n              <span className=\"text-ds-md font-semibold text-surface-fg\">\n                More\n              </span>\n              <button\n                onClick={() => setShowMore(false)}\n                aria-label=\"Close more menu\"\n                className=\"flex h-ds-sm w-ds-sm items-center justify-center rounded-pill hover:bg-surface-raised-hover\"\n              >\n                <Icon icon={IconX} size=\"sm\" className=\"text-surface-fg-muted\" />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-ds-03\">\n              {moreItems.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  onClick={() => setShowMore(false)}\n                  className={cn(\n                    'flex flex-col items-center gap-ds-02b rounded-overlay-lg p-ds-04 text-ds-sm transition-colors ease-productive-standard',\n                    isActive(item.href, item.exact)\n                      ? 'bg-surface-raised-hover text-accent-11'\n                      : 'text-surface-fg-subtle hover:bg-surface-raised-hover',\n                  )}\n                >\n                  <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md\">{item.icon}</span>\n                  <span className=\"text-center\">\n                    {item.title}\n                  </span>\n                </Link>\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      )}\n        </AnimatePresence>\n\n      {/* Bottom Navigation Bar */}\n      <nav\n        {...props}\n        ref={ref}\n        aria-label=\"Mobile navigation\"\n        className={cn(\n          'fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-raised px-ds-05 pb-safe pt-0 md:hidden',\n          className,\n        )}\n      >\n        {primaryItems.map((item) => (\n          <BottomNavLink\n            key={item.href}\n            item={item}\n            isActive={isActive(item.href, item.exact)}\n          />\n        ))}\n\n        {/* More Button */}\n        {moreItems.length > 0 && (\n          <motion.button\n            type=\"button\"\n            onClick={() => setShowMore(!showMore)}\n            aria-label=\"More navigation options\"\n            aria-expanded={showMore}\n            whileTap={prefersReducedMotion ? undefined : { y: -2 }}\n            transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n            className={cn(\n              'flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm',\n              showMore || isMoreActive\n                ? 'font-semibold text-accent-11'\n                : 'text-surface-fg-subtle',\n            )}\n          >\n            <div className=\"relative flex w-full flex-col items-center gap-ds-02\">\n              {(showMore || isMoreActive) && (\n                <motion.div\n                  layoutId=\"bottom-nav-indicator\"\n                  className=\"absolute top-0 h-[3px] w-full rounded-b-control-inner bg-accent-9 p-0\"\n                  aria-hidden=\"true\"\n                  transition={prefersReducedMotion ? { duration: 0 } : springs.snappy}\n                />\n              )}\n              <div className=\"p-ds-03\">\n                <Icon icon={IconDots} />\n              </div>\n              <span className=\"text-center\">More</span>\n            </div>\n          </motion.button>\n        )}\n      </nav>\n    </>\n    )\n  },\n)\nBottomNavbar.displayName = 'BottomNavbar'\n\nexport { BottomNavbar }\n"],"mappings":"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"}