@nadicodeai/ui 12.1.89 → 12.1.91

package/dist/components/agent-profile.d.ts

@@ -4,11 +4,16 @@ import type { AgentOrbSize } from "./agent-orb.js";
 import { type PageActionsProps } from "./page-actions.js";
 import { RadioGroup } from "./radio-group.js";
 import { type StatusBadgeTone } from "./status-badge.js";
-/** A fact on the card whose label stays in place when its value is missing. */
+/**
+ * A fact on the card whose label stays in place when its value is missing.
+ * `pending` draws the value's place while it is read, so a value not yet known
+ * never reads as missing.
+ */
 export type AgentProfileFact = {
     label: string;
     value?: string | null;
     missingLabel: string;
+    pending?: boolean;
 };
 export type AgentProfileCardProps = {
     /** Draws the Agent's orb at the size the card gives it. */
@@ -27,9 +32,10 @@ export type AgentProfileCardProps = {
         ref?: Ref<HTMLButtonElement>;
     } | undefined;
     /**
-     * Her name, description and look as fields, drawn under her name in place of
-     * her description and facts while the person edits; the card's footer saves
-     * them with the rest of the card.
+     * Her name, description and look as fields, drawn in place of her name and
+     * description while the person edits, with her facts kept under them; her
+     * name stays the page's heading for assistive technology, and the card's
+     * footer saves the fields with the rest of the card.
      */
     editor?: ReactNode;
     state: {
@@ -57,7 +63,8 @@ export type AgentProfileCardProps = {
 /**
  * The card an Agent's Profile opens with in every product (DESIGN.md, "Page
  * compositions"): on the left her orb at 64, her name with the pencil, her
- * description and her facts, which the pencil turns into fields in place; on
+ * description and her facts; the pencil turns her name and description into
+ * fields in place, above the same facts; on
  * the right her model and her reasoning; the card's footer saves both sides. Each product brings its own data,
  * fields and words; the shape, sizes and order are this component's.
  */

package/dist/components/agent-profile.d.ts.map

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

package/dist/components/agent-profile.js

@@ -11,31 +11,31 @@ import { ModelIdentity } from "./model-identity.js";
 import { PageActionsRow } from "./page-actions.js";
 import { RadioGroup } from "./radio-group.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "./select.js";
+import { Skeleton } from "./skeleton.js";
 import { StatusBadge } from "./status-badge.js";
 import { TableValue } from "./table-value.js";
 import { toggleVariants } from "./toggle.js";
 const AGENT_PROFILE_ORB_SIZE = 64;
+function FactValue({ fact }) {
+    return fact.pending ? (_jsx(Skeleton, { "aria-busy": "true", className: "h-4 w-24" })) : (_jsx(TableValue, { missingLabel: fact.missingLabel, value: fact.value }));
+}
 /**
  * The card an Agent's Profile opens with in every product (DESIGN.md, "Page
  * compositions"): on the left her orb at 64, her name with the pencil, her
- * description and her facts, which the pencil turns into fields in place; on
+ * description and her facts; the pencil turns her name and description into
+ * fields in place, above the same facts; on
  * the right her model and her reasoning; the card's footer saves both sides. Each product brings its own data,
  * fields and words; the shape, sizes and order are this component's.
  */
 export function AgentProfileCard({ orb, name, description, descriptionMissingLabel, edit, editor, state, activity, origin, settings, footer, footerHint, actions, headingProps, }) {
     const facts = [
         { label: state.label, value: _jsx(StatusBadge, { label: state.text, tone: state.tone }) },
-        {
-            label: activity.label,
-            value: _jsx(TableValue, { missingLabel: activity.missingLabel, value: activity.value }),
-        },
-        {
-            label: origin.label,
-            value: _jsx(TableValue, { missingLabel: origin.missingLabel, value: origin.value }),
-        },
+        { label: activity.label, value: _jsx(FactValue, { fact: activity }) },
+        { label: origin.label, value: _jsx(FactValue, { fact: origin }) },
     ];
+    const factList = (_jsx("dl", { className: "mt-nadicode-sm flex min-w-0 flex-wrap gap-x-nadicode-lg gap-y-nadicode-sm", "data-slot": "agent-profile-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: "flex min-h-6 min-w-0 items-center text-sm", children: fact.value })] }, fact.label))) }));
     const text = description?.trim();
-    return (_jsxs(Card, { className: "@container/agent-profile min-w-0", render: _jsx("section", { "aria-labelledby": headingProps?.id }), "data-slot": "agent-profile", children: [_jsxs(CardContent, { className: "grid min-w-0 gap-nadicode-lg @3xl/agent-profile:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)] @3xl/agent-profile:gap-nadicode-xl", children: [_jsxs("div", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-nadicode-md", children: [_jsx("div", { className: "shrink-0", children: orb(AGENT_PROFILE_ORB_SIZE) }), editor ? (_jsxs("div", { className: "grid min-w-0 gap-nadicode-md", "data-slot": "agent-profile-editor", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 text-heading-md break-words text-foreground outline-none", headingProps?.className), children: name }), editor] })) : (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-1 gap-y-nadicode-sm", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 text-heading-md break-words text-foreground outline-none", headingProps?.className), children: name }), edit ? (_jsx(Button, { "aria-label": edit.label, onClick: edit.onClick, ref: edit.ref, size: "icon", title: edit.label, type: "button", variant: "ghost", children: _jsx(PencilIcon, { "aria-hidden": "true", "data-icon": true }) })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-nadicode-sm", "data-slot": "agent-profile-actions", children: _jsx(PageActionsRow, { ...actions }) })) : null] }), _jsx("p", { className: "line-clamp-2 min-w-0 text-sm text-muted-foreground", title: text, children: _jsx(TableValue, { missingLabel: descriptionMissingLabel, value: text }) }), _jsx("dl", { className: "mt-nadicode-sm flex min-w-0 flex-wrap gap-x-nadicode-lg gap-y-nadicode-sm", "data-slot": "agent-profile-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: "flex min-h-6 min-w-0 items-center text-sm", children: fact.value })] }, fact.label))) })] }))] }), settings ? (_jsx("div", { className: "grid min-w-0 content-start gap-nadicode-md border-t border-border pt-nadicode-md @3xl/agent-profile:border-t-0 @3xl/agent-profile:border-l @3xl/agent-profile:pt-0 @3xl/agent-profile:pl-nadicode-lg", "data-slot": "agent-profile-settings", children: settings })) : null] }), _jsx(FooterStrip, { hint: footerHint, hintSlot: "agent-profile-hint", children: footer })] }));
+    return (_jsxs(Card, { className: "@container/agent-profile min-w-0", render: _jsx("section", { "aria-labelledby": headingProps?.id }), "data-slot": "agent-profile", children: [_jsxs(CardContent, { className: "grid min-w-0 gap-nadicode-lg @3xl/agent-profile:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)] @3xl/agent-profile:gap-nadicode-xl", children: [_jsxs("div", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-nadicode-md", children: [_jsx("div", { className: "shrink-0", children: orb(AGENT_PROFILE_ORB_SIZE) }), editor ? (_jsxs("div", { className: "grid min-w-0 gap-nadicode-md", "data-slot": "agent-profile-editor", children: [_jsx("h1", { ...headingProps, className: cn("sr-only", headingProps?.className), children: name }), editor, factList] })) : (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-1 gap-y-nadicode-sm", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 text-heading-md break-words text-foreground outline-none", headingProps?.className), children: name }), edit ? (_jsx(Button, { "aria-label": edit.label, onClick: edit.onClick, ref: edit.ref, size: "icon", title: edit.label, type: "button", variant: "ghost", children: _jsx(PencilIcon, { "aria-hidden": "true", "data-icon": true }) })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-nadicode-sm", "data-slot": "agent-profile-actions", children: _jsx(PageActionsRow, { ...actions }) })) : null] }), _jsx("p", { className: "line-clamp-2 min-w-0 text-sm text-muted-foreground", title: text, children: _jsx(TableValue, { missingLabel: descriptionMissingLabel, value: text }) }), factList] }))] }), settings ? (_jsx("div", { className: "grid min-w-0 content-start gap-nadicode-md border-t border-border pt-nadicode-md @3xl/agent-profile:border-t-0 @3xl/agent-profile:border-l @3xl/agent-profile:pt-0 @3xl/agent-profile:pl-nadicode-lg", "data-slot": "agent-profile-settings", children: settings })) : null] }), _jsx(FooterStrip, { hint: footerHint, hintSlot: "agent-profile-hint", children: footer })] }));
 }
 /**
  * A model chosen from a list: the trigger and every option read the model the

package/dist/components/catalog-entry.d.ts

@@ -1,4 +1,6 @@
 import type * as React from "react";
+import { type RowMessage } from "../internal/row-message.js";
+export type { RowMessage };
 /**
  * The line icon a catalog entry names. A name outside `CATALOG_ICONS`, or
  * none, draws the sparkles every unnamed entry shares.
@@ -17,15 +19,16 @@ export declare function CatalogEntryList({ children, className, columns, }: {
 }): React.JSX.Element;
 /**
  * One entry of a Library shelf: its kind's tile, its name, one line of
- * description, and at the trailing end what the viewer can do with it. A
- * failure of that action sits under the entry, in `notice`. The caller writes
- * the entry's `<li>`.
+ * description, and at the trailing end what the viewer can do with it. When
+ * that action failed or cannot run, `state` puts its message in the
+ * description's place and its actions before the entry's own, inside the entry. The
+ * caller writes the entry's `<li>`.
  */
