@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/showcase/specimens/feedback.js

@@ -1,27 +1,42 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Info, TriangleAlert, X } from "lucide-react";
+import { CreditCard, Info, LogOut, Mail, Search, 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 { DropdownMenu, DropdownMenuCommand, DropdownMenuContent, DropdownMenuTrigger, } from "../../components/dropdown-menu.js";
+import { HoverCard, HoverCardContent, HoverCardSummary, HoverCardTrigger, } from "../../components/hover-card.js";
+import { Kbd } from "../../components/kbd.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 { RecordTime } from "../../components/record-time.js";
+import { Skeleton, SkeletonRegion } 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";
+import { FAILED_READ, MAILBOXES, NOW, nothing, sampleMessage } from "../samples.js";
+function Captioned({ caption, children }) {
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("span", { className: "text-body-sm text-muted-foreground", children: caption }), children] }));
+}
 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" })] }));
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsx(Captioned, { caption: "First use, with a link to the documentation", children: _jsx(EmptyState, { action: { label: "Add mailbox", onClick: nothing }, description: "Every address your Agents read and send from lives here.", docs: {
+                        label: "How mailboxes work",
+                        link: _jsx("a", { href: "/docs/mailboxes" }),
+                        external: true,
+                    }, kind: "firstUse", picture: art.mail, scope: "region", title: "No mailboxes yet" }) }), _jsx(Captioned, { caption: "Nothing yet, no results and cleared, swapping inside one live region", children: _jsxs("div", { "aria-live": "polite", className: "grid gap-4", children: [_jsx(EmptyState, { kind: "nothingYet", message: "Nothing has been sent from this mailbox yet.", scope: "card" }), _jsx(EmptyState, { clear: { label: "Clear search", onClick: nothing }, kind: "noResults", message: "No mailbox matches \u201Cbilling\u201D.", scope: "card" }), _jsx(EmptyState, { kind: "cleared", message: "You're all caught up.", scope: "card" })] }) }), _jsx(Captioned, { caption: "Cleared and nothing yet as one line, in a card that lists a few items", children: _jsx("div", { className: "grid max-w-75 gap-4 rounded-sm ring-1 ring-border", children: _jsx(EmptyState, { kind: "cleared", message: "No customer waits on anyone.", scope: "line" }) }) }), _jsx(Captioned, { caption: "Denied, on a page", children: _jsx(EmptyState, { action: { label: "Request access", onClick: nothing }, description: "Billing is open to the owners of Acme. Ask Marta Rossi, the owner, to open it for you.", kind: "denied", scope: "page", title: "You can't open billing" }) }), _jsx(Captioned, { caption: "Failed, with the request ID to paste into a support thread", children: _jsx(EmptyState, { kind: "failed", message: FAILED_READ, reference: {
+                        label: "Request ID",
+                        value: "iad1::abc12-1760000000000-9f3c",
+                        copyLabel: "Copy request ID",
+                        copiedLabel: "Copied",
+                        copyFailedLabel: "Couldn't copy",
+                    }, scope: "region" }) }), _jsx(Captioned, { caption: "Failed, in a card: the answer of an ErrorCard", children: _jsx(EmptyState, { kind: "failed", message: FAILED_READ, scope: "card" }) })] }));
 }
 function LabelledPictureSpecimen() {
     const art = useEmptyArt();
@@ -29,17 +44,21 @@ function LabelledPictureSpecimen() {
 }
 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] }));
+    return (_jsxs(DropdownMenu, { onOpenChange: (open) => (open ? undefined : setPending(false)), children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline" }), children: "Account" }), _jsx(DropdownMenuContent, { align: "start", children: _jsx(DropdownMenuCommand, { closeOnClick: false, icon: _jsx(LogOut, {}), loading: pending, loadingLabel: "Signing out", onClick: () => setPending(true), children: "Sign out" }) })] }));
 }
 function ToasterSpecimen() {
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => showMessageToast(sampleMessage("Mailbox removed"), { tone: "success" }), variant: "outline", children: "Remove mailbox" }), _jsx(Toaster, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { onClick: () => showMessageToast(sampleMessage("Mailbox removed"), { tone: "success" }), variant: "outline", children: "Remove mailbox" }), _jsx(Button, { onClick: () => showMessageToast(sampleMessage("Couldn't remove pec@acme.it", "The mailbox is still connected."), { tone: "error" }), variant: "outline", children: "Remove mailbox that fails" })] }), _jsx(Toaster, { closeLabel: "Close notification", regionLabel: "Notifications" })] }));
 }
 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" })) }));
+    return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-64", 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" })) }), _jsx(UpdateCard, { action: { label: "Restart to update", onClick: nothing }, narrow: true, state: "available", title: "A new Nadia is ready", version: "12.2.0" })] }));
+}
+function SkeletonRegionSpecimen() {
+    const [busy, setBusy] = useState(true);
+    return (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsx(Button, { onClick: () => setBusy((current) => !current), size: "sm", variant: "outline", children: busy ? "Show the mailboxes" : "Show the placeholders" }), _jsx(SkeletonRegion, { busy: busy, className: "grid gap-3", children: MAILBOXES.map((mailbox) => busy ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { height: 32, shape: "circle", width: 32 }), _jsx(Skeleton, { boxHeight: 20, height: 12, width: 200 })] }, mailbox.id)) : (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Mail, { "aria-hidden": "true", className: "size-8 rounded-full bg-muted p-2" }), _jsx("span", { className: "text-body-md", children: mailbox.address })] }, mailbox.id))) })] }));
 }
 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." })] })] })),
