@nadicodeai/ui 12.1.96 → 12.1.98

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

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,KAAK,+BAY/F;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E;;;;;;;;;;GAUG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,KAAK,+BAY/F;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/separator.js

@@ -1,6 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import { cn } from "../lib/utils.js";
+/**
+ * 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.
+ */
 function Separator({ className, orientation = "horizontal", ...props }) {
     return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
 }

package/dist/components/settings-facts.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import { Card, type CardSurface } from "./card.js";
 export type SettingsFact = {
     /**
@@ -30,5 +30,22 @@ export type SettingsFactsSectionProps = Omit<ComponentPropsWithoutRef<"section">
      */
     size?: ComponentPropsWithoutRef<typeof Card>["size"];
 };
+/**
+ * Read-only facts about one object, framed as a card with a title and one action.
+ *
+ * @family Data
+ * @when Read-only facts about one object: who it is, where it belongs, its identifiers.
+ * `SettingsFactsSection` frames them as a card with a title and one action; `ObjectFacts` is the
+ * list alone.
+ * @instead Facts a person changes are a `SettingsSection` with its own Save. Facts compared across
+ * records are a table. A relation is its identity or a `Tag`, never its own card.
+ * @behaviour Label above value, two equal columns, one column on a phone. Every label stays when
+ * its value is missing, as *—*. A long value spans both columns. No fact gets a box of its own. In
+ * a side column, `presentation="summary"` drops the card.
+ * @words Labels are nouns, sentence case, no colon: *VAT number*. Values are exact: identifiers in
+ * mono with a copy button, dates in the person's locale.
+ * @access A `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
+ * when an editor closes. A dash carries screen-reader text.
+ */
 export declare function SettingsFactsSection({ action, presentation, description, facts, footer, missingValueLabel, headingId, title, surface, size, ...props }: SettingsFactsSectionProps): import("react").JSX.Element;
 //# sourceMappingURL=settings-facts.d.ts.map

