@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/dropdown-menu.js

@@ -1,19 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { PendingLabel } from "./pending-label.js";
 import { cn } from "../lib/utils.js";
 import { anchoredOverlayMotion } from "../lib/motion.js";
-import { menuSurface } from "../internal/menu-surface.js";
-import { ChevronRightIcon, CheckIcon } from "lucide-react";
+import { menuRow, menuSurface } from "../internal/menu-surface.js";
+import { ChevronRightIcon, CheckIcon, LockIcon } from "lucide-react";
 /**
- * A menu that floats from a visible trigger, built from its parts: the surface, labelled groups, commands, choices and dividers.
+ * A menu that floats from a visible trigger, built from its parts: the surface, labelled groups, commands, links, choices and dividers.
  *
  * @family Menus
- * @when A menu no composition draws: a column chooser, a sort, a product's own choices in a submenu.
- * @instead A record's or a page's commands are `ActionMenu` or `PageActions`' menu, from data. The account's rows are `AccountMenu`. A value to choose in a form is `Select`; finding across everything is `CommandDialog`.
- * @behaviour Solid floating surface, 12 px corners, 4 px inset, at least 224 px. Rows 36 px (44 on touch), 12 px padding, accent fill on hover and focus. Opens on click; typeahead, arrows, Escape returns focus to the trigger. A `DropdownMenuCommand` leads with its icon; one that cannot run stays, greyed, with its reason under it.
- * @words Commands are verb and noun in sentence case, "Remove mailbox", never a bare "Delete". About ten at most. Italian runs a third longer; rows wrap, never truncate.
- * @access `role="menu"`, items `menuitem`, the trigger `aria-expanded` while open. A command's icon is hidden; the value it acts on and its reason are its description.
+ * @when "Use Menu for a discoverable trigger that opens a list of actions on a single resource (a dots menu on a row, a dropdown on a primary entity)." (https://vercel.com/geist/menu) Ours: a menu no composition draws: a column chooser, a sort, a product's own choices in a submenu.
+ * @instead "For right-click or long-press on a row, use `ContextMenu`. For global commands behind `⌘K`, use `CommandMenu`. For two related primary actions, use a split button rather than burying the secondary action." (https://vercel.com/geist/menu) Ours: those are `ContextMenu` and `CommandDialog`; two related primary actions stand side by side as buttons. A record's or a page's commands are `ActionMenu` or `PageActions`' menu, from data. The account's rows are `AccountMenu`. A value to choose in a form is `Select`.
+ * @behaviour "Dropdown menu opened via button. Supports typeahead and keyboard navigation." (https://vercel.com/geist/menu) "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`. A solid floating surface, 200 px wide at least, 10 px from its trigger. A labelled trigger may end in a chevron; an icon trigger has none. Safe commands come first, each with its icon, groups split by a divider, the destructive command last. Colour sits on that command alone: its text is the error colour at rest and its row takes the soft error fill when highlighted; the panel, the other rows, a section title and the divider stay neutral, and a suffix or lock is muted, 12 px after the label. A command that cannot run stays in place with muted text, never dimmed, and says why in a muted line under its label, which a tap on a phone reads as well as a pointer, since a tooltip opens for the mouse only; a destructive one is muted, not red. Every row is 36 px (44 on touch) with the pointer cursor, or the default one when it cannot be chosen, a row with a reason growing by its line, and a section title is a muted row of that height. The highlight is the row's fill alone: no text inside a row changes colour with it, and a row that cannot be chosen takes no highlight.
+ * @words "Item children are Title Case `Verb + Noun` (`Rename Project`, `Duplicate Deployment`). Bare verbs like `Rename` or `Edit` are wrong outside obvious single-object context." (https://vercel.com/geist/menu) "End an item with `…` only when activating it opens a follow-up dialog (`Rename…`, `Transfer to Team…`)." (https://vercel.com/geist/menu) "Group destructive items at the bottom, separated by a divider, and keep the destructive copy as `Verb + Noun` (`Delete Project`, never bare `Delete`)." (https://vercel.com/geist/menu) "Section headers (`MenuSection title`) are Title Case, 1–2 words (`Workspace`, `Recent Projects`)." (https://vercel.com/geist/menu) "Cap a Menu around 10 items. Past that, group with `MenuSection` or move secondary actions to a settings page." (https://vercel.com/geist/menu) Ours: sentence case, not Title Case: "Remove mailbox", never a bare "Delete"; a section title is sentence case too. Italian runs a third longer; rows wrap, never truncate.
+ * @access "Up/Down arrows move focus through items, Home/End jump to first/last, Enter or Space activates." (https://vercel.com/geist/menu) "Typeahead jumps to the next item whose label starts with the typed character; keep the visible label first so typeahead matches what the user sees." (https://vercel.com/geist/menu) "Return focus to the trigger on close so keyboard users keep their place in the row." (https://vercel.com/geist/menu) Ours: `role="menu"` named by its trigger, items `menuitem`. Unlike Geist, which skips disabled rows, arrows land on a command that cannot run so its reason is read; it is still never highlighted and never runs. A command's icon is hidden; the value it acts on and its reason are its description. `DropdownMenuCommand` requires its `icon`; a command that cannot run takes `disabledReason`, and one a person may not run is `locked` with its `reason`, so nothing is greyed without saying why.
  */
 function DropdownMenu({ ...props }) {
     return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
@@ -24,55 +25,86 @@ function DropdownMenuPortal({ ...props }) {
 function DropdownMenuTrigger({ ...props }) {
     return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
-function DropdownMenuContent({ align = "start", alignOffset = 0, density = "comfortable", side = "bottom", sideOffset = 6, className, ...props }) {
+function DropdownMenuContent({ align = "start", alignOffset = 0, density = "comfortable", side = "bottom", sideOffset = 10, className, ...props }) {
     return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: 8, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", "data-density": density, className: cn("pointer-events-auto", menuSurface, anchoredOverlayMotion, className), ...props }) }) }));
 }
 function DropdownMenuGroup({ ...props }) {
     return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
-    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:pt-1.5 data-inset:pl-7", className), ...props }));
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-2 group-data-[density=comfortable]/menu:text-sm group-data-[density=comfortable]/menu:font-normal data-inset:pl-7", className), ...props }));
 }
+const itemRow = cn(menuRow, "data-[variant=destructive]:text-destructive-soft-foreground data-[variant=destructive]:not-data-disabled:focus:bg-destructive-soft data-[variant=destructive]:*:[svg]:text-destructive-soft-foreground data-[variant=destructive]:data-disabled:text-muted-foreground data-[variant=destructive]:data-disabled:*:[svg]:text-muted-foreground");
 function DropdownMenuItem({ className, iconOnly = false, inset, variant = "default", ...props }) {
-    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-soft-foreground data-[variant=destructive]:focus:bg-destructive-soft data-[variant=destructive]:focus:text-destructive-soft-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-soft-foreground", iconOnly &&
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, "data-variant": variant, className: cn(itemRow, iconOnly &&
             "size-8 min-w-touch-target shrink-0 justify-center rounded-sm p-0 group-data-[density=comfortable]/menu:p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0", className), ...props }));
 }
+/** A row that goes to an address: an anchor that is a menu item, which closes the menu when chosen. */
+function DropdownMenuLink({ className, closeOnClick = true, inset, ...props }) {
+    return (_jsx(MenuPrimitive.LinkItem, { "data-slot": "dropdown-menu-link", "data-inset": inset, closeOnClick: closeOnClick, className: cn(itemRow, className), ...props }));
+}
 /**
  * A command in a record's, a page's or the account's menu: its decorative icon
- * first, then its label, then the value it acts on in mono when it has one. A
- * command that cannot run now is `disabled` and stays in place, greyed, with
- * its `reason` under the label.
+ * first (at the end, after any `suffix`, with `iconEnd`), then its label, then
+ * the value it acts on in mono when it has one, and a `suffix` at the end. The
+ * icon takes the row's text colour; at the end it is muted, and red on a
+ * destructive command. A command that
+ * cannot run now takes `disabledReason` and stays in place with its text muted
+ * and the reason under its label, and a destructive one is muted too,
+ * not red. A command a person may not run is `locked`: inert, with a lock at
+ * the end and the `reason` it is inert, which a locked command must give. A
+ * command that starts work is `loading`: it says `loadingLabel` in its label's
+ * place, stays focusable and ignores a second press, with no dimming. A
+ * `link` is drawn as a link menu item, like `DropdownMenuLink`.
  */
-function DropdownMenuCommand({ icon, children, className, detail, reason, "aria-label": accessibleName, ...props }) {
+function DropdownMenuCommand({ icon, iconEnd = false, children, className, detail, disabledReason, link, locked, loading, loadingLabel, onClick, reason, suffix, "aria-label": accessibleName, ...props }) {
+    const busy = loading === true;
     const id = React.useId();
-    const describedBy = [detail ? `${id}-detail` : null, reason ? `${id}-reason` : null]
+    const why = locked ? reason : disabledReason;
+    const inert = locked === true || disabledReason !== undefined;
+    const describedBy = [detail ? `${id}-detail` : null, why ? `${id}-reason` : null]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs(DropdownMenuItem, { "aria-label": accessibleName, "aria-labelledby": describedBy && !accessibleName ? `${id}-label` : undefined, "aria-describedby": describedBy || undefined, ...props, className: cn(className, "h-auto w-full min-w-0 items-start justify-start gap-2.5 text-left font-normal whitespace-normal"), children: [_jsx("span", { "aria-hidden": "true", className: "flex h-5 shrink-0 items-center justify-center text-muted-foreground group-data-[variant=destructive]/dropdown-menu-item:text-current", children: icon }), _jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 break-words", children: [_jsx("span", { id: `${id}-label`, children: children }), detail ? (_jsx("span", { className: "font-label-mono text-label-mono text-muted-foreground", "data-slot": "dropdown-menu-detail", id: `${id}-detail`, children: detail })) : null, reason ? (_jsx("span", { className: "text-xs text-muted-foreground", "data-slot": "dropdown-menu-reason", id: `${id}-reason`, children: reason })) : null] })] }));
+    const end = locked ? (_jsx(LockIcon, {})) : iconEnd ? (_jsxs(_Fragment, { children: [suffix, _jsx("span", { "aria-hidden": "true", className: "flex h-5 items-center justify-center in-data-[variant=destructive]:text-destructive-soft-foreground", children: icon })] })) : (suffix);
+    const hasLabelledParts = describedBy !== "" || Boolean(end);
+    const row = {
+        "aria-label": accessibleName,
+        "aria-labelledby": hasLabelledParts && !accessibleName ? `${id}-label` : undefined,
+        "aria-busy": busy || undefined,
+        "aria-describedby": describedBy || undefined,
+        "aria-disabled": busy || inert || undefined,
+        closeOnClick: busy ? false : props.closeOnClick,
+        className: cn(className, "h-auto w-full min-w-0 items-start justify-start gap-2 text-left font-normal whitespace-normal data-disabled:pointer-events-auto"),
+        children: (_jsxs(_Fragment, { children: [iconEnd ? null : (_jsx("span", { "aria-hidden": "true", className: "flex h-5 shrink-0 items-center justify-center text-current", children: icon })), _jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 break-words", children: [_jsx("span", { id: `${id}-label`, children: loadingLabel === undefined ? (children) : (_jsx(PendingLabel, { pending: busy, pendingLabel: loadingLabel, children: children })) }), detail ? (_jsx("span", { className: "font-label-mono text-label-mono text-muted-foreground", "data-slot": "dropdown-menu-detail", id: `${id}-detail`, children: detail })) : null, why ? (_jsx("span", { className: "text-body-sm text-muted-foreground", "data-slot": "dropdown-menu-reason", id: `${id}-reason`, children: why })) : null] }), end ? (_jsx("span", { "aria-hidden": locked || undefined, className: "ml-auto flex h-5 shrink-0 items-center gap-2 pl-3 text-muted-foreground", "data-slot": "dropdown-menu-suffix", children: end })) : null] })),
+    };
+    if (link !== undefined && !inert && !busy) {
+        return _jsx(DropdownMenuLink, { ...row, label: props.label, render: link });
+    }
+    return (_jsx(DropdownMenuItem, { "data-slot": "dropdown-menu-item", "data-locked": locked || undefined, ...props, ...row, disabled: inert, onClick: busy ? undefined : onClick }));
 }
 function DropdownMenuSub({ ...props }) {
     return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
-    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn(menuRow, "data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
-function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+function DropdownMenuSubContent({ align = "start", alignOffset = -6, side = "right", sideOffset = 0, className, ...props }) {
     return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-24", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
 }
 function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn(menuRow, "pr-8 group-data-[density=comfortable]/menu:pr-8", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
 }
 function DropdownMenuRadioGroup({ ...props }) {
     return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
 }
 function DropdownMenuRadioItem({ className, iconOnly = false, children, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", iconOnly &&
-            "size-8 min-w-touch-target justify-center rounded-sm p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 data-checked:bg-muted data-checked:text-foreground", className), ...props, children: [!iconOnly ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) })) : null, children] }));
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, className: cn(menuRow, "pr-8 group-data-[density=comfortable]/menu:pr-8", iconOnly &&
+            "size-8 min-w-touch-target justify-center rounded-sm p-0 group-data-[density=comfortable]/menu:p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 data-checked:bg-muted data-checked:text-foreground", className), ...props, children: [!iconOnly ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) })) : null, children] }));
 }
 function DropdownMenuSeparator({ className, ...props }) {
-    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1.5 my-1.5 h-px bg-border", className), ...props }));
 }
 function DropdownMenuShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs text-muted-foreground", className), ...props }));
 }
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCommand, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuLink, DropdownMenuCommand, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/empty-state.d.ts

