@nadicodeai/ui 12.1.95 → 12.1.97

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;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"}

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 });
 }

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

@@ -35,6 +35,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
     const [_open, _setOpen] = React.useState(defaultOpen);
     const open = openProp ?? _open;
     const setOpen = React.useCallback((value) => {
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- value is React's boolean | updater union, told apart only by typeof.
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
             setOpenProp(openState);
@@ -76,19 +77,33 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
         setOpenMobile,
         toggleSidebar,
     }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
-    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delay: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delay: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", 
+                // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+                style: {
                     "--sidebar-width": SIDEBAR_WIDTH,
                     "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                     ...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") {
         return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
     }
     if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { closeLabel: mobileCloseLabel ?? "Close", finalFocus: mobileFinalFocus, dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", style: {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { closeLabel: mobileCloseLabel ?? "Close", finalFocus: mobileFinalFocus, dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", 
+                // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+                style: {
                     "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: mobileTitle ?? "Sidebar" }), _jsx(SheetDescription, { children: mobileDescription ?? "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
@@ -212,6 +227,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
     if (!tooltip) {
         return comp;
     }
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- tooltip is our own string | TooltipContent props union, told apart only by typeof.
     if (typeof tooltip === "string") {
         tooltip = {
             children: tooltip,
@@ -233,15 +249,18 @@ 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%.
     const [width] = React.useState(() => {
         return `${Math.floor(Math.random() * 40) + 50}%`;
     });
-    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-sm px-2", className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-sm", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
+    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-sm px-2", className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-sm", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", 
+                // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+                style: {
                     "--skeleton-width": width,
                 } })] }));
 }

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 };

package/dist/components/slider.d.ts

@@ -1,4 +1,18 @@
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+/**
+ * A bounded number chosen by a thumb's position on a track.
+ *
+ * @family Inputs
+ * @when A bounded number where the position matters more than the digit: a limit, a share.
+ * @instead An exact number is `Input`; pair the two when precision counts. A few named levels are
+ * radios.
+ * @behaviour A 4 px track, the filled part in ink, a 12 px thumb edged in the input grey. Hover,
+ * drag and focus outline the thumb. Arrows step, Page Up and Down jump, Home and End reach the
+ * bounds. The thumb's touch target is 44 px.
+ * @words The label names the quantity; the current value and its unit are always written beside it
+ * (*€ 400*). The help states the bounds and the step.
+ * @access `role="slider"` with a name, min, max and `aria-valuetext` carrying the unit.
+ */
 declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react").JSX.Element;
 export { Slider };
 //# sourceMappingURL=slider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,+BAsC5B;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;;;;;;;;;;;GAaG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,+BAsC5B;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/slider.js

@@ -1,6 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import { cn } from "../lib/utils.js";
+/**
+ * A bounded number chosen by a thumb's position on a track.
+ *
+ * @family Inputs
+ * @when A bounded number where the position matters more than the digit: a limit, a share.
+ * @instead An exact number is `Input`; pair the two when precision counts. A few named levels are
+ * radios.
+ * @behaviour A 4 px track, the filled part in ink, a 12 px thumb edged in the input grey. Hover,
+ * drag and focus outline the thumb. Arrows step, Page Up and Down jump, Home and End reach the
+ * bounds. The thumb's touch target is 44 px.
+ * @words The label names the quantity; the current value and its unit are always written beside it
+ * (*€ 400*). The help states the bounds and the step.
+ * @access `role="slider"` with a name, min, max and `aria-valuetext` carrying the unit.
+ */
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
     const _values = Array.isArray(value)
         ? value

package/dist/components/sonner.d.ts

@@ -1,4 +1,22 @@
 import { type ToasterProps } from "sonner";
+/**
+ * The one place toasts appear, mounted once per product.
+ *
+ * @family Feedback
+ * @when One acknowledgement of an action the person took, when the result is not already visible
+ * where they are looking; and the Undo of a reversible removal. Mount it once; raise toasts through
+ * `toast`.
+ * @instead For a failure that must stay, use `MessageNotice` by the control. For unsaved work,
+ * failed payment or lost access never a toast alone. For a condition use a banner.
+ * @behaviour Tone `success`, `info`, `warning`, `error`; mark in the deep step. The first action
+ * with a handler becomes its one button. Undo only where a safe rollback exists. A toast that stays
+ * up shows the waiting line, not a spinner.
+ * @words Completion is noun, past participle: *Mailbox removed*, *Agent created*, paired one to one
+ * with its button *Remove mailbox*. No *successfully*, no exclamation.
+ * @access Announced by the toaster's live region. Never the only route to recovery: the record's
+ * own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while
+ * it shows.
+ */
 declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
 export { Toaster };
 //# sourceMappingURL=sonner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAK9D,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,gCAgC1C,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAM9D;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,gCAiC1C,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sonner.js

