@nadicodeai/ui 12.1.96 → 12.1.98

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,CAapF;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,11 +20,12 @@ export function formatRecordTime(at, locale, now = Date.now()) {
         }
         return relative.format(0, "minute");
     }
-    const sameYear = at.getFullYear() === new Date(now).getFullYear();
-    const format = { day: "numeric", month: "short" };
+    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)
-        format.year = "numeric";
-    return new Intl.DateTimeFormat(locale, format).format(at);
+        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) {
@@ -32,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"}

package/dist/components/resizable.js

@@ -2,6 +2,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "../lib/utils.js";
+/**
+ * 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.
+ */
 function ResizablePanelGroup({ className, ...props }) {
     return (_jsx(ResizablePrimitive.Group, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className), ...props }));
 }

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

@@ -12,11 +12,14 @@ export type RowEditFormProps = Omit<ComponentProps<"form">, "children" | "classN
     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.
+ * A record's form opened inside its own row, the rows above and below staying where they are.
+ *
+ * @family Compositions
+ * @when A person changes a record they see in a list: edit a mailbox, a task, an MCP server, a channel. It is a `RecordList`'s `editor` or a `DataTable`'s `rowEditor`.
+ * @instead A new record from a few fields is a `FormDialog`; a fact on the record's own page changes in place in its section; a choice from a catalogue is a `CatalogDrawer`.
+ * @behaviour The fields open under the record's line; a refusal or a failed save sits above the footer. The footer, one tone below, holds an optional hint at its leading edge, then Cancel and the save rightmost. Save stays off until a field changes: the caller sets `submit.disabled` from its own fields. Cancel holds while the save runs, and the waiting line runs under them.
+ * @words The save says what it does, "Save"; Cancel is "Cancel". The hint is a way on, such as where to find a token, never a restatement of a field's label.
+ * @access A form in the row's place, which the caller moves focus into. The running save is marked busy, and the line saying why the save cannot run yet is its description (`submit.describedBy`).
  */
 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