+    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." })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(TriangleAlert, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Payment failed" }), _jsx(AlertDescription, { children: "Agents stop at the end of the billing cycle." })] })] })),
     EmptyState: EmptyStateSpecimen,
     EntryProgress: () => (_jsx("div", { className: "max-w-sm", children: _jsx(EntryProgress, { count: "27 of 40 files", fraction: 27 / 40 }) })),
     EntryStageList: () => (_jsx(EntryStageList, { stages: [
@@ -47,18 +66,23 @@ export const FEEDBACK = {
             { 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" })] })] })),
+    HoverCard: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(RecordTime, { at: "2026-10-14T07:00:00Z", now: NOW, phrase: (when) => `Updated ${when}`, timeZone: "Europe/Rome" }), _jsx(RecordTime, { at: null, mode: "clock", children: "Pending" }), _jsxs(HoverCard, { children: [_jsx(HoverCardTrigger, { render: _jsx("button", { className: "text-sm underline decoration-dotted", type: "button" }), children: "Portal" }), _jsx(HoverCardContent, { children: _jsx(HoverCardSummary, { action: { label: "Open project", href: "#" }, detail: "nadicode / portal", facts: [
+                                { label: "Plan", value: "Pro" },
+                                { label: "Region", value: "Frankfurt" },
+                                { label: "Last active", value: null },
+                            ], missingLabel: "Not reported", name: "Portal" }) })] })] })),
     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" })),
+                ]), placement: "section", tone: "warning" }), _jsx(MessageNotice, { message: sampleMessage("Orders is read-only for you", "Ask an owner of Acme to change who can write to it."), placement: "section", tone: "info" })] })),
+    NoticeBanner: () => (_jsxs("div", { className: "grid max-w-lg gap-6", children: [_jsx(Captioned, { caption: "Warning, with a label and a command", children: _jsx(NoticeBanner, { action: { label: "Open Slack settings", onClick: nothing }, description: "Agents can't post to Slack until it is connected again.", label: "Slack", liveRegion: "off", title: "Slack is disconnected", tone: "warning" }) }), _jsx(Captioned, { caption: "Destructive, with its own icon and a link", children: _jsx(NoticeBanner, { action: { label: "Update payment method", link: _jsx("a", { href: "#billing" }) }, description: "Agents stop at the end of the billing cycle.", icon: CreditCard, label: "Billing", liveRegion: "polite", title: "Your last payment failed", tone: "destructive" }) })] })),
     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" })] })),
+    Skeleton: () => (_jsxs(SkeletonRegion, { busy: true, className: "grid max-w-sm gap-3", children: [_jsx(Skeleton, { boxHeight: 20, height: 16, width: "75%" }), _jsx(Skeleton, { height: 16, width: 160 }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { height: 32, shape: "circle", width: 32 }), _jsx(Skeleton, { height: 48, shape: "squared", width: 48 })] }), _jsx(Skeleton, { height: 100, width: "100%", children: null }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { children: _jsx(Button, { children: "Save changes" }) }), _jsx(Skeleton, { show: false, children: _jsx(Button, { children: "Save changes" }) })] })] })),
+    SkeletonRegion: SkeletonRegionSpecimen,
     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" })] })),
+    Tooltip: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_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" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { "aria-label": "Search", size: "icon", variant: "outline" }), children: _jsx(Search, { "aria-hidden": "true" }) }), _jsxs(TooltipContent, { children: ["Search ", _jsx(Kbd, { children: "/" })] })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { "aria-label": "Find a mailbox", size: "icon", variant: "outline" }), children: _jsx(Mail, { "aria-hidden": "true" }) }), _jsxs(TooltipContent, { children: ["Find a mailbox ", _jsx(Kbd, { meta: true, children: "K" })] })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "outline" }), children: "Without a stem" }), _jsx(TooltipContent, { arrow: false, children: "Pinned to the button" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "outline" }), children: "Monthly limit" }), _jsx(TooltipContent, { centerText: false, children: "Limit: 400 runs a month. It resets on 1 November and unused runs do not carry over." })] })] })),
     UpdateCard: UpdateCardSpecimen,
     WaitingLine: () => (_jsxs("div", { className: "grid max-w-sm gap-2 text-sm", children: ["Connecting Telegram", _jsx(WaitingLine, { label: "Connecting Telegram" })] })),
 };

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

