@mitcsutt/kiln-ui 0.6.0 → 0.7.0

package/dist/components/navigation/NavLinks/context.js

@@ -0,0 +1,13 @@
+import { Children as e, createContext as t, isValidElement as n } from "react";
+//#region src/components/navigation/NavLinks/context.ts
+var r = t({
+	orientation: "horizontal",
+	size: "md"
+}), i = t(null);
+function a(t) {
+	return e.toArray(t).some((e) => n(e) ? e.props.active === !0 || a(e.props.children) : !1);
+}
+//#endregion
+export { r as NavLinksContext, i as NavLinksGroupContext, a as holdsActive };
+
+//# sourceMappingURL=context.js.map

package/dist/components/navigation/NavLinks/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["NavLinksContext","createContext","NavLinksGroupContext","holdsActive","Children","children","isValidElement","child"],"sources":["../../../../src/components/navigation/NavLinks/context.ts"],"sourcesContent":["import { Children, createContext, isValidElement, type KeyboardEvent, type ReactNode } from 'react'\n\nexport type NavLinksOrientation = 'horizontal' | 'vertical'\nexport type NavLinksSize = 'sm' | 'md'\n\n/** The tree-style arrow keys of a vertical nav with groups. */\nexport type TreeKeyDown = (event: KeyboardEvent<HTMLElement>) => void\n\nexport interface NavLinksContextValue {\n  orientation: NavLinksOrientation\n  size: NavLinksSize\n  /**\n   * Where a group puts the arrow-key handler for the nav it's in. Groups bring it, so a nav\n   * without them doesn't carry it.\n   */\n  treeKeysRef?: { current: TreeKeyDown | null }\n}\n\nexport const NavLinksContext = createContext<NavLinksContextValue>({\n  orientation: 'horizontal',\n  size: 'md',\n})\n\n/** How an item or a nested group tells the groups around it that it's the current page. */\nexport interface NavLinksGroupContextValue {\n  report: (id: string, active: boolean) => void\n}\n\nexport const NavLinksGroupContext = createContext<NavLinksGroupContextValue | null>(null)\n\n/**\n * Whether any element under `children` is marked `active`, read from the elements themselves, so\n * the server render already knows which groups hold the current page. Items wrapped in your own\n * components are caught on the client, when they report in.\n */\nexport function holdsActive(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement<{ active?: unknown; children?: ReactNode }>(child)) return false\n    return child.props.active === true || holdsActive(child.props.children)\n  })\n}\n"],"mappings":";;AAkBA,IAAaA,IAAkBC,EAAoC;CACjE,aAAa;CACb,MAAM;AACR,CAAC,GAOYC,IAAuBD,EAAgD,IAAI;AAOxF,SAAgBE,EAAY,GAA8B;CACxD,OAAOC,EAAS,QAAQC,CAAQ,CAAC,CAAC,MAAM,MACjCC,EAA2DC,CAAK,IAC9DA,EAAM,MAAM,WAAW,MAAQJ,EAAYI,EAAM,MAAM,QAAQ,IADS,EAEhF;AACH"}

package/dist/components/navigation/NavLinks/index.d.ts

@@ -1,2 +1,4 @@
 export { NavLinks } from './NavLinks.js';
 export type { NavLinksProps, NavLinksItemProps, NavLinksOrientation, NavLinksSize, } from './NavLinks.js';
+export { NavLinksGroup } from './NavLinksGroup.js';
+export type { NavLinksGroupProps } from './NavLinksGroup.js';

package/dist/components/navigation/NavLinks/treeKeys.d.ts

@@ -0,0 +1,8 @@
+import type { KeyboardEvent } from 'react';
+/**
+ * Arrow keys for a vertical nav with groups, like a tree: Up and Down move between the links you
+ * can see, Right opens a group (or steps into an open one), Left closes it (or steps out to its
+ * parent), Home and End jump, and a letter jumps to the next link starting with it. Tab still
+ * moves through every link, so nothing is lost for anyone who doesn't use them.
+ */
+export declare function onTreeKeyDown(event: KeyboardEvent<HTMLElement>): void;

package/dist/components/navigation/NavLinks/treeKeys.js

