@nadicodeai/ui 12.1.95 → 12.1.97

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

package/dist/showcase/showcase.d.ts

@@ -0,0 +1,10 @@
+import type { EmptyArt, EmptyArtName } from "../components/empty-art.js";
+/**
+ * Every component of the package on its own page: what it is, its specimen,
+ * and when to use it, from the doc comment in its source. The product serving
+ * it passes the first-use pictures its bundler approved.
+ */
+export declare function Showcase({ emptyArt }: {
+    emptyArt: Record<EmptyArtName, EmptyArt>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=showcase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.d.ts","sourceRoot":"","sources":["../../src/showcase/showcase.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAqErE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;CAAE,+BA0DlF"}

package/dist/showcase/showcase.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { textLinkVariants } from "../components/text-link.js";
+import { EmptyArtProvider } from "./assets.js";
+import { Foundations } from "./foundations.js";
+import { SPECIMENS } from "./specimens/index.js";
+import { USAGE, USAGE_FAMILIES } from "./usage.generated.js";
+const FIELDS = [
+    ["when", "When"],
+    ["instead", "Instead"],
+    ["behaviour", "Behaviour"],
+    ["words", "Words"],
+    ["access", "Access"],
+];
+const anchor = (name) => `usage-${name.toLowerCase()}`;
+function Prose({ text }) {
+    return text.split(/(`[^`]+`)/).flatMap((part, index) => {
+        if (part.startsWith("`") && part.endsWith("`") && part.length > 1) {
+            return [
+                _jsx("code", { className: "font-mono", children: part.slice(1, -1) }, `${index}-code`),
+            ];
+        }
+        return part
+            .split(/(\*[^*\s][^*]*\*)/)
+            .map((piece, pieceIndex) => piece.length > 2 && piece.startsWith("*") && piece.endsWith("*") ? (_jsx("em", { children: piece.slice(1, -1) }, `${index}-${pieceIndex}`)) : (piece));
+    });
+}
+function UsagePage({ usage }) {
+    const id = anchor(usage.name);
+    return (_jsxs("article", { "aria-labelledby": id, className: "grid gap-4 border-t border-border pt-8", children: [_jsxs("header", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [_jsx("h3", { className: "text-lg font-semibold", id: id, children: usage.name }), _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: `${usage.module}.tsx` })] }), _jsx("p", { className: "max-w-3xl text-sm", children: _jsx(Prose, { text: usage.summary }) }), _jsx("div", { className: "min-w-0 rounded-md border border-border bg-background p-6", children: createElement(SPECIMENS[usage.name]) }), _jsx("dl", { className: "grid max-w-3xl gap-3 text-sm sm:grid-cols-[8rem_minmax(0,1fr)]", children: FIELDS.map(([field, label]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "font-medium text-muted-foreground", children: label }), _jsx("dd", { className: "m-0", children: _jsx(Prose, { text: usage[field] }) })] }, field))) })] }));
+}
+/**
+ * Every component of the package on its own page: what it is, its specimen,
+ * and when to use it, from the doc comment in its source. The product serving
+ * it passes the first-use pictures its bundler approved.
+ */
+export function Showcase({ emptyArt }) {
+    const families = USAGE_FAMILIES.map((family) => ({
+        family,
+        usages: USAGE.filter((usage) => usage.family === family),
+    })).filter(({ usages }) => usages.length > 0);
+    return (_jsx(EmptyArtProvider, { art: emptyArt, children: _jsxs("div", { className: "grid gap-16 pb-24", "data-slot": "showcase", children: [_jsxs("header", { className: "grid max-w-2xl gap-2", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Components" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Each component of the package, drawn by its own source with sample words. A page's text is the doc comment on the component's export, which", " ", _jsx("code", { className: "font-mono", children: "generate:usage" }), " copies here."] })] }), _jsxs("nav", { "aria-label": "Families", className: "flex flex-wrap gap-x-4 gap-y-2 text-sm", children: [_jsx("a", { className: textLinkVariants({ kind: "quiet" }), href: "#foundations", children: "Foundations" }), families.map(({ family, usages }) => (_jsx("a", { className: textLinkVariants({ kind: "quiet" }), href: `#${family.toLowerCase()}`, children: `${family} · ${usages.length}` }, family)))] }), _jsxs("section", { "aria-labelledby": "foundations-title", className: "grid gap-6", id: "foundations", children: [_jsx("h2", { className: "text-xl font-semibold", id: "foundations-title", children: "Foundations" }), _jsx(Foundations, {})] }), families.map(({ family, usages }) => (_jsxs("section", { "aria-labelledby": `${family.toLowerCase()}-title`, className: "grid gap-8", id: family.toLowerCase(), children: [_jsx("h2", { className: "text-xl font-semibold", id: `${family.toLowerCase()}-title`, children: family }), usages.map((usage) => (_jsx(UsagePage, { usage: usage }, usage.name)))] }, family)))] }) }));
+}

package/dist/showcase/specimens/actions.d.ts

@@ -0,0 +1,7 @@
+export declare const ACTIONS: {
+    Button: () => import("react").JSX.Element;
+    ButtonGroup: () => import("react").JSX.Element;
+    CopyButton: () => import("react").JSX.Element;
+    PageActions: () => import("react").JSX.Element;
+};
+//# sourceMappingURL=actions.d.ts.map

package/dist/showcase/specimens/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/actions.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,OAAO;;;;;CA2EO,CAAC"}

package/dist/showcase/specimens/actions.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, ChevronDown, ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
+import { Button } from "../../components/button.js";
+import { ButtonGroup } from "../../components/button-group.js";
+import { CopyButton } from "../../components/copy-button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../../components/dropdown-menu.js";
+import { PageActionsRow } from "../../components/page-actions.js";
+import { nothing, PAGE_MENU } from "../samples.js";
+export const ACTIONS = {
+    Button: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { children: [_jsx(Plus, { "data-icon": "inline-start", "aria-hidden": "true" }), "New Agent"] }), _jsx(Button, { variant: "outline", children: "Import" }), _jsx(Button, { variant: "secondary", children: "Preview" }), _jsx(Button, { variant: "ghost", children: "Skip" }), _jsx(Button, { variant: "destructive", children: "Delete Agent" }), _jsx(Button, { variant: "link", children: "View logs" }), _jsx(Button, { disabled: true, variant: "outline", children: "Connect" }), _jsxs(Button, { variant: "outline", children: ["Open Billing", _jsx(ArrowUpRight, { "data-icon": "inline-end", "aria-hidden": "true" })] })] })),
+    ButtonGroup: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs(ButtonGroup, { "aria-label": "Status filter", children: [_jsx(Button, { variant: "outline", children: "Status: Needs attention" }), _jsx(Button, { "aria-label": "Remove filter: Status", size: "icon", variant: "outline", children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs(ButtonGroup, { "aria-label": "Pages", children: [_jsx(Button, { "aria-label": "Previous page", disabled: true, size: "icon", variant: "outline", children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Next page", size: "icon", variant: "outline", children: _jsx(ChevronRight, { "aria-hidden": "true" }) })] }), _jsxs(ButtonGroup, { "aria-label": "Download report", children: [_jsx(Button, { variant: "outline", children: "Download PDF" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "aria-label": "More download formats", render: _jsx(Button, { size: "icon", variant: "outline" }), children: _jsx(ChevronDown, { "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuRadioGroup, { value: "pdf", children: [_jsx(DropdownMenuRadioItem, { value: "pdf", children: "Download PDF" }), _jsx(DropdownMenuRadioItem, { value: "csv", children: "Download CSV" }), _jsx(DropdownMenuRadioItem, { value: "xlsx", children: "Download Excel" })] }) })] })] })] })),
+    CopyButton: () => (_jsxs("div", { className: "flex items-center gap-2 font-mono text-sm", children: ["agt_0042", _jsx(CopyButton, { copiedLabel: "Copied", copyFailedLabel: "Couldn't copy", copyLabel: "Copy Agent ID", value: "agt_0042" })] })),
+    PageActions: () => (_jsx(PageActionsRow, { menu: PAGE_MENU, primary: { label: "Invite customer", icon: _jsx(Plus, {}), onClick: nothing }, secondary: { label: "Import", onClick: nothing } })),
+};

