@nadicodeai/ui 12.1.165 → 12.1.166

package/dist/showcase/specimens/inputs.js

@@ -2,10 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AtSign, Clock, Globe, Search } from "lucide-react";
 import { useState } from "react";
+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 } 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";
@@ -26,13 +28,13 @@ function CalendarSpecimen() {
 function CollectionSearchSpecimen() {
     const [value, setValue] = useState("");
     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 })] }));
+    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, keyName: "K" }, value: query })] }));
 }
 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 })] }));
+    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, keyName: "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");
@@ -91,6 +93,7 @@ export const INPUTS = {
     ClearableInput: ClearableInputSpecimen,
     CollectionSearch: CollectionSearchSpecimen,
     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." })] })] })),
+    Form: () => (_jsxs(Form, { className: "grid max-w-sm gap-4", onSubmit: (event) => event.preventDefault(), children: [_jsx(Input, { autoComplete: "email", id: "showcase-form-email", label: "Billing email", name: "email", type: "email" }), _jsx(Button, { className: "justify-self-start", size: "sm", type: "submit", children: "Save billing email" })] })),
     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,

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

@@ -13,6 +13,7 @@ export declare const MENUS: {
     MenuChoiceRow: typeof MenuRowsSpecimen;
     Popover: () => import("react").JSX.Element;
     Sheet: () => import("react").JSX.Element;
+    SiteMenu: () => import("react").JSX.Element;
     ThemeModeMenu: typeof MenuRowsSpecimen;
 };
 export {};

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":"AAmHA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCA0BxB;AAqDD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAwNS,CAAC"}
+{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/menus.tsx"],"names":[],"mappings":"AAoHA,iBAAS,mBAAmB,gCA8B3B;AAED,iBAAS,gBAAgB,gCA0BxB;AAqDD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;CA+NS,CAAC"}

package/dist/showcase/specimens/menus.js

@@ -18,6 +18,7 @@ import { MenuChoiceRow } from "../../components/menu-choice-row.js";
 import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "../../components/popover.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 { SiteMenu } from "../../components/site-menu.js";
 import { ThemeModeMenu } from "../../components/theme-mode-switcher.js";
 import { COBALTO, nothing, RECORD_COMMANDS, VERDE } from "../samples.js";
 const THEME_LABELS = { light: "Light", dark: "Dark", system: "System" };
@@ -85,11 +86,15 @@ export const MENUS = {
     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, { "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" })] }) })] })] })),
+    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, { children: _jsx("p", { 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", keyName: "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("div", { className: "relative isolate grid min-h-40 place-items-center overflow-hidden rounded-md p-6", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 })] }), _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" })] })] })),
     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("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, {})] })] })),
+    SiteMenu: () => (_jsx(SiteMenu, { invitation: { href: "#invitation", label: "Book a call" }, label: "Menu", links: [
+            { href: "#nadia", label: "Nadia" },
+            { href: "#pricing", label: "Pricing" },
+        ], signInHref: "#sign-in", signInLabel: "Sign in" })),
     ThemeModeMenu: MenuRowsSpecimen,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/navigation.tsx"],"names":[],"mappings":"AAoEA,iBAAS,qBAAqB,gCAoC7B;AAED,iBAAS,qBAAqB,gCAmB7B;AAED,iBAAS,uBAAuB,gCAiE/B;AAED,iBAAS,YAAY,gCAqCpB;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAkRI,CAAC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/navigation.tsx"],"names":[],"mappings":"AAqEA,iBAAS,qBAAqB,gCAkC7B;AAED,iBAAS,qBAAqB,gCAmB7B;AAED,iBAAS,uBAAuB,gCAiE/B;AAED,iBAAS,YAAY,gCAqCpB;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAsQI,CAAC"}

package/dist/showcase/specimens/navigation.js

@@ -15,7 +15,8 @@ import { PortalSidebarFrame } from "../../components/portal-sidebar-frame.js";
 import { ScopeSwitcher } from "../../components/scope-switcher.js";
 import { Sidebar, SidebarBrand, SidebarContent, SidebarFind, SidebarFrame, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuChevron, SidebarMenuItem, SidebarProvider, } from "../../components/sidebar.js";
 import { SidebarSections } from "../../components/sidebar-sections.js";
-import { Tabs, TabsContent, TabsLink, TabsList, TabsNav, TabsTrigger } from "../../components/tabs.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs.js";
+import { TabsLink, TabsNav } from "../../components/tabs-nav.js";
 import { textLinkVariants } from "../../components/text-link.js";
 import { COBALTO, nothing, VERDE } from "../samples.js";
 function Navigation({ children }) {
@@ -23,7 +24,7 @@ function Navigation({ children }) {
 }
 function CommandDialogSpecimen() {
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => setOpen(true), variant: "outline", children: ["Find", _jsx(Kbd, { meta: true, size: "sm", children: "K" })] }), _jsxs(CommandDialog, { closeLabel: "Close", description: "Find an Agent, a customer or a page", onOpenChange: setOpen, open: open, resultCount: (count) => `${count} results`, title: "Find", children: [_jsx(CommandInput, { placeholder: "Find anything" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "Nothing matches" }), _jsxs(CommandGroup, { heading: "Agents", children: [_jsx(CommandItem, { onSelect: () => setOpen(false), children: "Invoices" }), _jsx(CommandItem, { onSelect: () => setOpen(false), children: "Orders" })] }), _jsxs(CommandGroup, { heading: "Go to", children: [_jsxs(CommandItem, { onSelect: () => setOpen(false), children: ["Usage and billing", _jsx(CommandShortcut, { meta: true, children: "U" })] }), _jsx(CommandItem, { onSelect: () => setOpen(false), children: "New Agent" })] })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => setOpen(true), variant: "outline", children: ["Find", _jsx(Kbd, { meta: true, size: "sm", keyName: "K" })] }), _jsxs(CommandDialog, { closeLabel: "Close", description: "Find an Agent, a customer or a page", onOpenChange: setOpen, open: open, resultCount: (count) => `${count} results`, title: "Find", children: [_jsx(CommandInput, { placeholder: "Find anything" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "Nothing matches" }), _jsxs(CommandGroup, { heading: "Agents", children: [_jsx(CommandItem, { onSelect: () => setOpen(false), children: "Invoices" }), _jsx(CommandItem, { onSelect: () => setOpen(false), children: "Orders" })] }), _jsxs(CommandGroup, { heading: "Go to", children: [_jsxs(CommandItem, { onSelect: () => setOpen(false), children: ["Usage and billing", _jsx(CommandShortcut, { meta: true, keyName: "U" })] }), _jsx(CommandItem, { onSelect: () => setOpen(false), children: "New Agent" })] })] })] })] }));
 }
 function ScopeSwitcherSpecimen() {
     const [scope, setScope] = useState("all");
@@ -120,11 +121,11 @@ export const NAVIGATION = {
     ScopeSwitcher: ScopeSwitcherSpecimen,
     Sidebar: () => (_jsx(Navigation, { children: _jsx(Sidebar, { collapsible: "none", children: _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Company" }), _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: true, children: [_jsx(Building2, { "aria-hidden": "true" }), "Statements"] }) }), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { children: [_jsx(CreditCard, { "aria-hidden": "true" }), "Usage and billing"] }) })] })] }) }) }) })),
     SidebarBrand: () => (_jsx("div", { className: "w-56", children: _jsx(SidebarBrand, { subtitle: "Portal" }) })),
-    SidebarFind: () => (_jsx(Navigation, { children: _jsx("div", { className: "w-64", children: _jsx(SidebarFind, { label: "Find", onClick: nothing, shortcut: _jsx(Kbd, { meta: true, size: "sm", children: "K" }) }) }) })),
-    SidebarFrame: () => (_jsx(Navigation, { children: _jsx("div", { className: "h-96 w-64 overflow-hidden rounded-md border border-border", children: _jsx(Sidebar, { collapsible: "none", children: _jsx(SidebarFrame, { account: _jsx(AccountMenuIdentity, { identity: { name: "Ada Rossi", initials: "AR", lines: ["Acme S.r.l."] } }), find: _jsx(SidebarFind, { label: "Find", onClick: nothing, shortcut: _jsx(Kbd, { meta: true, size: "sm", children: "K" }) }), header: _jsx(SidebarBrand, { subtitle: "Portal" }), children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Work" }), _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: true, children: [_jsx(AgentIcon, { "aria-hidden": "true" }), "Agents"] }) }), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { children: [_jsx(ApprovalsIcon, { "aria-hidden": "true" }), "Approvals"] }) })] })] }) }) }) }) })),
+    SidebarFind: () => (_jsx(Navigation, { children: _jsx("div", { className: "w-64", children: _jsx(SidebarFind, { label: "Find", onClick: nothing, shortcut: _jsx(Kbd, { meta: true, size: "sm", keyName: "K" }) }) }) })),
+    SidebarFrame: () => (_jsx(Navigation, { children: _jsx("div", { className: "h-96 w-64 overflow-hidden rounded-md border border-border", children: _jsx(Sidebar, { collapsible: "none", children: _jsx(SidebarFrame, { account: _jsx(AccountMenuIdentity, { identity: { name: "Ada Rossi", initials: "AR", lines: ["Acme S.r.l."] } }), find: _jsx(SidebarFind, { label: "Find", onClick: nothing, shortcut: _jsx(Kbd, { meta: true, size: "sm", keyName: "K" }) }), header: _jsx(SidebarBrand, { subtitle: "Portal" }), children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Work" }), _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: true, children: [_jsx(AgentIcon, { "aria-hidden": "true" }), "Agents"] }) }), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { children: [_jsx(ApprovalsIcon, { "aria-hidden": "true" }), "Approvals"] }) })] })] }) }) }) }) })),
     SidebarMenuChevron: () => (_jsx(Navigation, { children: _jsx(SidebarMenu, { className: "w-64", children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { children: [_jsx(Settings, { "aria-hidden": "true" }), "Settings", _jsx(SidebarMenuChevron, {})] }) }) }) })),
     SidebarSections: SidebarSectionsSpecimen,
     Tabs: TabsSpecimen,
     TabsNav: () => (_jsxs("div", { className: "grid gap-8", children: [_jsxs(TabsNav, { "aria-label": "Rossi Ottica", children: [_jsx(TabsLink, { current: true, href: "#overview", children: "Overview" }), _jsx(TabsLink, { href: "#installations", children: "Installations" }), _jsx(TabsLink, { href: "#billing", children: "Billing" })] }), _jsxs(TabsNav, { "aria-label": "Rossi Ottica, with a rule", variant: "line", children: [_jsx(TabsLink, { current: true, href: "#overview", children: "Overview" }), _jsx(TabsLink, { href: "#installations", children: "Installations" }), _jsx(TabsLink, { href: "#billing", children: "Billing" })] }), _jsx("div", { className: "max-w-72", children: _jsxs(TabsNav, { "aria-label": "Rossi Ottica, scrolled", children: [_jsx(TabsLink, { href: "#overview", children: "Overview" }), _jsx(TabsLink, { href: "#tasks", children: "Scheduled tasks" }), _jsx(TabsLink, { current: true, href: "#usage", children: "Usage" }), _jsx(TabsLink, { href: "#capabilities", children: "Capabilities" }), _jsx(TabsLink, { href: "#settings", children: "Settings" })] }) })] })),
-    textLinkVariants: () => (_jsxs("p", { className: "max-w-md text-sm", children: ["Your data stays in the EU. Read the", " ", _jsx("a", { className: textLinkVariants({ kind: "inline" }), href: "#privacy", children: "privacy notice" }), " ", "for what each Agent keeps.", " ", _jsx("a", { className: textLinkVariants({ kind: "quiet" }), href: "#learn", children: "Learn more" })] })),
+    textLinkVariants: () => (_jsxs("p", { className: "max-w-md text-sm", children: ["Your data stays in the EU. Read the", " ", _jsx("a", { className: textLinkVariants({ kind: "inline" }), href: "#privacy", children: "privacy notice" }), " ", "for what each Agent keeps.", " ", _jsx("a", { className: textLinkVariants({ kind: "quiet" }), href: "#learn", children: "Learn how data is kept" })] })),
 };

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

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/status.tsx"],"names":[],"mappings":"AAyDA,iBAAS,oBAAoB,gCAiB5B;AAYD,iBAAS,aAAa,gCA2DrB;AAWD,iBAAS,gBAAgB,gCAkExB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAuPQ,CAAC"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/status.tsx"],"names":[],"mappings":"AAyDA,iBAAS,oBAAoB,gCAiB5B;AAkBD,iBAAS,aAAa,gCA2DrB;AAWD,iBAAS,gBAAgB,gCAkExB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAuPQ,CAAC"}

package/dist/showcase/specimens/status.js

@@ -35,12 +35,12 @@ const MEMBERS = [
 function ActionStatusSpecimen() {
     return (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: ["idle", "saving", "done"].map((state) => (_jsx(ActionStatus, { busy: "Saving", done: "Saved", idle: "Save changes", idleIcon: _jsx(Save, { "aria-hidden": "true" }), state: state, type: "button", variant: "outline" }, state))) }));
 }
-function GaugeRow({ label, gauge }) {
+function GaugeRow({ label, renderGauge, }) {
     const labelId = useId();
-    return (_jsxs("div", { className: "flex items-center gap-3 text-sm", children: [gauge(labelId), _jsx("span", { id: labelId, children: label })] }));
+    return (_jsxs("div", { className: "flex items-center gap-3 text-sm", children: [renderGauge(labelId), _jsx("span", { id: labelId, children: label })] }));
 }
 function GaugeSpecimen() {
-    return (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-6", children: [_jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "xs", value: 42 }), label: "Storage used" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "sm", value: 64 }), label: "Plan used" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "md", value: 87 }), label: "Tasks done" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "lg", value: 99.97 }), label: "Cache hit rate" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "sm", value: 64 }), label: "Plan used, 64%" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", value: 87 }), label: "Tasks done, 87%" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "lg", value: 99.97 }), label: "Cache hit rate, 99.97%" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(GaugeRow, { gauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", tone: "warning", value: 82 })), label: "Model budget, 82%: close to the limit" }), _jsx(GaugeRow, { gauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", tone: "critical", value: 97 })), label: "Mailbox space, 97%: almost full" }), _jsx(GaugeRow, { gauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, size: "md", value: 58, children: _jsx(Database, { "aria-hidden": "true" }) })), label: "Memory used" })] })] }));
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-6", children: [_jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "xs", value: 42 }), label: "Storage used" }), _jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "sm", value: 64 }), label: "Plan used" }), _jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "md", value: 87 }), label: "Tasks done" }), _jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "lg", value: 99.97 }), label: "Cache hit rate" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "sm", value: 64 }), label: "Plan used, 64%" }), _jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", value: 87 }), label: "Tasks done, 87%" }), _jsx(GaugeRow, { renderGauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "lg", value: 99.97 }), label: "Cache hit rate, 99.97%" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(GaugeRow, { renderGauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", tone: "warning", value: 82 })), label: "Model budget, 82%: close to the limit" }), _jsx(GaugeRow, { renderGauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", tone: "critical", value: 97 })), label: "Mailbox space, 97%: almost full" }), _jsx(GaugeRow, { renderGauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, size: "md", value: 58, children: _jsx(Database, { "aria-hidden": "true" }) })), label: "Memory used" })] })] }));
 }
 const ORB_STATES = [
     "idle",
@@ -61,7 +61,7 @@ export const STATUS = {
     AppMark: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [_jsx(AppMark, { app: "gmail", logo: composioLogo("gmail") }), "Gmail", _jsx(AppMark, { app: "telegram", platform: "telegram" }), "Telegram", _jsx(AppMark, { app: "Fatture in Cloud" }), "Fatture in Cloud"] })),
     ArchIcon: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ArchIcon, { "aria-hidden": "true", className: "size-5" }), "Company"] }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ApprovalsIcon, { "aria-hidden": "true", className: "size-5" }), "Approvals"] }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AgentIcon, { "aria-hidden": "true", className: "size-5" }), "Agents"] })] })),
     Avatar: () => (_jsxs("div", { className: "grid gap-6", children: [_jsx("div", { className: "flex flex-wrap items-center gap-4", children: ["xs", "sm", "default", "lg"].map((size) => (_jsx(Avatar, { label: "Ada Rossi", size: size, children: _jsx(AvatarFallback, { children: size === "xs" ? "A" : "AR" }) }, size))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(AvatarGroup, { label: "5 members", limit: 3, members: MEMBERS }), _jsx(AvatarGroup, { label: "5 members, last on top", limit: 3, members: MEMBERS, reverse: true }), _jsx(AvatarGroup, { label: "5 members, tight", limit: 3, members: MEMBERS, overlap: 6 })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AvatarWithIcon, { icon: _jsx(Check, {}), iconBackground: true, label: "Ada Rossi, approved", name: "Ada Rossi" }), "Ada Rossi"] }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AvatarWithIcon, { icon: _jsx(Pause, {}), iconBackground: true, label: "Marco Bianchi, paused", name: "Marco Bianchi" }), "Marco Bianchi"] }), _jsx(AvatarWithIcon, { icon: _jsx(Clock, {}), iconBackground: true, label: "Luca Conti, waiting for approval", name: "Luca Conti" })] })] })),
