@nadicodeai/ui 12.1.95 → 12.1.97

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,+BA0BA;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,16 +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 }) }));
+}

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

@@ -0,0 +1,36 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { CopyButtonProps } from "./copy-button.js";
+import { type ObjectFact } from "./object-workspace.js";
+import { type PageCommand } from "./page-actions.js";
+import { SheetContent } from "./sheet.js";
+export type RecordSheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Names the record: "invoice.payment_failed". */
+    title: string;
+    /** One muted line: "Beta Studio · Oct 13, 14:02". */
+    description?: ReactNode;
+    closeLabel: string;
+    facts: readonly ObjectFact[];
+    /** A read-only payload, such as an event's JSON, with its copy button's words. */
+    code?: {
+        label: string;
+        value: string;
+    } & Pick<CopyButtonProps, "copyLabel" | "copiedLabel" | "copyFailedLabel">;
+    /** The way to the record's owner: "Open Beta Studio". */
+    footer?: PageCommand;
+    /** The row it opened from, which takes focus back on Close. */
+    finalFocus?: ComponentProps<typeof SheetContent>["finalFocus"];
+};
+/**
+ * One record from a list, looked at in a sheet at the right edge, then back to the list.
+ *
+ * @family Compositions
+ * @when A list's record holds more than its row shows and is only read, not changed: a Stripe event in Billing, a usage row.
+ * @instead A record changed from its list edits in its row with `RowEditForm`; a record with sections and commands of its own has its own page, an `ObjectPage`; a choice from a catalogue is a `CatalogDrawer`.
+ * @behaviour Opens from the right, 420 px wide and 8 px from the window, the list still behind it, with 12 px corners on its free edges. The header holds the record's name, one muted line and Close; the body scrolls through its facts as labelled values, then the read-only payload with its copy button; the footer holds one command to the record's owner. It has no states of its own: it opens only on a record.
+ * @words The title is the record's own name, as its row shows it. The footer's command names where it goes: "Open Beta Studio".
+ * @access A modal dialog named by its title; Escape and Close close it, and focus returns to the row it opened from (`finalFocus`). The payload is a read-only text area named by its label.
+ */
+export declare function RecordSheet({ open, onOpenChange, title, description, closeLabel, facts, code, footer, finalFocus, }: RecordSheetProps): import("react").JSX.Element;
+//# sourceMappingURL=record-sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-sheet.d.ts","sourceRoot":"","sources":["../../src/components/record-sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAEL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,kFAAkF;IAClF,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAC5C,eAAe,EACf,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAChD,CAAC;IACF,yDAAyD;IACzD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;CAChE,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,UAAU,GACX,EAAE,gBAAgB,+BAoClB"}

