@nadicodeai/ui 12.1.102 → 12.1.103

package/dist/components/combobox.d.ts

@@ -1,42 +1,117 @@
 import * as React from "react";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { type AccessibleName } from "./button.js";
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
 /**
  * Type to find one value, or several, in a known set.
  *
  * @family Choices
- * @when Typing to find in a known set: assign an Agent, choose a time zone, add several Agents at
- * once with `multiple`.
- * @instead A short fixed list is a `Select`. Free text is an `Input`. Narrowing a collection is
- * `CollectionFilters`.
- * @behaviour Typing filters the list. Loading and no match are different states; the chosen value
- * stays while results load. Enter picks the highlighted row and never submits the form around it.
- * Clear empties the box and keeps focus there. With `multiple`, each choice is a chip with its own
- * remove; Backspace in an empty box removes the last.
- * @words The hint is scoped: *Find an Agent*. No match quotes the query: *No Agent matches “Xy”.* A
- * chip reads as the record's name.
- * @access A visible label; combobox and listbox roles; each chip's remove is named: *Remove Acme
- * Quotes*. An Agent's orb in a row is a decorative mark beside her name.
+ * @when "Filters large lists to selectable options based on the matching query."
+ * (https://vercel.com/geist/combobox) "Pick `<Combobox>` when users type to filter a known list of
+ * values (regions, frameworks, env-var names)." (https://vercel.com/geist/combobox) Ours: assign an Agent, choose a time zone,
+ * add several Agents at once with `multiple`.
+ * @instead "For short, fixed lists where typing adds nothing, switch to `Select`."
+ * (https://vercel.com/geist/combobox) "When more than one value can be chosen at once, use
+ * `MultiSelect`." (https://vercel.com/geist/combobox) "For free-form filter strings that don’t
+ * resolve to a single option, drop in `Input` with the `search` variant."
+ * (https://vercel.com/geist/combobox) Ours: several values chosen from a list you scan rather than
+ * type into is a `MultiSelect`; `Combobox` takes several with `multiple`. `Input` has no `search`
+ * variant, so free text is an `Input` and narrowing a collection is `CollectionFilters`.
+ * @behaviour The box is `Input`'s: its three sizes (`size` on `ComboboxInput`), its ring, hover,
+ * focus halo and disabled, with the search mark at the start, a `placeholder` that names the scope,
+ * and the open-list or clear button flush at the end, in the muted grey until hovered (the
+ * open-list button is 30 px high and centred at the default size, full height at `sm` and `lg`).
+ * Colour sits in one place: an error turns the ring red, fills the halo and colours the typed text;
+ * the placeholder, marks and list stay neutral. `label` and `error` go on `ComboboxInput`, and a
+ * string `label` requires `id`; a box with no name does not compile. The list opens 8 px under it
+ * at its width (a narrower `className` width centres under the box), in a 6 px inset, up to five
+ * and a half rows tall (210 px) so a cut row shows there is more, with rows 36 px tall and no gap.
+ * A row is one line that ends in an ellipsis, with a 16 px mark 12 px before the name and a 14 px
+ * check at the chosen row's end, after the name. A row that cannot be chosen turns its text muted,
+ * never dimmed. Typing filters the list. "Options can opt out of the fixed row height with `ignoreDefaultHeight`
+ * to render multi-line content (e.g. a shared environment variable name plus its target). The list
+ * sizes each row to its content and stays scrollable." (https://vercel.com/geist/combobox) Ours:
+ * there is no `ignoreDefaultHeight`; a two-line row is an explicit column child. "Show a loading
+ * state for async results; don’t collapse the list while the request is in flight."
+ * (https://vercel.com/geist/combobox) Ours: while results load the list stays and `ComboboxLoading`
+ * says so, and the chosen value stays; `ComboboxContent` requires `empty`, the sentence for no
+ * match, or `null` while a search is still running. "Render a custom empty state of the form `No
+ * {items} match "{query}"` rather than a bare `No results`." (https://vercel.com/geist/combobox)
+ * "Keep arrow-key navigation through `<Combobox.Option>` items; don’t hijack Enter to submit the
+ * surrounding form while the list is open." (https://vercel.com/geist/combobox) "Set `clearable` to
+ * show a clear button when a value is selected." (https://vercel.com/geist/combobox) Ours:
+ * `showClear` with a `clearLabel` does it; clear empties the box and keeps focus there. With
+ * `multiple`, each choice is a chip with its own remove; Backspace in an empty box removes the
+ * last. "It is common to use Combobox inside a Modal. On mobile, the Modal automatically renders a
+ * Dialog instead." (https://vercel.com/geist/combobox) "Inside a `Modal`, Geist switches to a
+ * Dialog on mobile automatically; don’t layer a second portal." (https://vercel.com/geist/combobox)
+ * Ours: our overlay is `Dialog`, and `ComboboxContent` is the list's one portal.
+ * @words "Visible label is a short Title Case noun (`Region`, `Environment Variable Name`)."
+ * (https://vercel.com/geist/combobox) "Placeholder is the inline hint: `Search regions`,
+ * `DATABASE_URL`. Never bare `Search…` and never the label restated."
+ * (https://vercel.com/geist/combobox) "Option text is Title Case for short values and matches
+ * canonical branding (`Next.js`, not `NextJS`); same register across the list."
+ * (https://vercel.com/geist/combobox) "Validation names the field and constraint, sentence case
+ * with a period (`Select a region.`)." (https://vercel.com/geist/combobox) Ours: the label and the
+ * rows are sentence case. The hint is scoped: *Find an Agent*. No match quotes the query: *No Agent
+ * matches “Xy”.* A chip reads as the record's name.
+ * @access "`<Combobox>` has no `label` prop; pair a sibling `<Label htmlFor>` with the root `id`,
+ * or set `aria-label` on the root for icon-only triggers." (https://vercel.com/geist/combobox) "The
+ * root accepts `aria-label` only; there is no `aria-labelledby` prop, so the sibling-label path is
+ * the way to reference visible text." (https://vercel.com/geist/combobox) "Trap focus inside the
+ * popover when nested in a `Modal` so Tab cycles options instead of the page behind it."
+ * (https://vercel.com/geist/combobox) Ours: `ComboboxInput` takes a visible `label` tied to the box
+ * by `id`, or `aria-label` or `aria-labelledby`; combobox and listbox roles; the open-list and
+ * clear buttons are named by `triggerLabel` and `clearLabel`; each chip's remove is named: *Remove
+ * Acme Quotes*. An Agent's orb in a row is a decorative mark beside her name.
  */
 declare const Combobox: typeof ComboboxPrimitive.Root;
 declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
 declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
-declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
-    showTrigger?: boolean;
-    showClear?: boolean;
+type ComboboxTriggerButton = {
+    showTrigger: false;
+    triggerLabel?: undefined;
+} | {
+    showTrigger?: true;
+    triggerLabel: string;
+};
+type ComboboxClearButton = {
+    showClear?: false;
+    clearLabel?: undefined;
+} | {
+    showClear: true;
+    clearLabel: string;
+};
+declare function ComboboxInput({ className, children, disabled, showTrigger, triggerLabel, showClear, clearLabel, size, label, error, ...props }: Omit<ComboboxPrimitive.Input.Props, "className" | "size"> & {
+    className?: string;
+    size?: FieldSize;
+    /** The scope, as an example of what to type: *Find an Agent*. Never *Search…* alone. */
+    placeholder: string;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName & ComboboxTriggerButton & ComboboxClearButton): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, empty, children, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor"> & {
+    /** What the list says when nothing matches, quoting the query; `null` while a search runs. */
+    empty: string | null;
 }): React.JSX.Element;
-declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
 declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
 declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element;
 declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
 declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
 declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
-declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
+declare function ComboboxLoading({ className, ...props }: ComboboxPrimitive.Status.Props): React.JSX.Element;
 declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
 declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
-declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
-    showRemove?: boolean;
-}): React.JSX.Element;
-declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
+type ComboboxChipRemove = {
+    showRemove: false;
+    removeLabel?: undefined;
+} | {
+    showRemove?: true;
+    removeLabel: string;
+};
+declare function ComboboxChip({ className, children, showRemove, removeLabel, ...props }: ComboboxPrimitive.Chip.Props & ComboboxChipRemove): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props & AccessibleName): React.JSX.Element;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
-export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxLoading, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/components/combobox.js

