@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/showcase/specimens/compositions.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Mail, Plus, Puzzle, Wrench } from "lucide-react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mail, Plus, Puzzle, RefreshCw, Wrench } from "lucide-react";
 import { useState } from "react";
 import { ActivityFeed } from "../../components/activity-feed.js";
+import { AgentCard } from "../../components/agent-card.js";
 import { AgentOrb } from "../../components/agent-orb.js";
 import { AgentProfileCard } from "../../components/agent-profile.js";
 import { BrandWordmark } from "../../components/brand.js";
@@ -17,7 +18,6 @@ import { EntryAction, EntryActions, EntryMessage, EntryScene } from "../../compo
 import { FormDialog, FormDialogForm } from "../../components/form-dialog.js";
 import { FormDrawer, FormDrawerBody, FormDrawerFooter } from "../../components/form-drawer.js";
 import { Input } from "../../components/input.js";
-import { Label } from "../../components/label.js";
 import { LibraryShelf } from "../../components/library-shelf.js";
 import { NadiaPresence } from "../../components/nadia-presence.js";
 import { ObjectPage } from "../../components/object-page.js";
@@ -37,10 +37,12 @@ const FILTER_COPY = {
     searchFields: "Find a filter",
     searchValues: "Find a value",
     empty: "Nothing matches",
+    results: (count) => `${count} results`,
     back: "Back to filters",
     remove: "Remove filter",
 };
 const MAILBOX_LIST = {
+    empty: { kind: "nothingYet", message: "No mailboxes yet." },
     getId: (mailbox) => mailbox.id,
     name: (mailbox) => ({
         name: mailbox.address,
@@ -50,6 +52,7 @@ const MAILBOX_LIST = {
     status: {
         label: "Status",
         of: (mailbox) => mailbox.status === "failed" ? { label: "Can't sign in", tone: "danger" } : null,
+        size: 150,
     },
     menu: (mailbox) => ({ label: `More for ${mailbox.address}`, commands: RECORD_COMMANDS }),
     commandsHeader: "Actions",
@@ -83,7 +86,12 @@ function useMailboxFilter() {
         (status === "" || mailbox.status === status));
     return {
         records,
-        search: { label: "Find a mailbox", value: search, onValueChange: setSearch },
+        search: {
+            label: "Find a mailbox",
+            clearLabel: "Clear search",
+            value: search,
+            onValueChange: setSearch,
+        },
         filters: {
             facets: [
                 {
@@ -132,7 +140,12 @@ function AgentProfileCardSpecimen() {
 function CatalogDrawerSpecimen() {
     const [open, setOpen] = useState(false);
     const [search, setSearch] = useState("");
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => setOpen(true), variant: "outline", children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), "Add skill"] }), _jsx(CatalogDrawer, { closeLabel: "Close", done: "Done", empty: { kind: "nothingYet", message: "No skill to add yet." }, loadingLabel: "Loading skills", onOpenChange: setOpen, open: open, search: { label: "Find a skill", value: search, onValueChange: setSearch }, sections: CATALOG, title: "Add a skill" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), prefix: _jsx(Plus, { "aria-hidden": "true" }), variant: "outline", children: "Add skill" }), _jsx(CatalogDrawer, { closeLabel: "Close", done: "Done", empty: { kind: "nothingYet", message: "No skill to add yet." }, loadingLabel: "Loading skills", onOpenChange: setOpen, open: open, search: {
+                    label: "Find a skill",
+                    clearLabel: "Clear search",
+                    value: search,
+                    onValueChange: setSearch,
+                }, sections: CATALOG, title: "Add a skill" })] }));
 }
 function CollectionFiltersSpecimen() {
     const { filters } = useMailboxFilter();
@@ -153,6 +166,33 @@ function CollectionPageSpecimen() {
         }, filters: filters, footer: { count: `${records.length} mailboxes` }, label: "Mailboxes", noMatch: {
             message: "No mailbox matches.",
             clear: { label: "Clear search", onClick: () => search.onValueChange("") },
+        }, rail: {
+            label: "About your mailboxes",
+            sections: [
+                {
+                    id: "attention",
+                    title: "Needs attention",
+                    items: MAILBOXES.filter((mailbox) => mailbox.status === "failed").map((mailbox) => ({
+                        id: mailbox.id,
+                        mark: { kind: "record", icon: Mail },
+                        title: mailbox.address,
+                        detail: "Can't sign in since yesterday",
+                        href: "#",
+                    })),
+                    empty: { kind: "cleared", message: "Every mailbox signs in." },
+                },
+                {
+                    id: "figures",
+                    title: "This month",
+                    summary: "October",
+                    action: { label: "Billing", onClick: nothing },
+                    items: [
+                        { id: "read", title: "Messages read", value: "1,284" },
+                        { id: "sent", title: "Messages sent", value: "312" },
+                    ],
+                    empty: { kind: "nothingYet", message: "Nothing read this month." },
+                },
+            ],
         }, records: records, search: search, title: "Mailboxes" }));
 }
 function CollectionToolbarSpecimen() {
@@ -160,19 +200,35 @@ function CollectionToolbarSpecimen() {
     return (_jsx(CollectionToolbar, { controls: _jsx(CollectionFilters, { ...filters }), label: "Mailbox tools", search: _jsx(CollectionSearch, { ...search }), surface: "plain" }));
 }
 function ConfirmDialogSpecimen() {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "outline", children: "Remove mailbox" }), _jsx(ConfirmDialog, { cancelLabel: "Cancel", confirmLabel: "Remove mailbox", confirmPendingLabel: "Removing mailbox", description: "Agents stop reading and sending from this address.", destructive: true, onCancel: () => setOpen(false), onConfirm: () => setOpen(false), open: open, title: "Remove pec@acme.it" })] }));
