@nadicodeai/ui 12.1.96 → 12.1.98

package/dist/components/collection-filters.js

@@ -38,7 +38,19 @@ function FilterPicker({ facets, copy, initialField, returnFocus, children, }) {
                             }
                         }, children: [_jsx(CommandInput, { ref: input, "aria-label": facet ? `${copy.searchValues}: ${facet.label}` : copy.searchFields, placeholder: facet ? copy.searchValues : copy.searchFields, value: search, onValueChange: setSearch }), _jsxs(CommandList, { label: facet?.label ?? copy.searchFields, children: [_jsx(CommandEmpty, { children: copy.empty }), _jsx(CommandGroup, { heading: facet?.label, children: facet ? (_jsxs(_Fragment, { children: [facet.value ? (_jsx(CommandItem, { value: facet.allLabel, onSelect: () => commit(""), children: facet.allLabel })) : null, facet.options.map((option) => (_jsxs(CommandItem, { value: option.value, keywords: [option.label], "data-checked": option.value === facet.value, onSelect: () => commit(option.value), children: [option.icon, _jsx("span", { className: option.mono ? "truncate font-label-mono text-label-mono" : "truncate", children: option.label })] }, option.value)))] })) : (facets.map((item) => (_jsx(CommandItem, { value: item.label, onSelect: () => changeField(item.label), children: item.label }, item.label)))) })] })] }, field ?? "fields")] })] }));
 }
