@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/overlay/CommandPalette.js

@@ -0,0 +1,207 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { useHotkey } from "../hooks/use-hotkey.js";
+import { useEscapeLayer, useModalStack } from "./modalStack.js";
+import { zIndex } from "./zIndex.js";
+import { CommandPaletteList } from "./CommandPaletteList.js";
+import { filterCommandGroups, defaultCommandFilter, flattenCommands, firstEnabledIndex, lastEnabledIndex, nextEnabledIndex } from "./CommandPalette.model.js";
+import { UiSearch } from "../icons/components/UiSearch.js";
+const SIZE_CLASS = {
+  md: "max-w-[40rem]",
+  lg: "max-w-[48rem]"
+};
+function CommandPalette({
+  open,
+  onOpenChange,
+  groups,
+  query,
+  onQueryChange,
+  hotkey = "mod+k",
+  placeholder = "Type a command or search…",
+  loading,
+  emptyState,
+  footer,
+  filter = defaultCommandFilter,
+  onSelect,
+  closeOnSelect = true,
+  resetQueryOnClose = true,
+  size = "md",
+  topOffset = "12vh",
+  listMaxHeight = "min(24rem, 50dvh)",
+  ariaLabel = "Command palette",
+  className
+}) {
+  const baseId = useId();
+  const [selfOpen, setSelfOpen] = useState(false);
+  const [selfQuery, setSelfQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const isOpen = open ?? selfOpen;
+  const currentQuery = query ?? selfQuery;
+  const setOpen = useCallback(
+    (next) => {
+      if (open === void 0) setSelfOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [open, onOpenChange]
+  );
+  const setQuery = useCallback(
+    (next) => {
+      if (query === void 0) setSelfQuery(next);
+      onQueryChange == null ? void 0 : onQueryChange(next);
+    },
+    [query, onQueryChange]
+  );
+  const visibleGroups = useMemo(
+    () => filterCommandGroups(groups, currentQuery, filter),
+    [groups, currentQuery, filter]
+  );
+  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);
+  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });
+  useEscapeLayer(isOpen, () => setOpen(false));
+  const { depth } = useModalStack(isOpen);
+  useEffect(() => {
+    setActiveIndex(firstEnabledIndex(items));
+  }, [items]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!isOpen) {
+      if (resetQueryOnClose && query === void 0) setSelfQuery("");
+      (_b = (_a = restoreFocusRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      restoreFocusRef.current = null;
+      return;
+    }
+    restoreFocusRef.current = document.activeElement;
+    (_c = inputRef.current) == null ? void 0 : _c.focus();
+  }, [isOpen, resetQueryOnClose, query]);
+  useEffect(() => {
+    var _a;
+    if (activeIndex < 0) return;
+    const option = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll('[role="option"]')[activeIndex];
+    if (option instanceof HTMLElement && typeof option.scrollIntoView === "function") {
+      option.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  const optionId = useCallback((item) => `${baseId}-option-${item.id}`, [baseId]);
+  const activate = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      const close = () => setOpen(false);
+      const context = { item, query: currentQuery.trim(), close };
+      if (item.onSelect) item.onSelect(context);
+      else onSelect == null ? void 0 : onSelect(context);
+      if (closeOnSelect) close();
+    },
+    [currentQuery, onSelect, closeOnSelect, setOpen]
+  );
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveIndex((current) => nextEnabledIndex(items, current, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveIndex((current) => nextEnabledIndex(items, current, -1));
+        break;
+      case "Home":
+        event.preventDefault();
+        setActiveIndex(firstEnabledIndex(items));
+        break;
+      case "End":
+        event.preventDefault();
+        setActiveIndex(lastEnabledIndex(items));
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);
+        const item = index >= 0 ? items[index] : void 0;
+        if (item) activate(item);
+        break;
+      }
+      case "Tab":
+        if (!footer) event.preventDefault();
+        break;
+    }
+  };
+  if (!isOpen || typeof document === "undefined") return null;
+  const activeItem = activeIndex >= 0 ? items[activeIndex] : void 0;
+  const listId = `${baseId}-list`;
+  const overlay = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 flex justify-center p-density-4",
+        depth === 0 ? "bg-black/40" : "bg-black/20"
+      ),
+      style: { zIndex: zIndex.modal + depth * zIndex.modalStep },
+      role: "presentation",
+      onClick: () => setOpen(false),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          className: cn(
+            "flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+            SIZE_CLASS[size],
+            className
+          ),
+          style: { marginTop: topOffset },
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-2 border-b border-border px-density-3", children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  role: "combobox",
+                  "aria-expanded": true,
+                  "aria-controls": listId,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": activeItem ? optionId(activeItem) : void 0,
+                  "aria-label": ariaLabel,
+                  value: currentQuery,
+                  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"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              CommandPaletteList,
+              {
+                groups: visibleGroups,
+                items,
+                activeIndex,
+                listId,
+                optionId,
+                onActivate: activate,
+                onHover: setActiveIndex,
+                listRef,
+                loading,
+                emptyState,
+                listMaxHeight
+              }
+            ),
+            footer && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground", children: footer })
+          ]
+        }
+      )
+    }
+  );
+  return createPortal(overlay, document.body);
+}
+export {
+  CommandPalette
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/overlay/CommandPalette.js.map

@@ -0,0 +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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"}

package/dist/overlay/CommandPalette.model.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function defaultCommandFilter(item, query) {
+  var _a;
+  const needle = query.trim().toLowerCase();
+  if (!needle) return 1;
+  const label = item.label.toLowerCase();
+  const labelIndex = label.indexOf(needle);
+  if (labelIndex === 0) return 1e3;
+  if (labelIndex > 0) return 800 - Math.min(labelIndex, 100);
+  const description = ((_a = item.description) == null ? void 0 : _a.toLowerCase()) ?? "";
+  const descriptionIndex = description.indexOf(needle);
+  if (descriptionIndex >= 0) return 500 - Math.min(descriptionIndex, 100);
+  const keywordHit = (item.keywords ?? []).some(
+    (keyword) => keyword.toLowerCase().includes(needle)
+  );
+  return keywordHit ? 300 : 0;
+}
+function score(filter, item, query) {
+  const result = filter(item, query);
+  if (result === true) return 1;
+  if (result === false) return 0;
+  return result;
+}
+function filterCommandGroups(groups, query, filter = defaultCommandFilter) {
+  const result = [];
+  for (const group of groups) {
+    let items;
+    if (filter === false) {
+      items = group.items;
+    } else {
+      const scored = group.items.map((item) => ({ item, value: score(filter, item, query) })).filter((entry) => entry.value > 0);
+      scored.sort((a, b) => b.value - a.value);
+      items = scored.map((entry) => entry.item);
+    }
+    if (group.limit !== void 0) items = items.slice(0, group.limit);
+    if (items.length > 0) result.push({ ...group, items });
+  }
+  return result;
+}
+function flattenCommands(groups) {
+  return groups.flatMap((group) => group.items);
+}
+function nextEnabledIndex(items, from, direction) {
+  var _a;
+  if (items.length === 0) return -1;
+  for (let step = 1; step <= items.length; step += 1) {
+    const index = ((from + direction * step) % items.length + items.length) % items.length;
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled)) return index;
+  }
+  return -1;
+}
+function firstEnabledIndex(items) {
+  const index = items.findIndex((item) => !item.disabled);
+  return index;
+}
+function lastEnabledIndex(items) {
+  var _a;
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled)) return index;
+  }
+  return -1;
+}
+exports.defaultCommandFilter = defaultCommandFilter;
+exports.filterCommandGroups = filterCommandGroups;
+exports.firstEnabledIndex = firstEnabledIndex;
+exports.flattenCommands = flattenCommands;
+exports.lastEnabledIndex = lastEnabledIndex;
+exports.nextEnabledIndex = nextEnabledIndex;
+//# sourceMappingURL=CommandPalette.model.cjs.map

