@flanksource/clicky-ui 0.3.21 → 0.3.22

package/dist/mdx-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mdx-editor.d.ts","sourceRoot":"","sources":["../src/mdx-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"mdx-editor.d.ts","sourceRoot":"","sources":["../src/mdx-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,+BAA+B,EACpC,KAAK,kCAAkC,EACvC,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,+BAA+B,EACpC,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,KAAK,gBAAgB,GACtB,MAAM,uCAAuC,CAAC;AAI/C,OAAO,EACL,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,wCAAwC,CAAC"}

package/dist/mdx-editor.js

@@ -1,5 +1,17 @@
 import { MdxEditorField } from "./components/MdxEditorField.js";
+import { CALLOUT_JSX_NAME, calloutJsxDescriptor, calloutToolbarButton } from "./components/mdx-editor-callout.js";
+import { CALLOUT_ATTRIBUTES, CALLOUT_ATTRIBUTE_OPTIONS, CALLOUT_JSX_PROPS, readCalloutAttributes } from "./components/mdx-editor-callout-model.js";
+import { readJsxAttributes, writeJsxAttribute } from "./components/mdx-editor-jsx-attributes.js";
 export {
-  MdxEditorField
+  CALLOUT_ATTRIBUTES,
+  CALLOUT_ATTRIBUTE_OPTIONS,
+  CALLOUT_JSX_NAME,
+  CALLOUT_JSX_PROPS,
+  MdxEditorField,
+  calloutJsxDescriptor,
+  calloutToolbarButton,
+  readCalloutAttributes,
+  readJsxAttributes,
+  writeJsxAttribute
 };
 //# sourceMappingURL=mdx-editor.js.map

package/dist/mdx-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"mdx-editor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"mdx-editor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/overlay/CommandPalette.cjs

@@ -175,7 +175,7 @@ function CommandPalette({
                   placeholder,
                   onChange: (event) => setQuery(event.target.value),
                   onKeyDown,
-                  className: "h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                  className: "h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder"
                 }
               )
             ] }),

package/dist/overlay/CommandPalette.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.cjs","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":["defaultCommandFilter","useId","useState","useRef","useCallback","useMemo","filterCommandGroups","flattenCommands","useHotkey","useEscapeLayer","useModalStack","useEffect","firstEnabledIndex","nextEnabledIndex","lastEnabledIndex","jsx","cn","zIndex","jsxs","Icon","UiSearch","CommandPaletteList","createPortal"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.cjs","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder\"\n          />\n        </div>\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":["defaultCommandFilter","useId","useState","useRef","useCallback","useMemo","filterCommandGroups","flattenCommands","useHotkey","useEscapeLayer","useModalStack","useEffect","firstEnabledIndex","nextEnabledIndex","lastEnabledIndex","jsx","cn","zIndex","jsxs","Icon","UiSearch","CommandPaletteList","createPortal"],"mappings":"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"}

package/dist/overlay/CommandPalette.js

@@ -173,7 +173,7 @@ function CommandPalette({
                   placeholder,
                   onChange: (event) => setQuery(event.target.value),
                   onKeyDown,
-                  className: "h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                  className: "h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder"
                 }
               )
             ] }),

package/dist/overlay/CommandPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.js","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommandPalette.js","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder\"\n          />\n        </div>\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":[],"mappings":"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"}

package/dist/profiles/cel/celEditor.cjs