-export function CollectionFilters({ facets, copy, }) {
+/**
+ * The filters in a collection's toolbar: one Add filter button, a chip for
+ * each facet in force, and the facets most often narrowed to waiting as
+ * dashed chips.
+ *
+ * @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.
+ * @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.
+ */
+export function CollectionFilters({ facets, copy }) {
     const addTrigger = React.useRef(null);
     if (!facets.length)
         return null;

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

@@ -1,125 +1,39 @@
 import type { RowData } from "@tanstack/react-table";
-import { type ReactElement, type ReactNode } from "react";
+import type { ReactElement } 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 DataTableRowLinkProps } from "./data-table.js";
-import { type EmptyStateProps } from "./empty-state.js";
+import type { EmptyStateKind } from "./empty-state.js";
 import { type PageActionsProps } from "./page-actions.js";
-import { type StatusBadgeTone } from "./status-badge.js";
-import { type RowMessage } from "../internal/row-message.js";
-/** One thing a person can do to a record. */
-export type RecordCommand = {
-    label: string;
-    /** Its name for assistive technology when the label alone does not say what it does: "Let Sofia use Gmail". */
-    accessibleName?: string;
-    icon: ReactElement;
-    onSelect: () => void;
-    destructive?: boolean;
-    disabled?: boolean;
-    /** Why the command cannot run now, read after its name. */
-    reason?: ReactNode;
-};
-export type { RowMessage };
-export type CollectionPageProps<TRecord extends RowData> = {
-    /** Names the collection for assistive technology: "Skills". */
-    label: string;
-    /** The page's title, when the collection is the page; a section titled by its shell leaves it out. */
+import { type RecordListProps } from "./record-list.js";
+export type { RowMessage } from "./record-list.js";
+export type CollectionPageProps<TRecord extends RowData> = Omit<RecordListProps<TRecord>, "heading" | "noMatch"> & {
+    /** The page's title, when the product's chrome does not draw it. */
     title?: string;
-    /** The title's commands; a `primary` that is also the first-use action shows only once there are records. */
-    actions?: PageActionsProps;
-    search?: {
-        label: string;
-        value: string;
-        onValueChange: (value: string) => void;
-    };
+    /** The title row: secondary, primary, then the three dots. A `primary` equal to `empty.action` shows only once there are records. */
+    actions?: Omit<PageActionsProps, "period">;
+    /** The page's sibling collections, under the title row: `TabsNav variant="line"`. */
+    tabs?: ReactElement;
+    search?: CollectionSearchProps;
+    filters?: CollectionFiltersProps;
     sort?: CollectionSortProps;
-    /** The records to show, already searched and ordered; `undefined` while they load. */
-    records: readonly TRecord[] | undefined;
-    /** Names the rows while they load; the collection's `label` when left out. */
-    loadingLabel?: string;
-    /** The read failed: shown in place of the rows. */
-    failed?: Extract<EmptyStateProps, {
-        kind: "failed";
-    }>;
-    /** There are no records at all; a collection shown only when it has records leaves it out. */
-    empty?: Extract<EmptyStateProps, {
-        kind: "firstUse" | "nothingYet";
-    }>;
-    /** The search matched nothing; a collection without one leaves it out. */
-    noMatch?: Omit<Extract<EmptyStateProps, {
-        kind: "noResults";
-    }>, "kind">;
-    getId: (record: TRecord) => string;
-    /** The record's name, and one line saying what it is or where it comes from. */
-    name: (record: TRecord) => {
-        name: ReactNode;
-        detail?: ReactNode;
-        mark?: ReactNode;
-    };
-    /** The name is the record's whole text, such as a memory, and wraps in full instead of ending in an ellipsis. */
-    wraps?: boolean;
-    /**
-     * Facts of one kind each, a column apiece after the name, every value saying
-     * what it is by its own word or mark: "Skills: price-quotes", a commit. A fact
-     * holds one line at its own width; `prose` is a phrase that takes the row's spare width.
-     */
-    facts?: readonly {
-        id: string;
-        label: string;
-        of: (record: TRecord) => ReactNode;
-        prose?: boolean;
-    }[];
-    /** A status only when it tells this record apart from the others; `null` for the usual case. */
-    status?: {
-        label: string;
-        of: (record: TRecord) => {
-            label: string;
-            tone: StatusBadgeTone;
-        } | null;
-    };
-    /** When something happened to the record, in its verb's sentence. */
-    time?: {
-        label: string;
-        of: (record: TRecord) => Date | number | string | null | undefined;
-        phrase: (when: string) => string;
-        /** What a screen reader hears where a record has no time, beside the muted dash. */
-        missing: string;
-        locale?: string;
-    };
-    /**
-     * What a person can do to the record: one command is a button in the row; two or
-     * more, or a destructive one, open the row's menu, the destructive last.
-     */
-    commands?: (record: TRecord) => readonly RecordCommand[];
-    /**
-     * The row's one outline button that starts what the record is not doing yet,
-     * "Connect", with what it is waiting for; its commands then stay in the menu after it.
-     */
-    start?: (record: TRecord) => ReactNode;
-    commandsLabel?: (record: TRecord) => string;
-    /** Names the commands column for assistive technology: "Actions". */
-    commandsHeader?: string;
-    /** The record opens its own page; the row shows the way in. A record that opens nothing has no `href`. */
-    open?: {
-        href: (record: TRecord) => string | null;
-        label: (record: TRecord) => string;
-        /** Draws the row's link, for a router that opens it itself. */
-        renderLink?: (props: DataTableRowLinkProps) => ReactNode;
-    };
-    /** The record's own action failed or cannot run: its message, inside the row. */
-    state?: (record: TRecord) => RowMessage | null;
-    /** The record being edited, and its `RowEditForm`, drawn inside its row. */
-    editor?: {
-        id: string;
-        render: (record: TRecord) => ReactNode;
-    };
+    /** glass only where the rows scroll under the toolbar. */
+    toolbarSurface?: "plain" | "glass";
+    /** The search or the filters matched nothing. */
+    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 Collection composition (DESIGN.md "Page compositions", "Tables and
- * missing values"), whole: the title with the page's actions, the toolbar's
- * search and sort, then one row per record that reads without a header row:
- * its name over what it is, a status only when it is the exception, when it
- * happened in its verb's sentence, and its commands. A failed or refused action
- * and an edit stay inside their own row.
+ * 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`.
  */
 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":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAiB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAExF,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAM/E,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,KAAK,UAAU,EAAqC,MAAM,wBAAwB,CAAC;AAE5F,6CAA6C;AAC7C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,+GAA+G;IAC/G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,MAAM,MAAM,mBAAmB,CAAC,OAAO,SAAS,OAAO,IAAI;IACzD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CAAC;IAClF,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,sFAAsF;IACtF,OAAO,EAAE,SAAS,OAAO,EAAE,GAAG,SAAS,CAAC;IACxC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC;IACtD,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,EAAE;QAAE,IAAI,EAAE,UAAU,GAAG,YAAY,CAAA;KAAE,CAAC,CAAC;IACtE,0EAA0E;IAC1E,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC,EAAE,MAAM,CAAC,CAAC;IACxE,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;IACnC,gFAAgF;IAChF,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IACrF,iHAAiH;IACjH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS;QACf,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;QACnC,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,EAAE,CAAC;IACJ,gGAAgG;IAChG,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,eAAe,CAAA;SAAE,GAAG,IAAI,CAAC;KAC1E,CAAC;IACF,qEAAqE;IACrE,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACnE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;QACjC,oFAAoF;QACpF,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,aAAa,EAAE,CAAC;IACzD;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;IAC5C,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0GAA0G;IAC1G,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC;QACzC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;QACnC,+DAA+D;QAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;KAC1D,CAAC;IACF,iFAAiF;IACjF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,GAAG,IAAI,CAAC;IAC/C,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAA;KAAE,CAAC;CACjE,CAAC;AAuJF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,+BA4F1F"}
+{"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"}

package/dist/components/collection-page.js

@@ -1,150 +1,34 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
-import { createContext, useContext } from "react";
-import { ActionMenu } from "./action-menu.js";
-import { Button } from "./button.js";
+import { CollectionFilters } from "./collection-filters.js";
 import { CollectionSearch } from "./collection-search.js";
 import { CollectionSort } from "./collection-sort.js";
 import { CollectionToolbar } from "./collection-toolbar.js";
-import { DataTable, } from "./data-table.js";
-import { DropdownMenuCommand, DropdownMenuSeparator } from "./dropdown-menu.js";
-import { EmptyState } from "./empty-state.js";
-import { PageActions } from "./page-actions.js";
+import { PageActions, PageActionsHostProvider, } from "./page-actions.js";
 import { PageHeader } from "./page-header.js";
-import { RecordIdentity } from "./record-identity.js";
-import { RecordTime, recordDate } from "./record-time.js";
-import { TableValue } from "./table-value.js";
-import { Skeleton } from "./skeleton.js";
-import { StatusBadge } from "./status-badge.js";
-import { TableCard } from "./table-card.js";
-import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
-const ShownCollection = createContext(undefined);
-function useShownCollection() {
-    // SAFETY: the one ShownCollection provider is CollectionPage's render, which passes its own props, and these cells render only inside that page's table of the same TRecord.
-    return useContext(ShownCollection);
-}
-/*
- * Each cell is one component for the page's whole life: TanStack renders a
- * column's `cell` as a component, so a function made anew on each render would
- * remount every row's cells on every render, closing a row's open menu when
- * the records are read again. The cells read the page's current props instead.
- */
-function NameCell({ row }) {
-    const props = useShownCollection();
-    const shown = props.name(row.original);
-    const state = props.state?.(row.original);
-    return (_jsx(RecordIdentity, { detail: state ? _jsx(RowMessageLine, { state: state }) : shown.detail, mark: shown.mark, name: shown.name, wraps: props.wraps }));
-}
-function FactCell({ column, row }) {
-    const fact = useShownCollection().facts?.find((each) => each.id === column.id);
-    return _jsx(_Fragment, { children: fact?.of(row.original) });
-}
-function StatusCell({ row }) {
-    const shown = useShownCollection().status?.of(row.original);
-    return shown ? _jsx(StatusBadge, { label: shown.label, tone: shown.tone }) : null;
-}
-function TimeCell({ row }) {
-    const time = useShownCollection().time;
-    if (!time)
-        return null;
-    const at = recordDate(time.of(row.original));
-    return (_jsx(TableValue, { missingLabel: time.missing, value: at ? _jsx(RecordTime, { at: at, locale: time.locale, phrase: time.phrase }) : null }));
-}
-function CommandsCell({ row }) {
-    const props = useShownCollection();
-    const state = props.state?.(row.original);
-    const commands = props.commands?.(row.original) ?? [];
-    const way = commands.length > 0 ? (_jsx(Commands, { commands: commands, label: props.commandsLabel?.(row.original) ?? props.label, menu: props.start !== undefined })) : props.open?.href(row.original) && !state ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })) : null;
-    if (!props.start && !state)
-        return way;
-    return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [props.start?.(row.original), state ? _jsx(RowMessageActions, { state: state }) : null, way] }));
-}
-function LoadingRecords({ label }) {
-    return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: "divide-y divide-border", role: "status", children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "flex h-16 items-center gap-3 px-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-40 max-w-full" }), _jsx(Skeleton, { className: "h-3 w-56 max-w-full" })] }), _jsx(Skeleton, { className: "ml-auto h-4 w-28" })] }, index))) }));
-}
-function Commands({ commands, label, menu, }) {
-    const [only] = commands;
-    if (!only)
-        return null;
-    if (commands.length === 1 && !only.destructive && !menu) {
-        return (_jsx(Button, { "aria-label": only.accessibleName, disabled: only.disabled, onClick: only.onSelect, type: "button", variant: "outline", children: only.label }));
-    }
-    const kept = commands.filter((command) => !command.destructive);
-    const destructive = commands.filter((command) => command.destructive);
-    return (_jsxs(ActionMenu, { label: label, children: [kept.map((command) => (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, disabled: command.disabled, icon: command.icon, onClick: command.onSelect, reason: command.reason, children: command.label }, command.label))), kept.length > 0 && destructive.length > 0 ? _jsx(DropdownMenuSeparator, {}) : null, destructive.map((command) => (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, disabled: command.disabled, icon: command.icon, onClick: command.onSelect, reason: command.reason, variant: "destructive", children: command.label }, command.label)))] }));
-}
+import { RecordList } from "./record-list.js";
+import { WaitingLine } from "./waiting-line.js";
 /**
- * The Collection composition (DESIGN.md "Page compositions", "Tables and
- * missing values"), whole: the title with the page's actions, the toolbar's
- * search and sort, then one row per record that reads without a header row:
- * its name over what it is, a status only when it is the exception, when it
- * happened in its verb's sentence, and its commands. A failed or refused action
- * and an edit stay inside their own row.
+ * 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`.
  */
 export function CollectionPage(props) {
-    const { label, title, actions, search, sort, records } = props;
-    const hasRecords = records !== undefined && records.length > 0;
-    const searching = Boolean(search?.value);
-    const addsFirst = props.empty?.kind === "firstUse" && props.empty.action === actions?.primary;
-    const shownActions = addsFirst && !hasRecords && !searching ? { ...actions, primary: undefined } : actions;
-    const columns = [
-        { id: "name", header: label, meta: props.wraps ? { wraps: true } : undefined, cell: NameCell },
-    ];
-    for (const fact of props.facts ?? []) {
-        columns.push({
-            id: fact.id,
-            header: fact.label,
-            meta: fact.prose ? { prose: true } : { narrow: true },
-            cell: FactCell,
-        });
-    }
-    if (props.status) {
-        columns.push({
-            id: "status",
-            header: props.status.label,
-            meta: { narrow: true },
-            cell: StatusCell,
-        });
-    }
-    if (props.time) {
-        columns.push({ id: "time", header: props.time.label, meta: { narrow: true }, cell: TimeCell });
-    }
-    if (props.commands || props.open || props.state || props.start) {
-        columns.push({
-            id: "commands",
-            header: props.commandsHeader ?? label,
-            meta: { narrow: true },
-            cell: CommandsCell,
-        });
-    }
-    const primaryColumns = columns.map((column) => String(column.id));
-    let body;
-    if (props.failed) {
-        body = _jsx(EmptyState, { ...props.failed });
-    }
-    else if (records === undefined) {
-        body = _jsx(LoadingRecords, { label: props.loadingLabel ?? label });
-    }
-    else if (!hasRecords && searching && props.noMatch) {
-        body = _jsx(EmptyState, { kind: "noResults", ...props.noMatch });
-    }
-    else if (!hasRecords) {
-        body = props.empty ? _jsx(EmptyState, { ...props.empty }) : null;
-    }
-    else {
-        const table = {
-            columns,
-            data: [...records],
-            embedded: true,
-            empty: { kind: "nothingYet", message: label },
-            getRowId: props.getId,
-            primaryColumns,
-            showColumnHeaders: false,
-            rowEditor: props.editor ? { rowId: props.editor.id, render: props.editor.render } : undefined,
-            tableLabel: label,
-        };
-        body = props.open ? (_jsx(DataTable, { ...table, primaryColumnId: "name", renderRowLink: props.open.renderLink, rowHref: props.open.href, rowLabel: props.open.label })) : (_jsx(DataTable, { ...table }));
-    }
-    return (_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, search && (hasRecords || searching) ? (_jsx(CollectionToolbar, { actions: sort ? _jsx(CollectionSort, { ...sort }) : undefined, label: label, search: _jsx(CollectionSearch, { ...search }), surface: "plain" })) : null, _jsx(TableCard, { children: _jsx(ShownCollection.Provider, { value: props, children: body }) })] }));
+    const { title, actions, tabs, search, filters, sort, toolbarSurface, noMatch, pending, ...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 })] }));
+    return title ? _jsx(PageActionsHostProvider, { children: page }) : page;
 }

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