-export declare function CatalogEntryRow({ actions, description, media, notice, title, }: {
+export declare function CatalogEntryRow({ actions, description, media, state, title, }: {
     actions?: React.ReactNode;
     description: React.ReactNode;
     media: React.ReactNode;
-    notice?: React.ReactNode;
+    state?: RowMessage | null;
     title: React.ReactNode;
 }): React.JSX.Element;
 //# sourceMappingURL=catalog-entry.d.ts.map

package/dist/components/catalog-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-entry.d.ts","sourceRoot":"","sources":["../../src/components/catalog-entry.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AA+CpC;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,qBAGxE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,OAAW,GACZ,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,qBASA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,WAAW,EACX,KAAK,EACL,MAAM,EACN,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBAcA"}
+{"version":3,"file":"catalog-entry.d.ts","sourceRoot":"","sources":["../../src/components/catalog-entry.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAYpC,OAAO,EAAE,KAAK,UAAU,EAAqC,MAAM,wBAAwB,CAAC;AAE5F,YAAY,EAAE,UAAU,EAAE,CAAC;AAoC3B;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,qBAGxE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,OAAW,GACZ,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,qBASA;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBAqBA"}

package/dist/components/catalog-entry.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Briefcase, Calculator, Calendar, FileCheck, FileSearch, FileText, Globe, Inbox, Landmark, Languages, ListChecks, Mail, MessageCircle, Mic, NotebookPen, Phone, Presentation, Receipt, Scale, Send, ShieldCheck, Sparkles, Truck, Users, Wallet, } from "lucide-react";
 import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "./item.js";
+import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
 import { cn } from "../lib/utils.js";
 const ICONS = {
     "book-open": BookOpen,
@@ -50,10 +51,12 @@ export function CatalogEntryList({ children, className, columns = 1, }) {
 }
 /**
  * One entry of a Library shelf: its kind's tile, its name, one line of
- * description, and at the trailing end what the viewer can do with it. A
- * failure of that action sits under the entry, in `notice`. The caller writes
- * the entry's `<li>`.
+ * description, and at the trailing end what the viewer can do with it. When
+ * that action failed or cannot run, `state` puts its message in the
+ * description's place and its actions before the entry's own, inside the entry. The
+ * caller writes the entry's `<li>`.
  */
-export function CatalogEntryRow({ actions, description, media, notice, title, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(Item, { children: [_jsx(ItemMedia, { children: media }), _jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { children: title }), _jsx(ItemDescription, { className: "line-clamp-1", children: description })] }), actions ? _jsx(ItemActions, { children: actions }) : null] }), notice] }));
+export function CatalogEntryRow({ actions, description, media, state, title, }) {
+    const controls = state ? (_jsxs(_Fragment, { children: [_jsx(RowMessageActions, { state: state }), actions] })) : (actions);
+    return (_jsxs(Item, { children: [_jsx(ItemMedia, { children: media }), _jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { children: title }), _jsx(ItemDescription, { className: state ? undefined : "line-clamp-1", children: state ? _jsx(RowMessageLine, { state: state }) : description })] }), controls ? _jsx(ItemActions, { children: controls }) : null] }));
 }

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

