@nadicodeai/ui 12.1.96 → 12.1.97

package/dist/showcase/specimens/compositions.js

@@ -0,0 +1,270 @@
+"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 { useState } from "react";
+import { ActivityFeed } from "../../components/activity-feed.js";
+import { AgentOrb } from "../../components/agent-orb.js";
+import { AgentProfileCard } from "../../components/agent-profile.js";
+import { BrandWordmark } from "../../components/brand.js";
+import { Button } from "../../components/button.js";
+import { CatalogDrawer } from "../../components/catalog-drawer.js";
+import { CollectionFilters } from "../../components/collection-filters.js";
+import { CollectionPage } from "../../components/collection-page.js";
+import { CollectionSearch } from "../../components/collection-search.js";
+import { CollectionToolbar } from "../../components/collection-toolbar.js";
+import { ConfirmDialog } from "../../components/confirm-dialog.js";
+import { EntryAction, EntryActions, EntryMessage, EntryScene } from "../../components/entry-scene.js";
+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";
+import { ObjectFacts, ObjectSection } from "../../components/object-workspace.js";
+import { OverviewPage } from "../../components/overview-page.js";
+import { PageActions, PageActionsHostProvider } from "../../components/page-actions.js";
+import { PageHeader } from "../../components/page-header.js";
+import { RecordList } from "../../components/record-list.js";
+import { RecordSheet } from "../../components/record-sheet.js";
+import { RowEditForm } from "../../components/row-edit-form.js";
+import { SettingsField, SettingsSection } from "../../components/settings-section.js";
+import { SettingsPage } from "../../components/settings-page.js";
+import { useEmptyArt } from "../assets.js";
+import { COBALTO, MAILBOXES, nothing, PAGE_MENU, RECORD_COMMANDS, } from "../samples.js";
+const FILTER_COPY = {
+    add: "Filter",
+    searchFields: "Find a filter",
+    searchValues: "Find a value",
+    empty: "Nothing matches",
+    back: "Back to filters",
+    remove: "Remove filter",
+};
+const MAILBOX_LIST = {
+    getId: (mailbox) => mailbox.id,
+    name: (mailbox) => ({
+        name: mailbox.address,
+        detail: `Mailbox · read by ${mailbox.owner}`,
+        mark: { kind: "record", icon: Mail },
+    }),
+    status: {
+        label: "Status",
+        of: (mailbox) => mailbox.status === "failed" ? { label: "Can't sign in", tone: "danger" } : null,
+    },
+    menu: (mailbox) => ({ label: `More for ${mailbox.address}`, commands: RECORD_COMMANDS }),
+    commandsHeader: "Actions",
+};
+const CATALOG = [
+    {
+        id: "company",
+        title: "From your company",
+        entries: [
+            {
+                id: "quotes",
+                mark: { kind: "record", icon: Wrench, tone: "skill" },
+                name: "Write quotes from the price list",
+                description: "Reads listino-2026.xlsx and drafts a quote in the customer's language.",
+                add: { label: "Add skill", onClick: nothing },
+            },
+            {
+                id: "weather",
+                mark: { kind: "record", icon: Puzzle, tone: "plugin" },
+                name: "Weather",
+                description: "The forecast for each delivery address.",
+                add: { label: "Add plugin", onClick: nothing, added: { label: "Added" } },
+            },
+        ],
+    },
+];
+function useMailboxFilter() {
+    const [search, setSearch] = useState("");
+    const [status, setStatus] = useState("");
+    const records = MAILBOXES.filter((mailbox) => mailbox.address.includes(search.trim().toLowerCase()) &&
+        (status === "" || mailbox.status === status));
+    return {
+        records,
+        search: { label: "Find a mailbox", value: search, onValueChange: setSearch },
+        filters: {
+            facets: [
+                {
+                    label: "Status",
+                    allLabel: "Any status",
+                    value: status,
+                    onValueChange: setStatus,
+                    options: [
+                        { value: "connected", label: "Connected" },
+                        { value: "failed", label: "Can't sign in" },
+                    ],
+                    suggested: ["failed"],
+                },
+            ],
+            copy: FILTER_COPY,
+        },
+    };
+}
+function ActivityFeedSpecimen() {
+    return (_jsx(ActivityFeed, { days: [
+            {
+                id: "today",
+                title: "Today",
+                date: "2026-10-14",
+                events: [
+                    {
+                        id: "quote",
+                        at: "2026-10-14T09:13:00Z",
+                        actor: { kind: "agent", orb: { form: "orbit", color: COBALTO } },
+                        summary: "Acme Quotes drafted a quote for Rossi Ottica",
+                        status: { label: "Waiting for you", tone: "warning" },
+                    },
+                    {
+                        id: "invoices",
+                        at: "2026-10-14T07:30:00Z",
+                        actor: { kind: "person", name: "Ada Rossi" },
+                        summary: "Ada Rossi connected pec@acme.it",
+                    },
+                ],
+            },
+        ], empty: { kind: "nothingYet", message: "Nothing has happened yet." }, label: "Activity", loadingLabel: "Loading activity", locale: "en" }));
+}
+function AgentProfileCardSpecimen() {
+    return (_jsx(AgentProfileCard, { activity: { label: "Last active", value: "Today at 09:13", missingLabel: "Never" }, description: "Writes quotes from the price list", descriptionMissingLabel: "No description yet", edit: { label: "Edit Acme Quotes", onClick: nothing }, name: "Acme Quotes", orb: (size) => _jsx(AgentOrb, { color: COBALTO, decorative: true, form: "orbit", size: size }), origin: { label: "Made from", value: "Sales template", missingLabel: "Made from scratch" }, state: { label: "State", tone: "success", text: "Ready" } }));
+}
+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" })] }));
+}
+function CollectionFiltersSpecimen() {
+    const { filters } = useMailboxFilter();
+    return _jsx(CollectionFilters, { ...filters });
+}
+function CollectionPageSpecimen() {
+    const art = useEmptyArt();
+    const { records, search, filters } = useMailboxFilter();
+    return (_jsx(CollectionPage, { ...MAILBOX_LIST, actions: {
+            primary: { label: "Add mailbox", icon: _jsx(Plus, {}), onClick: nothing },
+            menu: PAGE_MENU,
+        }, empty: {
+            kind: "firstUse",
+            title: "No mailboxes yet",
+            description: "Every address your Agents read and send from lives here.",
+            picture: art.mail,
+            action: { label: "Add mailbox", icon: _jsx(Plus, {}), onClick: nothing },
+        }, filters: filters, footer: { count: `${records.length} mailboxes` }, label: "Mailboxes", noMatch: {
+            message: "No mailbox matches.",
+            clear: { label: "Clear search", onClick: () => search.onValueChange("") },
+        }, records: records, search: search, title: "Mailboxes" }));
+}
+function CollectionToolbarSpecimen() {
+    const { search, filters } = useMailboxFilter();
+    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" })] }));
+}
+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) => {
+                        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" })] }) }) })] }));
+}
+function FormDrawerSpecimen() {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "outline", children: "Connect Telegram" }), _jsxs(FormDrawer, { closeLabel: "Close", job: "steps", onOpenChange: setOpen, open: open, progress: "Step 1 of 2", title: "Connect Telegram", children: [_jsx(FormDrawerBody, { children: _jsx("p", { className: "text-sm", children: "Open the bot on your phone and send it the code 4821." }) }), _jsx(FormDrawerFooter, { cancel: { label: "Cancel" }, children: _jsx(Button, { onClick: () => setOpen(false), children: "Continue" }) })] })] }));
+}
+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: {
+            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 }));
+}
+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: [
+            {
+                label: "Runs this month",
+                value: "1,284",
+                delta: {
+                    value: "+18%",
+                    direction: "up",
+                    comparison: "vs September",
+                    directionLabel: "up",
+                },
+            },
+            { label: "Waiting for you", value: "2", tone: "warning", note: "Two approvals" },
+            {
+                label: "Cost this month",
+                value: "€ 412",
+                delta: {
+                    value: "−6%",
+                    direction: "down",
+                    upIsGood: false,
+                    comparison: "vs September",
+                    directionLabel: "down",
+                },
+            },
+        ] }));
+}
+function RecordSheetSpecimen() {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "outline", children: "Inspect pec@acme.it" }), _jsx(RecordSheet, { closeLabel: "Close", code: {
+                    label: "Mailbox ID",
+                    value: "mbx_0042",
+                    copyLabel: "Copy mailbox ID",
+                    copiedLabel: "Copied",
+                    copyFailedLabel: "Couldn't copy",
+                }, facts: [
+                    { label: "Read by", value: "Invoices" },
+                    { label: "Server", value: "imaps.pec.aruba.it" },
+                ], footer: { label: "Open pec@acme.it", onClick: nothing }, onOpenChange: setOpen, open: open, title: "pec@acme.it" })] }));
+}
+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 })] }) }) }));
+}
+function SettingsSectionSpecimen() {
+    return (_jsx(SettingsSection, { description: "The name and address your Customers read on every message.", save: {
+            action: async () => null,
+            label: "Save",
+            pendingLabel: "Saving",
+            savedLabel: "Saved",
+            hint: "Saved for every device you sign in on.",
+        }, title: "Sender", children: _jsx(SettingsField, { id: "showcase-sender-name", label: "Sender name", children: ({ controlProps }) => (_jsx(Input, { ...controlProps, defaultValue: "Acme Quotes", name: "senderName" })) }) }));
+}
+export const COMPOSITIONS = {
+    ActivityFeed: ActivityFeedSpecimen,
+    AgentProfileCard: AgentProfileCardSpecimen,
+    CatalogDrawer: CatalogDrawerSpecimen,
+    CollectionFilters: CollectionFiltersSpecimen,
+    CollectionPage: CollectionPageSpecimen,
+    CollectionToolbar: CollectionToolbarSpecimen,
+    ConfirmDialog: ConfirmDialogSpecimen,
+    EntryScene: EntrySceneSpecimen,
+    FormDialog: FormDialogSpecimen,
+    FormDrawer: FormDrawerSpecimen,
+    LibraryShelf: LibraryShelfSpecimen,
+    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" },
+                { label: "Plan", value: "Business" },
+            ] }) })),
+    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 })),
+    RecordSheet: RecordSheetSpecimen,
+    RowEditForm: RowEditFormSpecimen,
+    SettingsPage: () => (_jsx(SettingsPage, { title: "Company settings", children: _jsx(SettingsSectionSpecimen, {}) })),
+    SettingsSection: SettingsSectionSpecimen,
+};

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