+    const [open, setOpen] = useState(null);
+    const close = () => setOpen(null);
+    return (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { onClick: () => setOpen("reversible"), variant: "outline", children: "Remove mailbox" }), _jsx(Button, { onClick: () => setOpen("typed"), variant: "outline", children: "Remove mailbox, typed" }), _jsx(ConfirmDialog, { cancelLabel: "Cancel", confirmLabel: "Remove mailbox", confirmPendingLabel: "Removing mailbox", description: "Agents stop reading and sending from this address.", destructive: true, onCancel: close, onConfirm: close, open: open === "reversible", title: "Remove pec@acme.it" }), _jsx(ConfirmDialog, { cancelLabel: "Cancel", confirmLabel: "Remove mailbox", confirmPendingLabel: "Removing mailbox", description: "Agents stop reading and sending from this address.", destructive: true, irreversible: "Removing pec@acme.it cannot be undone.", onCancel: close, onConfirm: close, open: open === "typed", title: "Remove pec@acme.it", verify: {
+                    phrase: "pec@acme.it",
+                    prompt: "To confirm, type the mailbox address pec@acme.it",
+                } })] }));
 }
 function EntrySceneSpecimen() {
     const art = useEmptyArt();
     return (_jsx("div", { className: "max-w-3xl overflow-hidden rounded-md", children: _jsxs(EntryScene, { picture: _jsx("img", { alt: "", className: "size-full object-cover", src: art.agents }), presence: _jsx(NadiaPresence, { label: "Nadia is ready", reveal: 1, state: "ready" }), title: "Nadia is ready", wordmark: _jsx(BrandWordmark, {}), children: [_jsx(EntryMessage, { children: "Sign in to bring your Agents to this computer." }), _jsx(EntryActions, { children: _jsx(EntryAction, { children: "Sign in" }) })] }) }));
 }
 function FormDialogSpecimen() {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "outline", children: "New customer" }), _jsx(FormDialog, { closeLabel: "Close", onOpenChange: setOpen, open: open, title: "Create customer", children: _jsx(FormDialogForm, { cancelLabel: "Cancel", onSubmit: (event) => {
+    const [open, setOpen] = useState(null);
+    const [discardOpen, setDiscardOpen] = useState(false);
+    const [name, setName] = useState("");
+    const close = () => {
+        setOpen(null);
+        setName("");
+    };
+    return (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { onClick: () => setOpen("plain"), variant: "outline", children: "New customer" }), _jsx(Button, { onClick: () => setOpen("guarded"), variant: "outline", children: "New customer, guarded" }), _jsx(FormDialog, { closeLabel: "Close", onOpenChange: (next) => setOpen(next ? "plain" : null), open: open === "plain", title: "Create customer", children: _jsx(FormDialogForm, { cancelLabel: "Cancel", onSubmit: (event) => {
                         event.preventDefault();
-                        setOpen(false);
-                    }, submit: { label: "Create customer", pendingLabel: "Creating customer" }, children: _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "showcase-customer", children: "Company name" }), _jsx(Input, { id: "showcase-customer", placeholder: "Bizeta Arredamenti" })] }) }) })] }));
+                        close();
+                    }, submit: { label: "Create customer", pendingLabel: "Creating customer" }, children: _jsx(Input, { id: "showcase-customer", label: "Company name", placeholder: "Bizeta Arredamenti" }) }) }), _jsx(FormDialog, { closeLabel: "Close", onOpenChange: (next) => setOpen(next ? "guarded" : null), open: open === "guarded", title: "Create customer", unsaved: { dirty: name !== "", onDismissBlocked: () => setDiscardOpen(true) }, children: _jsx(FormDialogForm, { cancelLabel: "Cancel", onSubmit: (event) => {
+                        event.preventDefault();
+                        close();
+                    }, submit: { label: "Create customer", pendingLabel: "Creating customer" }, children: _jsx(Input, { id: "showcase-customer-guarded", label: "Company name", onChange: (event) => setName(event.target.value), placeholder: "Bizeta Arredamenti", value: name }) }) }), _jsx(ConfirmDialog, { cancelLabel: "Keep editing", confirmLabel: "Discard changes", description: "The company name you typed is not saved.", onCancel: () => setDiscardOpen(false), onConfirm: () => {
+                    setDiscardOpen(false);
+                    close();
+                }, open: discardOpen, title: "Discard the new customer" })] }));
 }
 function FormDrawerSpecimen() {
     const [open, setOpen] = useState(false);
@@ -181,12 +237,37 @@ function FormDrawerSpecimen() {
 function LibraryShelfSpecimen() {
     const art = useEmptyArt();
     const [search, setSearch] = useState("");
-    return (_jsx(LibraryShelf, { definition: "Skills teach an Agent one job. Add one and every Agent you choose can do it.", empty: {
+    const templates = [
+        {
+            name: "Acme Quotes",
+            job: "Writes quotes from the price list",
+            form: "orbit",
+            meta: "3 skills · v1.2.0",
+        },
+        {
+            name: "Front desk",
+            job: "Answers the phone and books appointments",
+            form: "globe",
+            meta: "5 skills · 2 tasks · v2.0.1",
+        },
+        {
+            name: "Invoices",
+            job: "Checks e-invoices against orders before they are paid",
+            form: "ribbon",
+            meta: "4 skills · v1.0.0",
+        },
+    ];
+    return (_jsx(LibraryShelf, { empty: {
             kind: "firstUse",
-            title: "No skills yet",
-            description: "The jobs your Agents know live here.",
-            picture: art.skills,
-        }, loadingLabel: "Loading skills", search: { label: "Find a skill", value: search, onValueChange: setSearch }, sections: CATALOG }));
+            title: "No Agent templates yet",
+            description: "Agent templates appear here once published.",
+            picture: art.library,
+        }, loadingLabel: "Loading Agent templates", search: {
+            label: "Search Agent templates",
+            clearLabel: "Clear search",
+            value: search,
+            onValueChange: setSearch,
+        }, templates: templates.map((template) => (_jsx(AgentCard, { action: _jsx(Button, { prefix: _jsx(Plus, {}), children: "Create agent" }), job: template.job, meta: template.meta, name: template.name, visual: _jsx(AgentOrb, { color: COBALTO, decorative: true, form: template.form, size: 96 }) }, template.name))) }));
 }
 function OverviewPageSpecimen() {
     return (_jsx(OverviewPage, { exceptions: _jsx(RecordList, { ...MAILBOX_LIST, heading: { title: "Needs attention", meta: "1 of 3 mailboxes" }, label: "Needs attention", records: MAILBOXES.filter((mailbox) => mailbox.status === "failed") }), figures: [
@@ -229,9 +310,9 @@ function RecordSheetSpecimen() {
 }
 function RowEditFormSpecimen() {
     const [name, setName] = useState("Invoices");
-    return (_jsx("div", { className: "max-w-lg rounded-md border border-border", children: _jsx(RowEditForm, { cancelLabel: "Cancel", hint: "Agents see the new name at once.", onCancel: () => setName("Invoices"), onSubmit: (event) => event.preventDefault(), submit: { label: "Save", disabled: name === "Invoices" }, children: _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "showcase-row-name", children: "Name" }), _jsx(Input, { id: "showcase-row-name", onChange: (event) => setName(event.target.value), value: name })] }) }) }));
+    return (_jsx("div", { className: "max-w-lg rounded-md border border-border", children: _jsx(RowEditForm, { cancelLabel: "Cancel", hint: "Agents see the new name at once.", onCancel: () => setName("Invoices"), onSubmit: (event) => event.preventDefault(), submit: { label: "Save", disabled: name === "Invoices" }, children: _jsx(Input, { id: "showcase-row-name", label: "Name", onChange: (event) => setName(event.target.value), value: name }) }) }));
 }
-function SettingsSectionSpecimen() {
+function SenderSection() {
     return (_jsx(SettingsSection, { description: "The name and address your Customers read on every message.", save: {
             action: async () => null,
             label: "Save",
@@ -240,6 +321,30 @@ function SettingsSectionSpecimen() {
             hint: "Please use 32 characters at maximum.",
         }, title: "Sender", children: _jsx(SettingsField, { id: "showcase-sender-name", label: "Sender name", children: ({ controlProps }) => (_jsx(Input, { ...controlProps, defaultValue: "Acme Quotes", name: "senderName" })) }) }));
 }
+function SettingsSectionSpecimen() {
+    return (_jsxs(SettingsPage, { children: [_jsx(SenderSection, {}), _jsx(SettingsSection, { description: "The last payment of \u20AC 49 did not go through. Update your card to keep the Business plan.", footer: _jsx(Button, { variant: "outline", children: "Update payment method" }), title: "Payment failed", tone: "error" }), _jsx(SettingsSection, { description: "Your Pro trial ends on 30 November. Add a payment method to keep your Agents running.", footer: _jsx(Button, { variant: "outline", children: "Add payment method" }), title: "Trial ending soon", tone: "warning" }), _jsx(SettingsSection, { description: "Move this project to another team.", lockedReason: "You need additional permissions to transfer projects.", title: "Transfer project", children: _jsx(SettingsField, { id: "showcase-transfer-team", label: "New team", children: ({ controlProps }) => (_jsx(Input, { ...controlProps, defaultValue: "Rossi Ottica", name: "team" })) }) }), _jsx(SettingsSection, { description: "Invoices and receipts go to this address.", save: {
+                    action: async () => null,
+                    label: "Save",
+                    pendingLabel: "Saving",
+                    saved: () => undefined,
+                }, title: "Billing email", children: _jsx(SettingsField, { id: "showcase-billing-email", label: "Billing email", children: ({ controlProps }) => (_jsx(Input, { ...controlProps, defaultValue: "amministrazione@acme.it", name: "billingEmail", type: "email" })) }) })] }));
+}
+function SelectableRecordListSpecimen() {
+    const [selected, setSelected] = useState(new Set(["orders"]));
+    return (_jsx(RecordList, { ...MAILBOX_LIST, footer: { count: `${selected.size} of ${MAILBOXES.length} selected` }, label: "Mailboxes to remove", records: MAILBOXES, select: {
+            header: "Select",
+            label: (mailbox) => `Select ${mailbox.address}`,
+            checked: (mailbox) => selected.has(mailbox.id),
+            onCheckedChange: (mailbox, checked) => setSelected((current) => {
+                const next = new Set(current);
+                if (checked)
+                    next.add(mailbox.id);
+                else
+                    next.delete(mailbox.id);
+                return next;
+            }),
+        } }));
+}
 export const COMPOSITIONS = {
     ActivityFeed: ActivityFeedSpecimen,
     AgentProfileCard: AgentProfileCardSpecimen,
@@ -255,16 +360,24 @@ export const COMPOSITIONS = {
     ObjectPage: () => (_jsx(ObjectPage, { actions: { secondary: { label: "Edit", onClick: nothing }, menu: PAGE_MENU }, description: "Optician \u00B7 partner since March 2026", facts: [
             { label: "Customers", value: "4" },
             { label: "Plan", value: "Business" },
-        ], mark: { kind: "company", name: "Rossi Ottica" }, name: "Rossi Ottica", children: _jsx(ObjectSection, { title: "Company", children: _jsx(ObjectFacts, { facts: [{ label: "VAT number", value: "IT01234567890" }] }) }) })),
-    ObjectSection: () => (_jsx(ObjectSection, { action: { label: "Edit", onClick: nothing }, meta: "Changed on 2 October", title: "Billing", children: _jsx(ObjectFacts, { facts: [
-                { label: "Billing email", value: "amministrazione@acme.it" },
+        ], mark: { kind: "company", name: "Rossi Ottica" }, name: "Rossi Ottica", children: _jsx(ObjectSection, { description: "Legal details of the partner.", title: "Company", children: _jsx(ObjectFacts, { facts: [{ label: "VAT number", value: "IT01234567890" }] }) }) })),
+    ObjectSection: () => (_jsx(ObjectSection, { action: { label: "Edit", onClick: nothing }, description: "Where invoices go and which plan applies.", meta: "Changed on 2 October", title: "Billing", children: _jsx(ObjectFacts, { facts: [
+                { label: "Billing email", value: "amministrazione@acme.it", ellipsis: true },
                 { label: "Plan", value: "Business" },
+                {
+                    label: "Reference",
+                    value: "ACME-0042",
+                    tooltip: "The code your Customer quotes when they write to support.",
+                },
             ] }) })),
     OverviewPage: OverviewPageSpecimen,
     PageHeader: () => (_jsxs(PageActionsHostProvider, { children: [_jsx(PageHeader, { title: "Customers" }), _jsx(PageActions, { primary: { label: "Invite customer", icon: _jsx(Plus, {}), onClick: nothing } })] })),
-    RecordList: () => (_jsx(RecordList, { ...MAILBOX_LIST, footer: { count: "3 mailboxes" }, label: "Mailboxes", records: MAILBOXES })),
+    RecordList: () => (_jsxs("div", { className: "grid gap-6", children: [_jsx(RecordList, { ...MAILBOX_LIST, footer: { count: "3 mailboxes" }, label: "Mailboxes", records: MAILBOXES }), _jsx(RecordList, { ...MAILBOX_LIST, label: "Mailboxes with one command", menu: (mailbox) => ({
+                    label: `More for ${mailbox.address}`,
+                    commands: [{ label: "Reconnect", icon: _jsx(RefreshCw, {}), onClick: nothing }],
+                }), records: MAILBOXES }), _jsx(SelectableRecordListSpecimen, {})] })),
     RecordSheet: RecordSheetSpecimen,
     RowEditForm: RowEditFormSpecimen,
-    SettingsPage: () => (_jsx(SettingsPage, { title: "Company settings", children: _jsx(SettingsSectionSpecimen, {}) })),
+    SettingsPage: () => (_jsx(SettingsPage, { title: "Company settings", children: _jsx(SenderSection, {}) })),
     SettingsSection: SettingsSectionSpecimen,
 };

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

@@ -1,30 +1,35 @@
 declare function DataTableSpecimen(): import("react").JSX.Element;
+declare function CodeBlockSpecimen(): import("react").JSX.Element;
+declare function SnippetSpecimen(): import("react").JSX.Element;
+declare function ItemSpecimen(): import("react").JSX.Element;
+declare function KbdSpecimen(): import("react").JSX.Element;
+declare function ProgressSpecimen(): import("react").JSX.Element;
 declare function DisclosureRowSpecimen(): import("react").JSX.Element;
 declare function UsageTable(): import("react").JSX.Element;
 export declare const DATA: {
     AgentCard: () => import("react").JSX.Element;
-    ApprovalRow: () => import("react").JSX.Element;
     Card: () => import("react").JSX.Element;
     CardRow: () => import("react").JSX.Element;
-    CodeBlock: () => import("react").JSX.Element;
+    CodeBlock: typeof CodeBlockSpecimen;
     DataTable: typeof DataTableSpecimen;
     DiffCount: () => import("react").JSX.Element;
     DisclosureRow: typeof DisclosureRowSpecimen;
     FileDiff: () => import("react").JSX.Element;
-    Item: () => import("react").JSX.Element;
-    Kbd: () => import("react").JSX.Element;
-    MemoryItem: () => import("react").JSX.Element;
+    Item: typeof ItemSpecimen;
+    Kbd: typeof KbdSpecimen;
+    MiddleTruncate: () => import("react").JSX.Element;
     ObjectFacts: () => import("react").JSX.Element;
     PairingCode: () => import("react").JSX.Element;
-    Progress: () => import("react").JSX.Element;
+    Progress: typeof ProgressSpecimen;
     QrCode: () => import("react").JSX.Element;
     RecordTime: () => import("react").JSX.Element;
     RunTimeline: () => import("react").JSX.Element;
     SettingsFactsSection: () => import("react").JSX.Element;
-    StatusRow: () => import("react").JSX.Element;
+    Snippet: typeof SnippetSpecimen;
     Table: typeof UsageTable;
     TableCard: () => import("react").JSX.Element;
     TableValue: () => import("react").JSX.Element;
+    TextWithCopyButton: () => import("react").JSX.Element;
     UsageMeter: () => import("react").JSX.Element;
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/data.tsx"],"names":[],"mappings":"AAqFA,iBAAS,iBAAiB,gCAczB;AAED,iBAAS,qBAAqB,gCAc7B;AAED,iBAAS,UAAU,gCAgClB;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAiOU,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/data.tsx"],"names":[],"mappings":"AA4HA,iBAAS,iBAAiB,gCAczB;AAsCD,iBAAS,iBAAiB,gCAkDzB;AAUD,iBAAS,eAAe,gCASvB;AAED,iBAAS,YAAY,gCAoCpB;AAED,iBAAS,WAAW,gCA6BnB;AAQD,iBAAS,gBAAgB,gCAqBxB;AAED,iBAAS,qBAAqB,gCAc7B;AAED,iBAAS,UAAU,gCAqClB;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAkNU,CAAC"}

package/dist/showcase/specimens/data.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageCircle, RotateCw } from "lucide-react";
+import { MessageCircle, Plus, RotateCw } from "lucide-react";
 import { useState } from "react";
 import { AgentCard } from "../../components/agent-card.js";
 import { AgentOrb } from "../../components/agent-orb.js";
-import { ApprovalRow } from "../../components/approval-row.js";
 import { Button } from "../../components/button.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../components/card.js";
 import { CardRow } from "../../components/card-row.js";
@@ -13,9 +12,9 @@ import { DataTable } from "../../components/data-table.js";
 import { DiffCount } from "../../components/diff-count.js";
 import { DisclosureRow } from "../../components/disclosure-row.js";
 import { FileDiff } from "../../components/file-diff.js";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "../../components/item.js";
-import { Kbd, KbdGroup } from "../../components/kbd.js";
-import { MemoryItem } from "../../components/memory-item.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSelect, ItemTitle, } from "../../components/item.js";
+import { Kbd } from "../../components/kbd.js";
+import { MiddleTruncate } from "../../components/middle-truncate.js";
 import { ObjectFacts } from "../../components/object-workspace.js";
 import { PairingCode } from "../../components/pairing-code.js";
 import { Progress, ProgressLabel, ProgressValue } from "../../components/progress.js";
@@ -23,13 +22,13 @@ import { QrCode } from "../../components/qr-code.js";
 import { RecordTime } from "../../components/record-time.js";
 import { RunTimeline } from "../../components/run-timeline.js";
 import { SettingsFactsSection } from "../../components/settings-facts.js";
-import { StatusDot } from "../../components/status-dot.js";
-import { StatusRow, StatusSection } from "../../components/status-row.js";
-import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../../components/table.js";
+import { Snippet } from "../../components/snippet.js";
+import { Table, TableBody, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, } from "../../components/table.js";
 import { TableCard } from "../../components/table-card.js";
 import { TableValue } from "../../components/table-value.js";
+import { TextWithCopyButton } from "../../components/text-with-copy-button.js";
 import { UsageMeter } from "../../components/usage-meter.js";
-import { COBALTO, MAILBOXES, NOW, nothing } from "../samples.js";
+import { COBALTO, MAILBOXES, NOW } from "../samples.js";
 const MCP_JSON = `{
   "mcpServers": {
     "fatture": { "url": "https://mcp.acme.it/fatture" }
@@ -39,48 +38,152 @@ const COPY_LABELS = {
     copiedLabel: "Copied",
     copyFailedLabel: "Couldn't copy",
 };
-const USAGE_ROWS = [
-    { agent: "Invoices", tokens: "1,204,330", cost: "€ 18.40" },
-    { agent: "Orders", tokens: "612,904", cost: "€ 9.12" },
-    { agent: "Support", tokens: "2,033,118", cost: "€ 31.75" },
+const CODE_BLOCK_LABELS = {
+    ...COPY_LABELS,
+    lineLabel: (line, state) => `Line ${line}, ${state}`,
+};
+const SNIPPET_LABELS = {
+    ...COPY_LABELS,
+    copyLabel: "Copy command",
+};
+const USAGE_FIGURES = [
+    { agent: "Invoices", runs: 412, tokens: 1204330, cost: 18.4 },
+    { agent: "Orders", runs: 198, tokens: 612904, cost: 9.12 },
+    { agent: "Support", runs: 731, tokens: 2033118, cost: 31.75 },
 ];
+const formatTokens = (tokens) => tokens.toLocaleString("en-US");
+const formatCost = (cost) => `€ ${cost.toFixed(2)}`;
+const USAGE_ROWS = USAGE_FIGURES.map((figure) => ({
+    agent: figure.agent,
+    tokens: formatTokens(figure.tokens),
+    cost: formatCost(figure.cost),
+}));
 const USAGE_COLUMNS = [
     { accessorKey: "agent", header: "Agent" },
-    { accessorKey: "tokens", header: "Tokens", meta: { numeric: true } },
-    { accessorKey: "cost", header: "Cost (€)", meta: { numeric: true } },
+    {
+        accessorKey: "runs",
+        header: "Runs",
+        size: 96,
+        meta: { numeric: true, compact: "dropped" },
+    },
+    {
+        accessorKey: "tokens",
+        header: "Tokens",
+        size: 140,
+        cell: ({ row }) => formatTokens(row.original.tokens),
+        meta: { numeric: true },
+    },
+    {
+        accessorKey: "cost",
+        header: "Cost (€)",
+        size: 120,
+        cell: ({ row }) => formatCost(row.original.cost),
+        meta: { numeric: true },
+    },
 ];
 function DataTableSpecimen() {
-    return (_jsx(DataTable, { columns: USAGE_COLUMNS, data: [...USAGE_ROWS], empty: { kind: "nothingYet", message: "No Agent has run this month." }, footer: "3 Agents", getRowId: (row) => row.agent, heading: { title: "Usage by Agent" }, primaryColumns: ["agent", "cost"], summary: { label: "Total", value: "€ 59.27" }, tableLabel: "Usage by Agent, this month" }));
+    return (_jsx(DataTable, { columns: USAGE_COLUMNS, data: [...USAGE_FIGURES], empty: { kind: "nothingYet", message: "No Agent has run this month." }, footer: "3 Agents", getRowId: (row) => row.agent, heading: { title: "Usage by Agent" }, primaryColumns: ["agent", "cost"], summary: { label: "Total", value: "€ 59.27" }, tableLabel: "Usage by Agent, this month" }));
+}
+const MCP_CHANGE = `{
+  "mcpServers": {
+    "fatture": { "url": "http://mcp.acme.it/fatture" }
+    "fatture": { "url": "https://mcp.acme.it/fatture" },
+    "ordini": { "url": "https://mcp.acme.it/ordini" }
+  }
+}`;
+const MCP_BOTH_JSON = `{
+  "mcpServers": {
+    "fatture": { "url": "https://mcp.acme.it/fatture" },
+    "ordini": { "url": "https://mcp.acme.it/ordini" }
+  }
+}`;
+const MCP_YAML = `mcpServers:
+  fatture:
+    url: https://mcp.acme.it/fatture
+  ordini:
+    url: https://mcp.acme.it/ordini`;
+const MCP_TOOLS = `{
+  "allow": ["fatture", "ordini"],
+  "deny": []
+}`;
+const MCP_ALLOW = `{
+  "allow": ["fatture"],
+  "deny": []
+}`;
+const MCP_FORMATS = [
+    { label: "JSON", value: "json" },
+    { label: "YAML", value: "yaml" },
+];
+function CodeBlockSpecimen() {
+    const [format, setFormat] = useState("json");
+    return (_jsxs("div", { className: "grid max-w-lg gap-4", children: [_jsx(CodeBlock, { ...CODE_BLOCK_LABELS, code: MCP_JSON, copyLabel: "Copy mcp.json", filename: "mcp.json", label: "MCP configuration" }), _jsx(CodeBlock, { ...CODE_BLOCK_LABELS, addedLinesNumbers: [4, 5], code: MCP_CHANGE, copyLabel: "Copy config/mcp.json", filename: "config/mcp.json", highlightedLinesNumbers: [2], label: "MCP configuration, changed", removedLinesNumbers: [3] }), _jsx(CodeBlock, { ...CODE_BLOCK_LABELS, code: format === "json" ? MCP_BOTH_JSON : MCP_YAML, copyLabel: "Copy MCP configuration", label: "MCP configuration in two formats", tabs: {
+                    label: "Format",
+                    options: MCP_FORMATS,
+                    value: format,
+                    onChange: setFormat,
+                } }), _jsx(CodeBlock, { ...CODE_BLOCK_LABELS, code: MCP_TOOLS, copyLabel: "Copy tool list", label: "Tool list" }), _jsx(CodeBlock, { ...CODE_BLOCK_LABELS, code: MCP_ALLOW, copyLabel: "Copy allow list", filename: "allow.json", hideLineNumbers: true, highlightedLinesNumbers: [2], label: "Allow list, marked" })] }));
+}
+const CONFIG_DIGEST = "9f2c4e7a1b8d03f5c6e2a7d4b1908f3e5a6c7d21";
+const MIDDLE_TRUNCATE_VALUES = [
+    { label: "Branch", value: "feature/acme-quotes-price-list-import" },
+    { label: "Path", value: "apps/portal/src/app/[lang]/(dashboard)/library/page.tsx" },
+    { label: "Commit", value: "4f9c1e7a2b8d3065c1e4a7f9b2d8036ec5a1f7d4" },
+];
+function SnippetSpecimen() {
+    return (_jsxs("div", { className: "grid max-w-lg gap-4", children: [_jsx(Snippet, { ...SNIPPET_LABELS, text: "npm init next-app" }), _jsx(Snippet, { ...SNIPPET_LABELS, text: ["cd acme-quotes", "npm run dev"] }), _jsx(Snippet, { ...SNIPPET_LABELS, prompt: false, text: "https://mcp.acme.it/fatture" }), _jsx(Snippet, { ...SNIPPET_LABELS, placeholder: "Run nadia login to connect this computer", text: "" })] }));
+}
+function ItemSpecimen() {
+    const [selected, setSelected] = useState(false);
+    return (_jsxs(ItemGroup, { className: "max-w-lg", divided: true, children: [_jsxs(Item, { children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(MessageCircle, { "aria-hidden": "true" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Telegram" }), _jsx(ItemDescription, { children: "Invoices answers the sales group here." })] }), _jsx(ItemActions, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Disconnect Telegram" }) })] }), _jsxs(Item, { children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(RotateCw, { "aria-hidden": "true" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Nadia filed 12 invoices" }), _jsx(ItemDescription, { children: "From the October statement, in the archive folder." })] })] }), _jsxs(Item, { children: [_jsx(ItemSelect, { checked: selected, label: "Select Chrome, Mac", onCheckedChange: setSelected }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Chrome, Mac" }), _jsx(ItemDescription, { children: "Signed in today at 09:14." })] })] })] }));
+}
+function KbdSpecimen() {
+    return (_jsxs("div", { className: "grid gap-3 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: ["Find", _jsx(Kbd, { meta: true, children: "K" }), _jsx(Kbd, { meta: true, shift: true, children: "K" })] }), _jsxs("span", { className: "flex items-center gap-2", children: ["Find, small", _jsx(Kbd, { meta: true, size: "sm", children: "K" }), _jsx(Kbd, { meta: true, shift: true, size: "sm", children: "K" })] }), _jsxs("span", { className: "flex items-center gap-2", children: ["Close", _jsx(Kbd, { children: "Esc" })] }), _jsxs("span", { className: "flex items-center gap-2", children: ["Previous Agent", _jsx(Kbd, { children: "ArrowUp" })] })] }));
+}
+const IMPORT_STOPS = [
+    { value: 1, label: "Reading the file" },
+    { value: 2, label: "Matching products" },
+    { value: 3, label: "Saving the price list" },
+];
+function ProgressSpecimen() {
+    return (_jsxs("div", { className: "grid max-w-md gap-6", children: [_jsxs(Progress, { "aria-labelledby": "showcase-import-contacts", max: 40, value: 27, children: [_jsx(ProgressLabel, { id: "showcase-import-contacts", children: "Importing contacts" }), _jsx(ProgressValue, { children: () => "27 of 40" })] }), _jsxs(Progress, { "aria-labelledby": "showcase-import-prices", max: 3, stops: IMPORT_STOPS, value: 2, children: [_jsx(ProgressLabel, { id: "showcase-import-prices", children: "Importing the price list" }), _jsx(ProgressValue, { children: () => "Step 2 of 3 · Matching products" })] }), _jsxs(Progress, { "aria-labelledby": "showcase-invoices-filed", max: 12, tone: "success", value: 12, children: [_jsx(ProgressLabel, { id: "showcase-invoices-filed", children: "Invoices filed" }), _jsx(ProgressValue, { children: () => "12 of 12" })] }), _jsxs(Progress, { "aria-labelledby": "showcase-included-runs", max: 1000, tone: "secondary", value: 620, children: [_jsx(ProgressLabel, { id: "showcase-included-runs", children: "Included runs" }), _jsx(ProgressValue, { children: () => "620 of 1,000" })] })] }));
 }
 function DisclosureRowSpecimen() {
     const [open, setOpen] = useState(false);
     return (_jsxs("div", { className: "grid max-w-md gap-2", children: [_jsx(DisclosureRow, { onToggle: () => setOpen((value) => !value), open: open, trailing: "3 steps", children: "Read the price list" }), open ? (_jsx("p", { className: "pl-6 text-sm text-muted-foreground", children: "Opened listino-2026.xlsx, read 412 rows, kept 38 for the quote." })) : null] }));
 }
 function UsageTable() {
-    return (_jsxs(Table, { "aria-label": "Usage by Agent", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { scope: "col", children: "Agent" }), _jsx(TableHead, { className: "text-right", scope: "col", children: "Tokens" }), _jsx(TableHead, { className: "text-right", scope: "col", children: "Cost (\u20AC)" })] }) }), _jsx(TableBody, { children: USAGE_ROWS.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.agent }), _jsx(TableCell, { className: "text-right tabular-nums", children: row.tokens }), _jsx(TableCell, { className: "text-right tabular-nums", children: row.cost })] }, row.agent))) }), _jsx(TableFooter, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Total" }), _jsx(TableCell, { className: "text-right tabular-nums", children: "3,850,352" }), _jsx(TableCell, { className: "text-right tabular-nums", children: "\u20AC 59.27" })] }) })] }));
+    return (_jsxs(Table, { "aria-label": "Usage by Agent", children: [_jsxs(TableColgroup, { children: [_jsx(TableCol, {}), _jsx(TableCol, { className: "w-36" }), _jsx(TableCol, { className: "w-32" })] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { scope: "col", children: "Agent" }), _jsx(TableHead, { className: "text-right", scope: "col", children: "Tokens" }), _jsx(TableHead, { className: "text-right", scope: "col", children: "Cost (\u20AC)" })] }) }), _jsx(TableBody, { interactive: true, striped: true, children: USAGE_ROWS.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.agent }), _jsx(TableCell, { className: "text-right tabular-nums", children: row.tokens }), _jsx(TableCell, { className: "text-right tabular-nums", children: row.cost })] }, row.agent))) }), _jsx(TableFooter, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Total" }), _jsx(TableCell, { className: "text-right tabular-nums", children: "3,850,352" }), _jsx(TableCell, { className: "text-right tabular-nums", children: "\u20AC 59.27" })] }) })] }));
 }
 export const DATA = {
-    AgentCard: () => (_jsx("div", { className: "max-w-md", children: _jsx(AgentCard, { action: _jsx(Button, { variant: "outline", children: "Use template" }), job: "Writes quotes from the price list", meta: "Sales \u00B7 3 skills", name: "Acme Quotes", visual: _jsx(AgentOrb, { color: COBALTO, decorative: true, form: "orbit", size: 96 }) }) })),
-    ApprovalRow: () => (_jsx(ItemGroup, { className: "max-w-lg", role: "list", children: _jsx(ApprovalRow, { action: _jsx(Button, { children: "Approve payment" }), description: "Invoices drafted it from the October statement.", media: _jsx(AgentOrb, { color: COBALTO, decorative: true, form: "orbit", size: 32 }), title: "Pay Bizeta Arredamenti \u20AC 1,240" }) })),
-    Card: () => (_jsxs(Card, { className: "max-w-md", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Billing contact" }), _jsx(CardDescription, { children: "Who receives invoices and payment reminders." }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", children: "Edit" }) })] }), _jsx(CardContent, { className: "text-sm", children: "amministrazione@acme.it" }), _jsx(CardFooter, { className: "text-sm text-muted-foreground", children: "Changed on 2 October" })] })),
-    CardRow: () => (_jsx(CardRow, { columns: 3, children: ["Runs", "Approvals", "Cost"].map((title, index) => (_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: index === 1 ? "A longer line shows every card keeps the tallest's height." : "—" })] }) }, title))) })),
-    CodeBlock: () => (_jsx("div", { className: "max-w-lg", children: _jsx(CodeBlock, { ...COPY_LABELS, code: MCP_JSON, copyLabel: "Copy mcp.json", filename: "mcp.json", label: "MCP configuration", language: "JSON" }) })),
+    AgentCard: () => (_jsx("div", { className: "max-w-xs", children: _jsx(AgentCard, { action: _jsx(Button, { prefix: _jsx(Plus, {}), children: "Create agent" }), job: "Writes quotes from the price list", meta: "3 skills \u00B7 2 tasks \u00B7 v1.2.0", name: "Acme Quotes", visual: _jsx(AgentOrb, { color: COBALTO, decorative: true, form: "orbit", size: 96 }) }) })),
+    Card: () => (_jsxs("div", { className: "grid max-w-md gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Billing contact" }), _jsx(CardDescription, { children: "Who receives invoices and payment reminders." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }), _jsx(CardContent, { className: "text-sm", children: "amministrazione@acme.it" }), _jsx(CardFooter, { children: "Changed on 2 October" })] }), _jsxs(Card, { surface: "raised", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Payment method" }), _jsx(CardDescription, { children: "The card charged for Agents and extra seats." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Change" }) })] }), _jsx(CardContent, { className: "text-sm", children: "Visa ending 4242" })] })] })),
+    CardRow: () => (_jsx(CardRow, { columns: 5, children: ["Runs", "Approvals", "Cost", "Tokens", "Cache hit rate"].map((title, index) => (_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: index === 1 ? "A longer line shows every card keeps the tallest's height." : "—" })] }) }, title))) })),
+    CodeBlock: CodeBlockSpecimen,
     DataTable: DataTableSpecimen,
     DiffCount: () => (_jsxs("span", { className: "flex items-center gap-2 font-mono text-sm", children: ["quote-template.md", _jsx(DiffCount, { added: 12, removed: 3 })] })),
     DisclosureRow: DisclosureRowSpecimen,
     FileDiff: () => (_jsx(FileDiff, { addedLabel: "Added", after: "Payment within 30 days.\nPrices include VAT.\nValid until 31 December.", before: "Payment within 60 days.\nPrices include VAT.", className: "max-w-lg", removedLabel: "Removed", skippedLabel: (count) => `${count} unchanged lines` })),