package/dist/overlay/CommandPalette.model.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.model.cjs","sources":["../../src/overlay/CommandPalette.model.ts"],"sourcesContent":["// Types and pure helpers for CommandPalette. Kept React-free so the filtering,\n// ranking, and keyboard-index math are unit-testable without a DOM.\n\nimport type { ReactNode } from \"react\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\n/** Context handed to a command's `onSelect`. */\nexport type CommandSelectContext = {\n  /** The item that was activated. */\n  item: CommandItem;\n  /** The query at the moment of activation, trimmed. */\n  query: string;\n  /** Closes the palette — call this from a handler that opted out of `closeOnSelect`. */\n  close: () => void;\n};\n\n/** A single runnable command row. */\nexport type CommandItem = {\n  /** Stable identity; the React key and the `aria-activedescendant` target. Must be unique across all groups. */\n  id: string;\n  /** Primary text, and the main field the default filter matches. */\n  label: string;\n  /** Secondary text rendered muted after the label. Also matched, at lower weight. */\n  description?: string;\n  /** Extra match terms that are never displayed — aliases, verbs, ids. */\n  keywords?: string[];\n  /** Leading glyph: a runtime icon name or a generated `Ui*` component. */\n  icon?: string | StaticIconComponent;\n  /** Keyboard hint rendered as a trailing `<kbd>`. Display only — the palette does not bind it. */\n  shortcut?: string;\n  /** Trailing content (a badge, a count). Must not be focusable: it lives inside `role=\"option\"`. */\n  trailing?: ReactNode;\n  /** Dims the row, skips it during arrow navigation, and blocks Enter. */\n  disabled?: boolean;\n  /** Runs when the row is activated. Falls back to the palette's `onSelect`. */\n  onSelect?: (context: CommandSelectContext) => void;\n};\n\n/** A titled block of commands. Groups render in array order regardless of match quality. */\nexport type CommandGroup = {\n  /** Stable identity; the React key and the heading's element id. */\n  id: string;\n  /** Section header. Omit for an unlabelled block. */\n  heading?: string;\n  items: CommandItem[];\n  /** Cap on rows shown after filtering. Use for \"top N results\" sources. */\n  limit?: number;\n};\n\n/** Scores an item against a query. Higher wins; `0`/`false` hides the row. */\nexport type CommandFilter = (item: CommandItem, query: string) => number | boolean;\n\n/**\n * Default matcher: case-insensitive substring over label, description, and\n * keywords. A hit earlier in the label outranks a later one, and a label hit\n * outranks a description or keyword hit, so the most obvious match sorts first.\n */\nexport function defaultCommandFilter(item: CommandItem, query: string): number {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return 1;\n\n  const label = item.label.toLowerCase();\n  const labelIndex = label.indexOf(needle);\n  if (labelIndex === 0) return 1000;\n  if (labelIndex > 0) return 800 - Math.min(labelIndex, 100);\n\n  const description = item.description?.toLowerCase() ?? \"\";\n  const descriptionIndex = description.indexOf(needle);\n  if (descriptionIndex >= 0) return 500 - Math.min(descriptionIndex, 100);\n\n  const keywordHit = (item.keywords ?? []).some((keyword) =>\n    keyword.toLowerCase().includes(needle),\n  );\n  return keywordHit ? 300 : 0;\n}\n\nfunction score(filter: CommandFilter, item: CommandItem, query: string): number {\n  const result = filter(item, query);\n  if (result === true) return 1;\n  if (result === false) return 0;\n  return result;\n}\n\n/**\n * Filters and ranks each group, dropping groups left empty. Group order is\n * preserved — only items move — so the palette's sections stay where the\n * consumer put them. Pass `filter: false` when the caller already filtered\n * server-side; groups then pass through untouched apart from `limit`.\n */\nexport function filterCommandGroups(\n  groups: CommandGroup[],\n  query: string,\n  filter: CommandFilter | false = defaultCommandFilter,\n): CommandGroup[] {\n  const result: CommandGroup[] = [];\n\n  for (const group of groups) {\n    let items: CommandItem[];\n\n    if (filter === false) {\n      items = group.items;\n    } else {\n      const scored = group.items\n        .map((item) => ({ item, value: score(filter, item, query) }))\n        .filter((entry) => entry.value > 0);\n      // Stable within equal scores: sort() is stable in every engine we target,\n      // so equally-ranked items keep their authored order.\n      scored.sort((a, b) => b.value - a.value);\n      items = scored.map((entry) => entry.item);\n    }\n\n    if (group.limit !== undefined) items = items.slice(0, group.limit);\n    if (items.length > 0) result.push({ ...group, items });\n  }\n\n  return result;\n}\n\n/** Flattens groups to the row order the listbox renders, for index math. */\nexport function flattenCommands(groups: CommandGroup[]): CommandItem[] {\n  return groups.flatMap((group) => group.items);\n}\n\n/**\n * Next selectable index in `direction`, skipping disabled rows and wrapping at\n * both ends. Returns `-1` when nothing is selectable. Wrapping suits a palette:\n * lists are query-scoped and short, so \"up from the top\" should reach the last\n * row in one press.\n */\nexport function nextEnabledIndex(\n  items: CommandItem[],\n  from: number,\n  direction: 1 | -1,\n): number {\n  if (items.length === 0) return -1;\n\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (((from + direction * step) % items.length) + items.length) % items.length;\n    if (!items[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/** First selectable index, or `-1` when every row is disabled. */\nexport function firstEnabledIndex(items: CommandItem[]): number {\n  const index = items.findIndex((item) => !item.disabled);\n  return index;\n}\n\n/** Last selectable index, or `-1` when every row is disabled. */\nexport function lastEnabledIndex(items: CommandItem[]): number {\n  for (let index = items.length - 1; index >= 0; index -= 1) {\n    if (!items[index]?.disabled) return index;\n  }\n  return -1;\n}\n"],"names":[],"mappings":";;AAyDO,SAAS,qBAAqB,MAAmB,OAAuB;;AAC7E,QAAM,SAAS,MAAM,KAAA,EAAO,YAAA;AAC5B,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,QAAQ,KAAK,MAAM,YAAA;AACzB,QAAM,aAAa,MAAM,QAAQ,MAAM;AACvC,MAAI,eAAe,EAAG,QAAO;AAC7B,MAAI,aAAa,EAAG,QAAO,MAAM,KAAK,IAAI,YAAY,GAAG;AAEzD,QAAM,gBAAc,UAAK,gBAAL,mBAAkB,kBAAiB;AACvD,QAAM,mBAAmB,YAAY,QAAQ,MAAM;AACnD,MAAI,oBAAoB,EAAG,QAAO,MAAM,KAAK,IAAI,kBAAkB,GAAG;AAEtE,QAAM,cAAc,KAAK,YAAY,CAAA,GAAI;AAAA,IAAK,CAAC,YAC7C,QAAQ,YAAA,EAAc,SAAS,MAAM;AAAA,EAAA;AAEvC,SAAO,aAAa,MAAM;AAC5B;AAEA,SAAS,MAAM,QAAuB,MAAmB,OAAuB;AAC9E,QAAM,SAAS,OAAO,MAAM,KAAK;AACjC,MAAI,WAAW,KAAM,QAAO;AAC5B,MAAI,WAAW,MAAO,QAAO;AAC7B,SAAO;AACT;AAQO,SAAS,oBACd,QACA,OACA,SAAgC,sBAChB;AAChB,QAAM,SAAyB,CAAA;AAE/B,aAAW,SAAS,QAAQ;AAC1B,QAAI;AAEJ,QAAI,WAAW,OAAO;AACpB,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,YAAM,SAAS,MAAM,MAClB,IAAI,CAAC,UAAU,EAAE,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,EAC3D,OAAO,CAAC,UAAU,MAAM,QAAQ,CAAC;AAGpC,aAAO,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACvC,cAAQ,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAAA,IAC1C;AAEA,QAAI,MAAM,UAAU,OAAW,SAAQ,MAAM,MAAM,GAAG,MAAM,KAAK;AACjE,QAAI,MAAM,SAAS,EAAG,QAAO,KAAK,EAAE,GAAG,OAAO,OAAO;AAAA,EACvD;AAEA,SAAO;AACT;AAGO,SAAS,gBAAgB,QAAuC;AACrE,SAAO,OAAO,QAAQ,CAAC,UAAU,MAAM,KAAK;AAC9C;AAQO,SAAS,iBACd,OACA,MACA,WACQ;;AACR,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,WAAS,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;AAClD,UAAM,UAAW,OAAO,YAAY,QAAQ,MAAM,SAAU,MAAM,UAAU,MAAM;AAClF,QAAI,GAAC,WAAM,KAAK,MAAX,mBAAc,UAAU,QAAO;AAAA,EACtC;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,OAA8B;AAC9D,QAAM,QAAQ,MAAM,UAAU,CAAC,SAAS,CAAC,KAAK,QAAQ;AACtD,SAAO;AACT;AAGO,SAAS,iBAAiB,OAA8B;;AAC7D,WAAS,QAAQ,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG;AACzD,QAAI,GAAC,WAAM,KAAK,MAAX,mBAAc,UAAU,QAAO;AAAA,EACtC;AACA,SAAO;AACT;;;;;;;"}