@@ -1,10 +1,21 @@
+import { type ReactElement } from "react";
+import { type EmptyScope } from "../internal/empty.js";
+import { type CopyButtonProps } from "./copy-button.js";
 import type { EmptyArt } from "./empty-art.js";
 import { type PageCommand } from "./page-actions.js";
 import { type ResolvedMessage } from "./product-message.js";
+/** A link that leaves for the product's documentation: a command drawn from the product's router link, so it carries `link`, never `onClick`. */
+export type EmptyStateDocsLink = Extract<PageCommand, {
+    link: ReactElement;
+}>;
+/** The identifier of a system failure, worded by the caller: "Request ID" and the three copy words. */
+export type EmptyStateReference = {
+    label: string;
+} & Pick<CopyButtonProps, "value" | "copyLabel" | "copiedLabel" | "copyFailedLabel">;
 export type EmptyStateProps = {
     /** The frame follows the container: page and region take a resting card with its own edge; card takes none. */
-    scope?: "page" | "region" | "card";
-    /** The first use's title level; 3 inside a titled section. */
+    scope?: EmptyScope;
+    /** The title level of a first use, a denial or a failure; 3 inside a titled section. */
     headingLevel?: 2 | 3;
 } & ({
     kind: "firstUse";
@@ -13,8 +24,8 @@ export type EmptyStateProps = {
     picture: EmptyArt;
     /** The action that fills it, only when this viewer can add. */
     action?: PageCommand;
-    /** `outline` while the page's title row shows a primary of its own: one default button per surface. */
-    actionVariant?: "default" | "outline";
+    /** Where the product explains this section: the one muted link under the action. */
+    docs?: EmptyStateDocsLink;
 } | {
     kind: "nothingYet";
     message: string;
@@ -22,25 +33,37 @@ export type EmptyStateProps = {
     kind: "noResults";
     message: string;
     clear: PageCommand;
+} | {
+    kind: "cleared";
+    message: string;
+} | {
+    kind: "denied";
+    title: string;
+    description: string;
+    /** The way out this viewer has: ask for access, or change plan. */
+    action?: PageCommand;
+    /** A denial fills the route or its region; one gated tile inside an open page is a `MessageNotice`. */
+    scope?: Exclude<EmptyScope, "card" | "line">;
 } | {
     kind: "failed";
     message: ResolvedMessage;
+    /** The identifier of a failure on our side, to paste into a support thread. Never on a denial or a wrong value. */
+    reference?: EmptyStateReference;
 });
 /** One kind of absence, as a composition takes it: the composition sets its frame. */
 export type EmptyStateKind<K extends EmptyStateProps["kind"]> = Omit<Extract<EmptyStateProps, {
     kind: K;
 }>, "scope" | "headingLevel">;
 /**
- * What a place with nothing in it says: a first use shows its section's
- * picture, a title, one line and the action that fills it; an empty list, a
- * search that found nothing and a read that failed stay quiet.
+ * What a place with nothing in it says, by its cause: never created, empty at the moment, nothing
+ * matched, finished, not allowed, or failed to load.
  *
  * @family Feedback
- * @when A collection, a section or a page has nothing to show: it never had a record (`firstUse`), it is empty right now and fills by itself (`nothingYet`), the search or a filter found nothing (`noResults`), or its read failed (`failed`).
- * @instead A list's rows still loading are its skeleton rows, never an empty state. A failure of one record's own action is that record's row message. A failure that blocks the whole page, or a notice about the account, is a `NoticeBanner`.
- * @behaviour The frame follows the container: a page or a region stands on a resting card with its own edge, inside a card it takes none, and a collection always passes `card`. A first use's picture comes from the one approved set and arrives once, from faint and soft to sharp, after it loads, with no animation under reduced motion; nothing else moves. Only `firstUse` has a picture or a title; only `failed` has a mark, the warning, with its message as an alert and its actions, Retry among them, as outline buttons.
- * @words A first use's title names what is missing ("No mailboxes yet") and its line says what will live there and how it fills, in one sentence. A quiet line is one sentence. Clear says what it clears: "Clear search", "Clear filters". A failure is the catalogue's message, never a string of the component's own.
- * @access A first use's title is a heading, level 2 or, inside a titled section, 3. The picture is decorative. A failure is announced as an alert.
+ * @when "Fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature and should be designed to prevent confusion." (https://vercel.com/geist/empty-state) "A card used to communicate an error state with a title and message." (https://vercel.com/geist/error-card) "Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load." (https://vercel.com/geist/empty-state) "Render the permission and tier-denial variants full-page when the user lands on a route they can’t view. Use a `Note` only when one tile inside an otherwise-accessible page is gated." (https://vercel.com/geist/empty-state) "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: pick the `kind` by the cause. `firstUse` is the blank slate and the informational variant: no record was ever made. `nothingYet`: empty now and it fills by itself. `noResults`: the search or filter found nothing. `cleared`: the work is done. `denied`: this viewer's role or plan does not open it. `failed`: the read failed; it is the Error and the Error Card, a failure inside a card with `scope="card"` and one that stands alone as a block with `page` or `region`. There is no educational kind.
+ * @instead "Don’t put critical persistent warnings here. Empty states vanish when the list populates; persistent warnings belong in `Note` or the page header." (https://vercel.com/geist/empty-state) "Pick `toasts.error()` for transient action failures (`Couldn’t save settings. Try again.`) and the `error` prop on `Input` for field-level validation. Don’t replace either with this block." (https://vercel.com/geist/error) Ours: `Note` is `MessageNotice` or `NoticeBanner`, `toasts.error()` is `showMessageToast` with the tone `error`, and the `error` prop on `Input` is `FieldError`. Rows still loading are skeleton rows. A failure of one record's action is that record's row message. One gated tile on an open page is a `MessageNotice`, so `denied` takes `page` or `region`, never `card`.
+ * @behaviour "The CTA must be a real `Button` or `Link`, not an `onClick` div, so it joins the tab order and exposes a role." (https://vercel.com/geist/empty-state) "Cap at one primary CTA, plus one secondary when the first action could legitimately be one of two paths (`Import Repository` and `Deploy Template`). Three CTAs is a smell." (https://vercel.com/geist/empty-state) "Don’t auto-launch a tour from the educational variant; pair `Start Tour` with `Skip`." (https://vercel.com/geist/empty-state) "The recovery action must do something concrete: a `Try Again` button when the operation is retry-safe, a named verb (`Reconnect GitHub`, `Update Payment Method`) when it isn’t." (https://vercel.com/geist/error) "Don’t auto-retry in the background; the user came to this surface to decide." (https://vercel.com/geist/error) "For full-page route errors (`error.tsx`), return focus to the `Try Again` button on appearance so a keyboard user can retry without hunting for it." (https://vercel.com/geist/error) "Always pair platform or system errors with a stable identifier (request ID `x-vercel-id`, deployment ID `dpl_…`, run ID, trace ID). Validation and permission denials are user-state, not system, and don’t need an ID." (https://vercel.com/geist/error) "Render the stable ID on a monospace sub-line under a collapsed `<details>` so the user can copy-paste it into a support thread." (https://vercel.com/geist/error) Ours: `firstUse` has the one picture, one action and at most one docs link under it; there is no educational kind, so no tour. A failure shows at most two of its message's actions, Retry first, and moves focus to the first one when it fills a page (`scope="page"`); its `reference` is the collapsed Disclosure holding the monospace identifier and a copy button. A page or a region stands on a resting card, inside a card it takes none, and a collection always passes `card`; a card that lists a few items, as a collection's rail does, passes `line`, where `nothingYet` and `cleared` are one 44 px row like an item: the message at the left, after the cleared check at 16 px. Every kind that carries a title, `failed` excepted, draws it the same way: a mark or picture, a 16 px medium title, one or two muted 14 px lines, 24 px apart, centred, the lines no wider than 340 px. `cleared` and `denied` carry a bordered 54 px tile with a muted icon, never a hue; the picture is `firstUse`'s alone. The action is the filled primary button, as Vercel's Connect draws Create Connector in its empty card; the docs link is muted. A page or a region is padded 48 px above and below and 70 px at the sides (a first use narrows to 24 px under 640 px for its picture). `failed` is the one hued kind: on a page or a region its ground, line, mark and text are all in the error colour, with a 16 px regular title, 16 px padding and 8 px between its parts, and the buttons stay neutral; inside a card it takes the text and mark colour alone, because the card owns the edge and a second one would double it. Required: `firstUse` and `denied` take a title and a line, `firstUse` its picture, `failed` the catalogue message whose title is always drawn.
+ * @words "`title` is Title Case (`No Logs Match Your Filter`); `description` is sentence case and adds new information instead of restating the title." (https://vercel.com/geist/empty-state) Ours: a title is sentence case and names what is missing ("No mailboxes yet"), not Title Case; a quiet line is one sentence. "Quote a single typed query verbatim with curly quotes: `No logs match “${query}”. Clear the filter to see all logs.` For multi-facet filters use the plural template `No {Items} Match Your Filters` and suggest widening or clearing." (https://vercel.com/geist/empty-state) "Onboarding bodies name the next action that creates the first item: `Push to your Git repository to create your first one.` Tier-gated bodies follow `{Feature value} with the {Plan} plan.`" (https://vercel.com/geist/empty-state) "Error variant pairs the body with a copyable request ID and a `Try Again` button." (https://vercel.com/geist/empty-state) "CTA labels are Title Case `Verb + Noun`. Never `Get Started`, `Continue`, or `OK`." (https://vercel.com/geist/empty-state) Ours: an action label is sentence case, verb and noun ("Clear filters", "New Agent"), never "Get started" or "OK". "State what happened and what to do next, in that order. Cut apologetic preambles (`Unfortunately`, `Oops`, `We’re sorry`)." (https://vercel.com/geist/error) "Use `Couldn’t` or `Can’t` for user-state errors (`Couldn’t verify your passkey. Try again.`); use `Failed to` for system or infra errors that mirror CLI output (`Build failed. Bundle exceeds 50 MB.`). `Unable to` is banned." (https://vercel.com/geist/error) "Don’t fall back to `Something Went Wrong` as a title; name the resource that failed (`Couldn’t Load Page`, `Couldn’t Load Deployments`)." (https://vercel.com/geist/error) "Never humor an error. Users hitting an error are frustrated; insincere copy makes it worse." (https://vercel.com/geist/error) Ours: a failure is the catalogue's message, never a string of the component's own, and its title names what failed to load.
+ * @access "After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state." (https://vercel.com/geist/empty-state) "When the error appears asynchronously (after a failed fetch), wrap the region in `aria-live="polite"` so it’s announced. Reserve `aria-live="assertive"` for true blocking errors that interrupt input." (https://vercel.com/geist/error) Ours: a title, a failure's included, is a heading, level 2 or, inside a titled section, 3. The picture is decorative. A failure's message is a `role="status"` line, polite, never an assertive alert, because it arrives after a read, not in the middle of input. `nothingYet`, `noResults` and `cleared` are plain lines with no live role of their own: the wrapper that stays mounted while rows and absence swap (the `aria-live="polite"` region, such as `SkeletonRegion`) announces them, once.
  */
 export declare function EmptyState(props: EmptyStateProps): import("react").JSX.Element;
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG;IAC5B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACtB,GAAG,CACA;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uGAAuG;IACvG,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACvC,GACD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAE,GAC1D;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,eAAe,CAAA;CAAE,CAC/C,CAAC;AAEF,sFAAsF;AACtF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,CAAC,IAAI,IAAI,CAClE,OAAO,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,EACrC,OAAO,GAAG,cAAc,CACzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA0DhD"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAOL,KAAK,UAAU,EAEhB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,iJAAiJ;AACjJ,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAE9E,uGAAuG;AACvG,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CACxD,eAAe,EACf,OAAO,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAC1D,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wFAAwF;IACxF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACtB,GAAG,CACA;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oFAAoF;IACpF,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B,GACD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAE,GAC1D;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACpC;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CAC9C,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,eAAe,CAAC;IACzB,mHAAmH;IACnH,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC,CACJ,CAAC;AAEF,sFAAsF;AACtF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,CAAC,IAAI,IAAI,CAClE,OAAO,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,EACrC,OAAO,GAAG,cAAc,CACzB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAwFhD"}

package/dist/components/empty-state.js

@@ -1,36 +1,54 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangleIcon } from "lucide-react";
+import { CheckIcon, LockKeyholeIcon, OctagonAlertIcon } from "lucide-react";
+import { useEffect, useRef } from "react";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyPicture, EmptyTitle, } from "../internal/empty.js";
+import { CopyButton } from "./copy-button.js";
+import { Disclosure } from "./disclosure.js";
 import { PageCommandButton } from "./page-actions.js";
 import { bodyBeyondTitle } from "./product-message.js";
 /**
- * What a place with nothing in it says: a first use shows its section's
- * picture, a title, one line and the action that fills it; an empty list, a
- * search that found nothing and a read that failed stay quiet.
+ * What a place with nothing in it says, by its cause: never created, empty at the moment, nothing
+ * matched, finished, not allowed, or failed to load.
  *
  * @family Feedback
- * @when A collection, a section or a page has nothing to show: it never had a record (`firstUse`), it is empty right now and fills by itself (`nothingYet`), the search or a filter found nothing (`noResults`), or its read failed (`failed`).
- * @instead A list's rows still loading are its skeleton rows, never an empty state. A failure of one record's own action is that record's row message. A failure that blocks the whole page, or a notice about the account, is a `NoticeBanner`.
- * @behaviour The frame follows the container: a page or a region stands on a resting card with its own edge, inside a card it takes none, and a collection always passes `card`. A first use's picture comes from the one approved set and arrives once, from faint and soft to sharp, after it loads, with no animation under reduced motion; nothing else moves. Only `firstUse` has a picture or a title; only `failed` has a mark, the warning, with its message as an alert and its actions, Retry among them, as outline buttons.
- * @words A first use's title names what is missing ("No mailboxes yet") and its line says what will live there and how it fills, in one sentence. A quiet line is one sentence. Clear says what it clears: "Clear search", "Clear filters". A failure is the catalogue's message, never a string of the component's own.
- * @access A first use's title is a heading, level 2 or, inside a titled section, 3. The picture is decorative. A failure is announced as an alert.
+ * @when "Fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature and should be designed to prevent confusion." (https://vercel.com/geist/empty-state) "A card used to communicate an error state with a title and message." (https://vercel.com/geist/error-card) "Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load." (https://vercel.com/geist/empty-state) "Render the permission and tier-denial variants full-page when the user lands on a route they can’t view. Use a `Note` only when one tile inside an otherwise-accessible page is gated." (https://vercel.com/geist/empty-state) "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: pick the `kind` by the cause. `firstUse` is the blank slate and the informational variant: no record was ever made. `nothingYet`: empty now and it fills by itself. `noResults`: the search or filter found nothing. `cleared`: the work is done. `denied`: this viewer's role or plan does not open it. `failed`: the read failed; it is the Error and the Error Card, a failure inside a card with `scope="card"` and one that stands alone as a block with `page` or `region`. There is no educational kind.
+ * @instead "Don’t put critical persistent warnings here. Empty states vanish when the list populates; persistent warnings belong in `Note` or the page header." (https://vercel.com/geist/empty-state) "Pick `toasts.error()` for transient action failures (`Couldn’t save settings. Try again.`) and the `error` prop on `Input` for field-level validation. Don’t replace either with this block." (https://vercel.com/geist/error) Ours: `Note` is `MessageNotice` or `NoticeBanner`, `toasts.error()` is `showMessageToast` with the tone `error`, and the `error` prop on `Input` is `FieldError`. Rows still loading are skeleton rows. A failure of one record's action is that record's row message. One gated tile on an open page is a `MessageNotice`, so `denied` takes `page` or `region`, never `card`.
+ * @behaviour "The CTA must be a real `Button` or `Link`, not an `onClick` div, so it joins the tab order and exposes a role." (https://vercel.com/geist/empty-state) "Cap at one primary CTA, plus one secondary when the first action could legitimately be one of two paths (`Import Repository` and `Deploy Template`). Three CTAs is a smell." (https://vercel.com/geist/empty-state) "Don’t auto-launch a tour from the educational variant; pair `Start Tour` with `Skip`." (https://vercel.com/geist/empty-state) "The recovery action must do something concrete: a `Try Again` button when the operation is retry-safe, a named verb (`Reconnect GitHub`, `Update Payment Method`) when it isn’t." (https://vercel.com/geist/error) "Don’t auto-retry in the background; the user came to this surface to decide." (https://vercel.com/geist/error) "For full-page route errors (`error.tsx`), return focus to the `Try Again` button on appearance so a keyboard user can retry without hunting for it." (https://vercel.com/geist/error) "Always pair platform or system errors with a stable identifier (request ID `x-vercel-id`, deployment ID `dpl_…`, run ID, trace ID). Validation and permission denials are user-state, not system, and don’t need an ID." (https://vercel.com/geist/error) "Render the stable ID on a monospace sub-line under a collapsed `<details>` so the user can copy-paste it into a support thread." (https://vercel.com/geist/error) Ours: `firstUse` has the one picture, one action and at most one docs link under it; there is no educational kind, so no tour. A failure shows at most two of its message's actions, Retry first, and moves focus to the first one when it fills a page (`scope="page"`); its `reference` is the collapsed Disclosure holding the monospace identifier and a copy button. A page or a region stands on a resting card, inside a card it takes none, and a collection always passes `card`; a card that lists a few items, as a collection's rail does, passes `line`, where `nothingYet` and `cleared` are one 44 px row like an item: the message at the left, after the cleared check at 16 px. Every kind that carries a title, `failed` excepted, draws it the same way: a mark or picture, a 16 px medium title, one or two muted 14 px lines, 24 px apart, centred, the lines no wider than 340 px. `cleared` and `denied` carry a bordered 54 px tile with a muted icon, never a hue; the picture is `firstUse`'s alone. The action is the filled primary button, as Vercel's Connect draws Create Connector in its empty card; the docs link is muted. A page or a region is padded 48 px above and below and 70 px at the sides (a first use narrows to 24 px under 640 px for its picture). `failed` is the one hued kind: on a page or a region its ground, line, mark and text are all in the error colour, with a 16 px regular title, 16 px padding and 8 px between its parts, and the buttons stay neutral; inside a card it takes the text and mark colour alone, because the card owns the edge and a second one would double it. Required: `firstUse` and `denied` take a title and a line, `firstUse` its picture, `failed` the catalogue message whose title is always drawn.
+ * @words "`title` is Title Case (`No Logs Match Your Filter`); `description` is sentence case and adds new information instead of restating the title." (https://vercel.com/geist/empty-state) Ours: a title is sentence case and names what is missing ("No mailboxes yet"), not Title Case; a quiet line is one sentence. "Quote a single typed query verbatim with curly quotes: `No logs match “${query}”. Clear the filter to see all logs.` For multi-facet filters use the plural template `No {Items} Match Your Filters` and suggest widening or clearing." (https://vercel.com/geist/empty-state) "Onboarding bodies name the next action that creates the first item: `Push to your Git repository to create your first one.` Tier-gated bodies follow `{Feature value} with the {Plan} plan.`" (https://vercel.com/geist/empty-state) "Error variant pairs the body with a copyable request ID and a `Try Again` button." (https://vercel.com/geist/empty-state) "CTA labels are Title Case `Verb + Noun`. Never `Get Started`, `Continue`, or `OK`." (https://vercel.com/geist/empty-state) Ours: an action label is sentence case, verb and noun ("Clear filters", "New Agent"), never "Get started" or "OK". "State what happened and what to do next, in that order. Cut apologetic preambles (`Unfortunately`, `Oops`, `We’re sorry`)." (https://vercel.com/geist/error) "Use `Couldn’t` or `Can’t` for user-state errors (`Couldn’t verify your passkey. Try again.`); use `Failed to` for system or infra errors that mirror CLI output (`Build failed. Bundle exceeds 50 MB.`). `Unable to` is banned." (https://vercel.com/geist/error) "Don’t fall back to `Something Went Wrong` as a title; name the resource that failed (`Couldn’t Load Page`, `Couldn’t Load Deployments`)." (https://vercel.com/geist/error) "Never humor an error. Users hitting an error are frustrated; insincere copy makes it worse." (https://vercel.com/geist/error) Ours: a failure is the catalogue's message, never a string of the component's own, and its title names what failed to load.
+ * @access "After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state." (https://vercel.com/geist/empty-state) "When the error appears asynchronously (after a failed fetch), wrap the region in `aria-live="polite"` so it’s announced. Reserve `aria-live="assertive"` for true blocking errors that interrupt input." (https://vercel.com/geist/error) Ours: a title, a failure's included, is a heading, level 2 or, inside a titled section, 3. The picture is decorative. A failure's message is a `role="status"` line, polite, never an assertive alert, because it arrives after a read, not in the middle of input. `nothingYet`, `noResults` and `cleared` are plain lines with no live role of their own: the wrapper that stays mounted while rows and absence swap (the `aria-live="polite"` region, such as `SkeletonRegion`) announces them, once.
  */
 export function EmptyState(props) {
     const scope = props.scope ?? "region";
     switch (props.kind) {
-        case "firstUse": {
-            const Heading = props.headingLevel === 3 ? "h3" : "h2";
-            return (_jsxs(Empty, { "data-empty-state": props.kind, scope: scope, children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyPicture, { size: scope === "page" ? "page" : "card", src: props.picture }), _jsxs("div", { className: "grid justify-items-center gap-1", children: [_jsx(EmptyTitle, { children: _jsx(Heading, { children: props.title }) }), _jsx(EmptyDescription, { children: props.description })] })] }), props.action ? (_jsx(EmptyContent, { className: "mt-5", "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.action, variant: props.actionVariant ?? "default" }) })) : null] }));
-        }
+        case "firstUse":
+            return (_jsxs(Empty, { className: scope === "card" ? undefined : "px-6 sm:px-17.5", "data-empty-state": props.kind, scope: scope, children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyPicture, { size: scope === "page" ? "page" : "card", src: props.picture }), _jsx(TitleAndLine, { description: props.description, headingLevel: props.headingLevel, title: props.title })] }), props.action || props.docs ? (_jsxs(EmptyContent, { className: "flex-col flex-nowrap gap-6", "data-empty-state-action": true, children: [props.action ? _jsx(PageCommandButton, { command: props.action, variant: "default" }) : null, props.docs ? _jsx(DocsLink, { command: props.docs }) : null] })) : null] }));
         case "nothingYet":
         case "noResults":
