@charcuterie/ui 4.24.0 → 4.26.0

package/README.md

@@ -147,6 +147,19 @@ own `aria-valuemin`/`aria-valuemax`. What is genuinely shared is the arithmetic
 same extraction `tileStyles.ts` is), compared as **computed** styles in the test
 ([decision](../../docs/decisions/2026-09-01-a-two-thumb-range-is-its-own-component-and-shares-the-bar.md)).
 
+**`CommandPalette` is the launcher** — a search field over a grouped list in a `Modal`, built
+here first because a start page, Docket and Folio all want one and nothing in the fleet had
+one. It lists the caller's `suggestions` before anything is typed, which is the defect it
+exists to fix: the third-party launcher it replaces showed nothing until you typed. Typing
+matches **word prefixes and initials, never subsequences** (`ha` finds `Home Automation`,
+not `Chat`), through `rankWordPrefixMatches` in `@charcuterie/logic`. A short prefix and a
+space (`au lego`) routes the rest of the query to a caller's target, and the caller's
+fallback row ends every other list. The library owns the shape and no site names. The global
+keys are an opt-in hook, `useCommandPaletteHotkeys`, and `useCommandPalette()` assembles them
+with the open state
+([matching](../../docs/decisions/2026-10-16-a-command-palette-matches-word-prefixes.md),
+[keys](../../docs/decisions/2026-10-16-command-palette-hotkeys-are-an-opt-in-hook.md)).
+
 **The unified app shell adds four**: `Shell`, `Header`, `Rail`, `Main` — the fleet's largest
 single duplication, where ten of twelve UI repos hand-roll the page chrome and three of them
 have a file named `AppShell.tsx` (two of those headers are a *byte-identical* class string,

package/dist/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { type CommandPalettePanelProps } from "./CommandPalettePanel.tsx";
+export type CommandPaletteProps = Omit<CommandPalettePanelProps, "inputRef" | "onChoose"> & {
+    className?: string;
+    isVisible: boolean;
+    /** Every route out: Escape, a press outside, and a chosen row. */
+    onClose: () => void;
+};
+/**
+ * The launcher: a search field over a grouped list, opened over the
+ * page.
+ *
+ * - **It shows something before anything is typed** — the caller's
+ *   `suggestions` ("Pinned", "Recently opened").
+ * - **Typing filters `items` by word prefix**: every typed word must
+ *   start a word of the title, the description or a keyword, and the
+ *   initials count (`ha` → `Home Automation`). Matches are grouped by
+ *   each item's `group`.
+ * - **A prefix command** — `au lego` — routes the rest of the query
+ *   to one of the caller's `prefixes`.
+ * - **The last row is the caller's fallback** (`getFallbackItem`), so
+ *   a query nothing matches still goes somewhere.
+ *
+ * The library owns the shape. Every name, link and target is data the
+ * app passes in.
+ *
+ * ### Open state
+ *
+ * `isVisible` and `onClose`, as on `Modal`: the app holds the state,
+ * usually in `useCommandPalette()`, which also wires the global keys.
+ * The query is controlled (`query` + `onQueryChange`) or uncontrolled
+ * (`defaultQuery`, read each time it opens), as on `Combobox`.
+ *
+ * ### Keys
+ *
+ * Arrow keys, Home and End move the active row; Enter opens it;
+ * `Ctrl Enter` or `⌘ Enter` opens an `href` row in a new tab; Escape
+ * closes. Focus stays in the field the whole time and the active row
+ * is its `aria-activedescendant`. Focus is trapped while it is open and
+ * goes back to where it was when it closes.
+ */
+export declare const CommandPalette: ({ className, isVisible, label, onClose, ...panelProps }: CommandPaletteProps) => ReactNode;
+//# sourceMappingURL=CommandPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAA;AAElC,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,wBAAwB,EACxB,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,cAAc,GAAI,yDAM5B,mBAAmB,KAAG,SAmBxB,CAAA"}

package/dist/CommandPalette/CommandPalette.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Modal } from "../Modal/Modal.js";
+import { toClassName } from "../toClassName.js";
+import { CommandPalettePanel, } from "./CommandPalettePanel.js";
+/**
+ * Top-anchored on a wide window, so the list grows downward from a
+ * fixed field instead of re-centering as it fills; nearly the whole
+ * screen in the Narrow View, where a phone keyboard takes the bottom.
+ *
+ * `self-start` because `OverlayPanel` centers its child in a flex
+ * box. `dvh` for the reason `Dialog` gives: on a phone `vh` includes
+ * the address bar.
+ */
+const PALETTE_BOX_CLASS = "mt-[12dvh] max-h-[76dvh] w-[calc(100vw-2rem)] max-w-[45rem] self-start max-sm:mt-2 max-sm:h-[calc(100dvh-1rem)] max-sm:max-h-[calc(100dvh-1rem)] max-sm:w-[calc(100vw-1rem)]";
+/**
+ * The launcher: a search field over a grouped list, opened over the
+ * page.
+ *
+ * - **It shows something before anything is typed** — the caller's
+ *   `suggestions` ("Pinned", "Recently opened").
+ * - **Typing filters `items` by word prefix**: every typed word must
+ *   start a word of the title, the description or a keyword, and the
+ *   initials count (`ha` → `Home Automation`). Matches are grouped by
+ *   each item's `group`.
+ * - **A prefix command** — `au lego` — routes the rest of the query
+ *   to one of the caller's `prefixes`.
+ * - **The last row is the caller's fallback** (`getFallbackItem`), so
+ *   a query nothing matches still goes somewhere.
+ *
+ * The library owns the shape. Every name, link and target is data the
+ * app passes in.
+ *
+ * ### Open state
+ *
+ * `isVisible` and `onClose`, as on `Modal`: the app holds the state,
+ * usually in `useCommandPalette()`, which also wires the global keys.
+ * The query is controlled (`query` + `onQueryChange`) or uncontrolled
+ * (`defaultQuery`, read each time it opens), as on `Combobox`.
+ *
+ * ### Keys
+ *
+ * Arrow keys, Home and End move the active row; Enter opens it;
+ * `Ctrl Enter` or `⌘ Enter` opens an `href` row in a new tab; Escape
+ * closes. Focus stays in the field the whole time and the active row
+ * is its `aria-activedescendant`. Focus is trapped while it is open and
+ * goes back to where it was when it closes.
+ */
+export const CommandPalette = ({ className, isVisible, label = "Search", onClose, ...panelProps }) => {
+    const inputRef = useRef(null);
+    return (_jsx(Modal, { "aria-label": label, className: toClassName(PALETTE_BOX_CLASS, className), initialFocus: inputRef, isVisible: isVisible, onClose: onClose, children: _jsx(CommandPalettePanel, { ...panelProps, inputRef: inputRef, label: label, onChoose: onClose }) }));
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/CommandPalette/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAoB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EACL,mBAAmB,GAEpB,MAAM,0BAA2B,CAAA;AAYlC;;;;;;;;GAQG;AACH,MAAM,iBAAiB,GACrB,8KAA8K,CAAA;AAEhL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,SAAS,EACT,KAAK,GAAG,QAAQ,EAChB,OAAO,EACP,GAAG,UAAU,EACO,EAAa,EAAE;IACnC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE/C,OAAO,CACL,KAAC,KAAK,kBACQ,KAAK,EACjB,SAAS,EAAE,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC,EACpD,YAAY,EAAE,QAAQ,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,YAEhB,KAAC,mBAAmB,OACd,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,OAAO,GACjB,GACI,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/CommandPalette/CommandPaletteFooter.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { CommandPalettePrefix } from "./commandPaletteSections.ts";
+/**
+ * The default strip under the list: the keys, and each prefix with
+ * its target.
+ *
+ * The keys are words — `Up`, `Down` — not arrow glyphs, because a font
+ * without the glyph paints nothing
+ * (`2026-07-29-ship-no-icons-and-no-symbol-glyphs.md`). In the Narrow
+ * View the key hints give way, since a phone has no arrow keys, and
+ * the prefixes stay: they work from a phone keyboard too.
+ */
+export declare const CommandPaletteFooter: ({ prefixes, }: {
+    prefixes: readonly CommandPalettePrefix[];
+}) => ReactNode;
+//# sourceMappingURL=CommandPaletteFooter.d.ts.map

package/dist/CommandPalette/CommandPaletteFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteFooter.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAQvE;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,oBAAoB,EAAE,CAAA;CAC1C,KAAG,SAoBH,CAAA"}

package/dist/CommandPalette/CommandPaletteFooter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const renderKey = (name) => (_jsx("kbd", { className: "rounded-sm border border-border-default bg-surface-raised px-1 font-mono text-content-secondary text-xs", children: name }));
+/**
+ * The default strip under the list: the keys, and each prefix with
+ * its target.
+ *
+ * The keys are words — `Up`, `Down` — not arrow glyphs, because a font
+ * without the glyph paints nothing
+ * (`2026-07-29-ship-no-icons-and-no-symbol-glyphs.md`). In the Narrow
+ * View the key hints give way, since a phone has no arrow keys, and
+ * the prefixes stay: they work from a phone keyboard too.
+ */
+export const CommandPaletteFooter = ({ prefixes, }) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: "max-sm:hidden", children: [renderKey("Up"), " ", renderKey("Down"), " move"] }), _jsxs("span", { className: "max-sm:hidden", children: [renderKey("Enter"), " open"] }), _jsxs("span", { className: "max-sm:hidden", children: [renderKey("Ctrl"), " ", renderKey("Enter"), " new tab"] }), prefixes.map(({ label, prefix }) => (_jsxs("span", { children: [renderKey(prefix), " ", label] }, prefix))), _jsxs("span", { className: "max-sm:hidden", children: [renderKey("Esc"), " close"] })] }));
+//# sourceMappingURL=CommandPaletteFooter.js.map

