@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

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

@@ -0,0 +1,96 @@
+import { KeyboardEvent, RefObject } from 'react';
+/**
+ * Passed to an item's `onSelect`. Call `preventDefault()` (or return
+ * `false` from the handler) to keep the palette open after this command.
+ */
+export interface CommandPaletteSelectEvent {
+    /** The item's `value`. */
+    value: string;
+    /** True once `preventDefault()` was called. */
+    defaultPrevented: boolean;
+    /** Keeps the palette open after this selection. */
+    preventDefault: () => void;
+}
+/**
+ * Custom filter: return a score for an item. `0` (or less) hides it; higher
+ * scores rank first. `search` is the raw input text.
+ */
+export type CommandPaletteFilter = (value: string, search: string, keywords: string[]) => number;
+/** @internal What an item registers with the palette. */
+export interface ItemRecord {
+    /** Internal, stable key. */
+    key: string;
+    /** Resolved DOM id of the option element. */
+    domId: string;
+    value: string;
+    keywords: string[];
+    disabled: boolean;
+    groupKey: string | null;
+    /** Page to open instead of running a command. */
+    to?: string;
+    onSelectRef: {
+        current: ((event: CommandPaletteSelectEvent) => void | boolean) | undefined;
+    };
+}
+/** @internal Filter results for the registered items. */
+export interface Results {
+    /** Items shown with the current search. */
+    visible: Set<string>;
+    /** Rank (`data-order`) of each visible item: lower is better. */
+    itemOrder: Map<string, number>;
+    /** Rank of each group: the best rank of its visible items. */
+    groupOrder: Map<string, number>;
+    /** Visible item count per group. */
+    groupCount: Map<string, number>;
+    /** Total visible items. */
+    count: number;
+    /** Results are being ranked (searching with `sort`). */
+    ranked: boolean;
+}
+/** @internal Shared state between `CommandPalette` and its parts. */
+export interface CommandPaletteContextValue {
+    search: string;
+    setSearch: (search: string) => void;
+    /** True when the built-in (or custom) filter applies to the current search. */
+    filtering: boolean;
+    highlightMatches: boolean;
+    results: Results;
+    register: (record: ItemRecord) => () => void;
+    activeId: string | null;
+    /** Sets the active option by DOM id. */
+    setActiveId: (id: string | null) => void;
+    /** Runs (or opens the page of) the item with this DOM id. */
+    selectById: (id: string) => void;
+    pages: string[];
+    currentPage: string | null;
+    pushPage: (name: string) => void;
+    popPage: () => void;
+    pageTitles: Record<string, string>;
+    registerPageTitle: (name: string, title: string) => () => void;
+    loading: boolean;
+    /** A Loading part registers its text, which the root's live region announces. */
+    registerLoading: (label: string) => () => void;
+    /** Element after the listbox where Empty and Loading render. */
+    statusSlot: HTMLElement | null;
+    setStatusSlot: (el: HTMLElement | null) => void;
+    inputRef: RefObject<HTMLInputElement | null>;
+    listboxRef: RefObject<HTMLElement | null>;
+    listboxId: string;
+    setListboxId: (id: string | null) => void;
+    titleId: string;
+    /** The palette's accessible name (`label`). */
+    label: string;
+    instructionsId: string;
+    backLabel: string;
+    /** Keyboard handling for the search input. */
+    onInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** Called when the input unmounts (the palette finished closing). */
+    reset: () => void;
+}
+export declare const CommandPaletteContext: import('react').Context<CommandPaletteContextValue | null>;
+/** @internal Reads the nearest `CommandPalette`; throws a helpful error outside one. */
+export declare function useCommandPalette(part: string): CommandPaletteContextValue;
+/** @internal The enclosing `CommandPalette.Group`, if any. */
+export declare const GroupContext: import('react').Context<string | null>;
+/** @internal The enclosing `CommandPalette.Page` name, or null at the root page. */
+export declare const PageContext: import('react').Context<string | null>;