@@ -3,15 +3,13 @@ export declare const SPECIMENS: {
     AspectRatio: () => import("react").JSX.Element;
     BrandField: () => import("react").JSX.Element;
     Carousel: () => import("react").JSX.Element;
-    ChannelView: () => import("react").JSX.Element;
     Collapsible: () => import("react").JSX.Element;
     CompanyCard: () => import("react").JSX.Element;
     Disclosure: () => import("react").JSX.Element;
-    ExpandableBlock: () => import("react").JSX.Element;
     HiveScene: () => import("react").JSX.Element;
     NadiaPresence: () => import("react").JSX.Element;
     NumberedSteps: () => import("react").JSX.Element;
-    PluginSlotBoundary: () => import("react").JSX.Element;
+    Prose: () => import("react").JSX.Element;
     ReadingColumn: () => import("react").JSX.Element;
     ResizablePanelGroup: () => import("react").JSX.Element;
     ScrollArea: () => import("react").JSX.Element;
@@ -38,7 +36,6 @@ export declare const SPECIMENS: {
     Drawer: () => import("react").JSX.Element;
     DropdownMenu: () => import("react").JSX.Element;
     GlassControl: () => import("react").JSX.Element;
-    Menubar: () => import("react").JSX.Element;
     MenuChoiceRow: () => import("react").JSX.Element;
     Popover: () => import("react").JSX.Element;
     Sheet: () => import("react").JSX.Element;
@@ -53,12 +50,12 @@ export declare const SPECIMENS: {
     NoticeBanner: () => import("react").JSX.Element;
     PendingLabel: () => import("react").JSX.Element;
     Skeleton: () => import("react").JSX.Element;
+    SkeletonRegion: () => import("react").JSX.Element;
     Toaster: () => import("react").JSX.Element;
     Tooltip: () => import("react").JSX.Element;
     UpdateCard: () => import("react").JSX.Element;
     WaitingLine: () => import("react").JSX.Element;
     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;
@@ -68,7 +65,7 @@ export declare const SPECIMENS: {
     FileDiff: () => import("react").JSX.Element;
     Item: () => import("react").JSX.Element;
     Kbd: () => import("react").JSX.Element;
-    MemoryItem: () => import("react").JSX.Element;
+    MiddleTruncate: () => import("react").JSX.Element;
     ObjectFacts: () => import("react").JSX.Element;
     PairingCode: () => import("react").JSX.Element;
     Progress: () => import("react").JSX.Element;
@@ -76,22 +73,24 @@ export declare const SPECIMENS: {
     RecordTime: () => import("react").JSX.Element;
     RunTimeline: () => import("react").JSX.Element;
     SettingsFactsSection: () => import("react").JSX.Element;
-    StatusRow: () => import("react").JSX.Element;
+    Snippet: () => import("react").JSX.Element;
     Table: () => import("react").JSX.Element;
     TableCard: () => import("react").JSX.Element;
     TableValue: () => import("react").JSX.Element;
+    TextWithCopyButton: () => import("react").JSX.Element;
     UsageMeter: () => import("react").JSX.Element;
     AgentListRow: () => import("react").JSX.Element;
     Breadcrumb: () => import("react").JSX.Element;
     CommandDialog: () => import("react").JSX.Element;
-    DashboardShell: () => import("react").JSX.Element;
     DesktopAppShell: () => import("react").JSX.Element;
     Footer: () => import("react").JSX.Element;
-    NavigationMenu: () => import("react").JSX.Element;
-    Pagination: () => import("react").JSX.Element;
     PortalSidebarFrame: () => import("react").JSX.Element;
     ScopeSwitcher: () => import("react").JSX.Element;
     Sidebar: () => import("react").JSX.Element;
+    SidebarBrand: () => import("react").JSX.Element;
+    SidebarFind: () => import("react").JSX.Element;
+    SidebarFrame: () => import("react").JSX.Element;
+    SidebarMenuChevron: () => import("react").JSX.Element;
     SidebarSections: () => import("react").JSX.Element;
     Tabs: () => import("react").JSX.Element;
     TabsNav: () => import("react").JSX.Element;
@@ -103,41 +102,50 @@ export declare const SPECIMENS: {
     Avatar: () => import("react").JSX.Element;
     Badge: () => import("react").JSX.Element;
     BrandWordmark: () => import("react").JSX.Element;
+    CheckCounts: () => import("react").JSX.Element;
     FileTypeIcon: () => import("react").JSX.Element;
+    Gauge: () => import("react").JSX.Element;
     IdentityMark: () => import("react").JSX.Element;
-    MetaLabel: () => import("react").JSX.Element;
     ModelIdentity: () => import("react").JSX.Element;
     ModelMark: () => import("react").JSX.Element;
     PlatformMark: () => import("react").JSX.Element;
+    ProgressChecklist: () => import("react").JSX.Element;
     RecordIdentity: () => import("react").JSX.Element;
     StatusBadge: () => import("react").JSX.Element;
     StatusDot: () => import("react").JSX.Element;
     Tag: () => import("react").JSX.Element;
     Checkbox: () => import("react").JSX.Element;
+    ChoiceboxGroup: () => import("react").JSX.Element;
     CollectionSort: () => import("react").JSX.Element;
     Combobox: () => import("react").JSX.Element;
     ModelSelect: () => import("react").JSX.Element;
+    MultiSelect: () => import("react").JSX.Element;
     RadioGroup: () => import("react").JSX.Element;
     SegmentedChoice: () => import("react").JSX.Element;
+    SegmentedControl: () => import("react").JSX.Element;
     Select: () => import("react").JSX.Element;
     Switch: () => import("react").JSX.Element;
+    ThemeModeSegments: () => import("react").JSX.Element;
     ThemeModeSwitcher: () => import("react").JSX.Element;
     Toggle: () => import("react").JSX.Element;
     ToggleGroup: () => import("react").JSX.Element;
     Calendar: () => import("react").JSX.Element;
+    ClearableInput: () => import("react").JSX.Element;
     CollectionSearch: () => import("react").JSX.Element;
     Field: () => import("react").JSX.Element;
-    Form: () => import("react").JSX.Element;
     Input: () => import("react").JSX.Element;
     InputGroup: () => import("react").JSX.Element;
     InputOTP: () => import("react").JSX.Element;
     Label: () => import("react").JSX.Element;
     NativeSelect: () => import("react").JSX.Element;
+    SettingsRows: () => import("react").JSX.Element;
     SettingsField: () => import("react").JSX.Element;
     Slider: () => import("react").JSX.Element;
     Textarea: () => import("react").JSX.Element;
     Button: () => import("react").JSX.Element;
+    ButtonLink: () => import("react").JSX.Element;
     ButtonGroup: () => import("react").JSX.Element;
+    LoadMoreButton: () => import("react").JSX.Element;
     CopyButton: () => import("react").JSX.Element;
     PageActions: () => import("react").JSX.Element;
     ActivityFeed: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYiB,CAAC"}

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

@@ -1,19 +1,21 @@
 declare function CalendarSpecimen(): import("react").JSX.Element;
 declare function CollectionSearchSpecimen(): import("react").JSX.Element;
-declare function FormSpecimen(): import("react").JSX.Element;
+declare function ClearableInputSpecimen(): import("react").JSX.Element;
 declare function InputGroupSpecimen(): import("react").JSX.Element;
 declare function InputOTPSpecimen(): import("react").JSX.Element;
 declare function SliderSpecimen(): import("react").JSX.Element;
+declare function SettingsRowsSpecimen(): import("react").JSX.Element;
 export declare const INPUTS: {
     Calendar: typeof CalendarSpecimen;
+    ClearableInput: typeof ClearableInputSpecimen;
     CollectionSearch: typeof CollectionSearchSpecimen;
     Field: () => import("react").JSX.Element;
-    Form: typeof FormSpecimen;
     Input: () => import("react").JSX.Element;
     InputGroup: typeof InputGroupSpecimen;
     InputOTP: typeof InputOTPSpecimen;
     Label: () => import("react").JSX.Element;
     NativeSelect: () => import("react").JSX.Element;
+    SettingsRows: typeof SettingsRowsSpecimen;
     SettingsField: () => import("react").JSX.Element;
     Slider: typeof SliderSpecimen;
     Textarea: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/inputs.tsx"],"names":[],"mappings":"AAsCA,iBAAS,gBAAgB,gCAaxB;AAED,iBAAS,wBAAwB,gCAOhC;AAED,iBAAS,YAAY,gCA4BpB;AAED,iBAAS,kBAAkB,gCA2B1B;AAED,iBAAS,gBAAgB,gCA2BxB;AAED,iBAAS,cAAc,gCAoBtB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAuEQ,CAAC"}
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/inputs.tsx"],"names":[],"mappings":"AA6BA,iBAAS,gBAAgB,gCAexB;AAED,iBAAS,wBAAwB,gCAqBhC;AAED,iBAAS,sBAAsB,gCAiC9B;AAED,iBAAS,kBAAkB,gCAqC1B;AAED,iBAAS,gBAAgB,gCA2BxB;AAED,iBAAS,cAAc,gCAuCtB;AAqBD,iBAAS,oBAAoB,gCAsD5B;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAoHQ,CAAC"}

package/dist/showcase/specimens/inputs.js

@@ -1,60 +1,103 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search, X } from "lucide-react";
+import { AtSign, Clock, Globe, Search } from "lucide-react";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { Button } from "../../components/button.js";
 import { Calendar } from "../../components/calendar.js";
+import { ClearableInput } from "../../components/clearable-input.js";
 import { CollectionSearch } from "../../components/collection-search.js";
 import { Field, FieldDescription, FieldError, FieldLabel } from "../../components/field.js";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "../../components/form.js";
 import { Input } from "../../components/input.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from "../../components/input-group.js";
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../components/input-otp.js";
 import { Label } from "../../components/label.js";
 import { NativeSelect, NativeSelectOption } from "../../components/native-select.js";
-import { SettingsField } from "../../components/settings-section.js";
+import { SettingsField, SettingsRows, SettingsSection } from "../../components/settings-section.js";
 import { Slider } from "../../components/slider.js";
 import { Switch } from "../../components/switch.js";
 import { Textarea } from "../../components/textarea.js";
+import { nothing } from "../samples.js";
 function CalendarSpecimen() {
     const [range, setRange] = useState({
         from: new Date(2026, 9, 7),
         to: new Date(2026, 9, 13),
     });
-    return (_jsx(Calendar, { defaultMonth: new Date(2026, 9, 1), mode: "range", onSelect: setRange, selected: range }));
+    return (_jsx(Calendar, { defaultMonth: new Date(2026, 9, 1), maxValue: new Date(2026, 9, 16), minValue: new Date(2026, 9, 5), mode: "range", onSelect: setRange, selected: range }));
 }
 function CollectionSearchSpecimen() {
     const [value, setValue] = useState("");
-    return (_jsx("div", { className: "max-w-sm", children: _jsx(CollectionSearch, { label: "Find a skill", onValueChange: setValue, value: value }) }));
+    const [query, setQuery] = useState("preventivi");
+    return (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsx(CollectionSearch, { clearLabel: "Clear search", label: "Find a skill", onValueChange: setValue, value: value }), _jsx(CollectionSearch, { clearLabel: "Clear search", label: "Find a skill", loading: true, onValueChange: setQuery, shortcut: { meta: true, children: "K" }, value: query })] }));
 }
-function FormSpecimen() {
-    const form = useForm({ defaultValues: { name: "" } });
-    return (_jsx(Form, { ...form, children: _jsxs("form", { className: "grid max-w-sm gap-4", method: "post", onSubmit: form.handleSubmit(() => undefined), children: [_jsx(FormField, { control: form.control, name: "name", rules: { required: "Enter the company's name, as it appears on invoices." }, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Company name" }), _jsx(FormControl, { render: _jsx(Input, { placeholder: "Bizeta Arredamenti", ...field }) }), _jsx(FormDescription, { children: "Shown on every invoice your Agents send." }), _jsx(FormMessage, {})] })) }), _jsx(Button, { className: "justify-self-start", type: "submit", children: "Save company" })] }) }));
+function ClearableInputSpecimen() {
+    const [reference, setReference] = useState("INV-2026-0412");
+    const [filter, setFilter] = useState("");
+    const [mailboxFilter, setMailboxFilter] = useState("pec");
+    return (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsx(ClearableInput, { "aria-label": "Invoice reference", clearLabel: "Clear reference", onValueChange: setReference, value: reference }), _jsx(ClearableInput, { "aria-label": "Filter Agents", clearLabel: "Clear filter", onValueChange: setFilter, placeholder: "Filter Agents", prefix: _jsx(AtSign, { "aria-hidden": "true" }), shortcut: { meta: true, children: "K" }, size: "lg", value: filter }), _jsx(ClearableInput, { "aria-label": "Filter mailboxes", clearLabel: "Clear filter", loading: true, onValueChange: setMailboxFilter, placeholder: "Filter mailboxes", size: "sm", value: mailboxFilter })] }));
 }
 function InputGroupSpecimen() {
     const [value, setValue] = useState("acme.it");
-    return (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { "aria-label": "Website", onChange: (event) => setValue(event.target.value), value: value }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { "aria-label": "Clear website", onClick: () => setValue(""), size: "icon-xs", children: _jsx(X, { "aria-hidden": "true" }) }) })] }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(Search, { "aria-hidden": "true" }) }), _jsx(InputGroupInput, { "aria-label": "Search the hub", placeholder: "Search the hub", type: "search" })] })] }));
+    return (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { "aria-label": "Website", onChange: (event) => setValue(event.target.value), value: value }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { onClick: nothing, size: "sm", variant: "ghost", children: "Check" }) })] }), _jsxs(InputGroup, { size: "lg", children: [_jsx(InputGroupAddon, { children: _jsx(Globe, { "aria-hidden": "true" }) }), _jsx(InputGroupInput, { "aria-label": "Domain", defaultValue: "acme.it" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { "aria-label": "Search domain", onClick: nothing, size: "icon", variant: "ghost", children: _jsx(Search, { "aria-hidden": "true" }) }) })] })] }));
 }
 function InputOTPSpecimen() {
     const [code, setCode] = useState("");
     return (_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "showcase-otp", children: "Code from your authenticator app" }), _jsxs(InputOTP, { autoComplete: "one-time-code", id: "showcase-otp", inputMode: "numeric", maxLength: 6, onChange: setCode, value: code, children: [_jsxs(InputOTPGroup, { children: [_jsx(InputOTPSlot, { index: 0 }), _jsx(InputOTPSlot, { index: 1 }), _jsx(InputOTPSlot, { index: 2 })] }), _jsx(InputOTPSeparator, {}), _jsxs(InputOTPGroup, { children: [_jsx(InputOTPSlot, { index: 3 }), _jsx(InputOTPSlot, { index: 4 }), _jsx(InputOTPSlot, { index: 5 })] })] })] }));
 }
 function SliderSpecimen() {
-    const [limit, setLimit] = useState(400);
-    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [_jsx(Label, { id: "showcase-limit", children: "Monthly limit" }), _jsxs("span", { className: "text-sm tabular-nums", children: ["\u20AC ", limit] })] }), _jsx(Slider, { "aria-labelledby": "showcase-limit", format: { style: "currency", currency: "EUR", maximumFractionDigits: 0 }, max: 1000, min: 0, onValueChange: (next) => setLimit(Array.isArray(next) ? (next[0] ?? 0) : next), step: 50, value: limit }), _jsx("p", { className: "text-sm text-muted-foreground", children: "From \u20AC0 to \u20AC1,000, in steps of \u20AC50." })] }));
+    return (_jsxs("div", { className: "grid max-w-sm gap-6", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Slider, { defaultValue: [400], format: { style: "currency", currency: "EUR", maximumFractionDigits: 0 }, label: "Monthly limit", max: 1000, min: 0, showEndInput: true, step: 50 }), _jsx("p", { className: "text-sm text-muted-foreground", children: "From \u20AC0 to \u20AC1,000, in steps of \u20AC50." })] }), _jsx(Slider, { defaultValue: [200, 600], format: { style: "currency", currency: "EUR", maximumFractionDigits: 0 }, label: "Invoice amount", max: 1000, min: 0, showEndInput: true, showStartInput: true, step: 50 }), _jsx(Slider, { defaultValue: [200, 600], disabled: true, format: { style: "currency", currency: "EUR", maximumFractionDigits: 0 }, label: "Invoice amount, locked", max: 1000, min: 0, showEndInput: true, showStartInput: true, step: 50 }), _jsx(CommittedSliderSpecimen, {})] }));
+}
+function CommittedSliderSpecimen() {
+    const [committed, setCommitted] = useState(50);
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx(Slider, { defaultValue: [50], label: "Volume", max: 100, min: 0, onValueCommitted: ([next]) => setCommitted(next), step: 1 }), _jsxs("p", { className: "text-sm text-muted-foreground tabular-nums", children: ["Last committed: ", committed] })] }));
+}
+const STATE_LABELS = { on: "Enabled", off: "Disabled" };
+function SettingsRowsSpecimen() {
+    const [approvals, setApprovals] = useState(true);
+    const [reminders, setReminders] = useState(false);
+    const [zone, setZone] = useState("Europe/Rome");
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsx(SettingsSection, { description: "Choose which events ask for your attention.", title: "Notifications", children: _jsx(SettingsRows, { kind: "switch", rows: [
+                        {
+                            id: "showcase-rows-approvals",
+                            label: "Approvals",
+                            info: { label: "About approvals", text: "An Agent waits for you before it sends." },
+                            checked: approvals,
+                            onCheckedChange: setApprovals,
+                            name: "approvals",
+                        },
+                        {
+                            id: "showcase-rows-reminders",
+                            label: "Reminders",
+                            info: { label: "About reminders", text: "A nudge when an invoice is overdue." },
+                            checked: reminders,
+                            onCheckedChange: setReminders,
+                            name: "reminders",
+                        },
+                    ], stateLabels: STATE_LABELS }) }), _jsx(SettingsSection, { description: "Dates and times follow this choice.", title: "Region", children: _jsx(SettingsRows, { kind: "select", rows: [
+                        {
+                            id: "showcase-rows-zone",
+                            label: "Time zone",
+                            info: { label: "About time zone", text: "Reports are cut at midnight here." },
+                            value: zone,
+                            onValueChange: setZone,
+                            name: "zone",
+                            options: [
+                                { value: "Europe/London", label: "London" },
+                                { value: "Europe/Rome", label: "Rome" },
+                            ],
+                        },
+                    ] }) })] }));
 }
 export const INPUTS = {
     Calendar: CalendarSpecimen,
+    ClearableInput: ClearableInputSpecimen,
     CollectionSearch: CollectionSearchSpecimen,
-    Field: () => (_jsxs("div", { className: "grid max-w-sm gap-6", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "showcase-email", children: "Billing email" }), _jsx(FieldDescription, { children: "Invoices and receipts go here." }), _jsx(Input, { id: "showcase-email", placeholder: "amministrazione@acme.it", type: "email" })] }), _jsxs(Field, { "data-invalid": "true", children: [_jsx(FieldLabel, { htmlFor: "showcase-email-wrong", children: "Billing email" }), _jsx(Input, { "aria-describedby": "showcase-email-error", "aria-invalid": "true", defaultValue: "amministrazione", id: "showcase-email-wrong", type: "email" }), _jsx(FieldError, { id: "showcase-email-error", children: "Enter a full address, like name@company.it." })] })] })),
-    Form: FormSpecimen,
-    Input: () => (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-company", children: "Company name" }), _jsx(Input, { autoComplete: "organization", id: "showcase-company", placeholder: "Bizeta Arredamenti" })] })),
+    Field: () => (_jsxs("div", { className: "grid max-w-sm gap-6", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "showcase-email", id: "showcase-email-label", children: "Billing email" }), _jsx(FieldDescription, { children: "Invoices and receipts go here." }), _jsx(Input, { "aria-labelledby": "showcase-email-label", id: "showcase-email", placeholder: "amministrazione@acme.it", type: "email" })] }), _jsxs(Field, { "data-invalid": "true", children: [_jsx(FieldLabel, { htmlFor: "showcase-email-wrong", id: "showcase-email-wrong-label", children: "Billing email" }), _jsx(Input, { "aria-describedby": "showcase-email-error", "aria-invalid": "true", "aria-labelledby": "showcase-email-wrong-label", defaultValue: "amministrazione", id: "showcase-email-wrong", type: "email" }), _jsx(FieldError, { id: "showcase-email-error", children: "Enter a full address, like name@company.it." })] })] })),
+    Input: () => (_jsxs("div", { className: "grid max-w-sm gap-4", children: [_jsx(Input, { autoComplete: "organization", id: "showcase-company", label: "Company name", placeholder: "Bizeta Arredamenti" }), _jsx(Input, { "aria-label": "Website, small", defaultValue: "acme", prefix: "https://", size: "sm", suffix: ".com" }), _jsx(Input, { "aria-label": "Website", defaultValue: "acme", prefix: "https://", suffix: ".com" }), _jsx(Input, { error: "Enter a full address, like name@company.it.", id: "showcase-email-error", label: "Billing email", size: "lg", type: "email", defaultValue: "amministrazione", suffix: _jsx(AtSign, { "aria-hidden": "true" }) })] })),
     InputGroup: InputGroupSpecimen,
     InputOTP: InputOTPSpecimen,
     Label: () => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "showcase-approvals" }), _jsx(Label, { htmlFor: "showcase-approvals", children: "Approvals" })] })),