@@ -0,0 +1,57 @@
+//#region src/components/navigation/NavLinks/treeKeys.ts
+function e(e) {
+	return Array.from(e.querySelectorAll("a[href], button")).filter((e) => !e.closest("[data-navlinks-panel][data-state=\"closed\"]") && !e.disabled && (!("checkVisibility" in e) || e.checkVisibility()));
+}
+function t(e) {
+	return e?.querySelector(":scope > [data-navlinks-row], :scope > [aria-expanded]") ?? null;
+}
+function n(e) {
+	let n = t(e);
+	return n?.hasAttribute("aria-expanded") ? n : n?.querySelector("[aria-expanded]") ?? null;
+}
+function r(r) {
+	let i = r.currentTarget;
+	if (!i.querySelector("[data-navlinks-group]")) return;
+	let a = e(i), o = r.target, s = a.indexOf(o);
+	if (s < 0 || r.altKey || r.ctrlKey || r.metaKey) return;
+	let c = (e) => {
+		e && (r.preventDefault(), e.focus());
+	}, l = o.closest("[data-navlinks-group]"), u = t(l), d = u?.contains(o) === !0, f = d ? n(l) : null;
+	switch (r.key) {
+		case "ArrowDown":
+			c(a[s + 1]);
+			return;
+		case "ArrowUp":
+			c(a[s - 1]);
+			return;
+		case "Home":
+			c(a[0]);
+			return;
+		case "End":
+			c(a.at(-1));
+			return;
+		case "ArrowRight":
+			if (!f) return;
+			r.preventDefault(), f.getAttribute("aria-expanded") === "false" ? f.click() : c(a.find((e, t) => t > s && l?.contains(e) && !u?.contains(e)));
+			return;
+		case "ArrowLeft": {
+			if (f?.getAttribute("aria-expanded") === "true") {
+				r.preventDefault(), f.click();
+				return;
+			}
+			let e = t(d ? l?.parentElement?.closest("[data-navlinks-group]") : l);
+			c(e?.querySelector("a[href]") ?? e);
+			return;
+		}
+		default:
+			if (r.key.length !== 1 || r.key === " ") return;
+			{
+				let e = r.key.toLowerCase();
+				c([...a.slice(s + 1), ...a.slice(0, s + 1)].find((t) => t.textContent.trim().toLowerCase().startsWith(e)));
+			}
+	}
+}
+//#endregion
+export { r as onTreeKeyDown };
+
+//# sourceMappingURL=treeKeys.js.map