package/dist/overlay/CommandPalette.model.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
+/** Context handed to a command's `onSelect`. */
+export type CommandSelectContext = {
+    /** The item that was activated. */
+    item: CommandItem;
+    /** The query at the moment of activation, trimmed. */
+    query: string;
+    /** Closes the palette — call this from a handler that opted out of `closeOnSelect`. */
+    close: () => void;
+};
+/** A single runnable command row. */
+export type CommandItem = {
+    /** Stable identity; the React key and the `aria-activedescendant` target. Must be unique across all groups. */
+    id: string;
+    /** Primary text, and the main field the default filter matches. */
+    label: string;
+    /** Secondary text rendered muted after the label. Also matched, at lower weight. */
+    description?: string;
+    /** Extra match terms that are never displayed — aliases, verbs, ids. */
+    keywords?: string[];
+    /** Leading glyph: a runtime icon name or a generated `Ui*` component. */
+    icon?: string | StaticIconComponent;
+    /** Keyboard hint rendered as a trailing `<kbd>`. Display only — the palette does not bind it. */
+    shortcut?: string;
+    /** Trailing content (a badge, a count). Must not be focusable: it lives inside `role="option"`. */
+    trailing?: ReactNode;
+    /** Dims the row, skips it during arrow navigation, and blocks Enter. */
+    disabled?: boolean;
+    /** Runs when the row is activated. Falls back to the palette's `onSelect`. */
+    onSelect?: (context: CommandSelectContext) => void;
+};
+/** A titled block of commands. Groups render in array order regardless of match quality. */
+export type CommandGroup = {
+    /** Stable identity; the React key and the heading's element id. */
+    id: string;
+    /** Section header. Omit for an unlabelled block. */
+    heading?: string;
+    items: CommandItem[];
+    /** Cap on rows shown after filtering. Use for "top N results" sources. */
+    limit?: number;
+};
+/** Scores an item against a query. Higher wins; `0`/`false` hides the row. */
+export type CommandFilter = (item: CommandItem, query: string) => number | boolean;
+/**
+ * Default matcher: case-insensitive substring over label, description, and
+ * keywords. A hit earlier in the label outranks a later one, and a label hit
+ * outranks a description or keyword hit, so the most obvious match sorts first.
+ */
+export declare function defaultCommandFilter(item: CommandItem, query: string): number;
+/**
+ * Filters and ranks each group, dropping groups left empty. Group order is
+ * preserved — only items move — so the palette's sections stay where the
+ * consumer put them. Pass `filter: false` when the caller already filtered
+ * server-side; groups then pass through untouched apart from `limit`.
+ */
+export declare function filterCommandGroups(groups: CommandGroup[], query: string, filter?: CommandFilter | false): CommandGroup[];
+/** Flattens groups to the row order the listbox renders, for index math. */
+export declare function flattenCommands(groups: CommandGroup[]): CommandItem[];
+/**
+ * Next selectable index in `direction`, skipping disabled rows and wrapping at
+ * both ends. Returns `-1` when nothing is selectable. Wrapping suits a palette:
+ * lists are query-scoped and short, so "up from the top" should reach the last
+ * row in one press.
+ */
+export declare function nextEnabledIndex(items: CommandItem[], from: number, direction: 1 | -1): number;
+/** First selectable index, or `-1` when every row is disabled. */
+export declare function firstEnabledIndex(items: CommandItem[]): number;
+/** Last selectable index, or `-1` when every row is disabled. */
+export declare function lastEnabledIndex(items: CommandItem[]): number;
+//# sourceMappingURL=CommandPalette.model.d.ts.map