@@ -1 +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"}
+{"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;;;;;;;;;GASG;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

@@ -4,11 +4,14 @@ 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.
+ * A record's form opened inside its own row, the rows above and below staying where they are.
+ *
+ * @family Compositions
+ * @when A person changes a record they see in a list: edit a mailbox, a task, an MCP server, a channel. It is a `RecordList`'s `editor` or a `DataTable`'s `rowEditor`.
+ * @instead A new record from a few fields is a `FormDialog`; a fact on the record's own page changes in place in its section; a choice from a catalogue is a `CatalogDrawer`.
+ * @behaviour The fields open under the record's line; a refusal or a failed save sits above the footer. The footer, one tone below, holds an optional hint at its leading edge, then Cancel and the save rightmost. Save stays off until a field changes: the caller sets `submit.disabled` from its own fields. Cancel holds while the save runs, and the waiting line runs under them.
+ * @words The save says what it does, "Save"; Cancel is "Cancel". The hint is a way on, such as where to find a token, never a restatement of a field's label.
+ * @access A form in the row's place, which the caller moves focus into. The running save is marked busy, and the line saying why the save cannot run yet is its description (`submit.describedBy`).
  */
 export function RowEditForm({ cancelLabel, onCancel, submit, notice, hint, children, ...form }) {
     const pending = submit.pending === true;

package/dist/components/run-timeline.d.ts

@@ -1,16 +1,29 @@
-import * as React from "react";
-export type RunTimelineState = "ready" | "running" | "review" | "blocked" | "complete";
+import type { ComponentProps, ReactNode } from "react";
+import type { RecordStatus } from "./record-list.js";
 export type RunTimelineStep = {
     id: string;
+    /** "Step 01" */
+    label: string;
     title: string;
-    label?: string;
-    detail?: string;
-    state?: RunTimelineState;
-    /** Escape hatch: rich detail content that replaces the serializable `detail`. */
-    detailSlot?: React.ReactNode;
+    detail?: ReactNode;
+    /** The node marks the step and never grades it. */
+    progress: "done" | "current" | "upcoming";
+    /** The outcome that needs a person, inside the step: "Needs your decision". */
+    status?: RecordStatus | null;
+    /** In the feed's time style; "—" until it happens. */
+    time?: ReactNode;
 };
-declare function RunTimeline({ className, steps, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
-    steps: RunTimelineStep[];
-}): React.JSX.Element;
-export { RunTimeline };
+/**
+ * One run of an Agent, read step by step on a neutral rail.
+ *
+ * @family Data
+ * @when The steps of one run, in order: a scheduled task's run, an Agent's handoff. Each step is something the run did or will do.
+ * @instead What happened to a record over time is an ActivityFeed; steps a person follows are NumberedSteps; the stages a system runs on an entry screen are the EntryStageList.
+ * @behaviour Each step is a node on one rail, its label and title, one line of detail, and its time at the trailing edge ("—" until it happens). The node marks the step and never grades it: the current step's node is ink, a step to come is drawn in the line colour with its title muted. An outcome that needs a person is the StatusBadge inside its step. Nothing moves.
+ * @words The label numbers the step ("Step 01"); a done step's title is in the past tense ("Filed the invoices"), a step to come in the imperative ("Send the summary to Marco"); a waiting step's detail says what it waits for ("Waits for your decision on step 03").
+ * @access An ordered list; the current step carries `aria-current="step"`; the rail and nodes are hidden from assistive technology, and so is the dash of a step that has not happened.
+ */
+export declare function RunTimeline({ className, steps, ...props }: Omit<ComponentProps<"ol">, "children"> & {
+    steps: readonly RunTimelineStep[];
+}): import("react").JSX.Element;
 //# sourceMappingURL=run-timeline.d.ts.map

package/dist/components/run-timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"run-timeline.d.ts","sourceRoot":"","sources":["../../src/components/run-timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,iFAAiF;IACjF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,qBA0BA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"run-timeline.d.ts","sourceRoot":"","sources":["../../src/components/run-timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,+EAA+E;IAC/E,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,+BA+BhF"}

package/dist/components/run-timeline.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StatusBadge } from "./status-badge.js";
 import { cn } from "../lib/utils.js";
-function RunTimeline({ className, steps, ...props }) {
-    return (_jsx("div", { "data-slot": "run-timeline", className: cn("nc-run-timeline", className), ...props, children: steps.map((step) => {
-            const detail = step.detailSlot ?? step.detail;
-            return (_jsxs("div", { "data-slot": "run-timeline-step", "data-state": step.state, className: "nc-run-timeline-step", children: [_jsx("span", { className: "nc-run-timeline-node", "aria-hidden": "true" }), _jsxs("div", { className: "nc-run-timeline-content", children: [_jsxs("div", { className: "nc-run-timeline-label", children: [step.label, _jsx("span", { className: "nc-run-timeline-title", children: step.title })] }), detail != null && _jsx("div", { className: "nc-run-timeline-detail", children: detail })] })] }, step.id));
-        }) }));
+/**
+ * One run of an Agent, read step by step on a neutral rail.
+ *
+ * @family Data
+ * @when The steps of one run, in order: a scheduled task's run, an Agent's handoff. Each step is something the run did or will do.
+ * @instead What happened to a record over time is an ActivityFeed; steps a person follows are NumberedSteps; the stages a system runs on an entry screen are the EntryStageList.
+ * @behaviour Each step is a node on one rail, its label and title, one line of detail, and its time at the trailing edge ("—" until it happens). The node marks the step and never grades it: the current step's node is ink, a step to come is drawn in the line colour with its title muted. An outcome that needs a person is the StatusBadge inside its step. Nothing moves.
+ * @words The label numbers the step ("Step 01"); a done step's title is in the past tense ("Filed the invoices"), a step to come in the imperative ("Send the summary to Marco"); a waiting step's detail says what it waits for ("Waits for your decision on step 03").
+ * @access An ordered list; the current step carries `aria-current="step"`; the rail and nodes are hidden from assistive technology, and so is the dash of a step that has not happened.
+ */
+export function RunTimeline({ className, steps, ...props }) {
+    return (_jsx("ol", { "data-slot": "run-timeline", className: cn("nc-run-timeline", className), ...props, children: steps.map((step) => (_jsxs("li", { "aria-current": step.progress === "current" ? "step" : undefined, className: "nc-run-timeline-step", "data-progress": step.progress, "data-slot": "run-timeline-step", children: [_jsx("span", { "aria-hidden": "true", className: "nc-run-timeline-node" }), _jsxs("div", { className: "nc-run-timeline-content", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "nc-run-timeline-label", children: step.label }), _jsx("span", { className: "nc-run-timeline-title", children: step.title })] }), step.detail != null ? (_jsx("div", { className: "nc-run-timeline-detail", children: step.detail })) : null, step.status ? (_jsx(StatusBadge, { className: "mt-1.5", label: step.status.label, tone: step.status.tone })) : null] }), _jsx("div", { className: "shrink-0 text-label-sm leading-5 whitespace-nowrap tabular-nums text-muted-foreground", children: step.time ?? _jsx("span", { "aria-hidden": "true", children: "\u2014" }) })] }, step.id))) }));
 }