package/dist/components/navigation/NavLinks/treeKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeKeys.js","names":["reachable","nav","element","rowOf","group","toggleOf","row","onTreeKeyDown","event","items","current","index","focus","inRow","toggle","at","item","ownerRow","key"],"sources":["../../../../src/components/navigation/NavLinks/treeKeys.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react'\n\n/** The links and group buttons a reader can reach now: shown, and not inside a closed group. */\nfunction reachable(nav: HTMLElement): HTMLElement[] {\n  return Array.from(nav.querySelectorAll<HTMLElement>('a[href], button')).filter(\n    (element) =>\n      !element.closest('[data-navlinks-panel][data-state=\"closed\"]') &&\n      !(element as HTMLButtonElement).disabled &&\n      (!('checkVisibility' in element) || element.checkVisibility()),\n  )\n}\n\n/** A group's own row: the button, or the link and its toggle. */\nfunction rowOf(group: Element | null | undefined): HTMLElement | null {\n  return (\n    group?.querySelector<HTMLElement>(':scope > [data-navlinks-row], :scope > [aria-expanded]') ??\n    null\n  )\n}\n\n/** The element in a group's row that opens and closes it. */\nfunction toggleOf(group: Element | null | undefined): HTMLElement | null {\n  const row = rowOf(group)\n  return row?.hasAttribute('aria-expanded')\n    ? row\n    : (row?.querySelector<HTMLElement>('[aria-expanded]') ?? null)\n}\n\n/**\n * Arrow keys for a vertical nav with groups, like a tree: Up and Down move between the links you\n * can see, Right opens a group (or steps into an open one), Left closes it (or steps out to its\n * parent), Home and End jump, and a letter jumps to the next link starting with it. Tab still\n * moves through every link, so nothing is lost for anyone who doesn't use them.\n */\nexport function onTreeKeyDown(event: KeyboardEvent<HTMLElement>) {\n  const nav = event.currentTarget\n  if (!nav.querySelector('[data-navlinks-group]')) return\n  const items = reachable(nav)\n  const current = event.target as HTMLElement\n  const index = items.indexOf(current)\n  if (index < 0 || event.altKey || event.ctrlKey || event.metaKey) return\n\n  const focus = (element: HTMLElement | null | undefined) => {\n    if (!element) return\n    event.preventDefault()\n    element.focus()\n  }\n  const group = current.closest('[data-navlinks-group]')\n  const row = rowOf(group)\n  const inRow = row?.contains(current) === true\n  const toggle = inRow ? toggleOf(group) : null\n\n  switch (event.key) {\n    case 'ArrowDown':\n      focus(items[index + 1])\n      return\n    case 'ArrowUp':\n      focus(items[index - 1])\n      return\n    case 'Home':\n      focus(items[0])\n      return\n    case 'End':\n      focus(items.at(-1))\n      return\n    case 'ArrowRight':\n      if (!toggle) return\n      event.preventDefault()\n      if (toggle.getAttribute('aria-expanded') === 'false') toggle.click()\n      else\n        focus(items.find((item, at) => at > index && group?.contains(item) && !row?.contains(item)))\n      return\n    case 'ArrowLeft': {\n      if (toggle?.getAttribute('aria-expanded') === 'true') {\n        event.preventDefault()\n        toggle.click()\n        return\n      }\n      const owner = inRow ? group?.parentElement?.closest('[data-navlinks-group]') : group\n      const ownerRow = rowOf(owner)\n      focus(ownerRow?.querySelector<HTMLElement>('a[href]') ?? ownerRow)\n      return\n    }\n    default:\n      if (event.key.length !== 1 || event.key === ' ') return\n      {\n        const key = event.key.toLowerCase()\n        const ordered = [...items.slice(index + 1), ...items.slice(0, index + 1)]\n        focus(ordered.find((item) => item.textContent.trim().toLowerCase().startsWith(key)))\n      }\n  }\n}\n"],"mappings":";AAGA,SAASA,EAAU,GAAiC;CAClD,OAAO,MAAM,KAAKC,EAAI,iBAA8B,iBAAiB,CAAC,CAAC,CAAC,QACrE,MACC,CAACC,EAAQ,QAAQ,8CAA4C,KAC7D,CAAEA,EAA8B,aAC/B,EAAE,qBAAqBA,MAAYA,EAAQ,gBAAgB,EAChE;AACF;AAGA,SAASC,EAAM,GAAuD;CACpE,OACEC,GAAO,cAA2B,wDAAwD,KAC1F;AAEJ;AAGA,SAASC,EAAS,GAAuD;CACvE,IAAMC,IAAMH,EAAMC,CAAK;CACvB,OAAOE,GAAK,aAAa,eAAe,IACpCA,IACCA,GAAK,cAA2B,iBAAiB,KAAK;AAC7D;AAQA,SAAgBC,EAAc,GAAmC;CAC/D,IAAMN,IAAMO,EAAM;CAClB,IAAI,CAACP,EAAI,cAAc,uBAAuB,GAAG;CACjD,IAAMQ,IAAQT,EAAUC,CAAG,GACrBS,IAAUF,EAAM,QAChBG,IAAQF,EAAM,QAAQC,CAAO;CACnC,IAAIC,IAAQ,KAAKH,EAAM,UAAUA,EAAM,WAAWA,EAAM,SAAS;CAEjE,IAAMI,KAAS,MAA4C;EACzD,AAAKV,MACLM,EAAM,eAAe,GACrBN,EAAQ,MAAM;CAChB,GACME,IAAQM,EAAQ,QAAQ,uBAAuB,GAC/CJ,IAAMH,EAAMC,CAAK,GACjBS,IAAQP,GAAK,SAASI,CAAO,MAAM,IACnCI,IAASD,IAAQR,EAASD,CAAK,IAAI;CAEzC,QAAQI,EAAM,KAAd;EACE,KAAK;GACH,EAAMC,EAAME,IAAQ,EAAE;GACtB;EACF,KAAK;GACH,EAAMF,EAAME,IAAQ,EAAE;GACtB;EACF,KAAK;GACH,EAAMF,EAAM,EAAE;GACd;EACF,KAAK;GACH,EAAMA,EAAM,GAAG,EAAE,CAAC;GAClB;EACF,KAAK;GACH,IAAI,CAACK,GAAQ;GAEb,AADAN,EAAM,eAAe,GACjBM,EAAO,aAAa,eAAe,MAAM,UAASA,EAAO,MAAM,IAEjEF,EAAMH,EAAM,MAAM,GAAM,MAAOM,IAAKJ,KAASP,GAAO,SAASY,CAAI,KAAK,CAACV,GAAK,SAASU,CAAI,CAAC,CAAC;GAC7F;EACF,KAAK,aAAa;GAChB,IAAIF,GAAQ,aAAa,eAAe,MAAM,QAAQ;IAEpD,AADAN,EAAM,eAAe,GACrBM,EAAO,MAAM;IACb;GACF;GAEA,IAAMG,IAAWd,EADHU,IAAQT,GAAO,eAAe,QAAQ,uBAAuB,IAAIA,CACnD;GAC5B,EAAMa,GAAU,cAA2B,SAAS,KAAKA,CAAQ;GACjE;EACF;EACA;GACE,IAAIT,EAAM,IAAI,WAAW,KAAKA,EAAM,QAAQ,KAAK;GACjD;IACE,IAAMU,IAAMV,EAAM,IAAI,YAAY;IAElC,EAAM,CADW,GAAGC,EAAM,MAAME,IAAQ,CAAC,GAAG,GAAGF,EAAM,MAAM,GAAGE,IAAQ,CAAC,CACjE,CAAA,CAAQ,MAAM,MAASK,EAAK,YAAY,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,WAAWE,CAAG,CAAC,CAAC;GACrF;CACJ;AACF"}

