@lar-works/design-system 0.2.0 → 0.3.0

package/dist/navigation/CollectionViewToggle.js

@@ -1,36 +1,67 @@
 import { IconButton } from "../actions/IconButton.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { tabbable } from "../foundations/KeyboardFocus.js";
 import { LayoutGridIcon, TableIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 // src/navigation/CollectionViewToggle.tsx
-function CollectionViewToggle({ disabledViews = [], gridLabel, label, onChange, tableLabel, value }) {
-	return /* @__PURE__ */ jsxs("div", {
+/**
+* A group of icon buttons that picks one way of drawing a view, the picked one raised. `compact` draws 24px buttons with
+* 14px icons, for a row's line. As `text`, each button is its label in small type, such as a dialog's panes in its
+* header.
+*/
+function ViewToggle({ label, options, value, onChange, compact = false, presentation = "icons" }) {
+	if (presentation === "text") return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		className: "bg-base-200 flex gap-0.5 rounded-lg p-0.5",
+		children: options.map((option) => /* @__PURE__ */ jsx("button", {
+			...tabbable,
+			...option.attributes,
+			type: "button",
+			"aria-pressed": value === option.value,
+			disabled: option.disabled,
+			onClick: () => onChange(option.value),
+			className: `focus-visible:ring-primary h-7 rounded-md px-2.5 text-xs font-medium outline-none focus-visible:ring-2 ${value === option.value ? "bg-base-100 text-base-content shadow-sm" : "hover:text-base-content text-(--muted-foreground)"}`,
+			children: option.label
+		}, option.value))
+	});
+	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"aria-label": label,
 		className: "bg-base-200/70 flex gap-0.5 rounded-lg p-0.5",
-		children: [/* @__PURE__ */ jsx(IconButton, {
-			"aria-label": gridLabel,
-			"aria-pressed": value === "grid",
-			disabled: disabledViews.includes("grid"),
-			icon: /* @__PURE__ */ jsx(LayoutGridIcon, {}),
-			title: gridLabel,
-			className: buttonClasses(value === "grid"),
-			onClick: () => onChange("grid"),
+		children: options.map((option) => /* @__PURE__ */ jsx(IconButton, {
+			...option.attributes,
+			"aria-label": option.label,
+			"aria-pressed": value === option.value,
+			disabled: option.disabled,
+			icon: option.icon,
+			title: option.label,
+			className: buttonClasses(value === option.value, compact),
+			onClick: () => onChange(option.value),
 			tone: "neutral"
-		}), /* @__PURE__ */ jsx(IconButton, {
-			"aria-label": tableLabel,
-			"aria-pressed": value === "table",
-			disabled: disabledViews.includes("table"),
+		}, option.value))
+	});
+}
+function CollectionViewToggle({ disabledViews = [], gridLabel, label, onChange, tableLabel, value }) {
+	return /* @__PURE__ */ jsx(ViewToggle, {
+		label,
+		value,
+		onChange,
+		options: [{
+			value: "grid",
+			label: gridLabel,
+			icon: /* @__PURE__ */ jsx(LayoutGridIcon, {}),
+			disabled: disabledViews.includes("grid")
+		}, {
+			value: "table",
+			label: tableLabel,
 			icon: /* @__PURE__ */ jsx(TableIcon, {}),
-			title: tableLabel,
-			className: buttonClasses(value === "table"),
-			onClick: () => onChange("table"),
-			tone: "neutral"
-		})]
+			disabled: disabledViews.includes("table")
+		}]
 	});
 }