package/dist/components/overlays/CommandPalette/CommandPaletteContext.mjs

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/overlays/CommandPalette/CommandPaletteContext.ts
+var n = e(null);
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`<${e}> must be used inside <CommandPalette>.`);
+	return r;
+}
+var i = e(null), a = e(null);
+//#endregion
+export { n as CommandPaletteContext, i as GroupContext, a as PageContext, r as useCommandPalette };

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

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/refs.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/Portal/Portal.cjs.js"),i=require("../../feedback/Spinner/Spinner.cjs.js"),a=require("../../primitives/Button/Button.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../../primitives/Kbd/Kbd.cjs.js"),c=require("../../data-display/EmptyState/EmptyState.cjs.js"),l=require("./CommandPaletteContext.cjs.js"),u=require("./commandPaletteUtils.cjs.js"),d=require("./CommandPalette.module.css.cjs.js");let f=require("react"),p=require("react/jsx-runtime");var m=globalThis.process?.env?.NODE_ENV!==`production`;function h({placeholder:r,id:s,className:c,onKeyDown:u,ref:m,"aria-label":h,"aria-labelledby":g,"aria-describedby":_,...v}){let y=e.useMessages(),b=r??y.commandPalette.placeholder,x=l.useCommandPalette(`CommandPalette.Input`),S=(0,f.useId)(),C=(0,f.useMemo)(()=>t.mergeRefs(m,x.inputRef),[m,x.inputRef]),w=x.pages.length>0,T=x.pages.map(e=>x.pageTitles[e]??e).join(`, `),E=g?void 0:h??(w?`${x.label}, ${T}`:x.label),D=[x.instructionsId,_].filter(Boolean).join(` `);return(0,p.jsxs)(`div`,{className:d.default.header,children:[w&&(0,p.jsxs)(`div`,{className:d.default.crumbs,children:[(0,p.jsx)(a.IconButton,{"aria-label":x.backLabel,variant:`ghost`,tone:`neutral`,size:`sm`,className:d.default.back,onClick:()=>{x.popPage(),x.inputRef.current?.focus()},children:(0,p.jsx)(o.ChevronLeftIcon,{})}),(0,p.jsx)(`span`,{className:d.default.trail,children:x.pages.map((e,t)=>(0,p.jsxs)(`span`,{className:d.default.crumb,children:[t>0&&(0,p.jsx)(o.ChevronRightIcon,{"aria-hidden":`true`,className:d.default.crumbSeparator}),x.pageTitles[e]??e]},`${t}-${e}`))})]}),(0,p.jsxs)(`div`,{className:d.default.field,children:[(0,p.jsx)(o.SearchIcon,{"aria-hidden":`true`,className:d.default.searchIcon}),(0,p.jsx)(`input`,{autoComplete:`off`,autoCorrect:`off`,autoCapitalize:`off`,spellCheck:!1,enterKeyHint:`go`,...v,ref:C,id:s??S,type:`text`,role:`combobox`,"aria-expanded":`true`,"aria-haspopup":`listbox`,"aria-controls":x.listboxId,"aria-autocomplete":`list`,"aria-activedescendant":x.activeId??void 0,"aria-label":E,"aria-labelledby":g,"aria-describedby":D,placeholder:b,value:x.search,onChange:e=>x.setSearch(e.target.value),onKeyDown:e=>{u?.(e),e.defaultPrevented||x.onInputKeyDown(e)},className:n.cx(d.default.input,x.loading&&d.default.inputLoading,c)}),x.loading&&(0,p.jsx)(i.Spinner,{decorative:!0,size:`sm`,className:d.default.inputSpinner})]})]})}function g({label:r,id:i,className:a,children:o,ref:s,"aria-label":c,...u}){let m=e.useMessages(),h=r??m.commandPalette.list,g=l.useCommandPalette(`CommandPalette.List`),{setListboxId:_}=g;(0,f.useLayoutEffect)(()=>(_(i??null),()=>_(null)),[i,_]);let v=(0,f.useMemo)(()=>t.mergeRefs(s,g.listboxRef),[s,g.listboxRef]);return(0,p.jsxs)(`div`,{className:d.default.listArea,children:[(0,p.jsx)(`div`,{"aria-label":u[`aria-labelledby`]?void 0:c??h,...u,ref:v,id:g.listboxId,role:`listbox`,"aria-busy":g.loading||void 0,className:n.cx(d.default.list,a),children:(0,p.jsx)(f.Fragment,{children:o},g.results.ranked?`ranked`:`rendered`)}),(0,p.jsx)(`div`,{ref:g.setStatusSlot,className:d.default.status})]})}function _({heading:e,className:t,style:r,children:i,...a}){let o=l.useCommandPalette(`CommandPalette.Group`),s=(0,f.useId)(),c=(0,f.useId)(),u=o.results.groupCount.get(s)??0,m=o.results.groupOrder.get(s)??0;return(0,p.jsxs)(`div`,{role:`group`,"aria-labelledby":e?c:void 0,...a,hidden:u===0,"data-order":m,style:r,className:n.cx(d.default.group,t),children:[e&&(0,p.jsx)(`div`,{id:c,className:d.default.groupHeading,"data-command-heading":``,children:e}),(0,p.jsx)(l.GroupContext.Provider,{value:s,children:i})]})}var v={cmd:`Meta`,meta:`Meta`,ctrl:`Control`,alt:`Alt`,option:`Alt`,shift:`Shift`,enter:`Enter`,return:`Enter`,esc:`Escape`,tab:`Tab`,space:`Space`,backspace:`Backspace`,delete:`Delete`,up:`ArrowUp`,down:`ArrowDown`,left:`ArrowLeft`,right:`ArrowRight`};function y(e,t){return e.map(e=>{let n=e.toLowerCase();return n===`mod`?t===`mac`?`Meta`:`Control`:v[n]??(e.length===1?e.toUpperCase():e)}).join(`+`)}var b={x:NaN,y:NaN};function x({text:e,indexes:t}){if(t.length===0)return(0,p.jsx)(p.Fragment,{children:e});let n=new Set(t),r=[],i=``,a=n.has(0),o=e=>{i&&r.push(a?(0,p.jsx)(`mark`,{className:d.default.mark,children:i},e):i)};for(let t=0;t<e.length;t+=1){let r=n.has(t);r!==a&&(o(t),i=``,a=r),i+=e[t]}return o(e.length),(0,p.jsx)(p.Fragment,{children:r})}function S({value:e,keywords:t,children:r,icon:i,shortcut:a,onSelect:c,to:h,disabled:g=!1,id:_,className:v,style:S,onClick:C,onMouseDown:w,onPointerMove:T,"aria-keyshortcuts":E,...D}){let O=l.useCommandPalette(`CommandPalette.Item`),{register:k}=O,A=(0,f.useId)(),j=_??`${A}-option`,M=(0,f.useContext)(l.GroupContext),N=(0,f.useContext)(l.PageContext)===O.currentPage,P=s.useKbdPlatform(),F=typeof r==`string`?r:r==null?e:void 0,I=e??(typeof r==`string`?r:``);(0,f.useEffect)(()=>{m&&!I&&console.warn("[CommandPalette.Item] Pass a `value` when the label isn't plain text, so it can be searched.")},[I]);let L=(0,f.useRef)(c);L.current=c;let R=t?.join(`\0`)??``;if((0,f.useLayoutEffect)(()=>{if(N)return k({key:A,domId:j,value:I,keywords:R?R.split(`\0`):[],disabled:g,groupKey:M,to:h,onSelectRef:L})},[k,N,A,j,I,R,g,M,h]),!N||!O.results.visible.has(A))return null;let z=O.activeId===j,B=O.results.itemOrder.get(A)??0,V=O.highlightMatches?u.normalizeQuery(O.search):``,H=F&&V?u.matchText(F,V)?.indexes??[]:[],U=Array.isArray(a),W=E??(U?y(a,P):void 0),G=e=>{if(T?.(e),e.defaultPrevented||e.pointerType===`touch`)return;let t=b.x!==e.clientX||b.y!==e.clientY;b.x=e.clientX,b.y=e.clientY,t&&!z&&O.setActiveId(j)};return(0,p.jsxs)(`div`,{...D,id:j,role:`option`,"aria-selected":z,"aria-disabled":g||void 0,"aria-keyshortcuts":W,"data-active":z?``:void 0,"data-disabled":g?``:void 0,"data-order":B,style:S,className:n.cx(d.default.item,v),onMouseDown:e=>{w?.(e),e.preventDefault()},onPointerMove:G,onClick:e=>{C?.(e),!e.defaultPrevented&&O.selectById(j)},children:[i&&(0,p.jsx)(`span`,{"aria-hidden":`true`,className:d.default.icon,children:i}),(0,p.jsx)(`span`,{className:d.default.label,children:F===void 0?r:(0,p.jsx)(x,{text:F,indexes:H})}),a!=null&&a!==!1&&(0,p.jsx)(`span`,{"aria-hidden":`true`,className:d.default.shortcut,children:U?(0,p.jsx)(s.KbdShortcut,{keys:a,size:`sm`}):a}),h&&(0,p.jsx)(o.ChevronRightIcon,{"aria-hidden":`true`,className:d.default.chevron})]})}function C({children:e,className:t,...i}){let a=l.useCommandPalette(`CommandPalette.Empty`);return a.results.count>0||a.loading||!a.statusSlot?null:(0,p.jsx)(r.Portal,{container:a.statusSlot,children:(0,p.jsx)(`div`,{...i,className:n.cx(d.default.empty,t),children:e??(0,p.jsx)(c.EmptyState,{kind:`no-results`,query:a.search.trim()||void 0,size:`sm`,headingLevel:3})})})}function w({children:t,className:a,...o}){let s=e.useMessages(),c=t??s.commandPalette.loading,u=l.useCommandPalette(`CommandPalette.Loading`),{registerLoading:m}=u,h=typeof c==`string`?c:s.commandPalette.loading;return(0,f.useLayoutEffect)(()=>m(h),[m,h]),u.statusSlot?(0,p.jsx)(r.Portal,{container:u.statusSlot,children:(0,p.jsxs)(`div`,{...o,className:n.cx(d.default.loading,a),children:[(0,p.jsx)(i.Spinner,{decorative:!0,size:`sm`}),(0,p.jsx)(`span`,{children:c})]})}):null}function T({className:e,...t}){let r=l.useCommandPalette(`CommandPalette.Separator`);return(0,f.useContext)(l.PageContext)===r.currentPage?(0,p.jsx)(`div`,{"aria-hidden":`true`,...t,hidden:r.search.trim()!==``,className:n.cx(d.default.separator,e)}):null}function E({name:e,title:t,children:n}){let r=l.useCommandPalette(`CommandPalette.Page`),{registerPageTitle:i}=r;return(0,f.useLayoutEffect)(()=>i(e,t),[i,e,t]),r.currentPage===e?(0,p.jsx)(l.PageContext.Provider,{value:e,children:n}):null}exports.CommandPaletteEmpty=C,exports.CommandPaletteGroup=_,exports.CommandPaletteInput=h,exports.CommandPaletteItem=S,exports.CommandPaletteList=g,exports.CommandPaletteLoading=w,exports.CommandPalettePage=E,exports.CommandPaletteSeparator=T;

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