package/dist/components/overlays/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,120 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import type { ComboboxOption } from '../../inputs/Combobox/index.js';
+/**
+ * One entry in the palette: a page to go to or a command to run. It's a `Combobox` option with
+ * an `id` in place of `value`, so `label`, `description`, `keywords`, `group` and `disabled`
+ * search and group the same way in both.
+ */
+export interface CommandAction extends Omit<ComboboxOption, 'value'> {
+    /** Unique across the palette, nested actions included. `recent` refers to actions by it. */
+    id: string;
+    /** A glyph before the label, such as one of the built-in icons. */
+    icon?: ReactNode;
+    /**
+     * The action's own keyboard shortcut, shown beside it, written like `mod+shift+l` (`mod` is
+     * Command on a Mac and Control elsewhere). Display only: bind the shortcut yourself.
+     */
+    shortcut?: string;
+    /**
+     * Runs when the action is picked, once the palette has closed and given focus back, so the
+     * action can move focus itself (to a field, or another dialog) and keep it there.
+     */
+    onSelect?: () => void;
+    /**
+     * Makes this action open a page of its own: picking it lists these instead of running
+     * `onSelect`. Backspace in an empty search box, Escape or the back button returns.
+     */
+    actions?: readonly CommandAction[];
+    /** The search box placeholder while this action's page is open. */
+    placeholder?: string;
+}
+export interface CommandPaletteProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title' | 'children' | 'asChild' | 'forceMount'> {
+    /** Everything the palette can find, in the order to list it when the search is empty. */
+    actions: readonly CommandAction[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** A button that opens the palette. Its theme scope themes the palette. */
+    trigger?: ReactElement;
+    /**
+     * A keyboard shortcut anywhere on the page that opens and closes the palette, written like
+     * `mod+k` (Command-K on a Mac, Control-K elsewhere). Off when omitted.
+     */
+    shortcut?: string;
+    /** Accessible name of the palette and its search box. */
+    label?: string;
+    placeholder?: string;
+    /** The search text. Controlled. */
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    /**
+     * `auto` (default) filters and ranks the actions by the search, like `Combobox`. `none` lists
+     * them as given, for results your own search has already chosen.
+     */
+    filter?: 'auto' | 'none';
+    /** Actions are being fetched: a spinner in the search box, and `loadingMessage` when empty. */
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    /** Shown when nothing matches. */
+    emptyMessage?: ReactNode;
+    /** The most actions to list at once, after ranking. */
+    limit?: number;
+    /** Ids of recently used actions, most recent first, listed above the rest while the search is empty. */
+    recent?: readonly string[];
+    /** Heading of the recent actions. */
+    recentLabel?: string;
+    /** Fires after any action runs (not when one opens a page): a place to record recent actions. */
+    onAction?: (action: CommandAction) => void;
+    /** Accessible name of the back button on a nested page. */
+    backLabel?: string;
+    /** Portal target. Defaults to `document.body`; its theme scope is also used. */
+    container?: HTMLElement | null;
+}
+/**
+ * A keyboard-first launcher: search every page and action in an app, then run one with Enter.
+ *
+ * @remarks
+ * `CommandPalette` is a modal search over a list of actions. Each one is a page to go to or a
+ * command to run, grouped under headings and ranked as you type, with the matched part of each
+ * label marked. Open it with a `shortcut` (usually `mod+k`), a `trigger` button, or `open`.
+ *
+ * The arrow keys, Home and End move through the results and Enter runs the highlighted one; the
+ * first result is highlighted as you type, so Enter alone runs the best match. An action with
+ * its own `actions` opens them as a page, such as a list of projects to switch to: Backspace in
+ * an empty search box, Escape or the back button returns. Escape at the top closes the palette.
+ *
+ * ## Search and grouping
+ *
+ * Actions search and group exactly like {@link Combobox | Combobox} options: by `label`, then
+ * `keywords` and `description`, ignoring case and accents, with an exact match first, then a
+ * match at the start of a word, then anywhere. Groups appear in the order of their best result.
+ *
+ * ## Results from a server
+ *
+ * For results your own search chooses, such as records, pass `filter="none"`, set `loading` while
+ * you fetch, and pass the results as `actions`. Control the search text with `query` and
+ * `onQueryChange`.
+ *
+ * ## Recent actions
+ *
+ * `recent` takes the ids of actions to list first while the search is empty. The palette doesn't
+ * remember anything itself: record each one in `onAction`, and keep the list wherever suits your
+ * app.
+ *
+ * ## Accessibility
+ *
+ * It's a modal dialog, so focus is trapped inside and returns to whatever opened it. The search
+ * box is an ARIA combobox that keeps focus while the arrow keys move a highlight through the
+ * listbox, and a polite live region announces how many results there are. Each action's shortcut
+ * is read as its description.
+ *
+ * @privateRemarks
+ * Radix Dialog for focus (the same primitive and portal theming as Dialog and Sheet) around an
+ * ARIA 1.2 combobox whose listbox is always shown. Options share Combobox's shape and its
+ * `filterOptions`/`groupOptions`, so the two rank and group identically.
+ *
+ * <CommandPalette shortcut="mod+k" actions={actions} onAction={remember} recent={recentIds} />
+ */
+export declare const CommandPalette: import("react").ForwardRefExoticComponent<CommandPaletteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/overlays/CommandPalette/CommandPalette.js