package/dist/overlay/CommandPalette.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.model.d.ts","sourceRoot":"","sources":["../../src/overlay/CommandPalette.model.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,gDAAgD;AAChD,MAAM,MAAM,oBAAoB,GAAG;IACjC,mCAAmC;IACnC,IAAI,EAAE,WAAW,CAAC;IAClB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG;IACxB,+GAA+G;IAC/G,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,4FAA4F;AAC5F,MAAM,MAAM,YAAY,GAAG;IACzB,mEAAmE;IACnE,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,8EAA8E;AAC9E,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC;AAEnF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAiB7E;AASD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,YAAY,EAAE,EACtB,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,aAAa,GAAG,KAA4B,GACnD,YAAY,EAAE,CAuBhB;AAED,4EAA4E;AAC5E,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,EAAE,CAErE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,EAAE,EACpB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAChB,MAAM,CAQR;AAED,kEAAkE;AAClE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM,CAG9D;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM,CAK7D"}

package/dist/overlay/CommandPalette.model.js

@@ -0,0 +1,70 @@
+function defaultCommandFilter(item, query) {
+  var _a;
+  const needle = query.trim().toLowerCase();
+  if (!needle) return 1;
+  const label = item.label.toLowerCase();
+  const labelIndex = label.indexOf(needle);
+  if (labelIndex === 0) return 1e3;
+  if (labelIndex > 0) return 800 - Math.min(labelIndex, 100);
+  const description = ((_a = item.description) == null ? void 0 : _a.toLowerCase()) ?? "";
+  const descriptionIndex = description.indexOf(needle);
+  if (descriptionIndex >= 0) return 500 - Math.min(descriptionIndex, 100);
+  const keywordHit = (item.keywords ?? []).some(
+    (keyword) => keyword.toLowerCase().includes(needle)
+  );
+  return keywordHit ? 300 : 0;
+}
+function score(filter, item, query) {
+  const result = filter(item, query);
+  if (result === true) return 1;
+  if (result === false) return 0;
+  return result;
+}
+function filterCommandGroups(groups, query, filter = defaultCommandFilter) {
+  const result = [];
+  for (const group of groups) {
+    let items;
+    if (filter === false) {
+      items = group.items;
+    } else {
+      const scored = group.items.map((item) => ({ item, value: score(filter, item, query) })).filter((entry) => entry.value > 0);
+      scored.sort((a, b) => b.value - a.value);
+      items = scored.map((entry) => entry.item);
+    }
+    if (group.limit !== void 0) items = items.slice(0, group.limit);
+    if (items.length > 0) result.push({ ...group, items });
+  }
+  return result;
+}
+function flattenCommands(groups) {
+  return groups.flatMap((group) => group.items);
+}
+function nextEnabledIndex(items, from, direction) {
+  var _a;
+  if (items.length === 0) return -1;
+  for (let step = 1; step <= items.length; step += 1) {
+    const index = ((from + direction * step) % items.length + items.length) % items.length;
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled)) return index;
+  }
+  return -1;
+}
+function firstEnabledIndex(items) {
+  const index = items.findIndex((item) => !item.disabled);
+  return index;
+}
+function lastEnabledIndex(items) {
+  var _a;
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled)) return index;
+  }
+  return -1;
+}
+export {
+  defaultCommandFilter,
+  filterCommandGroups,
+  firstEnabledIndex,
+  flattenCommands,
+  lastEnabledIndex,
+  nextEnabledIndex
+};
+//# sourceMappingURL=CommandPalette.model.js.map

