@devalok/shilp-sutra 0.37.1 → 0.39.0

package/dist/composed/markdown-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-viewer.js","names":[],"sources":["../../src/composed/markdown-viewer.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconCopy } from '@tabler/icons-react'\nimport * as React from 'react'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\n// react-syntax-highlighter is lazy-loaded in CodeBlock component below\n\n// ============================================================\n// Heading helpers\n// ============================================================\n\nfunction slugify(text: string): string {\n  return text.toLowerCase().replace(/[^\\w]+/g, '-').replace(/(^-|-$)/g, '')\n}\n\n/** Recursively extract text content from React children */\nfunction extractText(node: React.ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (!node) return ''\n  if (Array.isArray(node)) return node.map(extractText).join('')\n  if (typeof node === 'object' && 'props' in node) {\n    return extractText((node as React.ReactElement<{ children?: React.ReactNode }>).props.children)\n  }\n  return ''\n}\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MarkdownViewerProps extends React.HTMLAttributes<HTMLDivElement> {\n  content: string\n  /** Tighter spacing for inline use */\n  compact?: boolean\n  /** Allow raw HTML in markdown @default false */\n  allowHtml?: boolean\n  /** Link target @default '_blank' */\n  linkTarget?: string\n}\n\n// ============================================================\n// MarkdownViewer\n// ============================================================\n\n// Small copy-to-clipboard button for code blocks\nfunction CopyButton({ code }: { code: string }) {\n  const [copied, setCopied] = React.useState(false)\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n  function handleCopy() {\n    navigator.clipboard.writeText(code).then(() => {\n      setCopied(true)\n      timerRef.current = setTimeout(() => setCopied(false), 2000)\n    })\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      className=\"absolute top-ds-02 right-ds-02 opacity-0 group-hover:opacity-100 transition-opacity\"\n      onClick={handleCopy}\n      aria-label={copied ? 'Copied' : 'Copy code'}\n    >\n      {copied ? <Icon icon={IconCheck} size=\"xs\" /> : <Icon icon={IconCopy} size=\"xs\" />}\n    </Button>\n  )\n}\n\n// Syntax-highlighted code block with lazy-loaded highlighter\nfunction CodeBlock({ language, code, mb }: { language: string; code: string; mb: string }) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [modules, setModules] = React.useState<{ Highlighter: any; style: any } | null>(null)\n\n  React.useEffect(() => {\n    let cancelled = false\n    Promise.all([\n      import('react-syntax-highlighter'),\n      import('react-syntax-highlighter/dist/esm/styles/prism/one-dark'),\n    ]).then(([hlMod, styleMod]) => {\n      if (!cancelled) {\n        setModules({ Highlighter: hlMod.Prism ?? hlMod.default, style: styleMod.default })\n      }\n    }).catch(() => { /* fallback to plain pre */ })\n    return () => { cancelled = true }\n  }, [])\n\n  if (!modules) {\n    return (\n      <div className={cn('group relative', mb)}>\n        <pre className=\"bg-surface-sunken rounded-ds-md p-ds-04 overflow-x-auto text-ds-sm font-mono\">\n          <code>{code}</code>\n        </pre>\n        <CopyButton code={code} />\n      </div>\n    )\n  }\n\n  const { Highlighter, style } = modules\n  return (\n    <div className={cn('group relative', mb)}>\n      <Highlighter\n        language={language}\n        style={style}\n        customStyle={{\n          margin: 0,\n          borderRadius: 'var(--radius-ds-md)',\n          fontSize: 'var(--text-ds-sm)',\n          padding: 'var(--spacing-ds-04)',\n        }}\n      >\n        {code}\n      </Highlighter>\n      <CopyButton code={code} />\n    </div>\n  )\n}\n\nconst MarkdownViewer = React.forwardRef<HTMLDivElement, MarkdownViewerProps>(({\n  content,\n  compact = false,\n  allowHtml = false,\n  linkTarget = '_blank',\n  className,\n  ...props\n}, ref) => {\n  const mb = compact ? 'mb-ds-02' : 'mb-ds-03'\n  const mt = compact ? 'mt-ds-03' : 'mt-ds-05'\n\n  return (\n    <div ref={ref} className={cn('font-sans text-surface-fg', className)} {...props}>\n      <Markdown\n        remarkPlugins={[remarkGfm]}\n        skipHtml={!allowHtml}\n        components={{\n          h1: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h1 id={slug} className={cn('group', compact ? 'text-ds-md' : 'text-ds-lg', 'font-semibold text-surface-fg', mt, mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h1>\n            )\n          },\n          h2: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h2 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', compact ? 'mt-ds-03' : 'mt-ds-04', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h2>\n            )\n          },\n          h3: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h3 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', 'mt-ds-03', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h3>\n            )\n          },\n          p: ({ children }) => (\n            <p className={cn('text-ds-md text-surface-fg leading-ds-relaxed', mb)}>\n              {children}\n            </p>\n          ),\n          a: ({ href, children }) => (\n            <a\n              href={href}\n              target={linkTarget}\n              rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined}\n              className=\"text-accent-11 hover:underline\"\n            >\n              {children}\n            </a>\n          ),\n          code: ({ className: codeClassName, children, ...codeProps }) => {\n            const langMatch = codeClassName ? /language-(\\w+)/.exec(codeClassName) : null\n            if (langMatch) {\n              const lang = langMatch[1]\n              const codeString = String(children).replace(/\\n$/, '')\n              return <CodeBlock language={lang} code={codeString} mb={mb} />\n            }\n            return (\n              <code className=\"bg-surface-sunken rounded-ds-sm px-1.5 py-0.5 text-ds-sm font-mono text-surface-fg\" {...codeProps}>\n                {children}\n              </code>\n            )\n          },\n          pre: ({ children }) => (\n            <>{children}</>\n          ),\n          blockquote: ({ children }) => (\n            <blockquote className={cn('border-l-2 border-surface-border-subtle pl-ds-04 text-surface-fg-muted italic', mb)}>\n              {children}\n            </blockquote>\n          ),\n          ul: ({ children }) => (\n            <ul className={cn('list-disc pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ul>\n          ),\n          ol: ({ children }) => (\n            <ol className={cn('list-decimal pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ol>\n          ),\n          table: ({ children }) => (\n            <div className={cn('overflow-x-auto', mb)}>\n              <table className=\"w-full border-collapse\">\n                {children}\n              </table>\n            </div>\n          ),\n          th: ({ children }) => (\n            <th className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-left text-ds-sm font-semibold bg-surface-sunken\">\n              {children}\n            </th>\n          ),\n          td: ({ children }) => (\n            <td className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-ds-sm\">\n              {children}\n            </td>\n          ),\n          hr: () => <hr className={cn('border-surface-border-subtle', compact ? 'my-ds-03' : 'my-ds-04')} />,\n          img: ({ src, alt }) => (\n            <img src={src} alt={alt ?? ''} className=\"rounded-ds-md max-w-full\" loading=\"lazy\" />\n          ),\n        }}\n      >\n        {content}\n      </Markdown>\n    </div>\n  )\n})\nMarkdownViewer.displayName = 'MarkdownViewer'\n\nexport { MarkdownViewer }\n"],"mappings":"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"}
+{"version":3,"file":"markdown-viewer.js","names":[],"sources":["../../src/composed/markdown-viewer.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconCopy } from '@tabler/icons-react'\nimport * as React from 'react'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\n// react-syntax-highlighter is lazy-loaded in CodeBlock component below\n\n// ============================================================\n// Heading helpers\n// ============================================================\n\nfunction slugify(text: string): string {\n  return text.toLowerCase().replace(/[^\\w]+/g, '-').replace(/(^-|-$)/g, '')\n}\n\n/** Recursively extract text content from React children */\nfunction extractText(node: React.ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (!node) return ''\n  if (Array.isArray(node)) return node.map(extractText).join('')\n  if (typeof node === 'object' && 'props' in node) {\n    return extractText((node as React.ReactElement<{ children?: React.ReactNode }>).props.children)\n  }\n  return ''\n}\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MarkdownViewerProps extends React.HTMLAttributes<HTMLDivElement> {\n  content: string\n  /** Tighter spacing for inline use */\n  compact?: boolean\n  /** Allow raw HTML in markdown @default false */\n  allowHtml?: boolean\n  /** Link target @default '_blank' */\n  linkTarget?: string\n}\n\n// ============================================================\n// MarkdownViewer\n// ============================================================\n\n// Small copy-to-clipboard button for code blocks\nfunction CopyButton({ code }: { code: string }) {\n  const [copied, setCopied] = React.useState(false)\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n  function handleCopy() {\n    navigator.clipboard.writeText(code).then(() => {\n      setCopied(true)\n      timerRef.current = setTimeout(() => setCopied(false), 2000)\n    })\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      className=\"absolute top-ds-02 right-ds-02 opacity-0 group-hover:opacity-100 transition-opacity\"\n      onClick={handleCopy}\n      aria-label={copied ? 'Copied' : 'Copy code'}\n    >\n      {copied ? <Icon icon={IconCheck} size=\"xs\" /> : <Icon icon={IconCopy} size=\"xs\" />}\n    </Button>\n  )\n}\n\n// Syntax-highlighted code block with lazy-loaded highlighter\nfunction CodeBlock({ language, code, mb }: { language: string; code: string; mb: string }) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [modules, setModules] = React.useState<{ Highlighter: any; style: any } | null>(null)\n\n  React.useEffect(() => {\n    let cancelled = false\n    Promise.all([\n      import('react-syntax-highlighter'),\n      import('react-syntax-highlighter/dist/esm/styles/prism/one-dark'),\n    ]).then(([hlMod, styleMod]) => {\n      if (!cancelled) {\n        setModules({ Highlighter: hlMod.Prism ?? hlMod.default, style: styleMod.default })\n      }\n    }).catch(() => { /* fallback to plain pre */ })\n    return () => { cancelled = true }\n  }, [])\n\n  if (!modules) {\n    return (\n      <div className={cn('group relative', mb)}>\n        <pre className=\"bg-surface-sunken rounded-control p-ds-04 overflow-x-auto text-ds-sm font-mono\">\n          <code>{code}</code>\n        </pre>\n        <CopyButton code={code} />\n      </div>\n    )\n  }\n\n  const { Highlighter, style } = modules\n  return (\n    <div className={cn('group relative', mb)}>\n      <Highlighter\n        language={language}\n        style={style}\n        customStyle={{\n          margin: 0,\n          borderRadius: 'var(--radius-ds-md)',\n          fontSize: 'var(--text-ds-sm)',\n          padding: 'var(--spacing-ds-04)',\n        }}\n      >\n        {code}\n      </Highlighter>\n      <CopyButton code={code} />\n    </div>\n  )\n}\n\nconst MarkdownViewer = React.forwardRef<HTMLDivElement, MarkdownViewerProps>(({\n  content,\n  compact = false,\n  allowHtml = false,\n  linkTarget = '_blank',\n  className,\n  ...props\n}, ref) => {\n  const mb = compact ? 'mb-ds-02' : 'mb-ds-03'\n  const mt = compact ? 'mt-ds-03' : 'mt-ds-05'\n\n  return (\n    <div ref={ref} className={cn('font-sans text-surface-fg', className)} {...props}>\n      <Markdown\n        remarkPlugins={[remarkGfm]}\n        skipHtml={!allowHtml}\n        components={{\n          h1: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h1 id={slug} className={cn('group', compact ? 'text-ds-md' : 'text-ds-lg', 'font-semibold text-surface-fg', mt, mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h1>\n            )\n          },\n          h2: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h2 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', compact ? 'mt-ds-03' : 'mt-ds-04', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h2>\n            )\n          },\n          h3: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h3 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', 'mt-ds-03', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h3>\n            )\n          },\n          p: ({ children }) => (\n            <p className={cn('text-ds-md text-surface-fg leading-ds-relaxed', mb)}>\n              {children}\n            </p>\n          ),\n          a: ({ href, children }) => (\n            <a\n              href={href}\n              target={linkTarget}\n              rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined}\n              className=\"text-accent-11 hover:underline\"\n            >\n              {children}\n            </a>\n          ),\n          code: ({ className: codeClassName, children, ...codeProps }) => {\n            const langMatch = codeClassName ? /language-(\\w+)/.exec(codeClassName) : null\n            if (langMatch) {\n              const lang = langMatch[1]\n              const codeString = String(children).replace(/\\n$/, '')\n              return <CodeBlock language={lang} code={codeString} mb={mb} />\n            }\n            return (\n              <code className=\"bg-surface-sunken rounded-control-inner px-1.5 py-0.5 text-ds-sm font-mono text-surface-fg\" {...codeProps}>\n                {children}\n              </code>\n            )\n          },\n          pre: ({ children }) => (\n            <>{children}</>\n          ),\n          blockquote: ({ children }) => (\n            <blockquote className={cn('border-l-2 border-surface-border-subtle pl-ds-04 text-surface-fg-muted italic', mb)}>\n              {children}\n            </blockquote>\n          ),\n          ul: ({ children }) => (\n            <ul className={cn('list-disc pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ul>\n          ),\n          ol: ({ children }) => (\n            <ol className={cn('list-decimal pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ol>\n          ),\n          table: ({ children }) => (\n            <div className={cn('overflow-x-auto', mb)}>\n              <table className=\"w-full border-collapse\">\n                {children}\n              </table>\n            </div>\n          ),\n          th: ({ children }) => (\n            <th className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-left text-ds-sm font-semibold bg-surface-sunken\">\n              {children}\n            </th>\n          ),\n          td: ({ children }) => (\n            <td className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-ds-sm\">\n              {children}\n            </td>\n          ),\n          hr: () => <hr className={cn('border-surface-border-subtle', compact ? 'my-ds-03' : 'my-ds-04')} />,\n          img: ({ src, alt }) => (\n            <img src={src} alt={alt ?? ''} className=\"rounded-control max-w-full\" loading=\"lazy\" />\n          ),\n        }}\n      >\n        {content}\n      </Markdown>\n    </div>\n  )\n})\nMarkdownViewer.displayName = 'MarkdownViewer'\n\nexport { MarkdownViewer }\n"],"mappings":"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"}