-            return (_jsxs(Empty, { className: "gap-3", "data-empty-state": props.kind, scope: scope, children: [_jsx(EmptyDescription, { className: "max-w-[40ch]", children: props.message }), props.kind === "noResults" ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.clear, variant: "outline" }) })) : null] }));
+            return (_jsxs(Empty, { className: scope === "line" ? undefined : "gap-3 py-7", "data-empty-state": props.kind, scope: scope, children: [_jsx(EmptyDescription, { className: "max-w-[40ch]", children: props.message }), props.kind === "noResults" ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.clear, variant: "outline" }) })) : null] }));
+        case "cleared":
+            return scope === "line" ? (_jsxs(Empty, { "data-empty-state": props.kind, scope: scope, children: [_jsx(CheckIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx(EmptyDescription, { children: props.message })] })) : (_jsx(Empty, { "data-empty-state": props.kind, scope: scope, children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "tile", children: _jsx(CheckIcon, { "aria-hidden": "true" }) }), _jsx(EmptyDescription, { children: props.message })] }) }));
+        case "denied":
+            return (_jsxs(Empty, { "data-empty-state": props.kind, scope: scope, children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "tile", children: _jsx(LockKeyholeIcon, { "aria-hidden": "true" }) }), _jsx(TitleAndLine, { description: props.description, headingLevel: props.headingLevel, title: props.title })] }), props.action ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.action, variant: "default" }) })) : null] }));
         case "failed":