package/dist/showcase/specimens/charts.d.ts

@@ -0,0 +1,17 @@
+declare function DateRangeControlSpecimen(): import("react").JSX.Element;
+export declare const CHARTS: {
+    ActivityCalendar: () => import("react").JSX.Element;
+    ChartAreaStacked: () => import("react").JSX.Element;
+    ChartBarHorizontal: () => import("react").JSX.Element;
+    ChartBarMultiple: () => import("react").JSX.Element;
+    ChartBarStacked: () => import("react").JSX.Element;
+    ChartCard: () => import("react").JSX.Element;
+    ChartContainer: () => import("react").JSX.Element;
+    ChartSparkline: () => import("react").JSX.Element;
+    createEntityColorMap: () => import("react").JSX.Element;
+    DateRangeControl: typeof DateRangeControlSpecimen;
+    KpiCard: () => import("react").JSX.Element;
+    TrendBadge: () => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=charts.d.ts.map

package/dist/showcase/specimens/charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/charts.tsx"],"names":[],"mappings":"AAyEA,iBAAS,wBAAwB,gCAiBhC;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;CA2KQ,CAAC"}

package/dist/showcase/specimens/charts.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { ActivityCalendar } from "../../components/activity-calendar.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../../components/chart.js";
+import { ChartAreaStacked } from "../../components/chart-area-stacked.js";
+import { ChartBarHorizontal } from "../../components/chart-bar-horizontal.js";
+import { ChartBarMultiple } from "../../components/chart-bar-multiple.js";
+import { ChartBarStacked } from "../../components/chart-bar-stacked.js";
+import { ChartCard, ChartSummary } from "../../components/chart-card.js";
+import { DateRangeControl } from "../../components/chart-date-range-control.js";
+import { createEntityColorMap } from "../../components/chart-entity-colors.js";
+import { ChartSparkline } from "../../components/chart-sparkline.js";
+import { KpiCard } from "../../components/kpi-card.js";
+import { TrendBadge, trendTone } from "../../components/trend-badge.js";
+const euro = (value) => new Intl.NumberFormat("en", { style: "currency", currency: "EUR" }).format(value);
+const CUSTOMERS = [
+    { id: "rossi", label: "Rossi Ottica" },
+    { id: "bizeta", label: "Bizeta Arredamenti" },
+    { id: "acme", label: "Acme S.r.l." },
+];
+const CUSTOMER_COLORS = createEntityColorMap(CUSTOMERS.map((customer) => customer.id));
+const SPEND = [
+    { month: "Jul", rossi: 120, bizeta: 80, acme: 40 },
+    { month: "Aug", rossi: 140, bizeta: 95, acme: 52 },
+    { month: "Sep", rossi: 160, bizeta: 90, acme: 61 },
+    { month: "Oct", rossi: 182, bizeta: 104, acme: 70 },
+];
+const USAGE_SERIES = [
+    { id: "included", label: "Included usage" },
+    { id: "extra", label: "Extra usage" },
+];
+const USAGE = [
+    { day: "1 Oct", included: 1.2, extra: 0 },
+    { day: "5 Oct", included: 2.6, extra: 0.1 },
+    { day: "9 Oct", included: 3.9, extra: 0.4 },
+    { day: "13 Oct", included: 4.8, extra: 0.9 },
+];
+const REVENUE_SERIES = [
+    { id: "revenue", label: "Monthly recurring revenue" },
+    { id: "cost", label: "Model cost" },
+];
+const REVENUE = [
+    { month: "Aug", revenue: 4200, cost: 1100 },
+    { month: "Sep", revenue: 4600, cost: 1250 },
+    { month: "Oct", revenue: 5100, cost: 1400 },
+];
+const MARGIN = [
+    { customer: "Rossi Ottica", margin: 840 },
+    { customer: "Bizeta Arredamenti", margin: 420 },
+    { customer: "Acme S.r.l.", margin: -360 },
+];
+const ACTIVITY = Array.from({ length: 60 }, (_, day) => ({
+    date: new Date(Date.UTC(2026, 7, 16 + day)).toISOString().slice(0, 10),
+    value: (day * 7) % 11,
+}));
+function DateRangeControlSpecimen() {
+    const [range, setRange] = useState({ kind: "preset", preset: "30d" });
+    return (_jsx(DateRangeControl, { customLabel: "Custom", label: "Date range", onChange: setRange, presetLabels: {
+            "7d": "Past 7 days",
+            "14d": "Past 14 days",
+            "30d": "Past 30 days",
+            cycle: "This cycle",
+        }, formatCustomValue: ({ from, to }) => `${from} – ${to}`, value: range }));
+}
+export const CHARTS = {
+    ActivityCalendar: () => (_jsx(ActivityCalendar, { data: ACTIVITY, from: "2026-08-16", labels: {
+            ariaLabel: "Requests per day",
+            unavailable: "Not measured",
+            legend: "Requests per day, from less to more",
+            legendLevel: "Level",
+            less: "Less",
+            more: "More",
+        }, locale: "en", to: "2026-10-14", valueFormatter: (value) => `${value} requests` })),
+    ChartAreaStacked: () => (_jsx(ChartAreaStacked, { axisFormatter: (value) => `${value}M`, data: USAGE, entityColorMap: createEntityColorMap(USAGE_SERIES.map((series) => series.id)), otherLabel: "Everything else", period: "1\u201313 Oct 2026", series: USAGE_SERIES, title: "Tokens this cycle", valueFormatter: (value) => `${value}M tokens`, xKey: "day" })),
+    ChartBarHorizontal: () => (_jsx(ChartBarHorizontal, { data: MARGIN, negativeLabel: "Loss", period: "October 2026", positiveLabel: "Profit", title: "Margin by Customer", valueFormatter: euro, valueKey: "margin", xKey: "customer" })),
+    ChartBarMultiple: () => (_jsx(ChartBarMultiple, { data: REVENUE, entityColorMap: createEntityColorMap(REVENUE_SERIES.map((series) => series.id)), otherLabel: "Everything else", period: "Aug \u2013 Oct 2026", series: REVENUE_SERIES, title: "Revenue and model cost", valueFormatter: euro, xKey: "month" })),
+    ChartBarStacked: () => (_jsx(ChartBarStacked, { data: SPEND, entityColorMap: CUSTOMER_COLORS, otherLabel: "Everything else", period: "Jul \u2013 Oct 2026", series: CUSTOMERS, title: "Model spend by Customer", valueFormatter: euro, xKey: "month" })),
+    ChartCard: () => (_jsx(ChartCard, { footer: { reading: "Updated 4 minutes ago" }, period: "October 2026", summary: _jsx(ChartSummary, { label: "Runs", trend: {
+                value: "+12.4%",
+                direction: "up",
+                tone: trendTone("up"),
+                comparison: "vs September",
+                directionLabel: "up",
+            }, value: "1,284" }), title: "Runs per week", children: (titleId) => (_jsx(ChartContainer, { "aria-labelledby": titleId, className: "h-48 w-full", config: { runs: { label: "Runs", color: "var(--nc-chart-1)" } }, children: _jsxs(BarChart, { data: [
+                    { week: "W40", runs: 280 },
+                    { week: "W41", runs: 312 },
+                ], children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "week", tickLine: false }), _jsx(Bar, { dataKey: "runs", fill: "var(--color-runs)", radius: 4 })] }) })) })),
+    ChartContainer: () => (_jsx(ChartContainer, { "aria-label": "Runs per week", className: "h-48 w-full max-w-md", config: { runs: { label: "Runs", color: "var(--nc-chart-1)" } }, children: _jsxs(BarChart, { data: [
+                { week: "W40", runs: 280 },
+                { week: "W41", runs: 312 },
+            ], children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "week", tickLine: false }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: "runs", fill: "var(--color-runs)", radius: 4 })] }) })),
+    ChartSparkline: () => (_jsxs("span", { className: "flex items-center gap-3 text-sm", children: ["Requests \u00B7 past 8 weeks", _jsx("span", { className: "h-6 w-24", children: _jsx(ChartSparkline, { data: [12, 18, 14, 22, 27, 25, 31, 36] }) }), _jsx(TrendBadge, { direction: "up", directionLabel: "up", tone: trendTone("up"), value: "+16%" })] })),
+    createEntityColorMap: () => (_jsx("ul", { className: "grid max-w-xs gap-2 text-sm", children: CUSTOMERS.map((customer) => (_jsxs("li", { className: "flex items-center justify-between gap-3", children: [customer.label, _jsx("span", { className: "h-6 w-24", children: _jsx(ChartSparkline, { color: CUSTOMER_COLORS[customer.id], data: SPEND.map((month) => month[customer.id]) }) })] }, customer.id))) })),
+    DateRangeControl: DateRangeControlSpecimen,
+    KpiCard: () => (_jsx("div", { className: "max-w-xs", children: _jsx(KpiCard, { delta: {
+                value: "+18%",
+                direction: "up",
+                comparison: "vs September",
+                directionLabel: "up",
+            }, label: "Tasks done this month", value: "1,284" }) })),
+    TrendBadge: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(TrendBadge, { direction: "up", directionLabel: "up", tone: trendTone("up"), value: "+12.4%" }), _jsx(TrendBadge, { direction: "up", directionLabel: "up", tone: trendTone("up", false), value: "+\u20AC 360" }), _jsx(TrendBadge, { direction: "flat", directionLabel: "unchanged", tone: trendTone("flat"), value: "0%" })] })),
+};