package/dist/components/settings-facts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjE,OAAO,EACL,IAAI,EAOJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,wBAAwB,CAAC,SAAS,CAAC,EACnC,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,YAAqB,EACrB,WAAW,EACX,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA4D3B"}
+{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAK7E,OAAO,EACL,IAAI,EAOJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,wBAAwB,CAAC,SAAS,CAAC,EACnC,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,YAAqB,EACrB,WAAW,EACX,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA+D3B"}

package/dist/components/settings-facts.js

@@ -1,10 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { ObjectFacts } from "./object-workspace.js";
 import { TableValue } from "./table-value.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
+/**
+ * Read-only facts about one object, framed as a card with a title and one action.
+ *
+ * @family Data
+ * @when Read-only facts about one object: who it is, where it belongs, its identifiers.
+ * `SettingsFactsSection` frames them as a card with a title and one action; `ObjectFacts` is the
+ * list alone.
+ * @instead Facts a person changes are a `SettingsSection` with its own Save. Facts compared across
+ * records are a table. A relation is its identity or a `Tag`, never its own card.
+ * @behaviour Label above value, two equal columns, one column on a phone. Every label stays when
+ * its value is missing, as *—*. A long value spans both columns. No fact gets a box of its own. In
+ * a side column, `presentation="summary"` drops the card.
+ * @words Labels are nouns, sentence case, no colon: *VAT number*. Values are exact: identifiers in
+ * mono with a copy button, dates in the person's locale.
+ * @access A `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
+ * when an editor closes. A dash carries screen-reader text.
+ */
 export function SettingsFactsSection({ action, presentation = "card", description, facts, footer, missingValueLabel, headingId, title, surface = "resting", size = "default", ...props }) {
+    const termId = useId();
     if (presentation === "summary") {
-        return (_jsxs("section", { ...props, "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h2", { id: headingId, tabIndex: -1, className: "text-sm font-medium", children: title }), action] }), description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null, _jsx("dl", { className: "flex flex-wrap items-start gap-x-6 gap-y-3", children: facts.map((fact) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: "text-sm", children: fact.value ?? _jsx(TableValue, { missingLabel: missingValueLabel, value: null }) })] }, fact.label))) }), footer] }));
+        return (_jsxs("section", { ...props, "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h2", { id: headingId, tabIndex: -1, className: "text-sm font-medium", children: title }), action] }), description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null, _jsx("dl", { className: "flex flex-wrap items-start gap-x-6 gap-y-3", children: facts.map((fact, index) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", id: `${termId}-${index}`, children: fact.label }), _jsx("dd", { "aria-labelledby": `${termId}-${index}`, className: "text-sm", children: fact.value ?? _jsx(TableValue, { missingLabel: missingValueLabel, value: null }) })] }, fact.label))) }), footer] }));
     }
     return (_jsxs(Card, { render: _jsx("section", {}), ...props, "aria-labelledby": headingId, surface: surface, size: size, className: "min-w-0", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx("h2", { id: headingId, tabIndex: -1, children: title }) }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(CardContent, { children: _jsx(ObjectFacts, { facts: facts.map((fact) => ({
                         label: fact.label,

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

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+export type SettingsPageProps = {
+    /** A screen-reader h1, where the product's chrome does not draw one: the path already names the place. */
+    title?: string;
+    headingProps?: Omit<ComponentProps<"h1">, "children">;
+    /** The section cards, in order: SettingsSection, SettingsFactsSection. */
+    children: ReactNode;
+};
+/**
+ * A page of settings: a centred column of section cards, each saving its own values.
+ *
+ * @family Compositions
+ * @when A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.
+ * @instead One object's page with a settings card among its sections is an ObjectPage; Theme and Language, which apply on change, stay in the account menu.
+ * @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: each SettingsSection saves from its footer.
+ * @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest.
+ * @access `title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.
+ */
+export declare function SettingsPage({ title, headingProps, children }: SettingsPageProps): ReactElement;
+//# sourceMappingURL=settings-page.d.ts.map

package/dist/components/settings-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.d.ts","sourceRoot":"","sources":["../../src/components/settings-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0GAA0G;IAC1G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACtD,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAW/F"}

package/dist/components/settings-page.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { ReadingColumn } from "./reading-column.js";
+/**
+ * A page of settings: a centred column of section cards, each saving its own values.
+ *
+ * @family Compositions
+ * @when A place whose job is changing how something behaves: an account's profile, a company's identity, Nadia's notifications.
+ * @instead One object's page with a settings card among its sections is an ObjectPage; Theme and Language, which apply on change, stay in the account menu.
+ * @behaviour The sections stack 20 apart in a centred column at most 56rem wide. The page draws no header and no save of its own: each SettingsSection saves from its footer.
+ * @words `title` names the place as the navigation does ("Profile"); the sections' titles and lines carry the rest.
+ * @access `title` becomes a visually hidden h1 for a product whose chrome shows the place without a heading; leave it out where the chrome already draws the h1.
+ */
+export function SettingsPage({ title, headingProps, children }) {
+    return (_jsxs(ReadingColumn, { className: "gap-5", width: "configuration", children: [title ? (_jsx("h1", { ...headingProps, className: cn("sr-only", headingProps?.className), children: title })) : null, children] }));
+}

package/dist/components/settings-section.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { type CardSurface } from "./card.js";
+import { type SettingsSave } from "../internal/settings-save.js";
 import { Field } from "./field.js";
+export type { SettingsSave, SettingsSaveFailure } from "../internal/settings-save.js";
 export type SettingsFieldControlProps = {
     id: string;
     "aria-invalid"?: true;
@@ -8,16 +9,45 @@ export type SettingsFieldControlProps = {
     disabled?: boolean;
     required?: boolean;
 };
-declare function SettingsSection({ title, description, actions, footer, footerHint, children, className, surface, presentation, columns, ...props }: Omit<React.ComponentProps<"section">, "title"> & {
-    title?: React.ReactNode;
-    description?: React.ReactNode;
+export type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title" | "children"> & {
+    title: string;
+    /** One line saying what changing it does. */
+    description: string;
+    /** A control on the section's own header: an avatar's upload, a state. */
     actions?: React.ReactNode;
+    /** Two columns where related fields fit. */
+    columns?: 1 | 2;
+    children?: React.ReactNode;
+} & ({
+    save: SettingsSave;
+    footer?: never;
+    footerHint?: never;
+} | {
+    save?: never;
     footer?: React.ReactNode;
     footerHint?: React.ReactNode;
-    surface?: CardSurface;
-    presentation?: "split" | "form";
-    columns?: 1 | 2;
-}): React.JSX.Element;
+});
+/**
+ * A card of related settings that says what changing them does and saves them from its own footer.
+ *
+ * @family Compositions
+ * @when A few related values a person changes and saves together, on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications.
+ * @instead Read-only values are a SettingsFactsSection; Theme and Language, which apply on change, live in the account menu; a record's edit in a list is a RowEditForm.
+ * @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then the footer shows the ok check and `savedLabel` until the next change. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
+ * @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint says where the save applies ("Saved for every device you sign in on."); Save, Saving and Saved come from the product's catalogue.
+ * @access The title is the section's h2 and names the form that saves it. The footer's hint and saved line are one status, announced politely; a failure under a field marks the control invalid and describes it.
+ */
+declare function SettingsSection({ title, description, actions, columns, children, className, save, footer, footerHint, ...props }: SettingsSectionProps): React.JSX.Element;
+/**
+ * One setting: its label and help above its control, and what went wrong under it.
+ *
+ * @family Inputs
+ * @when A value inside a SettingsSection: a name, an address, a choice, a switch.
+ * @instead A field of a drawer's or a dialog's form is a Field from the form's own owner; a read-only value is a fact in a SettingsFactsSection.
+ * @behaviour The control is 20rem wide under its label and help by default; a switch row passes `orientation="horizontal"` and sits at the end of its label's row at its own width. A validation `error`, or a failed save about this field, shows under the control and marks it invalid.
+ * @words The label is a noun for the value ("Display name"); the help is one line saying what it is for or where it shows; an error says what to do next.
+ * @access The control receives its id, `aria-invalid` and `aria-describedby` through `controlProps`, so the label, help and error are read with it.
+ */
 declare function SettingsField({ id, label, description, error, invalid, disabled, required, orientation, children, className, contentClassName, controlClassName, controlWidth, ...props }: Omit<React.ComponentProps<typeof Field>, "children"> & {
     id: string;
     label: React.ReactNode;

package/dist/components/settings-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,KAAK,EAMN,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,YAAsB,EACtB,OAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,qBAwCA;AAED,iBAAS,aAAa,CAAC,EACrB,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAwB,EACxB,QAAQ,EACR,QAAQ,EACR,WAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,YAAwB,EACxB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,yBAAyB,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAClF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;CAChD,qBA+CA;AAED,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,KAAK,EAMN,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/F,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,CACE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,GAC1D;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAC3E,CAAC;AAEJ;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAW,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAwCtB;AAED;;;;;;;;;GASG;AACH,iBAAS,aAAa,CAAC,EACrB,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAwB,EACxB,QAAQ,EACR,QAAQ,EACR,WAAwB,EACxB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,YAAoE,EACpE,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,yBAAyB,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAClF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;CAChD,qBAyDA;AAED,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/settings-section.js

@@ -1,12 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { FooterStrip } from "../internal/footer-strip.js";
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
+import { SettingsFieldFailure, SettingsSaveForm, } from "../internal/settings-save.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "./card.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "./field.js";
-function SettingsSection({ title, description, actions, footer, footerHint, children, className, surface = "resting", presentation = "split", columns = 1, ...props }) {
-    return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "settings-section" }), surface: surface, className: cn("@container/settings-section min-w-0", presentation === "form" && "gap-5", className), children: [(title || description || actions) && (_jsxs(CardHeader, { children: [title && (_jsx(CardTitle, { children: _jsx("h2", { children: title }) })), description && _jsx(CardDescription, { children: description }), actions && _jsx(CardAction, { children: actions })] })), children != null ? (_jsx(CardContent, { children: _jsx(FieldGroup, { "data-slot": "settings-section-fields", className: cn((presentation === "form" || columns === 2) && "grid gap-5", columns === 2 && "@2xl/settings-section:grid-cols-2"), children: children }) })) : null, _jsx(FooterStrip, { hint: footerHint, hintSlot: "settings-section-hint", children: footer })] }));
+/**
+ * A card of related settings that says what changing them does and saves them from its own footer.
+ *
+ * @family Compositions
+ * @when A few related values a person changes and saves together, on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications.
+ * @instead Read-only values are a SettingsFactsSection; Theme and Language, which apply on change, live in the account menu; a record's edit in a list is a RowEditForm.
+ * @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then the footer shows the ok check and `savedLabel` until the next change. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
+ * @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint says where the save applies ("Saved for every device you sign in on."); Save, Saving and Saved come from the product's catalogue.
+ * @access The title is the section's h2 and names the form that saves it. The footer's hint and saved line are one status, announced politely; a failure under a field marks the control invalid and describes it.
+ */
+function SettingsSection({ title, description, actions, columns = 1, children, className, save, footer, footerHint, ...props }) {
+    const titleId = React.useId();
+    const fields = children != null ? (_jsx(CardContent, { children: _jsx(FieldGroup, { "data-slot": "settings-section-fields", className: cn("gap-4.5", columns === 2 && "grid @2xl/settings-section:grid-cols-2"), children: children }) })) : null;
+    return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "settings-section" }), className: cn("@container/settings-section min-w-0", className), children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx("h2", { id: titleId, children: title }) }), _jsx(CardDescription, { children: description }), actions ? _jsx(CardAction, { children: actions }) : null] }), save ? (_jsx(SettingsSaveForm, { save: save, titleId: titleId, children: fields })) : (_jsxs(_Fragment, { children: [fields, _jsx(FooterStrip, { hint: footerHint, hintSlot: "settings-section-hint", children: footer })] }))] }));
 }