-            return (_jsxs(Empty, { "data-empty-state": props.kind, scope: scope, children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "warning", children: _jsx(AlertTriangleIcon, { "aria-hidden": "true" }) }), _jsx(FailedRead, { message: props.message })] }), props.message.actions.length > 0 ? (_jsx(EmptyContent, { className: "mt-5", "data-empty-state-action": true, children: props.message.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) })) : null] }));
+            return (_jsx(FailedRead, { headingLevel: props.headingLevel, message: props.message, reference: props.reference, scope: scope }));
     }
 }
-function FailedRead({ message }) {
+function SectionHeading({ children, level }) {
+    return level === 3 ? _jsx("h3", { children: children }) : _jsx("h2", { children: children });
+}
+function TitleAndLine({ description, headingLevel, title, }) {
+    return (_jsxs("div", { className: "grid justify-items-center gap-2", children: [_jsx(EmptyTitle, { children: _jsx(SectionHeading, { level: headingLevel, children: title }) }), _jsx(EmptyDescription, { children: description })] }));
+}
+function DocsLink({ command }) {
+    return (_jsx("div", { className: "text-muted-foreground [&_[data-slot=button]]:h-5 [&_[data-slot=button]]:gap-0.5 [&_[data-slot=button]]:px-0! [&_[data-slot=button]]:text-body-sm [&_[data-slot=button]]:font-normal [&_[data-slot=button]]:text-current [&_[data-slot=button]:hover]:text-foreground [&_[data-slot=button]_svg]:size-4!", children: _jsx(PageCommandButton, { command: command, size: "xs", variant: "link" }) }));
+}
+function FailedRead({ headingLevel, message, reference, scope, }) {
+    const actions = useRef(null);
+    useEffect(() => {
+        if (scope === "page")
+            actions.current?.querySelector("button, a[href]")?.focus();
+    }, [scope]);
     const body = bodyBeyondTitle(message);
-    return (_jsxs("div", { className: "grid min-w-0 gap-1", "data-message-code": message.code, role: "alert", children: [_jsx(EmptyTitle, { className: "break-words", children: message.title }), body ? _jsx(EmptyDescription, { className: "break-words", children: body }) : null] }));
+    return (_jsxs(Empty, { "data-empty-state": "failed", scope: scope, tone: "error", children: [_jsxs(EmptyHeader, { className: "gap-2", children: [_jsx(EmptyMedia, { variant: "error", children: _jsx(OctagonAlertIcon, { "aria-hidden": "true" }) }), _jsxs("div", { className: "grid min-w-0 gap-2", "data-message-code": message.code, role: "status", children: [_jsx(EmptyTitle, { className: "font-normal break-words text-current", children: _jsx(SectionHeading, { level: headingLevel, children: message.title }) }), body ? (_jsx(EmptyDescription, { className: "break-words text-current", children: body })) : null] }), reference ? (_jsx(Disclosure, { className: "[&_summary]:text-current [&_summary:hover]:text-current", label: reference.label, children: _jsxs("div", { className: "flex min-w-0 items-center justify-center gap-1", "data-empty-reference": true, children: [_jsx("code", { className: "min-w-0 font-mono text-label-mono break-all", children: reference.value }), _jsx(CopyButton, { copiedLabel: reference.copiedLabel, copyFailedLabel: reference.copyFailedLabel, copyLabel: reference.copyLabel, size: "icon-xs", value: reference.value })] }) })) : null] }), message.actions.length > 0 ? (_jsx(EmptyContent, { "data-empty-state-action": true, ref: actions, children: message.actions.slice(0, 2).map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) })) : null] }));
 }