package/dist/CommandPalette/CommandPaletteFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteFooter.js","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteFooter.tsx"],"names":[],"mappings":";AAIA,MAAM,SAAS,GAAG,CAAC,IAAY,EAAa,EAAE,CAAC,CAC7C,cAAK,SAAS,EAAC,yGAAyG,YACrH,IAAI,GACD,CACP,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,GAGT,EAAa,EAAE,CAAC,CACf,8BACE,gBAAM,SAAS,EAAC,eAAe,aAC5B,SAAS,CAAC,IAAI,CAAC,OAAG,SAAS,CAAC,MAAM,CAAC,aAC/B,EACP,gBAAM,SAAS,EAAC,eAAe,aAC5B,SAAS,CAAC,OAAO,CAAC,aACd,EACP,gBAAM,SAAS,EAAC,eAAe,aAC5B,SAAS,CAAC,MAAM,CAAC,OAAG,SAAS,CAAC,OAAO,CAAC,gBAClC,EACN,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACnC,2BACG,SAAS,CAAC,MAAM,CAAC,OAAG,KAAK,KADjB,MAAM,CAEV,CACR,CAAC,EACF,gBAAM,SAAS,EAAC,eAAe,aAC5B,SAAS,CAAC,KAAK,CAAC,cACZ,IACN,CACJ,CAAA"}