package/dist/overlay/CommandPalette.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.model.js","sources":["../../src/overlay/CommandPalette.model.ts"],"sourcesContent":["// Types and pure helpers for CommandPalette. Kept React-free so the filtering,\n// ranking, and keyboard-index math are unit-testable without a DOM.\n\nimport type { ReactNode } from \"react\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\n/** Context handed to a command's `onSelect`. */\nexport type CommandSelectContext = {\n  /** The item that was activated. */\n  item: CommandItem;\n  /** The query at the moment of activation, trimmed. */\n  query: string;\n  /** Closes the palette — call this from a handler that opted out of `closeOnSelect`. */\n  close: () => void;\n};\n\n/** A single runnable command row. */\nexport type CommandItem = {\n  /** Stable identity; the React key and the `aria-activedescendant` target. Must be unique across all groups. */\n  id: string;\n  /** Primary text, and the main field the default filter matches. */\n  label: string;\n  /** Secondary text rendered muted after the label. Also matched, at lower weight. */\n  description?: string;\n  /** Extra match terms that are never displayed — aliases, verbs, ids. */\n  keywords?: string[];\n  /** Leading glyph: a runtime icon name or a generated `Ui*` component. */\n  icon?: string | StaticIconComponent;\n  /** Keyboard hint rendered as a trailing `<kbd>`. Display only — the palette does not bind it. */\n  shortcut?: string;\n  /** Trailing content (a badge, a count). Must not be focusable: it lives inside `role=\"option\"`. */\n  trailing?: ReactNode;\n  /** Dims the row, skips it during arrow navigation, and blocks Enter. */\n  disabled?: boolean;\n  /** Runs when the row is activated. Falls back to the palette's `onSelect`. */\n  onSelect?: (context: CommandSelectContext) => void;\n};\n\n/** A titled block of commands. Groups render in array order regardless of match quality. */\nexport type CommandGroup = {\n  /** Stable identity; the React key and the heading's element id. */\n  id: string;\n  /** Section header. Omit for an unlabelled block. */\n  heading?: string;\n  items: CommandItem[];\n  /** Cap on rows shown after filtering. Use for \"top N results\" sources. */\n  limit?: number;\n};\n\n/** Scores an item against a query. Higher wins; `0`/`false` hides the row. */\nexport type CommandFilter = (item: CommandItem, query: string) => number | boolean;\n\n/**\n * Default matcher: case-insensitive substring over label, description, and\n * keywords. A hit earlier in the label outranks a later one, and a label hit\n * outranks a description or keyword hit, so the most obvious match sorts first.\n */\nexport function defaultCommandFilter(item: CommandItem, query: string): number {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return 1;\n\n  const label = item.label.toLowerCase();\n  const labelIndex = label.indexOf(needle);\n  if (labelIndex === 0) return 1000;\n  if (labelIndex > 0) return 800 - Math.min(labelIndex, 100);\n\n  const description = item.description?.toLowerCase() ?? \"\";\n  const descriptionIndex = description.indexOf(needle);\n  if (descriptionIndex >= 0) return 500 - Math.min(descriptionIndex, 100);\n\n  const keywordHit = (item.keywords ?? []).some((keyword) =>\n    keyword.toLowerCase().includes(needle),\n  );\n  return keywordHit ? 300 : 0;\n}\n\nfunction score(filter: CommandFilter, item: CommandItem, query: string): number {\n  const result = filter(item, query);\n  if (result === true) return 1;\n  if (result === false) return 0;\n  return result;\n}\n\n/**\n * Filters and ranks each group, dropping groups left empty. Group order is\n * preserved — only items move — so the palette's sections stay where the\n * consumer put them. Pass `filter: false` when the caller already filtered\n * server-side; groups then pass through untouched apart from `limit`.\n */\nexport function filterCommandGroups(\n  groups: CommandGroup[],\n  query: string,\n  filter: CommandFilter | false = defaultCommandFilter,\n): CommandGroup[] {\n  const result: CommandGroup[] = [];\n\n  for (const group of groups) {\n    let items: CommandItem[];\n\n    if (filter === false) {\n      items = group.items;\n    } else {\n      const scored = group.items\n        .map((item) => ({ item, value: score(filter, item, query) }))\n        .filter((entry) => entry.value > 0);\n      // Stable within equal scores: sort() is stable in every engine we target,\n      // so equally-ranked items keep their authored order.\n      scored.sort((a, b) => b.value - a.value);\n      items = scored.map((entry) => entry.item);\n    }\n\n    if (group.limit !== undefined) items = items.slice(0, group.limit);\n    if (items.length > 0) result.push({ ...group, items });\n  }\n\n  return result;\n}\n\n/** Flattens groups to the row order the listbox renders, for index math. */\nexport function flattenCommands(groups: CommandGroup[]): CommandItem[] {\n  return groups.flatMap((group) => group.items);\n}\n\n/**\n * Next selectable index in `direction`, skipping disabled rows and wrapping at\n * both ends. Returns `-1` when nothing is selectable. Wrapping suits a palette:\n * lists are query-scoped and short, so \"up from the top\" should reach the last\n * row in one press.\n */\nexport function nextEnabledIndex(\n  items: CommandItem[],\n  from: number,\n  direction: 1 | -1,\n): number {\n  if (items.length === 0) return -1;\n\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (((from + direction * step) % items.length) + items.length) % items.length;\n    if (!items[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/** First selectable index, or `-1` when every row is disabled. */\nexport function firstEnabledIndex(items: CommandItem[]): number {\n  const index = items.findIndex((item) => !item.disabled);\n  return index;\n}\n\n/** Last selectable index, or `-1` when every row is disabled. */\nexport function lastEnabledIndex(items: CommandItem[]): number {\n  for (let index = items.length - 1; index >= 0; index -= 1) {\n    if (!items[index]?.disabled) return index;\n  }\n  return -1;\n}\n"],"names":[],"mappings":"AAyDO,SAAS,qBAAqB,MAAmB,OAAuB;AAAxE;AACL,QAAM,SAAS,MAAM,KAAA,EAAO,YAAA;AAC5B,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,QAAQ,KAAK,MAAM,YAAA;AACzB,QAAM,aAAa,MAAM,QAAQ,MAAM;AACvC,MAAI,eAAe,EAAG,QAAO;AAC7B,MAAI,aAAa,EAAG,QAAO,MAAM,KAAK,IAAI,YAAY,GAAG;AAEzD,QAAM,gBAAc,UAAK,gBAAL,mBAAkB,kBAAiB;AACvD,QAAM,mBAAmB,YAAY,QAAQ,MAAM;AACnD,MAAI,oBAAoB,EAAG,QAAO,MAAM,KAAK,IAAI,kBAAkB,GAAG;AAEtE,QAAM,cAAc,KAAK,YAAY,CAAA,GAAI;AAAA,IAAK,CAAC,YAC7C,QAAQ,YAAA,EAAc,SAAS,MAAM;AAAA,EAAA;AAEvC,SAAO,aAAa,MAAM;AAC5B;AAEA,SAAS,MAAM,QAAuB,MAAmB,OAAuB;AAC9E,QAAM,SAAS,OAAO,MAAM,KAAK;AACjC,MAAI,WAAW,KAAM,QAAO;AAC5B,MAAI,WAAW,MAAO,QAAO;AAC7B,SAAO;AACT;AAQO,SAAS,oBACd,QACA,OACA,SAAgC,sBAChB;AAChB,QAAM,SAAyB,CAAA;AAE/B,aAAW,SAAS,QAAQ;AAC1B,QAAI;AAEJ,QAAI,WAAW,OAAO;AACpB,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,YAAM,SAAS,MAAM,MAClB,IAAI,CAAC,UAAU,EAAE,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,EAC3D,OAAO,CAAC,UAAU,MAAM,QAAQ,CAAC;AAGpC,aAAO,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACvC,cAAQ,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAAA,IAC1C;AAEA,QAAI,MAAM,UAAU,OAAW,SAAQ,MAAM,MAAM,GAAG,MAAM,KAAK;AACjE,QAAI,MAAM,SAAS,EAAG,QAAO,KAAK,EAAE,GAAG,OAAO,OAAO;AAAA,EACvD;AAEA,SAAO;AACT;AAGO,SAAS,gBAAgB,QAAuC;AACrE,SAAO,OAAO,QAAQ,CAAC,UAAU,MAAM,KAAK;AAC9C;AAQO,SAAS,iBACd,OACA,MACA,WACQ;AA5EH;AA6EL,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,WAAS,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;AAClD,UAAM,UAAW,OAAO,YAAY,QAAQ,MAAM,SAAU,MAAM,UAAU,MAAM;AAClF,QAAI,GAAC,WAAM,KAAK,MAAX,mBAAc,UAAU,QAAO;AAAA,EACtC;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,OAA8B;AAC9D,QAAM,QAAQ,MAAM,UAAU,CAAC,SAAS,CAAC,KAAK,QAAQ;AACtD,SAAO;AACT;AAGO,SAAS,iBAAiB,OAA8B;AA7FxD;AA8FL,WAAS,QAAQ,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG;AACzD,QAAI,GAAC,WAAM,KAAK,MAAX,mBAAc,UAAU,QAAO;AAAA,EACtC;AACA,SAAO;AACT;"}