@@ -6,5 +6,19 @@ export type CollectionSearchProps = {
     disabled?: boolean;
 };
 /** 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.
+ * @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.
+ */
 export declare function CollectionSearch({ label, value, onValueChange, disabled }: 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,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":"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"}

package/dist/components/collection-search.js

@@ -3,6 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs } 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. */
+/**
+ * The search a collection toolbar fills its row with.
+ *
+ * @family Inputs
+ * @when 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.
+ */
 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 })] }));
 }

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

@@ -10,9 +10,19 @@ export type CollectionSortProps = {
     onValueChange: (value: string) => void;
 };
 /**
- * The order a collection's rows are read in, at the toolbar's trailing edge
- * before the collection's actions. The trigger names the order in force; the
- * menu offers the others.
+ * The order a collection's rows are read in, at the toolbar's trailing edge.
+ *
+ * @family Choices
+ * @when A collection whose rows can be read in more than one order: newest, name, cost.
+ * @instead Sorting by a column of a comparison table is `DataTable`'s own header. Narrowing rows is
+ * `CollectionFilters`.
+ * @behaviour An outline button names the order in force; its menu offers the others as radio rows
+ * with the current one checked. Choosing the current order changes nothing. It renders nothing
+ * without options.
+ * @words The label says what the control does (*Sort by*); each option names an order: *Newest
+ * first*, *Name*.
+ * @access The trigger reads the label and the current order: *Sort by: Newest first*. The options
+ * are menu radio items.
  */
 export declare function CollectionSort({ label, value, options, onValueChange }: CollectionSortProps): import("react").JSX.Element | null;
 //# sourceMappingURL=collection-sort.d.ts.map

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;;;;GAIG;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,sCAkC3F"}