package/dist/CommandPalette/CommandPaletteOption.d.ts

@@ -0,0 +1,44 @@
+import type { TextMatchRange } from "@charcuterie/logic";
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { CommandPaletteItem } from "./commandPaletteSections.ts";
+export type CommandPaletteOptionProps = {
+    /** The DOM id `aria-activedescendant` points at. */
+    id: string;
+    isActive: boolean;
+    item: CommandPaletteItem;
+    itemSize: ControlSize;
+    /** A click on the row: the link has navigated (or will), so close and run `onSelect`. */
+    onChoose: () => void;
+    /** The pointer moved over the row. */
+    onPoint: () => void;
+    titleRanges: readonly TextMatchRange[];
+};
+/**
+ * One row of the palette's listbox.
+ *
+ * **Focus never comes here.** The input keeps it, and the row the
+ * arrows have reached is announced through the input's
+ * `aria-activedescendant` — the APG combobox pattern `Combobox` uses
+ * too. So the row is `tabIndex={-1}`, and a mouse press is prevented
+ * from moving focus (`onMouseDown`), which keeps the caret in the
+ * input while the click still lands.
+ *
+ * **An `href` item is a real `<a href>`.** It goes through
+ * `UnstyledLink`, so an app's injected router link handles a plain
+ * click, and middle-click, ctrl-click and "copy link address" all
+ * work, because it is a link. Enter in the input clicks this same
+ * element, so the keyboard and the mouse take one path. An item
+ * without one is a `<button>`, as in `Combobox`.
+ *
+ * **The pointer moves the active row on `pointermove`, not
+ * `pointerenter`.** Arrowing scrolls the list under a mouse that has
+ * not moved, and an enter event would then hand the active row to
+ * whatever slid under the pointer.
+ *
+ * **One highlight.** The active row is tinted and nothing else is —
+ * no separate `:hover` tint — because the pointer makes a row active,
+ * and two tinted rows would leave Enter's target ambiguous.
+ */
+export declare const CommandPaletteOption: ({ id, isActive, item, itemSize, onChoose, onPoint, titleRanges, }: CommandPaletteOptionProps) => ReactNode;
+//# sourceMappingURL=CommandPaletteOption.d.ts.map