@@ -0,0 +1,125 @@
+import type { RowData } from "@tanstack/react-table";
+import { type ReactElement, type ReactNode } from "react";
+import { type CollectionSortProps } from "./collection-sort.js";
+import { type DataTableRowLinkProps } from "./data-table.js";
+import { type EmptyStateProps } 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. */
+    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;
+    };
+    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;
+    };
+};
+/**
+ * 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.
+ */
+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

@@ -0,0 +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;AAsJF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,+BA4F1F"}

package/dist/components/collection-page.js

@@ -0,0 +1,149 @@
+"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 { 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 { 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() {
+    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)))] }));
+}
+/**
+ * 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.
+ */
+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 }) })] }));
+}

package/dist/components/data-table.d.ts

@@ -135,14 +135,23 @@ type DataTableBaseProps<TData extends RowData> = {
     renderToolbar?: (slots: DataTableToolbarSlots) => React.ReactNode;
     /** Wraps the card, such as a frame that keeps it readable while new data loads. */
     wrapCard?: (card: React.ReactNode) => React.ReactNode;
+    /**
+     * The record being edited and its form, drawn inside its row under the
+     * record's own line (DESIGN.md "Menus and commands"); `rowId` is the
+     * `getRowId` of that record. The form is a `RowEditForm`.
+     */
+    rowEditor?: {
+        rowId: string;
+        render: (row: TData) => React.ReactNode;
+    };
 };
 type DataTableRowNav<TData extends RowData> = {
     rowHref?: undefined;
     rowLabel?: undefined;
     primaryColumnId?: undefined;
 } | {
-    /** Makes each row navigable through exactly one link placed on the primary cell. */
-    rowHref: (row: TData) => string;
+    /** Makes each row navigable through exactly one link placed on the primary cell; `null` for a row that opens nothing. */
+    rowHref: (row: TData) => string | null;
     /** Purposeful, localized accessible name for the row link (e.g. "Open Studio Rossi"). */
     rowLabel: (row: TData) => string;
     /** Column id that carries the link; defaults to the row's first visible column. */
@@ -150,6 +159,6 @@ type DataTableRowNav<TData extends RowData> = {
 };
 export type DataTableProps<TData extends RowData> = DataTableBaseProps<TData> & DataTableRowNav<TData>;
 export declare function columnMenuLabel<TData extends RowData, TValue extends CellData = CellData>(column: DataTableColumn<TData, TValue>): string;
-export declare function DataTable<TData extends RowData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders, density, interactive, embedded, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink, renderToolbar, wrapCard, }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData extends RowData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders, density, interactive, embedded, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink, renderToolbar, wrapCard, rowEditor, }: DataTableProps<TData>): React.JSX.Element;
 export {};
 //# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

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

package/dist/components/data-table.js

@@ -137,7 +137,7 @@ const defaultRowLink = (props) => _jsx("a", { ...props });
 function DefaultToolbar({ actions }) {
     return actions ? _jsx(CollectionToolbar, { label: "", actions: actions }) : null;
 }
-export function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders = true, density = "comfortable", interactive = true, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, }) {
+export function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders = true, density = "comfortable", interactive = true, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, rowEditor, }) {
     const [sorting, setSorting] = React.useState([]);
     const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnVisibility, setColumnVisibility] = React.useState({});
@@ -220,7 +220,7 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
                                 ...(identity ? { onFocus: titleWhenCut, onPointerEnter: titleWhenCut } : {}),
                                 children: content,
                             })) : identity ? (_jsx("div", { className: IDENTITY_CONTENT_CLASS, onFocus: titleWhenCut, onPointerEnter: titleWhenCut, children: content })) : prose ? (_jsx("div", { className: PROSE_FRAME_CLASS, children: _jsx("div", { className: PROSE_CONTENT_CLASS, onFocus: titleWhenCut, onPointerEnter: titleWhenCut, children: content }) })) : (content) }, cell.id));
