@nadicodeai/ui 12.1.96 → 12.1.97

package/dist/components/portal-sidebar-frame.js

@@ -9,6 +9,32 @@ import { cn } from "../lib/utils.js";
 function ItemRow({ item, variant }) {
     return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: item.current, tooltip: item.label, ...(variant ? { variant } : {}), children: [item.icon, _jsx("span", { className: "truncate", children: item.label })] }) }));
 }
+/**
+ * The Portal's navigation frame, without the Portal's routing: the wordmark and
+ * the section name over the collapse control, the Find control with its
+ * shortcut, the labelled nav bands, the band that leads out of the Portal, and
+ * the account at the foot.
+ *
+ * Its regions are separated by the 1 px guide over the line colour, as the
+ * Portal's own shell separates them, so a sidebar region takes no border of its
+ * own.
+ *
+ * The frame carries geometry and brand imagery only. Every word, icon and
+ * active marking arrives as a prop, so the Portal can pass its nav model and
+ * the website can pass a sample of it.
+ *
+ * @family Navigation
+ * @when `PortalSidebarFrame` is the Portal's whole left column, and the website's sample of it.
+ * @instead Nadia's left column belongs to `DesktopAppShell`. Both draw their rows with the same
+ * `SidebarMenuButton` and end with the same `AccountMenu`; neither paints its own selected fill or
+ * its own account block.
+ * @behaviour Wordmark and product name over the collapse control, then Find, the bands, the way out
+ * (Get Nadia) and the account, split by 1 px guides.
+ * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words,
+ * sentence case.
+ * @access The column is a labelled `nav`. Find is a button named with its shortcut. The wordmark is
+ * `role="img"` named nadicode.
+ */
 export function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }) {
     return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsxs("div", { className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto_auto] bg-border *:min-w-0", children: [_jsxs("div", { className: "grid grid-rows-[3.5rem_auto] gap-px bg-border *:bg-sidebar", children: [_jsxs(SidebarHeader, { className: "h-full flex-row items-center justify-between gap-1 px-3 py-0", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0", children: [_jsx(BrandWordmark, { alt: "", className: "h-5 w-28 max-w-full" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })] }), _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" })] }), _jsx("div", { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { variant: "outline", children: [_jsx(Search, { "aria-hidden": "true", className: "text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left text-muted-foreground", children: findLabel }), _jsxs(KbdGroup, { className: "ml-auto", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) }) }) })] }), _jsx(SidebarContent, { className: "bg-sidebar", children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }), footerItem ? (_jsx(SidebarGroup, { className: "border-t bg-sidebar", children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) }) }) })) : null, _jsx(SidebarFooter, { className: "border-t bg-sidebar", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { size: "lg", children: [_jsx(AccountMenuIdentity, { className: "flex-1", identity: account }), _jsx(ChevronsUpDown, { "aria-hidden": "true", className: "ml-auto size-4 text-muted-foreground" })] }) }) }) })] }) }));
 }

package/dist/components/progress.d.ts