package/dist/CommandPalette/CommandPaletteOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteOption.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,SAAS,EACV,MAAM,OAAO,CAAA;AAKd,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAErE,MAAM,MAAM,yBAAyB,GAAG;IACtC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,kBAAkB,CAAA;IACxB,QAAQ,EAAE,WAAW,CAAA;IACrB,yFAAyF;IACzF,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,EAAE,SAAS,cAAc,EAAE,CAAA;CACvC,CAAA;AAkDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,oBAAoB,GAAI,mEAQlC,yBAAyB,KAAG,SA4F9B,CAAA"}

package/dist/CommandPalette/CommandPaletteOption.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PANEL_ITEM_SIZE_CLASS } from "../controlStyles.js";
+import { UnstyledLink } from "../RouterLink/UnstyledLink.js";
+import { toClassName } from "../toClassName.js";
+const ICON_SIZE_CLASS = {
+    lg: "size-7 [&>img]:size-7 [&>svg]:size-5",
+    md: "size-6 [&>img]:size-6 [&>svg]:size-4",
+    sm: "size-5 [&>img]:size-5 [&>svg]:size-4",
+};
+/**
+ * The title with each matched range wrapped in a `<mark>`. Plain
+ * text in, so nothing the caller typed is ever read as markup.
+ */
+const HighlightedTitle = ({ ranges, title, }) => {
+    if (ranges.length === 0) {
+        return title;
+    }
+    const pieces = [];
+    let cursor = 0;
+    for (const { end, start } of ranges) {
+        if (start > cursor) {
+            pieces.push(title.slice(cursor, start));
+        }
+        pieces.push(_jsx("mark", { className: "bg-transparent font-semibold text-intent-accent-content", children: title.slice(start, end) }, start));
+        cursor = end;
+    }
+    if (cursor < title.length) {
+        pieces.push(title.slice(cursor));
+    }
+    return pieces;
+};
+/**
+ * One row of the palette's listbox.
+ *
+ * **Focus never comes here.** The input keeps it, and the row the
+ * arrows have reached is announced through the input's
+ * `aria-activedescendant` — the APG combobox pattern `Combobox` uses
+ * too. So the row is `tabIndex={-1}`, and a mouse press is prevented
+ * from moving focus (`onMouseDown`), which keeps the caret in the
+ * input while the click still lands.
+ *
+ * **An `href` item is a real `<a href>`.** It goes through
+ * `UnstyledLink`, so an app's injected router link handles a plain
+ * click, and middle-click, ctrl-click and "copy link address" all
+ * work, because it is a link. Enter in the input clicks this same
+ * element, so the keyboard and the mouse take one path. An item
+ * without one is a `<button>`, as in `Combobox`.
+ *
+ * **The pointer moves the active row on `pointermove`, not
+ * `pointerenter`.** Arrowing scrolls the list under a mouse that has
+ * not moved, and an enter event would then hand the active row to
+ * whatever slid under the pointer.
+ *
+ * **One highlight.** The active row is tinted and nothing else is —
+ * no separate `:hover` tint — because the pointer makes a row active,
+ * and two tinted rows would leave Enter's target ambiguous.
+ */
+export const CommandPaletteOption = ({ id, isActive, item, itemSize, onChoose, onPoint, titleRanges, }) => {
+    const { description, hint, href, icon, target, title } = item;
+    const className = toClassName("flex w-full cursor-pointer items-center rounded-md text-start text-content-primary no-underline", PANEL_ITEM_SIZE_CLASS[itemSize], isActive && "bg-intent-neutral-surface-hover");
+    const content = (_jsxs(_Fragment, { children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: toClassName("flex shrink-0 items-center justify-center overflow-hidden rounded-sm text-content-secondary [&>img]:object-contain", ICON_SIZE_CLASS[itemSize]), children: icon })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "min-w-0 wrap-anywhere", children: _jsx(HighlightedTitle, { ranges: titleRanges, title: title }) }), description === undefined ? null : (_jsx("span", { className: "min-w-0 text-content-muted text-sm wrap-anywhere", children: description }))] }), hint === undefined ? null : (_jsx("span", { className: "shrink-0 text-content-muted text-sm", children: hint }))] }));
+    const keepFocusInInput = (mouseEvent) => {
+        mouseEvent.preventDefault();
+    };
+    if (href !== undefined) {
+        return (_jsx(UnstyledLink, { "aria-selected": isActive, className: className, href: href, id: id, onClick: onChoose, onMouseDown: keepFocusInInput, onPointerMove: onPoint, rel: target === "_blank"
+                ? "noopener noreferrer"
+                : undefined, role: "option", tabIndex: -1, target: target, children: content }));
+    }
+    return (_jsx("button", { "aria-selected": isActive, className: className, id: id, onClick: onChoose, onMouseDown: keepFocusInInput, onPointerMove: onPoint, role: "option", tabIndex: -1, type: "button", children: content }));
+};
+//# sourceMappingURL=CommandPaletteOption.js.map