-    Item: () => (_jsxs(ItemGroup, { className: "max-w-lg", divided: true, children: [_jsxs(Item, { children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(MessageCircle, { "aria-hidden": "true" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Telegram" }), _jsx(ItemDescription, { children: "Invoices answers the sales group here." })] }), _jsx(ItemActions, { children: _jsx(Button, { variant: "outline", children: "Disconnect" }) })] }), _jsxs(Item, { children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(RotateCw, { "aria-hidden": "true" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Nadia filed 12 invoices" }), _jsx(ItemDescription, { children: "From the October statement, in the archive folder." })] })] })] })),
-    Kbd: () => (_jsxs("span", { className: "flex items-center gap-2 text-sm", children: ["Find", _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] })),
-    MemoryItem: () => (_jsx(MemoryItem, { className: "max-w-md", fact: "Acme's quotes always copy the sales team.", label: "Memory" })),
-    ObjectFacts: () => (_jsx(ObjectFacts, { facts: [
-            { label: "VAT number", value: _jsx("span", { className: "font-mono", children: "IT01234567890" }) },
-            { label: "Partner", value: "Rossi Ottica" },
-            { label: "Address", value: "Via Roma 12, 20121 Milano", block: true },
-        ] })),
+    Item: ItemSpecimen,
+    Kbd: KbdSpecimen,
+    MiddleTruncate: () => (_jsx("dl", { className: "grid gap-3 text-sm", children: MIDDLE_TRUNCATE_VALUES.map(({ label, value }) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-muted-foreground", children: label }), _jsx("dd", { className: "w-60", children: _jsx(MiddleTruncate, { className: "font-label-mono text-label-mono", value: value }) })] }, label))) })),
+    ObjectFacts: () => (_jsx("div", { className: "max-w-md", children: _jsx(ObjectFacts, { facts: [
+                {
+                    label: "VAT number",
+                    tooltip: "The tax number printed on every invoice.",
+                    value: _jsx("span", { className: "font-mono", children: "IT01234567890" }),
+                },
+                { label: "Partner", value: "Rossi Ottica" },
+                {
+                    label: "Certified email",
+                    ellipsis: true,
+                    value: "amministrazione.rossiottica@pec.rossiottica.it",
+                },
+                { label: "Address", value: "Via Roma 12, 20121 Milano", block: true },
+            ] }) })),
     PairingCode: () => _jsx(PairingCode, { code: "4821", label: "Pairing code" }),
-    Progress: () => (_jsxs(Progress, { className: "max-w-md", max: 40, value: 27, children: [_jsx(ProgressLabel, { children: "Importing contacts" }), _jsx(ProgressValue, { children: () => "27 of 40" })] })),
+    Progress: ProgressSpecimen,
     QrCode: () => (_jsx(QrCode, { label: "Open Nadia on your phone", size: 128, value: "https://nadicode.com/app" })),
-    RecordTime: () => (_jsx("div", { className: "grid gap-1 text-sm", children: MAILBOXES.map((mailbox) => (_jsxs("span", { children: [mailbox.address, " \u00B7", " ", _jsx(RecordTime, { at: mailbox.checked, now: NOW, phrase: (when) => `Checked ${when}` })] }, mailbox.id))) })),
+    RecordTime: () => (_jsxs("div", { className: "grid gap-1 text-sm", children: [MAILBOXES.map((mailbox) => (_jsxs("span", { children: [mailbox.address, " \u00B7", " ", _jsx(RecordTime, { at: mailbox.checked, now: NOW, phrase: (when) => `Checked ${when}` })] }, mailbox.id))), _jsxs("span", { children: ["pec@acme.it \u00B7", " ", _jsx(RecordTime, { at: null, phrase: (when) => `Checked ${when}`, children: "Pending" })] })] })),
     RunTimeline: () => (_jsx(RunTimeline, { className: "max-w-lg", steps: [
             {
                 id: "read",
@@ -98,14 +201,15 @@ export const DATA = {
             },
             { id: "send", label: "Step 03", title: "Send the quote", progress: "upcoming" },
         ] })),
-    SettingsFactsSection: () => (_jsx("div", { className: "max-w-lg", children: _jsx(SettingsFactsSection, { action: _jsx(Button, { variant: "outline", children: "Edit" }), facts: [
+    SettingsFactsSection: () => (_jsx("div", { className: "max-w-lg", children: _jsx(SettingsFactsSection, { action: _jsx(Button, { variant: "outline", children: "Edit" }), description: "The legal details on every invoice.", facts: [
                 { label: "Legal name", value: "Acme S.r.l." },
                 { label: "VAT number", value: _jsx("span", { className: "font-mono", children: "IT01234567890" }) },
                 { label: "PEC", value: null },
-            ], headingId: "showcase-company-facts", missingValueLabel: "Not set", title: "Company" }) })),
-    StatusRow: () => (_jsx("div", { className: "max-w-sm", children: _jsxs(StatusSection, { defaultCollapsed: false, label: "Channels", children: [_jsx(StatusRow, { leading: _jsx(StatusDot, { tone: "good" }), onActivate: nothing, children: "Telegram" }), _jsx(StatusRow, { leading: _jsx(StatusDot, { tone: "warn" }), children: "WhatsApp" })] }) })),
+            ], footerHint: "Ask an owner to change these.", headingId: "showcase-company-facts", missingValueLabel: "Not set", title: "Company" }) })),
+    Snippet: SnippetSpecimen,
     Table: UsageTable,
     TableCard: () => (_jsx(TableCard, { footer: "3 Agents", summary: { label: "Total", value: "€ 59.27" }, title: "Usage this month", children: _jsx(UsageTable, {}) })),
     TableValue: () => (_jsxs("dl", { className: "grid max-w-xs grid-cols-2 gap-2 text-sm", children: [_jsx("dt", { children: "Tokens" }), _jsx("dd", { children: _jsx(TableValue, { missingLabel: "Not reported", value: "1,204,330" }) }), _jsx("dt", { children: "Cost" }), _jsx("dd", { children: _jsx(TableValue, { missingLabel: "Not reported", value: null }) }), _jsx("dt", { children: "Last run" }), _jsx("dd", { children: _jsx(TableValue, { failedLabel: "Couldn't read", state: "failed" }) })] })),
+    TextWithCopyButton: () => (_jsxs("div", { className: "grid gap-4", children: [_jsx(TextWithCopyButton, { ...COPY_LABELS, copyLabel: "Copy config digest", value: CONFIG_DIGEST }), _jsx(TextWithCopyButton, { ...COPY_LABELS, className: "w-50", copyLabel: "Copy config digest", ellipsis: true, value: CONFIG_DIGEST })] })),
     UsageMeter: () => (_jsx(UsageMeter, { className: "max-w-sm", fields: ["Tokens", "620 of 1,000"], usage: 62 })),
 };

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

@@ -3,6 +3,7 @@ declare function LabelledPictureSpecimen(): import("react").JSX.Element;
 declare function PendingLabelSpecimen(): import("react").JSX.Element;
 declare function ToasterSpecimen(): import("react").JSX.Element;
 declare function UpdateCardSpecimen(): import("react").JSX.Element;
+declare function SkeletonRegionSpecimen(): import("react").JSX.Element;
 export declare const FEEDBACK: {
     Alert: () => import("react").JSX.Element;
     EmptyState: typeof EmptyStateSpecimen;
@@ -14,6 +15,7 @@ export declare const FEEDBACK: {
     NoticeBanner: () => import("react").JSX.Element;
     PendingLabel: typeof PendingLabelSpecimen;
     Skeleton: () => import("react").JSX.Element;
+    SkeletonRegion: typeof SkeletonRegionSpecimen;
     Toaster: typeof ToasterSpecimen;
     Tooltip: () => import("react").JSX.Element;
     UpdateCard: typeof UpdateCardSpecimen;

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

@@ -1 +1 @@
-{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/feedback.tsx"],"names":[],"mappings":"AAyBA,iBAAS,kBAAkB,gCAqB1B;AAED,iBAAS,uBAAuB,gCAW/B;AAED,iBAAS,oBAAoB,gCA0B5B;AAED,iBAAS,eAAe,gCAYvB;AAED,iBAAS,kBAAkB,gCAqB1B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAoGM,CAAC"}
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/feedback.tsx"],"names":[],"mappings":"AA8CA,iBAAS,kBAAkB,gCAoE1B;AAED,iBAAS,uBAAuB,gCAW/B;AAED,iBAAS,oBAAoB,gCAkB5B;AAED,iBAAS,eAAe,gCAyBvB;AAED,iBAAS,kBAAkB,gCA8B1B;AAED,iBAAS,sBAAsB,gCAwB9B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;CA8LM,CAAC"}