@nadicodeai/ui 12.1.95 → 12.1.97

package/dist/components/chart.js

@@ -34,6 +34,16 @@ function useChart() {
     }
     return context;
 }
+/**
+ * shadcn's chart foundation: the Recharts container, its tooltip and its legend, themed by the series config.
+ *
+ * @family Charts
+ * @when Inside a kit plot only: `ChartBarStacked`, `ChartAreaStacked`, `ChartBarMultiple`, `ChartBarHorizontal`, `ChartSparkline` render through it.
+ * @instead A page renders a kit plot in its `ChartCard`, never this container or a Recharts import of its own. A chart the kit lacks is pulled from the shadcn registry into the kit first.
+ * @behaviour Maps each series id to its colour token, sizes the plot to its frame, and draws the tooltip with the exact figure and the legend below the plot: an 8 px dot, 6 px to the name, 16 px between, left-aligned and wrapping.
+ * @words None of its own: series labels come from the config the plot builds from the page's words.
+ * @access The plot it holds is named by the card title through `aria-labelledby`; Recharts' accessibility layer makes it keyboard focusable.
+ */
 function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
     const uniqueId = React.useId();
     const chartId = sanitizeChartToken(`chart-${id ?? uniqueId.replace(/:/g, "")}`);
@@ -53,7 +63,8 @@ const ChartStyle = ({ id, config }) => {
 ${prefix} [data-chart="${chartId}"] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
-                const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+                const themeColors = itemConfig.theme;
+                const color = themeColors?.[theme] ?? itemConfig.color;
                 return chartColorDeclaration(key, color);
             })
                 .join("\n")}
@@ -72,7 +83,9 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
         const [item] = payload;
         const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const value = !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label;
+        const value = 
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- the tooltip label is a ReactNode; only a string can key the chart config.
+        !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label;
         if (labelFormatter) {
             return (_jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
         }
@@ -96,7 +109,9 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                                         "w-1": indicator === "line",
                                         "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
                                         "my-0.5": nestLabel && indicator === "dashed",
-                                    }), style: {
+                                    }), 
+                                    // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+                                    style: {
                                         "--color-bg": indicatorColor,
                                         "--color-border": indicatorColor,
                                     } }))), _jsxs("div", { className: cn("flex flex-1 justify-between gap-4 leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
@@ -121,19 +136,27 @@ function ChartLegendContent({ className, hideIcon = false, payload, nameKey, })
         }) }));
 }
 function getPayloadConfigFromPayload(config, payload, key) {
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- a Recharts tooltip or legend entry carries its series datum untyped; packages/ui declares no schema library, so this check is its parser where it enters the chart.
     if (typeof payload !== "object" || payload === null) {
         return undefined;
     }
-    const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+    const payloadPayload = 
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- a Recharts tooltip or legend entry carries its series datum untyped; packages/ui declares no schema library, so this check is its parser where it enters the chart.
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
         ? payload.payload
         : undefined;
     let configLabelKey = key;
+    // SAFETY: each `key in …` test guards the indexed reads after it, so key names a property of the object it indexes.
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- a Recharts tooltip or legend entry carries its series datum untyped; packages/ui declares no schema library, so this check is its parser where it enters the chart.
     if (key in payload && typeof payload[key] === "string") {
+        // SAFETY: the typeof check in this branch's condition read a string at this key.
         configLabelKey = payload[key];
     }
     else if (payloadPayload &&
         key in payloadPayload &&
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- a Recharts tooltip or legend entry carries its series datum untyped; packages/ui declares no schema library, so this check is its parser where it enters the chart.
         typeof payloadPayload[key] === "string") {
+        // SAFETY: the typeof check in this branch's condition read a string at this key.
         configLabelKey = payloadPayload[key];
     }
     return configLabelKey in config ? config[configLabelKey] : config[key];

package/dist/components/checkbox.d.ts

@@ -1,4 +1,19 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+/**
+ * A box that is checked, unchecked or mixed.
+ *
+ * @family Choices
+ * @when Independent yes-or-no choices in a form, an acknowledgment before a step, selecting rows.
+ * @instead A setting that is on or off is a `Switch`. One of several is a `RadioGroup`. Several
+ * values from a long list is a multi-select.
+ * @behaviour Unchecked is only the input-grey edge, showing the surface beneath. Checked fills with
+ * ink and a 14 px check; mixed shows a minus and is worked out from the rows below. The label
+ * toggles it too, and on touch the target is 44 px. A required acknowledgment is checked on submit.
+ * @words The label says what is true when checked, positively: *Send a copy to the person who
+ * asked*, not *Don't send*. A related set gets a legend.
+ * @access `role="checkbox"` with `aria-checked` true, false or mixed. A row's box is named for its
+ * record: *Select pec@acme.it*. A set sits in a `FieldSet` with its legend.
+ */
 declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;
 export { Checkbox };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAKxE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,+BAmBtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAKxE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,+BAmBtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox.js

@@ -3,6 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cn } from "../lib/utils.js";
 import { CheckIcon, MinusIcon } from "lucide-react";