@@ -0,0 +1,115 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { KbdKeyToken } from '../../primitives/Kbd';
+import { CommandPaletteSelectEvent } from './CommandPaletteContext';
+export interface CommandPaletteInputProps extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "onChange" | "type" | "role" | "size" | "children"> {
+    /** Hint shown while the search is empty. Localize it here. @default "Type a command or search…" */
+    placeholder?: string;
+}
+/**
+ * The search field: `role="combobox"` controlling the list, with
+ * `aria-activedescendant` pointing at the active option. It keeps DOM
+ * focus the whole time. Named by the palette's `label` (plus the current
+ * page title) unless you pass `aria-label`. On nested pages it also shows
+ * the page trail and a back button.
+ */
+export declare function CommandPaletteInput({ placeholder: placeholderProp, id, className, onKeyDown, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: CommandPaletteInputProps): import("react").JSX.Element;
+export interface CommandPaletteListProps extends ComponentPropsWithRef<"div"> {
+    /** Accessible name of the listbox. Localize it here. @default "Commands" */
+    label?: string;
+}
+/**
+ * The scrolling `role="listbox"`. Put `Group`, `Item`, `Separator`, and
+ * `Page` inside. `Empty` and `Loading` can go here too: they render just
+ * after the listbox (not inside it), so the listbox only holds options and
+ * groups.
+ */
+export declare function CommandPaletteList({ label: labelProp, id, className, children, ref, "aria-label": ariaLabel, ...rest }: CommandPaletteListProps): import("react").JSX.Element;
+export interface CommandPaletteGroupProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
+    /** Visible group label; names the `role="group"`. Without it, pass `aria-label`. */
+    heading?: ReactNode;
+}
+/**
+ * A labelled `role="group"` of items. It hides itself when none of its
+ * items match the search, and moves up while searching when it holds the
+ * best match.
+ */
+export declare function CommandPaletteGroup({ heading, className, style, children, ...rest }: CommandPaletteGroupProps): import("react").JSX.Element;
+/**
+ * A shortcut hint: key tokens (`["mod", "s"]`) shown with `KbdShortcut`
+ * and exposed as `aria-keyshortcuts`, or any custom node.
+ */
+export type CommandPaletteShortcut = Array<KbdKeyToken | (string & {})> | ReactNode;
+export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<"div">, "onSelect" | "role" | "children"> {
+    /**
+     * Text the search matches against, and the value passed to `onSelect`.
+     * Defaults to `children` when that is a string; required otherwise.
+     */
+    value?: string;
+    /** Extra search terms (synonyms, ids) that match but aren't shown. */
+    keywords?: string[];
+    /** Label. Plain-text labels get their matched characters highlighted. Defaults to `value`. */
+    children?: ReactNode;
+    /** Decorative icon before the label. Hidden from assistive technology. */
+    icon?: ReactNode;
+    /** Shortcut hint at the end of the row. */
+    shortcut?: CommandPaletteShortcut;
+    /**
+     * Runs when the item is chosen with Enter or a click. The palette then
+     * closes, unless the handler calls `event.preventDefault()` or returns
+     * `false` (or the palette has `closeOnSelect={false}`).
+     */
+    onSelect?: (event: CommandPaletteSelectEvent) => void | boolean;
+    /**
+     * Opens the `CommandPalette.Page` with this name instead of running a
+     * command. Shows a chevron. End the label with "…" by convention.
+     */
+    to?: string;
+    /**
+     * Shows the item as unavailable. It can still be reached with the arrow
+     * keys (so it's discoverable) but can't be run. @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * One command: `role="option"`. Hidden when it doesn't match the search.
+ * Hovering makes it active only on real pointer movement, so a resting
+ * pointer doesn't fight the keyboard.
+ */
+export declare function CommandPaletteItem({ value, keywords, children, icon, shortcut, onSelect, to, disabled, id, className, style, onClick, onMouseDown, onPointerMove, "aria-keyshortcuts": ariaKeyShortcuts, ...rest }: CommandPaletteItemProps): import("react").JSX.Element | null;
+export interface CommandPaletteEmptyProps extends ComponentPropsWithRef<"div"> {
+    /** Custom content. Defaults to a small "No results" `EmptyState` naming the search. */
+    children?: ReactNode;
+}
+/**
+ * Shown when nothing matches (and nothing is loading). Rendered just after
+ * the listbox. The result count is already announced by the palette, so
+ * this isn't a live region.
+ */
+export declare function CommandPaletteEmpty({ children, className, ...rest }: CommandPaletteEmptyProps): import("react").JSX.Element | null;
+export interface CommandPaletteLoadingProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
+    /** Visible (and announced) text. Localize it here. @default "Loading results…" */
+    children?: ReactNode;
+}
+/**
+ * Render while results are loading. It shows a spinner row after the
+ * listbox (`role="status"`), marks the listbox `aria-busy`, hides `Empty`,
+ * and holds the results announcement until loading ends.
+ */
+export declare function CommandPaletteLoading({ children: childrenProp, className, ...rest }: CommandPaletteLoadingProps): import("react").JSX.Element | null;
+export type CommandPaletteSeparatorProps = Omit<ComponentPropsWithRef<"div">, "children">;
+/** A decorative divider between items or groups. Hidden while searching. */
+export declare function CommandPaletteSeparator({ className, ...rest }: CommandPaletteSeparatorProps): import("react").JSX.Element | null;
+export interface CommandPalettePageProps {
+    /** Page name. An item with `to={name}` opens it. */
+    name: string;
+    /** Title shown in the page trail and announced on entry. */
+    title: string;
+    /** The page's items and groups. */
+    children?: ReactNode;
+}
+/**
+ * A nested list (e.g. "Change theme…"), shown instead of the root items
+ * while it is the current page. Opening a page clears the search; Back,
+ * Backspace in an empty search, or Escape goes back. Renders no element.
+ */
+export declare function CommandPalettePage({ name, title, children }: CommandPalettePageProps): import("react").JSX.Element | null;