@@ -0,0 +1,31 @@
+declare function DataTableSpecimen(): 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;
+    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;
+    ObjectFacts: () => import("react").JSX.Element;
+    PairingCode: () => import("react").JSX.Element;
+    Progress: () => import("react").JSX.Element;
+    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;
+    Table: typeof UsageTable;
+    TableCard: () => import("react").JSX.Element;
+    TableValue: () => import("react").JSX.Element;
+    UsageMeter: () => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +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"}

package/dist/showcase/specimens/data.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageCircle, 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";
+import { CodeBlock } from "../../components/code-block.js";
+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 { ObjectFacts } from "../../components/object-workspace.js";
+import { PairingCode } from "../../components/pairing-code.js";
+import { Progress, ProgressLabel, ProgressValue } from "../../components/progress.js";
+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 { TableCard } from "../../components/table-card.js";
+import { TableValue } from "../../components/table-value.js";
+import { UsageMeter } from "../../components/usage-meter.js";
+import { COBALTO, MAILBOXES, NOW, nothing } from "../samples.js";
+const MCP_JSON = `{
+  "mcpServers": {
+    "fatture": { "url": "https://mcp.acme.it/fatture" }
+  }
+}`;
+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 USAGE_COLUMNS = [
+    { accessorKey: "agent", header: "Agent" },
+    { accessorKey: "tokens", header: "Tokens", meta: { numeric: true } },
+    { accessorKey: "cost", header: "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" }));
+}
+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" })] }) })] }));
+}
+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" }) })),
+    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 },
+        ] })),
+    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" })] })),
+    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))) })),
+    RunTimeline: () => (_jsx(RunTimeline, { className: "max-w-lg", steps: [
+            {
+                id: "read",
+                label: "Step 01",
+                title: "Read the request",
+                progress: "done",
+                time: "07:30",
+            },
+            {
+                id: "draft",
+                label: "Step 02",
+                title: "Draft the quote",
+                progress: "current",
+                status: { label: "Waiting for you", tone: "warning" },
+            },
+            { 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: [
+                { 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" })] }) })),
+    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" }) })] })),
+    UsageMeter: () => (_jsx(UsageMeter, { className: "max-w-sm", fields: ["Tokens", "620 of 1,000"], usage: 62 })),
+};

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

@@ -0,0 +1,23 @@
+declare function EmptyStateSpecimen(): import("react").JSX.Element;
+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;
+export declare const FEEDBACK: {
+    Alert: () => import("react").JSX.Element;
+    EmptyState: typeof EmptyStateSpecimen;
+    EntryProgress: () => import("react").JSX.Element;
+    EntryStageList: () => import("react").JSX.Element;
+    HoverCard: () => import("react").JSX.Element;
+    LabelledPicture: typeof LabelledPictureSpecimen;
+    MessageNotice: () => import("react").JSX.Element;
+    NoticeBanner: () => import("react").JSX.Element;
+    PendingLabel: typeof PendingLabelSpecimen;
+    Skeleton: () => import("react").JSX.Element;
+    Toaster: typeof ToasterSpecimen;
+    Tooltip: () => import("react").JSX.Element;
+    UpdateCard: typeof UpdateCardSpecimen;
+    WaitingLine: () => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=feedback.d.ts.map

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

@@ -0,0 +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"}

package/dist/showcase/specimens/feedback.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Info, TriangleAlert, X } from "lucide-react";
+import { useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "../../components/alert.js";
+import { Button } from "../../components/button.js";
+import { EmptyState } from "../../components/empty-state.js";
+import { EntryProgress, EntryStageList } from "../../components/entry-scene.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../components/hover-card.js";
+import { MessageNotice } from "../../components/message-notice.js";
+import { NoticeBanner } from "../../components/notice-banner.js";
+import { PendingLabel } from "../../components/pending-label.js";
+import { LabelledPicture, PictureLabel } from "../../components/picture-label.js";
+import { Skeleton } from "../../components/skeleton.js";
+import { Toaster } from "../../components/sonner.js";
+import { showMessageToast } from "../../components/toast.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/tooltip.js";
+import { UpdateCard } from "../../components/update-card.js";
+import { WaitingLine } from "../../components/waiting-line.js";
+import { useEmptyArt } from "../assets.js";
+import { FAILED_READ, nothing, sampleMessage } from "../samples.js";
+function EmptyStateSpecimen() {
+    const art = useEmptyArt();
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsx(EmptyState, { action: { label: "Add mailbox", onClick: nothing }, description: "Every address your Agents read and send from lives here.", kind: "firstUse", picture: art.mail, scope: "region", title: "No mailboxes yet" }), _jsx(EmptyState, { clear: { label: "Clear search", onClick: nothing }, kind: "noResults", message: "No mailbox matches \u201Cbilling\u201D.", scope: "card" }), _jsx(EmptyState, { kind: "failed", message: FAILED_READ, scope: "card" })] }));
+}
+function LabelledPictureSpecimen() {
+    const art = useEmptyArt();
+    return (_jsx(LabelledPicture, { label: _jsx(PictureLabel, { details: "Ink and watercolour, 2026", title: "A letter that lost its address" }), children: _jsx("img", { alt: "", className: "size-64 object-contain", src: art.mail }) }));
+}
+function PendingLabelSpecimen() {
+    const [pending, setPending] = useState(false);
+    return (_jsxs("div", { className: "grid max-w-md gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { disabled: pending, onClick: () => setPending(false), variant: "outline", children: "Cancel" }), _jsx(Button, { "aria-busy": pending || undefined, disabled: pending, onClick: () => setPending(true), children: _jsx(PendingLabel, { pending: pending, pendingLabel: "Saving", children: "Save changes" }) }), pending ? (_jsx(Button, { onClick: () => setPending(false), variant: "link", children: "Reset" })) : null] }), pending ? _jsx(WaitingLine, { decorative: true }) : null] }));
+}
+function ToasterSpecimen() {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => showMessageToast(sampleMessage("Mailbox removed"), { tone: "success" }), variant: "outline", children: "Remove mailbox" }), _jsx(Toaster, {})] }));
+}
+function UpdateCardSpecimen() {
+    const [updated, setUpdated] = useState(false);
+    return (_jsx("div", { className: "max-w-xs", children: updated ? (_jsx(UpdateCard, { dismiss: { label: "Dismiss", onClick: () => setUpdated(false) }, state: "updated", title: "Nadia is up to date", version: "12.2.0" })) : (_jsx(UpdateCard, { action: { label: "Restart to update", onClick: () => setUpdated(true) }, state: "available", title: "A new Nadia is ready", version: "12.2.0" })) }));
+}
+export const FEEDBACK = {
+    Alert: () => (_jsxs("div", { className: "grid max-w-lg gap-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(Info, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Approvals are on" }), _jsx(AlertDescription, { children: "Payments over \u20AC 500 wait for you." })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(TriangleAlert, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "WhatsApp needs a new code" }), _jsx(AlertDescription, { children: "Messages wait until it is paired again." })] })] })),
+    EmptyState: EmptyStateSpecimen,
+    EntryProgress: () => (_jsx("div", { className: "max-w-sm", children: _jsx(EntryProgress, { count: "27 of 40 files", fraction: 27 / 40 }) })),
+    EntryStageList: () => (_jsx(EntryStageList, { stages: [
+            { id: "download", label: "Download Nadia", mark: "done" },
+            { id: "install", label: "Install her tools", mark: "current" },
+            { id: "sign-in", label: "Sign in", mark: "pending" },
+        ] })),
+    HoverCard: () => (_jsxs(HoverCard, { children: [_jsx(HoverCardTrigger, { render: _jsx("time", { className: "text-sm underline decoration-dotted", dateTime: "2026-10-14T07:00:00Z" }), children: "Updated 3 hours ago" }), _jsxs(HoverCardContent, { className: "grid gap-1 text-sm", children: [_jsx("span", { children: "Tuesday 14 October 2026" }), _jsx("span", { children: "09:00 Rome \u00B7 07:00 UTC" }), _jsx("span", { className: "font-mono text-muted-foreground", children: "2026-10-14T07:00:00Z" })] })] })),
+    LabelledPicture: LabelledPictureSpecimen,
+    MessageNotice: () => (_jsxs("div", { className: "grid max-w-lg gap-4", children: [_jsx(MessageNotice, { message: sampleMessage("Couldn't remove pec@acme.it", "The mailbox is still connected.", [
+                    { label: "Try again", onClick: nothing },
+                ]), placement: "action" }), _jsx(MessageNotice, { message: sampleMessage("Billing is paused", "Agents stop at the end of the cycle.", [
+                    { label: "Update payment", onClick: nothing },
+                ]), placement: "section", tone: "warning" })] })),
+    NoticeBanner: () => (_jsx(NoticeBanner, { action: _jsx(Button, { variant: "outline", children: "Open Slack settings" }), className: "max-w-lg", description: "Agents can't post to Slack until it is connected again.", liveRegion: "off", title: "Slack disconnected", tone: "warning" })),
+    PendingLabel: PendingLabelSpecimen,
+    Skeleton: () => (_jsxs("div", { "aria-busy": "true", className: "grid max-w-sm gap-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" }), _jsx(Skeleton, { className: "size-8", shape: "circle" })] })),
+    Toaster: ToasterSpecimen,
+    Tooltip: () => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { "aria-label": "Remove attachment", size: "icon", variant: "ghost" }), children: _jsx(X, { "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Remove attachment" })] })),
+    UpdateCard: UpdateCardSpecimen,
+    WaitingLine: () => (_jsxs("div", { className: "grid max-w-sm gap-2 text-sm", children: ["Connecting Telegram", _jsx(WaitingLine, { label: "Connecting Telegram" })] })),
+};