package/dist/components/collection-sort.js

@@ -4,9 +4,19 @@ import { ArrowUpDown } from "lucide-react";
 import { Button } from "./button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
 /**
- * The order a collection's rows are read in, at the toolbar's trailing edge
- * before the collection's actions. The trigger names the order in force; the
- * menu offers the others.
+ * The order a collection's rows are read in, at the toolbar's trailing edge.
+ *
+ * @family Choices
+ * @when A collection whose rows can be read in more than one order: newest, name, cost.
+ * @instead Sorting by a column of a comparison table is `DataTable`'s own header. Narrowing rows is
+ * `CollectionFilters`.
+ * @behaviour An outline button names the order in force; its menu offers the others as radio rows
+ * with the current one checked. Choosing the current order changes nothing. It renders nothing
+ * without options.
+ * @words The label says what the control does (*Sort by*); each option names an order: *Newest
+ * first*, *Name*.
+ * @access The trigger reads the label and the current order: *Sort by: Newest first*. The options
+ * are menu radio items.
  */
 export function CollectionSort({ label, value, options, onValueChange }) {
     const current = options.find((option) => option.value === value) ?? options[0];

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

@@ -12,5 +12,18 @@ export type CollectionToolbarProps = Omit<ComponentPropsWithoutRef<"div">, "chil
      */
     surface?: "glass" | "plain";
 };