package/dist/overlay/CommandPaletteList.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+function CommandPaletteList({
+  groups,
+  items,
+  activeIndex,
+  listId,
+  optionId,
+  onActivate,
+  onHover,
+  listRef,
+  loading,
+  emptyState,
+  listMaxHeight
+}) {
+  let flatIndex = -1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      id: listId,
+      role: "listbox",
+      "aria-label": "Commands",
+      className: "overflow-y-auto overscroll-contain py-density-1",
+      style: { maxHeight: listMaxHeight },
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-3 text-sm text-muted-foreground", children: "Searching…" }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-4 text-center text-sm text-muted-foreground", children: emptyState ?? "No results" }) : groups.map((group) => {
+        const headingId = `${listId}-group-${group.id}`;
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": group.heading ? headingId : void 0, children: [
+          group.heading && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: headingId,
+              role: "presentation",
+              className: "px-density-3 pb-1 pt-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground",
+              children: group.heading
+            }
+          ),
+          group.items.map((item) => {
+            flatIndex += 1;
+            const index = flatIndex;
+            const active = index === activeIndex;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                id: optionId(item),
+                role: "option",
+                "aria-selected": active,
+                "aria-disabled": item.disabled || void 0,
+                onMouseMove: () => {
+                  if (!item.disabled) onHover(index);
+                },
+                onClick: () => {
+                  if (!item.disabled) onActivate(item);
+                },
+                className: utils.cn(
+                  "mx-density-1 flex cursor-pointer items-center gap-density-2 rounded-md px-density-2 py-1.5 text-sm",
+                  active && "bg-accent text-accent-foreground",
+                  item.disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  item.icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Icon.Icon,
+                    {
+                      ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                    item.label,
+                    item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-density-2 text-xs text-muted-foreground", children: item.description })
+                  ] }),
+                  item.trailing,
+                  item.shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
+                ]
+              },
+              item.id
+            );
+          })
+        ] }) }, group.id);
+      })
+    }
+  );
+}
+exports.CommandPaletteList = CommandPaletteList;
+//# sourceMappingURL=CommandPaletteList.cjs.map