-    NativeSelect: () => (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-zone", children: "Time zone" }), _jsxs(NativeSelect, { defaultValue: "Europe/Rome", id: "showcase-zone", children: [_jsx(NativeSelectOption, { value: "Europe/London", children: "London" }), _jsx(NativeSelectOption, { value: "Europe/Rome", children: "Rome" }), _jsx(NativeSelectOption, { value: "America/New_York", children: "New York" })] })] })),
-    SettingsField: () => (_jsx("div", { className: "max-w-md", children: _jsx(SettingsField, { description: "The name your Customers read on every message.", id: "showcase-sender", label: "Sender name", children: ({ controlProps }) => _jsx(Input, { ...controlProps, defaultValue: "Acme Quotes" }) }) })),
+    NativeSelect: () => (_jsxs("div", { className: "grid max-w-sm gap-4", children: [_jsxs(NativeSelect, { defaultValue: "Europe/Rome", id: "showcase-zone", label: "Time zone", children: [_jsx(NativeSelectOption, { value: "Europe/London", children: "London" }), _jsx(NativeSelectOption, { value: "Europe/Rome", children: "Rome" }), _jsx(NativeSelectOption, { value: "America/New_York", children: "New York" }), _jsx(NativeSelectOption, { value: "Asia/Tokyo", children: "Tokyo" })] }), _jsxs(NativeSelect, { "aria-label": "Time zone, large", defaultValue: "Europe/Rome", prefix: _jsx(Clock, { "aria-hidden": "true" }), size: "lg", children: [_jsx(NativeSelectOption, { value: "Europe/London", children: "London" }), _jsx(NativeSelectOption, { value: "Europe/Rome", children: "Rome" }), _jsx(NativeSelectOption, { value: "America/New_York", children: "New York" }), _jsx(NativeSelectOption, { value: "Asia/Tokyo", children: "Tokyo" })] })] })),
+    SettingsRows: SettingsRowsSpecimen,
+    SettingsField: () => (_jsx("div", { className: "max-w-md", children: _jsx(SettingsField, { id: "showcase-sender", label: "Sender name", children: ({ controlProps }) => _jsx(Input, { ...controlProps, defaultValue: "Acme Quotes" }) }) })),
     Slider: SliderSpecimen,
-    Textarea: () => (_jsxs("div", { className: "grid max-w-md gap-2", children: [_jsx(Label, { htmlFor: "showcase-instructions", children: "Instructions" }), _jsx(Textarea, { id: "showcase-instructions", placeholder: "Reply in Italian, and copy the sales team on every quote." })] })),
+    Textarea: () => (_jsxs("div", { className: "grid max-w-md gap-4", children: [_jsx(Textarea, { id: "showcase-instructions", label: "Instructions", placeholder: "Reply in Italian, and copy the sales team on every quote." }), _jsx(Textarea, { error: "Add at least one line the Agent can follow.", id: "showcase-notes", label: "Handover notes", size: "lg" })] })),
 };

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