-                    }) }), detailCells.length > 0 && shownLayout !== "columns" ? (_jsx(TableDetailRow, { layout: compactLayout, colSpan: visibleCells.filter((cell) => !collapseClass(cell.column.id, primaryColumns, compactLayout)).length, facts: detailCells.map((cell) => ({
+                    }) }), rowEditor?.rowId === row.id ? (_jsx(TableRow, { "data-slot": "table-row-editor", className: "in-[tbody]:hover:bg-transparent", children: _jsx(TableCell, { colSpan: visibleCells.length, className: "p-0 whitespace-normal", children: rowEditor.render(row.original) }) })) : null, detailCells.length > 0 && shownLayout !== "columns" ? (_jsx(TableDetailRow, { layout: compactLayout, colSpan: visibleCells.filter((cell) => !collapseClass(cell.column.id, primaryColumns, compactLayout)).length, facts: detailCells.map((cell) => ({
                         id: cell.id,
                         label: columnMenuLabel(cell.column),
                         numeric: isNumericColumn(cell.column),

package/dist/components/form-dialog.d.ts

@@ -1,4 +1,9 @@
-import type { FormDrawerProps, FormDrawerFormProps } from "./form-drawer.js";
-export declare function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }: FormDrawerProps): import("react").JSX.Element;
-export declare function FormDialogForm({ cancelLabel, submit, notice, children, ...form }: FormDrawerFormProps): import("react").JSX.Element;
+import type { FormSurfaceProps } from "./form-drawer.js";
+import { type FormProps } from "../internal/form-submit.js";
+export type FormDialogProps = FormSurfaceProps & {
+    /** Its form's save is running: the dialog stays open until it settles. */
+    pending?: boolean;
+};
+export declare function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, pending, }: FormDialogProps): import("react").JSX.Element;
+export declare function FormDialogForm({ cancelLabel, submit, notice, children, ...form }: FormProps): import("react").JSX.Element;
 //# sourceMappingURL=form-dialog.d.ts.map

package/dist/components/form-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAErF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE,eAAe,+BAiBjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BA2BrB"}
+{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,OAAe,GAChB,EAAE,eAAe,+BAuBjB;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAsB3F"}

package/dist/components/form-dialog.js

@@ -3,11 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "./dialog.js";
 import { WaitingLine } from "./waiting-line.js";
-import { PendingLabel } from "./pending-label.js";
-export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }) {
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(DialogContent, { className: "sm:max-w-lg", closeLabel: closeLabel, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsxs(DialogHeader, { className: "pr-8", children: [_jsx(DialogTitle, { children: title }), description ? _jsx(DialogDescription, { children: description }) : null] }), children] }) }));
+import { FormSubmitButton } from "../internal/form-submit.js";
+export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, pending = false, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => {
+            if (next || !pending)
+                onOpenChange(next);
+        }, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(DialogContent, { className: "sm:max-w-lg", closeLabel: closeLabel, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsxs(DialogHeader, { className: "pr-8", children: [_jsx(DialogTitle, { children: title }), description ? _jsx(DialogDescription, { children: description }) : null] }), children] }) }));
 }
 export function FormDialogForm({ cancelLabel, submit, notice, children, ...form }) {
     const pending = submit.pending === true;
-    return (_jsxs("form", { className: "flex min-h-0 flex-col gap-6", "aria-busy": pending || undefined, ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(Button, { "aria-busy": pending || undefined, "aria-describedby": submit.describedBy, disabled: pending || submit.disabled, type: "submit", variant: submit.destructive ? "destructive" : "default", children: _jsx(PendingLabel, { pending: pending, pendingLabel: submit.pendingLabel ?? submit.label, children: submit.label }) }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-lg bottom-1 w-auto", decorative: true })) : null] })] }));
+    return (_jsxs("form", { className: "flex min-h-0 flex-col gap-6", "aria-busy": pending || undefined, "data-slot": "form-dialog-form", ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(FormSubmitButton, { submit: submit }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-lg bottom-1 w-auto", decorative: true })) : null] })] }));
 }

package/dist/components/form-drawer.d.ts

@@ -1,6 +1,9 @@
 import type { ComponentProps, ReactNode } from "react";
 import { SheetContent } from "./sheet.js";
-export type FormDrawerProps = {
+import { type FormProps } from "../internal/form-submit.js";
+export type { FormProps, FormSubmit } from "../internal/form-submit.js";
+/** What a form surface is told by its caller, whether it draws a drawer or a dialog. */
+export type FormSurfaceProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Runs once the drawer has finished opening or closing, such as to return focus. */
@@ -17,7 +20,16 @@ export type FormDrawerProps = {
     /** Where focus returns when the drawer closes, when its opener is gone. */
     finalFocus?: ComponentProps<typeof SheetContent>["finalFocus"];
 };
-/** A substantial workflow whose fields need a separate scrolling working surface. */
+export type FormDrawerProps = FormSurfaceProps & {
+    /**
+     * Why this is a drawer and not a dialog: "catalog" chooses from a list too
+     * long for a dialog, "steps" sets something up over several steps, with a
+     * wait. A form of a few fields is a `FormDialog`, and a record already on
+     * screen edits inside its row.
+     */
+    job: "catalog" | "steps";
+};
+/** The right-side drawer for a catalog or a setup in steps, at one width. */
 export declare function FormDrawer({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }: FormDrawerProps): import("react").JSX.Element;
 /** The part of the drawer that scrolls between its title and its footer. */
 export declare function FormDrawerBody({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
@@ -32,29 +44,10 @@ export type FormDrawerFooterProps = {
 };
 /** The footer that stays in place under the body: Cancel, then the actions, right-aligned. */
 export declare function FormDrawerFooter({ cancel, children }: FormDrawerFooterProps): import("react").JSX.Element;
-export type FormDrawerSubmit = {
-    label: string;
-    /** The button's own word while the save runs. */
-    pendingLabel?: string;
-    /** The save is running: the button says so and holds, and the waiting line follows. */
-    pending?: boolean;
-    /** Nothing to save yet, or a field still needs an answer. */
-    disabled?: boolean;
-    destructive?: boolean;
-    /** The id of the line that says why the save cannot run yet. */
-    describedBy?: string;
-};
-export type FormDrawerFormProps = Omit<ComponentProps<"form">, "children" | "className"> & {
-    cancelLabel: string;
-    submit: FormDrawerSubmit;
-    /** A refusal or a failure of the save, between the body and the footer, where the button is. */
-    notice?: ReactNode;
-    children: ReactNode;
-};
 /**
  * The drawer's form: the fields in the body, a notice where the save button
  * is, and the footer with Cancel and the save rightmost. Cancel holds while the
  * save runs, so a running save is never left without its drawer.
  */
-export declare function FormDrawerForm({ cancelLabel, submit, notice, children, ...form }: FormDrawerFormProps): import("react").JSX.Element;
+export declare function FormDrawerForm({ cancelLabel, submit, notice, children, ...form }: FormProps): import("react").JSX.Element;
 //# sourceMappingURL=form-drawer.d.ts.map

package/dist/components/form-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-drawer.d.ts","sourceRoot":"","sources":["../../src/components/form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAGL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAI5B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;IACnE,2EAA2E;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;CAChE,CAAC;AAEF,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE,eAAe,+BAkBjB;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAc3E;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IACzF,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC;IACzB,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BA+BrB"}
+{"version":3,"file":"form-drawer.d.ts","sourceRoot":"","sources":["../../src/components/form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAGL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAG1E,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpE,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;IACnE,2EAA2E;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C;;;;;OAKG;IACH,GAAG,EAAE,SAAS,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE,eAAe,+BAkBjB;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAc3E;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAqB3F"}

package/dist/components/form-drawer.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
-import { PendingLabel } from "./pending-label.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
 import { WaitingLine } from "./waiting-line.js";
+import { FormSubmitButton } from "../internal/form-submit.js";
 import { cn } from "../lib/utils.js";
-/** A substantial workflow whose fields need a separate scrolling working surface. */
+/** The right-side drawer for a catalog or a setup in steps, at one width. */
 export function FormDrawer({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }) {
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(SheetContent, { className: "max-sm:data-[side=right]:left-nadicode-sm max-sm:data-[side=right]:w-auto", closeLabel: closeLabel, finalFocus: finalFocus, initialFocus: initialFocus, side: "right", children: [_jsxs(SheetHeader, { className: "pr-12", children: [_jsx(SheetTitle, { className: "break-words", children: title }), description ? _jsx(SheetDescription, { children: description }) : null] }), children] }) }));
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(SheetContent, { className: "max-sm:data-[side=right]:left-nadicode-sm max-sm:data-[side=right]:w-auto data-[side=right]:sm:w-[560px] data-[side=right]:sm:max-w-[calc(100%-var(--nc-lg))]", closeLabel: closeLabel, finalFocus: finalFocus, initialFocus: initialFocus, side: "right", children: [_jsxs(SheetHeader, { className: "pr-12", children: [_jsx(SheetTitle, { className: "break-words", children: title }), description ? _jsx(SheetDescription, { children: description }) : null] }), children] }) }));
 }
 /** The part of the drawer that scrolls between its title and its footer. */
 export function FormDrawerBody({ className, ...props }) {
@@ -24,5 +24,5 @@ export function FormDrawerFooter({ cancel, children }) {
  */
 export function FormDrawerForm({ cancelLabel, submit, notice, children, ...form }) {
     const pending = submit.pending === true;
-    return (_jsxs("form", { "aria-busy": pending || undefined, className: "flex min-h-0 flex-1 flex-col", "data-slot": "form-drawer-form", ...form, children: [_jsx(FormDrawerBody, { children: children }), notice ? (_jsx("div", { className: "px-nadicode-lg pt-nadicode-md", "data-slot": "form-drawer-notice", children: notice })) : null, _jsxs(FormDrawerFooter, { cancel: { label: cancelLabel, disabled: pending }, children: [_jsx(Button, { "aria-busy": pending || undefined, "aria-describedby": submit.describedBy, disabled: pending || submit.disabled, type: "submit", variant: submit.destructive ? "destructive" : "default", children: _jsx(PendingLabel, { pending: pending, pendingLabel: submit.pendingLabel ?? submit.label, children: submit.label }) }), pending ? _jsx(WaitingLine, { className: "basis-full", decorative: true }) : null] })] }));
+    return (_jsxs("form", { "aria-busy": pending || undefined, className: "flex min-h-0 flex-1 flex-col", "data-slot": "form-drawer-form", ...form, children: [_jsx(FormDrawerBody, { children: children }), notice ? (_jsx("div", { className: "px-nadicode-lg pt-nadicode-md", "data-slot": "form-drawer-notice", children: notice })) : null, _jsxs(FormDrawerFooter, { cancel: { label: cancelLabel, disabled: pending }, children: [_jsx(FormSubmitButton, { submit: submit }), pending ? _jsx(WaitingLine, { className: "basis-full", decorative: true }) : null] })] }));
 }

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

@@ -1,8 +1,18 @@
 import type { ReactNode } from "react";
-declare function RecordIdentity({ name, mark, hint }: {
-    name: string;
+/**
+ * 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.
+ */
+declare function RecordIdentity({ name, mark, hint, detail, wraps, }: {
+    name: ReactNode;
     mark?: ReactNode;
+    /** Read after the name in its title, such as an identifier the row does not show. */
     hint?: string;
+    detail?: ReactNode;
+    wraps?: boolean;
 }): import("react").JSX.Element;
 export { RecordIdentity };
 //# sourceMappingURL=record-identity.d.ts.map

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;AAEvC,iBAAS,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAS9F;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;AAIvC;;;;;;GAMG;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,+BA0BA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/record-identity.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function RecordIdentity({ name, mark, hint }) {
-    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", "data-slot": "record-identity", children: [mark, _jsx("span", { className: "min-w-0 truncate font-medium", title: hint ? `${name} · ${hint}` : name, children: name })] }));
+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.
+ */
+function RecordIdentity({ name, mark, hint, detail, wraps = false, }) {
+    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 text-muted-foreground", "data-slot": "record-identity-detail", children: detail })) : null] })] }));
 }
 export { RecordIdentity };

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

@@ -0,0 +1,25 @@
+export type RecordTimeProps = {
+    /** When it happened. */
+    at: Date | number | string;
+    /**
+     * The sentence the time sits in, which says what happened:
+     * `(when) => t("skills.updated", { when })` gives "Updated 3 hours ago".
+     */
+    phrase: (when: string) => string;
+    /** The person's language; the runtime's when left out. */
+    locale?: string;
+    /** The current time, for a reading that must not drift while it renders. */
+    now?: number;
+};
+/** "3 hours ago" within a week, then "12 Sep", with the year when it is not this year. */
+export declare function formatRecordTime(at: Date, locale?: string, now?: number): string;
+/** The moment `at` names, or null when it names none, such as an empty or malformed time. */
+export declare function recordDate(at: Date | number | string | null | undefined): Date | null;
+/**
+ * When something happened to a record, in the sentence that says what
+ * (DESIGN.md "Complete compositions", relative timestamp preview): hovering it
+ * shows the exact moment in the person's time and in UTC, as Vercel's
+ * dashboard does, and assistive technology reads the exact moment with it.
+ */
+export declare function RecordTime({ at, phrase, locale, now }: RecordTimeProps): import("react").JSX.Element | null;
+//# sourceMappingURL=record-time.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,eAAe,GAAG;IAC5B,wBAAwB;IACxB,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,SAAa,GAAG,MAAM,CAepF;AAED,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,eAAe,sCAwCtE"}

package/dist/components/record-time.js

@@ -0,0 +1,52 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
+const DAY = 86_400_000;
+const WEEK = 7 * DAY;
+const UNITS = [
+    ["day", DAY],
+    ["hour", 3_600_000],
+    ["minute", 60_000],
+];
+/** "3 hours ago" within a week, then "12 Sep", with the year when it is not this year. */
+export function formatRecordTime(at, locale, now = Date.now()) {
+    const elapsed = now - at.getTime();
+    if (elapsed >= 0 && elapsed < WEEK) {
+        const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+        for (const [unit, size] of UNITS) {
+            if (elapsed >= size)
+                return relative.format(-Math.floor(elapsed / size), unit);
+        }
+        return relative.format(0, "minute");
+    }
+    const sameYear = at.getFullYear() === new Date(now).getFullYear();
+    return new Intl.DateTimeFormat(locale, {
+        day: "numeric",
+        month: "short",
+        ...(sameYear ? {} : { year: "numeric" }),
+    }).format(at);
+}
+/** The moment `at` names, or null when it names none, such as an empty or malformed time. */
+export function recordDate(at) {
+    if (at == null)
+        return null;
+    const date = at instanceof Date ? at : new Date(at);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+/**
+ * When something happened to a record, in the sentence that says what
+ * (DESIGN.md "Complete compositions", relative timestamp preview): hovering it
+ * shows the exact moment in the person's time and in UTC, as Vercel's
+ * dashboard does, and assistive technology reads the exact moment with it.
+ */
+export function RecordTime({ at, phrase, locale, now }) {
+    const date = recordDate(at);
+    if (!date)
+        return null;
+    const local = new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "medium" }).format(date);
+    const utc = new Intl.DateTimeFormat(locale, {
+        dateStyle: "long",
+        timeStyle: "medium",
+        timeZone: "UTC",
+    }).format(date);
+    return (_jsxs(HoverCard, { children: [_jsxs(HoverCardTrigger, { render: _jsx("time", { className: "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", dateTime: date.toISOString() }), children: [phrase(formatRecordTime(date, locale, now)), _jsxs("span", { className: "sr-only", children: [", ", local] })] }), _jsx(HoverCardContent, { className: "w-auto", children: _jsxs("dl", { className: "grid grid-cols-[auto_auto] gap-x-4 gap-y-1 text-xs", "data-slot": "record-time-exact", children: [_jsx("dt", { className: "text-muted-foreground", children: "UTC" }), _jsx("dd", { className: "tabular-nums", children: utc }), _jsx("dt", { className: "text-muted-foreground", children: Intl.DateTimeFormat(locale).resolvedOptions().timeZone }), _jsx("dd", { className: "tabular-nums", children: local })] }) })] }));
+}

package/dist/components/row-edit-form.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type FormSubmit } from "../internal/form-submit.js";
+export type RowEditFormProps = Omit<ComponentProps<"form">, "children" | "className"> & {
+    cancelLabel: string;
+    /** Closes the form and keeps the record as it was. */
+    onCancel: () => void;
+    submit: FormSubmit;
+    /** A refusal or a failure of the save, above the footer, where the button is. */
+    notice?: ReactNode;
+    /** A way on beside the actions, such as where to find a token, at the footer's leading edge. */
+    hint?: ReactNode;
+    children: ReactNode;
+};
+/**
+ * A record's form opened inside its own row (DESIGN.md "Menus and commands"),
+ * a `DataTable`'s `rowEditor`: the fields under the record's line, then a
+ * footer one tone below with an optional hint at its leading edge, then Cancel
+ * and the save rightmost. Cancel holds while
+ * the save runs.
+ */
+export declare function RowEditForm({ cancelLabel, onCancel, submit, notice, hint, children, ...form }: RowEditFormProps): import("react").JSX.Element;
+//# sourceMappingURL=row-edit-form.d.ts.map

package/dist/components/row-edit-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-edit-form.d.ts","sourceRoot":"","sources":["../../src/components/row-edit-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,KAAK,UAAU,EAAoB,MAAM,wBAAwB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IACtF,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gGAAgG;IAChG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAqBlB"}

package/dist/components/row-edit-form.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { WaitingLine } from "./waiting-line.js";
+import { FormSubmitButton } from "../internal/form-submit.js";
+/**
+ * A record's form opened inside its own row (DESIGN.md "Menus and commands"),
+ * a `DataTable`'s `rowEditor`: the fields under the record's line, then a
+ * footer one tone below with an optional hint at its leading edge, then Cancel
+ * and the save rightmost. Cancel holds while
+ * the save runs.
+ */
+export function RowEditForm({ cancelLabel, onCancel, submit, notice, hint, children, ...form }) {
+    const pending = submit.pending === true;
+    return (_jsxs("form", { "aria-busy": pending || undefined, "data-slot": "row-edit-form", ...form, children: [_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-4 px-nadicode-md pt-nadicode-sm pb-nadicode-md", children: [children, notice ? _jsx("div", { "data-slot": "row-edit-form-notice", children: notice }) : null] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-recessed px-nadicode-md py-3", "data-slot": "row-edit-form-footer", children: [hint ? _jsx("div", { className: "mr-auto min-w-0", children: hint }) : null, _jsx(Button, { disabled: pending, onClick: onCancel, type: "button", variant: "outline", children: cancelLabel }), _jsx(FormSubmitButton, { submit: submit }), pending ? _jsx(WaitingLine, { className: "basis-full", decorative: true }) : null] })] }));
+}

package/dist/components/sidebar.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-import { useIsMobile } from "../hooks/use-mobile.js";
+import { isMobileNow, useIsMobile } from "../hooks/use-mobile.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -49,8 +49,8 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
     }, [setOpenProp, open, passive]);
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+        return mobileSheet && isMobileNow() ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [mobileSheet, setOpen, setOpenMobile]);
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
         if (passive)

package/dist/components/theme-mode-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBAkDxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkBA"}
+{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkBA"}

package/dist/components/theme-mode-switcher.js

@@ -13,7 +13,7 @@ const themeModeIcons = {
     system: MonitorIcon,
 };
 function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }) {
-    return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("max-w-full", className), disabled: disabled, onValueChange: (nextMode) => {
+    return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("max-w-full grid-cols-3", className), disabled: disabled, onValueChange: (nextMode) => {
             if (isThemeMode(nextMode)) {
                 onValueChange(nextMode);
             }
@@ -21,13 +21,7 @@ function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false
             const Icon = themeModeIcons[mode];
             const label = labels[mode];
             const selected = value === mode;
-            return (_jsx(RadioGroupItem, { "aria-label": label, className: cn(toggleVariants({ variant: "outline" }), 
-                // The selected tile takes the muted interaction surface the
-                // toggle uses for its own on-state, so it takes that surface's
-                // foreground with it. Left on the radio primitive's on-primary
-                // foreground, the selected label reads white on near-white in
-                // light and black on black in dark.
-                "aspect-auto w-auto gap-1.5 data-checked:bg-muted data-checked:text-foreground", compact && "text-xs", itemClassName), disabled: disabled, value: mode, children: renderItem ? (renderItem({ Icon, label, mode, selected })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] })) }, mode));
+            return (_jsx(RadioGroupItem, { "aria-label": label, className: cn(toggleVariants({ variant: "outline" }), "aspect-auto w-auto min-w-0 gap-1.5 data-checked:border-transparent data-checked:bg-selection data-checked:text-selection-foreground", compact && "text-xs", itemClassName), disabled: disabled, value: mode, children: renderItem ? (renderItem({ Icon, label, mode, selected })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] })) }, mode));
         }) }));
 }
 export { ThemeModeSwitcher };