package/dist/components/entry-scene.d.ts

@@ -9,7 +9,7 @@ export type EntrySceneProps = {
     /** The room the screen keeps once the shape would leave it too little. */
     minHeight?: string;
     /** The approved picture of this surface: one image serves every view. */
-    picture?: ReactNode;
+    picture: ReactNode;
     /**
      * The lowest visible row of that picture, of its 941, so the figure's feet
      * stand on the floor of the window. 906 for the sign-in, 876 for the
@@ -17,9 +17,9 @@ export type EntrySceneProps = {
      */
     pictureFeet?: number;
     /** The nadicode wordmark, still at the upper left. */
-    wordmark?: ReactNode;
+    wordmark: ReactNode;
     /** The screen's real heading. It names the surface and is never seen. */
-    title?: string;
+    title: string;
     /** Nadia herself, centred: `NadiaPresence`. */
     presence?: ReactNode;
     /** Which view is open. A failure quiets the picture; it is never removed. */
@@ -36,7 +36,7 @@ export type EntrySceneProps = {
  * @family Compositions
  * @when Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things.
  * @instead The Portal's entry pages are its funnel frame with the shared entry header; Alveare Server's entry is the HiveScene; a wait inside the product is a WaitingLine.
- * @behaviour It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.
+ * @behaviour It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. Required: the picture, the wordmark and the heading, because every entry screen has all three; a screen that leaves one out does not compile. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.
  * @words The heading names the surface and is never seen. Instructions and status are one plain sentence that changes only when the real stage changes ("Loading your tools").
  * @access One level-1 heading for the screen, read but not shown; a message that reports work in progress is a status.
  */

package/dist/components/entry-scene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entry-scene.d.ts","sourceRoot":"","sources":["../../src/components/entry-scene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAA0B,EAC1B,SAAS,EACT,OAAO,EACP,WAAiB,EACjB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAuBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAY,EACZ,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAWA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhG;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAYA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,aAAa,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}
+{"version":3,"file":"entry-scene.d.ts","sourceRoot":"","sources":["../../src/components/entry-scene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAA0B,EAC1B,SAAS,EACT,OAAO,EACP,WAAiB,EACjB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAuBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAY,EACZ,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAWA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhG;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAYA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,aAAa,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}

package/dist/components/entry-scene.js

@@ -8,7 +8,7 @@ import { cn } from "../lib/utils.js";
  * @family Compositions
  * @when Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things.
  * @instead The Portal's entry pages are its funnel frame with the shared entry header; Alveare Server's entry is the HiveScene; a wait inside the product is a WaitingLine.
- * @behaviour It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.
+ * @behaviour It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. Required: the picture, the wordmark and the heading, because every entry screen has all three; a screen that leaves one out does not compile. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.
  * @words The heading names the surface and is never seen. Instructions and status are one plain sentence that changes only when the real stage changes ("Loading your tools").
  * @access One level-1 heading for the screen, read but not shown; a message that reports work in progress is a status.
  */
@@ -19,7 +19,7 @@ export function EntryScene({ aspectRatio = "1220 / 800", minHeight, picture, pic
             aspectRatio,
             minHeight,
             "--entry-picture-feet": pictureFeet,
-        }, children: _jsxs("div", { className: "dark nc-entry-room", "data-view": view, children: [picture ? _jsx("div", { className: "nc-entry-picture", children: picture }) : null, wordmark ? _jsx("header", { className: "nc-entry-header", children: wordmark }) : null, title ? _jsx("h1", { className: "nc-entry-sr", children: title }) : null, presence ? _jsx("div", { className: "nc-entry-figure", children: presence }) : null, _jsx("div", { className: "nc-entry-body", children: children })] }) }));
+        }, children: _jsxs("div", { className: "dark nc-entry-room", "data-view": view, children: [_jsx("div", { className: "nc-entry-picture", children: picture }), _jsx("header", { className: "nc-entry-header", children: wordmark }), _jsx("h1", { className: "nc-entry-sr", children: title }), presence ? _jsx("div", { className: "nc-entry-figure", children: presence }) : null, _jsx("div", { className: "nc-entry-body", children: children })] }) }));
 }
 /**
  * What the screen is doing, said plainly. `lines` reserves the room a longer

package/dist/components/field.d.ts

@@ -9,34 +9,64 @@ declare const fieldVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * A control with its label, its help and its error, tied together.
+ * A control with its label and its error, tied together; a checkbox, a radio or a switch with the
+ * sentence beside it.
  *
  * @family Inputs
- * @when Every control with a name: it ties the label, the help and the error to the control. Inside
- * a settings section `SettingsField` does it and hands the control its `controlProps`. A rich
- * choice tile is a `FieldLabel` holding a `Field` with its radio or checkbox.
- * @instead A group of radios or checkboxes is a `FieldSet` with a `FieldLegend`. A whole save group
- * is `SettingsSection`.
- * @behaviour Label, then help, then the error, then the control, 8 px apart. Invalid turns the
- * label and message red and puts the red edge and outline on the control. Validate on submit or on
- * leaving a field, then update the message as the value is corrected.
- * @words The help says what the setting changes, in one sentence. The error says how to fix it, not
- * what went wrong: *Enter a full address, like name@company.it.* A disabled field says why.
+ * @when A checkbox, a radio or a switch with its sentence, or a group of such rows. Inside a
+ * settings section `SettingsField` does it and hands the control its `controlProps`.
+ * @instead A text box, a textarea, a select, a combobox or a multi-select takes `label` and `error`
+ * as props and draws these same parts: wrapping one in `Field` with a `FieldLabel` is the same job
+ * done twice. A bordered tile that holds a radio or checkbox and a sentence is `ChoiceboxGroup`. A
+ * whole save group is `SettingsSection`. A group of radios or checkboxes is a `FieldSet` with a
+ * `FieldLegend`:
+ * "Wrap related radios in `<fieldset>` + `<legend>` so screen readers announce the group name before each option." (https://vercel.com/geist/radio)
+ * "Wrap related checkboxes in `<fieldset>` with a `<legend>` so screen readers announce the group name before each option." (https://vercel.com/geist/checkbox)
+ * @behaviour "Accessible text label for form controls." (https://vercel.com/geist/label) Label,
+ * then the control, then the error under it, 8 px apart, at regular weight; the fields of a
+ * `FieldGroup` stand 16 px apart. The label stays neutral when the control is invalid: red sits on
+ * the control's edge and on the message, the message with an alert mark before it at 13 px (16 px
+ * beside a large control). A control fills its field.
+ * "Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through `aria-describedby`." (https://vercel.com/geist/input)
+ * Ours: help is the one-line description of the card or the form that holds the field, not a line
+ * under each field; a `FieldDescription` is for the sentence beside a checkbox, a radio or a
+ * switch.
+ * "Validate on blur, not on every keystroke; surface the message by passing a string to `error`." (https://vercel.com/geist/input)
+ * "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)
+ * Ours: the message updates as the value is corrected.
+ * "Keep the field focusable while saving; pair `disabled` with a spinner only when input is impossible." (https://vercel.com/geist/input)
+ * Ours: no spinner, the loading state stays still.
+ * "Trim leading and trailing whitespace before submit so ` example.com` and `example.com` resolve to one value." (https://vercel.com/geist/input)
+ * Ours: the save of `FormDialog`, `FormDrawer`, `RowEditForm` and `SettingsSection` trims the ends
+ * of every text value; a bare `<form>` does not.
+ * "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)
+ * "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: a disabled field says why in the card's footer, never in a tooltip around the control.
+ * @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` (help, then error), `disabled` and `required`.
+ * `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)
  */
 declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldLabel({ className, htmlFor, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
     children?: React.ReactNode;
 }): import("react").JSX.Element;
-declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+declare function FieldError({ className, children, errors, size, ...props }: React.ComponentProps<"div"> & {
     errors?: Array<{
         message?: string;
     } | undefined>;
+    /** `lg` beside a large control: the message takes the control's 16 px type. */
+    size?: "default" | "lg";
 }): import("react").JSX.Element | null;
 export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
 //# sourceMappingURL=field.d.ts.map

package/dist/components/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,+BAW1E;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,+BAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWvE;AAED,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,+BAUlE;AAKD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWzE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,+BAY9E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,+BAa3E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,+BAsBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAClD,sCAwCA;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,+BAW1E;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,+BAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWvE;AAED,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,+BAUlE;AAKD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWzE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,+BAcvF;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,+BAa3E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,+BAsBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;IACjD,+EAA+E;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,sCAiDA;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,CAAC"}