-function SettingsField({ id, label, description, error, invalid = Boolean(error), disabled, required, orientation = "responsive", children, className, contentClassName, controlClassName, controlWidth = "natural", ...props }) {
+/**
+ * One setting: its label and help above its control, and what went wrong under it.
+ *
+ * @family Inputs
+ * @when A value inside a SettingsSection: a name, an address, a choice, a switch.
+ * @instead A field of a drawer's or a dialog's form is a Field from the form's own owner; a read-only value is a fact in a SettingsFactsSection.
+ * @behaviour The control is 20rem wide under its label and help by default; a switch row passes `orientation="horizontal"` and sits at the end of its label's row at its own width. A validation `error`, or a failed save about this field, shows under the control and marks it invalid.
+ * @words The label is a noun for the value ("Display name"); the help is one line saying what it is for or where it shows; an error says what to do next.
+ * @access The control receives its id, `aria-invalid` and `aria-describedby` through `controlProps`, so the label, help and error are read with it.
+ */
+function SettingsField({ id, label, description, error, invalid = Boolean(error), disabled, required, orientation = "vertical", children, className, contentClassName, controlClassName, controlWidth = orientation === "horizontal" ? "natural" : "standard", ...props }) {
     const descriptionId = description ? `${id}-description` : undefined;
     const errorId = error ? `${id}-error` : undefined;
     const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
@@ -17,7 +41,9 @@ function SettingsField({ id, label, description, error, invalid = Boolean(error)
         "aria-invalid": invalid ? true : undefined,
         "aria-describedby": describedBy || undefined,
     };
-    return (_jsx("div", { "data-slot": "settings-field", "data-invalid": invalid ? true : undefined, className: "contents", children: _jsxs(Field, { "data-invalid": invalid ? true : undefined, "data-disabled": disabled ? true : undefined, orientation: orientation, className: cn("items-start", className), ...props, children: [_jsxs(FieldContent, { className: contentClassName, children: [_jsx(FieldLabel, { htmlFor: id, children: label }), description && _jsx(FieldDescription, { id: descriptionId, children: description }), error && _jsx(FieldError, { id: errorId, children: error })] }), _jsx("div", { "data-slot": "settings-field-control", className: cn("flex min-w-0", controlWidth === "standard"
+    const errors = (_jsxs(_Fragment, { children: [error ? _jsx(FieldError, { id: errorId, children: error }) : null, _jsx(SettingsFieldFailure, { id: id })] }));
+    const errorsUnderControl = orientation === "vertical";
+    return (_jsx("div", { "data-slot": "settings-field", "data-invalid": invalid ? true : undefined, className: "contents", children: _jsxs(Field, { "data-invalid": invalid ? true : undefined, "data-disabled": disabled ? true : undefined, orientation: orientation, className: cn("items-start", className), ...props, children: [_jsxs(FieldContent, { className: contentClassName, children: [_jsx(FieldLabel, { htmlFor: id, children: label }), description ? (_jsx(FieldDescription, { id: descriptionId, children: description })) : null, errorsUnderControl ? null : errors] }), _jsx("div", { "data-slot": "settings-field-control", className: cn("flex min-w-0", controlWidth === "standard"
                         ? "w-full max-w-80 justify-start [&>:not([role=checkbox],[role=switch],[role=radio])]:w-full"
                         : controlWidth === "full"
                             ? "w-full justify-start [&>:not([role=checkbox],[role=switch],[role=radio])]:w-full"
@@ -25,6 +51,6 @@ function SettingsField({ id, label, description, error, invalid = Boolean(error)
                                 ? "w-full justify-start"
                                 : orientation === "horizontal"
                                     ? "shrink-0 justify-end"
-                                    : "w-full justify-start @md/field-group:w-auto @md/field-group:min-w-64 @md/field-group:justify-end", controlClassName), children: children({ controlProps }) })] }) }));
+                                    : "w-full justify-start @md/field-group:w-auto @md/field-group:min-w-64 @md/field-group:justify-end", controlClassName), children: children({ controlProps }) }), errorsUnderControl ? errors : null] }) }));
 }
 export { SettingsField, SettingsSection };

package/dist/components/sheet.d.ts

@@ -1,5 +1,21 @@
 import * as React from "react";
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+/**
+ * A panel beside a record, or the navigation on a narrow window.
+ *
+ * @family Menus
+ * @when Context that belongs beside a record: inspecting a row's details. And the product's
+ * navigation when the window is too narrow for the sidebar.
+ * @instead For a catalogue or steps use `FormDrawer` (built on this). For editing use the row or
+ * the record's page. For a blocking decision use `ConfirmDialog`.
+ * @behaviour From any side, 12 px from the edges, 12 px corners all round, modal over the scrim.
+ * Default 3/4 of the window up to 384 px; navigation 288 px. Header 24 px padding; body scrolls;
+ * footer recessed.
+ * @words Title is the record's name, never the page's heading again. A footer link names where it
+ * goes: *Open Rossi Ottica*.
+ * @access A modal dialog named by its title with a named close. Focus returns to the row it
+ * inspects, or to the navigation button.
+ */
 declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
 declare function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props): React.JSX.Element;
 declare function SheetClose({ ...props }: SheetPrimitive.Close.Props): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAOjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,qBAErD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,qBAE/D;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAE3D;AAgBD,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IACpD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,UAAoB,EACpB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAgCnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAQtE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,qBAQlF;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAOjE;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,qBAErD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,qBAE/D;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAE3D;AAqBD,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IACpD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,UAAoB,EACpB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAiCnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAQtE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,qBAQlF;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}

package/dist/components/sheet.js

@@ -5,6 +5,22 @@ import { cn } from "../lib/utils.js";
 import { overlayBackdropMotion } from "../lib/motion.js";
 import { Button } from "./button.js";
 import { XIcon } from "lucide-react";
+/**
+ * A panel beside a record, or the navigation on a narrow window.
+ *
+ * @family Menus
+ * @when Context that belongs beside a record: inspecting a row's details. And the product's
+ * navigation when the window is too narrow for the sidebar.
+ * @instead For a catalogue or steps use `FormDrawer` (built on this). For editing use the row or
+ * the record's page. For a blocking decision use `ConfirmDialog`.
+ * @behaviour From any side, 12 px from the edges, 12 px corners all round, modal over the scrim.
+ * Default 3/4 of the window up to 384 px; navigation 288 px. Header 24 px padding; body scrolls;
+ * footer recessed.
+ * @words Title is the record's name, never the page's heading again. A footer link names where it
+ * goes: *Open Rossi Ottica*.
+ * @access A modal dialog named by its title with a named close. Focus returns to the row it
+ * inspects, or to the navigation button.
+ */
 function Sheet({ ...props }) {
     return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -18,10 +34,10 @@ function SheetPortal({ ...props }) {
     return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("pointer-events-auto", "fixed inset-0 z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
 }
 function SheetContent({ className, children, side = "right", showCloseButton = true, closeLabel = "Close", ...props }) {
-    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex max-h-[calc(100%-var(--nc-lg))] flex-col gap-nadicode-md rounded-lg border-0 bg-popover bg-clip-padding text-sm text-popover-foreground nc-elevation-modal transition-[opacity,translate] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-opacity data-[side=bottom]:inset-x-nadicode-sm data-[side=bottom]:bottom-nadicode-sm data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-nadicode-md data-[side=bottom]:data-starting-style:translate-y-nadicode-md motion-reduce:data-[side=bottom]:data-ending-style:translate-none motion-reduce:data-[side=bottom]:data-starting-style:translate-none data-[side=left]:inset-y-nadicode-sm data-[side=left]:left-nadicode-sm data-[side=left]:w-3/4 data-[side=left]:data-ending-style:-translate-x-nadicode-md data-[side=left]:data-starting-style:-translate-x-nadicode-md motion-reduce:data-[side=left]:data-ending-style:translate-none motion-reduce:data-[side=left]:data-starting-style:translate-none data-[side=right]:inset-y-nadicode-sm data-[side=right]:right-nadicode-sm data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-nadicode-md data-[side=right]:data-starting-style:translate-x-nadicode-md motion-reduce:data-[side=right]:data-ending-style:translate-none motion-reduce:data-[side=right]:data-starting-style:translate-none data-[side=top]:inset-x-nadicode-sm data-[side=top]:top-nadicode-sm data-[side=top]:h-auto data-[side=top]:data-ending-style:-translate-y-nadicode-md data-[side=top]:data-starting-style:-translate-y-nadicode-md motion-reduce:data-[side=top]:data-ending-style:translate-none motion-reduce:data-[side=top]:data-starting-style:translate-none data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("pointer-events-auto", "fixed z-50 flex max-h-[calc(100%-var(--nc-lg))] flex-col gap-nadicode-md rounded-lg border-0 bg-popover bg-clip-padding text-sm text-popover-foreground nc-elevation-modal transition-[opacity,translate] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-opacity data-[side=bottom]:inset-x-nadicode-sm data-[side=bottom]:bottom-nadicode-sm data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-nadicode-md data-[side=bottom]:data-starting-style:translate-y-nadicode-md motion-reduce:data-[side=bottom]:data-ending-style:translate-none motion-reduce:data-[side=bottom]:data-starting-style:translate-none data-[side=left]:inset-y-nadicode-sm data-[side=left]:left-nadicode-sm data-[side=left]:w-3/4 data-[side=left]:data-ending-style:-translate-x-nadicode-md data-[side=left]:data-starting-style:-translate-x-nadicode-md motion-reduce:data-[side=left]:data-ending-style:translate-none motion-reduce:data-[side=left]:data-starting-style:translate-none data-[side=right]:inset-y-nadicode-sm data-[side=right]:right-nadicode-sm data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-nadicode-md data-[side=right]:data-starting-style:translate-x-nadicode-md motion-reduce:data-[side=right]:data-ending-style:translate-none motion-reduce:data-[side=right]:data-starting-style:translate-none data-[side=top]:inset-x-nadicode-sm data-[side=top]:top-nadicode-sm data-[side=top]:h-auto data-[side=top]:data-ending-style:-translate-y-nadicode-md data-[side=top]:data-starting-style:-translate-y-nadicode-md motion-reduce:data-[side=top]:data-ending-style:translate-none motion-reduce:data-[side=top]:data-starting-style:translate-none data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-0.5 p-nadicode-lg", className), ...props }));

package/dist/components/sidebar-sections.d.ts

@@ -0,0 +1,40 @@
+import { type IconComponent, type IdentityMarkProps } from "./identity-mark.js";
+import type { PageCommandAction } from "./page-actions.js";
+export type SidebarSection<Id extends string> = PageCommandAction & {
+    id: Id;
+    label: string;
+    icon: IconComponent;
+};
+export type SidebarSectionsProps<Id extends string> = {
+    /** The way back: "Agents", "Customers", "Back to workspace". */
+    back: PageCommandAction & {
+        label: string;
+        disabled?: boolean;
+    };
+    /** What you are in. `detail` reads under the name: "Company · 3 Agents". */
+    identity: {
+        name: string;
+        mark?: IdentityMarkProps;
+        detail?: string;
+    };
+    /** A heading over the sections: "Account", "Platform settings". */
+    group?: string;
+    /** Names the nav for assistive technology. */
+    label: string;
+    sections: readonly SidebarSection<Id>[];
+    current: Id;
+    /** The rail is too narrow for words: icons, names in tooltips. */
+    narrow?: boolean;
+};
+/**
+ * The sidebar swapped to one object: the way back, what you are in, and its sections.
+ *
+ * @family Navigation
+ * @when Inside an object, the account or Platform settings, the same sidebar column shows these instead of the places: an Agent's or a Customer's sections in the Portal, Nadia's Edit and her company's sections, the Portal's Account and Platform settings.
+ * @instead The places a person can go are the sidebar's own groups; a page's views are Tabs; a settings page that does not swap the column is a SettingsPage. Never a second column beside the first.
+ * @behaviour The back row returns to where the person came from and is disabled while leaving is blocked. One section is current. Narrow, the identity and the heading leave, and each row keeps its icon with its name in a tooltip.
+ * @words The back row names where it goes ("Agents", "Back to workspace"); the identity is the object's own name; the heading names the kind of settings ("Account"); sections are nouns ("Skills", "Members").
+ * @access The sections are a nav named by `label`; the current one carries aria-current="page". The identity's mark is decorative beside its name.
+ */
+export declare function SidebarSections<Id extends string>({ back, current, group, identity, label, narrow, sections, }: SidebarSectionsProps<Id>): import("react").JSX.Element;
+//# sourceMappingURL=sidebar-sections.d.ts.map

package/dist/components/sidebar-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-sections.d.ts","sourceRoot":"","sources":["../../src/components/sidebar-sections.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,iBAAiB,EACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AASnE,MAAM,MAAM,cAAc,CAAC,EAAE,SAAS,MAAM,IAAI,iBAAiB,GAAG;IAClE,EAAE,EAAE,EAAE,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,MAAM,IAAI;IACpD,gEAAgE;IAChE,IAAI,EAAE,iBAAiB,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAChE,4EAA4E;IAC5E,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,iBAAiB,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;IACxC,OAAO,EAAE,EAAE,CAAC;IACZ,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAaF;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,EACjD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAc,EACd,QAAQ,GACT,EAAE,oBAAoB,CAAC,EAAE,CAAC,+BAyD1B"}

package/dist/components/sidebar-sections.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft } from "lucide-react";
+import { IdentityMark, } from "./identity-mark.js";
+import { SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "./sidebar.js";
+import { cn } from "../lib/utils.js";
+function actionProps(action, disabled = false) {
+    if (action.render) {
+        return { render: action.render, "aria-disabled": disabled || undefined };
+    }
+    // The row's tooltip trigger takes `disabled` for itself, so the button element carries it.
+    return {
+        onClick: action.onClick,
+        render: _jsx("button", { disabled: disabled, type: "button" }),
+    };
+}
+/**
+ * The sidebar swapped to one object: the way back, what you are in, and its sections.
+ *
+ * @family Navigation
+ * @when Inside an object, the account or Platform settings, the same sidebar column shows these instead of the places: an Agent's or a Customer's sections in the Portal, Nadia's Edit and her company's sections, the Portal's Account and Platform settings.
+ * @instead The places a person can go are the sidebar's own groups; a page's views are Tabs; a settings page that does not swap the column is a SettingsPage. Never a second column beside the first.
+ * @behaviour The back row returns to where the person came from and is disabled while leaving is blocked. One section is current. Narrow, the identity and the heading leave, and each row keeps its icon with its name in a tooltip.
+ * @words The back row names where it goes ("Agents", "Back to workspace"); the identity is the object's own name; the heading names the kind of settings ("Account"); sections are nouns ("Skills", "Members").
+ * @access The sections are a nav named by `label`; the current one carries aria-current="page". The identity's mark is decorative beside its name.
+ */
+export function SidebarSections({ back, current, group, identity, label, narrow = false, sections, }) {
+    const row = cn(narrow && "justify-center px-0");
+    const words = cn("truncate", narrow && "sr-only");
+    return (_jsxs("div", { className: "grid w-full gap-2", "data-slot": "sidebar-sections", children: [_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { className: row, tooltip: back.label, ...actionProps(back, back.disabled), children: [_jsx(ChevronLeft, { "aria-hidden": "true" }), _jsx("span", { className: words, children: back.label })] }) }) }), narrow ? null : (_jsxs("div", { className: "flex min-w-0 items-center gap-2 px-2 pt-2 text-sm", "data-slot": "sidebar-sections-identity", children: [identity.mark ? _jsx(IdentityMark, { ...identity.mark, size: 24 }) : null, _jsxs("span", { className: "grid min-w-0", children: [_jsx("span", { className: "truncate font-medium text-sidebar-foreground", children: identity.name }), identity.detail ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: identity.detail })) : null] })] })), group && !narrow ? _jsx(SidebarGroupLabel, { children: group }) : null, _jsx("nav", { "aria-label": label, children: _jsx(SidebarMenu, { children: sections.map((section) => {
+                        const Icon = section.icon;
+                        const isCurrent = section.id === current;
+                        return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { "aria-current": isCurrent ? "page" : undefined, className: row, isActive: isCurrent, tooltip: section.label, ...actionProps(section), children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx("span", { className: words, children: section.label })] }) }, section.id));
+                    }) }) })] }));
+}