-    Badge: () => (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { children: "Owner" }), _jsx(Badge, { variant: "secondary", children: "Business plan" }), _jsx(Badge, { variant: "outline", children: "Beta" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { size: "sm", variant: "secondary", children: "Small" }), _jsx(Badge, { size: "md", variant: "secondary", children: "Medium" }), _jsx(Badge, { size: "lg", variant: "secondary", children: "Large" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { icon: _jsx(Mail, { "aria-hidden": "true" }), variant: "secondary", children: "Mailbox" }), _jsx(Badge, { icon: _jsx(Lock, { "aria-hidden": "true" }), title: "Read only", variant: "secondary" }), _jsx(Badge, { render: _jsx("a", { href: "#" }), variant: "outline", children: "Release notes" })] })] })),
+    Badge: () => (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { children: "Owner" }), _jsx(Badge, { variant: "secondary", children: "Business plan" }), _jsx(Badge, { variant: "outline", children: "Beta" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { size: "sm", variant: "secondary", children: "Small" }), _jsx(Badge, { size: "md", variant: "secondary", children: "Medium" }), _jsx(Badge, { size: "lg", variant: "secondary", children: "Large" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { icon: Mail, variant: "secondary", children: "Mailbox" }), _jsx(Badge, { icon: Lock, title: "Read only", variant: "secondary" }), _jsx(Badge, { render: _jsx("a", { href: "#release-notes" }), variant: "outline", children: "Release notes" })] })] })),
     BrandWordmark: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(BrandWordmark, {}), _jsx(BrandMark, {})] })),
     CheckCounts: () => (_jsxs("div", { className: "grid max-w-md gap-2 text-sm", children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex-1", children: "Health checks" }), _jsx(CheckCounts, { counts: [
                             { outcome: "passed", count: 12, label: "12 tasks completed" },

package/dist/showcase/usage.generated.d.ts

@@ -1,4 +1,4 @@
-export type UsageName = "ActivityFeed" | "AgentProfileCard" | "CatalogDrawer" | "CollectionFilters" | "CollectionPage" | "CollectionToolbar" | "ConfirmDialog" | "EntryScene" | "FormDialog" | "FormDrawer" | "LibraryShelf" | "ObjectPage" | "ObjectSection" | "OverviewPage" | "PageHeader" | "RecordList" | "RecordSheet" | "RowEditForm" | "SettingsPage" | "SettingsSection" | "Button" | "ButtonGroup" | "ButtonLink" | "CopyButton" | "LoadMoreButton" | "PageActions" | "Calendar" | "ClearableInput" | "CollectionSearch" | "Field" | "Input" | "InputGroup" | "InputOTP" | "Label" | "NativeSelect" | "SettingsField" | "SettingsRows" | "Slider" | "Textarea" | "Checkbox" | "ChoiceboxGroup" | "CollectionSort" | "Combobox" | "ModelSelect" | "MultiSelect" | "RadioGroup" | "SegmentedChoice" | "SegmentedControl" | "Select" | "Switch" | "ThemeModeSegments" | "ThemeModeSwitcher" | "Toggle" | "ToggleGroup" | "ActionStatus" | "AgentOrb" | "AppMark" | "ArchIcon" | "Avatar" | "Badge" | "BrandWordmark" | "CheckCounts" | "FileTypeIcon" | "IdentityMark" | "ModelIdentity" | "ModelMark" | "ObjectFactValue" | "PlatformMark" | "ProgressChecklist" | "RecordIdentity" | "StatusBadge" | "Tag" | "AgentListRow" | "Breadcrumb" | "CommandDialog" | "Footer" | "PortalSidebarFrame" | "ScopeSwitcher" | "Sidebar" | "SidebarBrand" | "SidebarFind" | "SidebarFrame" | "SidebarMenuChevron" | "SidebarSections" | "Tabs" | "TabsNav" | "textLinkVariants" | "AgentCard" | "Card" | "CardRow" | "CodeBlock" | "DataTable" | "DiffCount" | "DisclosureRow" | "FileDiff" | "Gauge" | "Item" | "Kbd" | "MiddleTruncate" | "ObjectFacts" | "PairingCode" | "Progress" | "QrCode" | "RecordTime" | "RunTimeline" | "SettingsFactsSection" | "Snippet" | "Table" | "TableCard" | "TableValue" | "TextWithCopyButton" | "UsageMeter" | "Alert" | "EmptyState" | "EntryProgress" | "EntryStageList" | "HoverCard" | "MessageNotice" | "NoticeBanner" | "PendingLabel" | "Skeleton" | "SkeletonRegion" | "Toaster" | "Tooltip" | "UpdateCard" | "WaitingLine" | "AccountMenu" | "ActionContextMenu" | "ActionMenu" | "AlertDialog" | "ContextMenu" | "Dialog" | "Drawer" | "DropdownMenu" | "GlassControl" | "MenuChoiceRow" | "Popover" | "Sheet" | "ThemeModeMenu" | "ActivityCalendar" | "ChartAreaStacked" | "ChartBarHorizontal" | "ChartBarMultiple" | "ChartBarStacked" | "ChartCard" | "ChartContainer" | "ChartRanking" | "ChartSparkline" | "DateRangeControl" | "KpiCard" | "TrendBadge" | "createEntityColorMap" | "Accordion" | "AspectRatio" | "BrandField" | "Collapsible" | "CompanyCard" | "Disclosure" | "HiveScene" | "NadiaPresence" | "NumberedSteps" | "Prose" | "ReadingColumn" | "ResizablePanelGroup" | "ScrollArea" | "Separator" | "ToolIcon";
+export type UsageName = "ActivityFeed" | "AgentProfileCard" | "CatalogDrawer" | "CollectionFilters" | "CollectionPage" | "CollectionToolbar" | "ConfirmDialog" | "EntryScene" | "FormDialog" | "FormDrawer" | "LibraryShelf" | "ObjectPage" | "ObjectSection" | "OverviewPage" | "PageHeader" | "RecordList" | "RecordSheet" | "RowEditForm" | "SettingsPage" | "SettingsSection" | "Button" | "ButtonGroup" | "ButtonLink" | "CopyButton" | "LoadMoreButton" | "PageActions" | "Calendar" | "ClearableInput" | "CollectionSearch" | "Field" | "Form" | "Input" | "InputGroup" | "InputOTP" | "Label" | "NativeSelect" | "SettingsField" | "SettingsRows" | "Slider" | "Textarea" | "Checkbox" | "ChoiceboxGroup" | "CollectionSort" | "Combobox" | "ModelSelect" | "MultiSelect" | "RadioGroup" | "SegmentedChoice" | "SegmentedControl" | "Select" | "Switch" | "ThemeModeSegments" | "ThemeModeSwitcher" | "Toggle" | "ToggleGroup" | "ActionStatus" | "AgentOrb" | "AppMark" | "ArchIcon" | "Avatar" | "Badge" | "BrandWordmark" | "CheckCounts" | "FileTypeIcon" | "IdentityMark" | "ModelIdentity" | "ModelMark" | "ObjectFactValue" | "PlatformMark" | "ProgressChecklist" | "RecordIdentity" | "StatusBadge" | "Tag" | "AgentListRow" | "Breadcrumb" | "CommandDialog" | "Footer" | "PortalSidebarFrame" | "ScopeSwitcher" | "Sidebar" | "SidebarBrand" | "SidebarFind" | "SidebarFrame" | "SidebarMenuChevron" | "SidebarSections" | "Tabs" | "TabsNav" | "textLinkVariants" | "AgentCard" | "Card" | "CardRow" | "CodeBlock" | "DataTable" | "DiffCount" | "DisclosureRow" | "FileDiff" | "Gauge" | "Item" | "Kbd" | "MiddleTruncate" | "ObjectFacts" | "PairingCode" | "Progress" | "QrCode" | "RecordTime" | "RunTimeline" | "SettingsFactsSection" | "Snippet" | "Table" | "TableCard" | "TableValue" | "TextWithCopyButton" | "UsageMeter" | "Alert" | "EmptyState" | "EntryProgress" | "EntryStageList" | "HoverCard" | "MessageNotice" | "NoticeBanner" | "PendingLabel" | "Skeleton" | "SkeletonRegion" | "Toaster" | "Tooltip" | "UpdateCard" | "WaitingLine" | "AccountMenu" | "ActionContextMenu" | "ActionMenu" | "AlertDialog" | "ContextMenu" | "Dialog" | "Drawer" | "DropdownMenu" | "GlassControl" | "MenuChoiceRow" | "Popover" | "Sheet" | "SiteMenu" | "ThemeModeMenu" | "ActivityCalendar" | "ChartAreaStacked" | "ChartBarHorizontal" | "ChartBarMultiple" | "ChartBarStacked" | "ChartCard" | "ChartContainer" | "ChartRanking" | "ChartSparkline" | "DateRangeControl" | "KpiCard" | "TrendBadge" | "createEntityColorMap" | "Accordion" | "AspectRatio" | "BrandField" | "Collapsible" | "CompanyCard" | "Disclosure" | "HiveScene" | "NadiaPresence" | "NumberedSteps" | "Prose" | "ReadingColumn" | "ResizablePanelGroup" | "ScrollArea" | "Separator" | "ToolIcon";
 export type UsageFamily = "Compositions" | "Actions" | "Inputs" | "Choices" | "Status" | "Navigation" | "Data" | "Feedback" | "Menus" | "Charts" | "Other";
 export type ComponentUsage = {
     name: UsageName;

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

@@ -1 +1 @@
-{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}

package/dist/showcase/usage.generated.js

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-usage.mjs from the components' doc comments.
-// Do not edit: `npm run generate:usage -w @nadicodeai/ui` rewrites it.
+// Do not edit: `pnpm --filter @nadicodeai/ui generate:usage` rewrites it.
 export const USAGE_FAMILIES = [
     "Compositions",
     "Actions",
@@ -240,8 +240,8 @@ export const USAGE = [
         family: "Actions",
         summary: "The package's one button: a command, its label naming the result.",
         when: '"Use `Button` for actions that mutate state (deploy, save, delete); use `ButtonLink` for navigation that changes the URL." (https://vercel.com/geist/button) Ours: one `default` per surface, the thing this page or dialog is for.',
-        instead: '"Switch to a `Menu` or `Split Button` when more than one related action shares a row." (https://vercel.com/geist/button) Ours: a link inside a sentence is `TextLink`. A record\'s secondary commands go in `ActionMenu`. Appending to a list is a `LoadMoreButton`. An on/off value is a `Switch`. An element that is neither a `Button` nor a `ButtonLink` takes `buttonVariants`.',
-        behaviour: '"Default `Button` is primary." (https://vercel.com/geist/button) "Pass `type="secondary"` for the supporting action and `type="error"` for destructive confirmations." (https://vercel.com/geist/button) "`primary`, `success`, `ghost`, and `violet` are not valid `type` values." (https://vercel.com/geist/button) "For form submits, use `typeName="submit"`." (https://vercel.com/geist/button) "The HTML `type` attribute lives on `typeName`, not on `type`, which controls the visual variant." (https://vercel.com/geist/button) Ours: the look is `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive` for Geist\'s error, `warning`, and `brandSolid` and `brandGhost` for a colour or black ground) and `type` is the HTML type, `button` unless it submits. There is no `CustomButton`: colour is ours, chosen by `variant`, never at the call site. "The default size is medium." (https://vercel.com/geist/button) Ours: `xs` (24 px), `sm` (32 px), `default` (36 px, medium) and `lg` (40 px); `sm` and `xs` are for a control nested in dense content, such as a composer or an input group, never for chrome. The corner is 6 px, 8 px at `lg` and 4 px on the 24 px icon button. The label is the button type at `sm` and `default`, the large one at `lg` and the 12 px one at `xs`, and the inline padding is 6 px at `sm`, 10 px at `default` and 14 px at `lg` (8 px at `xs`). "Pass `loading` instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech." (https://vercel.com/geist/button) Ours: `loading` is the only busy state: the button keeps its place and focus, says `loadingLabel` in the label\'s place, ignores a second press and shows no spinner. "Disable a button only when the action is impossible right now (missing input, insufficient permission); pair with a `Tooltip` that explains why." (https://vercel.com/geist/button) Ours: the reason is written beside the button. "Icon-only buttons should include the `svgOnly` prop and an `aria-label`." (https://vercel.com/geist/button) Ours: an icon-only button takes an `icon` size and its icon as the child; `shape="circle"` is only for it. An icon with text passes as `prefix` or `suffix`. "Combination of `shape="rounded"` and the `shadow` prop, often used on marketing pages." (https://vercel.com/geist/button) Ours: `shape="rounded"` is a pill for a call to action that stands apart (a banner\'s or a scroller\'s), with no `shadow` prop. Ours: text children sit in a label box that adds 6 px each side to the padding, except at `xs` and the icon sizes, which have none; an element child (a `render` target, a row with a trailing `Kbd`) lays itself out and gets no box. Colour sits on the whole button for three looks: `default` is ink with a white label (in dark, the light action fill with a near-black label, never pure white), `destructive` is the error fill for permanent loss (Delete project), `warning` is the amber fill for a disruptive command that can be undone (Pause project). `link` is the link colour as text, with the arrow as `suffix` when the destination is outside the product. `outline` and `secondary` are neutral with a hairline edge, `ghost` has no chrome and serves a tertiary text action or an icon-only command (the three dots, close, collapse), and no look puts a hue on its edge. Held (disabled or `loading`), a filled look (`default`, `outline`, `secondary`, `destructive` and `warning`, so `outline` and `secondary` too) drops its hue to the muted fill, the muted text and the hairline at full opacity, so it reads as unavailable; `ghost`, `link` and the two brand looks dim instead. Pressed looks like hover, with no movement. On a colour or black ground a control takes a look whose label clears AA there: `brandSolid` (white fill, ink label) or `brandGhost` (white label, no fill) on cobalto, rosso and black, and the `default` ink button on verde, arancio and giallo.',
+        instead: '"Switch to a `Menu` or `Split Button` when more than one related action shares a row." (https://vercel.com/geist/button) Ours: a link inside a sentence is `TextLink`. A record\'s secondary commands go in `ActionMenu`. Appending to a list is a `LoadMoreButton`. An on/off value is a `Switch`.',
+        behaviour: '"Default `Button` is primary." (https://vercel.com/geist/button) "Pass `type="secondary"` for the supporting action and `type="error"` for destructive confirmations." (https://vercel.com/geist/button) "`primary`, `success`, `ghost`, and `violet` are not valid `type` values." (https://vercel.com/geist/button) "For form submits, use `typeName="submit"`." (https://vercel.com/geist/button) "The HTML `type` attribute lives on `typeName`, not on `type`, which controls the visual variant." (https://vercel.com/geist/button) Ours: the look is `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive` for Geist\'s error, `warning`, and `brandSolid` and `brandGhost` for a colour or black ground) and `type` is the HTML type, `button` unless it submits. There is no `CustomButton`: colour is ours, chosen by `variant`, never at the call site. "The default size is medium." (https://vercel.com/geist/button) Ours: `xs` (24 px), `sm` (32 px), `default` (36 px, medium) and `lg` (40 px); `sm` and `xs` are for a control nested in dense content, such as a composer or an input group, never for chrome. `inline` is a `link` command standing in a line of text (*Change*, *Switch account*): no padding of its own, and on a mouse it keeps the control\'s minimum height so it is as easy to hit. The corner is 6 px, 8 px at `lg` and 4 px on the 24 px icon button. The label is the button type at `sm` and `default`, the large one at `lg` and the 12 px one at `xs`, and the inline padding is 6 px at `sm`, 10 px at `default` and 14 px at `lg` (8 px at `xs`). "Pass `loading` instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech." (https://vercel.com/geist/button) Ours: `loading` is the only busy state: the button keeps its place and focus, says `loadingLabel` in the label\'s place, ignores a second press and shows no spinner. "Disable a button only when the action is impossible right now (missing input, insufficient permission); pair with a `Tooltip` that explains why." (https://vercel.com/geist/button) Ours: the reason is written beside the button. "Icon-only buttons should include the `svgOnly` prop and an `aria-label`." (https://vercel.com/geist/button) Ours: an icon-only button takes an `icon` size and its icon as the child; `shape="circle"` is only for it. An icon with text passes as `prefix` or `suffix`. "Combination of `shape="rounded"` and the `shadow` prop, often used on marketing pages." (https://vercel.com/geist/button) Ours: `shape="rounded"` is a pill for a call to action that stands apart (a banner\'s or a scroller\'s), with no `shadow` prop. Ours: text children sit in a label box that adds 6 px each side to the padding, except at `xs` and the icon sizes, which have none; an element child (a `render` target, a row with a trailing `Kbd`) lays itself out and gets no box. Colour sits on the whole button for three looks: `default` is ink with a white label (in dark, the light action fill with a near-black label, never pure white), `destructive` is the error fill for permanent loss (Delete project), `warning` is the amber fill for a disruptive command that can be undone (Pause project). `link` is the link colour as text, with the arrow as `suffix` when the destination is outside the product. `outline` and `secondary` are neutral with a hairline edge, `ghost` has no chrome and serves a tertiary text action or an icon-only command (the three dots, close, collapse), and no look puts a hue on its edge. Held (disabled or `loading`), a filled look (`default`, `outline`, `secondary`, `destructive` and `warning`, so `outline` and `secondary` too) drops its hue to the muted fill, the muted text and the hairline at full opacity, so it reads as unavailable; `ghost`, `link` and the two brand looks dim instead. Pressed looks like hover, with no movement. On a colour or black ground a control takes a look whose label clears AA there: `brandSolid` (white fill, ink label) or `brandGhost` (white label, no fill) on cobalto, rosso and black, and the `default` ink button on verde, arancio and giallo.',
         words: '"Title Case the label and name what happens: `Deploy Project`, `Invite Member`, `Rotate Key`." (https://vercel.com/geist/button) "Avoid bare verbs (`Submit`) and generic confirms (`OK`, `Confirm`)." (https://vercel.com/geist/button) "Destructive buttons follow `Verb + Noun` and pair 1:1 with their toast: `Delete Project` then `Project deleted`." (https://vercel.com/geist/button) "Mode-switch buttons append `Instead`: `Use a Recovery Code Instead`." (https://vercel.com/geist/button) Ours: sentence case, not Title Case: *Invite member*, *Remove mailbox* then *Mailbox removed*, *Use a recovery code instead*. `loadingLabel` is the same words in the -ing form: *Inviting member*. Italian runs about a third longer (*Rimuovi casella*), so a footer leaves room and a label never wraps.',
         access: '"Icon-only buttons require both `svgOnly` and `aria-label`; the validator throws without them." (https://vercel.com/geist/button) "The `aria-label` names the action and the target (`Copy deployment URL`), not the icon (`Copy`)." (https://vercel.com/geist/button) "Don’t set `aria-label` on a button that already has visible text; it overrides the label and creates a screen-reader mismatch." (https://vercel.com/geist/button) Ours: the type requires `aria-label` or `aria-labelledby` on an icon-only button. A native `button`, `type="button"` unless it submits. `loading` sets `aria-busy`. Focus shows the base outline in one colour for every look; nothing repaints it.',
     },
@@ -344,6 +344,17 @@ export const USAGE = [
         words: '"Labels are short Title Case nouns: `Project Name`, `Domain`, `Environment Variable Name`." (https://vercel.com/geist/input) Ours: sentence case, a short noun (*Display name*); a field that may stay empty says so in its label (*Address line 2 (optional)*), never in its placeholder. "Placeholders show an example value (`my-awesome-project`, `example.com`), never instructions like `Enter your project name`." (https://vercel.com/geist/input) "Validation names the field and the constraint, ends in a period, and skips `please` (`Project name is required.`, `Code must be 6 digits.`)." (https://vercel.com/geist/input) Ours: *Enter a full address, like name@company.it.*',
         access: '`FieldError` is `role="alert"`. The control carries `id`, `aria-invalid`, `aria-describedby` (the error), `disabled` and `required`. "Don’t wrap a labelled `<Input>` in a `Tooltip`; put the explainer on a sibling icon button so the label stays announced." (https://vercel.com/geist/input)',
     },
+    {
+        name: "Form",
+        module: "form",
+        family: "Inputs",
+        summary: "A form that never puts its fields in the address.",
+        when: "Ours: every form in a product. A form submitted by `onSubmit`, by a URL `action` or by a server action is a `Form`, so the browser's own submit before hydration posts its fields.",
+        instead: "Ours: a save with a footer is `FormDialogForm`, `FormDrawerForm`, `RowEditForm` or a `SettingsSection`, each of which renders a `Form`. A search or a filter that belongs in the address is a link or a router push, never a form that submits by GET.",
+        behaviour: "Ours: a native `form` with every prop it is given, except `method`, which it sets itself: `post`, or none when `action` is a function, since React submits a function action itself and refuses a `method` beside it. Until React attaches `onSubmit`, a press of the submit button posts the form to its `action` or to the page; without `post` the browser would write every named field, a password included, into the URL.",
+        words: "Ours: the form has no words of its own; its fields and its submit button carry them.",
+        access: 'Ours: a native `form`. The caller names it with `aria-labelledby` when it is a landmark, and the submit button is a real `type="submit"` button.',
+    },
     {
         name: "Input",
         module: "input",
@@ -360,8 +371,8 @@ export const USAGE = [
         module: "input-group",
         family: "Inputs",
         summary: "One input box with something fixed inside it: a mark, a prefix, a button.",
-        when: "A single-line value with a button inside the box: a copy button, a block addon, a textarea with a toolbar, a server-given value (a project ID) shown read-only in mono beside its copy button, with no Save.",
-        instead: "A prefix or suffix of text or an icon (*https://*, *.com*), in a cell or plain, is the `prefix`, `suffix` and `look` props of `Input`. A value that clears itself is `ClearableInput`; a collection's search is `CollectionSearch`, never a hand-built group. Many known values to filter is `Combobox`.",
+        when: "Inside `@nadicodeai/ui` only, which does not export it: the box of `Input`, `ClearableInput`, `Combobox`, `Command` and `Textarea`'s `action`, and a single-line value with a button inside the box, such as a server-given value (a project ID) shown read-only in mono beside its copy button.",
+        instead: "A prefix or suffix of text or an icon (*https://*, *.com*), in a cell or plain, is the `prefix`, `suffix` and `look` props of `Input`. A value that clears itself is `ClearableInput`; a collection's search is `CollectionSearch`, never a hand-built group. Many known values to filter is `Combobox`. A textarea with a control in its corner is `Textarea`'s `action`.",
         behaviour: "The group draws the edge and the focus halo for the input inside it, so the ring wraps the addons too, and takes the sizes of `Input`: the input follows the group's. An addon is a `segment` (a filled cell with a divider, the look of `Input`'s prefix and suffix) or `plain` (a mark on the box's own fill, flush against the text). An icon button in an addon fills the row, sits flush against the edge, is muted until hovered and never fills on hover or press. A text button in an addon is `InputGroupButton` at `xs`, 24 px high. A disabled input steps the whole group down in fill and text, never in opacity, an icon button included; a button in an addon that is held, such as a send button waiting for text, leaves the box as it is. Colour sits where it does on `Input`: only an error reddens the ring; a suffix reads in the text colour in both looks, a prefix in the muted grey. `rounded` makes the group a pill. The group's own `size` is the only place a size is set.",
         words: "Prefix and suffix are literal text, never the label. An inline button names what it does: *Copy address*.",
         access: '`role="group"` around the box. The input inside is named by `aria-label` or `aria-labelledby`. "For icon-only affordances inside a row of inputs, use `<Button shape="circle" svgOnly aria-label="…">` rather than an unlabeled icon." (https://vercel.com/geist/input) Ours: an inline button carries its `aria-label`.',
@@ -439,7 +450,7 @@ export const USAGE = [
         summary: "Several lines of free text that grow with their content.",
         when: '"Retrieve multi-line user input." (https://vercel.com/geist/textarea) "Pick `<Textarea>` for content that wraps to multiple lines (commit messages, descriptions, notes); use `Input` for a single value like a name or domain." (https://vercel.com/geist/textarea)',
         instead: "Ours: code or a value to copy is `CodeBlock`, read-only.",
-        behaviour: 'Same ring, halo, hover, disabled and error as `Input`; the red of an error sits on the ring, the halo and the message only, and holds while the box has focus. It grows with its content (`field-sizing: content`) from a roomy 100 px minimum with a 10 px by 12 px inset; `lg` takes 16 px type at every width (the others drop to 14 px from `md` up) and the larger corner, `sm` is the default\'s size. Read-only keeps the plain fill: it does not look disabled. `label` and `error` draw the `Field` parts around the box (in a settings section, `SettingsField` does it), and a string `label` requires `id`, as on `Input`; a box with no name does not compile. "Set a generous default `rows` and grow only when the surface has vertical room; don’t let the field push primary actions below the fold." (https://vercel.com/geist/textarea) Ours: there is no resize handle and `rows` does not set the height. Nothing caps the growth, so a form keeps its footer\'s primary action in view and lets the body scroll. "Validate on blur and pass a string to `error` to render the inline message; the validation replaces helper text on failure." (https://vercel.com/geist/textarea) "Trim leading and trailing whitespace on submit so empty newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: typing keeps every space and newline; the save of `FormDialog`, `FormDrawer`, `RowEditForm` and `SettingsSection` trims the ends (see `Field`). A character count shows only when a real limit exists.',
+        behaviour: 'Same ring, halo, hover, disabled and error as `Input`; the red of an error sits on the ring, the halo and the message only, and holds while the box has focus. It grows with its content (`field-sizing: content`) from a roomy 100 px minimum with a 10 px by 12 px inset; `lg` takes 16 px type at every width (the others drop to 14 px from `md` up) and the larger corner, `sm` is the default\'s size. Read-only keeps the plain fill: it does not look disabled. `label` and `error` draw the `Field` parts around the box (in a settings section, `SettingsField` does it), and a string `label` requires `id`, as on `Input`; a box with no name does not compile. "Set a generous default `rows` and grow only when the surface has vertical room; don’t let the field push primary actions below the fold." (https://vercel.com/geist/textarea) Ours: there is no resize handle and `rows` does not set the height. Nothing caps the growth, so a form keeps its footer\'s primary action in view and lets the body scroll. "Validate on blur and pass a string to `error` to render the inline message; the validation replaces helper text on failure." (https://vercel.com/geist/textarea) "Trim leading and trailing whitespace on submit so empty newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: typing keeps every space and newline; the save of `FormDialog`, `FormDrawer`, `RowEditForm` and `SettingsSection` trims the ends (see `Field`). A character count shows only when a real limit exists. `action` puts one control in the bottom-end corner inside the box\'s ring, as a prompt\'s Ask sits under what was typed.',
         words: '"Labels are short Title Case nouns (`Description`, `Release Notes`); placeholders show an example value, not instructions like `Enter a description`." (https://vercel.com/geist/textarea) "Validation names the field and constraint, ends in a period, and skips `please` (`Description is required.`, `Release notes can’t exceed 500 characters.`)." (https://vercel.com/geist/textarea) "Render helper text as a sibling `<p>` linked through `aria-describedby`; sentence case, one sentence, with a period." (https://vercel.com/geist/textarea) Ours: the label names the content (*Instructions*) in sentence case. Help is the one-line description of the card or form around the box, not a `<p>` under it. The placeholder is a short example, not a paragraph.',
         access: "A visible label tied by `id`, or `aria-label`; the error through `aria-describedby`. In a dialog, the footer's Save stays reachable while the box grows.",
     },
@@ -450,7 +461,7 @@ export const USAGE = [
         summary: "A box that is checked, unchecked or mixed.",
         when: '"Multi-select inside a list, like table-row pickers, multi-pick filters, and opt-in preference groups." (https://vercel.com/geist/checkbox) "Acknowledgments where the user must affirm a specific statement (terms of service, irreversible export)." (https://vercel.com/geist/checkbox)',
         instead: '"For a single boolean setting like dark mode or password protection, use `Toggle`." (https://vercel.com/geist/checkbox) "The on/off mechanic is clearer there than a lone checkbox." (https://vercel.com/geist/checkbox) Ours: Geist\'s `Toggle` is our `Switch`. One of several exclusive options is a `RadioGroup`, and one that needs a description is a `ChoiceboxGroup`. Several values from a long list is a multi-select.',
-        behaviour: '"Indeterminate is a visual state, not a third value." (https://vercel.com/geist/checkbox) "Drive it from a parent that knows partial selection, and clear it as soon as every child is fully checked or unchecked." (https://vercel.com/geist/checkbox) "Validation on a required acknowledgment fires on submit, not on blur, so checking and unchecking shouldn’t flash an error." (https://vercel.com/geist/checkbox) "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: named by `aria-label`, `aria-labelledby` or an `id` that a `FieldLabel` points at; a box with none does not compile. It is 16 px with a 4 px corner, the label 8 px away at 13 px regular weight on a 20 px row, and the label is part of the target. Colour: only a checked box fills, with the action pair (ink and a white mark, the light action fill and a near-black mark in dark); an unchecked box shows the surface and greys on hover. Mixed is an unfilled box with a grey dash. A disabled box turns grey, an unchecked or mixed one with a lighter edge and a checked one mid grey, and ignores hover.',
+        behaviour: '"Indeterminate is a visual state, not a third value." (https://vercel.com/geist/checkbox) "Drive it from a parent that knows partial selection, and clear it as soon as every child is fully checked or unchecked." (https://vercel.com/geist/checkbox) "Validation on a required acknowledgment fires on submit, not on blur, so checking and unchecking shouldn’t flash an error." (https://vercel.com/geist/checkbox) "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: named by `aria-label`, `aria-labelledby` or an `id` that a `FieldLabel` points at; a box with none does not compile. It is 16 px with a 4 px corner, the label 8 px away at 13 px regular weight on a 20 px row, and the label is part of the target. Colour: only a checked box fills, with the action pair (ink and a white mark, the light action fill and a near-black mark in dark); an unchecked box shows the surface and greys on hover. Mixed is an unfilled box with a grey dash. A disabled box turns grey, an unchecked or mixed one with a lighter edge and a checked one mid grey, and ignores hover. `nativeButton` draws the box on a native `<button type="button">`, which the box owns.',
         words: '"Group label above a `<fieldset>` is a Title Case noun like `Notifications` or `Required Permissions`. No trailing colon." (https://vercel.com/geist/checkbox) "Acknowledgment label is a full sentence ending in a period: `I agree to the Terms of Service.`" (https://vercel.com/geist/checkbox) "Indeterminate copy names the partial count next to the group label (`3 of 5 selected`). Never leave the dash state unlabeled." (https://vercel.com/geist/checkbox) Ours: sentence case, not Title Case. The label says what is true when checked, positively: *Send a copy to the person who asked*, not *Don\'t send*.',
         access: '"Wrap related checkboxes in `<fieldset>` with a `<legend>` so screen readers announce the group name before each option." (https://vercel.com/geist/checkbox) "Row-select checkbox in a table has no visible label. Set `aria-label="Select {row name}"` so the row stays identifiable out of context." (https://vercel.com/geist/checkbox) "The click target already extends to the label. Don’t override the `<label>`/`htmlFor` association with a custom wrapper that breaks the click region." (https://vercel.com/geist/checkbox) Ours: `role="checkbox"` with `aria-checked` true, false or mixed. A row\'s box is named for its record: *Select pec@acme.it*. A set sits in a `FieldSet` with its legend.',
     },
@@ -461,7 +472,7 @@ export const USAGE = [
         summary: "A group of larger tiles, each a radio or a checkbox with a title and a description.",
         when: '"A choice that benefits from a larger tap target plus a description or icon, like a framework picker, plan comparison, or deployment region with latency." (https://vercel.com/geist/choicebox) "Single-select for mutually exclusive choices, multi-select for additive ones." (https://vercel.com/geist/choicebox) "Don’t mix the two within one group." (https://vercel.com/geist/choicebox) "Cap at 4–6 tiles." (https://vercel.com/geist/choicebox) Ours: where a Library entry applies, an API key\'s access level. The options are known in advance and number no more than six.',
         instead: '"Past that, switch to `Select` or `Combobox` so the page doesn’t scroll for a single field." (https://vercel.com/geist/choicebox) "For plain text labels with no description, use `Radio`." (https://vercel.com/geist/choicebox) Ours: Geist\'s `Radio` is our `RadioGroup`, or a `Checkbox` for several. Two or three views of one surface are a `SegmentedControl`.',
-        behaviour: '"The whole tile is the click and focus target; tapping anywhere inside selects it." (https://vercel.com/geist/choicebox) "Don’t place nested buttons or links inside a tile that would steal the click." (https://vercel.com/geist/choicebox) "Selected state shows a check or filled dot in the corner." (https://vercel.com/geist/choicebox) "The border highlight alone isn’t enough on low-contrast screens." (https://vercel.com/geist/choicebox) "Disabled tiles need a Tooltip naming why (`Available on Pro`)." (https://vercel.com/geist/choicebox) "A faded tile with no reason reads as broken." (https://vercel.com/geist/choicebox) Ours: each tile is a `ChoiceboxGroupItem`, which throws outside a `ChoiceboxGroup`. The group has a `label` and a `type`, and every tile a `title` and a `description`; a group or a tile without them does not compile. Tiles share one row and wrap to a column on a narrow screen; `orientation="vertical"` stacks them. They are 12 px apart, each with 12 px inside and 24 px between its words and its corner mark, the mark centred against the words. Colour: a selected, available tile is the one place blue sits on a choice, as a blue border, a blue tint behind the title and description, blue words, and a blue corner mark; a selected tile that is unavailable stays grey, never a faded blue. An unselected tile stays neutral and takes a grey fill on hover. The corner always draws the dot or the check, empty until the tile is selected. The whole tinted row (title, specs, description, reason and corner mark) is the label that selects; `children` of a tile appear below that row while it is selected, outside the label, so a click there does not select, and they are for reading, never a link or a button. A tile, or the whole group, is unavailable only with a `disabledReason`, written under the tile\'s description or the legend, and only its title greys. A tile may carry `specs`, grey chips under its title, and one `badge` beside it for the option to prefer (*Recommended*); both are grey `secondary` badges, because blue marks only the selected tile.',
+        behaviour: '"The whole tile is the click and focus target; tapping anywhere inside selects it." (https://vercel.com/geist/choicebox) "Don’t place nested buttons or links inside a tile that would steal the click." (https://vercel.com/geist/choicebox) "Selected state shows a check or filled dot in the corner." (https://vercel.com/geist/choicebox) "The border highlight alone isn’t enough on low-contrast screens." (https://vercel.com/geist/choicebox) "Disabled tiles need a Tooltip naming why (`Available on Pro`)." (https://vercel.com/geist/choicebox) "A faded tile with no reason reads as broken." (https://vercel.com/geist/choicebox) Ours: each tile is a `ChoiceboxGroupItem`, which throws outside a `ChoiceboxGroup`. The group has a `label` and a `type`, and every tile a `title` and a `description`; a group or a tile without them does not compile. Tiles share one row and wrap to a column on a narrow screen; `orientation="vertical"` stacks them. They are 12 px apart, each with 12 px inside and 24 px between its words and its corner mark, the mark centred against the words. Colour: a selected, available tile is the one place blue sits on a choice, as a blue border, a blue tint behind the title and description, blue words, and a blue corner mark; a selected tile that is unavailable stays grey, never a faded blue. An unselected tile stays neutral and takes a grey fill on hover. The corner always draws the dot or the check, empty until the tile is selected. The whole tinted row (title, specs, description, reason and corner mark) is the label that selects; `selectedFacts` of a tile appear below that row while it is selected, outside the label, so a click there does not select, and they are text for reading, never a link or a button. A tile, or the whole group, is unavailable only with a `disabledReason`, written under the tile\'s description or the legend, and only its title greys. A tile may carry `specs`, grey chips under its title, and one `badge` beside it for the option to prefer (*Recommended*); both are grey `secondary` badges, because blue marks only the selected tile.',
         words: '"Titles are parallel: one Title Case title plus one sentence-case description per tile, ending in a period." (https://vercel.com/geist/choicebox) "Don’t restate the title in the description." (https://vercel.com/geist/choicebox) "The description adds the differentiator (`$20/mo · 100 GB bandwidth`), not a synonym." (https://vercel.com/geist/choicebox) "Icons are decorative when paired with a title; if the icon is the only label, give the tile an `aria-label` naming the choice." (https://vercel.com/geist/choicebox) Ours: the title is a short noun phrase in sentence case: *Pro trial*; the description is *Free for two weeks.* The label names the choice: *Plan*.',
         access: '"Tiles render as radios or checkboxes under the hood, so keep them inside a `<fieldset>` with a `<legend>` so screen readers announce the group." (https://vercel.com/geist/choicebox) "Arrow keys move within a single-select group, Space toggles in multi-select." (https://vercel.com/geist/choicebox) "Don’t override those keys with custom handlers." (https://vercel.com/geist/choicebox) "Color is not the selection signal." (https://vercel.com/geist/choicebox) "Pair the highlight border with the corner check so colorblind users still see what’s active." (https://vercel.com/geist/choicebox) Ours: a `FieldSet` with the label as its legend, which names a group of checkboxes; a `role="radiogroup"` is labelled by the same legend. Each tile is named by its title and described by its description and reason. Keyboard focus outlines the whole tile, and the box in its corner draws no outline of its own.',
     },
@@ -670,7 +681,7 @@ export const USAGE = [
         summary: 'Short metadata beside its subject: a role, a plan, "Beta".',
         when: '"Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge) "One badge per row; two side by side is a sign the row needs a second column." (https://vercel.com/geist/badge) Ours: a state is a `StatusBadge`; a `Badge` is a role (*Owner*), a plan, an environment, *Beta*. It always has a word, or one `icon` with a `title`, and the type asks for it. `size` follows the type beside it: `sm` (20 px) next to small labels, `md` (24 px) in a row, `lg` (32 px) in a header. The category fills (teal, purple, pink) name a kind.',
         instead: '"For a colored dot without text, use `Status Dot`." (https://vercel.com/geist/badge) Ours: a single dot is never a status; a state is `StatusBadge`, its tone\'s shape of dots and its word, with no pill. "For clickable filter chips that toggle a query, use the `pill` variant or a small `Button`." (https://vercel.com/geist/badge) Ours: there is no `pill` variant; a filter that toggles a query is a `Button` or `CollectionFilters`. For a state use `StatusBadge`, which draws the tone as its shape; Badge has no gray, green, red, amber or blue fill. One categorical fact in a row is a `Tag`. A change in a figure is a `TrendBadge`.',
-        behaviour: '"Badges are static labels." (https://vercel.com/geist/badge) "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge) Ours: it takes no `onClick`, no hover and no focus; it becomes a link only through `render` with a real anchor, and only `outline` takes the hover, a gray fill. "Keep badge content to text or `icon` + text." (https://vercel.com/geist/badge) "Never stack two icons or a child Badge inside a Badge." (https://vercel.com/geist/badge) Ours: never a paragraph either. "Pair lifecycle badges (`Alpha`, `Beta`, `Early Access`) with a `Tooltip` that names the limit, like `Alpha: API may change before GA`." (https://vercel.com/geist/badge) Ours: the badge is the `render` of a `TooltipTrigger` with `tabIndex={0}`, so keyboard and touch users reach the limit it names. "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge) Ours: only `StatusBadge` carries a state, and it always draws its tone\'s shape. "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge) "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge) Ours: those meanings are `StatusBadge`\'s, as the tones `success`, `danger`, `warning`, `info` and `neutral`, each drawn as its shape. `Badge` is a fixed-height pill (20, 24 or 32 px) with no border: colour sits on the fill and the word. A soft fill takes its hue\'s strong shade for the word, `default` is the foreground colour inverted, and `outline` is neutral, a page-colour fill held by a 1 px inset ring. With an icon, the left padding is 6, 8 or 12 px, so the mark and the word look evenly spaced. The icon takes the word\'s colour.',
+        behaviour: '"Badges are static labels." (https://vercel.com/geist/badge) "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge) Ours: it takes no `onClick`, no hover and no focus; it becomes a link only through `render` with a real anchor, and only `outline` takes the hover, a gray fill. "Keep badge content to text or `icon` + text." (https://vercel.com/geist/badge) "Never stack two icons or a child Badge inside a Badge." (https://vercel.com/geist/badge) Ours: never a paragraph either. The type holds it: the children are one string and `icon` is one lucide icon component (`icon={Lock}`), so no element, and no second label, fits inside. "Pair lifecycle badges (`Alpha`, `Beta`, `Early Access`) with a `Tooltip` that names the limit, like `Alpha: API may change before GA`." (https://vercel.com/geist/badge) Ours: the badge is the `render` of a `TooltipTrigger` with `tabIndex={0}`, so keyboard and touch users reach the limit it names. "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge) Ours: only `StatusBadge` carries a state, and it always draws its tone\'s shape. "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge) "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge) Ours: those meanings are `StatusBadge`\'s, as the tones `success`, `danger`, `warning`, `info` and `neutral`, each drawn as its shape. `Badge` is a fixed-height pill (20, 24 or 32 px) with no border: colour sits on the fill and the word. A soft fill takes its hue\'s strong shade for the word, `default` is the foreground colour inverted, and `outline` is neutral, a page-colour fill held by a 1 px inset ring. With an icon, the left padding is 6, 8 or 12 px, so the mark and the word look evenly spaced. The icon takes the word\'s colour.',
         words: '"Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge) Ours: sentence case (*Enterprise trial*). "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge) Ours: the term is our own API\'s. "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)',
         access: '"Set `title` for icon-only or ambiguous badges so screen readers announce the meaning." (https://vercel.com/geist/badge) Ours: an icon alone must set `title`, and the type asks for it. Read in place as text. "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge) Ours: a coloured variant still carries its word.',
     },
@@ -951,7 +962,7 @@ export const USAGE = [
     },
     {
         name: "TabsNav",
-        module: "tabs",
+        module: "tabs-nav",
         family: "Navigation",
         summary: "Sibling views of one object, each with its own URL, under the top bar.",
         when: "Sibling views of one object under the top bar, when each view has its own URL (an object's sections), with `TabsLink` for each.",
@@ -966,7 +977,7 @@ export const USAGE = [
         family: "Navigation",
         summary: "The classes of a link that reads as text: `inline` inside a sentence, `plain` on its own, `quiet` for a muted way out.",
         when: "A link inside a sentence, or offered alone as a section's way on (`inline`, blue and underlined at rest); a link that is itself the value, such as a record's name or a fact (`plain`); a secondary way out beside the content, such as a card header's *See everything*, which takes the same blue treatment as `inline`; or a muted way to somewhere such as a footer's *Learn more* (`quiet`).",
-        instead: "A command is a `Button`; a destination drawn as a button is a link with `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`. Breadcrumb and back navigation are not text links: they keep their own quieter navigation treatment.",
+        instead: "A command is a `Button`; a destination drawn as a button is a `ButtonLink`. Going to a record from its row is the record's name in `RecordIdentity`. Breadcrumb and back navigation are not text links: they keep their own quieter navigation treatment.",
         behaviour: "Classes only: the caller renders the real anchor or router link. `inline` thickens its underline on hover; `plain` and `quiet` underline on hover. The underline sits 4 px under the text in every kind. Paint changes ride the shared paint transition. Colour: only `inline` takes the link blue, as Vercel puts blue on links and nowhere else in running text; `plain` keeps the colour of the text around it, and `quiet` is muted and turns ink on hover, which is how a card footer's or a list note's *Learn more* reads. A link that leaves the product ends in the arrow icon after its text, which `quiet` sizes.",
         words: "The link's text names where it goes: *Open Billing*, *Read the privacy notice*; never *Click here* or a bare URL.",
         access: "A real `a` with an `href`. A link that leaves the product says so in its text or carries the arrow with a name. Focus is the base layer's 2 px outline.",
@@ -989,7 +1000,7 @@ export const USAGE = [
         summary: "The surface of every card; on its own only a container inside a composition.",
         when: '"For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: only inside a composition that owns the job: the object card of an `ObjectPage`, the setting card of a `SettingsSection`, a KPI, a chart, a table. A new kind of card is a new composition, never a `Card` assembled at a call site.',
         instead: "\"Groups related form controls inside a bordered card with optional footer actions.\" (https://vercel.com/geist/fieldset) Ours: that card, a title and description, one control and a footer with help at the start and one action at the end, is `SettingsSection`. An object's card (a header bar with its name and commands, a body of facts, rows that open, a footer hint with one link elsewhere) is `ObjectPage`. The page's title row is never in a card. A row of a list is `Item`. A plane of brand colour is `BrandField`.",
-        behaviour: "\"One Note per concept.\" (https://vercel.com/geist/note) \"Stacking three Notes on a card means the page architecture, not the Note copy, is wrong.\" (https://vercel.com/geist/note) \"Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary.\" (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `surface` defaults to `resting`, the resting height of \"Elevation & Depth\" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`. An action of one control (a button, a badge, a sparkline, the three dots) stands at the title's right, as Vercel keeps a card's Add on its title row on a phone; on a card narrower than 28rem the description runs under both, and the control moves under the title only when the title's longest word would not fit beside it, so it never covers it. An action of several controls moves under the description in a header narrower than 28rem (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. It is 56 px high whether or not it holds a button, and as high as its lines in a `size=\"sm\"` card, the compact card of a side column or a figure. The two kinds differ in what their header and footer hold: an object card's header holds the object's commands and its footer only a link, so it never saves; a setting card's header holds a title, a description and at most a switch that applies on change, and its footer holds the Save. A card is neutral; colour enters only through a status inside it or a section's `tone`.",
+        behaviour: '"One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`. An action of one control (a button, a badge, a sparkline, the three dots) stands at the title\'s right, as Vercel keeps a card\'s Add on its title row on a phone; on a card narrower than 28rem the description runs under both, and the control moves under the title only when the title\'s longest word would not fit beside it, so it never covers it. An action of several controls moves under the description in a header narrower than 28rem (the header\'s own width, not the viewport\'s); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card\'s edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section\'s action. It is 56 px high whether or not it holds a button, and as high as its lines in a `size="sm"` card, the compact card of a side column or a figure. The two kinds differ in what their header and footer hold: an object card\'s header holds the object\'s commands and its footer only a link, so it never saves; a setting card\'s header holds a title, a description and at most a switch that applies on change, and its footer holds the Save. A card is neutral; colour enters only through a status inside it or a section\'s `tone`. `flush="bottom"` ends the card at its last child, for rows whose hairlines run to its bottom edge, as a footer does; `flush="all"` lets the content meet every edge with no gap between children, for one picture or grid that fills the card.',
         words: "The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.",
         access: "A plain container; give it `render={<section />}` with a heading when it is a region of the page.",
     },
@@ -1077,7 +1088,7 @@ export const USAGE = [
         summary: "A row said in a sentence: media, a title, one line of description, trailing actions.",
         when: "“Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity) Ours: things best said in a sentence, with one or two controls and no columns: a connected account, a session, a notification preference, a Library shelf row, an activity row. Media, a title over its description, trailing controls.",
         instead: "“For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity) “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity) Ours: Geist's `Table` is a `DataTable` and its `Description` is `ObjectFacts`. An object a person opens, with a mark, facts and a status, is a `RecordList` row; the same row edited in place is a `RecordList` with an `editor`. A page whose job is one collection is `CollectionPage`. Agents in a gallery are `AgentListRow`; Library entries `CatalogEntry`.",
-        behaviour: 'A list of descriptive rows is an `ItemGroup` of `Item`s, never table semantics. Every row has a title over its one muted description line; only a message row read whole, or a second content beside the first, may be description only. Media, content and actions stand 16 px apart, centred on one another, in a 72 px row of 16 px padding; a 600 title stands over one 20 px description with no gap, and each holds one line and ends in an ellipsis (`whole` lets a message wrap). Inside a card the group is `divided`: no gaps, one hairline between items. An item that is an `a`, a `button` or a `label` takes the `accent` hover and is one hit target; a plain item never reacts to hover; nested controls stay independent. A button in the row is `size="sm"` (32 px). A row a person picks starts with `ItemSelect` and is drawn `render={<label />}`, so the whole row ticks its box and has no other control. A second content beside the first takes only the room its words need. Colour is neutral: the title in ink, the description and any trailing words muted, no hue. “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity) Ours: the third control goes in the row\'s three dots. “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity) Ours: `ItemSkeleton` stands in a `SkeletonRegion`, still, with no shimmer.',
+        behaviour: "A list of descriptive rows is an `ItemGroup` of `Item`s, never table semantics. Every row has a title over its one muted description line; only a message row read whole, or a second content beside the first, may be description only. Media, content and actions stand 16 px apart, centred on one another, in a 72 px row of 16 px padding; a 600 title stands over one 20 px description with no gap, and each holds one line and ends in an ellipsis (`whole` lets a message wrap). Inside a card the group is `divided`: no gaps, one hairline between items. An item that is an `a`, a `button` or a `label` takes the `accent` hover and is one hit target; a plain item never reacts to hover; nested controls stay independent. An `xs` item inside a menu or a combobox option takes the option's padding and adds none. A button in the row is `size=\"sm\"` (32 px). A row a person picks starts with `ItemSelect` and is drawn `render={<label />}`, so the whole row ticks its box and has no other control. A second content beside the first takes only the room its words need. Colour is neutral: the title in ink, the description and any trailing words muted, no hue. “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity) Ours: the third control goes in the row's three dots. “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity) Ours: `ItemSkeleton` stands in a `SkeletonRegion`, still, with no shimmer.",
         words: "“Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity) “Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen.” (https://vercel.com/geist/entity) Ours: the title is the name, or what happened as a short sentence (*Nadia filed 12 invoices*), and the description one sentence, in sentence case: *Remove member*, never *Remove*.",
         access: "Draw each row of a group `render={<li />}`, so the group is a list of list items. A linked item's text is its name; image media is decorative beside the title. “For multi-select rows, the leading `Checkbox` carries `aria-label=\"Select {entity name}\"` so the row is selectable without relying on the visual label.” (https://vercel.com/geist/entity) Ours: the box of `ItemSelect` is named *Select {name}* in the product's words.",
     },
@@ -1089,7 +1100,7 @@ export const USAGE = [
         when: '"Use `<Kbd>` for shortcut hints inside prose, menu items, and button suffixes." "Use `small` inside dense surfaces like menu rows, command-bar items, or table cells where the default size crowds adjacent text." (https://vercel.com/geist/keyboard-input) Ours: `small` is `size="sm"`. Find with ⌘K, the sidebar with ⌘B. Only shortcuts actually bound are shown.',
         instead: '"In long-form docs that narrate a shortcut, write `the ⌘ K shortcut` directly so the page renders the same when copied to plain text." (https://vercel.com/geist/keyboard-input) Ours: a key a person types into is an `Input`; a code a person types is `InputOTP`.',
         behaviour: '"Pass modifiers via boolean props (`meta`, `shift`, `alt`, `ctrl`)." "The component swaps `⌘` for `Ctrl` on Windows and Linux, so hard-coding `<Kbd>Cmd+K</Kbd>` ships the wrong glyph to half your users." (https://vercel.com/geist/keyboard-input) Ours: not interactive. ⌘ ⇧ ⌥ ⌃ on Apple systems, *Ctrl* *Shift* *Alt* elsewhere, with `meta` becoming *Ctrl*. The server draws the Apple form and the browser corrects it after hydration. Several flags make one key: `meta shift`; there is no `KbdGroup`. `CommandShortcut` draws this same `Kbd`. It is 24 px high (`size="sm"`: 20 px) in the interface\'s sans type, 14 px (12 px), with no gap between Apple glyphs. Colour: one neutral key in the primary ink on the page surface with a hairline ring, no hue; inside a tooltip it drops the ring and takes a fill one step off the tooltip\'s inverted surface, and the tooltip draws it 20 px high whatever its `size`.',
-        words: '"`children` is one key, digit, or named key (`K`, `7`, `Enter`, `Esc`)." "Don’t lowercase it, don’t spell out modifiers inside, and don’t pack a sentence into the element." "Punctuation lives outside the element: `Press <Kbd meta>K</Kbd> to open the command menu.`" "Period, comma, and `or` separators stay in surrounding prose so screen readers don’t announce them as keys." (https://vercel.com/geist/keyboard-input) Ours: children is a capital letter, a digit, a mark or a named key from `KBD_KEYS`.',
+        words: '"`children` is one key, digit, or named key (`K`, `7`, `Enter`, `Esc`)." "Don’t lowercase it, don’t spell out modifiers inside, and don’t pack a sentence into the element." "Punctuation lives outside the element: `Press <Kbd meta>K</Kbd> to open the command menu.`" "Period, comma, and `or` separators stay in surrounding prose so screen readers don’t announce them as keys." (https://vercel.com/geist/keyboard-input) Ours: `keyName` is a capital letter, a digit, a mark or a named key from `KBD_KEYS`.',
         access: "Ours: a `kbd` element, read in order; the command's own name carries the meaning.",
     },
     {
@@ -1187,7 +1198,7 @@ export const USAGE = [
         summary: "One command a person copies and runs in a terminal.",
         when: "“Use Snippet for a runnable shell command the user is meant to copy. For inline tokens (env var names, paths) use `InlineCode`, and for multi-line source use `CodeBlock`.” (https://vercel.com/geist/snippet) Ours: a command or a short sequence of commands to paste into a terminal: an install, a sign-in, a pairing step.",
         instead: "Ours: a value that is not a command (an identifier, a URL, a checksum) is `TextWithCopyButton`. A script someone reads before running is a `CodeBlock`. A token inside a sentence is inline code.",
-        behaviour: '“Pass the command as `text`. Authors never type a leading `$`; the component renders the prompt, so `text="$ vercel deploy"` displays as `$ $ vercel deploy`.” (https://vercel.com/geist/snippet) “Set `prompt={false}` for non-shell content (URLs, JSON, output you want copied verbatim) so the rendered string matches what gets copied.” (https://vercel.com/geist/snippet) “Keep one command per Snippet. Pass an array to `text` for a short multi-line block; for longer scripts, switch to `CodeBlock` so users can read before they copy.” (https://vercel.com/geist/snippet) “Use `copyText` only when `text` contains rich nodes (`<span>` highlights, conditional fragments) and the clipboard payload should be plain text. For a string `text`, `copyText` is redundant.” (https://vercel.com/geist/snippet) “Use the `copied` prop to control the copy button animation externally. This lets you copy different text (e.g. from a context card) while reusing the snippet\'s checkmark feedback.” (https://vercel.com/geist/snippet) “Use `copied` plus an `onCopy` callback when a parent surface (a card, a tooltip) needs to show the same checkmark feedback while copying different text.” (https://vercel.com/geist/snippet) Ours: Geist\'s `dark`, `type` and `width` props are not ours: `variant` sets the colour and the shell sizes itself to its text. The copy mark is a `CopyButton`; `copied` and `onCopy` let a parent show its checkmark. An array of strings is copied joined by line breaks, one row each after its own prompt; the prompt is never copied. The shell is as wide as its text, up to its row (`className="w-full"` fills the row); a longer line scrolls sideways with no scrollbar. `text=""` with a `placeholder` shows the placeholder, copies nothing and has no button. `text` that is an element needs `copyText`; a string needs none. `onCopy` reports a copy once the clipboard confirms. `variant` puts one colour on the whole shell, its text and the copy mark together: `info`, `warning` or `destructive` for a command inside a note of that kind, `inverted` for a dark block on a light page; the default is neutral, which is what almost every snippet is. Hovering the copy mark dims it and draws a 1 px ring; it never takes a fill or leaves the shell\'s text colour.',
+        behaviour: '“Pass the command as `text`. Authors never type a leading `$`; the component renders the prompt, so `text="$ vercel deploy"` displays as `$ $ vercel deploy`.” (https://vercel.com/geist/snippet) Ours: a leading `$ `, a lone `$` or a leading `> ` typed into a string line is dropped while the prompt is on, so the prompt shows once and is never copied. “Set `prompt={false}` for non-shell content (URLs, JSON, output you want copied verbatim) so the rendered string matches what gets copied.” (https://vercel.com/geist/snippet) “Keep one command per Snippet. Pass an array to `text` for a short multi-line block; for longer scripts, switch to `CodeBlock` so users can read before they copy.” (https://vercel.com/geist/snippet) “Use `copyText` only when `text` contains rich nodes (`<span>` highlights, conditional fragments) and the clipboard payload should be plain text. For a string `text`, `copyText` is redundant.” (https://vercel.com/geist/snippet) “Use the `copied` prop to control the copy button animation externally. This lets you copy different text (e.g. from a context card) while reusing the snippet\'s checkmark feedback.” (https://vercel.com/geist/snippet) “Use `copied` plus an `onCopy` callback when a parent surface (a card, a tooltip) needs to show the same checkmark feedback while copying different text.” (https://vercel.com/geist/snippet) Ours: Geist\'s `dark`, `type` and `width` props are not ours: `variant` sets the colour and the shell sizes itself to its text. The copy mark is a `CopyButton`; `copied` and `onCopy` let a parent show its checkmark. An array of strings is copied joined by line breaks, one row each after its own prompt; the prompt is never copied. The shell is as wide as its text, up to its row (`className="w-full"` fills the row); a longer line scrolls sideways with no scrollbar. `text=""` with a `placeholder` shows the placeholder, copies nothing and has no button. `text` that is an element needs `copyText`; a string needs none. `onCopy` reports a copy once the clipboard confirms. `variant` puts one colour on the whole shell, its text and the copy mark together: `info`, `warning` or `destructive` for a command inside a note of that kind, `inverted` for a dark block on a light page; the default is neutral, which is what almost every snippet is. Hovering the copy mark dims it and draws a 1 px ring; it never takes a fill or leaves the shell\'s text colour.',
         words: '“Pair `placeholder` with `text=""` for an empty state. Sentence case, no trailing period, no `Please`: `Run vercel link to fetch env vars`. The placeholder is informational, not copied.” (https://vercel.com/geist/snippet) Ours: the command as typed. The placeholder example is *Run nadia login to connect this computer*. `copyLabel` names the command (*Copy install command*); `copiedLabel` and `copyFailedLabel` are required with it.',
         access: "Ours: the text is read as text; the prompt is hidden from assistive technology. The button is named by `copyLabel`, and the result is read once from its status.",
     },
@@ -1374,7 +1385,7 @@ export const USAGE = [
         summary: "A short, optional fact about its trigger.",
         when: '"Use a Tooltip to explain **why** something exists, not **what** it is." "The visible label names the thing; the tooltip adds the constraint, scope, or limit." (https://vercel.com/geist/tooltip) "Use lifecycle Tooltips (`Alpha`, `Experimental`, `Beta`, `Early Access`) to name the limits that apply: API stability, SLA, support, pricing, retention." (https://vercel.com/geist/tooltip) Ours: the parts are `TooltipProvider`, `Tooltip`, `TooltipTrigger` and `TooltipContent`. A shortcut is shown in a tooltip only when one is bound.',
         instead: '"For an entity preview with metadata rows (avatar, identifier, 2–4 facts, optional action), use `Context Card`." "For long-form content or actions that need persistence, route to a `Drawer` or page navigation." (https://vercel.com/geist/tooltip) Ours: `Context Card` is `HoverCard` and `Drawer` is `Sheet`. A disabled command\'s reason is written under it, never only in a tooltip.',
-        behaviour: '"Tooltips open on hover and on keyboard focus." "Keep the default ~150ms entry delay so the tooltip doesn’t flicker on a sweeping mouse." "Don’t wrap a labelled `Input` in a Tooltip." "The trigger lands on the `<label>`, not the field, and the tooltip text becomes a second invisible label for screen readers." "Put help on a sibling icon button." "Keep primary actions outside the Tooltip; touch users can’t reach a hover-revealed control." (https://vercel.com/geist/tooltip) Ours: the pointer wait is 150 ms and keyboard focus opens it at once; `delay={0}` on the trigger or a `TooltipProvider` removes the wait. Above by default, 10 px from the trigger, at most 250 px wide, 13 px text balanced over its lines. Never interactive. `arrow={false}` drops the stem (Geist\'s `tip={false}`); `centerText={false}` left-aligns a tooltip that wraps (Geist\'s `center={false}`). Geist\'s coloured `type` is not provided. `TooltipContent` requires its text as children. Colour: one inverted neutral, the page\'s ink as the fill and its surface as the text, with a stem of the same fill and no hue, in both themes; a shortcut is a `Kbd` after the text, drawn 20 px high.',
+        behaviour: '"Tooltips open on hover and on keyboard focus." "Keep the default ~150ms entry delay so the tooltip doesn’t flicker on a sweeping mouse." "Don’t wrap a labelled `Input` in a Tooltip." "The trigger lands on the `<label>`, not the field, and the tooltip text becomes a second invisible label for screen readers." "Put help on a sibling icon button." "Keep primary actions outside the Tooltip; touch users can’t reach a hover-revealed control." (https://vercel.com/geist/tooltip) Ours: the pointer wait is 150 ms and keyboard focus opens it at once; `delay={0}` on the trigger or a `TooltipProvider` removes the wait. Above by default, 10 px from the trigger, at most 250 px wide, 13 px text balanced over its lines. Never interactive. `arrow={false}` drops the stem (Geist\'s `tip={false}`); `centerText={false}` left-aligns a tooltip that wraps (Geist\'s `center={false}`). Geist\'s coloured `type` is not provided. `TooltipContent` requires its text as children, one string, so no control, link or second overlay fits inside it. Colour: one inverted neutral, the page\'s ink as the fill and its surface as the text, with a stem of the same fill and no hue, in both themes; a shortcut is `shortcut`, the `Kbd`\'s props, drawn as a `Kbd` after the text, 20 px high.',
         words: '"One sentence or fragment in `text`." "Sentence case, no period for a single fragment." "Skip tooltips that repeat the visible label (`text="Rate Limit"` on a `Rate Limit` button) or describe the interaction (`text="Click to override"`)." "Lifecycle Tooltips follow `{Label}: {one-line meaning}. {Specific limit}.`" "For a paid Beta feature, combine the lifecycle and pricing in one Tooltip rather than stacking two badges." (https://vercel.com/geist/tooltip) Ours: the text is `TooltipContent`\'s children, for example *Resets on 1 November*.',
         access: '"An icon-only trigger needs an `aria-label` that names the action; the Tooltip body adds context, it doesn’t replace the label." "Escape closes the tooltip and returns focus to the trigger." (https://vercel.com/geist/tooltip)',
     },
@@ -1532,6 +1543,17 @@ export const USAGE = [
         words: '"Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Body is read-mostly: sentence case prose with Title Case sub-headings. Action buttons are optional; when present, follow `Verb + Noun`." (https://vercel.com/geist/sheet) "Don’t duplicate the page header inside the sheet; the sheet is the detail layer." (https://vercel.com/geist/sheet) Ours: titles and sub-headings are sentence case where Geist writes Title Case. A footer link names where it goes: *Open Rossi Ottica*.',
         access: '"Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) "Announce the sheet with `aria-labelledby` pointing at the title; pair it with `aria-describedby` only when the body is short and load-bearing." (https://vercel.com/geist/sheet) Ours: a dialog named by its title, with a Close named in the product\'s words by `closeLabel`. Focus returns to the row or the navigation button that opened it.',
     },
+    {
+        name: "SiteMenu",
+        module: "site-menu",
+        family: "Menus",
+        summary: "The public site's masthead menu below the large breakpoint.",
+        when: "The website's masthead below the large breakpoint, where the bar has no room for its section links, the Portal sign-in and the page's action.",
+        instead: "A product's account is `AccountMenu`; a record's or a page's commands are `ActionMenu` or `PageActions`' menu.",
+        behaviour: "The package's dropdown menu at the floating height, opened by the outline icon button with Lucide's `Menu`, so the trigger keeps the control geometry and the 44 px target on touch. It holds the same section links the bar shows on a wide page; below `md` a divider, then the sign-in, and below `sm` the page's action, where the bar hides each of them.",
+        words: 'The trigger\'s `label` names the menu ("Menu"); each link keeps the words the bar shows.',
+        access: "The trigger is a button named by `label`; each row is a menu item that is a link.",
+    },
     {
         name: "ThemeModeMenu",
         module: "theme-mode-switcher",