@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/collapsible.d.ts

@@ -1,18 +1,35 @@
+import type * as React from "react";
 import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
 /**
  * Content that a trigger shows and hides.
  *
  * @family Other
- * @when Building a disclosure the complete owners do not cover: nested files in a sidebar, a group
- * of rows.
- * @instead Supporting detail on a page is `Disclosure`; sections are `Accordion`; a long block is
- * `ExpandableBlock`.
- * @behaviour The trigger toggles the content; closed content is not rendered for the reader.
- * @words The trigger names what is inside.
- * @access The trigger exposes `aria-expanded` and controls its content.
+ * @when “Use Collapse for optional, advanced, or repetitive content that most users skip on most visits (FAQ, advanced settings, request payload preview).” (https://vercel.com/geist/collapse)
+ * “For top-level structure that every user reads, use page sections with regular headings; collapsing primary content hides what the page is about.” (https://vercel.com/geist/collapse)
+ * Ours: Geist's `Collapse` is `Collapsible`. It is for a disclosure the complete owners do not cover:
+ * nested files in a sidebar, a group of rows.
+ * @instead “Single Collapse for one optional block. `CollapseGroup` for a related set; switch to `Tabs` when the items are sibling views, not optional drill-downs.” (https://vercel.com/geist/collapse)
+ * Ours: `CollapseGroup` is `Accordion`. Supporting detail on a page is `Disclosure`.
+ * @behaviour “Default state is closed unless the first-time visitor must read the content to act.” (https://vercel.com/geist/collapse)
+ * “Animate the open/close transition; jump-cuts make the page feel like it teleported.” (https://vercel.com/geist/collapse)
+ * “Don’t nest Collapse more than one level deep. Two-level nesting hides too much and breaks the keyboard tab path.” (https://vercel.com/geist/collapse)
+ * Ours: the trigger toggles the content and has no chrome of its own: the caller draws it, neutral.
+ * The content animates its height, and under reduced motion it jumps.
+ * @words “Heading is Title Case and names the topic, not the action (`Advanced Settings`, not `Show Advanced Settings`).” (https://vercel.com/geist/collapse)
+ * “Body is sentence case prose with normal section formatting; treat the panel as a small page, not a tooltip.” (https://vercel.com/geist/collapse)
+ * “Don’t put primary destructive actions inside a closed Collapse; the user has to click twice to reach the warning.” (https://vercel.com/geist/collapse)
+ * Ours: the heading is sentence case, not Title Case (*Advanced settings*). The trigger is required
+ * and names what is inside, as a noun.
+ * @access “The trigger is a `<button>` with `aria-expanded` that flips on toggle and `aria-controls` pointing at the panel id.” (https://vercel.com/geist/collapse)
+ * “Enter and Space toggle. Don’t bind any other key globally; arrow keys move focus inside the panel content.” (https://vercel.com/geist/collapse)
+ * “Render the panel content in the DOM when closed (with `hidden` or visibility) so search and find-in-page still hit it; lazy-render only for expensive content.” (https://vercel.com/geist/collapse)
+ * Ours: closed content is not rendered by default; pass `hiddenUntilFound` on cheap content so
+ * find-in-page reaches and opens it.
  */
-declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react").JSX.Element;
-declare function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props): import("react").JSX.Element;
-declare function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props): import("react").JSX.Element;
+declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): React.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: Omit<CollapsiblePrimitive.Trigger.Props, "children"> & {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CollapsibleContent({ className, ...props }: CollapsiblePrimitive.Panel.Props): React.JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
 //# sourceMappingURL=collapsible.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEjF;;;;;;;;;;;GAWG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,+BAEjE;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,+BAE3E;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,+BAEzE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAIjF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,qBAEjE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEtF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,qBAWpF;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/collapsible.js

@@ -1,16 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import { cn } from "../lib/utils.js";
 /**
  * Content that a trigger shows and hides.
  *
  * @family Other
- * @when Building a disclosure the complete owners do not cover: nested files in a sidebar, a group
- * of rows.
- * @instead Supporting detail on a page is `Disclosure`; sections are `Accordion`; a long block is
- * `ExpandableBlock`.
- * @behaviour The trigger toggles the content; closed content is not rendered for the reader.
- * @words The trigger names what is inside.
- * @access The trigger exposes `aria-expanded` and controls its content.
+ * @when “Use Collapse for optional, advanced, or repetitive content that most users skip on most visits (FAQ, advanced settings, request payload preview).” (https://vercel.com/geist/collapse)
+ * “For top-level structure that every user reads, use page sections with regular headings; collapsing primary content hides what the page is about.” (https://vercel.com/geist/collapse)
+ * Ours: Geist's `Collapse` is `Collapsible`. It is for a disclosure the complete owners do not cover:
+ * nested files in a sidebar, a group of rows.
+ * @instead “Single Collapse for one optional block. `CollapseGroup` for a related set; switch to `Tabs` when the items are sibling views, not optional drill-downs.” (https://vercel.com/geist/collapse)
+ * Ours: `CollapseGroup` is `Accordion`. Supporting detail on a page is `Disclosure`.
+ * @behaviour “Default state is closed unless the first-time visitor must read the content to act.” (https://vercel.com/geist/collapse)
+ * “Animate the open/close transition; jump-cuts make the page feel like it teleported.” (https://vercel.com/geist/collapse)
+ * “Don’t nest Collapse more than one level deep. Two-level nesting hides too much and breaks the keyboard tab path.” (https://vercel.com/geist/collapse)
+ * Ours: the trigger toggles the content and has no chrome of its own: the caller draws it, neutral.
+ * The content animates its height, and under reduced motion it jumps.
+ * @words “Heading is Title Case and names the topic, not the action (`Advanced Settings`, not `Show Advanced Settings`).” (https://vercel.com/geist/collapse)
+ * “Body is sentence case prose with normal section formatting; treat the panel as a small page, not a tooltip.” (https://vercel.com/geist/collapse)
+ * “Don’t put primary destructive actions inside a closed Collapse; the user has to click twice to reach the warning.” (https://vercel.com/geist/collapse)
+ * Ours: the heading is sentence case, not Title Case (*Advanced settings*). The trigger is required
+ * and names what is inside, as a noun.
+ * @access “The trigger is a `<button>` with `aria-expanded` that flips on toggle and `aria-controls` pointing at the panel id.” (https://vercel.com/geist/collapse)
+ * “Enter and Space toggle. Don’t bind any other key globally; arrow keys move focus inside the panel content.” (https://vercel.com/geist/collapse)
+ * “Render the panel content in the DOM when closed (with `hidden` or visibility) so search and find-in-page still hit it; lazy-render only for expensive content.” (https://vercel.com/geist/collapse)
+ * Ours: closed content is not rendered by default; pass `hiddenUntilFound` on cheap content so
+ * find-in-page reaches and opens it.
  */
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
@@ -18,7 +33,7 @@ function Collapsible({ ...props }) {
 function CollapsibleTrigger({ ...props }) {
     return _jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props });
 }