-export { RunTimeline };

package/dist/components/scope-switcher.d.ts

@@ -13,6 +13,7 @@ export type ScopeSwitcherCopy = {
 export type ScopeSwitcherProps = {
     value: string;
     options: readonly ScopeOption[];
+    /** Writes the choice to the URL, so sibling pages keep it. */
     onValueChange: (value: string) => void;
     copy: ScopeSwitcherCopy;
     create?: {
@@ -20,5 +21,15 @@ export type ScopeSwitcherProps = {
         onSelect: () => void;
     };
 };
+/**
+ * Says which part of the account a page reads, and changes it.
+ *
+ * @family Navigation
+ * @when Changing which part of the account a page reads, such as Analytics' scope: the whole fleet, one partner, one customer. Only when the viewer has more than one.
+ * @instead A viewer with one scope and nothing to create reads its name with no control, which this draws by itself. Finding anything is `CommandDialog`; narrowing rows is `CollectionFilters`.
+ * @behaviour A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.
+ * @words `copy.label` names what is chosen ("Scope") beside the current scope's name. Search and empty lines name the thing: "Find a scope", "No scope matches".
+ * @access The trigger reads "Scope: All customers"; the popover has a hidden title; options are a listbox with the current one checked.
+ */
 export declare function ScopeSwitcher({ value, options, onValueChange, copy, create }: ScopeSwitcherProps): React.JSX.Element;
 //# sourceMappingURL=scope-switcher.d.ts.map

package/dist/components/scope-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scope-switcher.d.ts","sourceRoot":"","sources":["../../src/components/scope-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBAgFhG"}
+{"version":3,"file":"scope-switcher.d.ts","sourceRoot":"","sources":["../../src/components/scope-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBA6FhG"}

package/dist/components/scope-switcher.js

@@ -5,10 +5,20 @@ import { ChevronsUpDown, Plus } from "lucide-react";
 import { Button } from "./button.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command.js";
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "./popover.js";
+/**
+ * Says which part of the account a page reads, and changes it.
+ *
+ * @family Navigation
+ * @when Changing which part of the account a page reads, such as Analytics' scope: the whole fleet, one partner, one customer. Only when the viewer has more than one.
+ * @instead A viewer with one scope and nothing to create reads its name with no control, which this draws by itself. Finding anything is `CommandDialog`; narrowing rows is `CollectionFilters`.
+ * @behaviour A ghost trigger, at most 16rem, opens a 288 px popover with focus in its search. Type to filter, Enter chooses and closes; choosing the current one changes nothing. The caller writes the choice to the URL in `onValueChange`, so sibling pages keep it. An optional create command sits last.
+ * @words `copy.label` names what is chosen ("Scope") beside the current scope's name. Search and empty lines name the thing: "Find a scope", "No scope matches".
+ * @access The trigger reads "Scope: All customers"; the popover has a hidden title; options are a listbox with the current one checked.
+ */
 export function ScopeSwitcher({ value, options, onValueChange, copy, create }) {
     const [open, setOpen] = React.useState(false);
     const search = React.useRef(null);
-    const current = options.find((option) => option.value === value);
+    const currentLabel = options.find((option) => option.value === value)?.label ?? value;
     const groups = React.useMemo(() => {
         const byGroup = new Map();
         for (const option of options) {
@@ -23,12 +33,13 @@ export function ScopeSwitcher({ value, options, onValueChange, copy, create }) {
         if (next !== value)
             onValueChange(next);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "ghost", "aria-label": `${copy.label}: ${current?.label ?? value}`, className: "max-w-64" }), children: [_jsx("span", { className: "truncate", children: current?.label ?? value }), _jsx(ChevronsUpDown, { "data-icon": "inline-end", "aria-hidden": "true" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", initialFocus: search, children: [_jsx(PopoverTitle, { className: "sr-only", children: copy.label }), _jsxs(Command, { label: copy.search, children: [_jsx(CommandInput, { ref: search, "aria-label": copy.search, placeholder: copy.search }), _jsxs(CommandList, { label: copy.label, children: [_jsx(CommandEmpty, { children: copy.empty }), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((option) => (_jsx(CommandItem, { value: option.value, keywords: [
-                                                option.label,
-                                                ...(option.group ? [option.group] : []),
-                                                ...(option.keywords ?? []),
-                                            ], "data-checked": option.value === value, onSelect: () => choose(option.value), children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) }, group ?? ""))), create ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { alwaysRender: true }), _jsx(CommandGroup, { forceMount: true, children: _jsxs(CommandItem, { value: `create ${create.label}`, forceMount: true, onSelect: () => {
-                                                        setOpen(false);
-                                                        create.onSelect();
-                                                    }, children: [_jsx(Plus, { "aria-hidden": "true" }), create.label] }) })] })) : null] })] })] })] }));
+    const switchable = options.length > 1 || create !== undefined;
+    return (_jsxs("span", { "data-slot": "scope-switcher", className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": switchable ? "true" : undefined, className: "text-xs font-medium text-muted-foreground", children: copy.label }), switchable ? (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "ghost", "aria-label": `${copy.label}: ${currentLabel}`, className: "max-w-64" }), children: [_jsx("span", { className: "truncate", children: currentLabel }), _jsx(ChevronsUpDown, { "data-icon": "inline-end", "aria-hidden": "true" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", initialFocus: search, children: [_jsx(PopoverTitle, { className: "sr-only", children: copy.label }), _jsxs(Command, { label: copy.search, children: [_jsx(CommandInput, { ref: search, "aria-label": copy.search, placeholder: copy.search }), _jsxs(CommandList, { label: copy.label, children: [_jsx(CommandEmpty, { children: copy.empty }), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((option) => (_jsx(CommandItem, { value: option.value, keywords: [
+                                                        option.label,
+                                                        ...(option.group ? [option.group] : []),
+                                                        ...(option.keywords ?? []),
+                                                    ], "data-checked": option.value === value, onSelect: () => choose(option.value), children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) }, group ?? ""))), create ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { alwaysRender: true }), _jsx(CommandGroup, { forceMount: true, children: _jsxs(CommandItem, { value: `create ${create.label}`, forceMount: true, onSelect: () => {
+                                                                setOpen(false);
+                                                                create.onSelect();
+                                                            }, children: [_jsx(Plus, { "aria-hidden": "true" }), create.label] }) })] })) : null] })] })] })] })) : (_jsx("span", { className: "truncate px-3 text-sm", children: currentLabel }))] }));
 }