@@ -10,7 +10,6 @@ export declare const MENUS: {
     Drawer: () => import("react").JSX.Element;
     DropdownMenu: () => import("react").JSX.Element;
     GlassControl: () => import("react").JSX.Element;
-    Menubar: () => import("react").JSX.Element;
     MenuChoiceRow: typeof MenuRowsSpecimen;
     Popover: () => import("react").JSX.Element;
     Sheet: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAuFA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCAoBxB;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;CA0IS,CAAC"}
+{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAkHA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCA0BxB;AAqDD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CA+MS,CAAC"}

package/dist/showcase/specimens/menus.js

@@ -1,25 +1,48 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Copy, Pencil, Settings2 } from "lucide-react";
+import { ArrowRightLeft, ChevronDown, Copy, Pencil, Settings2, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { AccountMenu } from "../../components/account-menu.js";
 import { ActionContextMenu, ActionMenu } from "../../components/action-menu.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../components/alert-dialog.js";
 import { Button } from "../../components/button.js";
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from "../../components/context-menu.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../../components/dialog.js";
-import { Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from "../../components/drawer.js";
-import { DropdownMenu, DropdownMenuCommand, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuTrigger, } from "../../components/dropdown-menu.js";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLink, ContextMenuTrigger, } from "../../components/context-menu.js";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../../components/dialog.js";
+import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "../../components/drawer.js";
+import { DropdownMenu, DropdownMenuCommand, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuLink, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../components/dropdown-menu.js";
 import { GlassControl } from "../../components/glass-control.js";
 import { Input } from "../../components/input.js";
-import { Label } from "../../components/label.js";
-import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger, } from "../../components/menubar.js";
+import { Kbd } from "../../components/kbd.js";
 import { MenuChoiceRow } from "../../components/menu-choice-row.js";
 import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "../../components/popover.js";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from "../../components/sheet.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "../../components/sheet.js";
 import { ThemeModeMenu } from "../../components/theme-mode-switcher.js";
 import { nothing, RECORD_COMMANDS } from "../samples.js";
 const THEME_LABELS = { light: "Light", dark: "Dark", system: "System" };
+const REGIONS = [
+    { value: "fra1", label: "Frankfurt" },
+    { value: "mxp1", label: "Milan" },
+    { value: "cdg1", label: "Paris" },
+];
+const LOCKED_RECORD_COMMANDS = [
+    { label: "Rename mailbox", icon: _jsx(Pencil, {}), onClick: nothing },
+    {
+        label: "Transfer mailbox",
+        icon: _jsx(ArrowRightLeft, {}),
+        locked: true,
+        reason: "Only an owner can transfer a mailbox",
+        onClick: nothing,
+    },
+    {
+        label: "Remove mailbox",
+        icon: _jsx(Trash2, {}),
+        destructive: true,
+        locked: true,
+        reason: "Only an owner can remove a mailbox",
+        onClick: nothing,
+    },
+];
 function AccountMenuSpecimen() {
     const [theme, setTheme] = useState("system");
     const [language, setLanguage] = useState("en");
@@ -31,7 +54,7 @@ function AccountMenuSpecimen() {
                     { value: "it", label: "Italiano", content: "IT" },
                 ],
                 value: language,
-            }, settings: { label: "Settings", onClick: nothing }, side: "bottom", signOut: {
+            }, settings: { label: "Account settings", onClick: nothing }, side: "bottom", signOut: {
                 label: "Sign out",
                 pendingLabel: "Signing out",
                 pending: false,
@@ -41,24 +64,31 @@ function AccountMenuSpecimen() {
 function MenuRowsSpecimen() {
     const [theme, setTheme] = useState("system");
     const [density, setDensity] = useState("comfortable");
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", children: "Preferences" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsx(ThemeModeMenu, { label: "Theme", labels: THEME_LABELS, onValueChange: setTheme, value: theme }), _jsx(MenuChoiceRow, { label: "Density", onValueChange: setDensity, options: [
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { suffix: _jsx(ChevronDown, {}), variant: "outline", children: "Preferences" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsx(ThemeModeMenu, { label: "Theme", labels: THEME_LABELS, onValueChange: setTheme, value: theme }), _jsx(MenuChoiceRow, { label: "Density", onValueChange: setDensity, options: [
                             { value: "comfortable", label: "Comfortable", content: "Aa" },
                             { value: "compact", label: "Compact", content: "aa" },
                         ], value: density })] })] }));
 }