package/dist/overlay/CommandPaletteList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteList.cjs","sources":["../../src/overlay/CommandPaletteList.tsx"],"sourcesContent":["import { Fragment, type RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport type { CommandGroup, CommandItem } from \"./CommandPalette.model\";\n\nexport type CommandPaletteListProps = {\n  groups: CommandGroup[];\n  /** Flattened rows, in render order — index space for `activeIndex`. */\n  items: CommandItem[];\n  activeIndex: number;\n  listId: string;\n  optionId: (item: CommandItem) => string;\n  onActivate: (item: CommandItem) => void;\n  onHover: (index: number) => void;\n  listRef: RefObject<HTMLDivElement>;\n  loading?: boolean | undefined;\n  emptyState?: React.ReactNode;\n  listMaxHeight: string | number;\n};\n\n/**\n * The palette's grouped listbox. Headings are `role=\"presentation\"` so the\n * option index space stays contiguous — the same trick Combobox uses to scroll\n * by `[role=\"option\"]` index.\n */\nexport function CommandPaletteList({\n  groups,\n  items,\n  activeIndex,\n  listId,\n  optionId,\n  onActivate,\n  onHover,\n  listRef,\n  loading,\n  emptyState,\n  listMaxHeight,\n}: CommandPaletteListProps) {\n  // A flat cursor walked alongside the nested render so each row knows its index\n  // in the flattened list without a lookup.\n  let flatIndex = -1;\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-label=\"Commands\"\n      className=\"overflow-y-auto overscroll-contain py-density-1\"\n      style={{ maxHeight: listMaxHeight }}\n    >\n      {loading ? (\n        <div className=\"px-density-3 py-density-3 text-sm text-muted-foreground\">Searching…</div>\n      ) : items.length === 0 ? (\n        <div className=\"px-density-3 py-density-4 text-center text-sm text-muted-foreground\">\n          {emptyState ?? \"No results\"}\n        </div>\n      ) : (\n        groups.map((group) => {\n          const headingId = `${listId}-group-${group.id}`;\n          return (\n            <Fragment key={group.id}>\n              <div role=\"group\" aria-labelledby={group.heading ? headingId : undefined}>\n                {group.heading && (\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className=\"px-density-3 pb-1 pt-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground\"\n                  >\n                    {group.heading}\n                  </div>\n                )}\n                {group.items.map((item) => {\n                  flatIndex += 1;\n                  const index = flatIndex;\n                  const active = index === activeIndex;\n                  return (\n                    <div\n                      key={item.id}\n                      id={optionId(item)}\n                      role=\"option\"\n                      aria-selected={active}\n                      aria-disabled={item.disabled || undefined}\n                      // onMouseMove, not onMouseEnter: keyboard navigation\n                      // scrolls rows under a stationary cursor, and mouseenter\n                      // would yank the highlight back to wherever it sits.\n                      onMouseMove={() => {\n                        if (!item.disabled) onHover(index);\n                      }}\n                      onClick={() => {\n                        if (!item.disabled) onActivate(item);\n                      }}\n                      className={cn(\n                        \"mx-density-1 flex cursor-pointer items-center gap-density-2 rounded-md px-density-2 py-1.5 text-sm\",\n                        active && \"bg-accent text-accent-foreground\",\n                        item.disabled && \"cursor-not-allowed opacity-50\",\n                      )}\n                    >\n                      {item.icon !== undefined && (\n                        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\">\n                          <Icon\n                            {...(typeof item.icon === \"string\"\n                              ? { name: item.icon }\n                              : { icon: item.icon })}\n                          />\n                        </span>\n                      )}\n                      <span className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                        {item.description && (\n                          <span className=\"ml-density-2 text-xs text-muted-foreground\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                      {item.trailing}\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"],"names":["jsx","Fragment","jsxs","cn","Icon"],"mappings":";;;;;;AAyBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAG1B,MAAI,YAAY;AAEhB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,WAAW,cAAA;AAAA,MAEnB,UAAA,yCACE,OAAA,EAAI,WAAU,2DAA0D,UAAA,aAAA,CAAU,IACjF,MAAM,WAAW,mCAClB,OAAA,EAAI,WAAU,uEACZ,UAAA,cAAc,aAAA,CACjB,IAEA,OAAO,IAAI,CAAC,UAAU;AACpB,cAAM,YAAY,GAAG,MAAM,UAAU,MAAM,EAAE;AAC7C,eACEA,2BAAAA,IAACC,MAAAA,UAAA,EACC,UAAAC,2BAAAA,KAAC,OAAA,EAAI,MAAK,SAAQ,mBAAiB,MAAM,UAAU,YAAY,QAC5D,UAAA;AAAA,UAAA,MAAM,WACLF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,MAAM,MAAM,IAAI,CAAC,SAAS;AACzB,yBAAa;AACb,kBAAM,QAAQ;AACd,kBAAM,SAAS,UAAU;AACzB,mBACEE,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,SAAS,IAAI;AAAA,gBACjB,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,iBAAe,KAAK,YAAY;AAAA,gBAIhC,aAAa,MAAM;AACjB,sBAAI,CAAC,KAAK,SAAU,SAAQ,KAAK;AAAA,gBACnC;AAAA,gBACA,SAAS,MAAM;AACb,sBAAI,CAAC,KAAK,SAAU,YAAW,IAAI;AAAA,gBACrC;AAAA,gBACA,WAAWC,MAAAA;AAAAA,kBACT;AAAA,kBACA,UAAU;AAAA,kBACV,KAAK,YAAY;AAAA,gBAAA;AAAA,gBAGlB,UAAA;AAAA,kBAAA,KAAK,SAAS,UACbH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2EACd,UAAAA,2BAAAA;AAAAA,oBAACI,KAAAA;AAAAA,oBAAA;AAAA,sBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,oBAAK;AAAA,kBAAA,GAE1B;AAAA,kBAEFF,2BAAAA,KAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,oBAAA,KAAK;AAAA,oBACL,KAAK,eACJF,2BAAAA,IAAC,UAAK,WAAU,8CACb,eAAK,YAAA,CACR;AAAA,kBAAA,GAEJ;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK,YACJA,2BAAAA,IAAC,SAAI,WAAU,4GACZ,eAAK,SAAA,CACR;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzCG,KAAK;AAAA,YAAA;AAAA,UA6ChB,CAAC;AAAA,QAAA,GACH,EAAA,GA/Da,MAAM,EAgErB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAIT;;"}