package/dist/components/sidebar.d.ts

@@ -42,6 +42,16 @@ type SidebarProps = React.ComponentProps<"div"> & {
     /** The mobile sheet's standard focus destination after it closes. */
     mobileFinalFocus?: React.ComponentProps<typeof SheetContent>["finalFocus"];
 };
+/**
+ * A product's navigation column: where a person can go, with the account at its foot.
+ *
+ * @family Navigation
+ * @when The Portal's and Nadia's left column: the groups of places, an object's sections when the column swaps, the update offer and the account menu at the foot.
+ * @instead An object's sections are SidebarSections inside this column, never a second column or a tab row; a page's own views are Tabs.
+ * @behaviour One row is selected and marked as the current page. Collapsed or narrow, rows keep their icon and show their name in a tooltip; under the mobile breakpoint the column becomes a sheet. A row's count uses SidebarMenuBadge, whose attention tone is for a failure that needs the person.
+ * @words Each row is a place's noun: "Agents", "Tasks", "Customers". A count is a bare number.
+ * @access The column is a landmark; each row is a link or a button with its name, and the current one carries aria-current="page". The badge's number is read with its row.
+ */
 declare function Sidebar({ side, variant, collapsible, mobileTitle, mobileDescription, mobileCloseLabel, mobileFinalFocus, className, children, dir, ...props }: SidebarProps): React.JSX.Element;
 declare function SidebarTrigger({ className, onClick, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
 declare function SidebarRail({ className, "aria-label": ariaLabel, title, ...props }: React.ComponentProps<"button">): React.JSX.Element;
@@ -70,7 +80,10 @@ declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, c
 declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
     showOnHover?: boolean;
 }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenuBadge({ className, tone, ...props }: React.ComponentProps<"div"> & {
+    /** `attention` is a count that needs the person, such as Tasks that failed. */
+    tone?: "default" | "attention";
+}): React.JSX.Element;
 declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
     showIcon?: boolean;
 }): React.JSX.Element;

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

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