+function CreateDatabaseDialog() {
+    const [region, setRegion] = useState("fra1");
+    const regionLabel = REGIONS.find((option) => option.value === region)?.label;
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Create database" }) }), _jsxs(DialogContent, { closeLabel: "Close", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Create database" }), _jsx(DialogDescription, { children: "The region cannot be changed once it exists." })] }), _jsx(DialogBody, { children: _jsx("div", { className: "grid gap-2", children: _jsxs(Select, { onValueChange: (next) => setRegion(next ?? "fra1"), value: region, children: [_jsx(SelectTrigger, { id: "showcase-database-region", label: "Region", children: _jsx(SelectValue, { children: regionLabel }) }), _jsx(SelectContent, { children: REGIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { render: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { children: "Create database" })] })] })] }));
+}
+function RossiOtticaSheet() {
+    return (_jsxs(SheetContent, { closeLabel: "Close", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Rossi Ottica" }), _jsx(SheetDescription, { children: "Partner since March 2026, 4 customers." })] }), _jsxs(SheetFooter, { children: [_jsx(SheetClose, { render: _jsx(Button, { variant: "outline", children: "Close" }) }), _jsx(Button, { children: "Open Rossi Ottica" })] })] }));
+}
 export const MENUS = {
     AccountMenu: AccountMenuSpecimen,
     ActionContextMenu: () => (_jsx(ActionContextMenu, { commands: RECORD_COMMANDS, label: "More for pec@acme.it", record: "pec@acme.it", children: _jsx("div", { className: "max-w-sm rounded-md border border-dashed border-border p-6 text-sm text-muted-foreground", children: "Right-click pec@acme.it" }) })),
-    ActionMenu: () => (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: ["pec@acme.it", _jsx(ActionMenu, { commands: RECORD_COMMANDS, label: "More for pec@acme.it", record: "pec@acme.it" })] })),
+    ActionMenu: () => (_jsxs("div", { className: "grid gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: ["pec@acme.it", _jsx(ActionMenu, { commands: RECORD_COMMANDS, label: "More for pec@acme.it", record: "pec@acme.it" })] }), _jsxs("div", { className: "flex items-center gap-2", children: ["fatture@acme.it", _jsx(ActionMenu, { commands: LOCKED_RECORD_COMMANDS, label: "More for fatture@acme.it", record: "fatture@acme.it" })] })] })),
     AlertDialog: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Remove mailbox" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Remove pec@acme.it" }), _jsx(AlertDialogDescription, { children: "Agents stop reading and sending from this address." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Remove mailbox" })] })] })] })),
-    ContextMenu: () => (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { className: "block max-w-sm rounded-md border border-dashed border-border p-6 text-sm text-muted-foreground", children: "Right-click the canvas" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { children: "Paste" }), _jsx(ContextMenuItem, { children: "Select all" })] })] })),
-    Dialog: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Add MCP server" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add MCP server" }), _jsx(DialogDescription, { children: "Agents can call its tools once it is added." })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "showcase-mcp-url", children: "Address" }), _jsx(Input, { id: "showcase-mcp-url", placeholder: "https://mcp.acme.it", type: "url" })] }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { render: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { children: "Add server" })] })] })] })),
-    Drawer: () => (_jsxs(Drawer, { children: [_jsx(DrawerTrigger, { render: _jsx(Button, { variant: "outline", children: "Connect Telegram" }) }), _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Connect Telegram" }), _jsx(DrawerDescription, { children: "Step 1 of 2: open the bot on your phone." })] }), _jsx(DrawerBody, { className: "text-sm text-muted-foreground", children: "Scan the code with Telegram, then come back here." })] })] })),
-    DropdownMenu: () => (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", children: "Actions" }) }), _jsx(DropdownMenuContent, { align: "start", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "pec@acme.it" }), _jsx(DropdownMenuCommand, { icon: _jsx(Pencil, {}), children: "Rename mailbox" }), _jsx(DropdownMenuCommand, { disabled: true, icon: _jsx(Copy, {}), reason: "Only an owner can copy it", children: "Copy password" })] }) })] })),
+    ContextMenu: () => (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { className: "block max-w-sm rounded-md border border-dashed border-border p-6 text-sm text-muted-foreground", children: "Right-click the canvas" }), _jsxs(ContextMenuContent, { "aria-label": "Canvas", children: [_jsx(ContextMenuItem, { children: "Paste" }), _jsx(ContextMenuItem, { children: "Select all" }), _jsx(ContextMenuLink, { href: "#canvas-guide", children: "Open canvas guide" })] })] })),
+    Dialog: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Add MCP server" }) }), _jsxs(DialogContent, { closeLabel: "Close", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add MCP server" }), _jsx(DialogDescription, { children: "Agents can call its tools once it is added." })] }), _jsx(DialogBody, { children: _jsx(Input, { id: "showcase-mcp-url", label: "Address", placeholder: "https://mcp.acme.it", type: "url" }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { render: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { children: "Add server" })] })] })] }), _jsx(CreateDatabaseDialog, {}), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", children: "Connect mailbox" }) }), _jsxs(DialogContent, { closeLabel: "Close", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "pec@acme.it is connected" }), _jsx(DialogDescription, { children: "Agents can read and send from this address." })] }), _jsx(DialogFooter, { children: _jsx(DialogClose, { render: _jsx(Button, { children: "Done" }) }) })] })] })] })),
+    Drawer: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs(Drawer, { height: 320, children: [_jsx(DrawerTrigger, { render: _jsx(Button, { variant: "outline", children: "Connect Telegram" }) }), _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Connect Telegram" }), _jsx(DrawerDescription, { children: "Step 1 of 2: open the bot on your phone." })] }), _jsx(DrawerBody, { className: "text-sm text-muted-foreground", children: "Scan the code with Telegram, then come back here." }), _jsxs(DrawerFooter, { children: [_jsx(Button, { children: "Continue" }), _jsx(DrawerClose, { render: _jsx(Button, { variant: "outline", children: "Cancel" }) })] })] })] }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Phone only: it rises from the bottom edge." })] })),
+    DropdownMenu: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { suffix: _jsx(ChevronDown, {}), variant: "outline", children: "Actions" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "pec@acme.it" }), _jsx(DropdownMenuCommand, { icon: _jsx(Pencil, {}), children: "Rename mailbox" }), _jsx(DropdownMenuCommand, { icon: _jsx(Copy, {}), suffix: _jsx(Kbd, { meta: true, size: "sm", children: "C" }), children: "Copy address" }), _jsx(DropdownMenuCommand, { disabledReason: "Connect the mailbox first", icon: _jsx(Copy, {}), children: "Copy password" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuCommand, { icon: _jsx(Trash2, {}), variant: "destructive", children: "Remove mailbox" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { suffix: _jsx(ChevronDown, {}), variant: "outline", children: "Manage" }) }), _jsx(DropdownMenuContent, { align: "start", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Rossi Ottica" }), _jsx(DropdownMenuLink, { href: "#billing", children: "Open billing" }), _jsx(DropdownMenuCommand, { icon: _jsx(ArrowRightLeft, {}), locked: true, reason: "Only an owner can transfer a mailbox", children: "Transfer mailbox" })] }) })] })] })),
     GlassControl: () => (_jsxs(GlassControl, { className: "flex w-fit items-center gap-2 p-2", children: [_jsx(Button, { variant: "ghost", children: "Day" }), _jsx(Button, { variant: "ghost", children: "Week" }), _jsx(Button, { variant: "ghost", children: "Month" })] })),
-    Menubar: () => (_jsxs(Menubar, { children: [_jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsx(MenubarItem, { children: "New chat" }), _jsx(MenubarItem, { children: "Export chat" })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Edit" }), _jsx(MenubarContent, { children: _jsx(MenubarItem, { children: "Copy message" }) })] })] })),
     MenuChoiceRow: MenuRowsSpecimen,
     Popover: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Filter" }) }), _jsx(PopoverContent, { align: "start", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Filter skills" }), _jsx(PopoverDescription, { children: "Show the skills every Agent has." })] }) })] })),
-    Sheet: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", children: "Inspect Rossi Ottica" }) }), _jsx(SheetContent, { children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Rossi Ottica" }), _jsx(SheetDescription, { children: "Partner since March 2026, 4 customers." })] }) })] })),
+    Sheet: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", children: "Inspect Rossi Ottica" }) }), _jsx(RossiOtticaSheet, {})] }), _jsxs(Sheet, { modal: true, children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", children: "Inspect Rossi Ottica, page dimmed" }) }), _jsx(RossiOtticaSheet, {})] })] })),
     ThemeModeMenu: MenuRowsSpecimen,
 };