@@ -4,9 +4,28 @@ import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react";
 import { WaitingLine } from "./waiting-line.js";
+import { isThemeMode } from "../lib/theme-mode.js";
+/**
+ * The one place toasts appear, mounted once per product.
+ *
+ * @family Feedback
+ * @when One acknowledgement of an action the person took, when the result is not already visible
+ * where they are looking; and the Undo of a reversible removal. Mount it once; raise toasts through
+ * `toast`.
+ * @instead For a failure that must stay, use `MessageNotice` by the control. For unsaved work,
+ * failed payment or lost access never a toast alone. For a condition use a banner.
+ * @behaviour Tone `success`, `info`, `warning`, `error`; mark in the deep step. The first action
+ * with a handler becomes its one button. Undo only where a safe rollback exists. A toast that stays
+ * up shows the waiting line, not a spinner.
+ * @words Completion is noun, past participle: *Mailbox removed*, *Agent created*, paired one to one
+ * with its button *Remove mailbox*. No *successfully*, no exclamation.
+ * @access Announced by the toaster's live region. Never the only route to recovery: the record's
+ * own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while
+ * it shows.
+ */
 const Toaster = ({ ...props }) => {
     const { theme = "system" } = useTheme();
-    return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
+    return (_jsx(Sonner, { theme: isThemeMode(theme) ? theme : "system", className: "toaster group", icons: {
             success: _jsx(CircleCheckIcon, { className: "size-4 text-success-soft-foreground" }),
             info: _jsx(InfoIcon, { className: "size-4 text-info-soft-foreground" }),
             warning: _jsx(TriangleAlertIcon, { className: "size-4 text-warning-soft-foreground" }),
@@ -14,7 +33,9 @@ const Toaster = ({ ...props }) => {
             // A toast that stays up is already past a second, so its mark is the
             // one waiting line rather than a spinning glyph.
             loading: _jsx(WaitingLine, { className: "w-8", decorative: true }),
-        }, style: {
+        }, 
+        // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+        style: {
             "--normal-bg": "var(--popover)",
             "--normal-text": "var(--popover-foreground)",
             "--normal-border": "transparent",

package/dist/components/status-badge.d.ts

@@ -7,8 +7,19 @@ type StatusBadgeProps = Omit<ComponentProps<"span">, "children"> & {
     since?: string;
 };
 /**
- * A status is a mark and a word in one of five tones. The caller
- * owns which tone a state takes and the wording; this owns how the tone looks.
+ * A record's state: a mark and a word in one of five tones.
+ *
+ * @family Status
+ * @when A record's state, when it sets the row apart: failed, waiting on a person, a step in
+ * motion, paused, connected. Gray is every terminal state that needs no action.
+ * @instead For a category (an installation, a partner) use `Tag`. For a control reporting its own
+ * action use `ActionStatus`. For a mark beside a word that already names the state, `StatusDot`.
+ * @behaviour Still: a status never moves and is never a button. Each app keeps one value-to-tone
+ * map in one module; nothing else picks a status colour. A healthy record shows no badge.
+ * @words A state, not a verb: *Failed*, *Waiting for you*. Sentence case, one to three words, no
+ * trailing ellipsis. Italian runs a third longer: *In attesa di te*.
+ * @access The word is the name; the mark is `aria-hidden` and repeats the tone as a shape, so
+ * colour never carries the state alone. Not focusable.
  */
 declare function StatusBadge({ tone, label, since, className, ...props }: StatusBadgeProps): import("react").JSX.Element;
 export { StatusBadge, type StatusBadgeProps, type StatusBadgeTone };

package/dist/components/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAsB7E,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAkBjF;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,CAAC"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAoB7E,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAmBjF;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,CAAC"}

package/dist/components/status-badge.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleCheck, CircleDot, CirclePause, CircleX, Clock } from "lucide-react";
 import { Badge } from "./badge.js";
 import { cn } from "../lib/utils.js";
-const VARIANT_BY_TONE = {
-    success: "green",
-    warning: "amber",
-    danger: "red",
-    info: "blue",
-    neutral: "gray",
+const FILL_BY_TONE = {
+    success: { name: "green", classes: "bg-success-soft text-success-soft-foreground" },
+    warning: { name: "amber", classes: "bg-warning-soft text-warning-soft-foreground" },
+    danger: { name: "red", classes: "bg-destructive-soft text-destructive-soft-foreground" },
+    info: { name: "blue", classes: "bg-info-soft text-info-soft-foreground" },
+    neutral: { name: "gray", classes: "bg-accent text-muted-foreground" },
 };
 // One mark per tone, always the same one: the tone said again as a shape, so a
 // status reads without colour. The info dot is filled and still.
@@ -19,11 +19,23 @@ const MARK_BY_TONE = {
     neutral: CirclePause,
 };
 /**
- * A status is a mark and a word in one of five tones. The caller
- * owns which tone a state takes and the wording; this owns how the tone looks.
+ * A record's state: a mark and a word in one of five tones.
+ *
+ * @family Status
+ * @when A record's state, when it sets the row apart: failed, waiting on a person, a step in
+ * motion, paused, connected. Gray is every terminal state that needs no action.
+ * @instead For a category (an installation, a partner) use `Tag`. For a control reporting its own
+ * action use `ActionStatus`. For a mark beside a word that already names the state, `StatusDot`.
+ * @behaviour Still: a status never moves and is never a button. Each app keeps one value-to-tone
+ * map in one module; nothing else picks a status colour. A healthy record shows no badge.
+ * @words A state, not a verb: *Failed*, *Waiting for you*. Sentence case, one to three words, no
+ * trailing ellipsis. Italian runs a third longer: *In attesa di te*.
+ * @access The word is the name; the mark is `aria-hidden` and repeats the tone as a shape, so
+ * colour never carries the state alone. Not focusable.
  */
 function StatusBadge({ tone, label, since, className, ...props }) {
     const Mark = MARK_BY_TONE[tone];
-    return (_jsxs(Badge, { variant: VARIANT_BY_TONE[tone], className: cn("has-data-[icon=inline-start]:pl-2", className), ...props, children: [_jsx(Mark, { "aria-hidden": "true", "data-icon": "inline-start" }), label, since ? (_jsx("span", { className: "tabular-nums", "data-slot": "status-badge-since", children: since })) : null] }));
+    const fill = FILL_BY_TONE[tone];
+    return (_jsxs(Badge, { className: cn(fill.classes, "has-data-[icon=inline-start]:pl-2", className), "data-variant": fill.name, ...props, children: [_jsx(Mark, { "aria-hidden": "true", "data-icon": "inline-start" }), label, since ? (_jsx("span", { className: "tabular-nums", "data-slot": "status-badge-since", children: since })) : null] }));
 }
 export { StatusBadge };

package/dist/components/status-dot.d.ts

@@ -3,6 +3,18 @@ type StatusTone = "good" | "muted" | "warn" | "bad";
 interface StatusDotProps extends ComponentProps<"span"> {
     tone: StatusTone;
 }
+/**
+ * A small still dot beside a word that already names the state.
+ *
+ * @family Status
+ * @when A small mark in dense chrome, beside a word that already names the state: a channel, a
+ * machine in a list.
+ * @instead A status that stands alone is a `StatusBadge`. Something in motion is the waiting line
+ * or an Agent's orb; the dot has no info tone.
+ * @behaviour Still; never pulses. Tones are `good`, `muted`, `warn`, `bad`, at full strength.
+ * @words None of its own. The word beside it says the state.
+ * @access Always `aria-hidden`. If the word is missing, the state is missing.
+ */
 declare function StatusDot({ className, tone, ...props }: StatusDotProps): import("react").JSX.Element;
 export { StatusDot };
 export type { StatusTone };

package/dist/components/status-dot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-dot.d.ts","sourceRoot":"","sources":["../../src/components/status-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAQpD,UAAU,cAAe,SAAQ,cAAc,CAAC,MAAM,CAAC;IACrD,IAAI,EAAE,UAAU,CAAC;CAClB;AACD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAU/D;AACD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"status-dot.d.ts","sourceRoot":"","sources":["../../src/components/status-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAQpD,UAAU,cAAe,SAAQ,cAAc,CAAC,MAAM,CAAC;IACrD,IAAI,EAAE,UAAU,CAAC;CAClB;AACD;;;;;;;;;;;GAWG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAU/D;AACD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,UAAU,EAAE,CAAC"}