@devalok/shilp-sutra 0.38.0 → 0.39.0

package/dist/composed/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.js","names":[],"sources":["../../src/composed/bulk-action-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon, type IconProps } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface BulkActionBarAction {\n  label: string\n  icon?: IconProps['icon']\n  onClick: () => void\n  color?: 'accent' | 'error'\n  disabled?: boolean\n  /** Show inline confirmation before executing the action */\n  requiresConfirmation?: boolean\n  /** Custom confirmation message @default 'Are you sure?' */\n  confirmMessage?: string\n}\n\nexport interface BulkActionBarProps {\n  show: boolean\n  count: number\n  onClearSelection: () => void\n  actions: BulkActionBarAction[]\n  /** Total number of items available for selection */\n  totalCount?: number\n  /** Called when user clicks \"Select all\" */\n  onSelectAll?: () => void\n  className?: string\n}\n\n// ============================================================\n// ActionButton — handles inline confirmation\n// ============================================================\n\nconst ActionButton = React.forwardRef<HTMLDivElement, { action: BulkActionBarAction; tabIndex?: number }>(function ActionButton({ action, tabIndex }, ref) {\n  const [confirming, setConfirming] = React.useState(false)\n\n  if (confirming) {\n    return (\n      <motion.div\n        ref={ref}\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.95 }}\n        transition={springs.snappy}\n        className=\"flex items-center gap-ds-02\"\n        tabIndex={tabIndex}\n      >\n        <span className=\"text-ds-sm text-surface-fg-muted whitespace-nowrap\">\n          {action.confirmMessage ?? 'Are you sure?'}\n        </span>\n        <Button\n          variant=\"solid\"\n          size=\"sm\"\n          color=\"error\"\n          onClick={() => {\n            setConfirming(false)\n            action.onClick()\n          }}\n        >\n          Confirm\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => setConfirming(false)}\n        >\n          Cancel\n        </Button>\n      </motion.div>\n    )\n  }\n\n  return (\n    <motion.div\n      ref={ref}\n      initial={{ opacity: 0, scale: 0.95 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.95 }}\n      transition={springs.snappy}\n      tabIndex={tabIndex}\n    >\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        color={action.color === 'error' ? 'error' : 'accent'}\n        disabled={action.disabled}\n        onClick={action.requiresConfirmation ? () => setConfirming(true) : action.onClick}\n        startIcon={action.icon ? <Icon icon={action.icon} /> : undefined}\n        tabIndex={-1}\n      >\n        {action.label}\n      </Button>\n    </motion.div>\n  )\n})\n\n// ============================================================\n// BulkActionBar\n// ============================================================\n\nfunction BulkActionBar({\n  show,\n  count,\n  onClearSelection,\n  actions,\n  totalCount,\n  onSelectAll,\n  className,\n}: BulkActionBarProps) {\n  const [mounted, setMounted] = React.useState(false)\n  const [focusedIndex, setFocusedIndex] = React.useState(0)\n  const actionRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n  // Reset focused index when actions change\n  React.useEffect(() => {\n    setFocusedIndex(0)\n  }, [actions.length])\n\n  React.useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      onClearSelection()\n      return\n    }\n\n    const count = actions.length\n    if (count === 0) return\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      const next = (focusedIndex + 1) % count\n      setFocusedIndex(next)\n      actionRefs.current[next]?.focus()\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      const prev = (focusedIndex - 1 + count) % count\n      setFocusedIndex(prev)\n      actionRefs.current[prev]?.focus()\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      setFocusedIndex(0)\n      actionRefs.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = count - 1\n      setFocusedIndex(last)\n      actionRefs.current[last]?.focus()\n    }\n  }\n\n  if (!mounted) return null\n\n  return createPortal(\n    <AnimatePresence>\n      {show && (\n        <motion.div\n          initial={{ y: 100, opacity: 0 }}\n          animate={{ y: 0, opacity: 1 }}\n          exit={{ y: 100, opacity: 0 }}\n          transition={springs.snappy}\n          className={cn(\n            'fixed bottom-ds-06 left-1/2 z-sticky -translate-x-1/2',\n            'flex items-center gap-ds-04 rounded-ds-lg border border-surface-border bg-surface-overlay px-ds-05 py-ds-03 shadow-floating',\n            className,\n          )}\n          role=\"toolbar\"\n          aria-label={`${count} items selected`}\n          onKeyDown={handleKeyDown}\n        >\n          <Badge variant=\"solid\" size=\"sm\">\n            {count} selected\n          </Badge>\n\n          {totalCount != null && totalCount > count && onSelectAll && (\n            <Button variant=\"link\" size=\"xs\" onClick={onSelectAll}>\n              Select all {totalCount}\n            </Button>\n          )}\n\n          <div className=\"flex items-center gap-ds-02\">\n            <AnimatePresence mode=\"popLayout\">\n              {actions.map((action, i) => (\n                <ActionButton\n                  key={action.label}\n                  ref={(el: HTMLDivElement | null) => { actionRefs.current[i] = el }}\n                  action={action}\n                  tabIndex={i === focusedIndex ? 0 : -1}\n                />\n              ))}\n            </AnimatePresence>\n          </div>\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={onClearSelection}\n            aria-label=\"Clear selection\"\n          >\n            <Icon icon={IconX} size=\"sm\" />\n          </Button>\n        </motion.div>\n      )}\n    </AnimatePresence>,\n    document.body,\n  )\n}\n\nBulkActionBar.displayName = 'BulkActionBar'\n\nexport { BulkActionBar }\n"],"mappings":"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"}
+{"version":3,"file":"bulk-action-bar.js","names":[],"sources":["../../src/composed/bulk-action-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon, type IconProps } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface BulkActionBarAction {\n  label: string\n  icon?: IconProps['icon']\n  onClick: () => void\n  color?: 'accent' | 'error'\n  disabled?: boolean\n  /** Show inline confirmation before executing the action */\n  requiresConfirmation?: boolean\n  /** Custom confirmation message @default 'Are you sure?' */\n  confirmMessage?: string\n}\n\nexport interface BulkActionBarProps {\n  show: boolean\n  count: number\n  onClearSelection: () => void\n  actions: BulkActionBarAction[]\n  /** Total number of items available for selection */\n  totalCount?: number\n  /** Called when user clicks \"Select all\" */\n  onSelectAll?: () => void\n  className?: string\n}\n\n// ============================================================\n// ActionButton — handles inline confirmation\n// ============================================================\n\nconst ActionButton = React.forwardRef<HTMLDivElement, { action: BulkActionBarAction; tabIndex?: number }>(function ActionButton({ action, tabIndex }, ref) {\n  const [confirming, setConfirming] = React.useState(false)\n\n  if (confirming) {\n    return (\n      <motion.div\n        ref={ref}\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.95 }}\n        transition={springs.snappy}\n        className=\"flex items-center gap-ds-02\"\n        tabIndex={tabIndex}\n      >\n        <span className=\"text-ds-sm text-surface-fg-muted whitespace-nowrap\">\n          {action.confirmMessage ?? 'Are you sure?'}\n        </span>\n        <Button\n          variant=\"solid\"\n          size=\"sm\"\n          color=\"error\"\n          onClick={() => {\n            setConfirming(false)\n            action.onClick()\n          }}\n        >\n          Confirm\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => setConfirming(false)}\n        >\n          Cancel\n        </Button>\n      </motion.div>\n    )\n  }\n\n  return (\n    <motion.div\n      ref={ref}\n      initial={{ opacity: 0, scale: 0.95 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.95 }}\n      transition={springs.snappy}\n      tabIndex={tabIndex}\n    >\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        color={action.color === 'error' ? 'error' : 'accent'}\n        disabled={action.disabled}\n        onClick={action.requiresConfirmation ? () => setConfirming(true) : action.onClick}\n        startIcon={action.icon ? <Icon icon={action.icon} /> : undefined}\n        tabIndex={-1}\n      >\n        {action.label}\n      </Button>\n    </motion.div>\n  )\n})\n\n// ============================================================\n// BulkActionBar\n// ============================================================\n\nfunction BulkActionBar({\n  show,\n  count,\n  onClearSelection,\n  actions,\n  totalCount,\n  onSelectAll,\n  className,\n}: BulkActionBarProps) {\n  const [mounted, setMounted] = React.useState(false)\n  const [focusedIndex, setFocusedIndex] = React.useState(0)\n  const actionRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n  // Reset focused index when actions change\n  React.useEffect(() => {\n    setFocusedIndex(0)\n  }, [actions.length])\n\n  React.useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      onClearSelection()\n      return\n    }\n\n    const count = actions.length\n    if (count === 0) return\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      const next = (focusedIndex + 1) % count\n      setFocusedIndex(next)\n      actionRefs.current[next]?.focus()\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      const prev = (focusedIndex - 1 + count) % count\n      setFocusedIndex(prev)\n      actionRefs.current[prev]?.focus()\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      setFocusedIndex(0)\n      actionRefs.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = count - 1\n      setFocusedIndex(last)\n      actionRefs.current[last]?.focus()\n    }\n  }\n\n  if (!mounted) return null\n\n  return createPortal(\n    <AnimatePresence>\n      {show && (\n        <motion.div\n          initial={{ y: 100, opacity: 0 }}\n          animate={{ y: 0, opacity: 1 }}\n          exit={{ y: 100, opacity: 0 }}\n          transition={springs.snappy}\n          className={cn(\n            'fixed bottom-ds-06 left-1/2 z-sticky -translate-x-1/2',\n            'flex items-center gap-ds-04 rounded-surface border border-surface-border bg-surface-overlay px-ds-05 py-ds-03 shadow-floating',\n            className,\n          )}\n          role=\"toolbar\"\n          aria-label={`${count} items selected`}\n          onKeyDown={handleKeyDown}\n        >\n          <Badge variant=\"solid\" size=\"sm\">\n            {count} selected\n          </Badge>\n\n          {totalCount != null && totalCount > count && onSelectAll && (\n            <Button variant=\"link\" size=\"xs\" onClick={onSelectAll}>\n              Select all {totalCount}\n            </Button>\n          )}\n\n          <div className=\"flex items-center gap-ds-02\">\n            <AnimatePresence mode=\"popLayout\">\n              {actions.map((action, i) => (\n                <ActionButton\n                  key={action.label}\n                  ref={(el: HTMLDivElement | null) => { actionRefs.current[i] = el }}\n                  action={action}\n                  tabIndex={i === focusedIndex ? 0 : -1}\n                />\n              ))}\n            </AnimatePresence>\n          </div>\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={onClearSelection}\n            aria-label=\"Clear selection\"\n          >\n            <Icon icon={IconX} size=\"sm\" />\n          </Button>\n        </motion.div>\n      )}\n    </AnimatePresence>,\n    document.body,\n  )\n}\n\nBulkActionBar.displayName = 'BulkActionBar'\n\nexport { BulkActionBar }\n"],"mappings":"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"}

package/dist/composed/command-palette.js