@@ -4,46 +4,95 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 import { anchoredOverlayMotion } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group.js";
-import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldRing, fieldWithinStates } from "../internal/input-box.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupControl, } from "./input-group.js";
+import { ChevronDownIcon, XIcon, CheckIcon, SearchIcon } from "lucide-react";
 /**
  * Type to find one value, or several, in a known set.
  *
  * @family Choices
- * @when Typing to find in a known set: assign an Agent, choose a time zone, add several Agents at
- * once with `multiple`.
- * @instead A short fixed list is a `Select`. Free text is an `Input`. Narrowing a collection is
- * `CollectionFilters`.
- * @behaviour Typing filters the list. Loading and no match are different states; the chosen value
- * stays while results load. Enter picks the highlighted row and never submits the form around it.
- * Clear empties the box and keeps focus there. With `multiple`, each choice is a chip with its own
- * remove; Backspace in an empty box removes the last.
- * @words The hint is scoped: *Find an Agent*. No match quotes the query: *No Agent matches “Xy”.* A
- * chip reads as the record's name.
- * @access A visible label; combobox and listbox roles; each chip's remove is named: *Remove Acme
- * Quotes*. An Agent's orb in a row is a decorative mark beside her name.
+ * @when "Filters large lists to selectable options based on the matching query."
+ * (https://vercel.com/geist/combobox) "Pick `<Combobox>` when users type to filter a known list of
+ * values (regions, frameworks, env-var names)." (https://vercel.com/geist/combobox) Ours: assign an Agent, choose a time zone,
+ * add several Agents at once with `multiple`.
+ * @instead "For short, fixed lists where typing adds nothing, switch to `Select`."
+ * (https://vercel.com/geist/combobox) "When more than one value can be chosen at once, use
+ * `MultiSelect`." (https://vercel.com/geist/combobox) "For free-form filter strings that don’t
+ * resolve to a single option, drop in `Input` with the `search` variant."
+ * (https://vercel.com/geist/combobox) Ours: several values chosen from a list you scan rather than
+ * type into is a `MultiSelect`; `Combobox` takes several with `multiple`. `Input` has no `search`
+ * variant, so free text is an `Input` and narrowing a collection is `CollectionFilters`.
+ * @behaviour The box is `Input`'s: its three sizes (`size` on `ComboboxInput`), its ring, hover,
+ * focus halo and disabled, with the search mark at the start, a `placeholder` that names the scope,
+ * and the open-list or clear button flush at the end, in the muted grey until hovered (the
+ * open-list button is 30 px high and centred at the default size, full height at `sm` and `lg`).
+ * Colour sits in one place: an error turns the ring red, fills the halo and colours the typed text;
+ * the placeholder, marks and list stay neutral. `label` and `error` go on `ComboboxInput`, and a
+ * string `label` requires `id`; a box with no name does not compile. The list opens 8 px under it
+ * at its width (a narrower `className` width centres under the box), in a 6 px inset, up to five
+ * and a half rows tall (210 px) so a cut row shows there is more, with rows 36 px tall and no gap.
+ * A row is one line that ends in an ellipsis, with a 16 px mark 12 px before the name and a 14 px
+ * check at the chosen row's end, after the name. A row that cannot be chosen turns its text muted,
+ * never dimmed. Typing filters the list. "Options can opt out of the fixed row height with `ignoreDefaultHeight`
+ * to render multi-line content (e.g. a shared environment variable name plus its target). The list
+ * sizes each row to its content and stays scrollable." (https://vercel.com/geist/combobox) Ours:
+ * there is no `ignoreDefaultHeight`; a two-line row is an explicit column child. "Show a loading
+ * state for async results; don’t collapse the list while the request is in flight."
+ * (https://vercel.com/geist/combobox) Ours: while results load the list stays and `ComboboxLoading`
+ * says so, and the chosen value stays; `ComboboxContent` requires `empty`, the sentence for no
+ * match, or `null` while a search is still running. "Render a custom empty state of the form `No
+ * {items} match "{query}"` rather than a bare `No results`." (https://vercel.com/geist/combobox)
+ * "Keep arrow-key navigation through `<Combobox.Option>` items; don’t hijack Enter to submit the
+ * surrounding form while the list is open." (https://vercel.com/geist/combobox) "Set `clearable` to
+ * show a clear button when a value is selected." (https://vercel.com/geist/combobox) Ours:
+ * `showClear` with a `clearLabel` does it; clear empties the box and keeps focus there. With
+ * `multiple`, each choice is a chip with its own remove; Backspace in an empty box removes the
+ * last. "It is common to use Combobox inside a Modal. On mobile, the Modal automatically renders a
+ * Dialog instead." (https://vercel.com/geist/combobox) "Inside a `Modal`, Geist switches to a
+ * Dialog on mobile automatically; don’t layer a second portal." (https://vercel.com/geist/combobox)
+ * Ours: our overlay is `Dialog`, and `ComboboxContent` is the list's one portal.
+ * @words "Visible label is a short Title Case noun (`Region`, `Environment Variable Name`)."
+ * (https://vercel.com/geist/combobox) "Placeholder is the inline hint: `Search regions`,
+ * `DATABASE_URL`. Never bare `Search…` and never the label restated."
+ * (https://vercel.com/geist/combobox) "Option text is Title Case for short values and matches
+ * canonical branding (`Next.js`, not `NextJS`); same register across the list."
+ * (https://vercel.com/geist/combobox) "Validation names the field and constraint, sentence case
+ * with a period (`Select a region.`)." (https://vercel.com/geist/combobox) Ours: the label and the
+ * rows are sentence case. The hint is scoped: *Find an Agent*. No match quotes the query: *No Agent
+ * matches “Xy”.* A chip reads as the record's name.
+ * @access "`<Combobox>` has no `label` prop; pair a sibling `<Label htmlFor>` with the root `id`,
+ * or set `aria-label` on the root for icon-only triggers." (https://vercel.com/geist/combobox) "The
+ * root accepts `aria-label` only; there is no `aria-labelledby` prop, so the sibling-label path is
+ * the way to reference visible text." (https://vercel.com/geist/combobox) "Trap focus inside the
+ * popover when nested in a `Modal` so Tab cycles options instead of the page behind it."
+ * (https://vercel.com/geist/combobox) Ours: `ComboboxInput` takes a visible `label` tied to the box
+ * by `id`, or `aria-label` or `aria-labelledby`; combobox and listbox roles; the open-list and
+ * clear buttons are named by `triggerLabel` and `clearLabel`; each chip's remove is named: *Remove
+ * Acme Quotes*. An Agent's orb in a row is a decorative mark beside her name.
  */
 const Combobox = ComboboxPrimitive.Root;
 function ComboboxValue({ ...props }) {
     return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
 }
 function ComboboxTrigger({ className, children, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
+    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" })] }));
 }
 function ComboboxClear({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon", "aria-label": props["aria-label"] }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none size-3.5" }) }));
 }