-function buttonClasses(active) {
-	return `size-8 p-0 ${active ? "bg-base-100 text-base-content shadow-sm" : "text-base-600"}`;
+function buttonClasses(active, compact) {
+	return `${compact ? "size-6 **:data-[slot=icon]:size-3.5" : "size-8"} p-0 ${active ? "bg-base-100 text-base-content shadow-sm" : "text-base-600"}`;
 }
-export { CollectionViewToggle };
+export { CollectionViewToggle, ViewToggle };
 
 //# sourceMappingURL=CollectionViewToggle.js.map

package/dist/navigation/CollectionViewToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionViewToggle.js","names":[],"sources":["../../src/navigation/CollectionViewToggle.tsx"],"sourcesContent":["import { LayoutGridIcon, TableIcon } from 'lucide-react';\n\nimport { IconButton } from '../actions/IconButton';\n\nexport type CollectionView = 'grid' | 'table';\n\ninterface CollectionViewToggleProps {\n    disabledViews?: readonly CollectionView[];\n    gridLabel: string;\n    label: string;\n    onChange: (view: CollectionView) => void;\n    tableLabel: string;\n    value: CollectionView;\n}\n\nexport function CollectionViewToggle({\n    disabledViews = [],\n    gridLabel,\n    label,\n    onChange,\n    tableLabel,\n    value,\n}: CollectionViewToggleProps) {\n    return (\n        <div role=\"group\" aria-label={label} className=\"bg-base-200/70 flex gap-0.5 rounded-lg p-0.5\">\n            <IconButton\n                aria-label={gridLabel}\n                aria-pressed={value === 'grid'}\n                disabled={disabledViews.includes('grid')}\n                icon={<LayoutGridIcon />}\n                title={gridLabel}\n                className={buttonClasses(value === 'grid')}\n                onClick={() => onChange('grid')}\n                tone=\"neutral\"\n            />\n            <IconButton\n                aria-label={tableLabel}\n                aria-pressed={value === 'table'}\n                disabled={disabledViews.includes('table')}\n                icon={<TableIcon />}\n                title={tableLabel}\n                className={buttonClasses(value === 'table')}\n                onClick={() => onChange('table')}\n                tone=\"neutral\"\n            />\n        </div>\n    );\n}\n\nfunction buttonClasses(active: boolean): string {\n    return `size-8 p-0 ${active ? 'bg-base-100 text-base-content shadow-sm' : 'text-base-600'}`;\n}\n"],"mappings":";;;;AAeA,SAAgB,qBAAqB,EACjC,gBAAgB,CAAC,GACjB,WACA,OACA,UACA,YACA,SAC0B;CAC1B,OACI,qBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAU;EAA/C,UAAA,CACI,oBAAC,YAAD;GACI,cAAY;GACZ,gBAAc,UAAU;GACxB,UAAU,cAAc,SAAS,MAAM;GACvC,MAAM,oBAAC,gBAAD,CAAiB,CAAA;GACvB,OAAO;GACP,WAAW,cAAc,UAAU,MAAM;GACzC,eAAe,SAAS,MAAM;GAC9B,MAAK;EACR,CAAA,GACD,oBAAC,YAAD;GACI,cAAY;GACZ,gBAAc,UAAU;GACxB,UAAU,cAAc,SAAS,OAAO;GACxC,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OAAO;GACP,WAAW,cAAc,UAAU,OAAO;GAC1C,eAAe,SAAS,OAAO;GAC/B,MAAK;EACR,CAAA,CACA;;AAEb;AAEA,SAAS,cAAc,QAAyB;CAC5C,OAAO,cAAc,SAAS,4CAA4C;AAC9E"}
+{"version":3,"file":"CollectionViewToggle.js","names":[],"sources":["../../src/navigation/CollectionViewToggle.tsx"],"sourcesContent":["import { LayoutGridIcon, TableIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type CollectionView = 'grid' | 'table';\n\n/** One way of drawing a view, as ViewToggle offers it: its icon, named by its label (or, as `text`, its label alone).\n *  `attributes` are `data-*` markers for its button, such as the pane it shows. */\nexport interface ViewToggleOption<V extends string> {\n    value: V;\n    label: string;\n    icon?: ReactNode;\n    disabled?: boolean;\n    attributes?: { [name: `data-${string}`]: string };\n}\n\n/**\n * A group of icon buttons that picks one way of drawing a view, the picked one raised. `compact` draws 24px buttons with\n * 14px icons, for a row's line. As `text`, each button is its label in small type, such as a dialog's panes in its\n * header.\n */\nexport function ViewToggle<V extends string>({\n    label,\n    options,\n    value,\n    onChange,\n    compact = false,\n    presentation = 'icons',\n}: {\n    /** Names the group; with none, the group is named by its options alone. */\n    label?: string;\n    options: readonly ViewToggleOption<V>[];\n    value: V;\n    onChange: (view: V) => void;\n    compact?: boolean;\n    presentation?: 'icons' | 'text';\n}) {\n    if (presentation === 'text')\n        return (\n            <div role=\"group\" aria-label={label} className=\"bg-base-200 flex gap-0.5 rounded-lg p-0.5\">\n                {options.map((option) => (\n                    <button\n                        key={option.value}\n                        {...tabbable}\n                        {...option.attributes}\n                        type=\"button\"\n                        aria-pressed={value === option.value}\n                        disabled={option.disabled}\n                        onClick={() => onChange(option.value)}\n                        className={`focus-visible:ring-primary h-7 rounded-md px-2.5 text-xs font-medium outline-none focus-visible:ring-2 ${value === option.value ? 'bg-base-100 text-base-content shadow-sm' : 'hover:text-base-content text-(--muted-foreground)'}`}\n                    >\n                        {option.label}\n                    </button>\n                ))}\n            </div>\n        );\n\n    return (\n        <div role=\"group\" aria-label={label} className=\"bg-base-200/70 flex gap-0.5 rounded-lg p-0.5\">\n            {options.map((option) => (\n                <IconButton\n                    key={option.value}\n                    {...option.attributes}\n                    aria-label={option.label}\n                    aria-pressed={value === option.value}\n                    disabled={option.disabled}\n                    icon={option.icon}\n                    title={option.label}\n                    className={buttonClasses(value === option.value, compact)}\n                    onClick={() => onChange(option.value)}\n                    tone=\"neutral\"\n                />\n            ))}\n        </div>\n    );\n}\n\ninterface CollectionViewToggleProps {\n    disabledViews?: readonly CollectionView[];\n    gridLabel: string;\n    label: string;\n    onChange: (view: CollectionView) => void;\n    tableLabel: string;\n    value: CollectionView;\n}\n\nexport function CollectionViewToggle({\n    disabledViews = [],\n    gridLabel,\n    label,\n    onChange,\n    tableLabel,\n    value,\n}: CollectionViewToggleProps) {\n    return (\n        <ViewToggle\n            label={label}\n            value={value}\n            onChange={onChange}\n            options={[\n                {\n                    value: 'grid',\n                    label: gridLabel,\n                    icon: <LayoutGridIcon />,\n                    disabled: disabledViews.includes('grid'),\n                },\n                {\n                    value: 'table',\n                    label: tableLabel,\n                    icon: <TableIcon />,\n                    disabled: disabledViews.includes('table'),\n                },\n            ]}\n        />\n    );\n}\n\nfunction buttonClasses(active: boolean, compact: boolean): string {\n    return `${compact ? 'size-6 **:data-[slot=icon]:size-3.5' : 'size-8'} p-0 ${active ? 'bg-base-100 text-base-content shadow-sm' : 'text-base-600'}`;\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,WAA6B,EACzC,OACA,SACA,OACA,UACA,UAAU,OACV,eAAe,WAShB;CACC,IAAI,iBAAiB,QACjB,OACI,oBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAU;EAC1C,UAAA,QAAQ,KAAK,WACV,oBAAC,UAAD;GAEI,GAAI;GACJ,GAAI,OAAO;GACX,MAAK;GACL,gBAAc,UAAU,OAAO;GAC/B,UAAU,OAAO;GACjB,eAAe,SAAS,OAAO,KAAK;GACpC,WAAW,0GAA0G,UAAU,OAAO,QAAQ,4CAA4C;GAEzL,UAAA,OAAO;EACJ,GAVC,OAAO,KAUR,CACX;CACA,CAAA;CAGb,OACI,oBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAU;EAC1C,UAAA,QAAQ,KAAK,WACV,oBAAC,YAAD;GAEI,GAAI,OAAO;GACX,cAAY,OAAO;GACnB,gBAAc,UAAU,OAAO;GAC/B,UAAU,OAAO;GACjB,MAAM,OAAO;GACb,OAAO,OAAO;GACd,WAAW,cAAc,UAAU,OAAO,OAAO,OAAO;GACxD,eAAe,SAAS,OAAO,KAAK;GACpC,MAAK;EACR,GAVQ,OAAO,KAUf,CACJ;CACA,CAAA;AAEb;AAWA,SAAgB,qBAAqB,EACjC,gBAAgB,CAAC,GACjB,WACA,OACA,UACA,YACA,SAC0B;CAC1B,OACI,oBAAC,YAAD;EACW;EACA;EACG;EACV,SAAS,CACL;GACI,OAAO;GACP,OAAO;GACP,MAAM,oBAAC,gBAAD,CAAiB,CAAA;GACvB,UAAU,cAAc,SAAS,MAAM;EAC3C,GACA;GACI,OAAO;GACP,OAAO;GACP,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,UAAU,cAAc,SAAS,OAAO;EAC5C,CACJ;CACH,CAAA;AAET;AAEA,SAAS,cAAc,QAAiB,SAA0B;CAC9D,OAAO,GAAG,UAAU,wCAAwC,SAAS,OAAO,SAAS,4CAA4C;AACrI"}

package/dist/navigation/DrilldownBrowseSelector.js

@@ -4,8 +4,8 @@ import { ScrollArea } from "../layout/ScrollArea.js";
 import { Popover } from "../overlays/Popover.js";
 import { CollectionBrowseTrigger } from "./CollectionBrowseSelector.js";
 import { useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/navigation/DrilldownBrowseSelector.tsx
 function DrilldownBrowseSelector({ icon, allLabel, backLabel, disabledOptionLabel, groups, label, onClear }) {
 	const [open, setOpen] = useState(false);

package/dist/navigation/FolderSelector.js

@@ -6,9 +6,9 @@ import { Inline, Stack } from "../layout/Flow.js";
 import { ScrollArea } from "../layout/ScrollArea.js";
 import { Popover } from "../overlays/Popover.js";
 import { Text } from "../typography/Typography.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, FolderIcon, FolderUpIcon, HouseIcon } from "lucide-react";
 import { Alert, Loading } from "@ninna-ui/feedback";
+import { ChevronDownIcon, FolderIcon, FolderUpIcon, HouseIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/navigation/FolderSelector.tsx
 function FolderSelector({ id, title, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, browsePath, disabled, error, hasMore, loading, loadingMore, onBrowsePathChange, onChange, onLoadMore, onOpenChange, onRetry, open, options, parentPath, value }) {
 	const labels = useDesignSystemLabels();

package/dist/navigation/SortMenu.d.ts

@@ -0,0 +1,10 @@
+/** A menu of the ways a list sorts, its button naming the current one. */
+export declare function SortMenu<Value extends string>({ value, options, onChange }: {
+  value: Value;
+  options: readonly {
+    value: Value;
+    label: string;
+  }[];
+  onChange: (value: Value) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SortMenu.d.ts.map

package/dist/navigation/SortMenu.js

@@ -0,0 +1,33 @@
+import { Button } from "../actions/Button.js";
+import { DropdownMenu } from "../overlays/DropdownMenu.js";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/navigation/SortMenu.tsx
+/** A menu of the ways a list sorts, its button naming the current one. */
+function SortMenu({ value, options, onChange }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			compact: true,
+			rightIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+			children: options.find((option) => option.value === value)?.label
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		align: "end",
+		children: /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, {
+			value,
+			onValueChange: (next) => {
+				const picked = options.find((option) => option.value === next);
+				if (picked) onChange(picked.value);
+			},
+			children: options.map((option) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		})
+	})] });
+}
+export { SortMenu };
+
+//# sourceMappingURL=SortMenu.js.map

package/dist/navigation/SortMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortMenu.js","names":[],"sources":["../../src/navigation/SortMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\n\nimport { Button } from '../actions/Button';\nimport { DropdownMenu } from '../overlays/DropdownMenu';\n\n/** A menu of the ways a list sorts, its button naming the current one. */\nexport function SortMenu<Value extends string>({\n    value,\n    options,\n    onChange,\n}: {\n    value: Value;\n    options: readonly { value: Value; label: string }[];\n    onChange: (value: Value) => void;\n}) {\n    return (\n        <DropdownMenu>\n            <DropdownMenu.Trigger asChild>\n                <Button variant=\"secondary\" compact rightIcon={<ChevronDownIcon />}>\n                    {options.find((option) => option.value === value)?.label}\n                </Button>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content align=\"end\">\n                <DropdownMenu.RadioGroup\n                    value={value}\n                    onValueChange={(next) => {\n                        const picked = options.find((option) => option.value === next);\n\n                        if (picked) onChange(picked.value);\n                    }}\n                >\n                    {options.map((option) => (\n                        <DropdownMenu.RadioItem key={option.value} value={option.value}>\n                            {option.label}\n                        </DropdownMenu.RadioItem>\n                    ))}\n                </DropdownMenu.RadioGroup>\n            </DropdownMenu.Content>\n        </DropdownMenu>\n    );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,SAA+B,EAC3C,OACA,SACA,YAKD;CACC,OACI,qBAAC,cAAD,EAAA,UAAA,CACI,oBAAC,aAAa,SAAd;EAAsB,SAAA;EAClB,UAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAY,SAAA;GAAQ,WAAW,oBAAC,iBAAD,CAAkB,CAAA;GAC5D,UAAA,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,CAAC,EAAE;EAC/C,CAAA;CACU,CAAA,GACtB,oBAAC,aAAa,SAAd;EAAsB,OAAM;EACxB,UAAA,oBAAC,aAAa,YAAd;GACW;GACP,gBAAgB,SAAS;IACrB,MAAM,SAAS,QAAQ,MAAM,WAAW,OAAO,UAAU,IAAI;IAE7D,IAAI,QAAQ,SAAS,OAAO,KAAK;GACrC;GAEC,UAAA,QAAQ,KAAK,WACV,oBAAC,aAAa,WAAd;IAA2C,OAAO,OAAO;IACpD,UAAA,OAAO;GACY,GAFK,OAAO,KAEZ,CAC3B;EACoB,CAAA;CACP,CAAA,CACZ,EAAA,CAAA;AAEtB"}

package/dist/navigation/index.d.ts

@@ -1,8 +1,9 @@
 import { ArtworkTabs, ArtworkTabsItem } from "./ArtworkTabs.js";
 import { Breadcrumbs } from "./Breadcrumbs.js";
 import { CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger } from "./CollectionBrowseSelector.js";
-import { CollectionView, CollectionViewToggle } from "./CollectionViewToggle.js";
+import { CollectionView, CollectionViewToggle, ViewToggle, ViewToggleOption } from "./CollectionViewToggle.js";
 import { DrilldownBrowseGroup, DrilldownBrowseItem, DrilldownBrowseSelector } from "./DrilldownBrowseSelector.js";
 import { FolderSelector, FolderSelectorOption, FolderSelectorProps } from "./FolderSelector.js";
+import { SortMenu } from "./SortMenu.js";
 import { ViewTabs, ViewTabsItem } from "./ViewTabs.js";
-export { ArtworkTabs, type ArtworkTabsItem, Breadcrumbs, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, type CollectionView, CollectionViewToggle, type DrilldownBrowseGroup, type DrilldownBrowseItem, DrilldownBrowseSelector, FolderSelector, type FolderSelectorOption, type FolderSelectorProps, ViewTabs, type ViewTabsItem };
+export { ArtworkTabs, type ArtworkTabsItem, Breadcrumbs, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, type CollectionView, CollectionViewToggle, type DrilldownBrowseGroup, type DrilldownBrowseItem, DrilldownBrowseSelector, FolderSelector, type FolderSelectorOption, type FolderSelectorProps, SortMenu, ViewTabs, type ViewTabsItem, ViewToggle, type ViewToggleOption };

package/dist/overlays/CommandPalette.d.ts

@@ -1,4 +1,16 @@
 import { ReactNode } from "react";
+/** A chip before the field for something that narrows the list, such as a filter. */
+export interface CommandPaletteToken {
+  id: string;
+  label: string;
+  /** An icon or colour mark before the label. */
+  leading?: ReactNode;
+  /** A button on the chip that takes it away; the focus stays in the field. */
+  remove?: {
+    label: string;
+    onRemove: () => void;
+  };
+}
 interface CommandPaletteProps {
   /** The dialog's accessible title and description; the field says the rest. */
   label: string;
@@ -12,26 +24,48 @@ interface CommandPaletteProps {
     leaveLabel: string;
     onLeave: () => void;
   };
+  /** Chips before the field, such as active filters, which wrap and scroll on their own when there are many. A
+   *  palette given tokens, even none, is a filtering search, as wide as its chips need. */
+  tokens?: readonly CommandPaletteToken[];
+  /** Backspace in an empty field, such as to take the last token away. */
+  onBackspaceEmpty?: () => void;
+  /** A control after the field, such as Clear. A press on it leaves the focus in the field. */
+  trailing?: ReactNode;
   /** The options' values in list order, for the arrow keys and Enter. */
   options: readonly string[];
-  onSelect: (value: string) => void;
+  /** May return the option the highlight moves to, when choosing changes the list. */
+  onSelect: (value: string) => string | void;
   onClose: () => void;
   listLabel: string;
+  /** Marks the list busy while more may arrive; `busyLabel` shows under it meanwhile. */
   busy?: boolean;
-  /** Shown when nothing is listed. */
+  busyLabel?: ReactNode;
+  /** Shown when nothing is listed and nothing is pending. */
   empty?: ReactNode;
   /** Quiet key hints under the list, on screens with a keyboard. */
   footer?: ReactNode;
   children: ReactNode;
 }
 /** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page
- *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */
-export declare function CommandPalette({ label, description, placeholder, query, onQueryChange, scope, options, onSelect, onClose, listLabel, busy, empty, footer, children }: CommandPaletteProps): import("react").JSX.Element;
+ *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. Tokens
+ *  before the field say what narrows the list. */
+export declare function CommandPalette({ label, description, placeholder, query, onQueryChange, scope, tokens: givenTokens, onBackspaceEmpty, trailing, options, onSelect, onClose, listLabel, busy, busyLabel, empty, footer, children }: CommandPaletteProps): import("react").JSX.Element;
 /** A labelled run of options in the palette's list. */
 export declare function CommandPaletteGroup({ label, children }: {
   label: string;
   children: ReactNode;
 }): import("react").JSX.Element;
+/** One line of the palette's list: an icon, the name, an optional hint (searched with the name) and meta (on wider
+ *  screens), and a tick while `checked`, as a filter that is on. Choosing it keeps the focus in the field. */
+export declare function CommandPaletteOption({ value, icon, name, hint, meta, checked }: {
+  value: string;
+  icon: ReactNode;
+  name: string;
+  hint?: string;
+  meta?: string;
+  /** Whether a filter's option is on; other options leave it out. */
+  checked?: boolean;
+}): import("react").JSX.Element;
 /** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */
 export declare function useCommandPaletteOption(value: string): {
   id: string;

package/dist/overlays/CommandPalette.js

@@ -5,14 +5,15 @@ import { Text } from "../typography/Typography.js";
 import { useModalAutoFocus } from "./useModalAutoFocus.js";
 import { useScrollFade } from "./useScrollFade.js";
 import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { CheckIcon, SearchIcon, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { SearchIcon, XIcon } from "lucide-react";
 import { Modal } from "@ninna-ui/overlays";
 // src/overlays/CommandPalette.tsx
 const OptionContext = createContext(null);
 /** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page
-*  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */
-function CommandPalette({ label, description, placeholder, query, onQueryChange, scope, options, onSelect, onClose, listLabel, busy = false, empty, footer, children }) {
+*  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. Tokens
+*  before the field say what narrows the list. */
+function CommandPalette({ label, description, placeholder, query, onQueryChange, scope, tokens: givenTokens, onBackspaceEmpty, trailing, options, onSelect, onClose, listLabel, busy = false, busyLabel, empty, footer, children }) {
 	const labels = useDesignSystemLabels();
 	const focusProps = useModalAutoFocus();
 	const { setViewport, setContent, className } = useScrollFade();
@@ -20,6 +21,20 @@ function CommandPalette({ label, description, placeholder, query, onQueryChange,
 	const input = useRef(null);
 	const [chosen, setActiveValue] = useState();
 	const activeValue = chosen !== void 0 && options.includes(chosen) ? chosen : options[0];
+	const select = (value) => {
+		const next = onSelect(value);
+		if (next) setActiveValue(next);
+	};
+	const tokens = scope ? [{
+		id: "scope",
+		label: scope.label,
+		remove: {
+			label: scope.leaveLabel,
+			onRemove: scope.onLeave
+		}
+	}] : givenTokens ?? [];
+	const leaveLast = scope ? scope.onLeave : onBackspaceEmpty;
+	const rows = givenTokens !== void 0 || Boolean(trailing);
 	useEffect(() => {
 		if (activeValue) document.getElementById(optionId(listId, activeValue))?.scrollIntoView({ block: "nearest" });
 	}, [activeValue, listId]);
@@ -31,55 +46,79 @@ function CommandPalette({ label, description, placeholder, query, onQueryChange,
 			description,
 			centered: false,
 			...focusProps,
-			className: "flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)]",
+			"data-command-palette": true,
+			onEscapeKeyDown: (event) => {
+				if (event.isComposing) event.preventDefault();
+			},
+			className: `flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)] ${rows ? "max-sm:pb-[env(safe-area-inset-bottom)] sm:w-[calc(100vw-2rem)] sm:max-w-2xl" : ""}`,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "border-base-300 [&>svg]:text-base-600 flex shrink-0 items-center gap-2 border-b px-4 py-3 [&>svg]:size-4 [&>svg]:shrink-0",
+					className: `border-base-300 [&>svg]:text-base-600 flex shrink-0 gap-2 border-b px-4 [&>svg]:size-4 [&>svg]:shrink-0 ${rows ? "items-start py-2 [&>svg]:mt-2" : "items-center py-3"}`,
 					children: [
 						/* @__PURE__ */ jsx(SearchIcon, {}),
-						scope ? /* @__PURE__ */ jsxs("span", {
-							className: "bg-primary/12 text-primary flex shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium",
-							children: [scope.label, /* @__PURE__ */ jsx("button", {
-								type: "button",
-								tabIndex: -1,
-								"aria-label": scope.leaveLabel,
-								className: "hover:bg-primary/15 rounded-sm p-0.5 [&>svg]:size-3",
-								onClick: () => {
-									scope.onLeave();
-									input.current?.focus();
-								},
-								children: /* @__PURE__ */ jsx(XIcon, {})
-							})]
-						}) : null,
-						/* @__PURE__ */ jsx("input", {
-							ref: input,
-							role: "combobox",
-							"aria-label": label,
-							"aria-expanded": true,
-							"aria-controls": listId,
-							"aria-autocomplete": "list",
-							"aria-activedescendant": activeValue ? optionId(listId, activeValue) : void 0,
-							"aria-busy": busy,
-							placeholder,
-							value: query,
-							className: "text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm",
-							onChange: (event) => onQueryChange(event.target.value),
-							onKeyDown: (event) => {
-								if (event.nativeEvent.isComposing) return;
-								if (event.key === "Backspace" && !query && scope) {
-									event.preventDefault();
-									scope.onLeave();
-								} else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && options.length) {
-									event.preventDefault();
-									const index = activeValue ? options.indexOf(activeValue) : -1;
-									const step = event.key === "ArrowDown" ? 1 : -1;
-									setActiveValue(options[(index + step + options.length) % options.length]);
-								} else if (event.key === "Enter" && activeValue) {
-									event.preventDefault();
-									onSelect(activeValue);
+						/* @__PURE__ */ jsxs("div", {
+							className: `flex min-w-0 flex-1 items-center gap-x-2 ${rows ? "flex-wrap gap-y-1" : ""}`,
+							children: [tokens.length > 0 ? /* @__PURE__ */ jsx("ul", {
+								className: `flex max-w-full min-w-0 shrink-0 items-center gap-1 ${rows ? "max-h-19 flex-wrap overflow-y-auto overscroll-contain py-1 pointer-coarse:max-h-22 pointer-coarse:gap-y-3 pointer-coarse:py-1.5" : ""}`,
+								children: tokens.map((token) => /* @__PURE__ */ jsxs("li", {
+									className: `bg-primary/12 text-primary flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium ${rows ? "dark:text-base-content pointer-coarse:min-h-8 pointer-coarse:py-0 pointer-coarse:pr-0" : ""}`,
+									children: [
+										token.leading ? /* @__PURE__ */ jsx("span", {
+											className: "flex shrink-0 items-center [&>svg]:size-3.5",
+											children: token.leading
+										}) : null,
+										/* @__PURE__ */ jsx("span", {
+											className: "min-w-0 truncate",
+											children: token.label
+										}),
+										token.remove ? /* @__PURE__ */ jsx("button", {
+											type: "button",
+											tabIndex: scope ? -1 : void 0,
+											"aria-label": token.remove.label,
+											className: `hover:bg-primary/15 grid shrink-0 place-items-center rounded-sm p-0.5 [&>svg]:size-3 ${rows ? "pointer-coarse:-my-1.5 pointer-coarse:size-11 pointer-coarse:p-0" : ""}`,
+											onClick: () => {
+												token.remove?.onRemove();
+												input.current?.focus();
+											},
+											children: /* @__PURE__ */ jsx(XIcon, {})
+										}) : null
+									]
+								}, token.id))
+							}) : null, /* @__PURE__ */ jsx("input", {
+								ref: input,
+								role: "combobox",
+								"aria-label": label,
+								"aria-expanded": true,
+								"aria-controls": listId,
+								"aria-autocomplete": "list",
+								"aria-activedescendant": activeValue ? optionId(listId, activeValue) : void 0,
+								"aria-busy": busy,
+								placeholder,
+								value: query,
+								className: `text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm ${rows ? "h-8 min-w-32" : ""}`,
+								onChange: (event) => onQueryChange(event.target.value),
+								onKeyDown: (event) => {
+									if (event.nativeEvent.isComposing) return;
+									if (event.key === "Backspace" && !query && leaveLast) {
+										event.preventDefault();
+										leaveLast();
+									} else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && options.length) {
+										event.preventDefault();
+										const index = activeValue ? options.indexOf(activeValue) : -1;
+										const step = event.key === "ArrowDown" ? 1 : -1;
+										setActiveValue(options[(index + step + options.length) % options.length]);
+									} else if (event.key === "Enter" && activeValue) {
+										event.preventDefault();
+										select(activeValue);
+									}
 								}
-							}
+							})]
 						}),
+						trailing ? /* @__PURE__ */ jsx("div", {
+							className: "flex min-h-8 shrink-0 items-center pointer-coarse:[&_[data-slot=button]]:h-11!",
+							onClick: () => input.current?.focus(),
+							children: trailing
+						}) : null,
 						/* @__PURE__ */ jsx("span", {
 							className: "flex sm:hidden",
 							children: /* @__PURE__ */ jsx(IconButton, {
@@ -101,7 +140,8 @@ function CommandPalette({ label, description, placeholder, query, onQueryChange,
 							value: {
 								listId,
 								activeValue,
-								setActiveValue
+								setActiveValue,
+								select
 							},
 							children: /* @__PURE__ */ jsx(ResultList, {
 								id: listId,
@@ -110,11 +150,15 @@ function CommandPalette({ label, description, placeholder, query, onQueryChange,
 								"aria-busy": busy,
 								children
 							})
-						}), options.length === 0 && empty ? /* @__PURE__ */ jsx(Text, {
-							tone: "muted",
-							className: "px-3 py-8 text-center",
-							children: empty
-						}) : null]
+						}), /* @__PURE__ */ jsx("div", {
+							role: "status",
+							children: busy && busyLabel || options.length === 0 && empty ? /* @__PURE__ */ jsx(Text, {
+								as: "div",
+								tone: "muted",
+								className: "px-3 py-8 text-center",
+								children: busy && busyLabel ? busyLabel : empty
+							}) : null
+						})]
 					})
 				}),
 				footer ? /* @__PURE__ */ jsx("div", {
@@ -142,6 +186,48 @@ function CommandPaletteGroup({ label, children }) {
 		}), children]
 	});
 }
+/** One line of the palette's list: an icon, the name, an optional hint (searched with the name) and meta (on wider
+*  screens), and a tick while `checked`, as a filter that is on. Choosing it keeps the focus in the field. */
+function CommandPaletteOption({ value, icon, name, hint, meta, checked }) {
+	const context = useContext(OptionContext);
+	if (!context) throw new Error("CommandPaletteOption must be used inside CommandPalette");
+	return /* @__PURE__ */ jsxs("div", {
+		id: optionId(context.listId, value),
+		role: "option",
+		"aria-selected": context.activeValue === value,
+		"aria-checked": checked,
+		tabIndex: -1,
+		onPointerMove: () => {
+			if (context.activeValue !== value) context.setActiveValue(value);
+		},
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: () => context.select(value),
+		className: "text-base-800 aria-selected:bg-primary/10 aria-selected:ring-primary/30 dark:text-base-content flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm aria-selected:ring-1 aria-selected:ring-inset pointer-coarse:h-11",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base-700 grid size-4 shrink-0 place-items-center [&>svg]:size-3.5",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				title: name,
+				className: "min-w-0 flex-1 truncate",
+				children: name
+			}),
+			hint ? /* @__PURE__ */ jsx("span", {
+				className: "text-base-700 max-w-40 shrink-0 truncate text-xs tabular-nums",
+				children: hint
+			}) : null,
+			meta ? /* @__PURE__ */ jsx("span", {
+				className: "text-base-700 max-w-56 shrink-0 truncate text-xs max-sm:hidden",
+				children: meta
+			}) : null,
+			checked ? /* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": "true",
+				className: "text-primary size-3.5 shrink-0"
+			}) : null
+		]
+	});
+}
 /** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */
 function useCommandPaletteOption(value) {
 	const context = useContext(OptionContext);
@@ -156,8 +242,8 @@ function useCommandPaletteOption(value) {
 	};
 }
 function optionId(listId, value) {
-	return `${listId}-${value.replace(/[^\w-]/g, "_")}`;
+	return `${listId}-${encodeURIComponent(value)}`;
 }
-export { CommandPalette, CommandPaletteGroup, useCommandPaletteOption };
+export { CommandPalette, CommandPaletteGroup, CommandPaletteOption, useCommandPaletteOption };
 
 //# sourceMappingURL=CommandPalette.js.map

package/dist/overlays/CommandPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.js","names":["NinnaModal"],"sources":["../../src/overlays/CommandPalette.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- The option hook belongs to the palette. */\n\nimport { Modal as NinnaModal } from '@ninna-ui/overlays';\nimport { SearchIcon, XIcon } from 'lucide-react';\nimport { createContext, type ReactNode, useContext, useEffect, useId, useRef, useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { ResultList } from '../collections/ResultList';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\nimport { useScrollFade } from './useScrollFade';\n\ninterface CommandPaletteProps {\n    /** The dialog's accessible title and description; the field says the rest. */\n    label: string;\n    description: string;\n    placeholder: string;\n    query: string;\n    onQueryChange: (query: string) => void;\n    /** Narrows the list to one level, shown as a chip before the field; Backspace in an empty field leaves it. */\n    scope?: { label: string; leaveLabel: string; onLeave: () => void };\n    /** The options' values in list order, for the arrow keys and Enter. */\n    options: readonly string[];\n    onSelect: (value: string) => void;\n    onClose: () => void;\n    listLabel: string;\n    busy?: boolean;\n    /** Shown when nothing is listed. */\n    empty?: ReactNode;\n    /** Quiet key hints under the list, on screens with a keyboard. */\n    footer?: ReactNode;\n    children: ReactNode;\n}\n\nconst OptionContext = createContext<{\n    listId: string;\n    activeValue: string | undefined;\n    setActiveValue: (value: string) => void;\n} | null>(null);\n\n/** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page\n *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */\nexport function CommandPalette({\n    label,\n    description,\n    placeholder,\n    query,\n    onQueryChange,\n    scope,\n    options,\n    onSelect,\n    onClose,\n    listLabel,\n    busy = false,\n    empty,\n    footer,\n    children,\n}: CommandPaletteProps) {\n    const labels = useDesignSystemLabels();\n    const focusProps = useModalAutoFocus();\n    const { setViewport, setContent, className } = useScrollFade();\n    const listId = useId();\n    const input = useRef<HTMLInputElement>(null);\n    const [chosen, setActiveValue] = useState<string>();\n    // The highlight follows the list: when the chosen option leaves it, the first option takes over.\n    const activeValue = chosen !== undefined && options.includes(chosen) ? chosen : options[0];\n\n    useEffect(() => {\n        if (activeValue) document.getElementById(optionId(listId, activeValue))?.scrollIntoView({ block: 'nearest' });\n    }, [activeValue, listId]);\n\n    return (\n        <NinnaModal open onOpenChange={(open) => !open && onClose()}>\n            <NinnaModal.Content\n                title={label}\n                description={description}\n                centered={false}\n                {...focusProps}\n                className=\"flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)]\"\n            >\n                <div className=\"border-base-300 [&>svg]:text-base-600 flex shrink-0 items-center gap-2 border-b px-4 py-3 [&>svg]:size-4 [&>svg]:shrink-0\">\n                    <SearchIcon />\n                    {scope ? (\n                        <span className=\"bg-primary/12 text-primary flex shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium\">\n                            {scope.label}\n                            <button\n                                type=\"button\"\n                                tabIndex={-1}\n                                aria-label={scope.leaveLabel}\n                                className=\"hover:bg-primary/15 rounded-sm p-0.5 [&>svg]:size-3\"\n                                onClick={() => {\n                                    scope.onLeave();\n                                    input.current?.focus();\n                                }}\n                            >\n                                <XIcon />\n                            </button>\n                        </span>\n                    ) : null}\n                    <input\n                        ref={input}\n                        role=\"combobox\"\n                        aria-label={label}\n                        aria-expanded\n                        aria-controls={listId}\n                        aria-autocomplete=\"list\"\n                        aria-activedescendant={activeValue ? optionId(listId, activeValue) : undefined}\n                        aria-busy={busy}\n                        placeholder={placeholder}\n                        value={query}\n                        className=\"text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm\"\n                        onChange={(event) => onQueryChange(event.target.value)}\n                        onKeyDown={(event) => {\n                            if (event.nativeEvent.isComposing) return;\n\n                            if (event.key === 'Backspace' && !query && scope) {\n                                event.preventDefault();\n                                scope.onLeave();\n                            } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && options.length) {\n                                event.preventDefault();\n\n                                const index = activeValue ? options.indexOf(activeValue) : -1;\n                                const step = event.key === 'ArrowDown' ? 1 : -1;\n\n                                setActiveValue(options[(index + step + options.length) % options.length]!);\n                            } else if (event.key === 'Enter' && activeValue) {\n                                event.preventDefault();\n                                onSelect(activeValue);\n                            }\n                        }}\n                    />\n                    <span className=\"flex sm:hidden\">\n                        <IconButton aria-label={labels.close} icon={<XIcon />} onClick={onClose} variant=\"header\" />\n                    </span>\n                </div>\n                <div ref={setViewport} className={`min-h-0 flex-1 overflow-y-auto overscroll-contain p-2 ${className}`}>\n                    <div ref={setContent} className=\"flow-root\">\n                        <OptionContext.Provider value={{ listId, activeValue, setActiveValue }}>\n                            <ResultList id={listId} label={listLabel} density=\"compact\" aria-busy={busy}>\n                                {children}\n                            </ResultList>\n                        </OptionContext.Provider>\n                        {options.length === 0 && empty ? (\n                            <Text tone=\"muted\" className=\"px-3 py-8 text-center\">\n                                {empty}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n                {footer ? (\n                    <div className=\"border-base-300 text-2xs text-base-700 hidden shrink-0 items-center gap-4 border-t px-4 py-2 pointer-fine:flex\">\n                        {footer}\n                    </div>\n                ) : null}\n            </NinnaModal.Content>\n        </NinnaModal>\n    );\n}\n\n/** A labelled run of options in the palette's list. */\nexport function CommandPaletteGroup({ label, children }: { label: string; children: ReactNode }) {\n    const labelId = useId();\n\n    return (\n        <div role=\"group\" aria-labelledby={labelId} className=\"flex flex-col gap-1 not-first:pt-2\">\n            <Text\n                as=\"span\"\n                id={labelId}\n                variant=\"caption\"\n                tone=\"muted\"\n                className=\"px-2 pt-1 font-medium tracking-wide uppercase\"\n            >\n                {label}\n            </Text>\n            {children}\n        </div>\n    );\n}\n\n/** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */\nexport function useCommandPaletteOption(value: string) {\n    const context = useContext(OptionContext);\n\n    if (!context) throw new Error('useCommandPaletteOption must be used inside CommandPalette');\n\n    return {\n        id: optionId(context.listId, value),\n        selected: context.activeValue === value,\n        tabIndex: -1,\n        onPointerMove: () => {\n            if (context.activeValue !== value) context.setActiveValue(value);\n        },\n    };\n}\n\nfunction optionId(listId: string, value: string) {\n    return `${listId}-${value.replace(/[^\\w-]/g, '_')}`;\n}\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.js","names":["NinnaModal"],"sources":["../../src/overlays/CommandPalette.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- The option hook belongs to the palette. */\n\nimport { Modal as NinnaModal } from '@ninna-ui/overlays';\nimport { CheckIcon, SearchIcon, XIcon } from 'lucide-react';\nimport { createContext, type ReactNode, useContext, useEffect, useId, useRef, useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { ResultList } from '../collections/ResultList';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\nimport { useScrollFade } from './useScrollFade';\n\n/** A chip before the field for something that narrows the list, such as a filter. */\nexport interface CommandPaletteToken {\n    id: string;\n    label: string;\n    /** An icon or colour mark before the label. */\n    leading?: ReactNode;\n    /** A button on the chip that takes it away; the focus stays in the field. */\n    remove?: { label: string; onRemove: () => void };\n}\n\ninterface CommandPaletteProps {\n    /** The dialog's accessible title and description; the field says the rest. */\n    label: string;\n    description: string;\n    placeholder: string;\n    query: string;\n    onQueryChange: (query: string) => void;\n    /** Narrows the list to one level, shown as a chip before the field; Backspace in an empty field leaves it. */\n    scope?: { label: string; leaveLabel: string; onLeave: () => void };\n    /** Chips before the field, such as active filters, which wrap and scroll on their own when there are many. A\n     *  palette given tokens, even none, is a filtering search, as wide as its chips need. */\n    tokens?: readonly CommandPaletteToken[];\n    /** Backspace in an empty field, such as to take the last token away. */\n    onBackspaceEmpty?: () => void;\n    /** A control after the field, such as Clear. A press on it leaves the focus in the field. */\n    trailing?: ReactNode;\n    /** The options' values in list order, for the arrow keys and Enter. */\n    options: readonly string[];\n    /** May return the option the highlight moves to, when choosing changes the list. */\n    onSelect: (value: string) => string | void;\n    onClose: () => void;\n    listLabel: string;\n    /** Marks the list busy while more may arrive; `busyLabel` shows under it meanwhile. */\n    busy?: boolean;\n    busyLabel?: ReactNode;\n    /** Shown when nothing is listed and nothing is pending. */\n    empty?: ReactNode;\n    /** Quiet key hints under the list, on screens with a keyboard. */\n    footer?: ReactNode;\n    children: ReactNode;\n}\n\nconst OptionContext = createContext<{\n    listId: string;\n    activeValue: string | undefined;\n    setActiveValue: (value: string) => void;\n    select: (value: string) => void;\n} | null>(null);\n\n/** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page\n *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. Tokens\n *  before the field say what narrows the list. */\nexport function CommandPalette({\n    label,\n    description,\n    placeholder,\n    query,\n    onQueryChange,\n    scope,\n    tokens: givenTokens,\n    onBackspaceEmpty,\n    trailing,\n    options,\n    onSelect,\n    onClose,\n    listLabel,\n    busy = false,\n    busyLabel,\n    empty,\n    footer,\n    children,\n}: CommandPaletteProps) {\n    const labels = useDesignSystemLabels();\n    const focusProps = useModalAutoFocus();\n    const { setViewport, setContent, className } = useScrollFade();\n    const listId = useId();\n    const input = useRef<HTMLInputElement>(null);\n    const [chosen, setActiveValue] = useState<string>();\n    // The highlight follows the list: when the chosen option leaves it, the first option takes over.\n    const activeValue = chosen !== undefined && options.includes(chosen) ? chosen : options[0];\n    const select = (value: string) => {\n        const next = onSelect(value);\n\n        if (next) setActiveValue(next);\n    };\n    // A scope is the one token of a palette that narrows by levels.\n    const tokens: readonly CommandPaletteToken[] = scope\n        ? [{ id: 'scope', label: scope.label, remove: { label: scope.leaveLabel, onRemove: scope.onLeave } }]\n        : (givenTokens ?? []);\n    const leaveLast = scope ? scope.onLeave : onBackspaceEmpty;\n    // A palette that takes tokens, or a trailing control, is a filtering search: wide, with its field wrapping onto\n    // rows under the tokens, from the top.\n    const rows = givenTokens !== undefined || Boolean(trailing);\n\n    useEffect(() => {\n        if (activeValue) document.getElementById(optionId(listId, activeValue))?.scrollIntoView({ block: 'nearest' });\n    }, [activeValue, listId]);\n\n    return (\n        <NinnaModal open onOpenChange={(open) => !open && onClose()}>\n            <NinnaModal.Content\n                title={label}\n                description={description}\n                centered={false}\n                {...focusProps}\n                data-command-palette\n                // The dialog listens for Escape on the document, past the field's own keys; an input method's Escape\n                // only ends its composition.\n                onEscapeKeyDown={(event) => {\n                    if (event.isComposing) event.preventDefault();\n                }}\n                className={`flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)] ${rows ? 'max-sm:pb-[env(safe-area-inset-bottom)] sm:w-[calc(100vw-2rem)] sm:max-w-2xl' : ''}`}\n            >\n                <div\n                    className={`border-base-300 [&>svg]:text-base-600 flex shrink-0 gap-2 border-b px-4 [&>svg]:size-4 [&>svg]:shrink-0 ${rows ? 'items-start py-2 [&>svg]:mt-2' : 'items-center py-3'}`}\n                >\n                    <SearchIcon />\n                    <div className={`flex min-w-0 flex-1 items-center gap-x-2 ${rows ? 'flex-wrap gap-y-1' : ''}`}>\n                        {tokens.length > 0 ? (\n                            // Many tokens scroll on their own, so the field stays in view however many there are. Under\n                            // a coarse pointer each remove button is 44 px, reaching into the gap between rows.\n                            <ul\n                                className={`flex max-w-full min-w-0 shrink-0 items-center gap-1 ${rows ? 'max-h-19 flex-wrap overflow-y-auto overscroll-contain py-1 pointer-coarse:max-h-22 pointer-coarse:gap-y-3 pointer-coarse:py-1.5' : ''}`}\n                            >\n                                {tokens.map((token) => (\n                                    <li\n                                        key={token.id}\n                                        className={`bg-primary/12 text-primary flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium ${rows ? 'dark:text-base-content pointer-coarse:min-h-8 pointer-coarse:py-0 pointer-coarse:pr-0' : ''}`}\n                                    >\n                                        {token.leading ? (\n                                            <span className=\"flex shrink-0 items-center [&>svg]:size-3.5\">\n                                                {token.leading}\n                                            </span>\n                                        ) : null}\n                                        <span className=\"min-w-0 truncate\">{token.label}</span>\n                                        {token.remove ? (\n                                            <button\n                                                type=\"button\"\n                                                // A scope's chip leaves with Backspace alone; several tokens' buttons are tab stops.\n                                                tabIndex={scope ? -1 : undefined}\n                                                aria-label={token.remove.label}\n                                                className={`hover:bg-primary/15 grid shrink-0 place-items-center rounded-sm p-0.5 [&>svg]:size-3 ${rows ? 'pointer-coarse:-my-1.5 pointer-coarse:size-11 pointer-coarse:p-0' : ''}`}\n                                                onClick={() => {\n                                                    token.remove?.onRemove();\n                                                    input.current?.focus();\n                                                }}\n                                            >\n                                                <XIcon />\n                                            </button>\n                                        ) : null}\n                                    </li>\n                                ))}\n                            </ul>\n                        ) : null}\n                        <input\n                            ref={input}\n                            role=\"combobox\"\n                            aria-label={label}\n                            aria-expanded\n                            aria-controls={listId}\n                            aria-autocomplete=\"list\"\n                            aria-activedescendant={activeValue ? optionId(listId, activeValue) : undefined}\n                            aria-busy={busy}\n                            placeholder={placeholder}\n                            value={query}\n                            className={`text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm ${rows ? 'h-8 min-w-32' : ''}`}\n                            onChange={(event) => onQueryChange(event.target.value)}\n                            onKeyDown={(event) => {\n                                if (event.nativeEvent.isComposing) return;\n\n                                if (event.key === 'Backspace' && !query && leaveLast) {\n                                    event.preventDefault();\n                                    leaveLast();\n                                } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && options.length) {\n                                    event.preventDefault();\n\n                                    const index = activeValue ? options.indexOf(activeValue) : -1;\n                                    const step = event.key === 'ArrowDown' ? 1 : -1;\n\n                                    setActiveValue(options[(index + step + options.length) % options.length]!);\n                                } else if (event.key === 'Enter' && activeValue) {\n                                    event.preventDefault();\n                                    select(activeValue);\n                                }\n                            }}\n                        />\n                    </div>\n                    {trailing ? (\n                        // Under a coarse pointer the control is 44 px, as a token's remove button is.\n                        <div\n                            className=\"flex min-h-8 shrink-0 items-center pointer-coarse:[&_[data-slot=button]]:h-11!\"\n                            onClick={() => input.current?.focus()}\n                        >\n                            {trailing}\n                        </div>\n                    ) : null}\n                    <span className=\"flex sm:hidden\">\n                        <IconButton aria-label={labels.close} icon={<XIcon />} onClick={onClose} variant=\"header\" />\n                    </span>\n                </div>\n                <div ref={setViewport} className={`min-h-0 flex-1 overflow-y-auto overscroll-contain p-2 ${className}`}>\n                    <div ref={setContent} className=\"flow-root\">\n                        <OptionContext.Provider value={{ listId, activeValue, setActiveValue, select }}>\n                            <ResultList id={listId} label={listLabel} density=\"compact\" aria-busy={busy}>\n                                {children}\n                            </ResultList>\n                        </OptionContext.Provider>\n                        <div role=\"status\">\n                            {(busy && busyLabel) || (options.length === 0 && empty) ? (\n                                <Text as=\"div\" tone=\"muted\" className=\"px-3 py-8 text-center\">\n                                    {busy && busyLabel ? busyLabel : empty}\n                                </Text>\n                            ) : null}\n                        </div>\n                    </div>\n                </div>\n                {footer ? (\n                    <div className=\"border-base-300 text-2xs text-base-700 hidden shrink-0 items-center gap-4 border-t px-4 py-2 pointer-fine:flex\">\n                        {footer}\n                    </div>\n                ) : null}\n            </NinnaModal.Content>\n        </NinnaModal>\n    );\n}\n\n/** A labelled run of options in the palette's list. */\nexport function CommandPaletteGroup({ label, children }: { label: string; children: ReactNode }) {\n    const labelId = useId();\n\n    return (\n        <div role=\"group\" aria-labelledby={labelId} className=\"flex flex-col gap-1 not-first:pt-2\">\n            <Text\n                as=\"span\"\n                id={labelId}\n                variant=\"caption\"\n                tone=\"muted\"\n                className=\"px-2 pt-1 font-medium tracking-wide uppercase\"\n            >\n                {label}\n            </Text>\n            {children}\n        </div>\n    );\n}\n\n/** One line of the palette's list: an icon, the name, an optional hint (searched with the name) and meta (on wider\n *  screens), and a tick while `checked`, as a filter that is on. Choosing it keeps the focus in the field. */\nexport function CommandPaletteOption({\n    value,\n    icon,\n    name,\n    hint,\n    meta,\n    checked,\n}: {\n    value: string;\n    icon: ReactNode;\n    name: string;\n    hint?: string;\n    meta?: string;\n    /** Whether a filter's option is on; other options leave it out. */\n    checked?: boolean;\n}) {\n    const context = useContext(OptionContext);\n\n    if (!context) throw new Error('CommandPaletteOption must be used inside CommandPalette');\n\n    return (\n        <div\n            id={optionId(context.listId, value)}\n            role=\"option\"\n            aria-selected={context.activeValue === value}\n            aria-checked={checked}\n            tabIndex={-1}\n            onPointerMove={() => {\n                if (context.activeValue !== value) context.setActiveValue(value);\n            }}\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={() => context.select(value)}\n            className=\"text-base-800 aria-selected:bg-primary/10 aria-selected:ring-primary/30 dark:text-base-content flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm aria-selected:ring-1 aria-selected:ring-inset pointer-coarse:h-11\"\n        >\n            <span className=\"text-base-700 grid size-4 shrink-0 place-items-center [&>svg]:size-3.5\">{icon}</span>\n            <span title={name} className=\"min-w-0 flex-1 truncate\">\n                {name}\n            </span>\n            {hint ? (\n                <span className=\"text-base-700 max-w-40 shrink-0 truncate text-xs tabular-nums\">{hint}</span>\n            ) : null}\n            {meta ? (\n                <span className=\"text-base-700 max-w-56 shrink-0 truncate text-xs max-sm:hidden\">{meta}</span>\n            ) : null}\n            {checked ? <CheckIcon aria-hidden=\"true\" className=\"text-primary size-3.5 shrink-0\" /> : null}\n        </div>\n    );\n}\n\n/** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */\nexport function useCommandPaletteOption(value: string) {\n    const context = useContext(OptionContext);\n\n    if (!context) throw new Error('useCommandPaletteOption must be used inside CommandPalette');\n\n    return {\n        id: optionId(context.listId, value),\n        selected: context.activeValue === value,\n        tabIndex: -1,\n        onPointerMove: () => {\n            if (context.activeValue !== value) context.setActiveValue(value);\n        },\n    };\n}\n\nfunction optionId(listId: string, value: string) {\n    return `${listId}-${encodeURIComponent(value)}`;\n}\n"],"mappings":"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"}