package/dist/components/scroll-area.d.ts

@@ -1,5 +1,17 @@
 import * as React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+/**
+ * An area that scrolls with the product's own thin scrollbar.
+ *
+ * @family Other
+ * @when A bounded area whose content overflows on one axis: a side panel's list, a menu's long
+ * body.
+ * @instead A page scrolls as the document. A rail of slides is `Carousel`.
+ * @behaviour The viewport scrolls natively, so wheel, touch and keyboard all reach it; the thin
+ * scrollbar is drawn over the content.
+ * @words None of its own.
+ * @access The content keeps its own semantics; the scrollbar is paint.
+ */
 declare function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props): React.JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): React.JSX.Element;
 export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/components/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,qBAiBpF;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,SAAS,CAAC,KAAK,qBAkBrC;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/components/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;GAWG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,qBAiBpF;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,SAAS,CAAC,KAAK,qBAkBrC;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/scroll-area.js

@@ -1,6 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import { cn } from "../lib/utils.js";
+/**
+ * An area that scrolls with the product's own thin scrollbar.
+ *
+ * @family Other
+ * @when A bounded area whose content overflows on one axis: a side panel's list, a menu's long
+ * body.
+ * @instead A page scrolls as the document. A rail of slides is `Carousel`.
+ * @behaviour The viewport scrolls natively, so wheel, touch and keyboard all reach it; the thin
+ * scrollbar is drawn over the content.
+ * @words None of its own.
+ * @access The content keeps its own semantics; the scrollbar is paint.
+ */
 function ScrollArea({ className, children, ...props }) {
     return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-colors", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
 }