package/dist/overlay/CommandPaletteList.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+import { CommandGroup, CommandItem } from './CommandPalette.model';
+export type CommandPaletteListProps = {
+    groups: CommandGroup[];
+    /** Flattened rows, in render order — index space for `activeIndex`. */
+    items: CommandItem[];
+    activeIndex: number;
+    listId: string;
+    optionId: (item: CommandItem) => string;
+    onActivate: (item: CommandItem) => void;
+    onHover: (index: number) => void;
+    listRef: RefObject<HTMLDivElement>;
+    loading?: boolean | undefined;
+    emptyState?: React.ReactNode;
+    listMaxHeight: string | number;
+};
+/**
+ * The palette's grouped listbox. Headings are `role="presentation"` so the
+ * option index space stays contiguous — the same trick Combobox uses to scroll
+ * by `[role="option"]` index.
+ */
+export declare function CommandPaletteList({ groups, items, activeIndex, listId, optionId, onActivate, onHover, listRef, loading, emptyState, listMaxHeight, }: CommandPaletteListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CommandPaletteList.d.ts.map

package/dist/overlay/CommandPaletteList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteList.d.ts","sourceRoot":"","sources":["../../src/overlay/CommandPaletteList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAExE,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,uEAAuE;IACvE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,GACd,EAAE,uBAAuB,2CA8FzB"}