@@ -0,0 +1,386 @@
+import { cx as e } from "../../../utils/cx.js";
+import { ArrowLeftIcon as t, ChevronRightIcon as n, SearchIcon as r } from "../../../icons/icons.js";
+import { VisuallyHidden as i } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { useLatest as a } from "../../inputs/internal/useLatest.js";
+import { Kbd as ee } from "../../typography/Kbd/Kbd.js";
+import { Spinner as o } from "../../feedback/Spinner/Spinner.js";
+import { PortalAnchorContext as s, composeRefs as c, usePortalAnchor as l, usePortalAnchorRef as te, usePortalTheme as u } from "../usePortalTheme.js";
+import { useControllableState as d } from "../../inputs/Combobox/useControllableState.js";
+import { filterOptions as ne, groupOptions as re, matchRange as f } from "../../inputs/internal/filterOptions.js";
+import { describeShortcut as p, isApplePlatform as ie, matchesShortcut as m, parseShortcut as h } from "./shortcut.js";
+import g from "./CommandPalette.module.js";
+import { forwardRef as _, useCallback as v, useEffect as y, useId as ae, useMemo as b, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Dialog as E } from "radix-ui";
+//#region src/components/overlays/CommandPalette/CommandPalette.tsx
+function D(e, t) {
+	for (let n of e) {
+		if (n.id === t) return n;
+		let e = n.actions ? D(n.actions, t) : void 0;
+		if (e) return e;
+	}
+}
+function O(e) {
+	return `${String(e)} ${e === 1 ? "result" : "results"}`;
+}
+function k({ label: e, query: t }) {
+	let n = f(e, t);
+	if (!n) return /* @__PURE__ */ w(C, { children: e });
+	let [r, i] = n;
+	return /* @__PURE__ */ T(C, { children: [
+		e.slice(0, r),
+		/* @__PURE__ */ w("mark", {
+			className: g.match,
+			children: e.slice(r, i)
+		}),
+		e.slice(i)
+	] });
+}
+var oe = _(function({ container: e }, t) {
+	let n = u(e);
+	return /* @__PURE__ */ w(E.Overlay, {
+		ref: t,
+		className: g.overlay,
+		...n
+	});
+}), A = _(function({ children: e }, t) {
+	let n = l();
+	return /* @__PURE__ */ w(E.Trigger, {
+		ref: c(t, n),
+		asChild: !0,
+		children: e
+	});
+}), j = _(function({ actions: s, label: c = "Command palette", placeholder: te = "Search", query: d, setQuery: f, path: m, setPath: h, open: _, hasTrigger: C, close: oe, filter: A = "auto", loading: j = !1, loadingMessage: M = "Loading…", emptyMessage: N = "No matches", limit: P, recent: F, recentLabel: se = "Recent", onAction: ce, backLabel: le = "Back", container: ue, className: de, onOpenAutoFocus: fe, onCloseAutoFocus: pe, onEscapeKeyDown: me, ...he }, ge) {
+	let _e = u(ue), I = ae(), ve = `${I}-listbox`, L = x(null), ye = b(() => ie(), []), R = x(null), be = l(), z = x(null), xe = a(ce), Se = a(_), B = v(() => {
+		let e = z.current;
+		e && (z.current = null, e.onSelect?.(), xe.current?.(e));
+	}, [xe]), Ce = m.map((e) => D(s, e)), V = Ce.every((e) => e?.actions) ? m : [], H = V.length > 0 ? Ce[Ce.length - 1] : void 0, U = H?.actions ?? s, W = H?.label ?? c, { sections: we, rows: G } = b(() => {
+		let e = [], t = 0, n = (e, n) => ({
+			key: e,
+			action: n,
+			index: t++
+		});
+		if (d.trim() === "" && !H && F && F.length > 0) {
+			let t = F.flatMap((e) => {
+				let t = D(s, e);
+				return t ? [n(`recent:${e}`, t)] : [];
+			});
+			t.length > 0 && e.push({
+				key: "recent",
+				label: se,
+				rows: t
+			});
+		}
+		let r = A === "auto" ? ne(U, d) : [...U], i = P === void 0 ? r : r.slice(0, Math.max(0, P));
+		for (let t of re(i)) e.push({
+			key: t.key,
+			label: t.label,
+			rows: t.options.map((e) => n(e.id, e))
+		});
+		return {
+			sections: e,
+			rows: e.flatMap((e) => e.rows)
+		};
+	}, [
+		s,
+		A,
+		P,
+		H,
+		U,
+		d,
+		F,
+		se
+	]), Te = G.some((e) => e.action.icon !== void 0), K = G.filter((e) => !e.action.disabled), [Ee, q] = S(null), [De, Oe] = S(_);
+	_ !== De && (Oe(_), _ && q(null)), y(() => {
+		_ && B();
+	}, [_, B]), y(() => () => {
+		setTimeout(() => {
+			setTimeout(B);
+		});
+	}, [B]);
+	let J = K.find((e) => e.key === Ee) ?? K[0], ke = (e) => `${I}-option-${String(e.index)}`, Y = J ? ke(J) : void 0;
+	y(() => {
+		Y && L.current?.ownerDocument.getElementById(Y)?.scrollIntoView({ block: "nearest" });
+	}, [Y]);
+	let [Ae, je] = S(""), X = j ? "" : G.length === 0 ? typeof N == "string" ? N : "No matches" : O(G.length), Z = X === "" ? "" : H ? `${W}: ${X}` : X;
+	y(() => {
+		if (Z === "") return;
+		let e = setTimeout(() => {
+			je(Z);
+		}, 500);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [Z]);
+	let Q = () => {
+		L.current?.focus();
+	}, $ = () => {
+		h(V.slice(0, -1)), f(""), q(null);
+	}, Me = (e) => {
+		if (!e.disabled) {
+			if (e.actions) {
+				h([...V, e.id]), f(""), q(null);
+				return;
+			}
+			z.current = e, oe(), setTimeout(() => {
+				Se.current && z.current === e && B();
+			});
+		}
+	}, Ne = (e) => {
+		if (K.length === 0) return;
+		let t = J ? K.indexOf(J) : -1, n = K[(t + e + K.length) % K.length];
+		q(n?.key ?? null);
+	}, Pe = (e) => {
+		f(e.target.value), q(null);
+	}, Fe = (e) => {
+		if (!e.nativeEvent.isComposing) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), Ne(1);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), Ne(-1);
+				return;
+			case "Home":
+			case "End": {
+				let t = e.key === "Home" ? K[0] : K[K.length - 1];
+				if (!t) return;
+				e.preventDefault(), q(t.key);
+				return;
+			}
+			case "Enter":
+				e.preventDefault(), J && Me(J.action);
+				return;
+			case "Backspace":
+				d === "" && H && (e.preventDefault(), $());
+				return;
+		}
+	}, Ie = (e) => {
+		let { action: t } = e, r = !!t.disabled, i = ke(e), a = t.shortcut ? p(t.shortcut, ye) : void 0, o = [t.description, a?.spoken].filter(Boolean).join(", ");
+		return /* @__PURE__ */ T("div", {
+			id: i,
+			role: "option",
+			"aria-selected": J?.key === e.key,
+			"aria-disabled": r || void 0,
+			"aria-label": t.label,
+			"aria-describedby": o === "" ? void 0 : `${i}-hint`,
+			"aria-keyshortcuts": a?.aria,
+			className: g.option,
+			"data-active": J?.key === e.key || void 0,
+			"data-disabled": r || void 0,
+			"data-page": t.actions ? "" : void 0,
+			onMouseDown: (e) => {
+				e.preventDefault();
+			},
+			onPointerMove: () => {
+				!r && Ee !== e.key && q(e.key);
+			},
+			onClick: () => {
+				Me(t);
+			},
+			children: [
+				t.icon !== void 0 || Te ? /* @__PURE__ */ w("span", {
+					className: g.icon,
+					"aria-hidden": "true",
+					children: t.icon
+				}) : null,
+				/* @__PURE__ */ T("span", {
+					className: g.text,
+					children: [/* @__PURE__ */ w("span", {
+						className: g.label,
+						children: /* @__PURE__ */ w(k, {
+							label: t.label,
+							query: d
+						})
+					}), t.description ? /* @__PURE__ */ w("span", {
+						className: g.description,
+						"aria-hidden": "true",
+						children: t.description
+					}) : null]
+				}),
+				a ? /* @__PURE__ */ w("span", {
+					className: g.shortcut,
+					"aria-hidden": "true",
+					children: a.keys.map((e, t) => /* @__PURE__ */ w(ee, {
+						size: "sm",
+						children: e
+					}, t))
+				}) : null,
+				t.actions ? /* @__PURE__ */ w(n, { className: g.chevron }) : null,
+				o === "" ? null : /* @__PURE__ */ w("span", {
+					id: `${i}-hint`,
+					hidden: !0,
+					children: o
+				})
+			]
+		}, e.key);
+	};
+	return /* @__PURE__ */ T(E.Content, {
+		ref: ge,
+		className: e(g.content, de),
+		"aria-describedby": void 0,
+		"data-page": H ? "" : void 0,
+		..._e,
+		...he,
+		onOpenAutoFocus: (e) => {
+			R.current = L.current?.ownerDocument.activeElement ?? null, fe?.(e), !e.defaultPrevented && (e.preventDefault(), Q());
+		},
+		onCloseAutoFocus: (e) => {
+			pe?.(e);
+			let t = R.current;
+			if (R.current = null, z.current) {
+				let n = e.defaultPrevented;
+				e.preventDefault();
+				let r = C ? be?.current : t;
+				!n && r instanceof HTMLElement && r.isConnected && r.focus(), B();
+				return;
+			}
+			if (e.defaultPrevented || C || !(t instanceof HTMLElement) || !t.isConnected) return;
+			let n = t.ownerDocument.activeElement, r = e.target instanceof Node ? e.target : null;
+			(!n || n === t.ownerDocument.body || r?.contains(n)) && (e.preventDefault(), t.focus());
+		},
+		onEscapeKeyDown: (e) => {
+			me?.(e), !e.defaultPrevented && H && (e.preventDefault(), $(), Q());
+		},
+		children: [
+			/* @__PURE__ */ w(E.Title, {
+				asChild: !0,
+				children: /* @__PURE__ */ w(i, {
+					as: "h2",
+					children: c
+				})
+			}),
+			/* @__PURE__ */ T("div", {
+				className: g.search,
+				children: [
+					H ? /* @__PURE__ */ w("button", {
+						type: "button",
+						className: g.back,
+						"aria-label": le,
+						onMouseDown: (e) => {
+							e.preventDefault();
+						},
+						onClick: () => {
+							$(), Q();
+						},
+						children: /* @__PURE__ */ w(t, {})
+					}) : /* @__PURE__ */ w(r, { className: g.searchIcon }),
+					H ? /* @__PURE__ */ w("span", {
+						className: g.crumb,
+						"aria-hidden": "true",
+						children: H.label
+					}) : null,
+					/* @__PURE__ */ w("input", {
+						ref: L,
+						type: "text",
+						role: "combobox",
+						className: g.input,
+						value: d,
+						placeholder: H?.placeholder ?? te,
+						autoComplete: "off",
+						autoCapitalize: "off",
+						autoCorrect: "off",
+						spellCheck: !1,
+						"aria-label": W,
+						"aria-autocomplete": "list",
+						"aria-haspopup": "listbox",
+						"aria-expanded": G.length > 0,
+						"aria-controls": ve,
+						"aria-activedescendant": Y,
+						"aria-busy": j || void 0,
+						onChange: Pe,
+						onKeyDown: Fe
+					}),
+					j ? /* @__PURE__ */ w(o, {
+						size: "sm",
+						label: null,
+						className: g.spinner
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: g.body,
+				children: [/* @__PURE__ */ w("div", {
+					id: ve,
+					role: "listbox",
+					"aria-label": W,
+					"aria-busy": j || void 0,
+					className: g.listbox,
+					children: we.map((e, t) => e.label === void 0 ? e.rows.map(Ie) : /* @__PURE__ */ T("div", {
+						role: "group",
+						"aria-labelledby": `${I}-group-${String(t)}`,
+						className: g.group,
+						children: [/* @__PURE__ */ w("div", {
+							id: `${I}-group-${String(t)}`,
+							role: "presentation",
+							className: g.groupLabel,
+							children: e.label
+						}), e.rows.map(Ie)]
+					}, e.key))
+				}), G.length === 0 ? j ? /* @__PURE__ */ T("div", {
+					className: g.message,
+					children: [/* @__PURE__ */ w(o, {
+						size: "sm",
+						label: null
+					}), /* @__PURE__ */ w("span", { children: M })]
+				}) : /* @__PURE__ */ w("div", {
+					className: g.message,
+					children: N
+				}) : null]
+			}),
+			/* @__PURE__ */ w(i, {
+				as: "div",
+				role: "status",
+				"aria-live": "polite",
+				children: Ae
+			})
+		]
+	});
+}), M = _(function({ open: e, defaultOpen: t = !1, onOpenChange: n, trigger: r, shortcut: i, query: ee, defaultQuery: o = "", onQueryChange: c, container: l, ...u }, ne) {
+	let re = te(), [f, p] = d(e, t, n), [g, _] = d(ee, o, c), [ae, b] = S([]), C = a(g), D = v((e) => {
+		e !== C.current && _(e);
+	}, [C, _]), O = a(f), k = v((e) => {
+		e !== O.current && p(e);
+	}, [O, p]), M = x(f);
+	y(() => {
+		M.current && !f && (D(""), b((e) => e.length > 0 ? [] : e)), M.current = f;
+	}, [f, D]);
+	let N = a(() => {
+		k(!O.current);
+	});
+	return y(() => {
+		if (!i) return;
+		let e = h(i, ie()), t = (t) => {
+			t.defaultPrevented || t.isComposing || t.repeat || m(t, e) && (t.preventDefault(), N.current());
+		};
+		return document.addEventListener("keydown", t), () => {
+			document.removeEventListener("keydown", t);
+		};
+	}, [i, N]), /* @__PURE__ */ w(s.Provider, {
+		value: re,
+		children: /* @__PURE__ */ T(E.Root, {
+			open: f,
+			onOpenChange: k,
+			children: [r ? /* @__PURE__ */ w(A, { children: r }) : null, /* @__PURE__ */ T(E.Portal, {
+				container: l,
+				children: [/* @__PURE__ */ w(oe, { container: l }), /* @__PURE__ */ w(j, {
+					ref: ne,
+					container: l,
+					query: g,
+					setQuery: D,
+					path: ae,
+					setPath: b,
+					open: f,
+					hasTrigger: !!r,
+					close: () => {
+						k(!1);
+					},
+					...u
+				})]
+			})]
+		})
+	});
+});
+//#endregion
+export { M as CommandPalette };
+
+//# sourceMappingURL=CommandPalette.js.map