@nadicodeai/ui 12.1.96 → 12.1.98

package/dist/internal/catalog-list.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, PlusIcon } from "lucide-react";
+import { useId } from "react";
+import { ActionMenu } from "../components/action-menu.js";
+import { IdentityMark } from "../components/identity-mark.js";
+import { PageCommandButton } from "../components/page-actions.js";
+import { Skeleton } from "../components/skeleton.js";
+import { textLinkVariants } from "../components/text-link.js";
+import { soleMenuButton } from "./record-menu-items.js";
+import { RowMessageActions, RowMessageLine } from "./row-message.js";
+import { cn } from "../lib/utils.js";
+const ENTRY_FRAME = "flex min-w-0 items-start gap-3.5 rounded-sm bg-card p-4 nc-elevation-resting";
+function EntryName({ link, name }) {
+    if (!link)
+        return name;
+    const anchor = {
+        href: link.href,
+        children: name,
+        className: textLinkVariants({ kind: "plain" }),
+    };
+    return link.renderLink ? link.renderLink(anchor) : _jsx("a", { ...anchor });
+}
+function EntryAdd({ add }) {
+    const { added, ...command } = add;
+    if (added) {
+        return (_jsxs("span", { className: "flex h-control-height items-center gap-1.5 px-1 text-sm text-muted-foreground", children: [_jsx(CheckIcon, { "aria-hidden": "true", className: "size-4" }), added.label] }));
+    }
+    return (_jsx(PageCommandButton, { command: { ...command, icon: _jsx(PlusIcon, { "aria-hidden": "true" }) }, variant: "outline" }));
+}
+function CatalogEntry({ add, description, fact, link, mark, menu, name, state, }) {
+    const menuButton = add || !menu ? undefined : soleMenuButton(menu.commands);
+    return (_jsxs("li", { className: ENTRY_FRAME, "data-slot": "catalog-entry", children: [_jsx(IdentityMark, { ...mark, size: 40 }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: _jsx(EntryName, { link: link, name: name }) }), _jsx("p", { className: cn("text-body-sm text-muted-foreground", !state && "line-clamp-1"), children: state ? _jsx(RowMessageLine, { state: state }) : description })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [fact, state ? _jsx(RowMessageActions, { state: state }) : null, add ? _jsx(EntryAdd, { add: add }) : null, menuButton ? _jsx(PageCommandButton, { command: menuButton, variant: "outline" }) : null, menu && !menuButton ? (_jsx(ActionMenu, { commands: menu.commands, label: menu.label, record: name })) : null] })] }));
+}
+function EntryList({ columns, entries, }) {
+    return (_jsx("ul", { className: cn("grid gap-3", columns === 2 && "md:grid-cols-2"), children: entries.map((entry) => (_jsx(CatalogEntry, { ...entry }, entry.id))) }));
+}
+function TitledSection({ columns, entries, headingLevel, title, }) {
+    const headingId = useId();
+    const Heading = headingLevel === 2 ? "h2" : "h3";
+    return (_jsxs("section", { "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsx(Heading, { className: "text-heading-sm text-foreground", id: headingId, children: title }), _jsx(EntryList, { columns: columns, entries: entries })] }));
+}
+export function CatalogList({ columns, headingLevel = 3, sections, }) {
+    return (_jsx("div", { className: "grid min-w-0 gap-8", children: sections
+            .filter((section) => section.entries.length > 0)
+            .map(({ id, title, entries }) => title ? (_jsx(TitledSection, { columns: columns, entries: entries, headingLevel: headingLevel, id: id, title: title }, id)) : (_jsx(EntryList, { columns: columns, entries: entries }, id))) }));
+}
+export function CatalogSkeleton({ columns, label }) {
+    return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: cn("grid gap-3", columns === 2 && "md:grid-cols-2"), role: "status", children: Array.from({ length: columns * 3 }, (_, index) => (_jsxs("div", { "aria-hidden": "true", className: ENTRY_FRAME, children: [_jsx(Skeleton, { className: "size-10 shrink-0" }), _jsxs("div", { className: "grid flex-1 gap-1.5 pt-0.5", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3.5 w-full" })] }), _jsx(Skeleton, { className: "h-control-height w-16 shrink-0" })] }, index))) }));
+}
+export function catalogIsEmpty(sections) {
+    return sections.every((section) => section.entries.length === 0);
+}

package/dist/internal/empty.d.ts

@@ -1,21 +1,18 @@
-import { type VariantProps } from "class-variance-authority";
 type EmptyScope = "page" | "region" | "card";
-declare function Empty({ className, scope, presentation, ...props }: React.ComponentProps<"div"> & {
+declare function Empty({ className, scope, ...props }: React.ComponentProps<"div"> & {
     scope?: EmptyScope;
-    presentation?: "plain" | "illustrated";
 }): import("react").JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare const emptyMediaVariants: (props?: ({
-    variant?: "default" | "icon" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & {
+    variant: "picture" | "warning";
+}): import("react").JSX.Element;
 type EmptyPictureSize = "page" | "card";
 declare function EmptyPicture({ size, src }: {
-    size?: EmptyPictureSize;
+    size: EmptyPictureSize;
     src: string;
 }): import("react").JSX.Element;
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, EmptyPicture, type EmptyPictureSize, type EmptyScope, };
 //# sourceMappingURL=empty.d.ts.map

package/dist/internal/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/internal/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7C,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAgB,EAChB,YAA4B,EAC5B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;CAAE,+BAgB9F;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,QAAA,MAAM,kBAAkB;;8EAavB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,+BASvE;AAED,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,iBAAS,YAAY,CAAC,EAAE,IAAa,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,+BAgBrF;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAEvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,+BAW3E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,CAAC"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/internal/empty.tsx"],"names":[],"mappings":"AAIA,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7C,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,+BActD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,EAAE,SAAS,GAAG,SAAS,CAAA;CAAE,+BAelE;AAED,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,+BA0B3E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW7E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,CAAC"}

package/dist/internal/empty.js

@@ -1,36 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { useCallback, useState } from "react";
 import { cn } from "../lib/utils.js";
-function Empty({ className, scope = "region", presentation = "illustrated", ...props }) {
-    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-sm p-nadicode-lg text-center text-balance", scope !== "card" && "border bg-card", scope !== "card" && presentation === "illustrated" && "border-dashed", presentation === "plain" && (scope === "card" ? "min-h-40" : "min-h-80"), scope === "card" && "border-0 bg-transparent", className), ...props, "data-scope": scope }));
+function Empty({ className, scope = "region", ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center", scope === "page" ? "px-6 pt-10 pb-11" : "px-5 py-7", scope !== "card" && "rounded-sm bg-card nc-elevation-resting", className), ...props, "data-scope": scope }));
 }
 function EmptyHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm min-w-0 flex-col items-center gap-4", className), ...props }));
 }
-const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-    variants: {
-        variant: {
-            default: "bg-transparent",
-            icon: "flex size-control-height shrink-0 items-center justify-center rounded-sm border border-border bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
-function EmptyMedia({ className, variant = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+function EmptyMedia({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn("flex shrink-0 justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "warning" &&
+            "size-9 items-center rounded-md bg-destructive-soft text-destructive [&_svg:not([class*='size-'])]:size-4", variant === "picture" && "items-end", className), ...props }));
 }
-function EmptyPicture({ size = "card", src }) {
-    return (_jsx(EmptyMedia, { children: _jsx("img", { alt: "", className: cn("w-auto max-w-full object-contain select-none", size === "page" ? "h-56" : "h-40"), "data-size": size, "data-slot": "empty-picture", draggable: false, src: src }) }));
+function EmptyPicture({ size, src }) {
+    const [loaded, setLoaded] = useState(false);
+    const arriveOnLoad = useCallback((img) => {
+        if (!img)
+            return;
+        if (img.complete && img.naturalWidth > 0) {
+            setLoaded(true);
+            return;
+        }
+        const show = () => setLoaded(true);
+        img.addEventListener("load", show, { once: true });
+        return () => img.removeEventListener("load", show);
+    }, []);
+    return (_jsx(EmptyMedia, { className: size === "page" ? "h-44 w-60" : "h-36 w-50", variant: "picture", children: _jsx("img", { alt: "", className: "max-h-full max-w-full object-contain object-bottom select-none", "data-loaded": loaded ? "" : undefined, "data-size": size, "data-slot": "empty-picture", draggable: false, ref: arriveOnLoad, src: src }) }));
 }
 function EmptyTitle({ className, ...props }) {
-    return _jsx("div", { "data-slot": "empty-title", className: cn("text-heading-xs", className), ...props });
+    return (_jsx("div", { "data-slot": "empty-title", className: cn("text-heading-xs text-foreground", className), ...props }));
 }
 function EmptyDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-description", className: cn("text-body-sm text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-description", className: cn("max-w-[38ch] text-body-sm text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
 }
 function EmptyContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-content", className: cn("flex min-w-0 flex-wrap items-center justify-center gap-2", className), ...props }));
 }
 export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, EmptyPicture, };

package/dist/internal/footer-strip.d.ts

@@ -1,8 +1,4 @@
 import * as React from "react";
-/**
- * The strip a settings section and a table card close with (DESIGN.md "Settings cards"), drawn once so the two never
- * drift apart.
- */
 declare function FooterStrip({ hint, hintSlot, children, }: {
     hint?: React.ReactNode;
     hintSlot: string;

package/dist/internal/footer-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer-strip.d.ts","sourceRoot":"","sources":["../../src/internal/footer-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,4BAeA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"footer-strip.d.ts","sourceRoot":"","sources":["../../src/internal/footer-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,4BAeA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/internal/footer-strip.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardFooter } from "../components/card.js";
-/**
- * The strip a settings section and a table card close with (DESIGN.md "Settings cards"), drawn once so the two never
- * drift apart.
- */
 function FooterStrip({ hint, hintSlot, children, }) {
     if (!hint && !children) {
         return null;

package/dist/internal/record-menu-items.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { MenuCommand, RecordMenu } from "../components/action-menu.js";
+import type { PageCommandAction } from "../components/page-actions.js";
+export declare function menuItemAction(action: PageCommandAction): {
+    render: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    nativeButton: boolean;
+    onClick?: undefined;
+} | {
+    onClick: (event: import("react").MouseEvent<HTMLElement>) => void;
+    render?: undefined;
+    nativeButton?: undefined;
+};
+export declare function MenuCommandRow({ command, value }: {
+    command: MenuCommand;
+    value?: ReactNode;
+}): import("react").JSX.Element;
+export declare function soleMenuButton(commands: readonly MenuCommand[]): MenuCommand | undefined;
+export declare function RecordMenuItems({ record, commands }: Omit<RecordMenu, "label">): import("react").JSX.Element;
+//# sourceMappingURL=record-menu-items.d.ts.map

package/dist/internal/record-menu-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-menu-items.d.ts","sourceRoot":"","sources":["../../src/internal/record-menu-items.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB;;;;;;;;EAIvD;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,+BAqB7F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,GAAG,WAAW,GAAG,SAAS,CAGxF;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,+BAe9E"}

package/dist/internal/record-menu-items.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenuCommand, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, } from "../components/dropdown-menu.js";
+export function menuItemAction(action) {
+    return action.render
+        ? { render: action.render, nativeButton: action.render.type === "button" }
+        : { onClick: action.onClick };
+}
+export function MenuCommandRow({ command, value }) {
+    return (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, disabled: command.disabled, icon: command.icon, detail: command.detail, reason: command.reason, variant: command.destructive ? "destructive" : "default", ...menuItemAction(command), children: value === undefined ? (command.label) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: command.label }), " ", _jsx(DropdownMenuShortcut, { children: value })] })) }));
+}
+export function soleMenuButton(commands) {
+    const [only] = commands;
+    return commands.length === 1 && only && !only.destructive ? only : undefined;
+}
+export function RecordMenuItems({ record, commands }) {
+    const kept = commands.filter((command) => !command.destructive);
+    const destructive = commands.filter((command) => command.destructive);
+    return (_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: record }), kept.map((command) => (_jsx(MenuCommandRow, { command: command }, command.label))), kept.length > 0 && destructive.length > 0 ? _jsx(DropdownMenuSeparator, {}) : null, destructive.map((command) => (_jsx(MenuCommandRow, { command: command }, command.label)))] }));
+}

package/dist/internal/settings-save.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { type ResolvedMessage } from "../components/product-message.js";
+export type SettingsSaveFailure = {
+    message: ResolvedMessage;
+    /** The SettingsField id the failure is about: shown under it. Absent: above the footer. */
+    field?: string;
+};
+export type SettingsSave = {
+    /** Saves the section's fields; resolves to null once saved. */
+    action: (formData: FormData) => Promise<SettingsSaveFailure | null>;
+    /** "Save" */
+    label: string;
+    /** "Saving" */
+    pendingLabel: string;
+    /** "Saved" */
+    savedLabel: string;
+    /** The footer's left side until a save: "Saved for every device you sign in on." */
+    hint?: ReactNode;
+    /**
+     * An in-place edit of an object's section closes without saving. A cancel that runs work of its own, such as
+     * undoing a half-done setup on a server, says `pendingLabel` while `pending`.
+     */
+    cancel?: {
+        label: string;
+        onCancel: () => void;
+        pending?: boolean;
+        pendingLabel?: string;
+    };
+    /**
+     * Whether the fields differ from what is saved, for a section whose fields are controlled.
+     * Left out, the section compares its named, uncontrolled fields with their defaults.
+     */
+    changed?: boolean;
+};
+export declare function SettingsSaveForm({ save, titleId, children, }: {
+    save: SettingsSave;
+    titleId: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SettingsFieldFailure({ id }: {
+    id: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=settings-save.d.ts.map

package/dist/internal/settings-save.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAsHF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAoFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCA2B1D"}

package/dist/internal/settings-save.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleCheck } from "lucide-react";
+import { createContext, use, useCallback, useEffect, useRef, useState, } from "react";
+import { useFormStatus } from "react-dom";
+import { Button } from "../components/button.js";
+import { FieldError } from "../components/field.js";
+import { MessageNotice } from "../components/message-notice.js";
+import { PendingLabel } from "../components/pending-label.js";
+import { messageSentences } from "../components/product-message.js";
+import { CardContent } from "../components/card.js";
+import { WaitingLine } from "../components/waiting-line.js";
+import { useHydrated } from "../hooks/use-hydrated.js";
+import { FooterStrip } from "./footer-strip.js";
+import { FormSubmitButton } from "./form-submit.js";
+const SettingsSaveContext = createContext(null);
+function editableControls(form) {
+    return Array.from(form.elements).filter((control) => {
+        if (control instanceof HTMLInputElement) {
+            return (Boolean(control.name) &&
+                !control.disabled &&
+                !control.readOnly &&
+                !["hidden", "submit", "reset", "button"].includes(control.type));
+        }
+        if (control instanceof HTMLTextAreaElement) {
+            return Boolean(control.name) && !control.disabled && !control.readOnly;
+        }
+        return control instanceof HTMLSelectElement && Boolean(control.name) && !control.disabled;
+    });
+}
+function hasChangedFields(form) {
+    return editableControls(form).some((control) => {
+        if (control instanceof HTMLInputElement) {
+            if (control.type === "checkbox" || control.type === "radio") {
+                return control.checked !== control.defaultChecked;
+            }
+            return control.value !== control.defaultValue;
+        }
+        if (control instanceof HTMLTextAreaElement) {
+            return control.value !== control.defaultValue;
+        }
+        const options = Array.from(control.options);
+        const hasDefault = options.some((option) => option.defaultSelected);
+        const fallback = options.findIndex((option) => !option.disabled);
+        return options.some((option, index) => option.selected !==
+            (option.defaultSelected || (!control.multiple && !hasDefault && index === fallback)));
+    });
+}
+function editableValues(form) {
+    const names = new Set(editableControls(form).map((control) => control.name));
+    return JSON.stringify(Array.from(new FormData(form))
+        .filter(([name]) => names.has(name))
+        .map(([name, value]) => value instanceof File
+        ? [name, [value.name, value.size, value.type, value.lastModified]]
+        : [name, value]));
+}
+function SaveFooter({ save, changed, saved, }) {
+    const { pending } = useFormStatus();
+    return (_jsxs(FooterStrip, { hint: _jsx("div", { role: "status", children: saved ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-success", children: [_jsx(CircleCheck, { "aria-hidden": "true", className: "size-4" }), save.savedLabel] })) : (save.hint) }), hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { "aria-busy": save.cancel.pending || undefined, disabled: pending || save.cancel.pending, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: _jsx(PendingLabel, { pending: save.cancel.pending ?? false, pendingLabel: save.cancel.pendingLabel ?? save.cancel.label, children: save.cancel.label }) })) : null, _jsx(FormSubmitButton, { submit: {
+                    label: save.label,
+                    pendingLabel: save.pendingLabel,
+                    pending,
+                    disabled: !changed,
+                } }), pending ? _jsx(WaitingLine, { className: "basis-full", decorative: true }) : null] }));
+}
+export function SettingsSaveForm({ save, titleId, children, }) {
+    const [fieldsChanged, setFieldsChanged] = useState(false);
+    const [failure, setFailure] = useState(null);
+    const [saved, setSaved] = useState(false);
+    const [claimedFields, setClaimedFields] = useState(() => new Set());
+    const submittedValues = useRef(null);
+    const keepValuesOnReset = useRef(false);
+    const form = useRef(null);
+    const controlled = save.changed !== undefined;
+    const hydrated = useHydrated();
+    const claim = useCallback((field) => {
+        setClaimedFields((current) => new Set(current).add(field));
+        return () => setClaimedFields((current) => {
+            const next = new Set(current);
+            next.delete(field);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        const element = form.current;
+        if (!element)
+            return;
+        const onReset = (event) => {
+            const editedWhileSaving = submittedValues.current !== null && editableValues(element) !== submittedValues.current;
+            if (keepValuesOnReset.current || editedWhileSaving || controlled) {
+                event.preventDefault();
+            }
+            keepValuesOnReset.current = false;
+            submittedValues.current = null;
+            setFieldsChanged(event.defaultPrevented ? hasChangedFields(element) : false);
+        };
+        element.addEventListener("reset", onReset);
+        return () => element.removeEventListener("reset", onReset);
+    }, [controlled]);
+    const changed = save.changed ?? fieldsChanged;
+    const sectionFailure = failure && (failure.field === undefined || !claimedFields.has(failure.field)) ? failure : null;
+    return (_jsx(SettingsSaveContext, { value: { failure, claim }, children: _jsxs("form", { ref: form, "aria-labelledby": titleId, className: "contents", "data-slot": "settings-section-form", action: async (formData) => {
+                const result = await save.action(formData);
+                keepValuesOnReset.current = result !== null;
+                setFailure(result);
+                setSaved(result === null);
+            }, onChange: (event) => {
+                const edited = event.target;
+                if (edited instanceof Element &&
+                    failure?.field !== undefined &&
+                    edited.id === failure.field)
+                    setFailure(null);
+                setSaved(false);
+                setFieldsChanged(hasChangedFields(event.currentTarget));
+            }, onSubmit: (event) => {
+                setFailure(null);
+                keepValuesOnReset.current = false;
+                submittedValues.current = editableValues(event.currentTarget);
+            }, children: [_jsx("fieldset", { className: "contents", disabled: !hydrated, children: children }), sectionFailure ? (_jsx(CardContent, { children: _jsx(MessageNotice, { message: sectionFailure.message, placement: "action" }) })) : null, _jsx(SaveFooter, { changed: changed, save: save, saved: saved && !changed })] }) }));
+}
+export function SettingsFieldFailure({ id }) {
+    const context = use(SettingsSaveContext);
+    const claim = context?.claim;
+    useEffect(() => claim?.(id), [claim, id]);
+    const message = context?.failure?.field === id ? context.failure.message : null;
+    const failureId = `${id}-failure`;
+    useEffect(() => {
+        const control = message ? document.getElementById(id) : null;
+        if (!control)
+            return;
+        const describedBy = control.getAttribute("aria-describedby");
+        const invalid = control.getAttribute("aria-invalid");
+        control.setAttribute("aria-invalid", "true");
+        control.setAttribute("aria-describedby", describedBy ? `${describedBy} ${failureId}` : failureId);
+        return () => {
+            if (invalid === null)
+                control.removeAttribute("aria-invalid");
+            else
+                control.setAttribute("aria-invalid", invalid);
+            if (describedBy === null)
+                control.removeAttribute("aria-describedby");
+            else
+                control.setAttribute("aria-describedby", describedBy);
+        };
+    }, [id, failureId, message]);
+    return message ? _jsx(FieldError, { id: failureId, children: messageSentences(message) }) : null;
+}

package/dist/lib/theme-mode.d.ts

@@ -1,4 +1,4 @@
-export declare const themeModes: readonly ["light", "dark", "system"];
+export declare const themeModes: readonly ["system", "light", "dark"];
 export type ThemeMode = (typeof themeModes)[number];
 export declare function isThemeMode(value: string | undefined): value is ThemeMode;
 //# sourceMappingURL=theme-mode.d.ts.map

package/dist/lib/theme-mode.js

@@ -1,4 +1,4 @@
-export const themeModes = ["light", "dark", "system"];
+export const themeModes = ["system", "light", "dark"];
 export function isThemeMode(value) {
     return value !== undefined && themeModes.some((mode) => mode === value);
 }

package/dist/showcase/assets.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { EmptyArt, EmptyArtName } from "../components/empty-art.js";
+export declare function EmptyArtProvider({ art, children, }: {
+    art: Record<EmptyArtName, EmptyArt>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useEmptyArt(): Record<EmptyArtName, EmptyArt>;
+//# sourceMappingURL=assets.d.ts.map

package/dist/showcase/assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../src/showcase/assets.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,SAAS,EAAO,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAIrE,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,QAAQ,GACT,EAAE;IACD,GAAG,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAED,wBAAgB,WAAW,IAAI,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAI5D"}

package/dist/showcase/assets.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+const EmptyArtContext = createContext(null);
+export function EmptyArtProvider({ art, children, }) {
+    return _jsx(EmptyArtContext, { value: art, children: children });
+}
+export function useEmptyArt() {
+    const art = use(EmptyArtContext);
+    if (!art)
+        throw new Error("A specimen with a picture renders inside Showcase");
+    return art;
+}

package/dist/showcase/foundations.d.ts

@@ -0,0 +1,2 @@
+export declare function Foundations(): import("react").JSX.Element;
+//# sourceMappingURL=foundations.d.ts.map

package/dist/showcase/foundations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/showcase/foundations.tsx"],"names":[],"mappings":"AAgFA,wBAAgB,WAAW,gCAwH1B"}

package/dist/showcase/foundations.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { AgentOrb } from "../components/agent-orb.js";
+import { Alert, AlertDescription, AlertTitle } from "../components/alert.js";
+import { BrandField } from "../components/brand-field.js";
+import { Button } from "../components/button.js";
+import { Card, CardDescription, CardHeader, CardTitle } from "../components/card.js";
+import { CardRow } from "../components/card-row.js";
+import { GlassControl } from "../components/glass-control.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../components/input-group.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "../components/popover.js";
+import { ARANCIO, COBALTO, VERDE } from "./samples.js";
+const NEUTRAL_ROLES = [
+    ["background", "bg-background"],
+    ["card", "bg-card"],
+    ["muted", "bg-muted"],
+    ["accent", "bg-accent"],
+    ["primary", "bg-primary"],
+    ["sidebar", "bg-sidebar"],
+];
+const EDGE_ROLES = [
+    ["border", "border-border"],
+    ["input", "border-input"],
+    ["ring", "border-ring"],
+];
+const CHART_ROLES = [
+    ["chart-1", "bg-chart-1"],
+    ["chart-2", "bg-chart-2"],
+    ["chart-3", "bg-chart-3"],
+    ["chart-4", "bg-chart-4"],
+    ["chart-5", "bg-chart-5"],
+];
+const TYPE_TOKENS = [
+    ["display-xl", "nc-type-display-xl", "Agents that do the work"],
+    ["display-lg", "nc-type-display-lg", "Agents that do the work"],
+    ["display-md", "nc-type-display-md", "A section heading"],
+    ["heading-lg", "nc-type-heading-lg", "A section title inside a page"],
+    ["heading-md", "nc-type-heading-md", "A page or object title"],
+    ["heading-sm", "nc-type-heading-sm", "A card or settings title"],
+    ["heading-xs", "nc-type-heading-xs", "A compact card title"],
+    ["button", "nc-type-button", "Save changes"],
+    ["label-md", "nc-type-label-md", "Item title"],
+    ["label", "nc-type-label", "Field label"],
+    ["label-sm", "nc-type-label-sm", "Secondary metadata"],
+    ["label-mono", "nc-type-label-mono", "AGT-0042"],
+    ["body-lg", "nc-type-body-lg", "A lead paragraph that opens a page."],
+    ["body-md", "nc-type-body-md", "Dialog copy and entry instructions."],
+    ["body-sm", "nc-type-body-sm", "Default product descriptions that can wrap."],
+    ["caption", "nc-type-caption", "Badges, compact chrome labels, footer lines."],
+    ["code", "nc-type-code", "tool.call(invoice.draft, { month: 'september' })"],
+];
+function Name({ children }) {
+    return _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: children });
+}
+function Group({ title, children }) {
+    return (_jsxs("section", { "aria-label": title, className: "grid gap-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), children] }));
+}
+export function Foundations() {
+    return (_jsxs("div", { className: "grid gap-12", children: [_jsxs(Group, { title: "Colour", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3 lg:grid-cols-6", children: [NEUTRAL_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border border-border ${fill}` }), _jsx(Name, { children: role })] }, role))), EDGE_ROLES.map(([role, edge]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border-2 bg-background ${edge}` }), _jsx(Name, { children: role })] }, role)))] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-5", children: CHART_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md ${fill}` }), _jsx(Name, { children: role })] }, role))) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(AlertTitle, { children: "Info" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "info-soft" }) })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "warning-soft" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "destructive-soft" }) })] })] })] }), _jsx(Group, { title: "Type", children: _jsx("div", { className: "grid gap-4", children: TYPE_TOKENS.map(([token, typeClass, sample]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsx("p", { className: `m-0 ${typeClass}`, children: sample })] }, token))) }) }), _jsx(Group, { title: "Heights", children: _jsxs(CardRow, { columns: 3, from: "md", children: [["resting", "raised", "outlined", "plain"].map((surface) => (_jsx(Card, { surface: surface, children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "capitalize", children: surface }), _jsx(CardDescription, { children: _jsx(Name, { children: `Card surface="${surface}"` }) })] }) }, surface))), ["floating", "modal"].map((height) => (_jsxs("div", { className: `nc-elevation-${height} grid gap-1 rounded-md bg-popover p-6 text-popover-foreground`, children: [_jsx("p", { className: "text-base font-semibold capitalize", children: height }), _jsx(Name, { children: `nc-elevation-${height}` })] }, height)))] }) }), _jsx(Group, { title: "Glass", children: _jsx("div", { className: "overflow-hidden rounded-md", children: _jsxs(BrandField, { className: "relative isolate grid min-h-80 content-center p-6 sm:p-10", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 160 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: ARANCIO, decorative: true, form: "morph", motion: "ambient", size: 160 })] }), _jsxs(GlassControl, { className: "mx-auto flex w-full max-w-3xl flex-wrap gap-2 p-2", children: [_jsx("div", { className: "min-w-48 flex-1", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(Search, { "aria-hidden": "true" }) }), _jsx(InputGroupInput, { "aria-label": "Find", placeholder: "Find an Agent" })] }) }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Popover" }) }), _jsx(PopoverContent, { align: "end", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Glass over colour" }), _jsx(PopoverDescription, { children: "The stage and the moving Agents show through." })] }) })] })] })] }) }) })] }));
+}

package/dist/showcase/samples.d.ts

@@ -0,0 +1,21 @@
+import type { MenuCommand } from "../components/action-menu.js";
+import type { PageCommand, PageMenu } from "../components/page-actions.js";
+import { type ResolvedMessage } from "../components/product-message.js";
+export declare const nothing: () => undefined;
+export declare const COBALTO: string;
+export declare const VERDE: string;
+export declare const ARANCIO: string;
+export declare const sampleMessage: (title: string, body?: string, actions?: PageCommand[]) => ResolvedMessage;
+export declare const FAILED_READ: ResolvedMessage;
+export declare const RECORD_COMMANDS: readonly MenuCommand[];
+export declare const PAGE_MENU: PageMenu;
+export type Mailbox = {
+    id: string;
+    address: string;
+    owner: string;
+    status: "connected" | "failed";
+    checked: string;
+};
+export declare const MAILBOXES: readonly Mailbox[];
+export declare const NOW: number;
+//# sourceMappingURL=samples.d.ts.map

package/dist/showcase/samples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"samples.d.ts","sourceRoot":"","sources":["../../src/showcase/samples.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAE,KAAK,eAAe,EAAe,MAAM,8BAA8B,CAAC;AAEjF,eAAO,MAAM,OAAO,iBAAkB,CAAC;AAEvC,eAAO,MAAM,OAAO,QAA8B,CAAC;AACnD,eAAO,MAAM,KAAK,QAA4B,CAAC;AAC/C,eAAO,MAAM,OAAO,QAA8B,CAAC;AAEnD,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,EAAE,aAAS,EAAE,UAAS,WAAW,EAAO,oBACnB,CAAC;AAEjE,eAAO,MAAM,WAAW,EAAE,eAIzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,SAAS,WAAW,EAIjD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAOvB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,QAAQ,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SAAS,OAAO,EAsBvC,CAAC;AAEF,eAAO,MAAM,GAAG,QAAqC,CAAC"}

package/dist/showcase/samples.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Copy, Pencil, Trash2 } from "lucide-react";
+import { agentOrbColorTokens } from "../components/agent-orb-appearance.js";
+// eslint-disable-next-line product-message/imports -- the showcase words its own sample messages, which no product shows
+import { wordMessage } from "../components/product-message.js";
+export const nothing = () => undefined;
+export const COBALTO = agentOrbColorTokens.cobalto;
+export const VERDE = agentOrbColorTokens.verde;
+export const ARANCIO = agentOrbColorTokens.arancio;
+export const sampleMessage = (title, body = "", actions = []) => wordMessage({ code: "showcase.sample", title, body, actions });
+export const FAILED_READ = sampleMessage("Couldn't load the mailboxes", "Check your connection, then try again.", [{ label: "Try again", onClick: nothing }]);
+export const RECORD_COMMANDS = [
+    { label: "Rename mailbox", icon: _jsx(Pencil, {}), onClick: nothing },
+    { label: "Copy address", icon: _jsx(Copy, {}), onClick: nothing },
+    { label: "Remove mailbox", icon: _jsx(Trash2, {}), destructive: true, onClick: nothing },
+];
+export const PAGE_MENU = {
+    label: "More for Customers",
+    record: "Customers",
+    commands: [
+        { label: "Export customers", icon: _jsx(Copy, {}), onClick: nothing },
+        { label: "Rename list", icon: _jsx(Pencil, {}), onClick: nothing },
+    ],
+};
+export const MAILBOXES = [
+    {
+        id: "pec",
+        address: "pec@acme.it",
+        owner: "Invoices",
+        status: "connected",
+        checked: "2026-10-14T07:30:00Z",
+    },
+    {
+        id: "orders",
+        address: "orders@acme.it",
+        owner: "Orders",
+        status: "failed",
+        checked: "2026-10-13T16:05:00Z",
+    },
+    {
+        id: "support",
+        address: "support@acme.it",
+        owner: "Support",
+        status: "connected",
+        checked: "2026-10-12T09:12:00Z",
+    },
+];
+export const NOW = Date.parse("2026-10-14T10:00:00Z");