package/dist/components/sidebar.js

@@ -85,6 +85,16 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
                     ...style,
                 }, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
 }
+/**
+ * A product's navigation column: where a person can go, with the account at its foot.
+ *
+ * @family Navigation
+ * @when The Portal's and Nadia's left column: the groups of places, an object's sections when the column swaps, the update offer and the account menu at the foot.
+ * @instead An object's sections are SidebarSections inside this column, never a second column or a tab row; a page's own views are Tabs.
+ * @behaviour One row is selected and marked as the current page. Collapsed or narrow, rows keep their icon and show their name in a tooltip; under the mobile breakpoint the column becomes a sheet. A row's count uses SidebarMenuBadge, whose attention tone is for a failure that needs the person.
+ * @words Each row is a place's noun: "Agents", "Tasks", "Customers". A count is a bare number.
+ * @access The column is a landmark; each row is a link or a button with its name, and the current one carries aria-current="page". The badge's number is read with its row.
+ */
 function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", mobileTitle, mobileDescription, mobileCloseLabel, mobileFinalFocus, className, children, dir, ...props }) {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
@@ -239,8 +249,9 @@ function SidebarMenuAction({ className, render, showOnHover = false, ...props })
         },
     });
 }
-function SidebarMenuBadge({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-primary-foreground", className), ...props }));
+function SidebarMenuBadge({ className, tone = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", "data-tone": tone, className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-primary-foreground", tone === "attention" &&
+            "h-4.5 min-w-4.5 rounded-full bg-destructive font-semibold text-destructive-foreground peer-hover/menu-button:text-destructive-foreground peer-data-active/menu-button:text-destructive-foreground", className), ...props }));
 }
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     // Random width between 50 to 90%.