@@ -103,7 +103,7 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 		children: /* @__PURE__ */ h(c, { children: [/* @__PURE__ */ m(s, { className: "fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), /* @__PURE__ */ h(a, {
 			ref: M,
 			...j,
-			className: n("fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2", "overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-overlay shadow-overlay", "duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2", "data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2", A),
+			className: n("fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2", "overflow-hidden rounded-overlay-lg border border-surface-border-strong bg-surface-overlay shadow-overlay", "duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2", "data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2", A),
 			onKeyDown: le,
 			children: [
 				/* @__PURE__ */ h(l, { children: [/* @__PURE__ */ m(ee, { children: "Command Palette" }), /* @__PURE__ */ m(o, { children: "Search or jump to pages, projects, tasks, and actions" })] }),
@@ -144,7 +144,7 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 							spellCheck: !1
 						}),
 						/* @__PURE__ */ m("kbd", {
-							className: "hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex",
+							className: "hidden shrink-0 select-none rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex",
 							children: "Esc"
 						})
 					]
@@ -203,7 +203,7 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 									t.onSelect(), R(!1);
 								},
 								onMouseEnter: () => H(i),
-								className: n("flex w-full items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard", a ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
+								className: n("flex w-full items-center gap-ds-04 rounded-surface px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard", a ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
 								children: [
 									t.icon && /* @__PURE__ */ m("span", {
 										className: n("[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard", a ? "text-accent-11" : "text-surface-fg-subtle"),
@@ -270,14 +270,14 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 								})
 							})]
 						}) : e.keys === "↵" ? /* @__PURE__ */ m("kbd", {
-							className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd",
+							className: "inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd",
 							children: /* @__PURE__ */ m(r, {
 								icon: v,
 								size: "xs",
 								className: "text-surface-fg-subtle"
 							})
 						}) : /* @__PURE__ */ m("kbd", {
-							className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd",
+							className: "inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd",
 							children: e.keys
 						}), /* @__PURE__ */ m("span", {
 							className: "text-ds-xs text-surface-fg-subtle",

package/dist/composed/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/composed/command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandPalette -- Keyboard-driven command palette (Ctrl+K / Cmd+K).\n *\n * Adapted from Karm V2. Uses ui/Dialog as the overlay.\n * All V1 color tokens replaced with semantic design-system tokens.\n */\nimport { IconArrowDown,IconArrowUp, IconCornerDownLeft, IconSearch } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useMotion } from '../motion/motion-provider'\nimport {\n  Dialog,\n  DialogContentRaw,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Icon } from '../ui/icon'\nimport { springs,tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { VisuallyHidden } from '../ui/visually-hidden'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandItem {\n  id: string\n  /** Display label — string or ReactNode. When ReactNode, provide `filterValue` for search filtering. */\n  label: string | React.ReactNode\n  /** Optional description — string or ReactNode. */\n  description?: string | React.ReactNode\n  icon?: React.ReactNode\n  /** Keyboard shortcut hint displayed as keycap badges (e.g., \"G D\", \"Ctrl+N\"). */\n  shortcut?: string\n  /** Custom render override for the label. Receives the current search query for match highlighting. */\n  renderLabel?: (query: string) => React.ReactNode\n  /** Plain-text value used for search filtering when `label` is a ReactNode. Falls back to `label` if string. */\n  filterValue?: string\n  onSelect: () => void\n}\n\nexport interface CommandGroup {\n  label: string\n  items: CommandItem[]\n}\n\n/** A single keyboard hint shown in the footer. */\nexport interface FooterHint {\n  /** Key(s) to display — rendered as text inside `<kbd>` or as an icon. */\n  keys: string\n  /** Human-readable label for the hint (e.g., \"Navigate\", \"Select\"). */\n  label: string\n}\n\n/**\n * A searchable command palette with keyboard navigation (Ctrl+K / Cmd+K).\n * Supports grouped items, custom keybindings, controlled/uncontrolled open state,\n * and custom empty states.\n */\nexport interface CommandPaletteProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Item groups displayed in the palette. Each group has a label and an array of CommandItems. */\n  groups?: CommandGroup[]\n  /** Placeholder text for the search input. */\n  placeholder?: string\n  /** Called on every search input change with the current query string. */\n  onSearch?: (query: string) => void\n  /** Simple text shown when no results match. Overridden by `emptyState` if provided. */\n  emptyMessage?: string\n  /** Full custom empty state ReactNode — overrides `emptyMessage` when provided. */\n  emptyState?: React.ReactNode\n  // -- Controlled/uncontrolled open state (P1 #4) --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state for uncontrolled usage. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  // -- Keyboard shortcut customization (P1 #6) --\n  /** Keybinding(s) to toggle the palette. Pass `false` to disable.\n   *  String format: modifier+key, e.g., 'mod+k', 'ctrl+shift+p'.\n   *  'mod' maps to Meta on macOS, Ctrl otherwise. */\n  keybinding?: string | string[] | false\n  // -- Configurable max-height (P2 #8) --\n  /** Max height of the results container. CSS value. Default '320px'. */\n  maxHeight?: string | number\n  // -- Custom footer hints (P2 #11) --\n  /** Custom footer keyboard hints. Pass `false` to hide the footer entirely. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nimport { getIsMac, getModifierDisplay,matchesKeybinding } from '../ui/lib/keybinding'\n\n/** Get the text-searchable value from a CommandItem. */\nfunction getFilterValue(item: CommandItem): string {\n  if (item.filterValue) return item.filterValue\n  if (typeof item.label === 'string') return item.label\n  return ''\n}\n\n/** Get the text-searchable description from a CommandItem. */\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n/** Parse a shortcut string like \"G D\" or \"Ctrl+N\" into individual keycap segments. */\nfunction parseShortcutKeys(shortcut: string): string[] {\n  // If it has \"+\" separator (Ctrl+Shift+N style), split on +\n  if (shortcut.includes('+')) {\n    return shortcut.split('+').map(s => s.trim()).filter(Boolean)\n  }\n  // Otherwise split on spaces (G D style)\n  return shortcut.split(/\\s+/).filter(Boolean)\n}\n\n// -----------------------------------------------------------------------\n// CommandPalette\n// -----------------------------------------------------------------------\n\nconst CommandPalette = React.forwardRef<HTMLDivElement, CommandPaletteProps>(\n  function CommandPalette(\n    {\n      groups = [],\n      placeholder = 'Search or jump to...',\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+k',\n      maxHeight = '320px',\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  // -- Controlled/uncontrolled open state --\n  const isControlled = openProp !== undefined\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const open = isControlled ? openProp : internalOpen\n\n  // Use a ref for the current open value to avoid stale closures in setOpen\n  const openRef = React.useRef(open)\n  openRef.current = open\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean | ((prev: boolean) => boolean)) => {\n      const resolved = typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n      if (!isControlled) {\n        setInternalOpen(resolved)\n      }\n      onOpenChange?.(resolved)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const [query, setQuery] = React.useState('')\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const listRef = React.useRef<HTMLDivElement>(null)\n  const instanceId = React.useId()\n  const listboxId = `command-palette-listbox-${instanceId}`\n\n  // -- Reduced motion (P2 #12) --\n  const { reducedMotion: isReduced } = useMotion()\n  const noMotionTransition = { duration: 0 }\n\n  // -- Platform detection (P2 #13) --\n  const isMac = React.useMemo(() => getIsMac(), [])\n\n  // Filter groups based on query\n  const filteredGroups = React.useMemo(() => {\n    if (!query.trim()) return groups\n    const q = query.toLowerCase()\n    return groups\n      .map((group) => ({\n        ...group,\n        items: group.items.filter(\n          (item) =>\n            getFilterValue(item).toLowerCase().includes(q) ||\n            getFilterDescription(item).toLowerCase().includes(q),\n        ),\n      }))\n      .filter((group) => group.items.length > 0)\n  }, [groups, query])\n\n  const filteredItems = React.useMemo(\n    () => filteredGroups.flatMap((g) => g.items),\n    [filteredGroups],\n  )\n\n  // Global keyboard shortcut\n  React.useEffect(() => {\n    if (keybinding === false) return\n\n    const bindings = Array.isArray(keybinding) ? keybinding : [keybinding]\n\n    function handleKeyDown(e: KeyboardEvent) {\n      for (const binding of bindings) {\n        if (matchesKeybinding(e, binding)) {\n          e.preventDefault()\n          setOpen((prev) => !prev)\n          return\n        }\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [keybinding, setOpen])\n\n  // Reset state when opening\n  React.useEffect(() => {\n    if (open) {\n      setQuery('')\n      setActiveIndex(0)\n      requestAnimationFrame(() => {\n        inputRef.current?.focus()\n      })\n    }\n  }, [open])\n\n  // Keyboard navigation inside the palette\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev < filteredItems.length - 1 ? prev + 1 : 0,\n        )\n        break\n      }\n      case 'ArrowUp': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filteredItems.length - 1,\n        )\n        break\n      }\n      case 'Enter': {\n        e.preventDefault()\n        const item = filteredItems[activeIndex]\n        if (item) {\n          item.onSelect()\n          setOpen(false)\n        }\n        break\n      }\n      case 'Escape': {\n        e.preventDefault()\n        setOpen(false)\n        break\n      }\n    }\n  }\n\n  // Scroll active item into view\n  React.useEffect(() => {\n    const activeEl = listRef.current?.querySelector(\n      `[data-command-index=\"${activeIndex}\"]`,\n    )\n    activeEl?.scrollIntoView({ block: 'nearest' })\n  }, [activeIndex])\n\n  const handleQueryChange = (value: string) => {\n    setQuery(value)\n    setActiveIndex(0)\n    onSearch?.(value)\n  }\n\n  // Build a map of item id -> flat index for keyboard navigation\n  const itemIndexMap = React.useMemo(() => {\n    const map = new Map<string, number>()\n    let idx = 0\n    for (const group of filteredGroups) {\n      for (const item of group.items) {\n        map.set(item.id, idx++)\n      }\n    }\n    return map\n  }, [filteredGroups])\n\n  // -- Resolve motion transitions --\n  const springSnappy = isReduced ? noMotionTransition : springs.snappy\n  const tweenFade = isReduced ? noMotionTransition : tweens.fade\n  const noInit = isReduced ? { opacity: 1, scale: 1, y: 0 } : undefined\n\n  // -- Resolve max height CSS value --\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n  // -- Resolve footer hints --\n  const resolvedFooterHints: FooterHint[] | false =\n    footerHints === false\n      ? false\n      : footerHints ?? [\n          { keys: '↑↓', label: 'Navigate' },\n          { keys: '↵', label: 'Select' },\n          { keys: 'Esc', label: 'Close' },\n        ]\n\n  // Handle dialog open change (from Dialog's own close mechanisms)\n  const handleDialogOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    },\n    [setOpen],\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n      <DialogPortal>\n        <DialogOverlay\n          className=\"fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n        />\n        <DialogContentRaw\n          ref={ref}\n          {...props}\n          className={cn(\n            'fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2',\n            'overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-overlay shadow-overlay',\n            'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n            'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n            className,\n          )}\n          onKeyDown={handleKeyDown}\n        >\n          <VisuallyHidden>\n            <DialogTitle>Command Palette</DialogTitle>\n            <DialogDescription>\n              Search or jump to pages, projects, tasks, and actions\n            </DialogDescription>\n          </VisuallyHidden>\n\n          {/* Search input */}\n          <div className=\"flex items-center gap-ds-04 border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <motion.span\n              initial={noInit ?? { opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springSnappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n            </motion.span>\n            <input\n              ref={inputRef}\n              value={query}\n              onChange={(e) => handleQueryChange(e.target.value)}\n              placeholder={placeholder}\n              role=\"combobox\"\n              aria-expanded={true}\n              aria-controls={listboxId}\n              aria-activedescendant={filteredItems[activeIndex] ? `command-item-${instanceId}-${filteredItems[activeIndex].id}` : undefined}\n              aria-autocomplete=\"list\"\n              className={cn(\n                'flex-1 bg-transparent text-ds-base text-surface-fg outline-hidden',\n                'placeholder:text-surface-fg-subtle',\n              )}\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck={false}\n            />\n            <kbd className=\"hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\">\n              Esc\n            </kbd>\n          </div>\n\n          {/* Results */}\n          <div\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            aria-label=\"Command results\"\n            className=\"overflow-y-auto px-ds-03 py-ds-03\"\n            style={{ maxHeight: maxHeightValue }}\n          >\n            {filteredGroups.length === 0 && (\n              <motion.div\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={tweenFade}\n                className=\"flex items-center justify-center py-ds-07\"\n              >\n                {emptyState ?? (\n                  <p className=\"text-ds-md text-surface-fg-subtle\">\n                    {emptyMessage}\n                  </p>\n                )}\n              </motion.div>\n            )}\n\n            {filteredGroups.map((group, groupIdx) => (\n              <motion.div\n                key={group.label}\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={isReduced ? noMotionTransition : { ...tweens.fade, delay: groupIdx * 0.06 }}\n                className=\"mb-ds-02\"\n              >\n                <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                  <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                    {group.label}\n                  </span>\n                </div>\n\n                {group.items.map((item) => {\n                  const itemIndex = itemIndexMap.get(item.id) ?? 0\n                  const isActive = itemIndex === activeIndex\n                  return (\n                    <motion.button\n                      key={item.id}\n                      id={`command-item-${instanceId}-${item.id}`}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      data-command-index={itemIndex}\n                      initial={noInit ?? { opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={isReduced ? noMotionTransition : { ...springs.snappy, delay: itemIndex * 0.03 }}\n                      onClick={() => {\n                        item.onSelect()\n                        setOpen(false)\n                      }}\n                      onMouseEnter={() => setActiveIndex(itemIndex)}\n                      className={cn(\n                        'flex w-full items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard',\n                        isActive\n                          ? 'bg-surface-raised-hover text-surface-fg'\n                          : 'text-surface-fg-muted hover:bg-surface-raised',\n                      )}\n                    >\n                      {item.icon && (\n                        <span\n                          className={cn(\n                            '[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n                            isActive ? 'text-accent-11' : 'text-surface-fg-subtle',\n                          )}\n                          aria-hidden=\"true\"\n                        >\n                          {item.icon}\n                        </span>\n                      )}\n                      <div className=\"flex flex-1 flex-col\">\n                        <span className=\"text-ds-md\">\n                          {item.renderLabel ? item.renderLabel(query) : item.label}\n                        </span>\n                        {item.description && (\n                          <span className=\"text-ds-sm text-surface-fg-subtle\">\n                            {item.description}\n                          </span>\n                        )}\n                      </div>\n                      {item.shortcut && (\n                        <span className=\"flex shrink-0 items-center gap-ds-01\">\n                          {parseShortcutKeys(item.shortcut).map((key, i) => (\n                            <kbd\n                              key={i}\n                              className={cn(\n                                'inline-flex min-w-[20px] items-center justify-center rounded border px-ds-02b py-ds-01 text-ds-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard',\n                                isActive\n                                  ? 'bg-accent-2 text-accent-11 border-accent-6'\n                                  : 'bg-surface-raised text-surface-fg-subtle border-surface-border-strong',\n                              )}\n                            >\n                              {key === 'Ctrl' || key === 'ctrl' ? getModifierDisplay(isMac) : key}\n                            </kbd>\n                          ))}\n                        </span>\n                      )}\n                      <AnimatePresence>\n                        {isActive && (\n                          <motion.span\n                            initial={isReduced ? undefined : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={isReduced ? undefined : { opacity: 0 }}\n                            transition={tweenFade}\n                            className=\"inline-flex shrink-0\"\n                          >\n                            <Icon icon={IconCornerDownLeft} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n                          </motion.span>\n                        )}\n                      </AnimatePresence>\n                    </motion.button>\n                  )\n                })}\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Footer with keyboard hints */}\n          {resolvedFooterHints !== false && (\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03\"\n            >\n              {resolvedFooterHints.map((hint, i) => (\n                <div key={i} className=\"flex items-center gap-ds-02b\">\n                  {hint.keys === '↑↓' ? (\n                    <div className=\"flex items-center gap-ds-01\">\n                      <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowUp} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                      <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                    </div>\n                  ) : hint.keys === '↵' ? (\n                    <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd\">\n                      <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  ) : (\n                    <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd\">\n                      {hint.keys}\n                    </kbd>\n                  )}\n                  <span className=\"text-ds-xs text-surface-fg-subtle\">\n                    {hint.label}\n                  </span>\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </DialogContentRaw>\n      </DialogPortal>\n    </Dialog>\n  )\n  },\n)\n\nCommandPalette.displayName = 'CommandPalette'\n\nexport { CommandPalette }\n"],"mappings":"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"}
+{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/composed/command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandPalette -- Keyboard-driven command palette (Ctrl+K / Cmd+K).\n *\n * Adapted from Karm V2. Uses ui/Dialog as the overlay.\n * All V1 color tokens replaced with semantic design-system tokens.\n */\nimport { IconArrowDown,IconArrowUp, IconCornerDownLeft, IconSearch } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useMotion } from '../motion/motion-provider'\nimport {\n  Dialog,\n  DialogContentRaw,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Icon } from '../ui/icon'\nimport { springs,tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { VisuallyHidden } from '../ui/visually-hidden'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandItem {\n  id: string\n  /** Display label — string or ReactNode. When ReactNode, provide `filterValue` for search filtering. */\n  label: string | React.ReactNode\n  /** Optional description — string or ReactNode. */\n  description?: string | React.ReactNode\n  icon?: React.ReactNode\n  /** Keyboard shortcut hint displayed as keycap badges (e.g., \"G D\", \"Ctrl+N\"). */\n  shortcut?: string\n  /** Custom render override for the label. Receives the current search query for match highlighting. */\n  renderLabel?: (query: string) => React.ReactNode\n  /** Plain-text value used for search filtering when `label` is a ReactNode. Falls back to `label` if string. */\n  filterValue?: string\n  onSelect: () => void\n}\n\nexport interface CommandGroup {\n  label: string\n  items: CommandItem[]\n}\n\n/** A single keyboard hint shown in the footer. */\nexport interface FooterHint {\n  /** Key(s) to display — rendered as text inside `<kbd>` or as an icon. */\n  keys: string\n  /** Human-readable label for the hint (e.g., \"Navigate\", \"Select\"). */\n  label: string\n}\n\n/**\n * A searchable command palette with keyboard navigation (Ctrl+K / Cmd+K).\n * Supports grouped items, custom keybindings, controlled/uncontrolled open state,\n * and custom empty states.\n */\nexport interface CommandPaletteProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Item groups displayed in the palette. Each group has a label and an array of CommandItems. */\n  groups?: CommandGroup[]\n  /** Placeholder text for the search input. */\n  placeholder?: string\n  /** Called on every search input change with the current query string. */\n  onSearch?: (query: string) => void\n  /** Simple text shown when no results match. Overridden by `emptyState` if provided. */\n  emptyMessage?: string\n  /** Full custom empty state ReactNode — overrides `emptyMessage` when provided. */\n  emptyState?: React.ReactNode\n  // -- Controlled/uncontrolled open state (P1 #4) --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state for uncontrolled usage. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  // -- Keyboard shortcut customization (P1 #6) --\n  /** Keybinding(s) to toggle the palette. Pass `false` to disable.\n   *  String format: modifier+key, e.g., 'mod+k', 'ctrl+shift+p'.\n   *  'mod' maps to Meta on macOS, Ctrl otherwise. */\n  keybinding?: string | string[] | false\n  // -- Configurable max-height (P2 #8) --\n  /** Max height of the results container. CSS value. Default '320px'. */\n  maxHeight?: string | number\n  // -- Custom footer hints (P2 #11) --\n  /** Custom footer keyboard hints. Pass `false` to hide the footer entirely. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nimport { getIsMac, getModifierDisplay,matchesKeybinding } from '../ui/lib/keybinding'\n\n/** Get the text-searchable value from a CommandItem. */\nfunction getFilterValue(item: CommandItem): string {\n  if (item.filterValue) return item.filterValue\n  if (typeof item.label === 'string') return item.label\n  return ''\n}\n\n/** Get the text-searchable description from a CommandItem. */\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n/** Parse a shortcut string like \"G D\" or \"Ctrl+N\" into individual keycap segments. */\nfunction parseShortcutKeys(shortcut: string): string[] {\n  // If it has \"+\" separator (Ctrl+Shift+N style), split on +\n  if (shortcut.includes('+')) {\n    return shortcut.split('+').map(s => s.trim()).filter(Boolean)\n  }\n  // Otherwise split on spaces (G D style)\n  return shortcut.split(/\\s+/).filter(Boolean)\n}\n\n// -----------------------------------------------------------------------\n// CommandPalette\n// -----------------------------------------------------------------------\n\nconst CommandPalette = React.forwardRef<HTMLDivElement, CommandPaletteProps>(\n  function CommandPalette(\n    {\n      groups = [],\n      placeholder = 'Search or jump to...',\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+k',\n      maxHeight = '320px',\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  // -- Controlled/uncontrolled open state --\n  const isControlled = openProp !== undefined\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const open = isControlled ? openProp : internalOpen\n\n  // Use a ref for the current open value to avoid stale closures in setOpen\n  const openRef = React.useRef(open)\n  openRef.current = open\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean | ((prev: boolean) => boolean)) => {\n      const resolved = typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n      if (!isControlled) {\n        setInternalOpen(resolved)\n      }\n      onOpenChange?.(resolved)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const [query, setQuery] = React.useState('')\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const listRef = React.useRef<HTMLDivElement>(null)\n  const instanceId = React.useId()\n  const listboxId = `command-palette-listbox-${instanceId}`\n\n  // -- Reduced motion (P2 #12) --\n  const { reducedMotion: isReduced } = useMotion()\n  const noMotionTransition = { duration: 0 }\n\n  // -- Platform detection (P2 #13) --\n  const isMac = React.useMemo(() => getIsMac(), [])\n\n  // Filter groups based on query\n  const filteredGroups = React.useMemo(() => {\n    if (!query.trim()) return groups\n    const q = query.toLowerCase()\n    return groups\n      .map((group) => ({\n        ...group,\n        items: group.items.filter(\n          (item) =>\n            getFilterValue(item).toLowerCase().includes(q) ||\n            getFilterDescription(item).toLowerCase().includes(q),\n        ),\n      }))\n      .filter((group) => group.items.length > 0)\n  }, [groups, query])\n\n  const filteredItems = React.useMemo(\n    () => filteredGroups.flatMap((g) => g.items),\n    [filteredGroups],\n  )\n\n  // Global keyboard shortcut\n  React.useEffect(() => {\n    if (keybinding === false) return\n\n    const bindings = Array.isArray(keybinding) ? keybinding : [keybinding]\n\n    function handleKeyDown(e: KeyboardEvent) {\n      for (const binding of bindings) {\n        if (matchesKeybinding(e, binding)) {\n          e.preventDefault()\n          setOpen((prev) => !prev)\n          return\n        }\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [keybinding, setOpen])\n\n  // Reset state when opening\n  React.useEffect(() => {\n    if (open) {\n      setQuery('')\n      setActiveIndex(0)\n      requestAnimationFrame(() => {\n        inputRef.current?.focus()\n      })\n    }\n  }, [open])\n\n  // Keyboard navigation inside the palette\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev < filteredItems.length - 1 ? prev + 1 : 0,\n        )\n        break\n      }\n      case 'ArrowUp': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filteredItems.length - 1,\n        )\n        break\n      }\n      case 'Enter': {\n        e.preventDefault()\n        const item = filteredItems[activeIndex]\n        if (item) {\n          item.onSelect()\n          setOpen(false)\n        }\n        break\n      }\n      case 'Escape': {\n        e.preventDefault()\n        setOpen(false)\n        break\n      }\n    }\n  }\n\n  // Scroll active item into view\n  React.useEffect(() => {\n    const activeEl = listRef.current?.querySelector(\n      `[data-command-index=\"${activeIndex}\"]`,\n    )\n    activeEl?.scrollIntoView({ block: 'nearest' })\n  }, [activeIndex])\n\n  const handleQueryChange = (value: string) => {\n    setQuery(value)\n    setActiveIndex(0)\n    onSearch?.(value)\n  }\n\n  // Build a map of item id -> flat index for keyboard navigation\n  const itemIndexMap = React.useMemo(() => {\n    const map = new Map<string, number>()\n    let idx = 0\n    for (const group of filteredGroups) {\n      for (const item of group.items) {\n        map.set(item.id, idx++)\n      }\n    }\n    return map\n  }, [filteredGroups])\n\n  // -- Resolve motion transitions --\n  const springSnappy = isReduced ? noMotionTransition : springs.snappy\n  const tweenFade = isReduced ? noMotionTransition : tweens.fade\n  const noInit = isReduced ? { opacity: 1, scale: 1, y: 0 } : undefined\n\n  // -- Resolve max height CSS value --\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n  // -- Resolve footer hints --\n  const resolvedFooterHints: FooterHint[] | false =\n    footerHints === false\n      ? false\n      : footerHints ?? [\n          { keys: '↑↓', label: 'Navigate' },\n          { keys: '↵', label: 'Select' },\n          { keys: 'Esc', label: 'Close' },\n        ]\n\n  // Handle dialog open change (from Dialog's own close mechanisms)\n  const handleDialogOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    },\n    [setOpen],\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n      <DialogPortal>\n        <DialogOverlay\n          className=\"fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n        />\n        <DialogContentRaw\n          ref={ref}\n          {...props}\n          className={cn(\n            'fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2',\n            'overflow-hidden rounded-overlay-lg border border-surface-border-strong bg-surface-overlay shadow-overlay',\n            'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n            'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n            className,\n          )}\n          onKeyDown={handleKeyDown}\n        >\n          <VisuallyHidden>\n            <DialogTitle>Command Palette</DialogTitle>\n            <DialogDescription>\n              Search or jump to pages, projects, tasks, and actions\n            </DialogDescription>\n          </VisuallyHidden>\n\n          {/* Search input */}\n          <div className=\"flex items-center gap-ds-04 border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <motion.span\n              initial={noInit ?? { opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springSnappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n            </motion.span>\n            <input\n              ref={inputRef}\n              value={query}\n              onChange={(e) => handleQueryChange(e.target.value)}\n              placeholder={placeholder}\n              role=\"combobox\"\n              aria-expanded={true}\n              aria-controls={listboxId}\n              aria-activedescendant={filteredItems[activeIndex] ? `command-item-${instanceId}-${filteredItems[activeIndex].id}` : undefined}\n              aria-autocomplete=\"list\"\n              className={cn(\n                'flex-1 bg-transparent text-ds-base text-surface-fg outline-hidden',\n                'placeholder:text-surface-fg-subtle',\n              )}\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck={false}\n            />\n            <kbd className=\"hidden shrink-0 select-none rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\">\n              Esc\n            </kbd>\n          </div>\n\n          {/* Results */}\n          <div\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            aria-label=\"Command results\"\n            className=\"overflow-y-auto px-ds-03 py-ds-03\"\n            style={{ maxHeight: maxHeightValue }}\n          >\n            {filteredGroups.length === 0 && (\n              <motion.div\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={tweenFade}\n                className=\"flex items-center justify-center py-ds-07\"\n              >\n                {emptyState ?? (\n                  <p className=\"text-ds-md text-surface-fg-subtle\">\n                    {emptyMessage}\n                  </p>\n                )}\n              </motion.div>\n            )}\n\n            {filteredGroups.map((group, groupIdx) => (\n              <motion.div\n                key={group.label}\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={isReduced ? noMotionTransition : { ...tweens.fade, delay: groupIdx * 0.06 }}\n                className=\"mb-ds-02\"\n              >\n                <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                  <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                    {group.label}\n                  </span>\n                </div>\n\n                {group.items.map((item) => {\n                  const itemIndex = itemIndexMap.get(item.id) ?? 0\n                  const isActive = itemIndex === activeIndex\n                  return (\n                    <motion.button\n                      key={item.id}\n                      id={`command-item-${instanceId}-${item.id}`}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      data-command-index={itemIndex}\n                      initial={noInit ?? { opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={isReduced ? noMotionTransition : { ...springs.snappy, delay: itemIndex * 0.03 }}\n                      onClick={() => {\n                        item.onSelect()\n                        setOpen(false)\n                      }}\n                      onMouseEnter={() => setActiveIndex(itemIndex)}\n                      className={cn(\n                        'flex w-full items-center gap-ds-04 rounded-surface px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard',\n                        isActive\n                          ? 'bg-surface-raised-hover text-surface-fg'\n                          : 'text-surface-fg-muted hover:bg-surface-raised',\n                      )}\n                    >\n                      {item.icon && (\n                        <span\n                          className={cn(\n                            '[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n                            isActive ? 'text-accent-11' : 'text-surface-fg-subtle',\n                          )}\n                          aria-hidden=\"true\"\n                        >\n                          {item.icon}\n                        </span>\n                      )}\n                      <div className=\"flex flex-1 flex-col\">\n                        <span className=\"text-ds-md\">\n                          {item.renderLabel ? item.renderLabel(query) : item.label}\n                        </span>\n                        {item.description && (\n                          <span className=\"text-ds-sm text-surface-fg-subtle\">\n                            {item.description}\n                          </span>\n                        )}\n                      </div>\n                      {item.shortcut && (\n                        <span className=\"flex shrink-0 items-center gap-ds-01\">\n                          {parseShortcutKeys(item.shortcut).map((key, i) => (\n                            <kbd\n                              key={i}\n                              className={cn(\n                                'inline-flex min-w-[20px] items-center justify-center rounded border px-ds-02b py-ds-01 text-ds-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard',\n                                isActive\n                                  ? 'bg-accent-2 text-accent-11 border-accent-6'\n                                  : 'bg-surface-raised text-surface-fg-subtle border-surface-border-strong',\n                              )}\n                            >\n                              {key === 'Ctrl' || key === 'ctrl' ? getModifierDisplay(isMac) : key}\n                            </kbd>\n                          ))}\n                        </span>\n                      )}\n                      <AnimatePresence>\n                        {isActive && (\n                          <motion.span\n                            initial={isReduced ? undefined : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={isReduced ? undefined : { opacity: 0 }}\n                            transition={tweenFade}\n                            className=\"inline-flex shrink-0\"\n                          >\n                            <Icon icon={IconCornerDownLeft} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n                          </motion.span>\n                        )}\n                      </AnimatePresence>\n                    </motion.button>\n                  )\n                })}\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Footer with keyboard hints */}\n          {resolvedFooterHints !== false && (\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03\"\n            >\n              {resolvedFooterHints.map((hint, i) => (\n                <div key={i} className=\"flex items-center gap-ds-02b\">\n                  {hint.keys === '↑↓' ? (\n                    <div className=\"flex items-center gap-ds-01\">\n                      <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowUp} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                      <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                    </div>\n                  ) : hint.keys === '↵' ? (\n                    <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd\">\n                      <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  ) : (\n                    <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd\">\n                      {hint.keys}\n                    </kbd>\n                  )}\n                  <span className=\"text-ds-xs text-surface-fg-subtle\">\n                    {hint.label}\n                  </span>\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </DialogContentRaw>\n      </DialogPortal>\n    </Dialog>\n  )\n  },\n)\n\nCommandPalette.displayName = 'CommandPalette'\n\nexport { CommandPalette }\n"],"mappings":"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"}

package/dist/composed/content-card.js

@@ -3,7 +3,7 @@ import { cn as t } from "../ui/lib/utils.js";
 import * as n from "react";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/composed/content-card.tsx
-var o = e("rounded-ds-lg will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard", {
+var o = e("rounded-surface will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard", {
 	variants: {
 		variant: {
 			default: "border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover",

package/dist/composed/content-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-card.js","names":[],"sources":["../../src/composed/content-card.tsx"],"sourcesContent":["// @server-safe\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nconst contentCardVariants = cva(\n  'rounded-ds-lg will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover',\n        outline:\n          'border border-surface-border bg-transparent hover:border-surface-border-strong',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised',\n      },\n      padding: {\n        default: 'p-ds-05b',\n        compact: 'p-ds-04',\n        spacious: 'p-ds-06',\n        none: 'p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'default',\n    },\n  },\n)\n\nconst getPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'px-ds-04 py-ds-03'\n    case 'spacious': return 'px-ds-06 py-ds-05'\n    default: return 'px-ds-05b py-ds-04'\n  }\n}\n\nconst getContentPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'p-ds-04'\n    case 'spacious': return 'p-ds-06'\n    default: return 'p-ds-05b'\n  }\n}\n\nexport interface ContentCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof contentCardVariants> {\n  header?: React.ReactNode\n  headerTitle?: string\n  headerActions?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nconst ContentCard = React.forwardRef<HTMLDivElement, ContentCardProps>(\n  (\n    {\n      variant,\n      padding,\n      header,\n      headerTitle,\n      headerActions,\n      footer,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = header || headerTitle || headerActions\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          contentCardVariants({ variant, padding: hasHeader || footer ? 'none' : padding }),\n          className,\n        )}\n        {...props}\n      >\n        {hasHeader && (\n          <div\n            className={cn(\n              'flex items-center justify-between border-b border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {header ?? (\n              <>\n                {headerTitle && (\n                  <h3 className=\"text-ds-base font-semibold text-surface-fg\">\n                    {headerTitle}\n                  </h3>\n                )}\n                {headerActions && (\n                  <div className=\"flex items-center gap-ds-03\">{headerActions}</div>\n                )}\n              </>\n            )}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            (hasHeader || footer) && getContentPadding(padding),\n          )}\n        >\n          {children}\n        </div>\n\n        {footer && (\n          <div\n            className={cn(\n              'border-t border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nContentCard.displayName = 'ContentCard'\n\nexport { ContentCard, contentCardVariants }\n"],"mappings":";;;;;AAMA,IAAM,IAAsB,EAC1B,gJACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;GACH;EACD,SAAS;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,SAAS;EACV;CACF,CACF,EAEK,KAAc,MAAuC;AACzD,SAAQ,GAAR;EACE,KAAK,UAAW,QAAO;EACvB,KAAK,WAAY,QAAO;EACxB,QAAS,QAAO;;GAId,KAAqB,MAAuC;AAChE,SAAQ,GAAR;EACE,KAAK,UAAW,QAAO;EACvB,KAAK,WAAY,QAAO;EACxB,QAAS,QAAO;;GAad,IAAc,EAAM,YAEtB,EACE,YACA,YACA,WACA,gBACA,kBACA,WACA,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,KAAU,KAAe;AAE3C,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAoB;GAAE;GAAS,SAAS,KAAa,IAAS,SAAS;GAAS,CAAC,EACjF,EACD;EACD,GAAI;YANN;GAQG,KACC,kBAAC,OAAD;IACE,WAAW,EACT,2EACA,EAAW,EAAQ,CACpB;cAEA,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA,EAEN,KACC,kBAAC,OAAD;KAAK,WAAU;eAA+B;KAAoB,CAAA,CAEnE,EAAA,CAAA;IAED,CAAA;GAGR,kBAAC,OAAD;IACE,WAAW,GACR,KAAa,MAAW,EAAkB,EAAQ,CACpD;IAEA;IACG,CAAA;GAEL,KACC,kBAAC,OAAD;IACE,WAAW,EACT,yCACA,EAAW,EAAQ,CACpB;cAEA;IACG,CAAA;GAEJ;;EAGX;AACD,EAAY,cAAc"}
+{"version":3,"file":"content-card.js","names":[],"sources":["../../src/composed/content-card.tsx"],"sourcesContent":["// @server-safe\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nconst contentCardVariants = cva(\n  'rounded-surface will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover',\n        outline:\n          'border border-surface-border bg-transparent hover:border-surface-border-strong',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised',\n      },\n      padding: {\n        default: 'p-ds-05b',\n        compact: 'p-ds-04',\n        spacious: 'p-ds-06',\n        none: 'p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'default',\n    },\n  },\n)\n\nconst getPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'px-ds-04 py-ds-03'\n    case 'spacious': return 'px-ds-06 py-ds-05'\n    default: return 'px-ds-05b py-ds-04'\n  }\n}\n\nconst getContentPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'p-ds-04'\n    case 'spacious': return 'p-ds-06'\n    default: return 'p-ds-05b'\n  }\n}\n\nexport interface ContentCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof contentCardVariants> {\n  header?: React.ReactNode\n  headerTitle?: string\n  headerActions?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nconst ContentCard = React.forwardRef<HTMLDivElement, ContentCardProps>(\n  (\n    {\n      variant,\n      padding,\n      header,\n      headerTitle,\n      headerActions,\n      footer,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = header || headerTitle || headerActions\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          contentCardVariants({ variant, padding: hasHeader || footer ? 'none' : padding }),\n          className,\n        )}\n        {...props}\n      >\n        {hasHeader && (\n          <div\n            className={cn(\n              'flex items-center justify-between border-b border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {header ?? (\n              <>\n                {headerTitle && (\n                  <h3 className=\"text-ds-base font-semibold text-surface-fg\">\n                    {headerTitle}\n                  </h3>\n                )}\n                {headerActions && (\n                  <div className=\"flex items-center gap-ds-03\">{headerActions}</div>\n                )}\n              </>\n            )}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            (hasHeader || footer) && getContentPadding(padding),\n          )}\n        >\n          {children}\n        </div>\n\n        {footer && (\n          <div\n            className={cn(\n              'border-t border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nContentCard.displayName = 'ContentCard'\n\nexport { ContentCard, contentCardVariants }\n"],"mappings":";;;;;AAMA,IAAM,IAAsB,EAC1B,kJACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;GACH;EACD,SAAS;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,SAAS;EACV;CACF,CACF,EAEK,KAAc,MAAuC;AACzD,SAAQ,GAAR;EACE,KAAK,UAAW,QAAO;EACvB,KAAK,WAAY,QAAO;EACxB,QAAS,QAAO;;GAId,KAAqB,MAAuC;AAChE,SAAQ,GAAR;EACE,KAAK,UAAW,QAAO;EACvB,KAAK,WAAY,QAAO;EACxB,QAAS,QAAO;;GAad,IAAc,EAAM,YAEtB,EACE,YACA,YACA,WACA,gBACA,kBACA,WACA,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,KAAU,KAAe;AAE3C,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAoB;GAAE;GAAS,SAAS,KAAa,IAAS,SAAS;GAAS,CAAC,EACjF,EACD;EACD,GAAI;YANN;GAQG,KACC,kBAAC,OAAD;IACE,WAAW,EACT,2EACA,EAAW,EAAQ,CACpB;cAEA,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA,EAEN,KACC,kBAAC,OAAD;KAAK,WAAU;eAA+B;KAAoB,CAAA,CAEnE,EAAA,CAAA;IAED,CAAA;GAGR,kBAAC,OAAD;IACE,WAAW,GACR,KAAa,MAAW,EAAkB,EAAQ,CACpD;IAEA;IACG,CAAA;GAEL,KACC,kBAAC,OAAD;IACE,WAAW,EACT,yCACA,EAAW,EAAQ,CACpB;cAEA;IACG,CAAA;GAEJ;;EAGX;AACD,EAAY,cAAc"}

package/dist/composed/emoji-picker.js

@@ -36,8 +36,8 @@ function m({ onSelect: n, set: r = "native", theme: i = "auto", previewPosition:
 			className: h,
 			children: /* @__PURE__ */ s(o.Suspense, {
 				fallback: /* @__PURE__ */ s("div", {
-					className: t("rounded-ds-lg", h),
-					children: /* @__PURE__ */ s(a, { className: "h-[435px] w-[352px] rounded-ds-lg" })
+					className: t("rounded-surface", h),
+					children: /* @__PURE__ */ s(a, { className: "h-[435px] w-[352px] rounded-surface" })
 				}),
 				children: /* @__PURE__ */ s(d, {
 					data: v,
@@ -53,8 +53,8 @@ function m({ onSelect: n, set: r = "native", theme: i = "auto", previewPosition:
 			animate: { opacity: 1 },
 			exit: { opacity: 0 },
 			transition: e.snappy,
-			className: t("rounded-ds-lg", h),
-			children: /* @__PURE__ */ s(a, { className: "h-[435px] w-[352px] rounded-ds-lg" })
+			className: t("rounded-surface", h),
+			children: /* @__PURE__ */ s(a, { className: "h-[435px] w-[352px] rounded-surface" })
 		}, "skeleton")
 	});
 }

package/dist/composed/emoji-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-picker.js","names":[],"sources":["../../src/composed/emoji-picker.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Skeleton } from '../ui/skeleton'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface EmojiData {\n  id: string\n  native: string\n  shortcodes?: string\n}\n\nexport type EmojiSet = 'native' | 'apple' | 'google' | 'twitter' | 'facebook'\n\nexport interface EmojiPickerProps {\n  onSelect: (emoji: EmojiData) => void\n  /** Emoji art style. Set once — dynamic switching is not supported (emoji-mart limitation). @default 'native' */\n  set?: EmojiSet\n  /** @default 'auto' */\n  theme?: 'auto' | 'light' | 'dark'\n  /** @default 'none' */\n  previewPosition?: 'top' | 'bottom' | 'none'\n  /** @default 'search' */\n  skinTonePosition?: 'search' | 'preview' | 'none'\n  className?: string\n}\n\nexport interface EmojiPickerPopoverProps extends EmojiPickerProps {\n  children: React.ReactNode\n  /** @default 'start' */\n  align?: 'start' | 'center' | 'end'\n}\n\n// ============================================================\n// Lazy-loaded picker\n// ============================================================\n\nconst LazyPicker = React.lazy(() =>\n  import('@emoji-mart/react').then((mod) => ({\n    default: mod.default,\n  })),\n)\n\n// emoji-mart caches data in a module-level singleton that is set once and never\n// replaced.  Each set (apple, google, etc.) needs its own data file with\n// spritesheet x/y coordinates.  The `set` prop should be treated as immutable\n// configuration — dynamic switching within a single page is NOT supported.\nexport const emojiDataLoaders: Record<string, () => Promise<{ default: unknown }>> = {\n  native: () => import('@emoji-mart/data'),\n  apple: () => import('@emoji-mart/data/sets/15/apple.json'),\n  google: () => import('@emoji-mart/data/sets/15/google.json'),\n  twitter: () => import('@emoji-mart/data/sets/15/twitter.json'),\n  facebook: () => import('@emoji-mart/data/sets/15/facebook.json'),\n}\n\nfunction resolveTheme(theme: 'auto' | 'light' | 'dark'): 'light' | 'dark' {\n  if (theme !== 'auto') return theme\n  if (typeof document === 'undefined') return 'light'\n  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'\n}\n\n// ============================================================\n// EmojiPicker\n// ============================================================\n\nfunction EmojiPicker({\n  onSelect,\n  set = 'native',\n  theme = 'auto',\n  previewPosition = 'none',\n  skinTonePosition = 'search',\n  className,\n}: EmojiPickerProps) {\n  const [mounted, setMounted] = React.useState(false)\n  const [data, setData] = React.useState<unknown>(null)\n\n  React.useEffect(() => {\n    setMounted(true)\n    const loader = emojiDataLoaders[set] ?? emojiDataLoaders.native\n    loader().then((mod) => setData(mod.default))\n  }, [set])\n\n  const isReady = mounted && !!data\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {!isReady ? (\n        <motion.div\n          key=\"skeleton\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={springs.snappy}\n          className={cn('rounded-ds-lg', className)}\n        >\n          <Skeleton className=\"h-[435px] w-[352px] rounded-ds-lg\" />\n        </motion.div>\n      ) : (\n        <motion.div\n          key=\"picker\"\n          initial={{ opacity: 0, scale: 0.95 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={springs.snappy}\n          className={className}\n        >\n          <React.Suspense\n            fallback={\n              <div className={cn('rounded-ds-lg', className)}>\n                <Skeleton className=\"h-[435px] w-[352px] rounded-ds-lg\" />\n              </div>\n            }\n          >\n            <LazyPicker\n              data={data}\n              set={set}\n              onEmojiSelect={onSelect}\n              theme={resolveTheme(theme)}\n              previewPosition={previewPosition}\n              skinTonePosition={skinTonePosition}\n            />\n          </React.Suspense>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ============================================================\n// EmojiPickerPopover\n// ============================================================\n\nfunction EmojiPickerPopover({\n  children,\n  align = 'start',\n  onSelect,\n  set,\n  theme,\n  previewPosition,\n  skinTonePosition,\n  className,\n}: EmojiPickerPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n\n  const handleSelect = (emoji: EmojiData) => {\n    onSelect(emoji)\n    setOpen(false)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        align={align}\n        className=\"w-auto border-none bg-transparent p-0 shadow-none\"\n        sideOffset={8}\n      >\n        <EmojiPicker\n          onSelect={handleSelect}\n          set={set}\n          theme={theme}\n          previewPosition={previewPosition}\n          skinTonePosition={skinTonePosition}\n          className={className}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nEmojiPicker.displayName = 'EmojiPicker'\nEmojiPickerPopover.displayName = 'EmojiPickerPopover'\n\nexport { EmojiPicker, EmojiPickerPopover }\n"],"mappings":";;;;;;;;;AAiDA,IAAM,IAAa,EAAM,WACvB,OAAO,qBAAqB,MAAM,OAAS,EACzC,SAAS,EAAI,SACd,EAAE,CACJ,EAMY,IAAwE;CACnF,cAAc,OAAO;CACrB,aAAa,OAAO;CACpB,cAAc,OAAO;CACrB,eAAe,OAAO;CACtB,gBAAgB,OAAO;CACxB;AAED,SAAS,EAAa,GAAoD;AAGxE,QAFI,MAAU,SACV,OAAO,WAAa,MAAoB,UACrC,SAAS,gBAAgB,UAAU,SAAS,OAAO,GAAG,SAAS,UAFzC;;AAS/B,SAAS,EAAY,EACnB,aACA,SAAM,UACN,WAAQ,QACR,qBAAkB,QAClB,sBAAmB,UACnB,gBACmB;CACnB,IAAM,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM,EAC7C,CAAC,GAAM,KAAW,EAAM,SAAkB,KAAK;AAUrD,QARA,EAAM,gBAAgB;AAGpB,EAFA,EAAW,GAAK,GACD,EAAiB,MAAQ,EAAiB,SACjD,CAAC,MAAM,MAAQ,EAAQ,EAAI,QAAQ,CAAC;IAC3C,CAAC,EAAI,CAAC,EAKP,kBAAC,GAAD;EAAiB,MAAK;YAHR,KAAa,IAgBvB,kBAAC,EAAO,KAAR;GAEE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,YAAY,EAAQ;GACT;aAEX,kBAAC,EAAM,UAAP;IACE,UACE,kBAAC,OAAD;KAAK,WAAW,EAAG,iBAAiB,EAAU;eAC5C,kBAAC,GAAD,EAAU,WAAU,qCAAsC,CAAA;KACtD,CAAA;cAGR,kBAAC,GAAD;KACQ;KACD;KACL,eAAe;KACf,OAAO,EAAa,EAAM;KACT;KACC;KAClB,CAAA;IACa,CAAA;GACN,EAtBP,SAsBO,GAlCb,kBAAC,EAAO,KAAR;GAEE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAQ;GACpB,WAAW,EAAG,iBAAiB,EAAU;aAEzC,kBAAC,GAAD,EAAU,WAAU,qCAAsC,CAAA;GAC/C,EARP,WAQO;EA2BC,CAAA;;AAQtB,SAAS,EAAmB,EAC1B,aACA,WAAQ,SACR,aACA,QACA,UACA,oBACA,qBACA,gBAC0B;CAC1B,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM;AAO7C,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;GAAS;GAA0B,CAAA,EACnD,kBAAC,GAAD;GACS;GACP,WAAU;GACV,YAAY;aAEZ,kBAAC,GAAD;IACE,WAdc,MAAqB;AAEzC,KADA,EAAS,EAAM,EACf,EAAQ,GAAM;;IAaH;IACE;IACU;IACC;IACP;IACX,CAAA;GACa,CAAA,CACT;;;AAId,EAAY,cAAc,eAC1B,EAAmB,cAAc"}
+{"version":3,"file":"emoji-picker.js","names":[],"sources":["../../src/composed/emoji-picker.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Skeleton } from '../ui/skeleton'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface EmojiData {\n  id: string\n  native: string\n  shortcodes?: string\n}\n\nexport type EmojiSet = 'native' | 'apple' | 'google' | 'twitter' | 'facebook'\n\nexport interface EmojiPickerProps {\n  onSelect: (emoji: EmojiData) => void\n  /** Emoji art style. Set once — dynamic switching is not supported (emoji-mart limitation). @default 'native' */\n  set?: EmojiSet\n  /** @default 'auto' */\n  theme?: 'auto' | 'light' | 'dark'\n  /** @default 'none' */\n  previewPosition?: 'top' | 'bottom' | 'none'\n  /** @default 'search' */\n  skinTonePosition?: 'search' | 'preview' | 'none'\n  className?: string\n}\n\nexport interface EmojiPickerPopoverProps extends EmojiPickerProps {\n  children: React.ReactNode\n  /** @default 'start' */\n  align?: 'start' | 'center' | 'end'\n}\n\n// ============================================================\n// Lazy-loaded picker\n// ============================================================\n\nconst LazyPicker = React.lazy(() =>\n  import('@emoji-mart/react').then((mod) => ({\n    default: mod.default,\n  })),\n)\n\n// emoji-mart caches data in a module-level singleton that is set once and never\n// replaced.  Each set (apple, google, etc.) needs its own data file with\n// spritesheet x/y coordinates.  The `set` prop should be treated as immutable\n// configuration — dynamic switching within a single page is NOT supported.\nexport const emojiDataLoaders: Record<string, () => Promise<{ default: unknown }>> = {\n  native: () => import('@emoji-mart/data'),\n  apple: () => import('@emoji-mart/data/sets/15/apple.json'),\n  google: () => import('@emoji-mart/data/sets/15/google.json'),\n  twitter: () => import('@emoji-mart/data/sets/15/twitter.json'),\n  facebook: () => import('@emoji-mart/data/sets/15/facebook.json'),\n}\n\nfunction resolveTheme(theme: 'auto' | 'light' | 'dark'): 'light' | 'dark' {\n  if (theme !== 'auto') return theme\n  if (typeof document === 'undefined') return 'light'\n  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'\n}\n\n// ============================================================\n// EmojiPicker\n// ============================================================\n\nfunction EmojiPicker({\n  onSelect,\n  set = 'native',\n  theme = 'auto',\n  previewPosition = 'none',\n  skinTonePosition = 'search',\n  className,\n}: EmojiPickerProps) {\n  const [mounted, setMounted] = React.useState(false)\n  const [data, setData] = React.useState<unknown>(null)\n\n  React.useEffect(() => {\n    setMounted(true)\n    const loader = emojiDataLoaders[set] ?? emojiDataLoaders.native\n    loader().then((mod) => setData(mod.default))\n  }, [set])\n\n  const isReady = mounted && !!data\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {!isReady ? (\n        <motion.div\n          key=\"skeleton\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={springs.snappy}\n          className={cn('rounded-surface', className)}\n        >\n          <Skeleton className=\"h-[435px] w-[352px] rounded-surface\" />\n        </motion.div>\n      ) : (\n        <motion.div\n          key=\"picker\"\n          initial={{ opacity: 0, scale: 0.95 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={springs.snappy}\n          className={className}\n        >\n          <React.Suspense\n            fallback={\n              <div className={cn('rounded-surface', className)}>\n                <Skeleton className=\"h-[435px] w-[352px] rounded-surface\" />\n              </div>\n            }\n          >\n            <LazyPicker\n              data={data}\n              set={set}\n              onEmojiSelect={onSelect}\n              theme={resolveTheme(theme)}\n              previewPosition={previewPosition}\n              skinTonePosition={skinTonePosition}\n            />\n          </React.Suspense>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ============================================================\n// EmojiPickerPopover\n// ============================================================\n\nfunction EmojiPickerPopover({\n  children,\n  align = 'start',\n  onSelect,\n  set,\n  theme,\n  previewPosition,\n  skinTonePosition,\n  className,\n}: EmojiPickerPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n\n  const handleSelect = (emoji: EmojiData) => {\n    onSelect(emoji)\n    setOpen(false)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        align={align}\n        className=\"w-auto border-none bg-transparent p-0 shadow-none\"\n        sideOffset={8}\n      >\n        <EmojiPicker\n          onSelect={handleSelect}\n          set={set}\n          theme={theme}\n          previewPosition={previewPosition}\n          skinTonePosition={skinTonePosition}\n          className={className}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nEmojiPicker.displayName = 'EmojiPicker'\nEmojiPickerPopover.displayName = 'EmojiPickerPopover'\n\nexport { EmojiPicker, EmojiPickerPopover }\n"],"mappings":";;;;;;;;;AAiDA,IAAM,IAAa,EAAM,WACvB,OAAO,qBAAqB,MAAM,OAAS,EACzC,SAAS,EAAI,SACd,EAAE,CACJ,EAMY,IAAwE;CACnF,cAAc,OAAO;CACrB,aAAa,OAAO;CACpB,cAAc,OAAO;CACrB,eAAe,OAAO;CACtB,gBAAgB,OAAO;CACxB;AAED,SAAS,EAAa,GAAoD;AAGxE,QAFI,MAAU,SACV,OAAO,WAAa,MAAoB,UACrC,SAAS,gBAAgB,UAAU,SAAS,OAAO,GAAG,SAAS,UAFzC;;AAS/B,SAAS,EAAY,EACnB,aACA,SAAM,UACN,WAAQ,QACR,qBAAkB,QAClB,sBAAmB,UACnB,gBACmB;CACnB,IAAM,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM,EAC7C,CAAC,GAAM,KAAW,EAAM,SAAkB,KAAK;AAUrD,QARA,EAAM,gBAAgB;AAGpB,EAFA,EAAW,GAAK,GACD,EAAiB,MAAQ,EAAiB,SACjD,CAAC,MAAM,MAAQ,EAAQ,EAAI,QAAQ,CAAC;IAC3C,CAAC,EAAI,CAAC,EAKP,kBAAC,GAAD;EAAiB,MAAK;YAHR,KAAa,IAgBvB,kBAAC,EAAO,KAAR;GAEE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,YAAY,EAAQ;GACT;aAEX,kBAAC,EAAM,UAAP;IACE,UACE,kBAAC,OAAD;KAAK,WAAW,EAAG,mBAAmB,EAAU;eAC9C,kBAAC,GAAD,EAAU,WAAU,uCAAwC,CAAA;KACxD,CAAA;cAGR,kBAAC,GAAD;KACQ;KACD;KACL,eAAe;KACf,OAAO,EAAa,EAAM;KACT;KACC;KAClB,CAAA;IACa,CAAA;GACN,EAtBP,SAsBO,GAlCb,kBAAC,EAAO,KAAR;GAEE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAQ;GACpB,WAAW,EAAG,mBAAmB,EAAU;aAE3C,kBAAC,GAAD,EAAU,WAAU,uCAAwC,CAAA;GACjD,EARP,WAQO;EA2BC,CAAA;;AAQtB,SAAS,EAAmB,EAC1B,aACA,WAAQ,SACR,aACA,QACA,UACA,oBACA,qBACA,gBAC0B;CAC1B,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM;AAO7C,QACE,kBAAC,GAAD;EAAe;EAAM,cAAc;YAAnC,CACE,kBAAC,GAAD;GAAgB,SAAA;GAAS;GAA0B,CAAA,EACnD,kBAAC,GAAD;GACS;GACP,WAAU;GACV,YAAY;aAEZ,kBAAC,GAAD;IACE,WAdc,MAAqB;AAEzC,KADA,EAAS,EAAM,EACf,EAAQ,GAAM;;IAaH;IACE;IACU;IACC;IACP;IACX,CAAA;GACa,CAAA,CACT;;;AAId,EAAY,cAAc,eAC1B,EAAmB,cAAc"}

package/dist/composed/empty-state.js

@@ -24,7 +24,7 @@ var s = ({ className: e }) => /* @__PURE__ */ r("svg", {
 		...h,
 		children: [
 			/* @__PURE__ */ r(a.div, {
-				className: t("flex items-center justify-center rounded-ds-xl bg-surface-raised", f ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg", !y && c != null && v),
+				className: t("flex items-center justify-center rounded-overlay-lg bg-surface-raised", f ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg", !y && c != null && v),
 				animate: _ ? {} : { y: [
 					0,
 					-4,

package/dist/composed/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/composed/empty-state.tsx"],"sourcesContent":["'use client'\n\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode | React.ComponentType<{ className?: string }>\n  title: string\n  description?: string\n  action?: React.ReactNode\n  compact?: boolean\n  /** Icon size. Defaults to 'sm' when compact, 'md' otherwise. */\n  iconSize?: 'sm' | 'md' | 'lg'\n}\n\nconst DevalokChakraIcon = ({ className }: { className?: string }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    fill=\"currentColor\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <path d=\"M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z\" />\n  </svg>\n)\n\nconst EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      icon,\n      title,\n      description,\n      action,\n      compact = false,\n      iconSize,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const reducedMotion = useReducedMotion()\n    const resolvedIconSize = iconSize ?? (compact ? 'sm' : 'md')\n    const iconSizeMap = {\n      sm: 'h-ico-sm w-ico-sm',\n      md: 'h-ico-lg w-ico-lg',\n      lg: 'h-ico-xl w-ico-xl',\n    } as const\n    const iconSizeClass = iconSizeMap[resolvedIconSize]\n    const isComponentType =\n      icon != null && !React.isValidElement(icon) && (typeof icon === 'function' || (typeof icon === 'object' && '$$typeof' in (icon as object)))\n    const resolvedIcon = icon\n      ? isComponentType\n        ? React.createElement(icon as React.ComponentType<{ className?: string }>, {\n            className: cn('text-surface-fg-subtle', iconSizeClass),\n          })\n        : icon\n      : (\n        <DevalokChakraIcon\n          className={cn('text-surface-fg-subtle', iconSizeClass)}\n        />\n      )\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col items-center justify-center text-center',\n          compact ? 'gap-ds-04 py-ds-07' : 'gap-ds-05 py-ds-10',\n          className,\n        )}\n        {...props}\n      >\n        <motion.div\n          className={cn(\n            'flex items-center justify-center rounded-ds-xl bg-surface-raised',\n            compact ? 'h-ds-md w-ds-md' : 'h-ds-lg w-ds-lg',\n            !isComponentType && icon != null && iconSizeClass,\n          )}\n          animate={reducedMotion ? {} : { y: [0, -4, 0] }}\n          transition={reducedMotion ? {} : { repeat: Infinity, duration: 3, ease: 'easeInOut' }}\n        >\n          {resolvedIcon}\n        </motion.div>\n\n        <motion.div\n          className=\"flex max-w-[280px] flex-col gap-ds-02\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ delay: 0.2, ...tweens.fade }}\n        >\n          <h3\n            className={cn(\n              'text-surface-fg',\n              compact ? 'text-ds-md font-semibold' : 'text-ds-base font-semibold',\n            )}\n          >\n            {title}\n          </h3>\n          {description && (\n            <p\n              className={cn(\n                'text-surface-fg-subtle',\n                compact ? 'text-ds-sm' : 'text-ds-md',\n              )}\n            >\n              {description}\n            </p>\n          )}\n        </motion.div>\n\n        {action && <div className=\"mt-ds-02\">{action}</div>}\n      </div>\n    )\n  },\n)\nEmptyState.displayName = 'EmptyState'\n\nexport { EmptyState }\n"],"mappings":";;;;;;;AAkBA,IAAM,KAAqB,EAAE,mBAC3B,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACM;CACX,eAAY;WAEZ,kBAAC,QAAD,EAAM,GAAE,iuBAAkuB,CAAA;CACtuB,CAAA,EAGF,IAAa,EAAM,YAErB,EACE,SACA,UACA,gBACA,WACA,aAAU,IACV,aACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAgB,GAAkB,EAOlC,IALc;EAClB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CALwB,MAAa,IAAU,OAAO,QAOjD,IACJ,KAAQ,QAAQ,CAAC,EAAM,eAAe,EAAK,KAAK,OAAO,KAAS,cAAe,OAAO,KAAS,YAAY,cAAe,IACtH,IAAe,IACjB,IACE,EAAM,cAAc,GAAqD,EACvE,WAAW,EAAG,0BAA0B,EAAc,EACvD,CAAC,GACF,IAEF,kBAAC,GAAD,EACE,WAAW,EAAG,0BAA0B,EAAc,EACtD,CAAA;AAGN,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,yDACA,IAAU,uBAAuB,sBACjC,EACD;EACD,GAAI;YAPN;GASE,kBAAC,EAAO,KAAR;IACE,WAAW,EACT,oEACA,IAAU,oBAAoB,mBAC9B,CAAC,KAAmB,KAAQ,QAAQ,EACrC;IACD,SAAS,IAAgB,EAAE,GAAG,EAAE,GAAG;KAAC;KAAG;KAAI;KAAE,EAAE;IAC/C,YAAY,IAAgB,EAAE,GAAG;KAAE,QAAQ;KAAU,UAAU;KAAG,MAAM;KAAa;cAEpF;IACU,CAAA;GAEb,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY;KAAE,OAAO;KAAK,GAAG,EAAO;KAAM;cAJ5C,CAME,kBAAC,MAAD;KACE,WAAW,EACT,mBACA,IAAU,6BAA6B,6BACxC;eAEA;KACE,CAAA,EACJ,KACC,kBAAC,KAAD;KACE,WAAW,EACT,0BACA,IAAU,eAAe,aAC1B;eAEA;KACC,CAAA,CAEK;;GAEZ,KAAU,kBAAC,OAAD;IAAK,WAAU;cAAY;IAAa,CAAA;GAC/C;;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/composed/empty-state.tsx"],"sourcesContent":["'use client'\n\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode | React.ComponentType<{ className?: string }>\n  title: string\n  description?: string\n  action?: React.ReactNode\n  compact?: boolean\n  /** Icon size. Defaults to 'sm' when compact, 'md' otherwise. */\n  iconSize?: 'sm' | 'md' | 'lg'\n}\n\nconst DevalokChakraIcon = ({ className }: { className?: string }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    fill=\"currentColor\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <path d=\"M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z\" />\n  </svg>\n)\n\nconst EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      icon,\n      title,\n      description,\n      action,\n      compact = false,\n      iconSize,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const reducedMotion = useReducedMotion()\n    const resolvedIconSize = iconSize ?? (compact ? 'sm' : 'md')\n    const iconSizeMap = {\n      sm: 'h-ico-sm w-ico-sm',\n      md: 'h-ico-lg w-ico-lg',\n      lg: 'h-ico-xl w-ico-xl',\n    } as const\n    const iconSizeClass = iconSizeMap[resolvedIconSize]\n    const isComponentType =\n      icon != null && !React.isValidElement(icon) && (typeof icon === 'function' || (typeof icon === 'object' && '$$typeof' in (icon as object)))\n    const resolvedIcon = icon\n      ? isComponentType\n        ? React.createElement(icon as React.ComponentType<{ className?: string }>, {\n            className: cn('text-surface-fg-subtle', iconSizeClass),\n          })\n        : icon\n      : (\n        <DevalokChakraIcon\n          className={cn('text-surface-fg-subtle', iconSizeClass)}\n        />\n      )\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col items-center justify-center text-center',\n          compact ? 'gap-ds-04 py-ds-07' : 'gap-ds-05 py-ds-10',\n          className,\n        )}\n        {...props}\n      >\n        <motion.div\n          className={cn(\n            'flex items-center justify-center rounded-overlay-lg bg-surface-raised',\n            compact ? 'h-ds-md w-ds-md' : 'h-ds-lg w-ds-lg',\n            !isComponentType && icon != null && iconSizeClass,\n          )}\n          animate={reducedMotion ? {} : { y: [0, -4, 0] }}\n          transition={reducedMotion ? {} : { repeat: Infinity, duration: 3, ease: 'easeInOut' }}\n        >\n          {resolvedIcon}\n        </motion.div>\n\n        <motion.div\n          className=\"flex max-w-[280px] flex-col gap-ds-02\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ delay: 0.2, ...tweens.fade }}\n        >\n          <h3\n            className={cn(\n              'text-surface-fg',\n              compact ? 'text-ds-md font-semibold' : 'text-ds-base font-semibold',\n            )}\n          >\n            {title}\n          </h3>\n          {description && (\n            <p\n              className={cn(\n                'text-surface-fg-subtle',\n                compact ? 'text-ds-sm' : 'text-ds-md',\n              )}\n            >\n              {description}\n            </p>\n          )}\n        </motion.div>\n\n        {action && <div className=\"mt-ds-02\">{action}</div>}\n      </div>\n    )\n  },\n)\nEmptyState.displayName = 'EmptyState'\n\nexport { EmptyState }\n"],"mappings":";;;;;;;AAkBA,IAAM,KAAqB,EAAE,mBAC3B,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACM;CACX,eAAY;WAEZ,kBAAC,QAAD,EAAM,GAAE,iuBAAkuB,CAAA;CACtuB,CAAA,EAGF,IAAa,EAAM,YAErB,EACE,SACA,UACA,gBACA,WACA,aAAU,IACV,aACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAgB,GAAkB,EAOlC,IALc;EAClB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CALwB,MAAa,IAAU,OAAO,QAOjD,IACJ,KAAQ,QAAQ,CAAC,EAAM,eAAe,EAAK,KAAK,OAAO,KAAS,cAAe,OAAO,KAAS,YAAY,cAAe,IACtH,IAAe,IACjB,IACE,EAAM,cAAc,GAAqD,EACvE,WAAW,EAAG,0BAA0B,EAAc,EACvD,CAAC,GACF,IAEF,kBAAC,GAAD,EACE,WAAW,EAAG,0BAA0B,EAAc,EACtD,CAAA;AAGN,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,yDACA,IAAU,uBAAuB,sBACjC,EACD;EACD,GAAI;YAPN;GASE,kBAAC,EAAO,KAAR;IACE,WAAW,EACT,yEACA,IAAU,oBAAoB,mBAC9B,CAAC,KAAmB,KAAQ,QAAQ,EACrC;IACD,SAAS,IAAgB,EAAE,GAAG,EAAE,GAAG;KAAC;KAAG;KAAI;KAAE,EAAE;IAC/C,YAAY,IAAgB,EAAE,GAAG;KAAE,QAAQ;KAAU,UAAU;KAAG,MAAM;KAAa;cAEpF;IACU,CAAA;GAEb,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY;KAAE,OAAO;KAAK,GAAG,EAAO;KAAM;cAJ5C,CAME,kBAAC,MAAD;KACE,WAAW,EACT,mBACA,IAAU,6BAA6B,6BACxC;eAEA;KACE,CAAA,EACJ,KACC,kBAAC,KAAD;KACE,WAAW,EACT,0BACA,IAAU,eAAe,aAC1B;eAEA;KACC,CAAA,CAEK;;GAEZ,KAAU,kBAAC,OAAD;IAAK,WAAU;cAAY;IAAa,CAAA;GAC/C;;EAGX;AACD,EAAW,cAAc"}

package/dist/composed/error-boundary.js

@@ -60,10 +60,10 @@ var m = r.forwardRef(function({ error: r, onReset: o, className: s, ...c }, l) {
 		...c,
 		className: e("flex min-h-[60vh] items-center justify-center p-ds-05", s),
 		children: /* @__PURE__ */ a("div", {
-			className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-07 text-center shadow-raised",
+			className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-07 text-center shadow-raised",
 			children: [
 				/* @__PURE__ */ i("div", {
-					className: e("flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-2xl", v.bgClass),
+					className: e("flex h-ds-lg w-ds-lg items-center justify-center rounded-bubble", v.bgClass),
 					children: /* @__PURE__ */ i(t, {
 						icon: y,
 						size: "2xl",
@@ -97,7 +97,7 @@ var m = r.forwardRef(function({ error: r, onReset: o, className: s, ...c }, l) {
 					})
 				}),
 				_ && g && /* @__PURE__ */ a("div", {
-					className: "w-full overflow-auto rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05 text-left",
+					className: "w-full overflow-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 text-left",
 					children: [/* @__PURE__ */ i("p", {
 						className: "text-ds-sm mb-ds-03 font-semibold text-surface-fg",
 						children: "Stack Trace (development only)"

package/dist/composed/error-boundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.js","names":[],"sources":["../../src/composed/error-boundary.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertTriangle, IconBan, IconFileUnknown, IconServerOff } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\ndeclare const process: { env: { NODE_ENV?: string } } | undefined\n\nexport interface ErrorDisplayProps extends React.ComponentPropsWithoutRef<'div'> {\n  error: unknown\n  onReset?: () => void\n}\n\nfunction getStatusFromError(error: unknown): number | undefined {\n  if (\n    error &&\n    typeof error === 'object' &&\n    'status' in error &&\n    typeof (error as Record<string, unknown>).status === 'number'\n  ) {\n    return (error as Record<string, unknown>).status as number\n  }\n  return undefined\n}\n\nfunction getMessageFromError(error: unknown): string | undefined {\n  if (error instanceof Error) {\n    return error.message\n  }\n  if (\n    error &&\n    typeof error === 'object' &&\n    'data' in error\n  ) {\n    const data = (error as Record<string, unknown>).data\n    if (typeof data === 'string') return data\n    if (data && typeof data === 'object' && 'message' in data) {\n      return String((data as Record<string, unknown>).message)\n    }\n  }\n  if (typeof error === 'string') {\n    return error\n  }\n  return undefined\n}\n\nfunction getStackFromError(error: unknown): string | undefined {\n  if (error instanceof Error) {\n    return error.stack\n  }\n  return undefined\n}\n\nfunction getErrorConfig(status?: number) {\n  switch (status) {\n    case 404:\n      return {\n        icon: IconFileUnknown,\n        title: 'Page not found',\n        message:\n          'The page you are looking for does not exist or has been moved.',\n        bgClass: 'bg-accent-2',\n        iconClass: 'text-accent-11',\n      }\n    case 403:\n      return {\n        icon: IconBan,\n        title: 'Access denied',\n        message:\n          'You do not have permission to view this page. Contact your administrator if you believe this is a mistake.',\n        bgClass: 'bg-warning-3',\n        iconClass: 'text-warning-11',\n      }\n    case 500:\n      return {\n        icon: IconServerOff,\n        title: 'Server error',\n        message:\n          'Something went wrong on our end. Please try again later or contact support if the issue persists.',\n        bgClass: 'bg-error-3',\n        iconClass: 'text-error-11',\n      }\n    default:\n      return {\n        icon: IconAlertTriangle,\n        title: 'Something went wrong',\n        message:\n          'An unexpected error occurred. Please try again or go back to the home page.',\n        bgClass: 'bg-accent-2',\n        iconClass: 'text-accent-11',\n      }\n  }\n}\n\nconst ErrorDisplay = React.forwardRef<HTMLDivElement, ErrorDisplayProps>(\n  function ErrorDisplay({ error, onReset, className, ...props }, ref) {\n  const status = getStatusFromError(error)\n  const message = getMessageFromError(error)\n  const stack = getStackFromError(error)\n  const isDev =\n    typeof process !== 'undefined' &&\n    process.env &&\n    process.env.NODE_ENV === 'development'\n\n  const errorConfig = getErrorConfig(status)\n  const ErrorIcon = errorConfig.icon\n\n  return (\n    <div ref={ref} {...props} className={cn(\"flex min-h-[60vh] items-center justify-center p-ds-05\", className)}>\n      <div\n        className=\"flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-07 text-center shadow-raised\"\n      >\n        {/* Error Icon */}\n        <div\n          className={cn(\n            'flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-2xl',\n            errorConfig.bgClass,\n          )}\n        >\n          <Icon\n            icon={ErrorIcon}\n            size=\"2xl\"\n            className={errorConfig.iconClass}\n          />\n        </div>\n\n        {/* Error IconInfoCircle */}\n        <div className=\"flex flex-col gap-ds-03\">\n          {status && (\n            <span className=\"text-ds-sm text-surface-fg-subtle\">\n              Error {status}\n            </span>\n          )}\n          <h2 className=\"text-ds-2xl font-semibold text-surface-fg\">\n            {errorConfig.title}\n          </h2>\n          <p className=\"text-ds-base text-surface-fg-subtle\">\n            {message || errorConfig.message}\n          </p>\n        </div>\n\n        {/* Actions */}\n        {onReset && (\n          <div className=\"flex items-center gap-ds-04\">\n            <Button\n              variant=\"outline\"\n              size=\"md\"\n              onClick={onReset}\n            >\n              Try Again\n            </Button>\n          </div>\n        )}\n\n        {/* Dev stack trace */}\n        {isDev && stack && (\n          <div className=\"w-full overflow-auto rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05 text-left\">\n            <p className=\"text-ds-sm mb-ds-03 font-semibold text-surface-fg\">\n              Stack Trace (development only)\n            </p>\n            <pre className=\"whitespace-pre-wrap text-ds-sm text-surface-fg-subtle\">\n              {stack}\n            </pre>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n},\n)\n\nErrorDisplay.displayName = 'ErrorDisplay'\n\ninterface ErrorBoundaryProps {\n  children: React.ReactNode\n  /** Optional callback when the user clicks \"Try Again\" */\n  onReset?: () => void\n  /** Optional custom fallback — receives the caught error. Defaults to ErrorDisplay. */\n  fallback?: (props: { error: unknown; onReset?: () => void }) => React.ReactNode\n}\n\ninterface ErrorBoundaryState {\n  error: unknown | null\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { error: null }\n  }\n\n  static getDerivedStateFromError(error: unknown): ErrorBoundaryState {\n    return { error }\n  }\n\n  private handleReset = () => {\n    this.setState({ error: null })\n    this.props.onReset?.()\n  }\n\n  render() {\n    if (this.state.error !== null) {\n      if (this.props.fallback) {\n        return this.props.fallback({ error: this.state.error, onReset: this.handleReset })\n      }\n      return <ErrorDisplay error={this.state.error} onReset={this.handleReset} />\n    }\n    return this.props.children\n  }\n}\n\nexport { ErrorBoundary,ErrorDisplay }\nexport type { ErrorBoundaryProps }\n"],"mappings":"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"}
+{"version":3,"file":"error-boundary.js","names":[],"sources":["../../src/composed/error-boundary.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertTriangle, IconBan, IconFileUnknown, IconServerOff } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\ndeclare const process: { env: { NODE_ENV?: string } } | undefined\n\nexport interface ErrorDisplayProps extends React.ComponentPropsWithoutRef<'div'> {\n  error: unknown\n  onReset?: () => void\n}\n\nfunction getStatusFromError(error: unknown): number | undefined {\n  if (\n    error &&\n    typeof error === 'object' &&\n    'status' in error &&\n    typeof (error as Record<string, unknown>).status === 'number'\n  ) {\n    return (error as Record<string, unknown>).status as number\n  }\n  return undefined\n}\n\nfunction getMessageFromError(error: unknown): string | undefined {\n  if (error instanceof Error) {\n    return error.message\n  }\n  if (\n    error &&\n    typeof error === 'object' &&\n    'data' in error\n  ) {\n    const data = (error as Record<string, unknown>).data\n    if (typeof data === 'string') return data\n    if (data && typeof data === 'object' && 'message' in data) {\n      return String((data as Record<string, unknown>).message)\n    }\n  }\n  if (typeof error === 'string') {\n    return error\n  }\n  return undefined\n}\n\nfunction getStackFromError(error: unknown): string | undefined {\n  if (error instanceof Error) {\n    return error.stack\n  }\n  return undefined\n}\n\nfunction getErrorConfig(status?: number) {\n  switch (status) {\n    case 404:\n      return {\n        icon: IconFileUnknown,\n        title: 'Page not found',\n        message:\n          'The page you are looking for does not exist or has been moved.',\n        bgClass: 'bg-accent-2',\n        iconClass: 'text-accent-11',\n      }\n    case 403:\n      return {\n        icon: IconBan,\n        title: 'Access denied',\n        message:\n          'You do not have permission to view this page. Contact your administrator if you believe this is a mistake.',\n        bgClass: 'bg-warning-3',\n        iconClass: 'text-warning-11',\n      }\n    case 500:\n      return {\n        icon: IconServerOff,\n        title: 'Server error',\n        message:\n          'Something went wrong on our end. Please try again later or contact support if the issue persists.',\n        bgClass: 'bg-error-3',\n        iconClass: 'text-error-11',\n      }\n    default:\n      return {\n        icon: IconAlertTriangle,\n        title: 'Something went wrong',\n        message:\n          'An unexpected error occurred. Please try again or go back to the home page.',\n        bgClass: 'bg-accent-2',\n        iconClass: 'text-accent-11',\n      }\n  }\n}\n\nconst ErrorDisplay = React.forwardRef<HTMLDivElement, ErrorDisplayProps>(\n  function ErrorDisplay({ error, onReset, className, ...props }, ref) {\n  const status = getStatusFromError(error)\n  const message = getMessageFromError(error)\n  const stack = getStackFromError(error)\n  const isDev =\n    typeof process !== 'undefined' &&\n    process.env &&\n    process.env.NODE_ENV === 'development'\n\n  const errorConfig = getErrorConfig(status)\n  const ErrorIcon = errorConfig.icon\n\n  return (\n    <div ref={ref} {...props} className={cn(\"flex min-h-[60vh] items-center justify-center p-ds-05\", className)}>\n      <div\n        className=\"flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-07 text-center shadow-raised\"\n      >\n        {/* Error Icon */}\n        <div\n          className={cn(\n            'flex h-ds-lg w-ds-lg items-center justify-center rounded-bubble',\n            errorConfig.bgClass,\n          )}\n        >\n          <Icon\n            icon={ErrorIcon}\n            size=\"2xl\"\n            className={errorConfig.iconClass}\n          />\n        </div>\n\n        {/* Error IconInfoCircle */}\n        <div className=\"flex flex-col gap-ds-03\">\n          {status && (\n            <span className=\"text-ds-sm text-surface-fg-subtle\">\n              Error {status}\n            </span>\n          )}\n          <h2 className=\"text-ds-2xl font-semibold text-surface-fg\">\n            {errorConfig.title}\n          </h2>\n          <p className=\"text-ds-base text-surface-fg-subtle\">\n            {message || errorConfig.message}\n          </p>\n        </div>\n\n        {/* Actions */}\n        {onReset && (\n          <div className=\"flex items-center gap-ds-04\">\n            <Button\n              variant=\"outline\"\n              size=\"md\"\n              onClick={onReset}\n            >\n              Try Again\n            </Button>\n          </div>\n        )}\n\n        {/* Dev stack trace */}\n        {isDev && stack && (\n          <div className=\"w-full overflow-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 text-left\">\n            <p className=\"text-ds-sm mb-ds-03 font-semibold text-surface-fg\">\n              Stack Trace (development only)\n            </p>\n            <pre className=\"whitespace-pre-wrap text-ds-sm text-surface-fg-subtle\">\n              {stack}\n            </pre>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n},\n)\n\nErrorDisplay.displayName = 'ErrorDisplay'\n\ninterface ErrorBoundaryProps {\n  children: React.ReactNode\n  /** Optional callback when the user clicks \"Try Again\" */\n  onReset?: () => void\n  /** Optional custom fallback — receives the caught error. Defaults to ErrorDisplay. */\n  fallback?: (props: { error: unknown; onReset?: () => void }) => React.ReactNode\n}\n\ninterface ErrorBoundaryState {\n  error: unknown | null\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { error: null }\n  }\n\n  static getDerivedStateFromError(error: unknown): ErrorBoundaryState {\n    return { error }\n  }\n\n  private handleReset = () => {\n    this.setState({ error: null })\n    this.props.onReset?.()\n  }\n\n  render() {\n    if (this.state.error !== null) {\n      if (this.props.fallback) {\n        return this.props.fallback({ error: this.state.error, onReset: this.handleReset })\n      }\n      return <ErrorDisplay error={this.state.error} onReset={this.handleReset} />\n    }\n    return this.props.children\n  }\n}\n\nexport { ErrorBoundary,ErrorDisplay }\nexport type { ErrorBoundaryProps }\n"],"mappings":"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"}

package/dist/composed/filter-bar.js

@@ -70,7 +70,7 @@ function b({ label: i, value: a, onValueChange: o, options: s, className: c }) {
 		searchPlaceholder: `Search ${i.toLowerCase()}...`,
 		children: /* @__PURE__ */ m("button", {
 			type: "button",
-			className: t("flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-ds-md border bg-surface-raised-hover text-surface-fg", "hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard", {
+			className: t("flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-control border bg-surface-raised-hover text-surface-fg", "hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard", {
 				xs: "h-ds-xs-plus text-ds-sm px-ds-02",
 				sm: "h-ds-sm text-ds-sm px-ds-03",
 				md: "h-ds-md text-ds-md px-ds-04"

package/dist/composed/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"sources":["../../src/composed/filter-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { SearchInput } from '../ui/search-input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../ui/select'\nimport { type MultiSelectItem,MultiSelectPopover } from './multi-select-popover'\n\n// ============================================================\n// Context\n// ============================================================\n\ntype FilterBarSize = 'xs' | 'sm' | 'md'\n\nconst FilterBarContext = React.createContext<{ size: FilterBarSize }>({ size: 'sm' })\n\n// ============================================================\n// FilterBar\n// ============================================================\n\n/**\n * A toolbar for filtering lists/tables. Composes a search input, slot-based\n * filter controls (Select, MultiSelect), and an optional \"Clear all\" button.\n * Size is propagated to all child controls via context.\n */\nexport interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled search input value. Omit `onSearchChange` to hide the search input entirely. */\n  searchValue?: string\n  /** Called when the search input changes. If not provided, the search input is hidden. */\n  onSearchChange?: (value: string) => void\n  searchPlaceholder?: string\n  /** When provided, a \"Clear all\" button appears that calls this handler. */\n  onClearAll?: () => void\n  /** Size propagated to all child controls. @default 'sm' */\n  size?: FilterBarSize\n}\n\nconst FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  onClearAll,\n  size = 'sm',\n  children,\n  className,\n  ...props\n}, ref) => {\n  return (\n    <FilterBarContext.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn('flex flex-wrap items-center gap-ds-03', className)}\n        role=\"toolbar\"\n        aria-label=\"Filters\"\n        {...props}\n      >\n        {onSearchChange && (\n          <SearchInput\n            size={size}\n            value={searchValue}\n            onChange={(e) => onSearchChange(e.target.value)}\n            onClear={searchValue ? () => onSearchChange('') : undefined}\n            placeholder={searchPlaceholder}\n            className=\"w-48\"\n          />\n        )}\n        {children}\n        {onClearAll && (\n          <Button variant=\"ghost\" size={size} onClick={onClearAll}>\n            Clear all\n          </Button>\n        )}\n      </div>\n    </FilterBarContext.Provider>\n  )\n})\nFilterBar.displayName = 'FilterBar'\n\n// ============================================================\n// FilterSelect\n// ============================================================\n\nexport interface FilterSelectProps {\n  label: string\n  value: string\n  onValueChange: (value: string) => void\n  options: { value: string; label: string }[]\n  /** Label for the \"all\" option @default 'All' */\n  allLabel?: string\n  className?: string\n}\n\nfunction FilterSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  allLabel = 'All',\n  className,\n}: FilterSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const isFiltered = value !== '' && value !== 'all'\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn('w-40', isFiltered && 'border-accent-7', className)}\n      >\n        <SelectValue placeholder={label} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"all\">{allLabel}</SelectItem>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n// ============================================================\n// FilterMultiSelect\n// ============================================================\n\nexport interface FilterMultiSelectProps {\n  label: string\n  value: string[]\n  onValueChange: (values: string[]) => void\n  options: { value: string; label: string }[]\n  className?: string\n}\n\nfunction FilterMultiSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  className,\n}: FilterMultiSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const count = value.length\n\n  const items: MultiSelectItem[] = React.useMemo(\n    () => options.map((o) => ({ id: o.value, label: o.label })),\n    [options],\n  )\n\n  // Trigger button sized by FilterBar context\n  const triggerSizeClasses: Record<string, string> = {\n    xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n    sm: 'h-ds-sm text-ds-sm px-ds-03',\n    md: 'h-ds-md text-ds-md px-ds-04',\n  }\n\n  return (\n    <MultiSelectPopover\n      items={items}\n      value={value}\n      onValueChange={onValueChange}\n      searchPlaceholder={`Search ${label.toLowerCase()}...`}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          'flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-ds-md border bg-surface-raised-hover text-surface-fg',\n          'hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard',\n          triggerSizeClasses[size],\n          count > 0 ? 'border-accent-7' : 'border-surface-border-strong',\n          'w-40',\n          className,\n        )}\n      >\n        <span className=\"flex items-center gap-ds-02 truncate\">\n          <span>{label}</span>\n          {count > 0 && (\n            <motion.span\n              key={count}\n              initial={{ scale: 0.8 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex\"\n            >\n              <Badge size=\"xs\" variant=\"solid\" className=\"ml-ds-01\">\n                {count}\n              </Badge>\n            </motion.span>\n          )}\n        </span>\n        <Icon icon={IconChevronDown} size=\"xs\" className=\"opacity-50 shrink-0\" />\n      </button>\n    </MultiSelectPopover>\n  )\n}\n\nexport { FilterBar, FilterMultiSelect,FilterSelect }\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAM,IAAmB,EAAM,cAAuC,EAAE,MAAM,MAAM,CAAC,EAuB/E,IAAY,EAAM,YAA4C,EAClE,gBACA,mBACA,uBAAoB,aACpB,eACA,UAAO,MACP,aACA,cACA,GAAG,KACF,MAEC,kBAAC,EAAiB,UAAlB;CAA2B,OAAO,EAAE,SAAM;WACxC,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,yCAAyC,EAAU;EACjE,MAAK;EACL,cAAW;EACX,GAAI;YALN;GAOG,KACC,kBAAC,GAAD;IACQ;IACN,OAAO;IACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;IAC/C,SAAS,UAAoB,EAAe,GAAG,GAAG,KAAA;IAClD,aAAa;IACb,WAAU;IACV,CAAA;GAEH;GACA,KACC,kBAAC,GAAD;IAAQ,SAAQ;IAAc;IAAM,SAAS;cAAY;IAEhD,CAAA;GAEP;;CACoB,CAAA,CAE9B;AACF,EAAU,cAAc;AAgBxB,SAAS,EAAa,EACpB,UACA,UACA,kBACA,YACA,cAAW,OACX,gBACoB;CACpB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB;AAGnD,QACE,kBAAC,GAAD;EAAe;EAAsB;YAArC,CACE,kBAAC,GAAD;GACQ;GACN,WAAW,EAAG,QAND,MAAU,MAAM,MAAU,SAMH,mBAAmB,EAAU;aAEjE,kBAAC,GAAD,EAAa,aAAa,GAAS,CAAA;GACrB,CAAA,EAChB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAY,OAAM;aAAO;GAAsB,CAAA,EAC9C,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAA0B,OAAO,EAAE;aAChC,EAAE;GACQ,EAFI,EAAE,MAEN,CACb,CACY,EAAA,CAAA,CACT;;;AAgBb,SAAS,EAAkB,EACzB,UACA,UACA,kBACA,YACA,gBACyB;CACzB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB,EAC7C,IAAQ,EAAM;AAcpB,QACE,kBAAC,GAAD;EACS,OAdsB,EAAM,cAC/B,EAAQ,KAAK,OAAO;GAAE,IAAI,EAAE;GAAO,OAAO,EAAE;GAAO,EAAE,EAC3D,CAAC,EAAQ,CACV;EAYU;EACQ;EACf,mBAAmB,UAAU,EAAM,aAAa,CAAC;YAEjD,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EACT,8HACA,8FAjB2C;IACjD,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAc0B,IACnB,IAAQ,IAAI,oBAAoB,gCAChC,QACA,EACD;aATH,CAWE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,EACnB,IAAQ,KACP,kBAAC,EAAO,MAAR;KAEE,SAAS,EAAE,OAAO,IAAK;KACvB,SAAS,EAAE,OAAO,GAAG;KACrB,YAAY,EAAQ;KACpB,WAAU;eAEV,kBAAC,GAAD;MAAO,MAAK;MAAK,SAAQ;MAAQ,WAAU;gBACxC;MACK,CAAA;KACI,EATP,EASO,CAEX;OACP,kBAAC,GAAD;IAAM,MAAM;IAAiB,MAAK;IAAK,WAAU;IAAwB,CAAA,CAClE;;EACU,CAAA"}
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../src/composed/filter-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { SearchInput } from '../ui/search-input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../ui/select'\nimport { type MultiSelectItem,MultiSelectPopover } from './multi-select-popover'\n\n// ============================================================\n// Context\n// ============================================================\n\ntype FilterBarSize = 'xs' | 'sm' | 'md'\n\nconst FilterBarContext = React.createContext<{ size: FilterBarSize }>({ size: 'sm' })\n\n// ============================================================\n// FilterBar\n// ============================================================\n\n/**\n * A toolbar for filtering lists/tables. Composes a search input, slot-based\n * filter controls (Select, MultiSelect), and an optional \"Clear all\" button.\n * Size is propagated to all child controls via context.\n */\nexport interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled search input value. Omit `onSearchChange` to hide the search input entirely. */\n  searchValue?: string\n  /** Called when the search input changes. If not provided, the search input is hidden. */\n  onSearchChange?: (value: string) => void\n  searchPlaceholder?: string\n  /** When provided, a \"Clear all\" button appears that calls this handler. */\n  onClearAll?: () => void\n  /** Size propagated to all child controls. @default 'sm' */\n  size?: FilterBarSize\n}\n\nconst FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  onClearAll,\n  size = 'sm',\n  children,\n  className,\n  ...props\n}, ref) => {\n  return (\n    <FilterBarContext.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn('flex flex-wrap items-center gap-ds-03', className)}\n        role=\"toolbar\"\n        aria-label=\"Filters\"\n        {...props}\n      >\n        {onSearchChange && (\n          <SearchInput\n            size={size}\n            value={searchValue}\n            onChange={(e) => onSearchChange(e.target.value)}\n            onClear={searchValue ? () => onSearchChange('') : undefined}\n            placeholder={searchPlaceholder}\n            className=\"w-48\"\n          />\n        )}\n        {children}\n        {onClearAll && (\n          <Button variant=\"ghost\" size={size} onClick={onClearAll}>\n            Clear all\n          </Button>\n        )}\n      </div>\n    </FilterBarContext.Provider>\n  )\n})\nFilterBar.displayName = 'FilterBar'\n\n// ============================================================\n// FilterSelect\n// ============================================================\n\nexport interface FilterSelectProps {\n  label: string\n  value: string\n  onValueChange: (value: string) => void\n  options: { value: string; label: string }[]\n  /** Label for the \"all\" option @default 'All' */\n  allLabel?: string\n  className?: string\n}\n\nfunction FilterSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  allLabel = 'All',\n  className,\n}: FilterSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const isFiltered = value !== '' && value !== 'all'\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn('w-40', isFiltered && 'border-accent-7', className)}\n      >\n        <SelectValue placeholder={label} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"all\">{allLabel}</SelectItem>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n// ============================================================\n// FilterMultiSelect\n// ============================================================\n\nexport interface FilterMultiSelectProps {\n  label: string\n  value: string[]\n  onValueChange: (values: string[]) => void\n  options: { value: string; label: string }[]\n  className?: string\n}\n\nfunction FilterMultiSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  className,\n}: FilterMultiSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const count = value.length\n\n  const items: MultiSelectItem[] = React.useMemo(\n    () => options.map((o) => ({ id: o.value, label: o.label })),\n    [options],\n  )\n\n  // Trigger button sized by FilterBar context\n  const triggerSizeClasses: Record<string, string> = {\n    xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n    sm: 'h-ds-sm text-ds-sm px-ds-03',\n    md: 'h-ds-md text-ds-md px-ds-04',\n  }\n\n  return (\n    <MultiSelectPopover\n      items={items}\n      value={value}\n      onValueChange={onValueChange}\n      searchPlaceholder={`Search ${label.toLowerCase()}...`}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          'flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-control border bg-surface-raised-hover text-surface-fg',\n          'hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard',\n          triggerSizeClasses[size],\n          count > 0 ? 'border-accent-7' : 'border-surface-border-strong',\n          'w-40',\n          className,\n        )}\n      >\n        <span className=\"flex items-center gap-ds-02 truncate\">\n          <span>{label}</span>\n          {count > 0 && (\n            <motion.span\n              key={count}\n              initial={{ scale: 0.8 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex\"\n            >\n              <Badge size=\"xs\" variant=\"solid\" className=\"ml-ds-01\">\n                {count}\n              </Badge>\n            </motion.span>\n          )}\n        </span>\n        <Icon icon={IconChevronDown} size=\"xs\" className=\"opacity-50 shrink-0\" />\n      </button>\n    </MultiSelectPopover>\n  )\n}\n\nexport { FilterBar, FilterMultiSelect,FilterSelect }\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAM,IAAmB,EAAM,cAAuC,EAAE,MAAM,MAAM,CAAC,EAuB/E,IAAY,EAAM,YAA4C,EAClE,gBACA,mBACA,uBAAoB,aACpB,eACA,UAAO,MACP,aACA,cACA,GAAG,KACF,MAEC,kBAAC,EAAiB,UAAlB;CAA2B,OAAO,EAAE,SAAM;WACxC,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,yCAAyC,EAAU;EACjE,MAAK;EACL,cAAW;EACX,GAAI;YALN;GAOG,KACC,kBAAC,GAAD;IACQ;IACN,OAAO;IACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;IAC/C,SAAS,UAAoB,EAAe,GAAG,GAAG,KAAA;IAClD,aAAa;IACb,WAAU;IACV,CAAA;GAEH;GACA,KACC,kBAAC,GAAD;IAAQ,SAAQ;IAAc;IAAM,SAAS;cAAY;IAEhD,CAAA;GAEP;;CACoB,CAAA,CAE9B;AACF,EAAU,cAAc;AAgBxB,SAAS,EAAa,EACpB,UACA,UACA,kBACA,YACA,cAAW,OACX,gBACoB;CACpB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB;AAGnD,QACE,kBAAC,GAAD;EAAe;EAAsB;YAArC,CACE,kBAAC,GAAD;GACQ;GACN,WAAW,EAAG,QAND,MAAU,MAAM,MAAU,SAMH,mBAAmB,EAAU;aAEjE,kBAAC,GAAD,EAAa,aAAa,GAAS,CAAA;GACrB,CAAA,EAChB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAY,OAAM;aAAO;GAAsB,CAAA,EAC9C,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAA0B,OAAO,EAAE;aAChC,EAAE;GACQ,EAFI,EAAE,MAEN,CACb,CACY,EAAA,CAAA,CACT;;;AAgBb,SAAS,EAAkB,EACzB,UACA,UACA,kBACA,YACA,gBACyB;CACzB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB,EAC7C,IAAQ,EAAM;AAcpB,QACE,kBAAC,GAAD;EACS,OAdsB,EAAM,cAC/B,EAAQ,KAAK,OAAO;GAAE,IAAI,EAAE;GAAO,OAAO,EAAE;GAAO,EAAE,EAC3D,CAAC,EAAQ,CACV;EAYU;EACQ;EACf,mBAAmB,UAAU,EAAM,aAAa,CAAC;YAEjD,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EACT,gIACA,8FAjB2C;IACjD,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAc0B,IACnB,IAAQ,IAAI,oBAAoB,gCAChC,QACA,EACD;aATH,CAWE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,EACnB,IAAQ,KACP,kBAAC,EAAO,MAAR;KAEE,SAAS,EAAE,OAAO,IAAK;KACvB,SAAS,EAAE,OAAO,GAAG;KACrB,YAAY,EAAQ;KACpB,WAAU;eAEV,kBAAC,GAAD;MAAO,MAAK;MAAK,SAAQ;MAAQ,WAAU;gBACxC;MACK,CAAA;KACI,EATP,EASO,CAEX;OACP,kBAAC,GAAD;IAAM,MAAM;IAAiB,MAAK;IAAK,WAAU;IAAwB,CAAA,CAClE;;EACU,CAAA"}

package/dist/composed/inline-edit.js

@@ -78,7 +78,7 @@ var s = r.forwardRef(({ value: s, onSave: c, placeholder: l = "Click to edit", t
 				onInput: j,
 				onPaste: M,
 				spellCheck: x,
-				className: e("font-sans text-surface-fg outline-hidden", u, !d && !x && "cursor-text rounded-ds-sm -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01", x && "rounded-ds-sm -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7", E && !x && "text-surface-fg-subtle italic", d && "cursor-default"),
+				className: e("font-sans text-surface-fg outline-hidden", u, !d && !x && "cursor-text rounded-control-inner -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01", x && "rounded-control-inner -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7", E && !x && "text-surface-fg-subtle italic", d && "cursor-default"),
 				"data-placeholder": l,
 				children: s || (x ? "" : l)
 			}),

package/dist/composed/inline-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-edit.js","names":[],"sources":["../../src/composed/inline-edit.tsx"],"sourcesContent":["'use client'\n\nimport { IconPencil } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface InlineEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSave'> {\n  value: string\n  onSave: (newValue: string) => void | Promise<void>\n  placeholder?: string\n  /** CSS class applied to the editable text (e.g. 'text-ds-lg font-semibold') */\n  textClassName?: string\n  readOnly?: boolean\n  maxLength?: number\n  /** External saving state — shows spinner */\n  saving?: boolean\n}\n\n// ============================================================\n// InlineEdit — contentEditable approach\n//\n// No mode switch. No input field. The text IS the editor.\n// Click → cursor appears in the text. Type. Enter saves. Escape reverts.\n// Like Notion, Linear, Figma layer names.\n// ============================================================\n\nconst InlineEdit = React.forwardRef<HTMLDivElement, InlineEditProps>(({\n  value,\n  onSave,\n  placeholder = 'Click to edit',\n  textClassName,\n  readOnly = false,\n  maxLength,\n  saving: savingProp = false,\n  className,\n  // aria-label / aria-labelledby apply to the editable textbox (the inner\n  // span), not the outer wrapper div. Intercept them from ...props so they\n  // land on the role=\"textbox\" element that actually needs the name.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}, ref) => {\n  const [saving, setSaving] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const editRef = React.useRef<HTMLSpanElement>(null)\n  const snapshotRef = React.useRef(value)\n\n  const isSaving = savingProp || saving\n  const isEmpty = !value\n\n  // Sync DOM text when value changes externally (and not focused)\n  React.useEffect(() => {\n    if (!focused && editRef.current) {\n      editRef.current.textContent = value\n    }\n  }, [value, focused])\n\n  function handleFocus() {\n    if (readOnly || isSaving) return\n    setFocused(true)\n    snapshotRef.current = value\n\n    // Select all text on focus (like clicking a file name in Finder)\n    requestAnimationFrame(() => {\n      if (!editRef.current) return\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    })\n  }\n\n  async function commit() {\n    if (!editRef.current) return\n    setFocused(false)\n    const raw = editRef.current.textContent ?? ''\n    const trimmed = raw.trim()\n\n    // Enforce maxLength\n    const final = maxLength ? trimmed.slice(0, maxLength) : trimmed\n\n    // Reset DOM to clean value\n    editRef.current.textContent = final || value\n\n    if (final === value) return\n    const result = onSave(final)\n    if (result instanceof Promise) {\n      setSaving(true)\n      try {\n        await result\n      } catch {\n        // Revert on error\n        if (editRef.current) editRef.current.textContent = value\n      } finally {\n        setSaving(false)\n      }\n    }\n  }\n\n  function cancel() {\n    if (!editRef.current) return\n    editRef.current.textContent = snapshotRef.current\n    setFocused(false)\n    editRef.current.blur()\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      cancel()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      commit()\n    }\n  }\n\n  function handleInput() {\n    if (!editRef.current || !maxLength) return\n    const text = editRef.current.textContent ?? ''\n    if (text.length > maxLength) {\n      editRef.current.textContent = text.slice(0, maxLength)\n      // Move cursor to end\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      range.collapse(false)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    }\n  }\n\n  // Prevent paste from inserting rich content\n  function handlePaste(e: React.ClipboardEvent) {\n    e.preventDefault()\n    const text = e.clipboardData.getData('text/plain')\n    document.execCommand('insertText', false, text)\n  }\n\n  return (\n    <div ref={ref} className={cn('group inline-flex items-center gap-ds-02', className)} {...props}>\n      <span\n        ref={editRef}\n        role={readOnly ? undefined : 'textbox'}\n        contentEditable={!readOnly && !isSaving}\n        suppressContentEditableWarning\n        tabIndex={readOnly ? undefined : 0}\n        // Fall back to the placeholder when no explicit label is supplied —\n        // screen readers need _something_ on role=\"textbox\".\n        aria-label={readOnly ? undefined : (ariaLabel ?? (ariaLabelledBy ? undefined : placeholder))}\n        aria-labelledby={readOnly ? undefined : ariaLabelledBy}\n        onFocus={handleFocus}\n        onBlur={commit}\n        onKeyDown={handleKeyDown}\n        onInput={handleInput}\n        onPaste={handlePaste}\n        spellCheck={focused}\n        className={cn(\n          'font-sans text-surface-fg outline-hidden',\n          textClassName,\n          // Idle: subtle hover hint\n          !readOnly && !focused && 'cursor-text rounded-ds-sm -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01',\n          // Focused: subtle underline to indicate editing\n          focused && 'rounded-ds-sm -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7',\n          // Empty: show placeholder styling\n          isEmpty && !focused && 'text-surface-fg-subtle italic',\n          // Read-only\n          readOnly && 'cursor-default',\n        )}\n        data-placeholder={placeholder}\n      >\n        {value || (focused ? '' : placeholder)}\n      </span>\n      {!readOnly && !focused && !isSaving && (\n        <Icon icon={IconPencil} size=\"xs\" className=\"text-surface-fg-subtle opacity-0 group-hover:opacity-100 transition-opacity duration-fast-01 shrink-0\" />\n      )}\n      {isSaving && <Spinner size=\"sm\" />}\n    </div>\n  )\n})\nInlineEdit.displayName = 'InlineEdit'\n\nexport { InlineEdit }\n"],"mappings":"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"}
+{"version":3,"file":"inline-edit.js","names":[],"sources":["../../src/composed/inline-edit.tsx"],"sourcesContent":["'use client'\n\nimport { IconPencil } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface InlineEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSave'> {\n  value: string\n  onSave: (newValue: string) => void | Promise<void>\n  placeholder?: string\n  /** CSS class applied to the editable text (e.g. 'text-ds-lg font-semibold') */\n  textClassName?: string\n  readOnly?: boolean\n  maxLength?: number\n  /** External saving state — shows spinner */\n  saving?: boolean\n}\n\n// ============================================================\n// InlineEdit — contentEditable approach\n//\n// No mode switch. No input field. The text IS the editor.\n// Click → cursor appears in the text. Type. Enter saves. Escape reverts.\n// Like Notion, Linear, Figma layer names.\n// ============================================================\n\nconst InlineEdit = React.forwardRef<HTMLDivElement, InlineEditProps>(({\n  value,\n  onSave,\n  placeholder = 'Click to edit',\n  textClassName,\n  readOnly = false,\n  maxLength,\n  saving: savingProp = false,\n  className,\n  // aria-label / aria-labelledby apply to the editable textbox (the inner\n  // span), not the outer wrapper div. Intercept them from ...props so they\n  // land on the role=\"textbox\" element that actually needs the name.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}, ref) => {\n  const [saving, setSaving] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const editRef = React.useRef<HTMLSpanElement>(null)\n  const snapshotRef = React.useRef(value)\n\n  const isSaving = savingProp || saving\n  const isEmpty = !value\n\n  // Sync DOM text when value changes externally (and not focused)\n  React.useEffect(() => {\n    if (!focused && editRef.current) {\n      editRef.current.textContent = value\n    }\n  }, [value, focused])\n\n  function handleFocus() {\n    if (readOnly || isSaving) return\n    setFocused(true)\n    snapshotRef.current = value\n\n    // Select all text on focus (like clicking a file name in Finder)\n    requestAnimationFrame(() => {\n      if (!editRef.current) return\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    })\n  }\n\n  async function commit() {\n    if (!editRef.current) return\n    setFocused(false)\n    const raw = editRef.current.textContent ?? ''\n    const trimmed = raw.trim()\n\n    // Enforce maxLength\n    const final = maxLength ? trimmed.slice(0, maxLength) : trimmed\n\n    // Reset DOM to clean value\n    editRef.current.textContent = final || value\n\n    if (final === value) return\n    const result = onSave(final)\n    if (result instanceof Promise) {\n      setSaving(true)\n      try {\n        await result\n      } catch {\n        // Revert on error\n        if (editRef.current) editRef.current.textContent = value\n      } finally {\n        setSaving(false)\n      }\n    }\n  }\n\n  function cancel() {\n    if (!editRef.current) return\n    editRef.current.textContent = snapshotRef.current\n    setFocused(false)\n    editRef.current.blur()\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      cancel()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      commit()\n    }\n  }\n\n  function handleInput() {\n    if (!editRef.current || !maxLength) return\n    const text = editRef.current.textContent ?? ''\n    if (text.length > maxLength) {\n      editRef.current.textContent = text.slice(0, maxLength)\n      // Move cursor to end\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      range.collapse(false)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    }\n  }\n\n  // Prevent paste from inserting rich content\n  function handlePaste(e: React.ClipboardEvent) {\n    e.preventDefault()\n    const text = e.clipboardData.getData('text/plain')\n    document.execCommand('insertText', false, text)\n  }\n\n  return (\n    <div ref={ref} className={cn('group inline-flex items-center gap-ds-02', className)} {...props}>\n      <span\n        ref={editRef}\n        role={readOnly ? undefined : 'textbox'}\n        contentEditable={!readOnly && !isSaving}\n        suppressContentEditableWarning\n        tabIndex={readOnly ? undefined : 0}\n        // Fall back to the placeholder when no explicit label is supplied —\n        // screen readers need _something_ on role=\"textbox\".\n        aria-label={readOnly ? undefined : (ariaLabel ?? (ariaLabelledBy ? undefined : placeholder))}\n        aria-labelledby={readOnly ? undefined : ariaLabelledBy}\n        onFocus={handleFocus}\n        onBlur={commit}\n        onKeyDown={handleKeyDown}\n        onInput={handleInput}\n        onPaste={handlePaste}\n        spellCheck={focused}\n        className={cn(\n          'font-sans text-surface-fg outline-hidden',\n          textClassName,\n          // Idle: subtle hover hint\n          !readOnly && !focused && 'cursor-text rounded-control-inner -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01',\n          // Focused: subtle underline to indicate editing\n          focused && 'rounded-control-inner -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7',\n          // Empty: show placeholder styling\n          isEmpty && !focused && 'text-surface-fg-subtle italic',\n          // Read-only\n          readOnly && 'cursor-default',\n        )}\n        data-placeholder={placeholder}\n      >\n        {value || (focused ? '' : placeholder)}\n      </span>\n      {!readOnly && !focused && !isSaving && (\n        <Icon icon={IconPencil} size=\"xs\" className=\"text-surface-fg-subtle opacity-0 group-hover:opacity-100 transition-opacity duration-fast-01 shrink-0\" />\n      )}\n      {isSaving && <Spinner size=\"sm\" />}\n    </div>\n  )\n})\nInlineEdit.displayName = 'InlineEdit'\n\nexport { InlineEdit }\n"],"mappings":"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"}