+/**
+ * A box that is checked, unchecked or mixed.
+ *
+ * @family Choices
+ * @when Independent yes-or-no choices in a form, an acknowledgment before a step, selecting rows.
+ * @instead A setting that is on or off is a `Switch`. One of several is a `RadioGroup`. Several
+ * values from a long list is a multi-select.
+ * @behaviour Unchecked is only the input-grey edge, showing the surface beneath. Checked fills with
+ * ink and a 14 px check; mixed shows a minus and is worked out from the rows below. The label
+ * toggles it too, and on touch the target is 44 px. A required acknowledgment is checked on submit.
+ * @words The label says what is true when checked, positively: *Send a copy to the person who
+ * asked*, not *Don't send*. A related set gets a legend.
+ * @access `role="checkbox"` with `aria-checked` true, false or mixed. A row's box is named for its
+ * record: *Select pec@acme.it*. A set sits in a `FieldSet` with its legend.
+ */
 function Checkbox({ className, ...props }) {
     return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-xs border border-input transition-colors group-has-disabled/field:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? _jsx(MinusIcon, {}) : _jsx(CheckIcon, {}) })) }) }));
 }

package/dist/components/code-block.d.ts

@@ -1,4 +1,19 @@
 import { type CopyButtonProps } from "./copy-button.js";
+/**
+ * Several lines of exact text to read or copy.
+ *
+ * @family Data
+ * @when Several lines a person reads or copies exactly: a configuration, static JSON, a command
+ * sequence.
+ * @instead One short value to copy is a read-only input with a `CopyButton`. A before and after is
+ * `FileDiff`. Code in a conversation is her `MarkdownText`.
+ * @behaviour Read-only, no wrapping, scrolls in both directions up to 384 px. Copy takes the exact
+ * text, says Copied only on success and says when it failed. No syntax colour, no line numbers.
+ * @words The real filename, or an honest label. The language as its common name: *JSON*. Copy,
+ * Copied, Couldn't copy.
+ * @access The text area is named by its `label`; the copy button names its target (*Copy mcp.json*)
+ * and announces the result.
+ */
 export declare function CodeBlock({ code, label, filename, language, copyLabel, copiedLabel, copyFailedLabel, }: {
     code: string;
     label: string;

package/dist/components/code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAQ5E,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,+BAiCzE"}
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAQ5E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,+BAiCzE"}

package/dist/components/code-block.js

@@ -2,6 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CopyButton } from "./copy-button.js";
 import { InputGroup, InputGroupAddon, InputGroupText, InputGroupTextarea, } from "./input-group.js";
+/**
+ * Several lines of exact text to read or copy.
+ *
+ * @family Data
+ * @when Several lines a person reads or copies exactly: a configuration, static JSON, a command
+ * sequence.
+ * @instead One short value to copy is a read-only input with a `CopyButton`. A before and after is
+ * `FileDiff`. Code in a conversation is her `MarkdownText`.
+ * @behaviour Read-only, no wrapping, scrolls in both directions up to 384 px. Copy takes the exact
+ * text, says Copied only on success and says when it failed. No syntax colour, no line numbers.
+ * @words The real filename, or an honest label. The language as its common name: *JSON*. Copy,
+ * Copied, Couldn't copy.
+ * @access The text area is named by its `label`; the copy button names its target (*Copy mcp.json*)
+ * and announces the result.
+ */
 export function CodeBlock({ code, label, filename, language, copyLabel, copiedLabel, copyFailedLabel, }) {
     return (_jsxs(InputGroup, { children: [_jsx(InputGroupTextarea, { "aria-label": label, value: code, readOnly: true, wrap: "off", spellCheck: false, className: "max-h-96 min-h-0 overflow-auto font-code text-code md:text-code" }), _jsxs(InputGroupAddon, { align: "block-start", className: "justify-between border-b border-border", children: [_jsx(InputGroupText, { title: filename ?? label, className: "min-w-0 truncate font-label-mono text-label-mono", children: filename ?? label }), _jsx(CopyButton, { value: code, copyLabel: copyLabel, copiedLabel: copiedLabel, copyFailedLabel: copyFailedLabel, size: "icon-xs" })] }), language ? (_jsx(InputGroupAddon, { align: "block-end", className: "border-t border-border", children: _jsx(InputGroupText, { children: language }) })) : null] }));
 }

package/dist/components/collapsible.d.ts

@@ -1,4 +1,16 @@
 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.
+ */
 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;

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,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,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"}

package/dist/components/collapsible.js

@@ -1,5 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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.
+ */
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }

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

@@ -26,8 +26,21 @@ export type CollectionFilterCopy = {
     back: string;
     remove: string;
 };
-export declare function CollectionFilters({ facets, copy, }: {
+export type CollectionFiltersProps = {
     facets: readonly CollectionFilter[];
     copy: CollectionFilterCopy;
-}): React.JSX.Element | null;
+};
+/**
+ * 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 declare function CollectionFilters({ facets, copy }: CollectionFiltersProps): React.JSX.Element | null;
 //# sourceMappingURL=collection-filters.d.ts.map

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,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,4BAuFA"}
+{"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"}

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":"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"}
+{"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"}