package/dist/components/select.d.ts

@@ -1,5 +1,21 @@
 import * as React from "react";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
+/**
+ * A short fixed list in our style, opened from a trigger that shows the choice.
+ *
+ * @family Choices
+ * @when Four to about ten fixed options in our style, each short enough to need no sentence: how
+ * often a task runs.
+ * @instead Two or three options are radios or a segmented control. A list to type into is a
+ * `Combobox`. Inside a native form a long list is `NativeSelect`.
+ * @behaviour The trigger shows the chosen value; the list floats under it with 12 px corners and a
+ * check at the chosen row's end. Arrows, typing, Enter, Escape. A placeholder reads in the muted
+ * grey and is never an option.
+ * @words Options are parallel phrases in sentence case: *Every hour*, *Every weekday*. The trigger
+ * never says *Select…*.
+ * @access A visible label tied to the trigger; listbox and option roles from Base UI; focus returns
+ * to the trigger on close.
+ */
 declare const Select: typeof SelectPrimitive.Root;
 declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
 declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMlE,QAAA,MAAM,MAAM,6BAAuB,CAAC;AAEpC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,qBAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC5B,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE,qBA4BF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,qBAQ7E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAsBhF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,qBAQhF;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,qBAa5D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,qBAa9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMlE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM,6BAAuB,CAAC;AAEpC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,qBAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC5B,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE,qBA6BF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,qBAQ7E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAsBhF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,qBAQhF;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,qBAa5D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,qBAa9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}

package/dist/components/select.js

@@ -4,6 +4,22 @@ import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { cn } from "../lib/utils.js";
 import { anchoredOverlayMotion } from "../lib/motion.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+/**
+ * A short fixed list in our style, opened from a trigger that shows the choice.
+ *
+ * @family Choices
+ * @when Four to about ten fixed options in our style, each short enough to need no sentence: how
+ * often a task runs.
+ * @instead Two or three options are radios or a segmented control. A list to type into is a
+ * `Combobox`. Inside a native form a long list is `NativeSelect`.
+ * @behaviour The trigger shows the chosen value; the list floats under it with 12 px corners and a
+ * check at the chosen row's end. Arrows, typing, Enter, Escape. A placeholder reads in the muted
+ * grey and is never an option.
+ * @words Options are parallel phrases in sentence case: *Every hour*, *Every weekday*. The trigger
+ * never says *Select…*.
+ * @access A visible label tied to the trigger; listbox and option roles from Base UI; focus returns
+ * to the trigger on close.
+ */
 const Select = SelectPrimitive.Root;
 function SelectGroup({ className, ...props }) {
     return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn("scroll-my-1 p-nadicode-xxs", className), ...props }));
@@ -15,7 +31,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex h-control-height min-h-touch-target w-fit items-center justify-between gap-1.5 rounded-sm border border-input bg-background py-2 pr-2 pl-control-padding-inline text-sm whitespace-nowrap transition-colors select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-placeholder:text-placeholder data-[size=sm]:h-nadicode-control-height-sm [@media(hover:hover)_and_(pointer:fine)]:min-h-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("pointer-events-auto", "relative isolate z-50 max-h-(--available-height) w-auto max-w-(--available-width) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[align-trigger=true]:transition-none", anchoredOverlayMotion, className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));

package/dist/components/separator.d.ts

@@ -1,4 +1,15 @@
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+/**
+ * A 1 px line between groups.
+ *
+ * @family Other
+ * @when Separating groups inside one surface: menu sections, a card's header from its toolbar.
+ * @instead A card's footer draws its own seam; a list in a card is a `divided` `ItemGroup`. Never a
+ * border around a region.
+ * @behaviour Horizontal or vertical, in the line colour.
+ * @words None.
+ * @access A `separator` from Base UI with no name of its own.
+ */
 declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
 export { Separator };
 //# sourceMappingURL=separator.d.ts.map