package/dist/components/record-sheet.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeBlock } from "./code-block.js";
+import { ObjectFacts } from "./object-workspace.js";
+import { PageCommandButton } from "./page-actions.js";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
+/**
+ * One record from a list, looked at in a sheet at the right edge, then back to the list.
+ *
+ * @family Compositions
+ * @when A list's record holds more than its row shows and is only read, not changed: a Stripe event in Billing, a usage row.
+ * @instead A record changed from its list edits in its row with `RowEditForm`; a record with sections and commands of its own has its own page, an `ObjectPage`; a choice from a catalogue is a `CatalogDrawer`.
+ * @behaviour Opens from the right, 420 px wide and 8 px from the window, the list still behind it, with 12 px corners on its free edges. The header holds the record's name, one muted line and Close; the body scrolls through its facts as labelled values, then the read-only payload with its copy button; the footer holds one command to the record's owner. It has no states of its own: it opens only on a record.
+ * @words The title is the record's own name, as its row shows it. The footer's command names where it goes: "Open Beta Studio".
+ * @access A modal dialog named by its title; Escape and Close close it, and focus returns to the row it opened from (`finalFocus`). The payload is a read-only text area named by its label.
+ */
+export function RecordSheet({ open, onOpenChange, title, description, closeLabel, facts, code, footer, finalFocus, }) {
+    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsxs(SheetContent, { className: "max-sm:data-[side=right]:left-nadicode-sm max-sm:data-[side=right]:w-auto data-[side=right]:sm:w-[420px] data-[side=right]:sm:max-w-[calc(100%-var(--nc-lg))]", closeLabel: closeLabel, finalFocus: finalFocus, side: "right", children: [_jsxs(SheetHeader, { className: "pr-12", children: [_jsx(SheetTitle, { className: "break-words", children: title }), description ? _jsx(SheetDescription, { children: description }) : null] }), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)] content-start gap-nadicode-md overflow-y-auto px-nadicode-lg pb-nadicode-lg", "data-slot": "record-sheet-body", children: [_jsx(ObjectFacts, { facts: facts }), code ? (_jsx(CodeBlock, { code: code.value, copiedLabel: code.copiedLabel, copyFailedLabel: code.copyFailedLabel, copyLabel: code.copyLabel, label: code.label })) : null] }), footer ? (_jsx(SheetFooter, { className: "flex-row justify-end", "data-slot": "record-sheet-footer", children: _jsx(PageCommandButton, { command: footer, variant: "outline" }) })) : null] }) }));
+}

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

@@ -1,25 +1,41 @@
 export type RecordTimeProps = {
     /** When it happened. */
     at: Date | number | string;
+    /** The person's language; the runtime's when left out. */
+    locale?: string;
+    /**
+     * The viewer's zone, which a page rendered on a server passes when it knows it. Left out, the browser's zone, and
+     * UTC on the server and while the page hydrates, so the server's HTML never shows its own zone as the viewer's.
+     */
+    timeZone?: string;
+    /** The current time, for a reading that must not drift while it renders. */
+    now?: number;
+} & ({
+    mode?: "relative";
     /**
      * 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;
-};
+}
+/** The time of day in the viewer's zone, tabular: "3:05 PM". */
+ | {
+    mode: "clock";
+});
 /** "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;
+export declare function formatRecordTime(at: Date, locale?: string, now?: number, timeZone?: string): 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.
+ * When something happened to a record: a relative time in the sentence that
+ * says what, or the time of day in a feed's time column.
+ *
+ * @family Data
+ * @when The moment a record was made, changed or last ran, in its row or its facts ("Updated 3 hours ago"), and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).
+ * @instead A date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product ("Took 4 min").
+ * @behaviour Relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows the exact moment in UTC and in the viewer's zone. A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws nothing.
+ * @words The product writes the sentence through `phrase` ("Updated {when}", "Ran {when}"); the clock needs no words. The package formats every date with the person's `locale`.
+ * @access A `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
  */
-export declare function RecordTime({ at, phrase, locale, now }: RecordTimeProps): import("react").JSX.Element | null;
+export declare function RecordTime(props: RecordTimeProps): import("react").JSX.Element | null;
 //# sourceMappingURL=record-time.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,eAAe,GAAG;IAC5B,wBAAwB;IACxB,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAcR;AAED,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCAoDhD"}

package/dist/components/record-time.js

@@ -1,5 +1,7 @@
+"use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
+import { useHydrated } from "../hooks/use-hydrated.js";
 const DAY = 86_400_000;
 const WEEK = 7 * DAY;
 const UNITS = [
@@ -8,7 +10,7 @@ const UNITS = [
     ["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()) {
+export function formatRecordTime(at, locale, now = Date.now(), timeZone) {
     const elapsed = now - at.getTime();
     if (elapsed >= 0 && elapsed < WEEK) {
         const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
@@ -18,12 +20,12 @@ export function formatRecordTime(at, locale, now = Date.now()) {
         }
         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);
+    const yearOf = new Intl.DateTimeFormat("en", { timeZone, year: "numeric" });
+    const sameYear = yearOf.format(at) === yearOf.format(now);
+    const shown = { timeZone, day: "numeric", month: "short" };
+    if (!sameYear)
+        shown.year = "numeric";
+    return new Intl.DateTimeFormat(locale, shown).format(at);
 }
 /** The moment `at` names, or null when it names none, such as an empty or malformed time. */
 export function recordDate(at) {
@@ -33,20 +35,39 @@ export function recordDate(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.
+ * When something happened to a record: a relative time in the sentence that
+ * says what, or the time of day in a feed's time column.
+ *
+ * @family Data
+ * @when The moment a record was made, changed or last ran, in its row or its facts ("Updated 3 hours ago"), and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).
+ * @instead A date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product ("Took 4 min").
+ * @behaviour Relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows the exact moment in UTC and in the viewer's zone. A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws nothing.
+ * @words The product writes the sentence through `phrase` ("Updated {when}", "Ran {when}"); the clock needs no words. The package formats every date with the person's `locale`.
+ * @access A `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
  */
-export function RecordTime({ at, phrase, locale, now }) {
+export function RecordTime(props) {
+    const { at, locale, now } = props;
+    const hydrated = useHydrated();
+    const timeZone = props.timeZone ?? (hydrated ? undefined : "UTC");
     const date = recordDate(at);
     if (!date)
         return null;
-    const local = new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "medium" }).format(date);
+    const inZone = new Intl.DateTimeFormat(locale, {
+        dateStyle: "long",
+        timeStyle: "medium",
+        timeZone,
+    });
+    const local = inZone.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 })] }) })] }));
+    const clock = props.mode === "clock";
+    const shown = clock
+        ? new Intl.DateTimeFormat(locale, { timeStyle: "short", timeZone }).format(date)
+        : props.phrase(formatRecordTime(date, locale, now, timeZone));
+    return (_jsxs(HoverCard, { children: [_jsxs(HoverCardTrigger, { render: _jsx("time", { className: clock
+                        ? "whitespace-nowrap tabular-nums text-muted-foreground"
+                        : "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", dateTime: date.toISOString() }), children: [shown, _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: inZone.resolvedOptions().timeZone }), _jsx("dd", { className: "tabular-nums", children: local })] }) })] }));
 }

package/dist/components/resizable.d.ts

@@ -1,4 +1,14 @@
 import * as ResizablePrimitive from "react-resizable-panels";
+/**
+ * Panels a person resizes by dragging the handle between them.
+ *
+ * @family Other
+ * @when Side-by-side panes whose balance a person sets: a conversation and its side panel.
+ * @instead The product frame's sidebar resizes through `DashboardShell` or `DesktopAppShell`.
+ * @behaviour The handle moves on drag and on arrow keys; each panel keeps its minimum and maximum.
+ * @words None of its own.
+ * @access The handle is the resizable library's focusable separator.
+ */
 declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): import("react").JSX.Element;
 declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): import("react").JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BASlF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BAElE;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,cAAc,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BAaA;AAED,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D;;;;;;;;;GASG;AACH,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BASlF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BAElE;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,cAAc,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BAaA;AAED,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}