package/dist/hooks/use-mobile.d.ts

@@ -1,2 +1,4 @@
+/** Whether the window is under the mobile breakpoint at the moment of asking, whatever the page last drew. */
+export declare const isMobileNow: () => boolean;
 export declare function useIsMobile(): boolean;
 //# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAc1B"}
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAUA,8GAA8G;AAC9G,eAAO,MAAM,WAAW,eAA8C,CAAC;AAGvE,wBAAgB,WAAW,YAE1B"}

package/dist/hooks/use-mobile.js

@@ -1,15 +1,13 @@
 import * as React from "react";
 const MOBILE_BREAKPOINT = 768;
+function subscribe(onChange) {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+}
+/** Whether the window is under the mobile breakpoint at the moment of asking, whatever the page last drew. */
+export const isMobileNow = () => window.innerWidth < MOBILE_BREAKPOINT;
+const onServer = () => false;
 export function useIsMobile() {
-    const [isMobile, setIsMobile] = React.useState(undefined);
-    React.useEffect(() => {
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = () => {
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener("change", onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        return () => mql.removeEventListener("change", onChange);
-    }, []);
-    return !!isMobile;
+    return React.useSyncExternalStore(subscribe, isMobileNow, onServer);
 }

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export * from "./components/checkbox.js";
 export * from "./components/code-block.js";
 export * from "./components/collapsible.js";
 export * from "./components/collection-filters.js";
+export * from "./components/collection-page.js";
 export * from "./components/collection-search.js";
 export * from "./components/collection-sort.js";
 export * from "./components/collection-toolbar.js";
@@ -110,7 +111,9 @@ export * from "./components/qr-code.js";
 export * from "./components/radio-group.js";
 export * from "./components/reading-column.js";
 export * from "./components/record-identity.js";
+export * from "./components/record-time.js";
 export * from "./components/resizable.js";
+export * from "./components/row-edit-form.js";
 export * from "./components/run-timeline.js";
 export * from "./components/scope-switcher.js";
 export * from "./components/scroll-area.js";

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -41,6 +41,7 @@ export * from "./components/checkbox.js";
 export * from "./components/code-block.js";
 export * from "./components/collapsible.js";
 export * from "./components/collection-filters.js";
+export * from "./components/collection-page.js";
 export * from "./components/collection-search.js";
 export * from "./components/collection-sort.js";
 export * from "./components/collection-toolbar.js";
@@ -110,7 +111,9 @@ export * from "./components/qr-code.js";
 export * from "./components/radio-group.js";
 export * from "./components/reading-column.js";
 export * from "./components/record-identity.js";
+export * from "./components/record-time.js";
 export * from "./components/resizable.js";
+export * from "./components/row-edit-form.js";
 export * from "./components/run-timeline.js";
 export * from "./components/scope-switcher.js";
 export * from "./components/scroll-area.js";

package/dist/internal/form-submit.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ReactNode } from "react";
+/** The save of a drawer's, a dialog's or a row's form. */
+export type FormSubmit = {
+    label: string;
+    /** The button's own word while the save runs. */
+    pendingLabel?: string;
+    /** The save is running: the button says so and holds, and the waiting line follows. */
+    pending?: boolean;
+    /** Nothing to save yet, or a field still needs an answer. */
+    disabled?: boolean;
+    destructive?: boolean;
+    /** The id of the line that says why the save cannot run yet. */
+    describedBy?: string;
+};
+export type FormProps = Omit<ComponentProps<"form">, "children" | "className"> & {
+    cancelLabel: string;
+    submit: FormSubmit;
+    /** A refusal or a failure of the save, above the footer, where the button is. */
+    notice?: ReactNode;
+    children: ReactNode;
+};
+export declare function FormSubmitButton({ submit }: {
+    submit: FormSubmit;
+}): import("react").JSX.Element;
+//# sourceMappingURL=form-submit.d.ts.map

package/dist/internal/form-submit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,+BAelE"}

package/dist/internal/form-submit.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../components/button.js";
+import { PendingLabel } from "../components/pending-label.js";
+export function FormSubmitButton({ submit }) {
+    const pending = submit.pending === true;
+    return (_jsx(Button, { "aria-busy": pending || undefined, "aria-describedby": submit.describedBy, disabled: pending || submit.disabled, type: "submit", variant: submit.destructive ? "destructive" : "default", children: _jsx(PendingLabel, { pending: pending, pendingLabel: submit.pendingLabel ?? submit.label, children: submit.label }) }));
+}

package/dist/internal/row-message.d.ts

@@ -0,0 +1,18 @@
+import { type ResolvedMessage } from "../components/product-message.js";
+/**
+ * A record's own action that failed or cannot run, drawn inside its row
+ * (DESIGN.md "Tables and missing values"): the message takes the line under
+ * the record's name and its actions take the row's controls.
+ */
+export type RowMessage = {
+    kind: "failed" | "refused";
+    message: ResolvedMessage;
+};
+export declare function RowMessageLine({ state }: {
+    state: RowMessage;
+}): import("react").JSX.Element;
+/** The message's next steps, laid out by the row's own controls beside its commands. */
+export declare function RowMessageActions({ state }: {
+    state: RowMessage;
+}): import("react").JSX.Element[];
+//# sourceMappingURL=row-message.d.ts.map

package/dist/internal/row-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-message.d.ts","sourceRoot":"","sources":["../../src/internal/row-message.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAGrF;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAAC,OAAO,EAAE,eAAe,CAAA;CAAE,CAAC;AAElF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,+BAY9D;AAED,wFAAwF;AACxF,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,iCAIjE"}

package/dist/internal/row-message.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCommandButton } from "../components/page-actions.js";
+import { bodyBeyondTitle } from "../components/product-message.js";
+import { cn } from "../lib/utils.js";
+export function RowMessageLine({ state }) {
+    const body = bodyBeyondTitle(state.message);
+    return (_jsxs("span", { className: cn(state.kind === "failed" && "text-destructive"), "data-slot": "row-message", role: state.kind === "failed" ? "alert" : undefined, children: [_jsx("span", { children: state.message.title }), body ? _jsxs("span", { children: [" ", body] }) : null] }));
+}
+/** The message's next steps, laid out by the row's own controls beside its commands. */
+export function RowMessageActions({ state }) {
+    return state.message.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.89",
+  "version": "12.1.91",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,7 +75,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.2",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.89",
+    "@nadicodeai/design-system": "12.1.91",
     "@tanstack/react-table": "^9.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",