package/dist/showcase/specimens/choices.d.ts

@@ -0,0 +1,21 @@
+declare function CollectionSortSpecimen(): import("react").JSX.Element;
+declare function ComboboxSpecimen(): import("react").JSX.Element;
+declare function ModelSelectSpecimen(): import("react").JSX.Element;
+declare function SegmentedChoiceSpecimen(): import("react").JSX.Element;
+declare function SelectSpecimen(): import("react").JSX.Element;
+declare function ThemeModeSwitcherSpecimen(): import("react").JSX.Element;
+export declare const CHOICES: {
+    Checkbox: () => import("react").JSX.Element;
+    CollectionSort: typeof CollectionSortSpecimen;
+    Combobox: typeof ComboboxSpecimen;
+    ModelSelect: typeof ModelSelectSpecimen;
+    RadioGroup: () => import("react").JSX.Element;
+    SegmentedChoice: typeof SegmentedChoiceSpecimen;
+    Select: typeof SelectSpecimen;
+    Switch: () => import("react").JSX.Element;
+    ThemeModeSwitcher: typeof ThemeModeSwitcherSpecimen;
+    Toggle: () => import("react").JSX.Element;
+    ToggleGroup: () => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=choices.d.ts.map

package/dist/showcase/specimens/choices.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/choices.tsx"],"names":[],"mappings":"AAqCA,iBAAS,sBAAsB,gCAc9B;AAED,iBAAS,gBAAgB,gCAmBxB;AAED,iBAAS,mBAAmB,gCAc3B;AAED,iBAAS,uBAAuB,gCAe/B;AAED,iBAAS,cAAc,gCAmBtB;AAED,iBAAS,yBAAyB,gCAUjC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;CAwDO,CAAC"}

package/dist/showcase/specimens/choices.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGrid, List, Pin } from "lucide-react";
+import { useState } from "react";
+import { ModelSelect, SegmentedChoice } from "../../components/agent-profile.js";
+import { Checkbox } from "../../components/checkbox.js";
+import { CollectionSort } from "../../components/collection-sort.js";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "../../components/combobox.js";
+import { FieldLegend, FieldSet } from "../../components/field.js";
+import { Label } from "../../components/label.js";
+import { RadioGroup, RadioGroupItem } from "../../components/radio-group.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select.js";
+import { Switch } from "../../components/switch.js";
+import { ThemeModeSwitcher } from "../../components/theme-mode-switcher.js";
+import { Toggle } from "../../components/toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "../../components/toggle-group.js";
+const SCHEDULES = [
+    { value: "hourly", label: "Every hour" },
+    { value: "daily", label: "Every day" },
+    { value: "weekdays", label: "Every weekday" },
+    { value: "weekly", label: "Every week" },
+];
+const AGENTS = ["Acme Quotes", "Invoices", "Orders", "Support"];
+function CollectionSortSpecimen() {
+    const [order, setOrder] = useState("newest");
+    return (_jsx(CollectionSort, { label: "Sort by", onValueChange: setOrder, options: [
+            { value: "newest", label: "Newest first" },
+            { value: "name", label: "Name" },
+            { value: "cost", label: "Cost" },
+        ], value: order }));
+}
+function ComboboxSpecimen() {
+    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-assignee", children: "Assign to" }), _jsxs(Combobox, { items: AGENTS, children: [_jsx(ComboboxInput, { id: "showcase-assignee", placeholder: "Find an Agent" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No Agent matches" }), _jsx(ComboboxList, { children: (agent) => (_jsx(ComboboxItem, { value: agent, children: agent }, agent)) })] })] })] }));
+}
+function ModelSelectSpecimen() {
+    const [model, setModel] = useState("anthropic/claude-opus-5");
+    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-model", children: "Model" }), _jsx(ModelSelect, { id: "showcase-model", onValueChange: setModel, options: ["anthropic/claude-opus-5", "openai/gpt-5.6-sol", "google/gemini-3.1-flash-lite"], placeholder: "Choose a model", value: model })] }));
+}
+function SegmentedChoiceSpecimen() {
+    const [effort, setEffort] = useState("default");
+    return (_jsx(SegmentedChoice, { "aria-label": "Reasoning", onValueChange: setEffort, options: [
+            { value: "default", label: "Default" },
+            { value: "low", label: "Low" },
+            { value: "medium", label: "Medium" },
+            { value: "high", label: "High" },
+        ], value: effort }));
+}
+function SelectSpecimen() {
+    const [schedule, setSchedule] = useState("weekdays");
+    return (_jsxs("div", { className: "grid max-w-xs gap-2", children: [_jsx(Label, { htmlFor: "showcase-schedule", children: "Runs" }), _jsxs(Select, { onValueChange: (next) => setSchedule(next ?? "weekdays"), value: schedule, children: [_jsx(SelectTrigger, { id: "showcase-schedule", children: _jsx(SelectValue, { children: SCHEDULES.find((option) => option.value === schedule)?.label }) }), _jsx(SelectContent, { children: SCHEDULES.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }));
+}
+function ThemeModeSwitcherSpecimen() {
+    const [mode, setMode] = useState("system");
+    return (_jsx(ThemeModeSwitcher, { "aria-label": "Theme", labels: { light: "Light", dark: "Dark", system: "System" }, onValueChange: setMode, value: mode }));
+}
+export const CHOICES = {
+    Checkbox: () => (_jsxs(FieldSet, { className: "max-w-md", children: [_jsx(FieldLegend, { children: "Copies" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { defaultChecked: true, id: "showcase-copy" }), _jsx(Label, { htmlFor: "showcase-copy", children: "Send a copy to the person who asked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "showcase-archive" }), _jsx(Label, { htmlFor: "showcase-archive", children: "Keep a copy in the archive" })] })] })),
+    CollectionSort: CollectionSortSpecimen,
+    Combobox: ComboboxSpecimen,
+    ModelSelect: ModelSelectSpecimen,
+    RadioGroup: () => (_jsxs(FieldSet, { className: "max-w-md", children: [_jsx(FieldLegend, { children: "Who can see this Agent" }), _jsxs(RadioGroup, { defaultValue: "me", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { id: "showcase-me", value: "me" }), _jsx(Label, { htmlFor: "showcase-me", children: "Only me" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { id: "showcase-everyone", value: "everyone" }), _jsx(Label, { htmlFor: "showcase-everyone", children: "Everyone in the company" })] })] })] })),
+    SegmentedChoice: SegmentedChoiceSpecimen,
+    Select: SelectSpecimen,
+    Switch: () => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { defaultChecked: true, id: "showcase-switch" }), _jsx(Label, { htmlFor: "showcase-switch", children: "Approvals" })] })),
+    ThemeModeSwitcher: ThemeModeSwitcherSpecimen,
+    Toggle: () => (_jsx(Toggle, { "aria-label": "Pin chat", children: _jsx(Pin, { "aria-hidden": "true" }) })),
+    ToggleGroup: () => (_jsxs(ToggleGroup, { "aria-label": "View", defaultValue: ["list"], spacing: 0, children: [_jsx(ToggleGroupItem, { "aria-label": "List", value: "list", children: _jsx(List, { "aria-hidden": "true" }) }), _jsx(ToggleGroupItem, { "aria-label": "Grid", value: "grid", children: _jsx(LayoutGrid, { "aria-hidden": "true" }) })] })),
+};

package/dist/showcase/specimens/compositions.d.ts

@@ -0,0 +1,39 @@
+declare function ActivityFeedSpecimen(): import("react").JSX.Element;
+declare function AgentProfileCardSpecimen(): import("react").JSX.Element;
+declare function CatalogDrawerSpecimen(): import("react").JSX.Element;
+declare function CollectionFiltersSpecimen(): import("react").JSX.Element;
+declare function CollectionPageSpecimen(): import("react").JSX.Element;
+declare function CollectionToolbarSpecimen(): import("react").JSX.Element;
+declare function ConfirmDialogSpecimen(): import("react").JSX.Element;
+declare function EntrySceneSpecimen(): import("react").JSX.Element;
+declare function FormDialogSpecimen(): import("react").JSX.Element;
+declare function FormDrawerSpecimen(): import("react").JSX.Element;
+declare function LibraryShelfSpecimen(): import("react").JSX.Element;
+declare function OverviewPageSpecimen(): import("react").JSX.Element;
+declare function RecordSheetSpecimen(): import("react").JSX.Element;
+declare function RowEditFormSpecimen(): import("react").JSX.Element;
+declare function SettingsSectionSpecimen(): import("react").JSX.Element;
+export declare const COMPOSITIONS: {
+    ActivityFeed: typeof ActivityFeedSpecimen;
+    AgentProfileCard: typeof AgentProfileCardSpecimen;
+    CatalogDrawer: typeof CatalogDrawerSpecimen;
+    CollectionFilters: typeof CollectionFiltersSpecimen;
+    CollectionPage: typeof CollectionPageSpecimen;
+    CollectionToolbar: typeof CollectionToolbarSpecimen;
+    ConfirmDialog: typeof ConfirmDialogSpecimen;
+    EntryScene: typeof EntrySceneSpecimen;
+    FormDialog: typeof FormDialogSpecimen;
+    FormDrawer: typeof FormDrawerSpecimen;
+    LibraryShelf: typeof LibraryShelfSpecimen;
+    ObjectPage: () => import("react").JSX.Element;
+    ObjectSection: () => import("react").JSX.Element;
+    OverviewPage: typeof OverviewPageSpecimen;
+    PageHeader: () => import("react").JSX.Element;
+    RecordList: () => import("react").JSX.Element;
+    RecordSheet: typeof RecordSheetSpecimen;
+    RowEditForm: typeof RowEditFormSpecimen;
+    SettingsPage: () => import("react").JSX.Element;
+    SettingsSection: typeof SettingsSectionSpecimen;
+};
+export {};
+//# sourceMappingURL=compositions.d.ts.map

package/dist/showcase/specimens/compositions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AA4HA,iBAAS,oBAAoB,gCA+B5B;AAED,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCAsB7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCA6B9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAoB7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAiB5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAsB3B;AAED,iBAAS,uBAAuB,gCAoB/B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAiEE,CAAC"}