package/dist/CommandPalette/CommandPaletteOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteOption.js","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteOption.tsx"],"names":[],"mappings":"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"}

package/dist/CommandPalette/CommandPalettePanel.d.ts

@@ -0,0 +1,52 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode, RefObject } from "react";
+import { type CommandPaletteGroup, type CommandPaletteItem, type CommandPalettePrefix } from "./commandPaletteSections.ts";
+export type CommandPalettePanelProps = {
+    /** The glyph inside the clear button. Without one, there is no clear button — Escape closes. */
+    clearIcon?: ReactNode;
+    /** The query the palette opens with, when the caller does not own `query`. Read once per open. */
+    defaultQuery?: string;
+    /** Shown when a query matches nothing and there is no fallback row. Default "No matches". */
+    emptyLabel?: string;
+    /**
+     * The strip under the list. Default: the keys, and each prefix
+     * with its target. `null` draws none.
+     */
+    footer?: ReactNode;
+    /** The title of a prefix command's row. Default `Search <label> for "<query>"`. */
+    formatPrefixTitle?: (label: string, query: string) => string;
+    /** The last row for any query that is not a prefix command — the "search the web" row. */
+    getFallbackItem?: (query: string) => CommandPaletteItem | null | undefined;
+    /** Ref to the search field, for the dialog's initial focus. */
+    inputRef?: RefObject<HTMLInputElement | null>;
+    /** How tall each row is — and the search field. Default `lg`, stepped down on a short window. */
+    itemSize?: ControlSize;
+    /** Everything a query can match. Folder members included, flattened. */
+    items: readonly CommandPaletteItem[];
+    /** The accessible name of the search field and the list. Default "Search". */
+    label?: string;
+    /** At most this many matches under one heading. Default: no cap. */
+    maxResultsPerGroup?: number;
+    /** After a row is chosen. `CommandPalette` closes here. */
+    onChoose?: () => void;
+    /** Every change to the query. With `query`, the caller owns it. */
+    onQueryChange?: (query: string) => void;
+    placeholder?: string;
+    /** The heading over a prefix command's row. Default "Search a site". */
+    prefixGroupLabel?: string;
+    prefixes?: readonly CommandPalettePrefix[];
+    /** Controlled query. Uncontrolled (from `defaultQuery`) when absent. */
+    query?: string;
+    /** What the palette lists before anything is typed — "Pinned", "Recently opened". */
+    suggestions?: readonly CommandPaletteGroup[];
+    /** The heading over matches whose item has no `group`. Default "Results". */
+    ungroupedLabel?: string;
+};
+/**
+ * The palette's contents — the search field, the grouped listbox and
+ * the footer — without the dialog around them. `CommandPalette` is
+ * this inside a `Modal`; the stories also lay it out inline, so every
+ * state can sit on one board.
+ */
+export declare const CommandPalettePanel: ({ clearIcon, defaultQuery, emptyLabel, footer, formatPrefixTitle, getFallbackItem, inputRef: externalInputRef, itemSize: requestedItemSize, items, label, maxResultsPerGroup, onChoose, onQueryChange, placeholder, prefixGroupLabel, prefixes, query, suggestions, ungroupedLabel, }: CommandPalettePanelProps) => ReactNode;
+//# sourceMappingURL=CommandPalettePanel.d.ts.map