package/dist/components/overlays/CommandPalette/CommandPaletteParts.mjs

@@ -0,0 +1,304 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { mergeRefs as t } from "../../../utils/refs.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { Portal as r } from "../../utilities/Portal/Portal.mjs";
+import { Spinner as i } from "../../feedback/Spinner/Spinner.mjs";
+import { IconButton as a } from "../../primitives/Button/Button.mjs";
+import { ChevronLeftIcon as o, ChevronRightIcon as s, SearchIcon as c } from "../../primitives/Icon/icons.mjs";
+import { KbdShortcut as l, useKbdPlatform as u } from "../../primitives/Kbd/Kbd.mjs";
+import { EmptyState as d } from "../../data-display/EmptyState/EmptyState.mjs";
+import { GroupContext as f, PageContext as p, useCommandPalette as m } from "./CommandPaletteContext.mjs";
+import { matchText as h, normalizeQuery as g } from "./commandPaletteUtils.mjs";
+import _ from "./CommandPalette.module.css.mjs";
+import { Fragment as v, useContext as y, useEffect as b, useId as x, useLayoutEffect as S, useMemo as C, useRef as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/components/overlays/CommandPalette/CommandPaletteParts.tsx
+var O = globalThis.process?.env?.NODE_ENV !== "production";
+function k({ placeholder: r, id: l, className: u, onKeyDown: d, ref: f, "aria-label": p, "aria-labelledby": h, "aria-describedby": g, ...v }) {
+	let y = e(), b = r ?? y.commandPalette.placeholder, S = m("CommandPalette.Input"), w = x(), T = C(() => t(f, S.inputRef), [f, S.inputRef]), O = S.pages.length > 0, k = S.pages.map((e) => S.pageTitles[e] ?? e).join(", "), A = h ? void 0 : p ?? (O ? `${S.label}, ${k}` : S.label), j = [S.instructionsId, g].filter(Boolean).join(" ");
+	return /* @__PURE__ */ D("div", {
+		className: _.header,
+		children: [O && /* @__PURE__ */ D("div", {
+			className: _.crumbs,
+			children: [/* @__PURE__ */ E(a, {
+				"aria-label": S.backLabel,
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				className: _.back,
+				onClick: () => {
+					S.popPage(), S.inputRef.current?.focus();
+				},
+				children: /* @__PURE__ */ E(o, {})
+			}), /* @__PURE__ */ E("span", {
+				className: _.trail,
+				children: S.pages.map((e, t) => /* @__PURE__ */ D("span", {
+					className: _.crumb,
+					children: [t > 0 && /* @__PURE__ */ E(s, {
+						"aria-hidden": "true",
+						className: _.crumbSeparator
+					}), S.pageTitles[e] ?? e]
+				}, `${t}-${e}`))
+			})]
+		}), /* @__PURE__ */ D("div", {
+			className: _.field,
+			children: [
+				/* @__PURE__ */ E(c, {
+					"aria-hidden": "true",
+					className: _.searchIcon
+				}),
+				/* @__PURE__ */ E("input", {
+					autoComplete: "off",
+					autoCorrect: "off",
+					autoCapitalize: "off",
+					spellCheck: !1,
+					enterKeyHint: "go",
+					...v,
+					ref: T,
+					id: l ?? w,
+					type: "text",
+					role: "combobox",
+					"aria-expanded": "true",
+					"aria-haspopup": "listbox",
+					"aria-controls": S.listboxId,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": S.activeId ?? void 0,
+					"aria-label": A,
+					"aria-labelledby": h,
+					"aria-describedby": j,
+					placeholder: b,
+					value: S.search,
+					onChange: (e) => S.setSearch(e.target.value),
+					onKeyDown: (e) => {
+						d?.(e), e.defaultPrevented || S.onInputKeyDown(e);
+					},
+					className: n(_.input, S.loading && _.inputLoading, u)
+				}),
+				S.loading && /* @__PURE__ */ E(i, {
+					decorative: !0,
+					size: "sm",
+					className: _.inputSpinner
+				})
+			]
+		})]
+	});
+}
+function A({ label: r, id: i, className: a, children: o, ref: s, "aria-label": c, ...l }) {
+	let u = e(), d = r ?? u.commandPalette.list, f = m("CommandPalette.List"), { setListboxId: p } = f;
+	S(() => (p(i ?? null), () => p(null)), [i, p]);
+	let h = C(() => t(s, f.listboxRef), [s, f.listboxRef]);
+	return /* @__PURE__ */ D("div", {
+		className: _.listArea,
+		children: [/* @__PURE__ */ E("div", {
+			"aria-label": l["aria-labelledby"] ? void 0 : c ?? d,
+			...l,
+			ref: h,
+			id: f.listboxId,
+			role: "listbox",
+			"aria-busy": f.loading || void 0,
+			className: n(_.list, a),
+			children: /* @__PURE__ */ E(v, { children: o }, f.results.ranked ? "ranked" : "rendered")
+		}), /* @__PURE__ */ E("div", {
+			ref: f.setStatusSlot,
+			className: _.status
+		})]
+	});
+}
+function j({ heading: e, className: t, style: r, children: i, ...a }) {
+	let o = m("CommandPalette.Group"), s = x(), c = x(), l = o.results.groupCount.get(s) ?? 0, u = o.results.groupOrder.get(s) ?? 0;
+	return /* @__PURE__ */ D("div", {
+		role: "group",
+		"aria-labelledby": e ? c : void 0,
+		...a,
+		hidden: l === 0,
+		"data-order": u,
+		style: r,
+		className: n(_.group, t),
+		children: [e && /* @__PURE__ */ E("div", {
+			id: c,
+			className: _.groupHeading,
+			"data-command-heading": "",
+			children: e
+		}), /* @__PURE__ */ E(f.Provider, {
+			value: s,
+			children: i
+		})]
+	});
+}
+var M = {
+	cmd: "Meta",
+	meta: "Meta",
+	ctrl: "Control",
+	alt: "Alt",
+	option: "Alt",
+	shift: "Shift",
+	enter: "Enter",
+	return: "Enter",
+	esc: "Escape",
+	tab: "Tab",
+	space: "Space",
+	backspace: "Backspace",
+	delete: "Delete",
+	up: "ArrowUp",
+	down: "ArrowDown",
+	left: "ArrowLeft",
+	right: "ArrowRight"
+};
+function N(e, t) {
+	return e.map((e) => {
+		let n = e.toLowerCase();
+		return n === "mod" ? t === "mac" ? "Meta" : "Control" : M[n] ?? (e.length === 1 ? e.toUpperCase() : e);
+	}).join("+");
+}
+var P = {
+	x: NaN,
+	y: NaN
+};
+function F({ text: e, indexes: t }) {
+	if (t.length === 0) return /* @__PURE__ */ E(T, { children: e });
+	let n = new Set(t), r = [], i = "", a = n.has(0), o = (e) => {
+		i && r.push(a ? /* @__PURE__ */ E("mark", {
+			className: _.mark,
+			children: i
+		}, e) : i);
+	};
+	for (let t = 0; t < e.length; t += 1) {
+		let r = n.has(t);
+		r !== a && (o(t), i = "", a = r), i += e[t];
+	}
+	return o(e.length), /* @__PURE__ */ E(T, { children: r });
+}
+function I({ value: e, keywords: t, children: r, icon: i, shortcut: a, onSelect: o, to: c, disabled: d = !1, id: v, className: C, style: T, onClick: k, onMouseDown: A, onPointerMove: j, "aria-keyshortcuts": M, ...I }) {
+	let L = m("CommandPalette.Item"), { register: R } = L, z = x(), B = v ?? `${z}-option`, V = y(f), H = y(p) === L.currentPage, U = u(), W = typeof r == "string" ? r : r == null ? e : void 0, G = e ?? (typeof r == "string" ? r : "");
+	b(() => {
+		O && !G && console.warn("[CommandPalette.Item] Pass a `value` when the label isn't plain text, so it can be searched.");
+	}, [G]);
+	let K = w(o);
+	K.current = o;
+	let q = t?.join("\0") ?? "";
+	if (S(() => {
+		if (H) return R({
+			key: z,
+			domId: B,
+			value: G,
+			keywords: q ? q.split("\0") : [],
+			disabled: d,
+			groupKey: V,
+			to: c,
+			onSelectRef: K
+		});
+	}, [
+		R,
+		H,
+		z,
+		B,
+		G,
+		q,
+		d,
+		V,
+		c
+	]), !H || !L.results.visible.has(z)) return null;
+	let J = L.activeId === B, Y = L.results.itemOrder.get(z) ?? 0, X = L.highlightMatches ? g(L.search) : "", Z = W && X ? h(W, X)?.indexes ?? [] : [], Q = Array.isArray(a), $ = M ?? (Q ? N(a, U) : void 0), ee = (e) => {
+		if (j?.(e), e.defaultPrevented || e.pointerType === "touch") return;
+		let t = P.x !== e.clientX || P.y !== e.clientY;
+		P.x = e.clientX, P.y = e.clientY, t && !J && L.setActiveId(B);
+	};
+	return /* @__PURE__ */ D("div", {
+		...I,
+		id: B,
+		role: "option",
+		"aria-selected": J,
+		"aria-disabled": d || void 0,
+		"aria-keyshortcuts": $,
+		"data-active": J ? "" : void 0,
+		"data-disabled": d ? "" : void 0,
+		"data-order": Y,
+		style: T,
+		className: n(_.item, C),
+		onMouseDown: (e) => {
+			A?.(e), e.preventDefault();
+		},
+		onPointerMove: ee,
+		onClick: (e) => {
+			k?.(e), !e.defaultPrevented && L.selectById(B);
+		},
+		children: [
+			i && /* @__PURE__ */ E("span", {
+				"aria-hidden": "true",
+				className: _.icon,
+				children: i
+			}),
+			/* @__PURE__ */ E("span", {
+				className: _.label,
+				children: W === void 0 ? r : /* @__PURE__ */ E(F, {
+					text: W,
+					indexes: Z
+				})
+			}),
+			a != null && a !== !1 && /* @__PURE__ */ E("span", {
+				"aria-hidden": "true",
+				className: _.shortcut,
+				children: Q ? /* @__PURE__ */ E(l, {
+					keys: a,
+					size: "sm"
+				}) : a
+			}),
+			c && /* @__PURE__ */ E(s, {
+				"aria-hidden": "true",
+				className: _.chevron
+			})
+		]
+	});
+}
+function L({ children: e, className: t, ...i }) {
+	let a = m("CommandPalette.Empty");
+	return a.results.count > 0 || a.loading || !a.statusSlot ? null : /* @__PURE__ */ E(r, {
+		container: a.statusSlot,
+		children: /* @__PURE__ */ E("div", {
+			...i,
+			className: n(_.empty, t),
+			children: e ?? /* @__PURE__ */ E(d, {
+				kind: "no-results",
+				query: a.search.trim() || void 0,
+				size: "sm",
+				headingLevel: 3
+			})
+		})
+	});
+}
+function R({ children: t, className: a, ...o }) {
+	let s = e(), c = t ?? s.commandPalette.loading, l = m("CommandPalette.Loading"), { registerLoading: u } = l, d = typeof c == "string" ? c : s.commandPalette.loading;
+	return S(() => u(d), [u, d]), l.statusSlot ? /* @__PURE__ */ E(r, {
+		container: l.statusSlot,
+		children: /* @__PURE__ */ D("div", {
+			...o,
+			className: n(_.loading, a),
+			children: [/* @__PURE__ */ E(i, {
+				decorative: !0,
+				size: "sm"
+			}), /* @__PURE__ */ E("span", { children: c })]
+		})
+	}) : null;
+}
+function z({ className: e, ...t }) {
+	let r = m("CommandPalette.Separator");
+	return y(p) === r.currentPage ? /* @__PURE__ */ E("div", {
+		"aria-hidden": "true",
+		...t,
+		hidden: r.search.trim() !== "",
+		className: n(_.separator, e)
+	}) : null;
+}
+function B({ name: e, title: t, children: n }) {
+	let r = m("CommandPalette.Page"), { registerPageTitle: i } = r;
+	return S(() => i(e, t), [
+		i,
+		e,
+		t
+	]), r.currentPage === e ? /* @__PURE__ */ E(p.Provider, {
+		value: e,
+		children: n
+	}) : null;
+}
+//#endregion
+export { L as CommandPaletteEmpty, j as CommandPaletteGroup, k as CommandPaletteInput, I as CommandPaletteItem, A as CommandPaletteList, R as CommandPaletteLoading, B as CommandPalettePage, z as CommandPaletteSeparator };

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

@@ -0,0 +1 @@
+const e=require("../../../utils/hotkeys.cjs.js");var t=/[̀-ͯ]/g;function n(e){let n=``,r=[];for(let i=0;i<e.length;i+=1){let a=e[i].normalize(`NFD`).replace(t,``).toLowerCase();for(let e=0;e<a.length;e+=1)n+=a[e],r.push(i)}return{text:n,map:r}}function r(e){return n(e.trim()).text.replace(/\s+/g,` `)}var i=/[\p{L}\p{N}]/u;function a(e,t){return t===0||!i.test(e[t-1])&&i.test(e[t])}function o(e,t){return Array.from({length:t},(t,n)=>e+n)}function s(e,t){let n=e.indexOf(t);for(;n!==-1;){if(a(e,n))return n;n=e.indexOf(t,n+1)}return-1}function c(e,t,n){let r=[],i=0;for(let o of t){let t=e.indexOf(o,i);if(t===-1)return null;if(n){let n=t;for(;n!==-1&&!a(e,n);)n=e.indexOf(o,n+1);let i=r.length>0&&t===r[r.length-1]+1;n!==-1&&!i&&(t=n)}r.push(t),i=t+1}return r}function l(e,t){if(!t)return{score:1,indexes:[]};let{text:r,map:i}=n(e),l=e=>Array.from(new Set(e.map(e=>i[e])));if(r===t)return{score:1,indexes:l(o(0,t.length))};if(r.startsWith(t))return{score:.9,indexes:l(o(0,t.length))};let u=s(r,t);if(u!==-1)return{score:.8,indexes:l(o(u,t.length))};let d=r.indexOf(t);if(d!==-1)return{score:.7,indexes:l(o(d,t.length))};let f=t.split(` `).filter(Boolean);if(f.length>1){let e=[],t=0;if(f.every(n=>{let i=s(r,n),a=i===-1?r.indexOf(n):i;return a!==-1&&(i!==-1&&(t+=1),e.push(...o(a,n.length)),!0)}))return{score:.55+.1*(t/f.length),indexes:l(e)}}let p=t.replace(/ /g,``),m=c(r,p,!0)??c(r,p,!1);if(!m)return null;let h=0,g=0;return m.forEach((e,t)=>{t>0&&(h+=e-m[t-1]-1),a(r,e)&&(g+=1)}),{score:.1+.25*(g/m.length)+.15/(1+h),indexes:l(m)}}function u(e,t,n=[]){let i=r(t);if(!i)return 1;let a=l(e,i)?.score??0;for(let e of n){let t=(l(e,i)?.score??0)*.95;t>a&&(a=t)}return a}var d=new WeakMap,f=0;function p(e){let t=d.get(e);return t===void 0&&(t=f++,d.set(e,t)),t}function m(e){return e.hasAttribute(`data-command-heading`)?-1/0:Number(e.dataset?.order??0)}function h(e,t){return m(e)-m(t)||p(e)-p(t)}function g(e){let t=Array.from(e.children);t.forEach(p),[...t].sort(h).forEach((t,n)=>{e.children[n]!==t&&e.insertBefore(t,e.children[n]??null)})}function _(e){if(e){g(e);for(let t of Array.from(e.children))t.getAttribute(`role`)===`group`&&g(t)}}function v(e){return Array.from(e.children).filter(e=>e instanceof HTMLElement&&!e.hidden)}function y(e){if(!e)return[];let t=[],n=e=>{e.forEach((t,n)=>{t.setAttribute(`aria-posinset`,String(n+1)),t.setAttribute(`aria-setsize`,String(e.length))})},r=[];for(let i of v(e)){let e=i.getAttribute(`role`);if(e===`option`)r.push(i),t.push(i);else if(e===`group`){let e=v(i).filter(e=>e.getAttribute(`role`)===`option`);n(e),t.push(...e)}}return n(r),t}exports.defaultCommandScore=u,exports.getOrderedOptions=y,exports.hotkeyToAria=e.hotkeyToAria,exports.isTypingTarget=e.isTypingTarget,exports.matchText=l,exports.matchesHotkey=e.matchesHotkey,exports.normalizeQuery=r,exports.normalizeText=n,exports.parseHotkey=e.parseHotkey,exports.syncDomOrder=_;

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

@@ -0,0 +1,50 @@
+interface NormalizedText {
+    /** Lowercased text without diacritics. */
+    text: string;
+    /** For each index in `text`, the index of the source character in the original string. */
+    map: number[];
+}
+/**
+ * Lowercases and strips diacritics ("Équipe" -> "equipe"), keeping a map
+ * from each normalized character back to the original index so matches can
+ * be highlighted in the original label.
+ */
+export declare function normalizeText(source: string): NormalizedText;
+/** Normalizes a query the same way labels are normalized (no index map). */
+export declare function normalizeQuery(query: string): string;
+/** A match: a score in (0, 1] and the matched character indexes in the original text. */
+export interface TextMatch {
+    score: number;
+    indexes: number[];
+}
+/**
+ * Scores a normalized query against one text. Higher is better:
+ * - 1.0   exact match
+ * - 0.9   prefix ("set" in "Settings")
+ * - 0.8   substring at a word start ("pro" in "Edit profile")
+ * - 0.7   substring anywhere ("file" in "Profile")
+ * - 0.55-0.65 every word of a multi-word query found (word starts rank higher)
+ * - 0.1-0.5  characters in order ("stg" in "Settings"), with bonuses for
+ *            word starts and runs of adjacent characters
+ * - 0     no match
+ */
+export declare function matchText(source: string, query: string): TextMatch | null;
+/**
+ * Default filter: the best of the label match and the keyword matches.
+ * Keyword matches rank just below an equal label match.
+ */
+export declare function defaultCommandScore(value: string, query: string, keywords?: string[]): number;
+export { hotkeyToAria, isTypingTarget, matchesHotkey, parseHotkey, type ParsedHotkey, } from '../../../utils/hotkeys';
+/**
+ * Puts the listbox's DOM in ranked order (groups, and items within the
+ * listbox and each group), so the order screen readers browse matches the
+ * visual and keyboard order (SC 1.3.2). React tolerates these moves: it
+ * removes nodes by reference and inserts new ones next to their siblings
+ * in the same parent.
+ */
+export declare function syncDomOrder(listbox: HTMLElement | null): void;
+/**
+ * Options in order (the DOM is kept in ranked order by `syncDomOrder`).
+ * Also keeps `aria-posinset` / `aria-setsize` in step within each container.
+ */
+export declare function getOrderedOptions(listbox: HTMLElement | null): HTMLElement[];