-function CollapsibleContent({ ...props }) {
-    return _jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props });
+function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", className: cn("h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none", className), ...props }));
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/collection-filters.d.ts

@@ -23,6 +23,8 @@ export type CollectionFilterCopy = {
     searchFields: string;
     searchValues: string;
     empty: string;
+    /** The sentence a screen reader hears as the list narrows, from the catalogue: "3 results". */
+    results: (count: number) => string;
     back: string;
     remove: string;
 };
@@ -38,7 +40,7 @@ export type CollectionFiltersProps = {
  * @family Compositions
  * @when A collection or a feed a person narrows by a property its records share: a status, an owner, a kind. It stands in the toolbar after the search and before the sort.
  * @instead Finding one record by its name is the search. Changing the order is the sort. Switching between sibling collections is the page's tabs.
- * @behaviour Add filter opens a picker of the facets, then of a facet's values, each searchable; Backspace in an empty search goes back to the facets. A facet in force is a chip that reopens its values, with a button that removes it. A suggested value waits as a dashed chip while its facet is unset and applies in one click. Focus returns to Add filter when a facet is removed. The product keeps each facet's value, in the URL where it has one.
+ * @behaviour Add filter opens a picker of the facets, then of a facet's values, each searchable; Backspace in an empty search goes back to the facets. A facet in force is a chip that reopens its values, with a button that removes it. A suggested value waits as a dashed chip in the muted grey, led by a + and never by the value's own mark, so it never reads as a filter in force, while its facet is unset, and applies in one click. Focus returns to Add filter when a facet is removed. The product keeps each facet's value, in the URL where it has one.
  * @words Every string is the product's: `copy` names Add filter, the two searches, the empty result, Back and Remove; each facet names itself, its values and its "All" choice.
  * @access Each chip is a group named by its facet; its remove button reads Remove with the facet's name. The pickers are searchable lists named by what they search.
  */

package/dist/components/collection-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-filters.d.ts","sourceRoot":"","sources":["../../src/components/collection-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAoHF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,sBAAsB,4BAuFzE"}
+{"version":3,"file":"collection-filters.d.ts","sourceRoot":"","sources":["../../src/components/collection-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAyHF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,sBAAsB,4BAmFzE"}

package/dist/components/collection-filters.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { ArrowLeft, ListFilter, X } from "lucide-react";
+import { ArrowLeft, ListFilter, Plus, X } from "lucide-react";
 import { Button } from "./button.js";
 import { ButtonGroup } from "./button-group.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
@@ -31,7 +31,7 @@ function FilterPicker({ facets, copy, initialField, returnFocus, children, }) {
             setOpen(next);
             if (next)
                 changeField(initialField);
-        }, children: [_jsx(PopoverTrigger, { render: children }), _jsxs(PopoverContent, { align: "start", initialFocus: input, children: [_jsx(PopoverTitle, { className: "sr-only", children: facet?.label ?? copy.add }), facet ? (_jsxs(Button, { variant: "ghost", className: "justify-start", onClick: () => changeField(undefined), children: [_jsx(ArrowLeft, { "data-icon": "inline-start" }), copy.back] })) : null, _jsxs(Command, { label: facet ? `${copy.searchValues}: ${facet.label}` : copy.searchFields, onKeyDown: (event) => {
+        }, children: [_jsx(PopoverTrigger, { render: children }), _jsxs(PopoverContent, { align: "start", initialFocus: input, children: [_jsx(PopoverTitle, { className: "sr-only", children: facet?.label ?? copy.add }), facet ? (_jsx(Button, { variant: "ghost", className: "justify-start", prefix: _jsx(ArrowLeft, {}), onClick: () => changeField(undefined), children: copy.back })) : null, _jsxs(Command, { label: facet ? `${copy.searchValues}: ${facet.label}` : copy.searchFields, resultCount: copy.results, onKeyDown: (event) => {
                             if (event.key === "Backspace" && !search && facet) {
                                 event.preventDefault();
                                 changeField(undefined);
@@ -46,7 +46,7 @@ function FilterPicker({ facets, copy, initialField, returnFocus, children, }) {
  * @family Compositions
  * @when A collection or a feed a person narrows by a property its records share: a status, an owner, a kind. It stands in the toolbar after the search and before the sort.
  * @instead Finding one record by its name is the search. Changing the order is the sort. Switching between sibling collections is the page's tabs.
- * @behaviour Add filter opens a picker of the facets, then of a facet's values, each searchable; Backspace in an empty search goes back to the facets. A facet in force is a chip that reopens its values, with a button that removes it. A suggested value waits as a dashed chip while its facet is unset and applies in one click. Focus returns to Add filter when a facet is removed. The product keeps each facet's value, in the URL where it has one.
+ * @behaviour Add filter opens a picker of the facets, then of a facet's values, each searchable; Backspace in an empty search goes back to the facets. A facet in force is a chip that reopens its values, with a button that removes it. A suggested value waits as a dashed chip in the muted grey, led by a + and never by the value's own mark, so it never reads as a filter in force, while its facet is unset, and applies in one click. Focus returns to Add filter when a facet is removed. The product keeps each facet's value, in the URL where it has one.
  * @words Every string is the product's: `copy` names Add filter, the two searches, the empty result, Back and Remove; each facet names itself, its values and its "All" choice.
  * @access Each chip is a group named by its facet; its remove button reads Remove with the facet's name. The pickers are searchable lists named by what they search.
  */
@@ -54,11 +54,11 @@ export function CollectionFilters({ facets, copy }) {
     const addTrigger = React.useRef(null);
     if (!facets.length)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(FilterPicker, { facets: facets, copy: copy, children: _jsxs(Button, { ref: addTrigger, variant: "outline", children: [_jsx(ListFilter, { "data-icon": "inline-start" }), copy.add] }) }), facets
+    return (_jsxs(_Fragment, { children: [_jsx(FilterPicker, { facets: facets, copy: copy, children: _jsx(Button, { ref: addTrigger, variant: "outline", prefix: _jsx(ListFilter, {}), children: copy.add }) }), facets
                 .filter((facet) => facet.value)
                 .map((facet) => {
                 const selected = facet.options.find((option) => option.value === facet.value);
-                return (_jsxs(ButtonGroup, { "aria-label": facet.label, className: "min-w-0 max-w-full", children: [_jsx(FilterPicker, { facets: facets, copy: copy, initialField: facet.label, returnFocus: addTrigger, children: _jsxs(Button, { variant: "outline", className: "max-w-64", children: [facet.selectedIcon ?? selected?.icon, _jsxs("span", { className: "truncate", children: [facet.label, ":", " ", _jsx("span", { className: selected?.mono ? "font-label-mono text-label-mono" : undefined, children: selected?.label ?? facet.value })] })] }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": `${copy.remove}: ${facet.label}`, onClick: () => {
+                return (_jsxs(ButtonGroup, { "aria-label": facet.label, className: "min-w-0 max-w-full", children: [_jsx(FilterPicker, { facets: facets, copy: copy, initialField: facet.label, returnFocus: addTrigger, children: _jsx(Button, { variant: "outline", className: "max-w-80", prefix: facet.selectedIcon ?? selected?.icon, children: _jsxs("span", { className: "truncate", children: [facet.label, ":", " ", _jsx("span", { className: selected?.mono ? "font-label-mono text-label-mono" : undefined, children: selected?.label ?? facet.value })] }) }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": `${copy.remove}: ${facet.label}`, onClick: () => {
                                 facet.onValueChange("");
                                 addTrigger.current?.focus();
                             }, children: _jsx(X, { "aria-hidden": "true" }) })] }, facet.label));
@@ -68,12 +68,10 @@ export function CollectionFilters({ facets, copy }) {
                 const option = facet.options.find((item) => item.value === value);
                 return option
                     ? [
-                        _jsxs(Button, { variant: "outline", "data-slot": "collection-filter-suggestion", "aria-label": `${copy.add}: ${facet.label} ${option.label}`, className: "max-w-64 border-dashed text-muted-foreground", onClick: () => {
+                        _jsxs(Button, { variant: "outline", "data-slot": "collection-filter-suggestion", className: "max-w-80 border-dashed text-muted-foreground", prefix: _jsx(Plus, { "aria-hidden": "true" }), onClick: () => {
                                 facet.onValueChange(value);
                                 addTrigger.current?.focus();
-                            }, children: [option.icon, _jsxs("span", { className: "truncate", children: [facet.label, " ", _jsx("span", { className: option.mono
-                                                ? "text-foreground font-label-mono text-label-mono"
-                                                : "font-medium text-foreground", children: option.label })] })] }, `${facet.label}:${value}`),
+                            }, children: [_jsxs("span", { className: "sr-only", children: [copy.add, ":"] }), " ", _jsxs("span", { className: "truncate", children: [facet.label, " ", _jsx("span", { className: option.mono ? "font-label-mono text-label-mono" : undefined, children: option.label })] })] }, `${facet.label}:${value}`),
                     ]
                     : [];
             }))] }));

package/dist/components/collection-page.d.ts

@@ -1,16 +1,25 @@
 import type { RowData } from "@tanstack/react-table";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { type CollectionFiltersProps } from "./collection-filters.js";
 import { type CollectionSearchProps } from "./collection-search.js";
 import { type CollectionSortProps } from "./collection-sort.js";
 import type { EmptyStateKind } from "./empty-state.js";
 import { type PageActionsProps } from "./page-actions.js";
-import { type RecordListProps } from "./record-list.js";
+import { type RecordListWithout } from "./record-list.js";
+import { type CollectionRail } from "../internal/collection-rail.js";
 export type { RowMessage } from "./record-list.js";
-export type CollectionPageProps<TRecord extends RowData> = Omit<RecordListProps<TRecord>, "heading" | "noMatch"> & {
+export type { CollectionRail, CollectionRailItem, CollectionRailLinkProps, CollectionRailSection, } from "../internal/collection-rail.js";
+type CollectionTitle = {
     /** The page's title, when the product's chrome does not draw it. */
-    title?: string;
-    /** The title row: secondary, primary, then the three dots. A `primary` equal to `empty.action` shows only once there are records. */
+    title: string;
+    /** One muted line under the title, for a collection whose kind needs explaining. */
+    description?: ReactNode;
+} | {
+    title?: undefined;
+    description?: never;
+};
+export type CollectionPageProps<TRecord extends RowData> = RecordListWithout<TRecord, "heading" | "noMatch" | "layout"> & CollectionTitle & {
+    /** The title row: secondary, primary, then the three dots. The primary stays here whether the collection is empty or not. */
     actions?: Omit<PageActionsProps, "period">;
     /** The page's sibling collections, under the title row: `TabsNav variant="line"`. */
     tabs?: ReactElement;
@@ -23,17 +32,29 @@ export type CollectionPageProps<TRecord extends RowData> = Omit<RecordListProps<
     noMatch?: Omit<EmptyStateKind<"noResults">, "kind">;
     /** The records of a new search, filter or sort are being read; the rows shown are the last ones. */
     pending?: boolean;
+    /**
+     * The left column of titled cards about the records, as Vercel's Projects page stands Usage,
+     * Alerts and Recent Previews beside its projects: what needs the reader, figures of the whole
+     * collection, recent records.
+     */
+    rail?: CollectionRail;
 };
 /**
  * A page whose job is a list of records: its title with the page's actions on
  * one row, its sibling collections, one toolbar, then one line per record.
  *
  * @family Compositions
- * @when A list of records a person finds one of and acts on: Customers, Agents, Skills, Apps, MCP servers, Mailboxes.
- * @instead Figures compared across records are a DataTable with headings; a list inside another page's section is a RecordList with its heading.
- * @behaviour Nothing sits under the title. The title row holds at most one secondary, the primary, then the three dots, which open only for two commands or more. A primary that is also the first use's action waits until there are records; while a different primary stays, the first use's action is an outline button. One toolbar holds the search, which grows, then the filters, then the sort; it shows while there are records or a search or filter is set, and is glass only where the rows scroll under it. While a new search, filter or sort is read, the toolbar is busy and, after a second, shows the one waiting line, while the last rows stay. The rows, their states and their loading are the RecordList's; no match is offered only while a search or filter is set.
- * @words Every string is the product's. The title names the collection in the plural ("Agents"); the search says what it finds ("Find a skill"); no match says what found nothing and offers to clear it ("Clear search", "Clear filters").
- * @access The title is the page's h1 when the composition draws it. The toolbar is named by `label` and busy while `pending`; the rows are the RecordList's table, named by `label`.
+ * @when “Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity)
+ * Ours: a list of entity rows a person finds one of, opens and acts on: Customers, Agents, Skills, Apps, MCP servers, Mailboxes, domains, environment variables (a row with an `editor` expands into its form). Its rows are a `RecordList`'s, so a row has a mark, a name over a muted line and at most three facts; anything wider is not this page.
+ * “Projects”: Vercel's Projects page stands a column of titled cards (Usage, Alerts, Recent Previews) at the left of its list. (https://vercel.com/dashboard)
+ * Ours: a collection whose reader also needs to know what is waiting on them across all its records, such as nadicode's Customers and Partners and a Partner's Customers, takes that column as its `rail`.
+ * @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
+ * Ours: records compared across columns, read by their headings, are a `DataTable` under the page's own title and toolbar. A list inside another page's section is a `RecordList` with its `heading`.
+ * @behaviour With a `rail`, the toolbar spans the page and under it stand two columns from 1280 px: the rail, 300 px, then the records' card, its top level with the rail's first title and named by the page's title alone, never a second heading, and the records' rows are `RecordList`'s `line` rows; below 1280 px the records come first and the rail follows them. Each rail card has its title above it at 16 px, an optional 44 px muted summary row with its one outline button at its end (a button never stands in a row of its own, so a card with an `action` has a `summary`), then its items: a figure is one 36 px row, its title and its number at the trailing edge; a record is its 24 px mark, a title over a muted line that wraps to a second before it is cut, and a figure or a status at its end, the whole item opening its record; a card with no items draws its `empty` inside it as one 44 px row like an item. While the rail's read is in flight a card's `items` are undefined and it holds its place with three placeholder lines, so the two columns stand from the first frame; a rail whose read `failed` is one card saying so, and the records beside it stay. Under the title sits only the `description`, when the collection's kind needs explaining; otherwise nothing. The title row holds at most one secondary, the primary, then the three dots, which open only for two commands or more. The primary stays in the title row whether the collection is empty or not, filled, as Vercel's Flags keeps Create Flag; a first use repeats it as the filled button in its card. One toolbar holds the search, which grows, then the filters, then the sort; it shows while there are records or a search or filter is set, and is glass only where the rows scroll under it. While a new search, filter or sort is read, the toolbar is busy and, after a second, shows the one waiting line, while the last rows stay. The rows, their states and their loading are the RecordList's; no match is offered only while a search or filter is set.
+ * @words “For multi-facet filters use the plural template `No {Items} Match Your Filters` and suggest widening or clearing.” (https://vercel.com/geist/empty-state)
+ * Ours: every string is the product's, in sentence case. The title names the collection in the plural ("Agents"); the search says what it finds ("Find a skill"); no match says what found nothing and offers to clear it ("Clear search", "Clear filters").
+ * @access “After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state)
+ * Ours: the rows' region is the RecordList's, which holds it. The title is the page's h1 when the composition draws it. The toolbar is named by `label` and busy while `pending`; the rows are the RecordList's table, named by `label`.
  */
 export declare function CollectionPage<TRecord extends RowData>(props: CollectionPageProps<TRecord>): import("react").JSX.Element;
 //# sourceMappingURL=collection-page.d.ts.map

package/dist/components/collection-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-page.d.ts","sourceRoot":"","sources":["../../src/components/collection-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACjG,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAExF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAG5E,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,MAAM,mBAAmB,CAAC,OAAO,SAAS,OAAO,IAAI,IAAI,CAC7D,eAAe,CAAC,OAAO,CAAC,EACxB,SAAS,GAAG,SAAS,CACtB,GAAG;IACF,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qIAAqI;IACrI,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAC3C,qFAAqF;IACrF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC,iDAAiD;IACjD,OAAO,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;IACpD,oGAAoG;IACpG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,+BA0C1F"}
+{"version":3,"file":"collection-page.d.ts","sourceRoot":"","sources":["../../src/components/collection-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACjG,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAExF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE9E,OAAO,EAAE,KAAK,cAAc,EAAwB,MAAM,4BAA4B,CAAC;AAEvF,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,4BAA4B,CAAC;AAEpC,KAAK,eAAe,GAChB;IACE,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,GACD;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/C,MAAM,MAAM,mBAAmB,CAAC,OAAO,SAAS,OAAO,IAAI,iBAAiB,CAC1E,OAAO,EACP,SAAS,GAAG,SAAS,GAAG,QAAQ,CACjC,GACC,eAAe,GAAG;IAChB,6HAA6H;IAC7H,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAC3C,qFAAqF;IACrF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC,iDAAiD;IACjD,OAAO,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;IACpD,oGAAoG;IACpG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,+BAyD1F"}

package/dist/components/collection-page.js

@@ -8,27 +8,28 @@ import { PageActions, PageActionsHostProvider, } from "./page-actions.js";
 import { PageHeader } from "./page-header.js";
 import { RecordList } from "./record-list.js";
 import { WaitingLine } from "./waiting-line.js";
+import { CollectionRailColumn } from "../internal/collection-rail.js";
 /**
  * A page whose job is a list of records: its title with the page's actions on
  * one row, its sibling collections, one toolbar, then one line per record.
  *
  * @family Compositions
- * @when A list of records a person finds one of and acts on: Customers, Agents, Skills, Apps, MCP servers, Mailboxes.
- * @instead Figures compared across records are a DataTable with headings; a list inside another page's section is a RecordList with its heading.
- * @behaviour Nothing sits under the title. The title row holds at most one secondary, the primary, then the three dots, which open only for two commands or more. A primary that is also the first use's action waits until there are records; while a different primary stays, the first use's action is an outline button. One toolbar holds the search, which grows, then the filters, then the sort; it shows while there are records or a search or filter is set, and is glass only where the rows scroll under it. While a new search, filter or sort is read, the toolbar is busy and, after a second, shows the one waiting line, while the last rows stay. The rows, their states and their loading are the RecordList's; no match is offered only while a search or filter is set.
- * @words Every string is the product's. The title names the collection in the plural ("Agents"); the search says what it finds ("Find a skill"); no match says what found nothing and offers to clear it ("Clear search", "Clear filters").
- * @access The title is the page's h1 when the composition draws it. The toolbar is named by `label` and busy while `pending`; the rows are the RecordList's table, named by `label`.
+ * @when “Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity)
+ * Ours: a list of entity rows a person finds one of, opens and acts on: Customers, Agents, Skills, Apps, MCP servers, Mailboxes, domains, environment variables (a row with an `editor` expands into its form). Its rows are a `RecordList`'s, so a row has a mark, a name over a muted line and at most three facts; anything wider is not this page.
+ * “Projects”: Vercel's Projects page stands a column of titled cards (Usage, Alerts, Recent Previews) at the left of its list. (https://vercel.com/dashboard)
+ * Ours: a collection whose reader also needs to know what is waiting on them across all its records, such as nadicode's Customers and Partners and a Partner's Customers, takes that column as its `rail`.
+ * @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
+ * Ours: records compared across columns, read by their headings, are a `DataTable` under the page's own title and toolbar. A list inside another page's section is a `RecordList` with its `heading`.
+ * @behaviour With a `rail`, the toolbar spans the page and under it stand two columns from 1280 px: the rail, 300 px, then the records' card, its top level with the rail's first title and named by the page's title alone, never a second heading, and the records' rows are `RecordList`'s `line` rows; below 1280 px the records come first and the rail follows them. Each rail card has its title above it at 16 px, an optional 44 px muted summary row with its one outline button at its end (a button never stands in a row of its own, so a card with an `action` has a `summary`), then its items: a figure is one 36 px row, its title and its number at the trailing edge; a record is its 24 px mark, a title over a muted line that wraps to a second before it is cut, and a figure or a status at its end, the whole item opening its record; a card with no items draws its `empty` inside it as one 44 px row like an item. While the rail's read is in flight a card's `items` are undefined and it holds its place with three placeholder lines, so the two columns stand from the first frame; a rail whose read `failed` is one card saying so, and the records beside it stay. Under the title sits only the `description`, when the collection's kind needs explaining; otherwise nothing. The title row holds at most one secondary, the primary, then the three dots, which open only for two commands or more. The primary stays in the title row whether the collection is empty or not, filled, as Vercel's Flags keeps Create Flag; a first use repeats it as the filled button in its card. One toolbar holds the search, which grows, then the filters, then the sort; it shows while there are records or a search or filter is set, and is glass only where the rows scroll under it. While a new search, filter or sort is read, the toolbar is busy and, after a second, shows the one waiting line, while the last rows stay. The rows, their states and their loading are the RecordList's; no match is offered only while a search or filter is set.
+ * @words “For multi-facet filters use the plural template `No {Items} Match Your Filters` and suggest widening or clearing.” (https://vercel.com/geist/empty-state)
+ * Ours: every string is the product's, in sentence case. The title names the collection in the plural ("Agents"); the search says what it finds ("Find a skill"); no match says what found nothing and offers to clear it ("Clear search", "Clear filters").
+ * @access “After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state)
+ * Ours: the rows' region is the RecordList's, which holds it. The title is the page's h1 when the composition draws it. The toolbar is named by `label` and busy while `pending`; the rows are the RecordList's table, named by `label`.
  */
 export function CollectionPage(props) {
-    const { title, actions, tabs, search, filters, sort, toolbarSurface, noMatch, pending, ...list } = props;
+    const { title, description, actions, tabs, search, filters, sort, toolbarSurface, noMatch, pending, rail, ...list } = props;
     const hasRecords = list.records !== undefined && list.records.length > 0;
     const narrowed = Boolean(search?.value) || (filters?.facets.some((facet) => facet.value) ?? false);
-    const { primary, ...withoutPrimary } = actions ?? {};
-    const addsFirst = primary !== undefined && list.empty?.kind === "firstUse" && list.empty.action === primary;
-    const shownActions = addsFirst && !hasRecords && !narrowed ? withoutPrimary : actions;
-    const empty = list.empty?.kind === "firstUse" && list.empty.action && primary !== undefined && !addsFirst
-        ? { ...list.empty, actionVariant: "outline" }
-        : list.empty;
-    const page = (_jsxs("div", { className: "grid min-w-0 gap-4", "data-slot": "collection-page", children: [title ? _jsx(PageHeader, { title: title }) : null, shownActions ? _jsx(PageActions, { ...shownActions }) : null, tabs, (search || filters || sort) && (hasRecords || narrowed) ? (_jsx(CollectionToolbar, { actions: filters || sort ? (_jsxs(_Fragment, { children: [filters ? _jsx(CollectionFilters, { ...filters }) : null, sort ? _jsx(CollectionSort, { ...sort }) : null] })) : undefined, "aria-busy": pending || undefined, label: list.label, search: search ? _jsx(CollectionSearch, { ...search }) : undefined, status: pending ? _jsx(WaitingLine, { className: "w-24", decorative: true }) : null, surface: toolbarSurface ?? "plain" })) : null, _jsx(RecordList, { ...list, empty: empty, noMatch: narrowed ? noMatch : undefined })] }));
+    const page = (_jsxs("div", { className: "grid min-w-0 gap-4", "data-slot": "collection-page", children: [title ? _jsx(PageHeader, { description: description, title: title }) : null, actions ? _jsx(PageActions, { ...actions }) : null, tabs, (search || filters || sort) && (hasRecords || narrowed) ? (_jsx(CollectionToolbar, { actions: filters || sort ? (_jsxs(_Fragment, { children: [filters ? _jsx(CollectionFilters, { ...filters }) : null, sort ? _jsx(CollectionSort, { ...sort }) : null] })) : undefined, "aria-busy": pending || undefined, label: list.label, search: search ? _jsx(CollectionSearch, { ...search }) : undefined, status: pending ? _jsx(WaitingLine, { className: "w-24", decorative: true }) : null, surface: toolbarSurface ?? "plain" })) : null, rail ? (_jsxs("div", { className: "grid min-w-0 gap-6 xl:grid-cols-[18.75rem_minmax(0,1fr)] xl:items-start", "data-slot": "collection-columns", children: [_jsx("div", { className: "min-w-0 xl:col-start-2 xl:row-start-1", children: _jsx(RecordList, { ...list, layout: "line", noMatch: narrowed ? noMatch : undefined }) }), _jsx(CollectionRailColumn, { className: "xl:col-start-1 xl:row-start-1", rail: rail })] })) : (_jsx(RecordList, { ...list, noMatch: narrowed ? noMatch : undefined }))] }));
     return title ? _jsx(PageActionsHostProvider, { children: page }) : page;
 }

package/dist/components/collection-search.d.ts

@@ -1,24 +1,46 @@
+import type { ReactNode } from "react";
+import { type ClearableInputShortcut } from "./clearable-input.js";
 export type CollectionSearchProps = {
     /** What the search finds, read as its name and shown while it is empty: "Find a skill". */
     label: string;
+    /** The clear button's name: "Clear search". */
+    clearLabel: string;
     value: string;
     onValueChange: (value: string) => void;
+    onClear?: () => void;
     disabled?: boolean;
+    /** A query is running; the results stay on screen. */
+    loading?: boolean;
+    /** A mark before the text, in place of the search mark. */
+    prefix?: ReactNode;
+    /** The keys that open the command palette, shown while the box is empty. */
+    shortcut?: ClearableInputShortcut;
 };
-/** The search a collection toolbar fills its row with. */
 /**
  * The search a collection toolbar fills its row with.
  *
  * @family Inputs
- * @when Finding a record inside one collection, at the start of its toolbar.
+ * @when "Pre-configured search input with a magnifying glass icon and clear button."
+ * (https://vercel.com/geist/search-input) Ours: finding a record inside one collection, at the
+ * start of its toolbar.
  * @instead Finding anything across the product is `CommandDialog`. Narrowing by a facet is
- * `CollectionFilters`. A free value in a form is `Input`.
- * @behaviour Results stay on screen while a search updates. Escape clears only while the box holds
- * the interaction and has a value; otherwise it closes the overlay as usual.
- * @words The search's label is what it finds, also shown as its placeholder: *Find a skill*,
- * *Search the hub*.
- * @access The input carries `aria-label` from `label` and `type="search"`; the search mark is
- * decorative.
+ * `CollectionFilters`. A free value in a form is `Input`. "For an inline search box, set the
+ * `search` variant with a scoped placeholder like `Search projects`; don’t embed a `<SearchInput>`
+ * inside an unrelated form." (https://vercel.com/geist/input) Ours: this component is the search;
+ * `Input` has no `search` variant.
+ * @behaviour A `ClearableInput` with the search mark in a 14 px slot: an Esc key cap flush against
+ * the end of the box once it has text. Ring, halo, hover and disabled are `Input`'s. Results stay
+ * on screen while a search updates; `loading` marks the box busy and draws the waiting line after a
+ * second. "Automatically clears the input if escape is pressed." (https://vercel.com/geist/input)
+ * "Displays the <kbd>⌘</kbd> <kbd>K</kbd> shortcut to indicate that the input supports a command
+ * palette." (https://vercel.com/geist/input) "Transitions to showing <kbd>Esc</kbd> when the field
+ * is dirty." (https://vercel.com/geist/input)
+ * @words "A `SearchInput` placeholder names the scope (`Search projects`) so the role is clear
+ * without sighted context." (https://vercel.com/geist/input) Ours: the search's label is what it
+ * finds, also shown as its placeholder: *Find a skill*, *Search the hub*.
+ * @access The input carries `aria-label` from `label` and `type="search"`; the clear button is
+ * named by `clearLabel`; the search mark is decorative. A search always has both names, so neither
+ * can be left out.
  */
-export declare function CollectionSearch({ label, value, onValueChange, disabled }: CollectionSearchProps): import("react").JSX.Element;
+export declare function CollectionSearch({ label, clearLabel, value, onValueChange, onClear, disabled, loading, prefix, shortcut, }: CollectionSearchProps): import("react").JSX.Element;
 //# sourceMappingURL=collection-search.d.ts.map

package/dist/components/collection-search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-search.d.ts","sourceRoot":"","sources":["../../src/components/collection-search.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,qBAAqB,GAAG;IAClC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,0DAA0D;AAC1D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAgBhG"}
+{"version":3,"file":"collection-search.d.ts","sourceRoot":"","sources":["../../src/components/collection-search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAkB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3F,MAAM,MAAM,qBAAqB,GAAG;IAClC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,sBAAsB,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,qBAAqB,+BAgBvB"}

package/dist/components/collection-search.js

@@ -1,22 +1,33 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Search } from "lucide-react";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
-/** The search a collection toolbar fills its row with. */
+import { ClearableInput } from "./clearable-input.js";
 /**
  * The search a collection toolbar fills its row with.
  *
  * @family Inputs
- * @when Finding a record inside one collection, at the start of its toolbar.
+ * @when "Pre-configured search input with a magnifying glass icon and clear button."
+ * (https://vercel.com/geist/search-input) Ours: finding a record inside one collection, at the
+ * start of its toolbar.
  * @instead Finding anything across the product is `CommandDialog`. Narrowing by a facet is
- * `CollectionFilters`. A free value in a form is `Input`.
- * @behaviour Results stay on screen while a search updates. Escape clears only while the box holds
- * the interaction and has a value; otherwise it closes the overlay as usual.
- * @words The search's label is what it finds, also shown as its placeholder: *Find a skill*,
- * *Search the hub*.
- * @access The input carries `aria-label` from `label` and `type="search"`; the search mark is
- * decorative.
+ * `CollectionFilters`. A free value in a form is `Input`. "For an inline search box, set the
+ * `search` variant with a scoped placeholder like `Search projects`; don’t embed a `<SearchInput>`
+ * inside an unrelated form." (https://vercel.com/geist/input) Ours: this component is the search;
+ * `Input` has no `search` variant.
+ * @behaviour A `ClearableInput` with the search mark in a 14 px slot: an Esc key cap flush against
+ * the end of the box once it has text. Ring, halo, hover and disabled are `Input`'s. Results stay
+ * on screen while a search updates; `loading` marks the box busy and draws the waiting line after a
+ * second. "Automatically clears the input if escape is pressed." (https://vercel.com/geist/input)
+ * "Displays the <kbd>⌘</kbd> <kbd>K</kbd> shortcut to indicate that the input supports a command
+ * palette." (https://vercel.com/geist/input) "Transitions to showing <kbd>Esc</kbd> when the field
+ * is dirty." (https://vercel.com/geist/input)
+ * @words "A `SearchInput` placeholder names the scope (`Search projects`) so the role is clear
+ * without sighted context." (https://vercel.com/geist/input) Ours: the search's label is what it
+ * finds, also shown as its placeholder: *Find a skill*, *Search the hub*.
+ * @access The input carries `aria-label` from `label` and `type="search"`; the clear button is
+ * named by `clearLabel`; the search mark is decorative. A search always has both names, so neither
+ * can be left out.
  */
-export function CollectionSearch({ label, value, onValueChange, disabled }) {
-    return (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(Search, { "aria-hidden": "true" }) }), _jsx(InputGroupInput, { "aria-label": label, disabled: disabled, onChange: (event) => onValueChange(event.target.value), placeholder: label, type: "search", value: value })] }));
+export function CollectionSearch({ label, clearLabel, value, onValueChange, onClear, disabled, loading, prefix, shortcut, }) {
+    return (_jsx(ClearableInput, { "aria-label": label, clearLabel: clearLabel, disabled: disabled, loading: loading, onClear: onClear, onValueChange: onValueChange, placeholder: label, prefix: prefix ?? _jsx(Search, { "aria-hidden": "true", className: "size-3.5" }), shortcut: shortcut, type: "search", value: value }));
 }

package/dist/components/collection-sort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-sort.d.ts","sourceRoot":"","sources":["../../src/components/collection-sort.tsx"],"names":[],"mappings":"AAeA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,mBAAmB,sCAkC3F"}
+{"version":3,"file":"collection-sort.d.ts","sourceRoot":"","sources":["../../src/components/collection-sort.tsx"],"names":[],"mappings":"AAeA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,mBAAmB,sCAgC3F"}

package/dist/components/collection-sort.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { ArrowUpDown } from "lucide-react";
 import { Button } from "./button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
@@ -22,7 +22,7 @@ export function CollectionSort({ label, value, options, onValueChange }) {
     const current = options.find((option) => option.value === value) ?? options[0];
     if (!current)
         return null;
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "aria-label": `${label}: ${current.label}`, "data-slot": "collection-sort", render: _jsx(Button, { variant: "outline" }), children: [_jsx(ArrowUpDown, { "data-icon": "inline-start", "aria-hidden": "true" }), current.label] }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: label }), _jsx(DropdownMenuRadioGroup, { value: current.value, 
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "data-slot": "collection-sort", render: _jsx(Button, { variant: "outline", prefix: _jsx(ArrowUpDown, { "aria-hidden": "true" }) }), children: [_jsxs("span", { className: "sr-only", children: [label, ":"] }), " ", current.label] }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: label }), _jsx(DropdownMenuRadioGroup, { value: current.value, 
                             // oxlint-disable-next-line anti-slop/no-unknown-parameters -- Base UI types a radio group's value any; the guard below reads it
                             onValueChange: (next) => {
                                 // oxlint-disable-next-line anti-slop/no-runtime-typeof -- Base UI's radio group types the chosen value as unknown; this is where it is read.

package/dist/components/collection-toolbar.d.ts

@@ -20,8 +20,11 @@ export type CollectionToolbarProps = Omit<ComponentPropsWithoutRef<"div">, "chil
  * @instead A page action never sits here: it is `PageActions` on the title's row. Finding across
  * the product is `CommandDialog`.
  * @behaviour Glass on the floating height, held at the top of the scrolling content while the rows
- * pass under it; inside a titled `TableCard`, or with `surface="plain"`, the plain row. A search
- * alone is always the plain row.
+ * pass under it; inside a titled `TableCard`, on the title's row at its trailing edge, or with `surface="plain"`, the plain row. A search
+ * alone is always the plain row. Below 640 px the search takes the first line and the controls and
+ * the actions stand on one line under it, each scrolling sideways when it outgrows its share, never
+ * wrapping into a second; each line contains what it scrolls, a chip's hidden label included, so
+ * the page never scrolls with it.
  * @words The label names the collection's tools: *Customer filters*.
  * @access `role="toolbar"` named by `label`.
  */

package/dist/components/collection-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/collection-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B,CAAC;AAeF;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,sBAAsB,+BAwCxB"}
+{"version":3,"file":"collection-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/collection-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B,CAAC;AAeF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,sBAAsB,+BAwCxB"}

package/dist/components/collection-toolbar.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const ON_PAGE = "sticky top-3 z-20 mb-3 rounded-lg p-2 nc-glass nc-elevation-floating";
 const PLAIN = "relative mb-3";
-const IN_CARD = "[[data-slot=table-card-toolbar]_&]:relative [[data-slot=table-card-toolbar]_&]:z-auto [[data-slot=table-card-toolbar]_&]:mb-0 [[data-slot=table-card-toolbar]_&]:rounded-none [[data-slot=table-card-toolbar]_&]:p-0 [[data-slot=table-card-toolbar]_&]:pb-4 [[data-slot=table-card-toolbar]_&]:[background:none] [[data-slot=table-card-toolbar]_&]:[backdrop-filter:none] [[data-slot=table-card-toolbar]_&]:[box-shadow:none]";
+const IN_CARD = "[[data-slot=table-card-toolbar]_&]:relative [[data-slot=table-card-toolbar]_&]:top-auto [[data-slot=table-card-toolbar]_&]:z-auto [[data-slot=table-card-toolbar]_&]:mb-0 [[data-slot=table-card-toolbar]_&]:rounded-none [[data-slot=table-card-toolbar]_&]:p-0 [[data-slot=table-card-toolbar]_&]:[background:none] [[data-slot=table-card-toolbar]_&]:[backdrop-filter:none] [[data-slot=table-card-toolbar]_&]:[box-shadow:none]";
 /**
  * A collection's control bar: its filters, its search and its sort, over its own rows.
  *
@@ -18,8 +18,11 @@ const IN_CARD = "[[data-slot=table-card-toolbar]_&]:relative [[data-slot=table-c
  * @instead A page action never sits here: it is `PageActions` on the title's row. Finding across
  * the product is `CommandDialog`.
  * @behaviour Glass on the floating height, held at the top of the scrolling content while the rows
- * pass under it; inside a titled `TableCard`, or with `surface="plain"`, the plain row. A search
- * alone is always the plain row.
+ * pass under it; inside a titled `TableCard`, on the title's row at its trailing edge, or with `surface="plain"`, the plain row. A search
+ * alone is always the plain row. Below 640 px the search takes the first line and the controls and
+ * the actions stand on one line under it, each scrolling sideways when it outgrows its share, never
+ * wrapping into a second; each line contains what it scrolls, a chip's hidden label included, so
+ * the page never scrolls with it.
  * @words The label names the collection's tools: *Customer filters*.
  * @access `role="toolbar"` named by `label`.
  */
@@ -27,5 +30,5 @@ export function CollectionToolbar({ label, controls, search, actions, status, su
     // A search alone is the plain row: a search box never stands in a box of its
     // own (DESIGN.md "Menus and commands").
     const drawn = surface === "glass" && (controls || actions) ? "glass" : "plain";
-    return (_jsxs("div", { "data-slot": "collection-toolbar", ...props, role: "toolbar", "aria-label": label, "data-surface": drawn, className: `flex min-w-0 flex-wrap items-center gap-2 ${drawn === "glass" ? ON_PAGE : PLAIN} ${IN_CARD}`, children: [controls ? (_jsx("div", { "data-slot": "collection-toolbar-controls", className: "flex min-w-0 max-w-full flex-wrap items-center gap-2", children: controls })) : null, search ? (_jsx("div", { "data-slot": "collection-toolbar-search", className: "min-w-0 basis-full sm:flex-1 sm:basis-64", children: search })) : null, actions ? (_jsx("div", { "data-slot": "collection-toolbar-actions", className: "ml-auto flex min-w-0 flex-wrap items-center gap-2", children: actions })) : null, status ? _jsx("div", { className: "absolute right-0 bottom-0", children: status }) : null] }));
+    return (_jsxs("div", { "data-slot": "collection-toolbar", ...props, role: "toolbar", "aria-label": label, "data-surface": drawn, className: `flex min-w-0 flex-wrap items-center gap-2 ${drawn === "glass" ? ON_PAGE : PLAIN} ${IN_CARD}`, children: [controls ? (_jsx("div", { "data-slot": "collection-toolbar-controls", className: "flex min-w-0 max-w-full flex-wrap items-center gap-2 max-sm:relative max-sm:order-2 max-sm:-m-0.5 max-sm:flex-1 max-sm:basis-0 max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:p-0.5 max-sm:[scrollbar-width:none] max-sm:*:max-w-none max-sm:*:shrink-0", children: controls })) : null, search ? (_jsx("div", { "data-slot": "collection-toolbar-search", className: "min-w-0 basis-full max-sm:order-1 sm:flex-1 sm:basis-64", children: search })) : null, actions ? (_jsx("div", { "data-slot": "collection-toolbar-actions", className: "ml-auto flex min-w-0 flex-wrap items-center gap-2 max-sm:relative max-sm:order-3 max-sm:-m-0.5 max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:p-0.5 max-sm:[scrollbar-width:none] max-sm:*:max-w-none max-sm:*:shrink-0", children: actions })) : null, status ? _jsx("div", { className: "absolute right-0 bottom-0", children: status }) : null] }));
 }