package/dist/CommandPalette/CommandPalettePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalettePanel.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalettePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EAE1B,MAAM,6BAA6B,CAAA;AAEpC,MAAM,MAAM,wBAAwB,GAAG;IACrC,gGAAgG;IAChG,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,kGAAkG;IAClG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,MAAM,CAAA;IACX,0FAA0F;IAC1F,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,MAAM,KACV,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAA;IAC1C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC7C,iGAAiG;IACjG,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,wEAAwE;IACxE,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACpC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAA;IAC1C,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qFAAqF;IACrF,WAAW,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;IAC5C,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA2BD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,uRAoBjC,wBAAwB,KAAG,SAkS7B,CAAA"}

package/dist/CommandPalette/CommandPalettePanel.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@charcuterie/logic";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { usePanelItemSize } from "../Overlay/usePanelItemSize.js";
+import { SearchInput } from "../SearchInput/SearchInput.js";
+import { toClassName } from "../toClassName.js";
+import { CommandPaletteFooter } from "./CommandPaletteFooter.js";
+import { CommandPaletteOption } from "./CommandPaletteOption.js";
+import { buildCommandPaletteSections, } from "./commandPaletteSections.js";
+const defaultFormatPrefixTitle = (label, query) => `Search ${label} for “${query}”`;
+const GROUP_HEADING_INSET_CLASS = {
+    lg: "px-(--control-padding-inline-lg)",
+    md: "px-(--control-padding-inline-md)",
+    sm: "px-(--control-padding-inline-sm)",
+};
+const SEARCH_SIZE = {
+    lg: "lg",
+    md: "md",
+    sm: "md",
+};
+/**
+ * The palette's contents — the search field, the grouped listbox and
+ * the footer — without the dialog around them. `CommandPalette` is
+ * this inside a `Modal`; the stories also lay it out inline, so every
+ * state can sit on one board.
+ */
+export const CommandPalettePanel = ({ clearIcon, defaultQuery = "", emptyLabel = "No matches", footer, formatPrefixTitle = defaultFormatPrefixTitle, getFallbackItem, inputRef: externalInputRef, itemSize: requestedItemSize = "lg", items, label = "Search", maxResultsPerGroup, onChoose, onQueryChange, placeholder = "Search…", prefixGroupLabel = "Search a site", prefixes = [], query, suggestions = [], ungroupedLabel = "Results", }) => {
+    const itemSize = usePanelItemSize(requestedItemSize);
+    const listId = useUniqueId();
+    const ownInputRef = useRef(null);
+    const inputRef = externalInputRef ?? ownInputRef;
+    const [internalQuery, setInternalQuery] = useState(defaultQuery);
+    const currentQuery = query ?? internalQuery;
+    const [activeIndex, setActiveIndex] = useState(0);
+    const sections = useMemo(() => buildCommandPaletteSections({
+        formatPrefixTitle,
+        getFallbackItem,
+        items,
+        maxResultsPerGroup,
+        prefixGroupLabel,
+        prefixes,
+        query: currentQuery,
+        suggestions,
+        ungroupedLabel,
+    }), [
+        currentQuery,
+        formatPrefixTitle,
+        getFallbackItem,
+        items,
+        maxResultsPerGroup,
+        prefixGroupLabel,
+        prefixes,
+        suggestions,
+        ungroupedLabel,
+    ]);
+    const indexedSections = useMemo(() => {
+        let index = 0;
+        return sections.map((section) => ({
+            ...section,
+            headingId: `${listId}-${section.key}`,
+            rows: section.rows.map((row) => ({
+                ...row,
+                id: `${listId}-${section.key}-${row.item.key}`,
+                index: index++,
+            })),
+        }));
+    }, [listId, sections]);
+    const rows = indexedSections.flatMap((section) => section.rows);
+    const resolvedActiveIndex = rows.length === 0
+        ? -1
+        : Math.min(activeIndex, rows.length - 1);
+    const activeRow = rows[resolvedActiveIndex];
+    const setQuery = (nextQuery) => {
+        if (query === undefined) {
+            setInternalQuery(nextQuery);
+        }
+        setActiveIndex(0);
+        onQueryChange?.(nextQuery);
+    };
+    // The arrows can walk the active row out of the scrolled list; bring
+    // it back. `nearest` is a no-op for a row the pointer is already on.
+    useEffect(() => {
+        if (activeRow === undefined) {
+            return;
+        }
+        document
+            .getElementById(activeRow.id)
+            ?.scrollIntoView?.({ block: "nearest" });
+    }, [activeRow]);
+    /**
+     * Opening with a typed character puts the caret AFTER it, so the
+     * next key extends the query instead of landing in front of it.
+     * Once per mount: a later focus (back from the clear button) keeps
+     * wherever the person left the caret.
+     */
+    const hasPlacedCaret = useRef(false);
+    const choose = (row) => {
+        onChoose?.();
+        row.item.onSelect?.();
+    };
+    const activate = (row, isNewTab) => {
+        const { href } = row.item;
+        if (href === undefined) {
+            choose(row);
+            return;
+        }
+        if (isNewTab) {
+            window.open(href, "_blank", "noopener,noreferrer");
+            choose(row);
+            return;
+        }
+        // The row is the `<a href>` itself, so clicking it takes the path
+        // a mouse would — the injected router link, `target`, all of it —
+        // and its `onClick` runs `choose`.
+        document.getElementById(row.id)?.click();
+    };
+    const handleKeyDown = (keyboardEvent) => {
+        const lastIndex = rows.length - 1;
+        switch (keyboardEvent.key) {
+            case "ArrowDown": {
+                keyboardEvent.preventDefault();
+                setActiveIndex(Math.min(resolvedActiveIndex + 1, lastIndex));
+                return;
+            }
+            case "ArrowUp": {
+                keyboardEvent.preventDefault();
+                setActiveIndex(Math.max(resolvedActiveIndex - 1, 0));
+                return;
+            }
+            case "Home": {
+                keyboardEvent.preventDefault();
+                setActiveIndex(0);
+                return;
+            }
+            case "End": {
+                keyboardEvent.preventDefault();
+                setActiveIndex(Math.max(lastIndex, 0));
+                return;
+            }
+            case "Enter": {
+                if (activeRow === undefined) {
+                    return;
+                }
+                keyboardEvent.preventDefault();
+                activate(activeRow, keyboardEvent.ctrlKey || keyboardEvent.metaKey);
+                return;
+            }
+            default:
+        }
+    };
+    const hasRows = rows.length > 0;
+    const isQueryEmpty = currentQuery.trim().length === 0;
+    const footerContent = footer === undefined ? (_jsx(CommandPaletteFooter, { prefixes: prefixes })) : (footer);
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "shrink-0 border-border-subtle border-b p-2", children: _jsx(SearchInput, { "aria-activedescendant": activeRow?.id, "aria-autocomplete": "list", "aria-controls": hasRows ? listId : undefined, "aria-expanded": hasRows, "aria-label": label, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", clearIcon: clearIcon ?? null, enterKeyHint: "go", isClearVisible: clearIcon !== undefined &&
+                        currentQuery.length > 0, onChange: (changeEvent) => setQuery(changeEvent.currentTarget.value), onClear: () => setQuery(""), onFocus: (focusEvent) => {
+                        if (hasPlacedCaret.current) {
+                            return;
+                        }
+                        hasPlacedCaret.current = true;
+                        const { length } = focusEvent.currentTarget.value;
+                        focusEvent.currentTarget.setSelectionRange(length, length);
+                    }, onKeyDown: handleKeyDown, placeholder: placeholder, ref: inputRef, role: "combobox", size: SEARCH_SIZE[itemSize], spellCheck: false, value: currentQuery }) }), hasRows ? (_jsx("div", { "aria-label": label, className: "charcuterie-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5", id: listId, role: "listbox", children: indexedSections.map((section) => (_jsxs("div", { "aria-labelledby": section.headingId, className: "not-first:mt-1", role: "group", children: [_jsx("div", { className: toClassName(GROUP_HEADING_INSET_CLASS[itemSize], "pt-1.5 pb-0.5 font-medium text-content-secondary text-xs"), id: section.headingId, children: section.label }), section.rows.map((row) => (_jsx(CommandPaletteOption, { id: row.id, isActive: row.index === resolvedActiveIndex, item: row.item, itemSize: itemSize, onChoose: () => choose(row), onPoint: () => {
+                                if (row.index !== resolvedActiveIndex) {
+                                    setActiveIndex(row.index);
+                                }
+                            }, titleRanges: row.titleRanges }, row.id)))] }, section.key))) })) : isQueryEmpty ? null : (_jsx("p", { className: "m-0 px-4 py-6 text-center text-content-muted text-sm", children: emptyLabel })), footerContent === null ? null : (_jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-x-4 gap-y-1 border-border-subtle border-t px-4 py-2 text-content-muted text-xs", children: footerContent }))] }));
+};
+//# sourceMappingURL=CommandPalettePanel.js.map