package/dist/components/skeleton.d.ts

@@ -1,3 +1,13 @@
+/**
+ * A still placeholder in the shape of content whose layout is known.
+ *
+ * @family Feedback
+ * @when A page or region whose layout is known while its data loads.
+ * @instead For a wait on something the person pressed use `PendingLabel` and `WaitingLine`. Unknown layout shows nothing until data. Never both a skeleton and a line.
+ * @behaviour The `line` fill, which stays visible on the card and on the workspace ground in both modes; 6 px corners or a circle, in the final shape so nothing shifts. Never pulses. Resolves to data, an absence or a failure.
+ * @words None. No "Loading" text beside it.
+ * @access The region is `aria-busy`; each placeholder is hidden and never focusable.
+ */
 declare function Skeleton({ className, shape, ...props }: React.ComponentProps<"div"> & {
     shape?: "rectangle" | "circle";
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CAChC,+BAQA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CAChC,+BASA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/skeleton.js

@@ -1,6 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+/**
+ * A still placeholder in the shape of content whose layout is known.
+ *
+ * @family Feedback
+ * @when A page or region whose layout is known while its data loads.
+ * @instead For a wait on something the person pressed use `PendingLabel` and `WaitingLine`. Unknown layout shows nothing until data. Never both a skeleton and a line.
+ * @behaviour The `line` fill, which stays visible on the card and on the workspace ground in both modes; 6 px corners or a circle, in the final shape so nothing shifts. Never pulses. Resolves to data, an absence or a failure.
+ * @words None. No "Loading" text beside it.
+ * @access The region is `aria-busy`; each placeholder is hidden and never focusable.
+ */
 function Skeleton({ className, shape = "rectangle", ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn("bg-muted", shape === "circle" ? "rounded-full" : "rounded-sm", className), ...props }));
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", className: cn("bg-border", shape === "circle" ? "rounded-full" : "rounded-sm", className), ...props }));
 }
 export { Skeleton };