@elabs-ai/components-ui 4.2.0 → 5.0.0

package/dist/chunk-YXHHUJOZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { Dialog, DialogContent, DialogTitle } from \"../dialog\";\n\n/** cmdk's own marker attribute on an item row — the scope for the id lookup. */\nconst CMDK_ITEM_SELECTOR = '[cmdk-item=\"\"][aria-selected=\"true\"]';\n\n/**\n * Brings `element` fully into view within its nearest `CommandList` ancestor\n * — and ONLY that ancestor — by writing `scrollTop` directly. Replicates the\n * minimal-movement edge math `Element.scrollIntoView({ block: \"nearest\" })`\n * itself uses, without ever calling the native method (which walks every\n * further scrollable ancestor, the window included — see\n * `overrideItemScrollIntoView` below for why that matters). A no-op when\n * `element` has no `CommandList` ancestor: never falls back to the native\n * call, which would reopen #541.\n */\nfunction scrollElementIntoCommandList(element: HTMLElement) {\n  const list = element.closest<HTMLElement>('[data-slot=\"command-list\"]');\n  if (!list) return;\n  const elementRect = element.getBoundingClientRect();\n  const listRect = list.getBoundingClientRect();\n  if (elementRect.top < listRect.top) {\n    list.scrollTop -= listRect.top - elementRect.top;\n  } else if (elementRect.bottom > listRect.bottom) {\n    list.scrollTop += elementRect.bottom - listRect.bottom;\n  }\n}\n\n/**\n * cmdk auto-highlights the first item on mount, on every filter keystroke\n * and on every keyboard navigation (ArrowDown/ArrowUp/Home/End), then calls\n * the highlighted item's — and, when it is the first item in a group, that\n * group's heading's — native `Element.prototype.scrollIntoView({ block:\n * \"nearest\" })` to keep it visible. See `cmdk@1.1.1`'s\n * `node_modules/cmdk/dist/index.mjs:1` (and the CJS twin\n * `dist/index.js:1` — esbuild minifies each entire module onto a single\n * line), function `ne` (`ce` in the CJS build): every `setState(\"value\", …)`\n * call that does not pass the internal \"don't scroll\" flag (pointer hover\n * selection is the one call site that does) schedules it, and the root\n * component's own mount effect schedules it unconditionally too.\n *\n * `{ block: \"nearest\" }` walks EVERY scrollable ancestor, the window\n * included — so mounting a `Command` whose list sits below the fold scrolls\n * the whole page (#541), for every consumer of an inline list, not only a\n * modal `CommandDialog`. cmdk has no prop to opt out (checked its public\n * API — no `scrollBehavior`/`disableScroll`/similar).\n *\n * The fix shadows `scrollIntoView` as an OWN property on the specific\n * item/heading element cmdk will call it on — never `Element.prototype`,\n * which would silently change the behaviour of every OTHER element on the\n * page, not just cmdk's — with `scrollElementIntoCommandList` above. A ref\n * callback runs during React's DOM-mutation commit phase, which always\n * completes (for the whole tree) before any layout effect fires — including\n * cmdk's own scheduled scroll — so the override is guaranteed to be in place\n * before cmdk can ever reach the native method.\n */\nfunction overrideItemScrollIntoView(node: HTMLElement | null) {\n  if (node) node.scrollIntoView = () => scrollElementIntoCommandList(node);\n}\n\n/** Same override as `overrideItemScrollIntoView`, for a group's heading —\n * the DOM node cmdk creates internally for `CommandGroup`'s `heading` prop,\n * so unlike an item it isn't a ref target we're handed directly. */\nfunction overrideGroupHeadingScrollIntoView(node: HTMLElement | null) {\n  const heading = node?.querySelector<HTMLElement>(\"[cmdk-group-heading]\");\n  if (heading) heading.scrollIntoView = () => scrollElementIntoCommandList(heading);\n}\n\n/** Distinguishes \"no `<Command>` ancestor\" from \"nothing is highlighted\". */\nconst NO_COMMAND_PROVIDER = Symbol(\"no-command-provider\");\n\nconst CommandActiveItemIdContext = createContext<string | undefined | typeof NO_COMMAND_PROVIDER>(\n  NO_COMMAND_PROVIDER,\n);\n\n/**\n * Resolves the DOM `id` of the currently highlighted `CommandItem`, publishes\n * it on a context and reports it to `Command`'s `onActiveItemIdChange`.\n *\n * It renders no DOM of its own, and it deliberately does NOT simply forward\n * cmdk's `state.selectedItemId`. cmdk only recomputes that field inside a\n * `schedule(7, …)` callback queued from `setState(\"value\", …)`, and its own\n * `selectFirstItem()` runs INSIDE the layout-effect flush that drains that\n * queue — so the callback executes before React has committed the new\n * `aria-selected` attribute and cmdk's `getSelectedItem()` DOM query finds\n * nothing. The field therefore stays `undefined` for BOTH cases that matter\n * here: the item auto-highlighted on mount, and the item re-highlighted after\n * every filter keystroke. (cmdk's own `Command.Input` inherits the same hole —\n * it renders no `aria-activedescendant` in either state. Verified against\n * cmdk 1.1.1 in jsdom and Chromium.)\n *\n * Reading the committed DOM from a post-commit `useEffect` — the same query\n * cmdk itself uses, just at a point where the attribute exists — closes both\n * gaps. `state.selectedItemId` is kept as a fallback and as one of the change\n * triggers.\n */\nfunction CommandActiveItemProvider({\n  rootRef,\n  onChange,\n  children,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  onChange?: (id: string | undefined) => void;\n  children: ReactNode;\n}) {\n  const value = useCommandState((state) => state.value);\n  const selectedItemId = useCommandState((state) => state.selectedItemId);\n  const filteredCount = useCommandState((state) => state.filtered.count);\n\n  const [activeId, setActiveId] = useState<string | undefined>(undefined);\n\n  // The callback lives in a ref so an inline arrow prop doesn't re-fire the\n  // effect on every render.\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // `undefined` is a legitimate reported value (\"nothing highlighted\"), so the\n  // \"not reported yet\" sentinel has to be something else.\n  const lastReportedRef = useRef<string | undefined | typeof NO_COMMAND_PROVIDER>(\n    NO_COMMAND_PROVIDER,\n  );\n\n  useEffect(() => {\n    const element = rootRef.current?.querySelector<HTMLElement>(CMDK_ITEM_SELECTOR);\n    const next = element?.id ?? selectedItemId ?? undefined;\n\n    setActiveId(next);\n    if (lastReportedRef.current !== next) {\n      lastReportedRef.current = next;\n      onChangeRef.current?.(next);\n    }\n  }, [value, selectedItemId, filteredCount, rootRef]);\n\n  return <CommandActiveItemIdContext value={activeId}>{children}</CommandActiveItemIdContext>;\n}\n\nexport interface CommandProps extends ComponentPropsWithoutRef<typeof CommandPrimitive> {\n  /**\n   * Reports the DOM `id` cmdk assigned to the currently highlighted item, so\n   * an input rendered OUTSIDE this `Command` tree (a composer textarea, a\n   * combobox trigger) can set `aria-activedescendant` without querying\n   * `[role=\"option\"]` positionally. Fires with `undefined` when nothing is\n   * highlighted.\n   *\n   * cmdk owns each item's `id`/`role`/`aria-selected` and applies them AFTER\n   * the consumer spread, so a consumer-supplied `id` on `CommandItem` is\n   * silently dropped (`CommandItem` warns about this in development) — this\n   * callback is the supported way to obtain it. See also the\n   * `useCommandActiveItemId` hook for reading the same value from a\n   * descendant already inside the `<Command>` tree.\n   *\n   * It fires for EVERY highlight change, including the item cmdk\n   * auto-highlights on mount and the one it re-highlights after each filter\n   * keystroke — the two states cmdk's own `state.selectedItemId` misses.\n   */\n  onActiveItemIdChange?: (id: string | undefined) => void;\n}\n\nexport const Command = forwardRef<ElementRef<typeof CommandPrimitive>, CommandProps>(\n  function Command({ className, children, onActiveItemIdChange, ...props }, ref) {\n    const innerRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMemo(() => mergeRefs<HTMLDivElement>(ref, innerRef), [ref]);\n\n    return (\n      <CommandPrimitive\n        ref={mergedRef}\n        data-slot=\"command\"\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <CommandActiveItemProvider rootRef={innerRef} onChange={onActiveItemIdChange}>\n          {children}\n        </CommandActiveItemProvider>\n      </CommandPrimitive>\n    );\n  },\n);\n\n/**\n * The DOM `id` of the currently highlighted `CommandItem`. Must be called\n * from a component rendered inside a `<Command>` tree; returns `undefined`\n * when nothing is highlighted (or when there is no `<Command>` ancestor).\n * Reports exactly the same value as `Command`'s `onActiveItemIdChange`\n * callback, for a consumer that is already a descendant (rather than an\n * external input above the tree).\n */\nexport function useCommandActiveItemId(): string | undefined {\n  const id = use(CommandActiveItemIdContext);\n  return id === NO_COMMAND_PROVIDER ? undefined : id;\n}\n\nexport type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog> & {\n  /** Custom cmdk ranking (e.g. strict substring instead of fuzzy). */\n  filter?: ComponentPropsWithoutRef<typeof CommandPrimitive>[\"filter\"];\n  /**\n   * The dialog's accessible name, rendered `sr-only`.\n   *\n   * OPTIONAL, and deliberately so: callers that already render their own\n   * `DialogTitle` in `children` must not be forced to move it, and\n   * `@elabs-ai/components-ai`'s `VoiceSelectorDialog` passes this whole prop\n   * type straight through. Supply it when you have no visible title — a\n   * `Dialog` with no accessible name is a Radix warning and an axe violation.\n   */\n  title?: ReactNode;\n};\n\n/**\n * A ⌘K command palette in a modal `Dialog`.\n *\n * This IS the palette presentation of `Command` — there is no separate\n * \"selector\" component. For an inline pill that opens the same grouped,\n * searchable list anchored under itself (a composer footer), reach for\n * `ModelPicker` instead.\n */\nexport function CommandDialog({ children, filter, title, ...props }: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        {title === undefined ? null : <DialogTitle className=\"sr-only\">{title}</DialogTitle>}\n        <Command\n          filter={filter}\n          className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const CommandInput = forwardRef<\n  ElementRef<typeof CommandPrimitive.Input>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(function CommandInput({ className, ...props }, ref) {\n  return (\n    <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"me-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-body outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\n\nexport const CommandList = forwardRef<\n  ElementRef<typeof CommandPrimitive.List>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(function CommandList({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const CommandEmpty = forwardRef<\n  ElementRef<typeof CommandPrimitive.Empty>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(function CommandEmpty({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-body\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const CommandGroup = forwardRef<\n  ElementRef<typeof CommandPrimitive.Group>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(function CommandGroup({ className, ...props }, ref) {\n  const mergedRef = useMemo(\n    () => mergeRefs<HTMLDivElement>(ref, overrideGroupHeadingScrollIntoView),\n    [ref],\n  );\n  return (\n    <CommandPrimitive.Group\n      ref={mergedRef}\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const CommandSeparator = forwardRef<\n  ElementRef<typeof CommandPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(function CommandSeparator({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      // `cmdk` renders this as a direct child of its `role=\"listbox\"`\n      // (`CommandList`), which may only own `option`/`group` (WCAG 1.3.1,\n      // #157) — a purely visual divider between groups, so `aria-hidden`\n      // removes it from the accessibility tree instead of asking the listbox\n      // to own a role it can't. `{...props}` still lets a caller override it.\n      aria-hidden=\"true\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n});\n\n/**\n * Props cmdk owns and applies AFTER a consumer spread — see the `Command`\n * `onActiveItemIdChange` docblock. Passing any of these is a silent no-op;\n * `CommandItem` warns once per key in development.\n */\nconst CMDK_OVERRIDDEN_ITEM_PROPS = [\"id\", \"role\", \"aria-selected\"] as const;\nconst warnedAboutOverriddenItemProps = new Set<string>();\n\nexport const CommandItem = forwardRef<\n  ElementRef<typeof CommandPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(function CommandItem({ className, ...props }, ref) {\n  const mergedRef = useMemo(\n    () => mergeRefs<HTMLDivElement>(ref, overrideItemScrollIntoView),\n    [ref],\n  );\n\n  if (process.env.NODE_ENV !== \"production\") {\n    for (const key of CMDK_OVERRIDDEN_ITEM_PROPS) {\n      if (key in props && !warnedAboutOverriddenItemProps.has(key)) {\n        warnedAboutOverriddenItemProps.add(key);\n        // oxlint-disable-next-line no-console\n        console.warn(\n          `CommandItem: \"${key}\" is assigned internally by cmdk, so the value you passed is ` +\n            'ignored. Use <Command onActiveItemIdChange> (or the \"useCommandActiveItemId\" hook) ' +\n            \"to read the DOM id of the highlighted item instead — see \" +\n            \"packages/ui/src/components/command/command.tsx.\",\n        );\n      }\n    }\n  }\n\n  return (\n    <CommandPrimitive.Item\n      ref={mergedRef}\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport function CommandShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ms-auto text-meta tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":["Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem"]}

package/dist/chunk-YZVXIPBC.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-YZVXIPBC.js.map

package/dist/chunk-YZVXIPBC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-Z44RRTMX.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-Z44RRTMX.js.map

package/dist/chunk-Z44RRTMX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-Z4CYBG3H.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-Z4CYBG3H.js.map

package/dist/chunk-Z4CYBG3H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-ZE2H4J3P.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-ZE2H4J3P.js.map

package/dist/chunk-ZE2H4J3P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-ZEMTALKO.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-ZEMTALKO.js.map

package/dist/chunk-ZEMTALKO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-ZI2OXD6L.js

@@ -0,0 +1,244 @@
+"use client";
+
+// src/components/tree/use-tree-keyboard.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+function flattenVisible(nodes, expandedIds) {
+  const result = [];
+  function walk(list) {
+    for (const node of list) {
+      result.push(node.id);
+      if ((node.children?.length || node.hasChildren) && expandedIds.has(node.id)) {
+        if (node.children?.length) walk(node.children);
+      }
+    }
+  }
+  walk(nodes);
+  return result;
+}
+function buildParentMap(nodes, parentId = null, map = /* @__PURE__ */ new Map()) {
+  for (const node of nodes) {
+    map.set(node.id, parentId);
+    if (node.children?.length) {
+      buildParentMap(node.children, node.id, map);
+    }
+  }
+  return map;
+}
+function findNode(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    if (node.children?.length) {
+      const found = findNode(node.children, id);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+function useTreeKeyboard(options) {
+  const {
+    nodes,
+    expandedIds,
+    onExpandedChange,
+    selectionMode,
+    selectedIds,
+    onSelectionChange,
+    virtualize = false,
+    flatNodeIds,
+    pendingFocusIdRef,
+    scrollToVirtualIndex
+  } = options;
+  const [activeId, setActiveIdState] = useState(() => {
+    const visible2 = flattenVisible(nodes, expandedIds);
+    return visible2[0] ?? null;
+  });
+  const nodeRefs = useRef(/* @__PURE__ */ new Map());
+  const registerNodeRef = useCallback((id, el) => {
+    if (el) {
+      nodeRefs.current.set(id, el);
+    } else {
+      nodeRefs.current.delete(id);
+    }
+  }, []);
+  const visible = useMemo(
+    () => virtualize && flatNodeIds ? flatNodeIds : flattenVisible(nodes, expandedIds),
+    [virtualize, flatNodeIds, nodes, expandedIds]
+  );
+  const visibleIndexById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    visible.forEach((id, i) => map.set(id, i));
+    return map;
+  }, [visible]);
+  const nodeById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    function walk(list) {
+      for (const node of list) {
+        map.set(node.id, node);
+        if (node.children?.length) walk(node.children);
+      }
+    }
+    walk(nodes);
+    return map;
+  }, [nodes]);
+  const parentMapMemo = useMemo(() => buildParentMap(nodes), [nodes]);
+  const typeaheadBuffer = useRef("");
+  const typeaheadTimer = useRef(null);
+  useEffect(
+    () => () => {
+      if (typeaheadTimer.current) clearTimeout(typeaheadTimer.current);
+    },
+    []
+  );
+  const setActiveId = useCallback(
+    (id) => {
+      setActiveIdState(id);
+      if (!id) return;
+      const el = nodeRefs.current.get(id);
+      if (el) {
+        el.focus();
+        return;
+      }
+      if (virtualize && scrollToVirtualIndex && pendingFocusIdRef) {
+        const index = visibleIndexById.get(id) ?? -1;
+        if (index >= 0) {
+          pendingFocusIdRef.current = id;
+          scrollToVirtualIndex(index);
+        }
+      }
+    },
+    [virtualize, visibleIndexById, pendingFocusIdRef, scrollToVirtualIndex]
+  );
+  const onKeyDown = useCallback(
+    (e) => {
+      if (!activeId) return;
+      const currentIndex = visibleIndexById.get(activeId) ?? -1;
+      const currentNode = nodeById.get(activeId);
+      const parentMap = parentMapMemo;
+      const moveTo = (id) => {
+        e.preventDefault();
+        setActiveId(id);
+      };
+      const selectNode = (id) => {
+        if (selectionMode === "none") return;
+        const node = nodeById.get(id);
+        if (node?.disabled) return;
+        if (selectionMode === "single") {
+          onSelectionChange(/* @__PURE__ */ new Set([id]));
+        } else {
+          const next = new Set(selectedIds);
+          if (next.has(id)) {
+            next.delete(id);
+          } else {
+            next.add(id);
+          }
+          onSelectionChange(next);
+        }
+      };
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = visible[currentIndex + 1];
+          if (next) moveTo(next);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = visible[currentIndex - 1];
+          if (prev) moveTo(prev);
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          if (!currentNode) break;
+          const expandable = !!(currentNode.children?.length || currentNode.hasChildren);
+          if (expandable && !expandedIds.has(activeId)) {
+            const next = new Set(expandedIds);
+            next.add(activeId);
+            onExpandedChange(next);
+          } else if (expandable && expandedIds.has(activeId)) {
+            const firstChild = currentNode.children?.[0];
+            if (firstChild) moveTo(firstChild.id);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          if (!currentNode) break;
+          const expandable = !!(currentNode.children?.length || currentNode.hasChildren);
+          if (expandable && expandedIds.has(activeId)) {
+            const next = new Set(expandedIds);
+            next.delete(activeId);
+            onExpandedChange(next);
+          } else {
+            const parentId = parentMap.get(activeId) ?? null;
+            if (parentId) moveTo(parentId);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          const first = visible[0];
+          if (first) moveTo(first);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = visible[visible.length - 1];
+          if (last) moveTo(last);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          selectNode(activeId);
+          break;
+        }
+        default: {
+          if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            const char = e.key.toLowerCase();
+            typeaheadBuffer.current += char;
+            if (typeaheadTimer.current) clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = setTimeout(() => {
+              typeaheadBuffer.current = "";
+            }, 500);
+            const prefix = typeaheadBuffer.current;
+            const searchList = [
+              ...visible.slice(currentIndex + 1),
+              ...visible.slice(0, currentIndex + 1)
+            ];
+            for (const id of searchList) {
+              const node = nodeById.get(id);
+              if (!node) continue;
+              if (typeof node.label !== "string") continue;
+              if (node.label.toLowerCase().startsWith(prefix)) {
+                moveTo(id);
+                break;
+              }
+            }
+          }
+          break;
+        }
+      }
+    },
+    [
+      activeId,
+      visible,
+      visibleIndexById,
+      nodeById,
+      parentMapMemo,
+      expandedIds,
+      onExpandedChange,
+      selectionMode,
+      selectedIds,
+      onSelectionChange,
+      setActiveId
+    ]
+  );
+  return { activeId, setActiveId, registerNodeRef, onKeyDown };
+}
+
+export {
+  flattenVisible,
+  findNode,
+  useTreeKeyboard
+};
+//# sourceMappingURL=chunk-ZI2OXD6L.js.map

package/dist/chunk-ZI2OXD6L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tree/use-tree-keyboard.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { TreeNode } from \"./tree\";\n\n/**\n * Flattens the visible (expanded) tree into an ordered list of node ids.\n * Nodes whose ancestors are collapsed are excluded.\n */\nexport function flattenVisible<T>(nodes: TreeNode<T>[], expandedIds: Set<string>): string[] {\n  const result: string[] = [];\n  function walk(list: TreeNode<T>[]) {\n    for (const node of list) {\n      result.push(node.id);\n      if ((node.children?.length || node.hasChildren) && expandedIds.has(node.id)) {\n        if (node.children?.length) walk(node.children);\n      }\n    }\n  }\n  walk(nodes);\n  return result;\n}\n\n/**\n * Builds a lookup map: node id → parent id (or null for roots).\n */\nfunction buildParentMap<T>(\n  nodes: TreeNode<T>[],\n  parentId: string | null = null,\n  map: Map<string, string | null> = new Map(),\n): Map<string, string | null> {\n  for (const node of nodes) {\n    map.set(node.id, parentId);\n    if (node.children?.length) {\n      buildParentMap(node.children, node.id, map);\n    }\n  }\n  return map;\n}\n\n/**\n * Finds a node by id in the tree (depth-first).\n */\nexport function findNode<T>(nodes: TreeNode<T>[], id: string): TreeNode<T> | undefined {\n  for (const node of nodes) {\n    if (node.id === id) return node;\n    if (node.children?.length) {\n      const found = findNode(node.children, id);\n      if (found) return found;\n    }\n  }\n  return undefined;\n}\n\nexport interface UseTreeKeyboardOptions<T> {\n  nodes: TreeNode<T>[];\n  expandedIds: Set<string>;\n  onExpandedChange: (ids: Set<string>) => void;\n  selectionMode: \"single\" | \"multiple\" | \"none\";\n  selectedIds: Set<string>;\n  onSelectionChange: (ids: Set<string>) => void;\n  /**\n   * When `true`, the tree uses windowed rendering. Focus navigation must\n   * scroll the virtualizer before focusing an unmounted row.\n   */\n  virtualize?: boolean;\n  /**\n   * Ordered list of visible node ids in the virtual flat list. Provided by\n   * the Tree when `virtualize` is true so the keyboard hook can map an id to\n   * a virtual index without re-flattening.\n   */\n  flatNodeIds?: string[];\n  /**\n   * Ref that the keyboard hook writes a node id into when it needs to focus a\n   * row that is currently scrolled out of view. The Tree's `registerAndFlush`\n   * callback reads this ref on every ref registration and focuses the element\n   * once it mounts.\n   */\n  pendingFocusIdRef?: React.MutableRefObject<string | null>;\n  /**\n   * Called when the keyboard hook wants to bring an index into view before\n   * focusing it. Only called in virtual mode.\n   */\n  scrollToVirtualIndex?: (index: number) => void;\n}\n\nexport interface UseTreeKeyboardResult {\n  activeId: string | null;\n  setActiveId: (id: string | null) => void;\n  /** ref callback — register each tree item element keyed by node id */\n  registerNodeRef: (id: string, el: HTMLElement | null) => void;\n  /** onKeyDown handler to attach to the root tree div */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeKeyboardResult {\n  const {\n    nodes,\n    expandedIds,\n    onExpandedChange,\n    selectionMode,\n    selectedIds,\n    onSelectionChange,\n    virtualize = false,\n    flatNodeIds,\n    pendingFocusIdRef,\n    scrollToVirtualIndex,\n  } = options;\n\n  // The currently \"roving\" active item id\n  const [activeId, setActiveIdState] = useState<string | null>(() => {\n    // default to first visible node\n    const visible = flattenVisible(nodes, expandedIds);\n    return visible[0] ?? null;\n  });\n\n  // Map from node id → DOM element reference\n  const nodeRefs = useRef<Map<string, HTMLElement>>(new Map());\n\n  const registerNodeRef = useCallback((id: string, el: HTMLElement | null) => {\n    if (el) {\n      nodeRefs.current.set(id, el);\n    } else {\n      nodeRefs.current.delete(id);\n    }\n  }, []);\n\n  // Memoised O(1) lookups — rebuilt only when the tree shape / expansion\n  // actually changes, not on every keypress (a full re-flatten + `indexOf`/\n  // `findNode` walk per arrow key is O(n) on a large tree).\n  const visible = useMemo(\n    () => (virtualize && flatNodeIds ? flatNodeIds : flattenVisible(nodes, expandedIds)),\n    [virtualize, flatNodeIds, nodes, expandedIds],\n  );\n  const visibleIndexById = useMemo(() => {\n    const map = new Map<string, number>();\n    visible.forEach((id, i) => map.set(id, i));\n    return map;\n  }, [visible]);\n  const nodeById = useMemo(() => {\n    const map = new Map<string, TreeNode<T>>();\n    function walk(list: TreeNode<T>[]) {\n      for (const node of list) {\n        map.set(node.id, node);\n        if (node.children?.length) walk(node.children);\n      }\n    }\n    walk(nodes);\n    return map;\n  }, [nodes]);\n  const parentMapMemo = useMemo(() => buildParentMap(nodes), [nodes]);\n\n  // Typeahead buffer\n  const typeaheadBuffer = useRef<string>(\"\");\n  const typeaheadTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Clear any pending typeahead timer on unmount.\n  useEffect(\n    () => () => {\n      if (typeaheadTimer.current) clearTimeout(typeaheadTimer.current);\n    },\n    [],\n  );\n\n  /**\n   * Focus the element for `id`. In virtual mode, if the element isn't\n   * mounted yet, record it as pending and scroll the virtualizer so the row\n   * enters the render window; the Tree's `registerAndFlush` will focus it\n   * once the ref fires.\n   */\n  const setActiveId = useCallback(\n    (id: string | null) => {\n      setActiveIdState(id);\n      if (!id) return;\n\n      const el = nodeRefs.current.get(id);\n      if (el) {\n        el.focus();\n        return;\n      }\n\n      // Element not mounted — happens when it's scrolled out of the virtual window.\n      if (virtualize && scrollToVirtualIndex && pendingFocusIdRef) {\n        const index = visibleIndexById.get(id) ?? -1;\n        if (index >= 0) {\n          pendingFocusIdRef.current = id;\n          scrollToVirtualIndex(index);\n          // The Tree's registerAndFlush will call el.focus() once the row mounts.\n        }\n      }\n    },\n    [virtualize, visibleIndexById, pendingFocusIdRef, scrollToVirtualIndex],\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (!activeId) return;\n\n      const currentIndex = visibleIndexById.get(activeId) ?? -1;\n      const currentNode = nodeById.get(activeId);\n      const parentMap = parentMapMemo;\n\n      const moveTo = (id: string) => {\n        e.preventDefault();\n        setActiveId(id);\n      };\n\n      const selectNode = (id: string) => {\n        if (selectionMode === \"none\") return;\n        const node = nodeById.get(id);\n        if (node?.disabled) return;\n        if (selectionMode === \"single\") {\n          onSelectionChange(new Set([id]));\n        } else {\n          const next = new Set(selectedIds);\n          if (next.has(id)) {\n            next.delete(id);\n          } else {\n            next.add(id);\n          }\n          onSelectionChange(next);\n        }\n      };\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const next = visible[currentIndex + 1];\n          if (next) moveTo(next);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prev = visible[currentIndex - 1];\n          if (prev) moveTo(prev);\n          break;\n        }\n        case \"ArrowRight\": {\n          e.preventDefault();\n          if (!currentNode) break;\n          const expandable = !!(currentNode.children?.length || currentNode.hasChildren);\n          if (expandable && !expandedIds.has(activeId)) {\n            // expand\n            const next = new Set(expandedIds);\n            next.add(activeId);\n            onExpandedChange(next);\n          } else if (expandable && expandedIds.has(activeId)) {\n            // move to first child (only if loaded)\n            const firstChild = currentNode.children?.[0];\n            if (firstChild) moveTo(firstChild.id);\n          }\n          // leaf: do nothing\n          break;\n        }\n        case \"ArrowLeft\": {\n          e.preventDefault();\n          if (!currentNode) break;\n          const expandable = !!(currentNode.children?.length || currentNode.hasChildren);\n          if (expandable && expandedIds.has(activeId)) {\n            // collapse\n            const next = new Set(expandedIds);\n            next.delete(activeId);\n            onExpandedChange(next);\n          } else {\n            // move to parent\n            const parentId = parentMap.get(activeId) ?? null;\n            if (parentId) moveTo(parentId);\n          }\n          break;\n        }\n        case \"Home\": {\n          e.preventDefault();\n          const first = visible[0];\n          if (first) moveTo(first);\n          break;\n        }\n        case \"End\": {\n          e.preventDefault();\n          const last = visible[visible.length - 1];\n          if (last) moveTo(last);\n          break;\n        }\n        case \"Enter\":\n        case \" \": {\n          e.preventDefault();\n          selectNode(activeId);\n          break;\n        }\n        default: {\n          // typeahead — single printable characters\n          if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n            const char = e.key.toLowerCase();\n            typeaheadBuffer.current += char;\n\n            if (typeaheadTimer.current) clearTimeout(typeaheadTimer.current);\n            typeaheadTimer.current = setTimeout(() => {\n              typeaheadBuffer.current = \"\";\n            }, 500);\n\n            const prefix = typeaheadBuffer.current;\n            // find the next visible node (after current) whose label starts with prefix\n            const searchList = [\n              ...visible.slice(currentIndex + 1),\n              ...visible.slice(0, currentIndex + 1),\n            ];\n            for (const id of searchList) {\n              const node = nodeById.get(id);\n              if (!node) continue;\n              // only string labels are searchable\n              if (typeof node.label !== \"string\") continue;\n              if (node.label.toLowerCase().startsWith(prefix)) {\n                moveTo(id);\n                break;\n              }\n            }\n          }\n          break;\n        }\n      }\n    },\n    [\n      activeId,\n      visible,\n      visibleIndexById,\n      nodeById,\n      parentMapMemo,\n      expandedIds,\n      onExpandedChange,\n      selectionMode,\n      selectedIds,\n      onSelectionChange,\n      setActiveId,\n    ],\n  );\n\n  return { activeId, setActiveId, registerNodeRef, onKeyDown };\n}\n"],"mappings":"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","names":["visible"]}

package/dist/chunk-ZNFHDBUW.js

@@ -0,0 +1,266 @@
+"use client";
+import {
+  formatColorAsOklch,
+  formatLengthAsPx
+} from "./chunk-HCU2JHPH.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/token-spotlight/token-spotlight.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOKEN_SPOTLIGHT_LABELS = {
+  row: "Design tokens",
+  hint: "Highlights every element on this page that uses this token."
+};
+var TOKEN_SPOTLIGHT_SCAN_LIMIT = 2e3;
+var SCAN_CHUNK_SIZE = 150;
+var MARK_CHUNK_SIZE = 40;
+var BORDER_SIDES = ["Top", "Right", "Bottom", "Left"];
+var SVG_PAINTING_ELEMENTS = /* @__PURE__ */ new Set([
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "text",
+  "textPath",
+  "tspan"
+]);
+function hasOwnText(el) {
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === 3 && node.nodeValue?.trim()) return true;
+  }
+  return false;
+}
+function consumerOf(el, style, matchValue) {
+  if (el instanceof SVGElement) {
+    if (!SVG_PAINTING_ELEMENTS.has(el.localName)) return null;
+    const paints = style.fill === matchValue || style.stroke === matchValue && parseFloat(style.strokeWidth) > 0;
+    return paints ? el.ownerSVGElement ?? el : null;
+  }
+  if (style.backgroundColor === matchValue) return el;
+  for (const side of BORDER_SIDES) {
+    if (style[`border${side}Color`] === matchValue && parseFloat(style[`border${side}Width`]) > 0) {
+      return el;
+    }
+  }
+  if (style.color === matchValue && hasOwnText(el)) return el;
+  return null;
+}
+function scheduleIdle(callback) {
+  const w = window;
+  if (typeof w.requestIdleCallback === "function") {
+    const handle2 = w.requestIdleCallback(callback, { timeout: 100 });
+    return () => w.cancelIdleCallback?.(handle2);
+  }
+  const handle = window.setTimeout(
+    () => callback({ timeRemaining: () => 50, didTimeout: true }),
+    0
+  );
+  return () => window.clearTimeout(handle);
+}
+function resolveTokenMatchValue(token, doc = document) {
+  const probe = doc.createElement("span");
+  probe.style.cssText = `position:fixed;inset:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;background-color:var(${token});`;
+  doc.body.appendChild(probe);
+  const value = getComputedStyle(probe).backgroundColor;
+  doc.body.removeChild(probe);
+  return value;
+}
+var supportsCss = (property, value) => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports(property, value);
+function probeComputed(host, property, token) {
+  const doc = host.ownerDocument;
+  const probe = doc.createElement("span");
+  probe.style.cssText = `position:fixed;inset:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;${property}:var(${token});`;
+  host.appendChild(probe);
+  const value = getComputedStyle(probe).getPropertyValue(property);
+  host.removeChild(probe);
+  return value;
+}
+function resolveTokenDisplayValue(token, root) {
+  const target = root ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!target) return "";
+  const raw = getComputedStyle(target).getPropertyValue(token).trim();
+  if (!raw) return "";
+  const direct = formatColorAsOklch(raw);
+  if (direct) return direct;
+  const host = target === target.ownerDocument.documentElement ? target.ownerDocument.body : target;
+  if (supportsCss("color", raw)) {
+    return formatColorAsOklch(probeComputed(host, "color", token)) ?? raw;
+  }
+  if (supportsCss("width", raw)) {
+    return formatLengthAsPx(probeComputed(host, "letter-spacing", token)) ?? raw;
+  }
+  return raw;
+}
+var isEmptyMatchValue = (value) => value === "" || value === "rgba(0, 0, 0, 0)" || value === "transparent";
+function scanForConsumers(root, matchValue, limit, onDone) {
+  if (isEmptyMatchValue(matchValue)) {
+    onDone([]);
+    return () => {
+    };
+  }
+  const candidates = Array.from(root.querySelectorAll("*")).slice(0, limit);
+  const found = /* @__PURE__ */ new Set();
+  let index = 0;
+  let cancelled = false;
+  let cancelIdle = () => {
+  };
+  const step = (deadline) => {
+    if (cancelled) return;
+    let examinedInSlice = 0;
+    while (index < candidates.length && examinedInSlice < SCAN_CHUNK_SIZE && (deadline.timeRemaining() > 0 || deadline.didTimeout)) {
+      const el = candidates[index++];
+      examinedInSlice++;
+      if (!(el instanceof HTMLElement) && !(el instanceof SVGElement)) continue;
+      const consumer = consumerOf(el, getComputedStyle(el), matchValue);
+      if (consumer) found.add(consumer);
+    }
+    if (index < candidates.length) {
+      cancelIdle = scheduleIdle(step);
+    } else {
+      onDone(Array.from(found));
+    }
+  };
+  cancelIdle = scheduleIdle(step);
+  return () => {
+    cancelled = true;
+    cancelIdle();
+  };
+}
+function writeMarksInSlices(elements, name, written) {
+  let index = 0;
+  let cancelled = false;
+  let cancelIdle = () => {
+  };
+  const step = () => {
+    if (cancelled) return;
+    const end = Math.min(index + MARK_CHUNK_SIZE, elements.length);
+    for (const el of elements.slice(index, end)) {
+      el.setAttribute("data-token-consumer", name);
+      written.push(el);
+    }
+    index = end;
+    if (index < elements.length) cancelIdle = scheduleIdle(step);
+  };
+  if (elements.length > 0) cancelIdle = scheduleIdle(step);
+  return () => {
+    cancelled = true;
+    cancelIdle();
+  };
+}
+function useRootAttribute(name) {
+  const [value, setValue] = React.useState(
+    () => typeof document === "undefined" ? "" : document.documentElement.getAttribute(name) ?? ""
+  );
+  React.useEffect(() => {
+    if (typeof MutationObserver === "undefined") return;
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setValue(root.getAttribute(name) ?? "");
+    });
+    observer.observe(root, { attributes: true, attributeFilter: [name] });
+    return () => observer.disconnect();
+  }, [name]);
+  return value;
+}
+var TokenSpotlight = React.forwardRef(
+  function TokenSpotlight2({
+    tokens,
+    onSpotlight,
+    scanLimit = TOKEN_SPOTLIGHT_SCAN_LIMIT,
+    labels: labelsProp,
+    className,
+    ...props
+  }, ref) {
+    const labels = { ...DEFAULT_TOKEN_SPOTLIGHT_LABELS, ...labelsProp };
+    const theme = useRootAttribute("data-theme");
+    const decoration = useRootAttribute("data-decoration");
+    const [active, setActive] = React.useState(null);
+    const consumersRef = React.useRef([]);
+    const [displayValues, setDisplayValues] = React.useState({});
+    React.useEffect(() => {
+      const next = {};
+      for (const { token } of tokens) next[token] = resolveTokenDisplayValue(token);
+      setDisplayValues(next);
+    }, [theme, decoration, tokens]);
+    const clearConsumers = React.useCallback(() => {
+      for (const el of consumersRef.current) el.removeAttribute("data-token-consumer");
+      consumersRef.current = [];
+    }, []);
+    React.useEffect(() => {
+      const root = document.documentElement;
+      if (!active) {
+        delete root.dataset.tokenSpotlight;
+        clearConsumers();
+        onSpotlight?.(null);
+        return;
+      }
+      const bareToken = active.replace(/^--/, "");
+      root.dataset.tokenSpotlight = bareToken;
+      onSpotlight?.(active);
+      const matchValue = resolveTokenMatchValue(active);
+      let cancelMarks = () => {
+      };
+      const cancelScan = scanForConsumers(document.body, matchValue, scanLimit, (elements) => {
+        clearConsumers();
+        cancelMarks = writeMarksInSlices(elements, bareToken, consumersRef.current);
+      });
+      return () => {
+        cancelScan();
+        cancelMarks();
+        clearConsumers();
+        delete root.dataset.tokenSpotlight;
+      };
+    }, [active, theme, scanLimit]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-label": labels.row,
+        "data-slot": "token-spotlight",
+        className: cn("flex flex-wrap items-center gap-2", className),
+        ...props,
+        children: tokens.map(({ token, label }) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-slot": "token-spotlight-chip",
+            "data-active": active === token ? "" : void 0,
+            className: cn(
+              "focus-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-meta font-medium",
+              "bg-card text-foreground transition-colors",
+              active === token ? "border-ring" : "border-border-strong"
+            ),
+            onMouseEnter: () => setActive(token),
+            onMouseLeave: () => setActive((current) => current === token ? null : current),
+            onFocus: () => setActive(token),
+            onBlur: () => setActive((current) => current === token ? null : current),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-mono text-code", children: token }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: displayValues[token] || "\u2014" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: ` \u2014 ${label}. ${labels.hint}` })
+            ]
+          },
+          token
+        ))
+      }
+    );
+  }
+);
+TokenSpotlight.displayName = "TokenSpotlight";
+
+export {
+  DEFAULT_TOKEN_SPOTLIGHT_LABELS,
+  TOKEN_SPOTLIGHT_SCAN_LIMIT,
+  resolveTokenMatchValue,
+  resolveTokenDisplayValue,
+  scanForConsumers,
+  TokenSpotlight
+};
+//# sourceMappingURL=chunk-ZNFHDBUW.js.map