package/dist/composed/multi-select-popover.js

@@ -107,7 +107,7 @@ var m = s.forwardRef(({ items: m, groups: h, value: g, onValueChange: _, searchP
 			}) : /* @__PURE__ */ u(c, { children: [n.image && /* @__PURE__ */ l("img", {
 				src: n.image,
 				alt: "",
-				className: "h-ico-md w-ico-md rounded-full object-cover shrink-0"
+				className: "h-ico-md w-ico-md rounded-pill object-cover shrink-0"
 			}), /* @__PURE__ */ u("span", {
 				className: "flex-1 min-w-0",
 				children: [/* @__PURE__ */ l("span", {

package/dist/composed/multi-select-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n     \n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <motion.button\n          key={item.id}\n          id={`msp-item-${index}`}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          disabled={item.disabled}\n          data-multiselect-item=\"\"\n          data-focused={isFocused ? '' : undefined}\n          initial={{ opacity: 0, x: -8 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ ...springs.snappy, delay: index * 0.02 }}\n          onClick={() => toggle(item.id)}\n          className={cn(\n            'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:bg-surface-raised-hover',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            isSelected && 'bg-accent-2 text-accent-11',\n            isFocused && 'bg-surface-raised-hover',\n          )}\n        >\n          {renderItem ? (\n            <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n          ) : (\n            <>\n              {item.image && (\n                <img\n                  src={item.image}\n                  alt=\"\"\n                  className=\"h-ico-md w-ico-md rounded-full object-cover shrink-0\"\n                />\n              )}\n              <span className=\"flex-1 min-w-0\">\n                <span className=\"block truncate text-ds-md font-body text-surface-fg\">{item.label}</span>\n                {item.description && (\n                  <span className=\"block truncate text-ds-xs text-surface-fg-subtle\">{item.description}</span>\n                )}\n              </span>\n            </>\n          )}\n          {isSelected && (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n            </motion.span>\n          )}\n        </motion.button>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}
+{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n     \n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <motion.button\n          key={item.id}\n          id={`msp-item-${index}`}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          disabled={item.disabled}\n          data-multiselect-item=\"\"\n          data-focused={isFocused ? '' : undefined}\n          initial={{ opacity: 0, x: -8 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ ...springs.snappy, delay: index * 0.02 }}\n          onClick={() => toggle(item.id)}\n          className={cn(\n            'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:bg-surface-raised-hover',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            isSelected && 'bg-accent-2 text-accent-11',\n            isFocused && 'bg-surface-raised-hover',\n          )}\n        >\n          {renderItem ? (\n            <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n          ) : (\n            <>\n              {item.image && (\n                <img\n                  src={item.image}\n                  alt=\"\"\n                  className=\"h-ico-md w-ico-md rounded-pill object-cover shrink-0\"\n                />\n              )}\n              <span className=\"flex-1 min-w-0\">\n                <span className=\"block truncate text-ds-md font-body text-surface-fg\">{item.label}</span>\n                {item.description && (\n                  <span className=\"block truncate text-ds-xs text-surface-fg-subtle\">{item.description}</span>\n                )}\n              </span>\n            </>\n          )}\n          {isSelected && (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n            </motion.span>\n          )}\n        </motion.button>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}

package/dist/composed/page-header.js

@@ -25,7 +25,7 @@ var i = t.forwardRef(({ title: i, subtitle: a, actions: o, breadcrumbs: s, title
 				children: /* @__PURE__ */ n("path", { d: "M9 6l6 6l-6 6" })
 			}), i.href ? /* @__PURE__ */ n("a", {
 				href: i.href,
-				className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
+				className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner",
 				children: i.label
 			}) : /* @__PURE__ */ n("span", {
 				className: e("text-ds-sm", a === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"),

package/dist/composed/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <nav aria-label=\"Breadcrumb\" className=\"flex items-center gap-ds-02b\">\n            {breadcrumbs.map((crumb, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <svg\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"text-surface-fg-subtle\"\n                  >\n                    <path d=\"M9 6l6 6l-6 6\" />\n                  </svg>\n                )}\n                {crumb.href ? (\n                  <a\n                    href={crumb.href}\n                    className=\"text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm\"\n                  >\n                    {crumb.label}\n                  </a>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-ds-sm',\n                      index === breadcrumbs.length - 1\n                        ? 'text-surface-fg'\n                        : 'text-surface-fg-subtle',\n                    )}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </React.Fragment>\n            ))}\n          </nav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex items-start justify-between gap-ds-05\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;AAkBA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,OAAD;GAAK,cAAW;GAAa,WAAU;aACpC,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;cAEV,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;IACtB,CAAA,EAEP,EAAM,OACL,kBAAC,KAAD;IACE,MAAM,EAAM;IACZ,WAAU;cAET,EAAM;IACL,CAAA,GAEJ,kBAAC,QAAD;IACE,WAAW,EACT,cACA,MAAU,EAAY,SAAS,IAC3B,oBACA,yBACL;cAEA,EAAM;IACF,CAAA,CAEM,EAAA,EApCI,EAoCJ,CACjB;GACE,CAAA,GAGN,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAwC;IAAc,CAAA,CAEnE;KAEJ;;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <nav aria-label=\"Breadcrumb\" className=\"flex items-center gap-ds-02b\">\n            {breadcrumbs.map((crumb, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <svg\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"text-surface-fg-subtle\"\n                  >\n                    <path d=\"M9 6l6 6l-6 6\" />\n                  </svg>\n                )}\n                {crumb.href ? (\n                  <a\n                    href={crumb.href}\n                    className=\"text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner\"\n                  >\n                    {crumb.label}\n                  </a>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-ds-sm',\n                      index === breadcrumbs.length - 1\n                        ? 'text-surface-fg'\n                        : 'text-surface-fg-subtle',\n                    )}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </React.Fragment>\n            ))}\n          </nav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex items-start justify-between gap-ds-05\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;AAkBA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,OAAD;GAAK,cAAW;GAAa,WAAU;aACpC,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;cAEV,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;IACtB,CAAA,EAEP,EAAM,OACL,kBAAC,KAAD;IACE,MAAM,EAAM;IACZ,WAAU;cAET,EAAM;IACL,CAAA,GAEJ,kBAAC,QAAD;IACE,WAAW,EACT,cACA,MAAU,EAAY,SAAS,IAC3B,oBACA,yBACL;cAEA,EAAM;IACF,CAAA,CAEM,EAAA,EApCI,EAoCJ,CACjB;GACE,CAAA,GAGN,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAwC;IAAc,CAAA,CAEnE;KAEJ;;EAGX;AACD,EAAW,cAAc"}

package/dist/composed/page-skeletons.js

@@ -11,27 +11,27 @@ var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...
 		children: [/* @__PURE__ */ r("div", {
 			className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4",
 			children: Array.from({ length: 4 }).map((n, o) => /* @__PURE__ */ i("div", {
-				className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
+				className: "flex flex-col gap-ds-04 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b",
 				children: [
 					/* @__PURE__ */ i("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[80px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-ds-lg", a) })]
+						children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[80px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })]
 					}),
 					/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-[64px]", a) }),
 					/* @__PURE__ */ r(t, { className: e("h-ds-03 w-[112px]", a) })
 				]
 			}, `stat-${o}`))
 		}), /* @__PURE__ */ i("div", {
-			className: "rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06",
+			className: "rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-06",
 			children: [
 				/* @__PURE__ */ i("div", {
 					className: "mb-ds-06 flex items-center justify-between",
 					children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[128px]", a) }), /* @__PURE__ */ i("div", {
 						className: "flex items-center gap-ds-03",
 						children: [
-							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-ds-lg", a) }),
+							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) }),
 							/* @__PURE__ */ r(t, { className: e("h-[16px] w-[112px]", a) }),
-							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-ds-lg", a) })
+							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })
 						]
 					})]
 				}),
@@ -41,7 +41,7 @@ var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...
 				}),
 				/* @__PURE__ */ r("div", {
 					className: "grid grid-cols-7 gap-ds-03",
-					children: Array.from({ length: 35 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-md w-ds-md rounded-ds-full", a) }, `cal-${i}`))
+					children: Array.from({ length: 35 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-md w-ds-md rounded-pill", a) }, `cal-${i}`))
 				})
 			]
 		})]