-function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
-    return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, triggerLabel, showClear = false, clearLabel, size, label, error, ...props }) {
+    const hasButton = showTrigger || showClear;
+    return (_jsx(FieldFrame, { label: label, error: error, size: size, control: props, children: (aria) => (_jsxs(InputGroup, { size: size, className: className, children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, { "aria-hidden": "true" }) }), _jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupControl, { disabled: disabled, className: cn("aria-invalid:text-destructive", hasButton && "pr-0") }), ...props, ...aria }), hasButton ? (_jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && triggerLabel !== undefined ? (_jsx(InputGroupButton, { size: "icon", variant: "ghost", "aria-label": triggerLabel, render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-data-[size=default]/input-group:h-7.5 group-data-[size=default]/input-group:self-center group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })) : null, showClear && clearLabel !== undefined ? (_jsx(ComboboxClear, { "aria-label": clearLabel, disabled: disabled })) : null] })) : null, children] })) }));
 }
-function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("pointer-events-auto", "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", anchoredOverlayMotion, className), ...props }) }) }));
+function ComboboxContent({ className, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, anchor, empty, children, ...props }) {
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsxs(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", className: cn("pointer-events-auto", "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) overflow-hidden rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-[0_0_0_1px_color-mix(in_oklab,var(--input)_30%,transparent)]", anchoredOverlayMotion, className), ...props, children: [empty === null ? null : _jsx(ComboboxEmpty, { children: empty }), children] }) }) }));
 }
 function ComboboxList({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-nadicode-xxs data-empty:p-0", className), ...props }));
+    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(--spacing(52.5),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0", className), ...props }));
 }
 function ComboboxItem({ className, children, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-2 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-3 rounded-sm px-2 py-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [React.Children.map(children, (child) => React.isValidElement(child) ? (child) : (_jsx("span", { className: "min-w-0 truncate text-left", children: child }))), _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none ml-auto flex shrink-0 items-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none size-3.5" }) })] }));
 }
 function ComboboxGroup({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
@@ -55,21 +104,24 @@ function ComboboxCollection({ ...props }) {
     return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
 }
 function ComboboxEmpty({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden min-h-12 w-full items-center justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
+}
+function ComboboxLoading({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Status, { "data-slot": "combobox-loading", className: cn("px-2 py-2 text-center text-sm text-muted-foreground empty:p-0", className), ...props }));
 }
 function ComboboxSeparator({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 }
 function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-touch-target flex-wrap items-center gap-1 rounded-sm border border-input bg-background bg-clip-padding px-control-padding-inline py-1 text-sm transition-colors focus-within:nc-focus-outline focus-within:outline-ring has-aria-invalid:border-destructive has-aria-invalid:nc-focus-outline has-aria-invalid:outline-destructive has-data-[slot=combobox-chip]:px-1 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-touch-target flex-wrap items-center gap-1 rounded-sm bg-background bg-clip-padding px-control-padding-inline py-1 text-sm has-data-[slot=combobox-chip]:px-1 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height", fieldRing, fieldWithinStates, className), ...props }));
 }
-function ComboboxChip({ className, children, showRemove = true, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
+function ComboboxChip({ className, children, showRemove = true, removeLabel, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:text-muted-foreground has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && removeLabel !== undefined && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": removeLabel }), className: "-ml-1 text-muted-foreground hover:text-foreground", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
 }
 function ComboboxChipsInput({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", "data-field-frame": "", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
 }
 function useComboboxAnchor() {
     return React.useRef(null);
 }
-export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxLoading, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };

package/dist/components/command.d.ts

@@ -1,36 +1,49 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Dialog } from "./dialog.js";
-declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+import { type KbdProps } from "./kbd.js";
+type ResultCount = {
+    /** The sentence a screen reader hears as the list narrows, from the catalogue: "3 results". */
+    resultCount: (count: number) => string;
+};
+declare function Command({ className, children, resultCount, ...props }: React.ComponentProps<typeof CommandPrimitive> & ResultCount): React.JSX.Element;
 /**
  * Find anything across the product and go there.
  *
  * @family Navigation
- * @when Finding anything across the product and going there: an Agent, a customer, a page, a
- * creation command. Opened by ⌘K or the sidebar's Find.
- * @instead One record's commands are its `ActionMenu`. Search inside one collection is
- * `CollectionSearch`. Choosing the page's scope is `ScopeSwitcher`.
- * @behaviour Opens instantly, a third of the way down, on glass at 12 px corners. Arrows move the
- * highlight, Enter goes, Esc closes and returns focus to the trigger. An empty query shows useful
- * defaults; no match says so.
- * @words Groups are plural nouns (*Agents*, *Go to*). Items are names, or verb and noun for a
- * command (*New Agent*). No match quotes the query.
- * @access A dialog with a screen-reader title and description; the field is a combobox over a
- * listbox; the highlighted item is `aria-selected`.
+ * @when "Use CommandMenu for a global, keyboard-first command palette that finds resources and runs actions across the app." (https://vercel.com/geist/command-menu) Ours: finding anything across the product and going there: an Agent, a customer, a page, a creation page (*New Agent*). Opened by ⌘K or the sidebar's Find. It goes to places and never runs a command.
+ * @instead "For a menu opened from a visible trigger on a single resource, use `Menu`; for right-click on a row, use `ContextMenu`." (https://vercel.com/geist/command-menu) "Group items into pages (`Projects`, `Team Settings`) when a single flat list would exceed roughly 30 items or span multiple resource types." (https://vercel.com/geist/command-menu) Ours: those are `DropdownMenu` and `ContextMenu`. One record's commands are its `ActionMenu`. Search inside one collection is `CollectionSearch`. Choosing the page's scope is `ScopeSwitcher`. `CommandDialog` has no pages: its list is groups.
+ * @behaviour "Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group's heading is a muted 36 px row, a divider bleeds across the list. A row's shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.
+ * @words "`<CommandMenu.Item>` children are Title Case verb phrases (`Deploy Project`, `Invite Team Member`). Avoid navigation phrasing like `Go to project page`; CommandMenu commands act, not browse." (https://vercel.com/geist/command-menu) "`CommandMenuPage.label` is Title Case and names the scope (`Projects`, `Team Settings`)." (https://vercel.com/geist/command-menu) "`CommandMenuPage.placeholder` is sentence case, action-oriented, and ends with `…` (`Search projects…`, `Type a command or search…`). Bare `Search…` is wrong because it doesn’t name the scope." (https://vercel.com/geist/command-menu) "`<CommandMenu.Group heading>` is Title Case, 1–2 words (`Actions`, `Recent`)." (https://vercel.com/geist/command-menu) Ours: groups are plural nouns in sentence case (*Agents*, *Go to*), one or two words. Items are names, or verb and noun for a creation page (*New Agent*), because the dialog goes to places. The placeholder names what is searched, never a bare "Search". No match quotes the query.
+ * @access "Use `aria-live="polite"` on the result count so screen readers hear how the list narrows as the user types." (https://vercel.com/geist/command-menu) "Up/Down arrows move highlight, Enter activates, Escape closes. Backspace at an empty input pops the page stack." (https://vercel.com/geist/command-menu) "Display each item’s `keybind` as a `Kbd` slot so the shortcut is discoverable to sighted users and announced as a label to screen readers." (https://vercel.com/geist/command-menu) Ours: a dialog with a screen-reader `title` and `description`, both required; the *Esc* key is a button named by `closeLabel`, which is required; the field is a combobox over a listbox; the highlighted item is `aria-selected`. A polite live region reads `resultCount` as the list narrows, and it is required. `CommandInput` requires its `placeholder`, `CommandGroup` its `heading` and `CommandItem` its `onSelect`, so no field, group or row is left unnamed or inert; a row with no group stands outside a `CommandGroup`. A shortcut is a `CommandShortcut`, drawn as `kbd` elements. With no pages there is no stack for Backspace to pop.
  */
-declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
-    title?: string;
-    description?: string;
+declare function CommandDialog({ title, description, children, className, closeLabel, resultCount, filter, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & ResultCount & {
+    title: string;
+    description: string;
+    /** The *Esc* key's name, from the catalogue: "Close". */
+    closeLabel: string;
+    /** How a row matches the typed words, where the product matches on more than the row's text. */
+    filter?: React.ComponentProps<typeof CommandPrimitive>["filter"];
     className?: string;
-    showCloseButton?: boolean;
     children: React.ReactNode;
 }): React.JSX.Element;
-declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandInput({ className, ...props }: Omit<React.ComponentProps<typeof CommandPrimitive.Input>, "placeholder"> & {
+    /** Names what is searched, never a bare "Search": "Find an Agent, a customer or a page". */
+    placeholder: string;
+}): React.JSX.Element;
 declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
 declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
-declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: Omit<React.ComponentProps<typeof CommandPrimitive.Group>, "heading"> & {
+    /** The group's name, a muted 36 px row above its items. Items with no group stand outside a `CommandGroup`. */
+    heading: React.ReactNode;
+}): React.JSX.Element;
 declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
-declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
-declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+declare function CommandItem({ className, children, ...props }: Omit<React.ComponentProps<typeof CommandPrimitive.Item>, "onSelect"> & {
+    /** What choosing the row does: Enter and a click both run it. */
+    onSelect: NonNullable<React.ComponentProps<typeof CommandPrimitive.Item>["onSelect"]>;
+}): React.JSX.Element;
+type CommandShortcutProps = KbdProps extends infer P ? P extends unknown ? Omit<P, "size"> : never : never;
+declare function CommandShortcut({ className, ...props }: CommandShortcutProps): React.JSX.Element;
+declare function CommandSuffix({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSuffix, CommandSeparator, };
 //# sourceMappingURL=command.d.ts.map

package/dist/components/command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EACL,MAAM,EAKP,MAAM,qBAAqB,CAAC;AAI7B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAWtF;AAED;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAoBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAkBrD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAW/F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,qBAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAcpD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW7E;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"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"}

package/dist/components/command.js

@@ -1,51 +1,59 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
 import { cn } from "../lib/utils.js";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./dialog.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./dialog.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
+import { Kbd } from "./kbd.js";
 import { SearchIcon, CheckIcon } from "lucide-react";
-function Command({ className, ...props }) {
-    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-lg! nc-glass p-nadicode-xxs text-popover-foreground", className), ...props }));
+const CommandDialogCloseLabel = React.createContext(null);
+function CommandResultCount({ resultCount }) {
+    const count = useCommandState((state) => state.filtered.count);
+    return (_jsx("div", { "aria-live": "polite", className: "sr-only", "data-slot": "command-result-count", role: "status", children: resultCount(count) }));
+}
+function Command({ className, children, resultCount, ...props }) {
+    return (_jsxs(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-lg! nc-glass text-popover-foreground", className), ...props, children: [children, _jsx(CommandResultCount, { resultCount: resultCount })] }));
 }
 /**
  * Find anything across the product and go there.
  *
  * @family Navigation
- * @when Finding anything across the product and going there: an Agent, a customer, a page, a
- * creation command. Opened by ⌘K or the sidebar's Find.
- * @instead One record's commands are its `ActionMenu`. Search inside one collection is
- * `CollectionSearch`. Choosing the page's scope is `ScopeSwitcher`.
- * @behaviour Opens instantly, a third of the way down, on glass at 12 px corners. Arrows move the
- * highlight, Enter goes, Esc closes and returns focus to the trigger. An empty query shows useful
- * defaults; no match says so.
- * @words Groups are plural nouns (*Agents*, *Go to*). Items are names, or verb and noun for a
- * command (*New Agent*). No match quotes the query.
- * @access A dialog with a screen-reader title and description; the field is a combobox over a
- * listbox; the highlighted item is `aria-selected`.
+ * @when "Use CommandMenu for a global, keyboard-first command palette that finds resources and runs actions across the app." (https://vercel.com/geist/command-menu) Ours: finding anything across the product and going there: an Agent, a customer, a page, a creation page (*New Agent*). Opened by ⌘K or the sidebar's Find. It goes to places and never runs a command.
+ * @instead "For a menu opened from a visible trigger on a single resource, use `Menu`; for right-click on a row, use `ContextMenu`." (https://vercel.com/geist/command-menu) "Group items into pages (`Projects`, `Team Settings`) when a single flat list would exceed roughly 30 items or span multiple resource types." (https://vercel.com/geist/command-menu) Ours: those are `DropdownMenu` and `ContextMenu`. One record's commands are its `ActionMenu`. Search inside one collection is `CollectionSearch`. Choosing the page's scope is `ScopeSwitcher`. `CommandDialog` has no pages: its list is groups.
+ * @behaviour "Bind `⌘K` on macOS and `Ctrl+K` elsewhere. Don’t reuse the binding for any in-page filter input; it’s a global shortcut." (https://vercel.com/geist/command-menu) "Open into the root page; preserve the search query when navigating back from a sub-page so the user’s typing isn’t lost." (https://vercel.com/geist/command-menu) "Trap focus inside the overlay while it’s open and return focus to the previously active element on close." (https://vercel.com/geist/command-menu) "Show a recent or default item set when the input is empty so the menu is useful before typing." (https://vercel.com/geist/command-menu) Ours: opens instantly, 640 px wide and 15% down the window; on a phone it is a bottom sheet, 640 px high with 8 px top corners and the list filling it. The input row stands above the list with a line under it, the field in large type with no icon and an *Esc* key at its end that closes the dialog and is the next stop after the field on Tab; the list scrolls past 436 px. The first row is highlighted on open. No match says so. Every row is 36 px with the pointer cursor, a group's heading is a muted 36 px row, a divider bleeds across the list. A row's shortcut is a `CommandShortcut` and a word or icon at its end is a `CommandSuffix`. Colour carries nothing: the highlighted row is a faint neutral wash with its text unchanged, group headings, suffixes and the empty line are muted, and no row, key or divider takes a hue.
+ * @words "`<CommandMenu.Item>` children are Title Case verb phrases (`Deploy Project`, `Invite Team Member`). Avoid navigation phrasing like `Go to project page`; CommandMenu commands act, not browse." (https://vercel.com/geist/command-menu) "`CommandMenuPage.label` is Title Case and names the scope (`Projects`, `Team Settings`)." (https://vercel.com/geist/command-menu) "`CommandMenuPage.placeholder` is sentence case, action-oriented, and ends with `…` (`Search projects…`, `Type a command or search…`). Bare `Search…` is wrong because it doesn’t name the scope." (https://vercel.com/geist/command-menu) "`<CommandMenu.Group heading>` is Title Case, 1–2 words (`Actions`, `Recent`)." (https://vercel.com/geist/command-menu) Ours: groups are plural nouns in sentence case (*Agents*, *Go to*), one or two words. Items are names, or verb and noun for a creation page (*New Agent*), because the dialog goes to places. The placeholder names what is searched, never a bare "Search". No match quotes the query.
+ * @access "Use `aria-live="polite"` on the result count so screen readers hear how the list narrows as the user types." (https://vercel.com/geist/command-menu) "Up/Down arrows move highlight, Enter activates, Escape closes. Backspace at an empty input pops the page stack." (https://vercel.com/geist/command-menu) "Display each item’s `keybind` as a `Kbd` slot so the shortcut is discoverable to sighted users and announced as a label to screen readers." (https://vercel.com/geist/command-menu) Ours: a dialog with a screen-reader `title` and `description`, both required; the *Esc* key is a button named by `closeLabel`, which is required; the field is a combobox over a listbox; the highlighted item is `aria-selected`. A polite live region reads `resultCount` as the list narrows, and it is required. `CommandInput` requires its `placeholder`, `CommandGroup` its `heading` and `CommandItem` its `onSelect`, so no field, group or row is left unnamed or inert; a row with no group stands outside a `CommandGroup`. A shortcut is a `CommandShortcut`, drawn as `kbd` elements. With no pages there is no stack for Backspace to pop.
  */
-function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
-    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-lg! bg-transparent p-0!", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
+function CommandDialog({ title, description, children, className, closeLabel, resultCount, filter, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-[15%] translate-y-0 overflow-hidden bg-transparent p-0! max-sm:h-160 max-sm:rounded-t-md sm:max-w-160", className), motion: "instant", showCloseButton: false, children: _jsx(CommandDialogCloseLabel.Provider, { value: closeLabel, children: _jsx(Command, { className: "max-sm:rounded-t-md! max-sm:rounded-b-none! **:data-[slot=command-list]:max-h-109 max-sm:**:data-[slot=command-list]:max-h-none max-sm:**:data-[slot=command-list]:flex-1", filter: filter, label: title, resultCount: resultCount, children: children }) }) })] }));
 }
 function CommandInput({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-sm! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+    const closeLabel = React.useContext(CommandDialogCloseLabel);
+    if (closeLabel !== null) {
+        return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex items-center gap-3 border-b border-border px-4 py-3", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("h-7 min-w-0 flex-1 bg-transparent text-body-lg outline-hidden placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(DialogClose, { "aria-label": closeLabel, className: "shrink-0 rounded-xs-plus", children: _jsx(Kbd, { className: "bg-transparent", size: "sm", children: "Esc" }) })] }));
+    }
+    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-2 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-sm! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("size-full min-w-0 bg-transparent px-2 text-sm outline-hidden placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
 }
 function CommandList({ className, ...props }) {
-    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className), ...props }));
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-2 overflow-x-hidden overflow-y-auto p-2 outline-none", className), ...props }));
 }
 function CommandEmpty({ className, ...props }) {
-    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn("py-6 text-center text-sm", className), ...props }));
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn("py-7.5 text-center text-sm text-muted-foreground", className), ...props }));
 }
 function CommandGroup({ className, ...props }) {
-    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className), ...props }));
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn("overflow-hidden text-foreground **:[[cmdk-group-heading]]:flex **:[[cmdk-group-heading]]:h-9 **:[[cmdk-group-heading]]:items-center **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-label-sm **:[[cmdk-group-heading]]:font-normal **:[[cmdk-group-heading]]:text-muted-foreground", className), ...props }));
 }
 function CommandSeparator({ className, ...props }) {
-    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("-mx-1 h-px bg-border", className), ...props }));
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("-mx-2 my-2 h-px bg-border", className), ...props }));
 }
 function CommandItem({ className, children, ...props }) {
-    return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex min-h-touch-target cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[selected=true]:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
+    return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex min-h-touch-target cursor-pointer items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-default data-[disabled=true]:text-muted-foreground data-[selected=true]:bg-accent data-[selected=true]:text-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[selected=true]:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-has-data-[slot=command-suffix]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
 }
 function CommandShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className), ...props }));
+    return (_jsx(Kbd, { "data-slot": "command-shortcut", ...props, className: cn("ml-auto", className), size: "sm" }));
+}
+function CommandSuffix({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-suffix", className: cn("ml-auto flex items-center gap-1 text-sm text-muted-foreground", className), ...props }));
 }
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSuffix, CommandSeparator, };