+/**
+ * A collection's control bar: its filters, its search and its sort, over its own rows.
+ *
+ * @family Compositions
+ * @when The row above a collection's rows that holds its search, filters, sort and status.
+ * @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.
+ * @words The label names the collection's tools: *Customer filters*.
+ * @access `role="toolbar"` named by `label`.
+ */
 export declare function CollectionToolbar({ label, controls, search, actions, status, surface, ...props }: CollectionToolbarProps): import("react").JSX.Element;
 //# sourceMappingURL=collection-toolbar.d.ts.map

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,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;;;;;;;;;;;;GAYG;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

@@ -10,6 +10,19 @@ 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]";
+/**
+ * A collection's control bar: its filters, its search and its sort, over its own rows.
+ *
+ * @family Compositions
+ * @when The row above a collection's rows that holds its search, filters, sort and status.
+ * @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.
+ * @words The label names the collection's tools: *Customer filters*.
+ * @access `role="toolbar"` named by `label`.
+ */
 export function CollectionToolbar({ label, controls, search, actions, status, surface = "glass", ...props }) {
     // A search alone is the plain row: a search box never stands in a box of its
     // own (DESIGN.md "Menus and commands").

package/dist/components/combobox.d.ts

@@ -1,5 +1,22 @@
 import * as React from "react";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+/**
+ * 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.
+ */
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAaxE,QAAA,MAAM,QAAQ,+BAAyB,CAAC;AAExC,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,qBAEjE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,qBAW1F;AAeD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,WAAkB,EAClB,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,GAAG;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,qBAoBA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAe,EACf,WAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,GAC9B,IAAI,CACF,iBAAiB,CAAC,UAAU,CAAC,KAAK,EAClC,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,CAC3D,qBAwBF;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,qBAW1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,qBAoBpF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,qBAI5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,UAAU,CAAC,KAAK,qBAQjF;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,UAAU,CAAC,KAAK,qBAE3E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,qBAW5E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,qBAQpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,qBAW7F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,qBAsBA;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,qBAQjF;AAED,iBAAS,iBAAiB,2CAEzB;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/components/combobox.js

@@ -6,6 +6,23 @@ 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";
+/**
+ * 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.
+ */
 const Combobox = ComboboxPrimitive.Root;
 function ComboboxValue({ ...props }) {
     return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
@@ -20,7 +37,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
     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 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("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 }) }) }));
+    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 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 }));