@@ -59,23 +59,23 @@ var s = n.forwardRef(function({ className: n, ...o }, s) {
 				children: [/* @__PURE__ */ i("div", {
 					className: "flex flex-col gap-ds-03",
 					children: [/* @__PURE__ */ r(t, { className: e("h-[24px] w-[112px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-[160px]", a) })]
-				}), /* @__PURE__ */ r(t, { className: e("h-ds-sm-plus w-[128px] rounded-ds-lg", a) })]
+				}), /* @__PURE__ */ r(t, { className: e("h-ds-sm-plus w-[128px] rounded-surface", a) })]
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col gap-ds-04 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ r(t, { className: e("h-ds-sm-plus flex-1 rounded-ds-lg", a) }), /* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ r(t, { className: e("h-ds-sm-plus flex-1 rounded-surface", a) }), /* @__PURE__ */ r("div", {
 					className: "flex gap-ds-02b",
-					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-[64px] rounded-ds-lg", a) }, `f-${i}`))
+					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-[64px] rounded-surface", a) }, `f-${i}`))
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3",
 				children: Array.from({ length: 6 }).map((n, o) => /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
+					className: "flex flex-col gap-ds-05 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b",
 					children: [
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[64px] rounded-ds-full", a) }), /* @__PURE__ */ r(t, { className: e("h-[16px] w-[80px] rounded-ds-md", a) })]
+							children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[64px] rounded-pill", a) }), /* @__PURE__ */ r(t, { className: e("h-[16px] w-[80px] rounded-control", a) })]
 						}),
 						/* @__PURE__ */ i("div", {
 							className: "flex flex-col gap-ds-03",
@@ -89,7 +89,7 @@ var s = n.forwardRef(function({ className: n, ...o }, s) {
 							className: "flex items-center justify-between pt-ds-02",
 							children: [/* @__PURE__ */ r("div", {
 								className: "flex -space-x-ds-03",
-								children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-ds-full", a) }, `av-${o}-${i}`))
+								children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-pill", a) }, `av-${o}-${i}`))
 							}), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-md", a) })]
 						})
 					]
@@ -103,20 +103,20 @@ var c = n.forwardRef(function({ className: n, ...o }, s) {
 	return /* @__PURE__ */ i("div", {
 		ref: s,
 		...o,
-		className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-raised", n),
+		className: e("flex h-full flex-col gap-0 rounded-overlay-lg border border-surface-border-strong bg-surface-raised", n),
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05",
 				children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[192px]", a) }), /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-ds-lg", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-ds-lg", a) })]
+					children: [/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) })]
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05",
 				children: Array.from({ length: 5 }).map((n, o) => /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-05 py-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[96px] shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-[24px] w-[128px] rounded-ds-md", a) })]
+					children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[96px] shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-[24px] w-[128px] rounded-control", a) })]
 				}, `prop-${o}`))
 			}),
 			/* @__PURE__ */ r("div", {

package/dist/composed/page-skeletons.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-skeletons.js","names":[],"sources":["../../src/composed/page-skeletons.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nconst shimmer = 'bg-surface-raised-hover'\n\n// --- Dashboard Skeleton ---\n\nexport interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst DashboardSkeleton = React.forwardRef<HTMLDivElement, DashboardSkeletonProps>(\n  function DashboardSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Stat cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div\n            key={`stat-${i}`}\n            className=\"flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[12px] w-[80px]', shimmer)} />\n              <Skeleton className={cn('h-ds-sm w-ds-sm rounded-ds-lg', shimmer)} />\n            </div>\n            <Skeleton className={cn('h-ds-xs-plus w-[64px]', shimmer)} />\n            <Skeleton className={cn('h-ds-03 w-[112px]', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Attendance calendar placeholder */}\n      <div className=\"rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06\">\n        <div className=\"mb-ds-06 flex items-center justify-between\">\n          <Skeleton className={cn('h-[20px] w-[128px]', shimmer)} />\n          <div className=\"flex items-center gap-ds-03\">\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-ds-lg', shimmer)} />\n            <Skeleton className={cn('h-[16px] w-[112px]', shimmer)} />\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-ds-lg', shimmer)} />\n          </div>\n        </div>\n        {/* Weekday headers */}\n        <div className=\"mb-ds-03 grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 7 }).map((_, i) => (\n            <Skeleton key={`wh-${i}`} className={cn('mx-auto h-[12px] w-[32px]', shimmer)} />\n          ))}\n        </div>\n        {/* Calendar grid */}\n        <div className=\"grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 35 }).map((_, i) => (\n            <Skeleton\n              key={`cal-${i}`}\n              className={cn('mx-auto h-ds-md w-ds-md rounded-ds-full', shimmer)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n},\n)\n\nDashboardSkeleton.displayName = 'DashboardSkeleton'\n\n// --- Project List Skeleton ---\n\nexport interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst ProjectListSkeleton = React.forwardRef<HTMLDivElement, ProjectListSkeletonProps>(\n  function ProjectListSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-col gap-ds-03\">\n          <Skeleton className={cn('h-[24px] w-[112px]', shimmer)} />\n          <Skeleton className={cn('h-ds-04 w-[160px]', shimmer)} />\n        </div>\n        <Skeleton className={cn('h-ds-sm-plus w-[128px] rounded-ds-lg', shimmer)} />\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col gap-ds-04 sm:flex-row sm:items-center\">\n        <Skeleton className={cn('h-ds-sm-plus flex-1 rounded-ds-lg', shimmer)} />\n        <div className=\"flex gap-ds-02b\">\n          {Array.from({ length: 4 }).map((_, i) => (\n            <Skeleton key={`f-${i}`} className={cn('h-ds-sm w-[64px] rounded-ds-lg', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Project cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={`proj-${i}`}\n            className=\"flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            {/* Top row: status + org */}\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[20px] w-[64px] rounded-ds-full', shimmer)} />\n              <Skeleton className={cn('h-[16px] w-[80px] rounded-ds-md', shimmer)} />\n            </div>\n            {/* Title + description */}\n            <div className=\"flex flex-col gap-ds-03\">\n              <Skeleton className={cn('h-[16px] w-3/4', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n            </div>\n            {/* Bottom row: members + count */}\n            <div className=\"flex items-center justify-between pt-ds-02\">\n              <div className=\"flex -space-x-ds-03\">\n                {Array.from({ length: 3 }).map((_, j) => (\n                  <Skeleton\n                    key={`av-${i}-${j}`}\n                    className={cn('h-ds-xs-plus w-ds-xs-plus rounded-ds-full', shimmer)}\n                  />\n                ))}\n              </div>\n              <Skeleton className={cn('h-ds-04 w-ds-md', shimmer)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nProjectListSkeleton.displayName = 'ProjectListSkeleton'\n\n// --- Task Detail Skeleton ---\n\nexport interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst TaskDetailSkeleton = React.forwardRef<HTMLDivElement, TaskDetailSkeletonProps>(\n  function TaskDetailSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-raised\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[20px] w-[192px]', shimmer)} />\n        <div className=\"flex items-center gap-ds-03\">\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-ds-lg', shimmer)} />\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-ds-lg', shimmer)} />\n        </div>\n      </div>\n\n      {/* Property rows */}\n      <div className=\"flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div\n            key={`prop-${i}`}\n            className=\"flex items-center gap-ds-05 py-ds-03\"\n          >\n            <Skeleton className={cn('h-[12px] w-[96px] shrink-0', shimmer)} />\n            <Skeleton className={cn('h-[24px] w-[128px] rounded-ds-md', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Tabs */}\n      <div className=\"border-b border-surface-border-strong px-ds-05b\">\n        <div className=\"flex gap-ds-05 py-ds-04\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <Skeleton key={`tab-${i}`} className={cn('h-[16px] w-[64px]', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Tab content */}\n      <div className=\"flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-4/5', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-3/5', shimmer)} />\n        <Skeleton className={cn('mt-ds-03 h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n      </div>\n    </div>\n  )\n},\n)\n\nTaskDetailSkeleton.displayName = 'TaskDetailSkeleton'\n\nexport {\n  DashboardSkeleton,\n  ProjectListSkeleton,\n  TaskDetailSkeleton,\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-skeletons.js","names":[],"sources":["../../src/composed/page-skeletons.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nconst shimmer = 'bg-surface-raised-hover'\n\n// --- Dashboard Skeleton ---\n\nexport interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst DashboardSkeleton = React.forwardRef<HTMLDivElement, DashboardSkeletonProps>(\n  function DashboardSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Stat cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div\n            key={`stat-${i}`}\n            className=\"flex flex-col gap-ds-04 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[12px] w-[80px]', shimmer)} />\n              <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            </div>\n            <Skeleton className={cn('h-ds-xs-plus w-[64px]', shimmer)} />\n            <Skeleton className={cn('h-ds-03 w-[112px]', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Attendance calendar placeholder */}\n      <div className=\"rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-06\">\n        <div className=\"mb-ds-06 flex items-center justify-between\">\n          <Skeleton className={cn('h-[20px] w-[128px]', shimmer)} />\n          <div className=\"flex items-center gap-ds-03\">\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            <Skeleton className={cn('h-[16px] w-[112px]', shimmer)} />\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n          </div>\n        </div>\n        {/* Weekday headers */}\n        <div className=\"mb-ds-03 grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 7 }).map((_, i) => (\n            <Skeleton key={`wh-${i}`} className={cn('mx-auto h-[12px] w-[32px]', shimmer)} />\n          ))}\n        </div>\n        {/* Calendar grid */}\n        <div className=\"grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 35 }).map((_, i) => (\n            <Skeleton\n              key={`cal-${i}`}\n              className={cn('mx-auto h-ds-md w-ds-md rounded-pill', shimmer)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n},\n)\n\nDashboardSkeleton.displayName = 'DashboardSkeleton'\n\n// --- Project List Skeleton ---\n\nexport interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst ProjectListSkeleton = React.forwardRef<HTMLDivElement, ProjectListSkeletonProps>(\n  function ProjectListSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-col gap-ds-03\">\n          <Skeleton className={cn('h-[24px] w-[112px]', shimmer)} />\n          <Skeleton className={cn('h-ds-04 w-[160px]', shimmer)} />\n        </div>\n        <Skeleton className={cn('h-ds-sm-plus w-[128px] rounded-surface', shimmer)} />\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col gap-ds-04 sm:flex-row sm:items-center\">\n        <Skeleton className={cn('h-ds-sm-plus flex-1 rounded-surface', shimmer)} />\n        <div className=\"flex gap-ds-02b\">\n          {Array.from({ length: 4 }).map((_, i) => (\n            <Skeleton key={`f-${i}`} className={cn('h-ds-sm w-[64px] rounded-surface', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Project cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={`proj-${i}`}\n            className=\"flex flex-col gap-ds-05 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            {/* Top row: status + org */}\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[20px] w-[64px] rounded-pill', shimmer)} />\n              <Skeleton className={cn('h-[16px] w-[80px] rounded-control', shimmer)} />\n            </div>\n            {/* Title + description */}\n            <div className=\"flex flex-col gap-ds-03\">\n              <Skeleton className={cn('h-[16px] w-3/4', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n            </div>\n            {/* Bottom row: members + count */}\n            <div className=\"flex items-center justify-between pt-ds-02\">\n              <div className=\"flex -space-x-ds-03\">\n                {Array.from({ length: 3 }).map((_, j) => (\n                  <Skeleton\n                    key={`av-${i}-${j}`}\n                    className={cn('h-ds-xs-plus w-ds-xs-plus rounded-pill', shimmer)}\n                  />\n                ))}\n              </div>\n              <Skeleton className={cn('h-ds-04 w-ds-md', shimmer)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nProjectListSkeleton.displayName = 'ProjectListSkeleton'\n\n// --- Task Detail Skeleton ---\n\nexport interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst TaskDetailSkeleton = React.forwardRef<HTMLDivElement, TaskDetailSkeletonProps>(\n  function TaskDetailSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex h-full flex-col gap-0 rounded-overlay-lg border border-surface-border-strong bg-surface-raised\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[20px] w-[192px]', shimmer)} />\n        <div className=\"flex items-center gap-ds-03\">\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n        </div>\n      </div>\n\n      {/* Property rows */}\n      <div className=\"flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div\n            key={`prop-${i}`}\n            className=\"flex items-center gap-ds-05 py-ds-03\"\n          >\n            <Skeleton className={cn('h-[12px] w-[96px] shrink-0', shimmer)} />\n            <Skeleton className={cn('h-[24px] w-[128px] rounded-control', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Tabs */}\n      <div className=\"border-b border-surface-border-strong px-ds-05b\">\n        <div className=\"flex gap-ds-05 py-ds-04\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <Skeleton key={`tab-${i}`} className={cn('h-[16px] w-[64px]', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Tab content */}\n      <div className=\"flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-4/5', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-3/5', shimmer)} />\n        <Skeleton className={cn('mt-ds-03 h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n      </div>\n    </div>\n  )\n},\n)\n\nTaskDetailSkeleton.displayName = 'TaskDetailSkeleton'\n\nexport {\n  DashboardSkeleton,\n  ProjectListSkeleton,\n  TaskDetailSkeleton,\n}\n"],"mappings":"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"}

package/dist/composed/priority-indicator.js

@@ -43,7 +43,7 @@ var d = {
 	if (r === "compact") {
 		let e = /* @__PURE__ */ i("div", {
 			ref: c,
-			className: t("inline-flex items-center justify-center rounded-ds-md p-ds-02", p.bgColor, o),
+			className: t("inline-flex items-center justify-center rounded-control p-ds-02", p.bgColor, o),
 			title: p.label,
 			...s,
 			children: /* @__PURE__ */ i(n, {
@@ -82,14 +82,14 @@ var d = {
 				duration: 2,
 				ease: "easeInOut"
 			},
-			className: t("inline-flex items-center justify-center rounded-ds-md p-ds-01", p.bgColor),
+			className: t("inline-flex items-center justify-center rounded-control p-ds-01", p.bgColor),
 			children: /* @__PURE__ */ i(n, {
 				icon: m,
 				size: "sm",
 				className: p.color
 			})
 		}) : /* @__PURE__ */ i("div", {
-			className: t("inline-flex items-center justify-center rounded-ds-md p-ds-01", p.bgColor),
+			className: t("inline-flex items-center justify-center rounded-control p-ds-01", p.bgColor),
 			children: /* @__PURE__ */ i(n, {
 				icon: m,
 				size: "sm",

package/dist/composed/priority-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"priority-indicator.js","names":[],"sources":["../../src/composed/priority-indicator.tsx"],"sourcesContent":["'use client'\n\nimport type { Icon as TablerIcon } from '@tabler/icons-react'\nimport {\n  IconAlertTriangle,\n  IconArrowDown,\n  IconArrowUp,\n  IconMinus,\n} from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon, type IconProps } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\nexport type Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'\n\nconst priorityConfig: Record<\n  Uppercase<Priority>,\n  { icon: TablerIcon; color: string; bgColor: string; label: string }\n> = {\n  LOW: {\n    icon: IconArrowDown,\n    color: 'text-category-slate-11',\n    bgColor: 'bg-category-slate-3',\n    label: 'Low',\n  },\n  MEDIUM: {\n    icon: IconMinus,\n    color: 'text-warning-11',\n    bgColor: 'bg-warning-3',\n    label: 'Medium',\n  },\n  HIGH: {\n    icon: IconArrowUp,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'High',\n  },\n  URGENT: {\n    icon: IconAlertTriangle,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'Urgent',\n  },\n}\n\nconst priorityVariants = cva(\n  'inline-flex items-center gap-ds-02b font-body',\n  {\n    variants: {\n      display: {\n        compact: '',\n        full: '',\n      },\n    },\n    defaultVariants: {\n      display: 'full',\n    },\n  },\n)\n\nexport interface PriorityIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof priorityVariants> {\n  priority: Priority\n}\n\nconst PriorityIndicator = React.forwardRef<HTMLDivElement, PriorityIndicatorProps>(\n  ({ priority, display, className, ...props }, ref) => {\n    const normalizedPriority = priority.toUpperCase() as 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'\n    const config = priorityConfig[normalizedPriority]\n    const PriorityIcon = config.icon as IconProps['icon']\n\n    const isUrgent = normalizedPriority === 'URGENT'\n\n    if (display === 'compact') {\n      const iconWrapper = (\n        <div\n          ref={ref}\n          className={cn(\n            'inline-flex items-center justify-center rounded-ds-md p-ds-02',\n            config.bgColor,\n            className,\n          )}\n          title={config.label}\n          {...props}\n        >\n          <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n        </div>\n      )\n\n      if (isUrgent) {\n        return (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className=\"inline-flex\"\n          >\n            {iconWrapper}\n          </motion.div>\n        )\n      }\n\n      return iconWrapper\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(priorityVariants({ display }), className)}\n        {...props}\n      >\n        {isUrgent ? (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className={cn(\n              'inline-flex items-center justify-center rounded-ds-md p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </motion.div>\n        ) : (\n          <div\n            className={cn(\n              'inline-flex items-center justify-center rounded-ds-md p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </div>\n        )}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          {config.label}\n        </span>\n      </div>\n    )\n  },\n)\nPriorityIndicator.displayName = 'PriorityIndicator'\n\nexport { PriorityIndicator }\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAGF;CACF,KAAK;EACH,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACF,EAEK,IAAmB,EACvB,iDACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF,EAQK,IAAoB,EAAM,YAC7B,EAAE,aAAU,YAAS,cAAW,GAAG,KAAS,MAAQ;CACnD,IAAM,IAAqB,EAAS,aAAa,EAC3C,IAAS,EAAe,IACxB,IAAe,EAAO,MAEtB,IAAW,MAAuB;AAExC,KAAI,MAAY,WAAW;EACzB,IAAM,IACJ,kBAAC,OAAD;GACO;GACL,WAAW,EACT,iEACA,EAAO,SACP,EACD;GACD,OAAO,EAAO;GACd,GAAI;aAEJ,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA;AAeR,SAZI,IAEA,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAU;aAET;GACU,CAAA,GAIV;;AAGT,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,EAAiB,EAAE,YAAS,CAAC,EAAE,EAAU;EACvD,GAAI;YAHN,CAKG,IACC,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAW,EACT,iEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GACpD,CAAA,GAEb,kBAAC,OAAD;GACE,WAAW,EACT,iEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA,EAER,kBAAC,QAAD;GAAM,WAAU;aACb,EAAO;GACH,CAAA,CACH;;EAGX;AACD,EAAkB,cAAc"}
+{"version":3,"file":"priority-indicator.js","names":[],"sources":["../../src/composed/priority-indicator.tsx"],"sourcesContent":["'use client'\n\nimport type { Icon as TablerIcon } from '@tabler/icons-react'\nimport {\n  IconAlertTriangle,\n  IconArrowDown,\n  IconArrowUp,\n  IconMinus,\n} from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon, type IconProps } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\nexport type Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'\n\nconst priorityConfig: Record<\n  Uppercase<Priority>,\n  { icon: TablerIcon; color: string; bgColor: string; label: string }\n> = {\n  LOW: {\n    icon: IconArrowDown,\n    color: 'text-category-slate-11',\n    bgColor: 'bg-category-slate-3',\n    label: 'Low',\n  },\n  MEDIUM: {\n    icon: IconMinus,\n    color: 'text-warning-11',\n    bgColor: 'bg-warning-3',\n    label: 'Medium',\n  },\n  HIGH: {\n    icon: IconArrowUp,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'High',\n  },\n  URGENT: {\n    icon: IconAlertTriangle,\n    color: 'text-error-11',\n    bgColor: 'bg-error-3',\n    label: 'Urgent',\n  },\n}\n\nconst priorityVariants = cva(\n  'inline-flex items-center gap-ds-02b font-body',\n  {\n    variants: {\n      display: {\n        compact: '',\n        full: '',\n      },\n    },\n    defaultVariants: {\n      display: 'full',\n    },\n  },\n)\n\nexport interface PriorityIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof priorityVariants> {\n  priority: Priority\n}\n\nconst PriorityIndicator = React.forwardRef<HTMLDivElement, PriorityIndicatorProps>(\n  ({ priority, display, className, ...props }, ref) => {\n    const normalizedPriority = priority.toUpperCase() as 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'\n    const config = priorityConfig[normalizedPriority]\n    const PriorityIcon = config.icon as IconProps['icon']\n\n    const isUrgent = normalizedPriority === 'URGENT'\n\n    if (display === 'compact') {\n      const iconWrapper = (\n        <div\n          ref={ref}\n          className={cn(\n            'inline-flex items-center justify-center rounded-control p-ds-02',\n            config.bgColor,\n            className,\n          )}\n          title={config.label}\n          {...props}\n        >\n          <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n        </div>\n      )\n\n      if (isUrgent) {\n        return (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className=\"inline-flex\"\n          >\n            {iconWrapper}\n          </motion.div>\n        )\n      }\n\n      return iconWrapper\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(priorityVariants({ display }), className)}\n        {...props}\n      >\n        {isUrgent ? (\n          <motion.div\n            animate={{ scale: [1, 1.1, 1] }}\n            transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}\n            className={cn(\n              'inline-flex items-center justify-center rounded-control p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </motion.div>\n        ) : (\n          <div\n            className={cn(\n              'inline-flex items-center justify-center rounded-control p-ds-01',\n              config.bgColor,\n            )}\n          >\n            <Icon icon={PriorityIcon} size=\"sm\" className={config.color} />\n          </div>\n        )}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          {config.label}\n        </span>\n      </div>\n    )\n  },\n)\nPriorityIndicator.displayName = 'PriorityIndicator'\n\nexport { PriorityIndicator }\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAGF;CACF,KAAK;EACH,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,OAAO;EACR;CACF,EAEK,IAAmB,EACvB,iDACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF,EAQK,IAAoB,EAAM,YAC7B,EAAE,aAAU,YAAS,cAAW,GAAG,KAAS,MAAQ;CACnD,IAAM,IAAqB,EAAS,aAAa,EAC3C,IAAS,EAAe,IACxB,IAAe,EAAO,MAEtB,IAAW,MAAuB;AAExC,KAAI,MAAY,WAAW;EACzB,IAAM,IACJ,kBAAC,OAAD;GACO;GACL,WAAW,EACT,mEACA,EAAO,SACP,EACD;GACD,OAAO,EAAO;GACd,GAAI;aAEJ,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA;AAeR,SAZI,IAEA,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAU;aAET;GACU,CAAA,GAIV;;AAGT,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,EAAiB,EAAE,YAAS,CAAC,EAAE,EAAU;EACvD,GAAI;YAHN,CAKG,IACC,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAK;IAAE,EAAE;GAC/B,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAa;GAChE,WAAW,EACT,mEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GACpD,CAAA,GAEb,kBAAC,OAAD;GACE,WAAW,EACT,mEACA,EAAO,QACR;aAED,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAK;IAAK,WAAW,EAAO;IAAS,CAAA;GAC3D,CAAA,EAER,kBAAC,QAAD;GAAM,WAAU;aACb,EAAO;GACH,CAAA,CACH;;EAGX;AACD,EAAkB,cAAc"}

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

@@ -17,15 +17,15 @@ var W = [
 	"[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
 	"[&_li]:text-surface-fg-muted",
 	"[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-accent-11",
-	"[&_pre]:rounded-ds-lg [&_pre]:bg-surface-raised [&_pre]:p-ds-04",
+	"[&_pre]:rounded-surface [&_pre]:bg-surface-raised [&_pre]:p-ds-04",
 	"[&_strong]:font-semibold [&_strong]:text-surface-fg",
 	"[&_blockquote]:border-l-[3px] [&_blockquote]:border-accent-6 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-surface-fg-subtle",
 	"[&_mark]:rounded-xs [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
 	"[&_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",
 	"[&_hr]:my-ds-04 [&_hr]:border-surface-border-strong",
 	"[&_a]:text-accent-11 [&_a]:underline [&_a]:decoration-accent-6 hover:[&_a]:decoration-accent-11",
-	"[&_img]:max-w-full [&_img]:rounded-ds-md [&_img]:my-ds-03",
-	"[&_.mention]:rounded-ds-sm [&_.mention]:bg-accent-2 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-accent-11"
+	"[&_img]:max-w-full [&_img]:rounded-control [&_img]:my-ds-03",
+	"[&_.mention]:rounded-control-inner [&_.mention]:bg-accent-2 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-accent-11"
 ];
 function G({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children: a }) {
 	return /* @__PURE__ */ b("button", {
@@ -35,7 +35,7 @@ function G({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children:
 		title: i,
 		"aria-label": i,
 		"aria-pressed": n,
-		className: e("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", "hover:bg-surface-raised-hover", "disabled:pointer-events-none disabled:opacity-action-disabled", n ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"),
+		className: e("inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "disabled:pointer-events-none disabled:opacity-action-disabled", n ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"),
 		children: a
 	});
 }
@@ -65,7 +65,7 @@ function K({ editor: e }) {
 				t.preventDefault(), a.trim() && e.chain().focus().setLink({ href: a.trim() }).run(), r(!1), o("");
 			},
 			"aria-label": "Edit link URL",
-			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",
+			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",
 			children: [/* @__PURE__ */ b("input", {
 				ref: s,
 				type: "url",
@@ -75,10 +75,10 @@ function K({ editor: e }) {
 					t.key === "Escape" && (r(!1), o(""), e.commands.focus());
 				},
 				placeholder: "https://...",
-				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"
+				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"
 			}), /* @__PURE__ */ b("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",
+				className: "h-ds-sm rounded-control-inner bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10",
 				children: "Apply"
 			})]
 		})]
@@ -329,7 +329,7 @@ function X({ set: e = "native", onSelect: t }) {
 		f(e).then((e) => r(e));
 	}, [e]);
 	let a = /* @__PURE__ */ b("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",
+		className: "flex h-[350px] w-[352px] items-center justify-center rounded-surface border border-surface-border-strong bg-surface-overlay shadow-raised-hover",
 		children: /* @__PURE__ */ b("span", {
 			className: "text-ds-sm text-surface-fg-subtle",
 			children: "Loading..."
@@ -409,7 +409,7 @@ var Z = y.forwardRef(function({ content: t = "", placeholder: i = "Start writing
 			d.configure({ types: ["heading", "paragraph"] }),
 			n.configure({
 				allowBase64: !0,
-				HTMLAttributes: { class: "max-w-full rounded-ds-md" }
+				HTMLAttributes: { class: "max-w-full rounded-control" }
 			}),
 			m,
 			...D || O ? [u.configure({
@@ -479,7 +479,7 @@ var Z = y.forwardRef(function({ content: t = "", placeholder: i = "Start writing
 				}
 			})
 		}), /* @__PURE__ */ x("div", {
-			className: e("overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-raised", "transition-colors ease-productive-standard focus-within:border-surface-border-strong"),
+			className: e("overflow-hidden rounded-surface border border-surface-border-strong bg-surface-raised", "transition-colors ease-productive-standard focus-within:border-surface-border-strong"),
 			children: [
 				/* @__PURE__ */ b("input", {
 					ref: R,
@@ -547,7 +547,7 @@ var Q = y.forwardRef(function({ content: t, className: i, ...c }, f) {
 			d.configure({ types: ["heading", "paragraph"] }),
 			n.configure({
 				allowBase64: !0,
-				HTMLAttributes: { class: "max-w-full rounded-ds-md" }
+				HTMLAttributes: { class: "max-w-full rounded-control" }
 			}),
 			m,
 			u.configure({ HTMLAttributes: { class: "mention" } })