package/dist/CommandPalette/CommandPalettePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalettePanel.js","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalettePanel.tsx"],"names":[],"mappings":"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"}

package/dist/CommandPalette/commandPaletteSections.d.ts

@@ -0,0 +1,93 @@
+import { type TextMatchRange } from "@charcuterie/logic";
+import type { ReactNode } from "react";
+/**
+ * One thing the palette can open or run.
+ *
+ * A folder's members are items like any other: the caller flattens
+ * them into `items`, and puts the folder's name in `description` so a
+ * hit inside a folder still says where it lives.
+ */
+export type CommandPaletteItem = {
+    /** Secondary text after the title — a folder, a section, a host. Matched, never highlighted. */
+    description?: string;
+    /** Shown under this heading when the palette lists matches. Items without one share `ungroupedLabel`. */
+    group?: string;
+    /** Opens as a link: a real `<a href>`, routed through `RouterLinkProvider`. */
+    href?: string;
+    /** The app's own glyph or image. Decorative; the title is the name. */
+    icon?: ReactNode;
+    /** Matched as extra words and never shown: an old name, an abbreviation, a product the app hosts. */
+    keywords?: readonly string[];
+    /** Unique within the list it is in. */
+    key: string;
+    /** Trailing text at the end of the row: a kind ("Bookmark") or a status. */
+    hint?: ReactNode;
+    /** Runs on choice. With an `href` too, it runs as well as the navigation — a place to record a visit. */
+    onSelect?: () => void;
+    /** Passed to the link. `_blank` opens a new tab on a plain Enter or click. */
+    target?: string;
+    /** What is typed for and highlighted. */
+    title: string;
+    /** Breaks a tie inside a match tier, higher first: an open count, say. */
+    weight?: number;
+};
+/** A heading and its items, shown before anything is typed. */
+export type CommandPaletteGroup = {
+    items: readonly CommandPaletteItem[];
+    key: string;
+    label: string;
+};
+/**
+ * A short prefix that sends the rest of the query to one target:
+ * `{ prefix: "au", label: "Auction Site", getHref: (query) => … }`
+ * turns `au lego` into one row that searches that site.
+ */
+export type CommandPalettePrefix = {
+    /** The link the row opens, given what follows the prefix. */
+    getHref?: (query: string) => string;
+    icon?: ReactNode;
+    /** The target's name, in the row's title and in the footer. */
+    label: string;
+    /** Runs instead of, or as well as, the link. */
+    onSelect?: (query: string) => void;
+    /** What is typed before the space: `au`. Matched without case. */
+    prefix: string;
+};
+export type CommandPaletteRow = {
+    item: CommandPaletteItem;
+    /** Where the query matched the title; empty for a suggestion. */
+    titleRanges: readonly TextMatchRange[];
+};
+export type CommandPaletteSection = {
+    key: string;
+    label: string;
+    rows: readonly CommandPaletteRow[];
+};
+export type CommandPaletteSectionsOptions = {
+    formatPrefixTitle: (label: string, query: string) => string;
+    getFallbackItem?: (query: string) => CommandPaletteItem | null | undefined;
+    items: readonly CommandPaletteItem[];
+    maxResultsPerGroup?: number;
+    prefixGroupLabel: string;
+    prefixes: readonly CommandPalettePrefix[];
+    query: string;
+    suggestions: readonly CommandPaletteGroup[];
+    ungroupedLabel: string;
+};
+/**
+ * What the palette lists for a query, as headed sections in order.
+ *
+ * Three cases, decided in this order:
+ *
+ * 1. **A prefix command** (`au lego`) lists one row, for that target.
+ * 2. **Nothing typed** lists the caller's `suggestions` — the shape
+ *    the palette exists for: something to choose the moment it opens.
+ * 3. **Anything else** lists the word-prefix matches from `items`,
+ *    under each item's `group`, and then the caller's fallback row.
+ *
+ * Matched groups are ordered by their best member, so the first row
+ * — the one Enter opens — is always the best match, whichever group
+ * it belongs to.
+ */
+export declare const buildCommandPaletteSections: ({ formatPrefixTitle, getFallbackItem, items, maxResultsPerGroup, prefixGroupLabel, prefixes, query, suggestions, ungroupedLabel, }: CommandPaletteSectionsOptions) => CommandPaletteSection[];
+//# sourceMappingURL=commandPaletteSections.d.ts.map