@@ -1,17 +1,19 @@
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { type VariantProps } from "class-variance-authority";
-/**
- * The measured bar. Stock shadcn `progress` plus one variant: a product-owned
- * `tone`, because the meters this replaces (usage against an included
- * allowance) have to say whether a full bar is fine or a problem. Tone is a
- * consumer decision, never derived from the measurement. A value past `max`
- * fills the track and takes the over-cap paint, which is the bar saying the
- * allowance is spent — not a second segment.
- */
 declare const progressIndicatorVariants: (props?: ({
     tone?: "default" | "warning" | "critical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>["tone"]>;
+/**
+ * A known amount against a real maximum, with its label and value.
+ *
+ * @family Data
+ * @when A known amount against a real maximum, with its label and value: included runs used against the plan's allowance.
+ * @instead An unknown wait is the waiting line, never a bar with an invented percentage. A run's consumption in a dense spot is a `UsageMeter`. A single figure is a `KpiCard`.
+ * @behaviour A 4 px track in the `line` colour. The fill moves only when the reading changes, on `open`; still under reduced motion. `tone` is the product's threshold, never derived from the value. Past the maximum the bar fills and turns red, whatever the tone.
+ * @words Print the work and its unit in `ProgressValue`: "620 of 1,000".
+ * @access A `progressbar` named by its `ProgressLabel` or `aria-label`, with its value.
+ */
 declare function Progress({ className, children, value, min, max, tone, indicatorColor, ...props }: ProgressPrimitive.Root.Props & {
     tone?: ProgressTone;
     indicatorColor?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE;;;;;;;GAOG;AAEH,QAAA,MAAM,yBAAyB;;8EAc9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAiBxF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,YAAY,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,+BAwBjF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAOD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA8B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,yBAAyB;;8EAc9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAiBxF;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,YAAY,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,+BAwBjF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAOD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA8B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/progress.js

@@ -4,14 +4,6 @@ import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { cva } from "class-variance-authority";
 import { createContext, useContext } from "react";
 import { cn } from "../lib/utils.js";
-/**
- * The measured bar. Stock shadcn `progress` plus one variant: a product-owned
- * `tone`, because the meters this replaces (usage against an included
- * allowance) have to say whether a full bar is fine or a problem. Tone is a
- * consumer decision, never derived from the measurement. A value past `max`
- * fills the track and takes the over-cap paint, which is the bar saying the
- * allowance is spent — not a second segment.
- */
 const progressIndicatorVariants = cva("h-full origin-left scale-x-[var(--progress-scale)] transition-transform duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none rtl:origin-right", {
     variants: {
         tone: {
@@ -30,6 +22,16 @@ const ProgressStateContext = createContext({
     tone: "default",
     overCap: false,
 });
+/**
+ * A known amount against a real maximum, with its label and value.
+ *
+ * @family Data
+ * @when A known amount against a real maximum, with its label and value: included runs used against the plan's allowance.
+ * @instead An unknown wait is the waiting line, never a bar with an invented percentage. A run's consumption in a dense spot is a `UsageMeter`. A single figure is a `KpiCard`.
+ * @behaviour A 4 px track in the `line` colour. The fill moves only when the reading changes, on `open`; still under reduced motion. `tone` is the product's threshold, never derived from the value. Past the maximum the bar fills and turns red, whatever the tone.
+ * @words Print the work and its unit in `ProgressValue`: "620 of 1,000".
+ * @access A `progressbar` named by its `ProgressLabel` or `aria-label`, with its value.
+ */
 function Progress({ className, children, value, min = 0, max = 100, tone = "default", indicatorColor, ...props }) {
     const measured = value !== null && Number.isFinite(value);
     const scale = measured && max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0;
@@ -37,7 +39,7 @@ function Progress({ className, children, value, min = 0, max = 100, tone = "defa
     return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, "data-slot": "progress", "data-tone": tone, "data-over-cap": overCap || undefined, className: cn("flex flex-wrap gap-3", className), ...props, children: _jsxs(ProgressStateContext.Provider, { value: { scale, tone, overCap, indicatorColor }, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
 }
 function ProgressTrack({ className, ...props }) {
-    return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), "data-slot": "progress-track", ...props }));
+    return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-border", className), "data-slot": "progress-track", ...props }));
 }
 function ProgressIndicator({ className, style, ...props }) {
     const { scale, tone, overCap, indicatorColor } = useContext(ProgressStateContext);

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

@@ -1,7 +1,13 @@
 /**
- * A link drawn as a QR code another device can scan: square dark modules on a
- * white tile in every theme, because readers expect dark on light. `label`
- * names what the code opens; the code itself is the image.
+ * A link drawn as a QR code another device can scan.
+ *
+ * @family Data
+ * @when Opening something on a phone from a screen: a mobile sign-in, a download link.
+ * @instead Two screens compared by eye is `PairingCode`. A link a person clicks is a link.
+ * @behaviour Square dark modules on a white tile in every theme, with the quiet zone a reader
+ * needs.
+ * @words The label names what the code opens: *Open Nadia on your phone*.
+ * @access `role="img"` named by `label`.
  */
 declare function QrCode({ value, label, size, className, }: {
     value: string;

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

@@ -1 +1 @@
-{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../../src/components/qr-code.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0BA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../../src/components/qr-code.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0BA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/qr-code.js

@@ -5,9 +5,15 @@ import { cn } from "../lib/utils.js";
 /** The blank border a reader needs around the code, in modules. */
 const QUIET_ZONE = 4;
 /**
- * A link drawn as a QR code another device can scan: square dark modules on a
- * white tile in every theme, because readers expect dark on light. `label`
- * names what the code opens; the code itself is the image.
+ * A link drawn as a QR code another device can scan.
+ *
+ * @family Data
+ * @when Opening something on a phone from a screen: a mobile sign-in, a download link.
+ * @instead Two screens compared by eye is `PairingCode`. A link a person clicks is a link.
+ * @behaviour Square dark modules on a white tile in every theme, with the quiet zone a reader
+ * needs.
+ * @words The label names what the code opens: *Open Nadia on your phone*.
+ * @access `role="img"` named by `label`.
  */
 function QrCode({ value, label, size, className, }) {
     const { box, path } = useMemo(() => {

package/dist/components/radio-group.d.ts

@@ -1,5 +1,20 @@
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+/**
+ * One option of a few, all shown at once.
+ *
+ * @family Choices
+ * @when One of 2 to 6 options that exclude each other, all shown at once.
+ * @instead Options that each need a sentence are choice tiles. Seven or more is a `Select`; a list
+ * to search is a `Combobox`. Another view of the same thing is `Tabs`.
+ * @behaviour One tab stop for the group; the arrows move and choose. The chosen circle fills with
+ * ink and a white 8 px dot. Preselect the safe option when there is one; leave a consequential
+ * choice empty until the person makes it.
+ * @words Options are parallel phrases in sentence case with no end punctuation: *Only me*,
+ * *Everyone in the company*. The legend names the setting; it does not ask a question.
+ * @access `role="radiogroup"` named by its legend, each radio by its label. A disabled option shows
+ * why in its own help line.
+ */
 declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react").JSX.Element;
 declare function RadioGroupItem({ children, className, ...props }: RadioPrimitive.Root.Props): import("react").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/components/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,KAAK,+BAQrE;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,+BAoBnF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,KAAK,+BAQrE;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,+BAoBnF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/radio-group.js

@@ -2,6 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { cn } from "../lib/utils.js";
+/**
+ * One option of a few, all shown at once.
+ *
+ * @family Choices
+ * @when One of 2 to 6 options that exclude each other, all shown at once.
+ * @instead Options that each need a sentence are choice tiles. Seven or more is a `Select`; a list
+ * to search is a `Combobox`. Another view of the same thing is `Tabs`.
+ * @behaviour One tab stop for the group; the arrows move and choose. The chosen circle fills with
+ * ink and a white 8 px dot. Preselect the safe option when there is one; leave a consequential
+ * choice empty until the person makes it.
+ * @words Options are parallel phrases in sentence case with no end punctuation: *Only me*,
+ * *Everyone in the company*. The legend names the setting; it does not ask a question.
+ * @access `role="radiogroup"` named by its legend, each radio by its label. A disabled option shows
+ * why in its own help line.
+ */
 function RadioGroup({ className, ...props }) {
     return (_jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid w-full gap-2", className), ...props }));
 }

package/dist/components/reading-column.d.ts

@@ -1,5 +1,16 @@
 import * as React from "react";
 export type ReadingColumnWidth = "full" | "reading" | "configuration";
+/**
+ * The column a page's content stands in: full, reading or configuration width.
+ *
+ * @family Other
+ * @when Setting a page's measure: `reading` for prose and conversations, `configuration` for
+ * settings, `full` for collections.
+ * @instead A settings page's column is `SettingsPage`'s. A card row is `CardRow`.
+ * @behaviour Centred with a maximum width per kind; full takes the content's width.
+ * @words None of its own.
+ * @access A layout container.
+ */
 declare function ReadingColumn({ width, className, ...props }: React.ComponentProps<"div"> & {
     width?: ReadingColumnWidth;
 }): React.JSX.Element;

package/dist/components/reading-column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reading-column.d.ts","sourceRoot":"","sources":["../../src/components/reading-column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,eAAe,CAAC;AAEtE,iBAAS,aAAa,CAAC,EACrB,KAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,kBAAkB,CAAA;CAAE,qBAc9D;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"reading-column.d.ts","sourceRoot":"","sources":["../../src/components/reading-column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,eAAe,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,kBAAkB,CAAA;CAAE,qBAc9D;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/reading-column.js

@@ -1,5 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+/**
+ * The column a page's content stands in: full, reading or configuration width.
+ *
+ * @family Other
+ * @when Setting a page's measure: `reading` for prose and conversations, `configuration` for
+ * settings, `full` for collections.
+ * @instead A settings page's column is `SettingsPage`'s. A card row is `CardRow`.
+ * @behaviour Centred with a maximum width per kind; full takes the content's width.
+ * @words None of its own.
+ * @access A layout container.
+ */
 function ReadingColumn({ width = "reading", className, ...props }) {
     return (_jsx("div", { "data-slot": "reading-column", "data-width": width, className: cn("mx-auto flex w-full min-w-0 flex-col gap-6", width === "reading" && "max-w-3xl", width === "configuration" && "max-w-4xl", className), ...props }));
 }

package/dist/components/record-identity.d.ts

@@ -1,16 +1,21 @@
 import type { ReactNode } from "react";
+import { type IdentityMarkProps } from "./identity-mark.js";
 /**
  * A record's identity in a row (DESIGN.md "Tables and missing values"): its
- * mark, its name, and under it one muted `detail` line saying what the record
- * is or where it comes from, so the row reads without a column heading. The
- * name holds one line and ends in an ellipsis, whole in its title, unless it
- * is the record's whole text, such as a memory, which `wraps` in full. The
- * detail breaks between words, so a long one, such as a failure inside the
- * row, is read whole.
+ * mark at 32, its name, and under it one muted `detail` line saying what the
+ * record is or where it comes from, so the row reads without a column heading.
+ *
+ * @family Status
+ * @when The first cell of every collection row: the mark, the name, and one muted line saying what the record is or where it comes from, so the row reads without a heading.
+ * @instead An Agent in a gallery is `AgentListRow`; a model is `ModelIdentity`. A descriptive item with prose and actions is `Item`.
+ * @behaviour The name holds one line and ends in an ellipsis, whole in its title, with a `hint` such as an ID read after it. `wraps` only when the name is the whole record, such as a memory. The detail breaks between words, so a failure inside the row is read whole. The table owns the link.
+ * @words The name as the record calls itself. Detail: kind, then relation, three to six words: "Company skill · every Agent has it".
+ * @access The name is the row link's text; the mark is decorative; the title carries the full name.
  */
 declare function RecordIdentity({ name, mark, hint, detail, wraps, }: {
     name: ReactNode;
-    mark?: ReactNode;
+    /** Drawn at 32, whatever size it carries. */
+    mark?: IdentityMarkProps;
     /** Read after the name in its title, such as an identifier the row does not show. */
     hint?: string;
     detail?: ReactNode;

package/dist/components/record-identity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-identity.d.ts","sourceRoot":"","sources":["../../src/components/record-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;GAQG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BA2BA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"record-identity.d.ts","sourceRoot":"","sources":["../../src/components/record-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAGlF;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BA2BA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/record-identity.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdentityMark } from "./identity-mark.js";
 import { cn } from "../lib/utils.js";
 /**
  * A record's identity in a row (DESIGN.md "Tables and missing values"): its
- * mark, its name, and under it one muted `detail` line saying what the record
- * is or where it comes from, so the row reads without a column heading. The
- * name holds one line and ends in an ellipsis, whole in its title, unless it
- * is the record's whole text, such as a memory, which `wraps` in full. The
- * detail breaks between words, so a long one, such as a failure inside the
- * row, is read whole.
+ * mark at 32, its name, and under it one muted `detail` line saying what the
+ * record is or where it comes from, so the row reads without a column heading.
+ *
+ * @family Status
+ * @when The first cell of every collection row: the mark, the name, and one muted line saying what the record is or where it comes from, so the row reads without a heading.
+ * @instead An Agent in a gallery is `AgentListRow`; a model is `ModelIdentity`. A descriptive item with prose and actions is `Item`.
+ * @behaviour The name holds one line and ends in an ellipsis, whole in its title, with a `hint` such as an ID read after it. `wraps` only when the name is the whole record, such as a memory. The detail breaks between words, so a failure inside the row is read whole. The table owns the link.
+ * @words The name as the record calls itself. Detail: kind, then relation, three to six words: "Company skill · every Agent has it".
+ * @access The name is the row link's text; the mark is decorative; the title carries the full name.
  */
 function RecordIdentity({ name, mark, hint, detail, wraps = false, }) {
     // oxlint-disable-next-line anti-slop/no-runtime-typeof -- name is a ReactNode; only a string can be a title attribute.
     const title = typeof name === "string" ? (hint ? `${name} · ${hint}` : name) : undefined;
-    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", "data-slot": "record-identity", children: [mark, _jsxs("span", { className: "grid min-w-0", children: [_jsx("span", { className: cn("min-w-0 font-medium", wraps ? "break-words whitespace-pre-wrap" : "truncate"), title: wraps ? undefined : title, children: name }), detail ? (_jsx("span", { className: "text-xs break-words whitespace-normal text-muted-foreground", "data-slot": "record-identity-detail", children: detail })) : null] })] }));
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", "data-slot": "record-identity", children: [mark ? _jsx(IdentityMark, { ...mark, size: 32 }) : null, _jsxs("span", { className: "grid min-w-0", children: [_jsx("span", { className: cn("min-w-0 font-medium", wraps ? "break-words whitespace-pre-wrap" : "truncate"), title: wraps ? undefined : title, children: name }), detail ? (_jsx("span", { className: "text-xs break-words whitespace-normal text-muted-foreground", "data-slot": "record-identity-detail", children: detail })) : null] })] }));
 }
 export { RecordIdentity };

package/dist/components/record-list.d.ts

@@ -0,0 +1,119 @@
+import type { RowData } from "@tanstack/react-table";
+import { type ReactNode } from "react";
+import { type MenuCommand } from "./action-menu.js";
+import { type DataTableRowLinkProps } from "./data-table.js";
+import { type EmptyStateKind } from "./empty-state.js";
+import type { IdentityMarkProps } from "./identity-mark.js";
+import { type PageCommand } from "./page-actions.js";
+import { type StatusBadgeTone } from "./status-badge.js";
+import { type RowMessage } from "../internal/row-message.js";
+export type { RowMessage };
+export type RecordName = {
+    /** One line, ending in an ellipsis and whole in its title, unless the list `wraps`. */
+    name: string;
+    /** One muted line: what it is or where it comes from. */
+    detail?: ReactNode;
+    /** Its identity mark, drawn at 32. */
+    mark?: IdentityMarkProps;
+};
+export type RecordFact<TRecord> = {
+    id: string;
+    /** The column's name for assistive technology. */
+    label: string;
+    of: (record: TRecord) => ReactNode;
+    /** A phrase that takes the row's spare width; otherwise one line at its own width. */
+    prose?: boolean;
+};
+export type RecordStatus = {
+    label: string;
+    tone: StatusBadgeTone;
+};
+export type RecordTimeColumn<TRecord> = {
+    label: string;
+    of: (record: TRecord) => Date | number | string | null | undefined;
+    /** The time's sentence for this record: "Ran today 07:30", "Next Monday". */
+    phrase: (when: string, record: TRecord) => string;
+    /** What a screen reader hears beside the muted dash where a record has no time. */
+    missing: string;
+    locale?: string;
+};
+export type RecordListFooter = {
+    /** "5 Agents" */
+    count?: ReactNode;
+    /** A bounded server page: "Page 1 of 6" and the way to the others. */
+    pages?: {
+        label: ReactNode;
+        previous: PageCommand;
+        next: PageCommand;
+        pending?: boolean;
+    };
+};
+export type RecordListProps<TRecord extends RowData> = {
+    /** Names the list for assistive technology: "Skills". */
+    label: string;
+    /** Already searched, filtered and ordered; undefined while they load. */
+    records: readonly TRecord[] | undefined;
+    getId: (record: TRecord) => string;
+    name: (record: TRecord) => RecordName;
+    /** The name is the record's whole text, such as a memory: it wraps in full. */
+    wraps?: boolean;
+    facts?: readonly RecordFact<TRecord>[];
+    /** Only for the exception: null for the usual record. */
+    status?: {
+        label: string;
+        of: (record: TRecord) => RecordStatus | null;
+    };
+    time?: RecordTimeColumn<TRecord>;
+    /** The row's one visible command, an outline button before the three dots: "Connect", "Open report". */
+    command?: (record: TRecord) => ReactNode;
+    /** The row's three dots; its first line is `name(record).name`. */
+    menu?: (record: TRecord) => {
+        label: string;
+        commands: readonly MenuCommand[];
+    } | null;
+    /** Names the command column for assistive technology: "Actions". */
+    commandsHeader?: string;
+    /** The record opens its own page: the whole row is one target. */
+    open?: {
+        href: (record: TRecord) => string | null;
+        label: (record: TRecord) => string;
+        renderLink?: (props: DataTableRowLinkProps) => ReactNode;
+    };
+    /** The record's own action failed or was refused: its message inside its row. */
+    state?: (record: TRecord) => RowMessage | null;
+    /** The record being edited: its RowEditForm, inside its row. */
+    editor?: {
+        id: string;
+        render: (record: TRecord) => ReactNode;
+    };
+    /** Names the rows while they load; `label` when left out. */
+    loadingLabel?: string;
+    failed?: EmptyStateKind<"failed">;
+    empty?: EmptyStateKind<"firstUse"> | EmptyStateKind<"nothingYet">;
+    /** Given only while a search or filter is set. */
+    noMatch?: Omit<EmptyStateKind<"noResults">, "kind">;
+    /**
+     * A list that is one section of another page: "Needs attention", "2 of 5 Agents", and the one
+     * line under the title that says what joins the list: "Every Agent of an allowed Nadia joins".
+     */
+    heading?: {
+        title: string;
+        description?: ReactNode;
+        meta?: ReactNode;
+    };
+    footer?: RecordListFooter;
+};
+/**
+ * One line per record, on one resting card: its identity mark and name over
+ * what it is, a few comparable facts, a status only for the exception, when
+ * it happened, the row's one command, and its three dots last.
+ *
+ * @family Compositions
+ * @when A list of records inside another page: an Overview's exceptions, an object page's "Needs attention", any section that lists records a person opens or acts on. A page whose whole job is the list is a `CollectionPage`, which draws this.
+ * @instead Figures compared across records, read by their column headings, are a `DataTable`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`.
+ * @behaviour Each row reads left to right at fixed measures: the mark and name (at most a third of the row), facts on one line, the status in its 150 px slot only when the record is the exception, the time right-aligned in tabular figures with the exact moment on hover, the row command at most 192 px wide with its label cut short, then the three dots, or a muted chevron when the row only opens. On a card too narrow for them (768 px, or 1024 px for seven columns or more or a row command), the facts, the status and the time move under the record's line, leaving out a fact or status the record does not have, and the name and its commands keep theirs. A menu of one command that is not destructive, with no row command, is that command's outline button. With `open` the whole row is one target. A failed or refused action of the record replaces its detail line, with its next steps beside its commands; the record being edited opens its form under its own line. While the records load, three still skeleton rows hold the place; then, first that holds: the failed read, no match, the empty state, the rows. A list with no records and no empty state draws nothing.
+ * @words Every string is the product's: `label` names the list, a time's `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu's `label` reads "More for {record}". A status is the exception's word ("Needs attention"), never "Active" on every row.
+ * @access A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu's `label`, and the menu's first line names the record. The loading rows are a busy status named by `loadingLabel`.
+ */
+export declare function RecordList<TRecord extends RowData>(props: RecordListProps<TRecord>): import("react").JSX.Element | null;
+//# sourceMappingURL=record-list.d.ts.map

package/dist/components/record-list.d.ts.map

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

package/dist/components/record-list.js

@@ -0,0 +1,161 @@
+"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 { DataTable, } from "./data-table.js";
+import { EmptyState } from "./empty-state.js";
+import { PageCommandButton } from "./page-actions.js";
+import { RecordIdentity } from "./record-identity.js";
+import { RecordTime, recordDate } from "./record-time.js";
+import { Skeleton } from "./skeleton.js";
+import { StatusBadge } from "./status-badge.js";
+import { TableCard } from "./table-card.js";
+import { TableValue } from "./table-value.js";
+import { soleMenuButton } from "../internal/record-menu-items.js";
+import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
+const ShownList = createContext(undefined);
+function useShownList() {
+    // SAFETY: only RecordList provides ShownList, with its own props, around the rows of that same RecordList<TRecord>.
+    return useContext(ShownList);
+}
+/*
+ * Each cell is one component for the list'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 list's current props instead.
+ */
+function NameCell({ row }) {
+    const list = useShownList();
+    const shown = list.name(row.original);
+    const state = list.state?.(row.original);
+    return (_jsx(RecordIdentity, { detail: state ? _jsx(RowMessageLine, { state: state }) : shown.detail, mark: shown.mark, name: shown.name, wraps: list.wraps }));
+}
+function FactCell({ column, row }) {
+    const fact = useShownList().facts?.find((each) => each.id === column.id);
+    return _jsx(_Fragment, { children: fact?.of(row.original) });
+}
+function StatusCell({ row }) {
+    const shown = useShownList().status?.of(row.original);
+    return (_jsx("div", { className: "w-37.5", children: shown ? _jsx(StatusBadge, { label: shown.label, tone: shown.tone }) : null }));
+}
+function TimeCell({ row }) {
+    const time = useShownList().time;
+    if (!time)
+        return null;
+    const record = row.original;
+    const at = recordDate(time.of(record));
+    return (_jsx("div", { className: "w-23 text-right text-muted-foreground tabular-nums", children: _jsx(TableValue, { missingLabel: time.missing, value: at ? (_jsx(RecordTime, { at: at, locale: time.locale, phrase: (when) => time.phrase(when, record) })) : null }) }));
+}
+function CommandsCell({ row }) {
+    const list = useShownList();
+    const record = row.original;
+    const state = list.state?.(record);
+    const menu = list.menu?.(record);
+    const commands = menu?.commands ?? [];
+    const menuButton = list.command ? undefined : soleMenuButton(commands);
+    const command = menuButton ? (_jsx(PageCommandButton, { command: menuButton, variant: "outline" })) : (list.command?.(record));
+    const end = menu && commands.length > 0 && !menuButton ? (_jsx(ActionMenu, { commands: commands, label: menu.label, record: list.name(record).name })) : list.open?.href(record) && !state ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })) : null;
+    if (!command && !state && !end)
+        return null;
+    return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [command ? (_jsx("div", { className: "flex max-w-48 min-w-28 justify-end [&>*]:max-w-full [&>*]:min-w-0 [&>*]:shrink [&>*>span:not([data-icon])]:truncate", children: command })) : null, state ? _jsx(RowMessageActions, { state: state }) : null, end] }));
+}
+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 min-h-14 items-center gap-4 pr-2 pl-4", children: [_jsx(Skeleton, { className: "size-8 shrink-0" }), _jsxs("div", { className: "grid min-w-0 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-23" })] }, index))) }));
+}
+function Pages({ pages }) {
+    const waiting = (command) => pages.pending ? { ...command, disabled: true } : command;
+    return (_jsxs("div", { "aria-busy": pages.pending ? true : undefined, className: "flex items-center gap-3", children: [_jsx("span", { className: "tabular-nums", children: pages.label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PageCommandButton, { command: waiting(pages.previous), variant: "outline" }), _jsx(PageCommandButton, { command: waiting(pages.next), variant: "outline" })] })] }));
+}
+function recordColumns(props) {
+    const columns = [
+        {
+            id: "name",
+            header: props.label,
+            meta: props.wraps ? { wraps: true } : undefined,
+            cell: NameCell,
+        },
+    ];
+    for (const fact of props.facts ?? []) {
+        columns.push({
+            id: fact.id,
+            header: fact.label,
+            accessorFn: fact.of,
+            meta: { ...(fact.prose ? { prose: true } : { narrow: true }), optional: true },
+            cell: FactCell,
+        });
+    }
+    if (props.status) {
+        columns.push({
+            id: "status",
+            header: props.status.label,
+            accessorFn: props.status.of,
+            meta: { narrow: true, optional: true },
+            cell: StatusCell,
+        });
+    }
+    if (props.time) {
+        columns.push({ id: "time", header: props.time.label, meta: { narrow: true }, cell: TimeCell });
+    }
+    if (props.menu || props.command || props.open || props.state) {
+        columns.push({
+            id: "commands",
+            header: props.commandsHeader ?? props.label,
+            meta: { narrow: true },
+            cell: CommandsCell,
+        });
+    }
+    return columns;
+}
+function RecordRows(props) {
+    const columns = recordColumns(props);
+    const table = {
+        columns,
+        data: [...props.records],
+        embedded: true,
+        empty: { kind: "nothingYet", message: props.label },
+        getRowId: props.getId,
+        compactLayout: columns.length >= 7 || props.command !== undefined
+            ? "wide"
+            : "standard",
+        primaryColumns: ["name", "commands"],
+        showColumnHeaders: false,
+        rowEditor: props.editor ? { rowId: props.editor.id, render: props.editor.render } : undefined,
+        tableLabel: props.label,
+    };
+    return props.open ? (_jsx(DataTable, { ...table, primaryColumnId: "name", renderRowLink: props.open.renderLink, rowHref: props.open.href, rowLabel: props.open.label })) : (_jsx(DataTable, { ...table }));
+}
+/**
+ * One line per record, on one resting card: its identity mark and name over
+ * what it is, a few comparable facts, a status only for the exception, when
+ * it happened, the row's one command, and its three dots last.
+ *
+ * @family Compositions
+ * @when A list of records inside another page: an Overview's exceptions, an object page's "Needs attention", any section that lists records a person opens or acts on. A page whose whole job is the list is a `CollectionPage`, which draws this.
+ * @instead Figures compared across records, read by their column headings, are a `DataTable`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`.
+ * @behaviour Each row reads left to right at fixed measures: the mark and name (at most a third of the row), facts on one line, the status in its 150 px slot only when the record is the exception, the time right-aligned in tabular figures with the exact moment on hover, the row command at most 192 px wide with its label cut short, then the three dots, or a muted chevron when the row only opens. On a card too narrow for them (768 px, or 1024 px for seven columns or more or a row command), the facts, the status and the time move under the record's line, leaving out a fact or status the record does not have, and the name and its commands keep theirs. A menu of one command that is not destructive, with no row command, is that command's outline button. With `open` the whole row is one target. A failed or refused action of the record replaces its detail line, with its next steps beside its commands; the record being edited opens its form under its own line. While the records load, three still skeleton rows hold the place; then, first that holds: the failed read, no match, the empty state, the rows. A list with no records and no empty state draws nothing.
+ * @words Every string is the product's: `label` names the list, a time's `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu's `label` reads "More for {record}". A status is the exception's word ("Needs attention"), never "Active" on every row.
+ * @access A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu's `label`, and the menu's first line names the record. The loading rows are a busy status named by `loadingLabel`.
+ */
+export function RecordList(props) {
+    const { records, heading, footer } = props;
+    let body;
+    if (props.failed) {
+        body = _jsx(EmptyState, { ...props.failed, scope: "card" });
+    }
+    else if (records === undefined) {
+        body = _jsx(LoadingRecords, { label: props.loadingLabel ?? props.label });
+    }
+    else if (records.length === 0 && props.noMatch) {
+        body = _jsx(EmptyState, { kind: "noResults", ...props.noMatch, scope: "card" });
+    }
+    else if (records.length === 0) {
+        if (!props.empty)
+            return null;
+        body = _jsx(EmptyState, { ...props.empty, headingLevel: heading ? 3 : 2, scope: "card" });
+    }
+    else {
+        body = _jsx(RecordRows, { ...props, records: records });
+    }
+    return (_jsx(TableCard, { actions: heading?.meta ? (_jsx("span", { className: "text-body-sm text-muted-foreground", children: heading.meta })) : undefined, footer: footer?.pages ? _jsx(Pages, { pages: footer.pages }) : undefined, footerHint: footer?.count, description: heading?.description, title: heading?.title, children: _jsx(ShownList.Provider, { value: props, children: body }) }));
+}