@@ -0,0 +1,395 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactQuery = require("@tanstack/react-query");
+const Badge = require("../../data/Badge.cjs");
+const button = require("../../components/button.cjs");
+const Icon = require("../../data/Icon.cjs");
+const Modal = require("../../overlay/Modal.cjs");
+const Tree = require("../../data/Tree.cjs");
+const utils = require("../../lib/utils.cjs");
+const jsonPathTree = require("../../components/jsonPathTree.cjs");
+const jsonPathSample = require("../query/jsonPathSample.cjs");
+const celPath = require("./celPath.cjs");
+const celExpression = require("./celExpression.cjs");
+const UiWarningTriangle = require("../../icons/components/UiWarningTriangle.cjs");
+const UiArrowRight = require("../../icons/components/UiArrowRight.cjs");
+const UiCheck = require("../../icons/components/UiCheck.cjs");
+const UiCode2 = require("../../icons/components/UiCode2.cjs");
+const UiSparkles = require("../../icons/components/UiSparkles.cjs");
+const SCOPE_LABEL = {
+  row: "Row",
+  batch: "Batch",
+  boundary: "Boundary"
+};
+function scopeOf(schema) {
+  const declared = schema["x-clicky-cel-scope"];
+  return declared === "batch" || declared === "boundary" ? declared : "row";
+}
+function CelEditorDialog(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal.Modal, { open: true, onClose: props.onClose, title: `Expression — ${props.title}`, size: "xl", children: /* @__PURE__ */ jsxRuntime.jsx(CelEditorPanel, { ...props }) });
+}
+function CelEditorPanel({ value, scope, rows, onChange, onClose }) {
+  const [draft, setDraft] = react.useState(value);
+  const [focused, setFocused] = react.useState(0);
+  const [picked, setPicked] = react.useState(void 0);
+  const input = react.useRef(null);
+  const insert = (text) => {
+    const element = input.current;
+    setDraft((current) => {
+      const start = (element == null ? void 0 : element.selectionStart) ?? current.length;
+      const end = (element == null ? void 0 : element.selectionEnd) ?? current.length;
+      return current.slice(0, start) + text + current.slice(end);
+    });
+    queueMicrotask(() => {
+      element == null ? void 0 : element.focus();
+      const at = ((element == null ? void 0 : element.selectionStart) ?? 0) + text.length;
+      element == null ? void 0 : element.setSelectionRange(at, at);
+    });
+  };
+  const { data, isFetching, error } = reactQuery.useQuery({
+    queryKey: ["cel-expression", scope, draft, rows.length],
+    enabled: draft.trim() !== "" && rows.length > 0,
+    staleTime: Infinity,
+    retry: false,
+    refetchOnWindowFocus: false,
+    queryFn: () => celExpression.evaluateCel({ cel: draft, scope, rows })
+  });
+  const results = (data == null ? void 0 : data.results) ?? [];
+  const found = react.useMemo(() => celExpression.coverage(results), [results]);
+  const focusedResult = results.find((result) => result.index === focused) ?? results[0];
+  const jump = celExpression.nextBarren(found, focused);
+  const row = rows[focused];
+  const bindings = celExpression.bindingsFor(scope, row);
+  const unreachable = celExpression.unreachableKeys(row);
+  const tree = react.useMemo(
+    () => jsonPathTree.createLazyJSONPathTree(row, { keyPrefix: `row${focused}:` }),
+    [row, focused]
+  );
+  const pickedPath = picked ? celPath.celPathFor(picked) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "info", variant: "soft", size: "md", children: [
+        SCOPE_LABEL[scope],
+        " scope"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: rows.length === 0 ? "nothing sampled yet" : `${rows.length} sampled rows` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,0.7fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: input,
+            className: "h-24 w-full resize-none rounded border border-border bg-background p-2 font-mono text-xs",
+            value: draft,
+            onChange: (event) => setDraft(event.target.value),
+            "aria-label": "CEL expression"
+          }
+        ),
+        (data == null ? void 0 : data.error) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex gap-1.5 rounded border border-amber-500/40 bg-amber-500/[0.06] px-2 py-1 text-[11px] text-amber-700 [[data-theme=dark]_&]:text-amber-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiWarningTriangle.UiWarningTriangle, className: "mt-0.5 shrink-0 text-[12px]" }),
+          data.error
+        ] }),
+        error instanceof Error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded border border-destructive/40 bg-destructive/[0.06] px-2 py-1 text-[11px] text-destructive", children: error.message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ResultStrip,
+          {
+            result: focusedResult,
+            index: focused,
+            pending: isFetching,
+            draft,
+            onFix: setDraft
+          }
+        ),
+        pickedPath && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 rounded border border-border bg-muted/30 p-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-[11px] text-primary", children: pickedPath }),
+            /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", variant: "outline", onClick: () => insert(pickedPath), children: "Insert" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: celExpression.celExamplesFor(pickedPath, picked == null ? void 0 : picked.value).map((example) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: example.expression,
+              className: "rounded-full border border-border px-2 py-0.5 text-[10px] hover:bg-muted",
+              onClick: () => setDraft(example.expression),
+              children: example.label
+            },
+            example.label
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Tally, { ok: found.ok, empty: found.empty, failed: found.failed }),
+          jump !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { size: "sm", variant: "outline", className: "gap-1.5", onClick: () => setFocused(jump), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowRight.UiArrowRight, className: "text-[12px]" }),
+            "Next empty row"
+          ] }),
+          found.types.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "warning", variant: "soft", size: "md", children: [
+            "returns ",
+            found.types.join(" | ")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Coverage, { results, rowCount: rows.length, focused, onFocus: setFocused })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2 rounded-lg border border-border bg-muted/20 p-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold", children: "In scope" }),
+          rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "neutral", variant: "soft", size: "md", children: [
+            "row ",
+            focused + 1
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-0.5", children: bindings.filter((binding) => binding.value === void 0).map((binding) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-baseline gap-1.5 rounded px-1 py-0.5 text-left hover:bg-muted",
+            onClick: () => insert(binding.name),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "shrink-0 font-mono text-[11px] text-primary", children: binding.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground", children: binding.detail })
+            ]
+          }
+        ) }, binding.name)) }),
+        row && // Tree sizes to its parent and has no height of its own, so the
+        // box has to bound it or the panel grows with the document.
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-72 min-h-0 flex-col overflow-hidden rounded border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Tree.Tree,
+          {
+            className: "min-h-0 flex-1",
+            ariaLabel: "Row values",
+            showControls: false,
+            roots: tree.roots,
+            getKey: (node) => node.key,
+            getChildren: tree.getChildren,
+            hasMoreChildren: tree.hasMoreChildren,
+            loadChildren: tree.loadChildren,
+            defaultOpen: (_, depth) => depth < 1,
+            selected: picked ?? null,
+            onSelect: setPicked,
+            getSearchText: (node) => `${node.key} ${node.summary}`,
+            renderRow: ({ node }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5", title: node.path, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "shrink-0 font-mono text-[11px] text-primary", children: node.path === "$" ? "row" : lastSegment(node.path) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground", children: node.summary })
+            ] })
+          }
+        ) }),
+        scope !== "row" && unreachable.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "border-t border-border/60 pt-1 text-[10px] text-muted-foreground", children: [
+          "Reachable only through ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: "row" }),
+          ", not as a bare name:",
+          " ",
+          unreachable.map((key) => /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "font-mono", children: [
+            key,
+            " "
+          ] }, key))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex flex-wrap items-center gap-2 border-t border-border pt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          size: "sm",
+          className: "gap-1.5",
+          onClick: () => {
+            onChange(draft);
+            onClose();
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-[12px]" }),
+            "Apply"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", variant: "ghost", onClick: onClose, children: "Cancel" }),
+      !celExpression.isClean(found) && results.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+        found.empty + found.failed,
+        " of ",
+        results.length,
+        " sampled rows produce nothing — applying anyway is a choice, not a mistake, but it should be one you make on purpose."
+      ] })
+    ] })
+  ] });
+}
+function Tally({ ok, empty, failed }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "success", variant: "soft", size: "md", children: [
+      ok,
+      " evaluated"
+    ] }),
+    empty > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "warning", variant: "soft", size: "md", children: [
+      empty,
+      " empty"
+    ] }),
+    failed > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "danger", variant: "soft", size: "md", icon: UiWarningTriangle.UiWarningTriangle, children: [
+      failed,
+      " failed"
+    ] })
+  ] });
+}
+function preview(value) {
+  if (value === null || value === void 0) return "null";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function lastSegment(path) {
+  var _a;
+  const match = /\.([^.[\]]+)$|\[([^[\]]+)\]$/.exec(path);
+  return (match == null ? void 0 : match[1]) ?? ((_a = match == null ? void 0 : match[2]) == null ? void 0 : _a.replace(/^"|"$/g, "")) ?? path;
+}
+function ResultStrip({
+  result,
+  index,
+  pending,
+  draft,
+  onFix
+}) {
+  if (result == null ? void 0 : result.error) {
+    const failure = celExpression.explainCelError(result.error, draft);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 rounded border border-destructive/40 bg-destructive/[0.06] p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[11px] font-medium text-destructive", children: [
+        "row ",
+        index + 1,
+        " — evaluation failed"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-destructive", children: failure.message }),
+      failure.fix && /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { size: "sm", variant: "outline", className: "gap-1.5", onClick: () => onFix(failure.fix), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSparkles.UiSparkles, className: "text-[12px]" }),
+        "Fix it"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "code",
+        {
+          className: "block break-all font-mono text-[10px] text-muted-foreground",
+          title: result.error,
+          children: failure.raw
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2 rounded border border-border bg-muted/40 p-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] font-medium", children: [
+      "row ",
+      index + 1
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowRight.UiArrowRight, className: "text-[11px] text-muted-foreground" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        className: utils.cn(
+          "min-w-0 flex-1 truncate font-mono text-[11px]",
+          (result == null ? void 0 : result.value) === null || (result == null ? void 0 : result.value) === void 0 ? "text-muted-foreground" : ""
+        ),
+        children: pending ? "…" : preview(result == null ? void 0 : result.value)
+      }
+    ),
+    (result == null ? void 0 : result.type) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-muted px-1 text-[10px] text-muted-foreground", children: result.type })
+  ] });
+}
+function Coverage({
+  results,
+  rowCount,
+  focused,
+  onFocus
+}) {
+  if (rowCount === 0) return null;
+  const byIndex = new Map(results.map((result) => [result.index, result]));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: "Sample coverage" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-0.5", children: Array.from({ length: rowCount }, (_, index) => {
+      const result = byIndex.get(index);
+      const failed = Boolean(result == null ? void 0 : result.error);
+      const empty = !failed && ((result == null ? void 0 : result.value) === null || (result == null ? void 0 : result.value) === void 0);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Row ${index + 1}`,
+          onClick: () => onFocus(index),
+          className: utils.cn(
+            "h-5 w-5 rounded-sm border text-[9px] tabular-nums",
+            failed ? "border-destructive/50 bg-destructive/20 text-destructive" : empty ? "border-border bg-muted text-muted-foreground" : "border-green-600/40 bg-green-500/20 text-green-800 [[data-theme=dark]_&]:text-green-300",
+            index === focused && "ring-2 ring-primary ring-offset-1"
+          ),
+          children: index + 1
+        },
+        index
+      );
+    }) })
+  ] });
+}
+function CelTestButton({
+  value,
+  scope,
+  rows,
+  title,
+  disabled,
+  onChange
+}) {
+  const [open, setOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        size: "sm",
+        variant: "outline",
+        className: "shrink-0 gap-1",
+        onClick: () => setOpen(true),
+        ...disabled === void 0 ? {} : { disabled },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCode2.UiCode2, className: "text-[12px]" }),
+          "Test"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      CelEditorDialog,
+      {
+        value,
+        scope,
+        rows: rows.filter(isRecord),
+        title,
+        onChange,
+        onClose: () => setOpen(false)
+      }
+    )
+  ] });
+}
+function CelField({ field, ctx }) {
+  const rows = jsonPathSample.useJsonPathSample(ctx == null ? void 0 : ctx.rootValue);
+  const value = field.value ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "w-full rounded border border-border bg-card px-2 py-1 font-mono text-xs",
+        value,
+        onChange: (event) => field.onChange(event.target.value),
+        "aria-label": "CEL expression",
+        ...field.readOnly === void 0 ? {} : { disabled: field.readOnly }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CelTestButton,
+      {
+        value,
+        scope: scopeOf(field.schema),
+        rows,
+        title: String(field.schema.title ?? "CEL"),
+        disabled: field.readOnly === true,
+        onChange: (next) => field.onChange(next)
+      }
+    )
+  ] });
+}
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+exports.CelEditorDialog = CelEditorDialog;
+exports.CelEditorPanel = CelEditorPanel;
+exports.CelField = CelField;
+exports.CelTestButton = CelTestButton;
+//# sourceMappingURL=celEditor.cjs.map