@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/kbd.js

@@ -1,23 +1,122 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
 import { cn } from "../lib/utils.js";
+export const KBD_KEYS = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "/",
+    ",",
+    ".",
+    "?",
+    "[",
+    "]",
+    "-",
+    "=",
+    "Enter",
+    "Esc",
+    "Tab",
+    "Space",
+    "Backspace",
+    "Delete",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+];
+const MODIFIERS = ["meta", "shift", "alt", "ctrl"];
+const APPLE_GLYPHS = {
+    meta: "⌘",
+    shift: "⇧",
+    alt: "⌥",
+    ctrl: "⌃",
+};
+const OTHER_GLYPHS = {
+    meta: "Ctrl",
+    shift: "Shift",
+    alt: "Alt",
+    ctrl: "Ctrl",
+};
+const KEY_GLYPHS = new Map([
+    ["ArrowUp", "↑"],
+    ["ArrowDown", "↓"],
+    ["ArrowLeft", "←"],
+    ["ArrowRight", "→"],
+]);
+const subscribeToNothing = () => () => { };
+const onAnApplePlatform = () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+const beforeThePlatformIsKnown = () => true;
 /**
- * One key of a shortcut, beside the command it triggers.
+ * One key, or a modifier with its key, of a shortcut beside the command it triggers.
  *
  * @family Data
- * @when A shortcut hint next to the command it triggers: Find with ⌘K, the sidebar with ⌘B. 20 px,
- * 2 px corners, mono 12 on the recessed fill.
- * @instead A key a person types into is an `Input`; a code a person types is `InputOTP`. In a
- * command list, `CommandShortcut`.
- * @behaviour Not interactive. Only shortcuts actually bound are shown. The caller maps the
- * platform: ⌘ on macOS, Ctrl on Windows and Linux.
- * @words One key per `Kbd`; symbols for macOS modifiers (⌘ ⇧ ⌥), words elsewhere (*Ctrl*).
- * Surrounding prose stays outside the key.
- * @access A `kbd` element, read in order; the command's own name carries the meaning.
+ * @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`. 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, at 20 px.
+ * @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`.
+ * @access Ours: a `kbd` element, read in order; the command's own name carries the meaning.
  */
-function Kbd({ className, ...props }) {
-    return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs border border-border bg-recessed px-1 font-label-mono text-caption font-normal text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-recessed in-data-[slot=tooltip-content]:text-popover-foreground [&_svg:not([class*='size-'])]:size-3", className), ...props }));
+function Kbd({ className, size = "default", meta, shift, alt, ctrl, children, ...props }) {
+    const onApple = useSyncExternalStore(subscribeToNothing, onAnApplePlatform, beforeThePlatformIsKnown);
+    const glyphs = onApple ? APPLE_GLYPHS : OTHER_GLYPHS;
+    const flags = { meta, shift, alt, ctrl };
+    const held = new Set(MODIFIERS.flatMap((modifier) => (flags[modifier] ? [glyphs[modifier]] : [])));
+    const parts = children === undefined ? [...held] : [...held, KEY_GLYPHS.get(children) ?? children];
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex w-fit items-center justify-center rounded-xs-plus bg-background font-normal text-foreground ring-1 ring-border select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background in-data-[slot=tooltip-content]:ring-0", onApple ? "gap-0" : "gap-1", size === "sm"
+            ? "h-5 min-w-5 px-1 text-caption leading-5"
+            : "h-6 min-w-6 px-1.5 text-label leading-6", className), ...props, children: parts.map((part) => (_jsx("span", { children: part }, part))) }));
 }
-function KbdGroup({ className, ...props }) {
-    return (_jsx("kbd", { "data-slot": "kbd-group", className: cn("inline-flex items-center gap-1", className), ...props }));
-}
-export { Kbd, KbdGroup };
+export { Kbd };

package/dist/components/kpi-card.d.ts

@@ -21,25 +21,33 @@ type KpiCardProps = {
     label: string;
     value: React.ReactNode;
     delta?: KpiCardDelta;
-    note?: React.ReactNode;
+    note?: string;
     tone?: KpiCardTone;
     /** Binds an app link or element without replacing the card's presentation. */
     render?: useRender.ComponentProps<"div">["render"];
     /** `inline` for measurements already grouped inside a section. */
     presentation?: "card" | "inline";
+    /**
+     * The figure's own values over the period, oldest first, one per bucket. Draws a sparkline across the
+     * card under the value and moves the comparison under it, as an observability overview's tiles read. An empty list
+     * (a figure that could not be read, in a row of figures that have one) keeps that layout with no line.
+     */
+    sparkline?: readonly number[];
 };
 /**
  * One measured figure, the way the dashboard-01 section card shows it: the label above the value, the change top
- * right as a badge, and the named comparison in the footer (`rule/kpi-card-trend-top-right`).
+ * right as a badge, and the named comparison in the footer (`rule/kpi-card-trend-top-right`). With its values over
+ * the period (`sparkline`) it reads as Vercel Observability's overview tile: the label, the value with the change badge at its right, the
+ * line across the card's width under it, and the comparison under the line, with no footer.
  *
  * @family Charts
  * @when One figure a person checks at a glance: Active Agents, Spend, Tasks done, Need attention, in an overview's row of figures.
  * @instead A figure read over time is a `ChartCard`, and a single figure is never nested inside one. A ratio beside two money measures is a `KpiCard` next to the chart, never a second axis. A level against a cap is `Progress`.
- * @behaviour Label left and the change badge right on the first line, the value under them, the comparison in the footer. A figure with no comparison shows no badge and no empty footer. Direction crossed with whether up is good sets the badge icon's tone: success, blocked, or grey for a flat or neutral measure. `tone` marks the value itself as warning or critical when it crosses a threshold.
+ * @behaviour Label left and the change badge right on the first line, the value under them, the comparison in the footer. The footer is one line in every card of a row, so their dividers line up: the comparison and the note, joined, cut with an ellipsis when long and whole on hover. A figure with no comparison shows no badge and no empty footer. A figure that opens its owner (`render`) ends its label with a chevron. Colour sits only where it reads a fact: direction crossed with whether up is good sets the badge icon's tone (success, blocked, or grey for a flat or neutral measure), and `tone` marks the value itself as warning or critical when it crosses a threshold; the card, label and comparison stay neutral. With `sparkline`, Vercel Observability's overview tile: the label across the tile, the value under it with the change badge at its right, a 32 px line in `chart-1` across the card's width, then the comparison and the note in muted ink on up to two lines, which every tile of a row reserves, so the tiles' lines and comparisons sit at the same heights and nothing is cut at a five-tile row. A figure with no line or no comparison keeps the empty rows.
  * @words The label names the measure in sentence case: "Active Agents", "Spend". The change is signed with a true minus and its unit ("+12.4%", "−1"), the comparison names the period: "vs 16 last week", "vs August 2026". No icon beside the label.
  * @access The trend icon is hidden and the direction is read as a word in the reader's language (`directionLabel`). Figures use tabular digits. The value is text, never only colour.
  */
-declare function KpiCard({ label, value, delta, note, tone, render, presentation, }: KpiCardProps): React.JSX.Element;
+declare function KpiCard({ label, value, delta, note, tone, render, presentation, sparkline, }: KpiCardProps): React.JSX.Element;
 export { KpiCard };
 export type { KpiCardDelta, KpiCardDirection, KpiCardProps, KpiCardTone };
 //# sourceMappingURL=kpi-card.d.ts.map

package/dist/components/kpi-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF,KAAK,gBAAgB,GAAG,cAAc,CAAC;AACvC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAClC,CAAC;AAQF;;;;;;;;;;GAUG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,MAAM,EACN,YAAqB,GACtB,EAAE,YAAY,qBAyDd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF,KAAK,gBAAgB,GAAG,cAAc,CAAC;AACvC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAQF;;;;;;;;;;;;GAYG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,MAAM,EACN,YAAqB,EACrB,SAAS,GACV,EAAE,YAAY,qBAmHd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/kpi-card.js

@@ -2,8 +2,10 @@
 // (https://ui.shadcn.com/r/styles/new-york-v4/dashboard-01.json).
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
+import { ChartSparkline } from "./chart-sparkline.js";
 import { TrendBadge, trendTone } from "./trend-badge.js";
 const VALUE_TONE_CLASS = {
     default: "text-foreground",
@@ -12,19 +14,26 @@ const VALUE_TONE_CLASS = {
 };
 /**
  * One measured figure, the way the dashboard-01 section card shows it: the label above the value, the change top
- * right as a badge, and the named comparison in the footer (`rule/kpi-card-trend-top-right`).
+ * right as a badge, and the named comparison in the footer (`rule/kpi-card-trend-top-right`). With its values over
+ * the period (`sparkline`) it reads as Vercel Observability's overview tile: the label, the value with the change badge at its right, the
+ * line across the card's width under it, and the comparison under the line, with no footer.
  *
  * @family Charts
  * @when One figure a person checks at a glance: Active Agents, Spend, Tasks done, Need attention, in an overview's row of figures.
  * @instead A figure read over time is a `ChartCard`, and a single figure is never nested inside one. A ratio beside two money measures is a `KpiCard` next to the chart, never a second axis. A level against a cap is `Progress`.
- * @behaviour Label left and the change badge right on the first line, the value under them, the comparison in the footer. A figure with no comparison shows no badge and no empty footer. Direction crossed with whether up is good sets the badge icon's tone: success, blocked, or grey for a flat or neutral measure. `tone` marks the value itself as warning or critical when it crosses a threshold.
+ * @behaviour Label left and the change badge right on the first line, the value under them, the comparison in the footer. The footer is one line in every card of a row, so their dividers line up: the comparison and the note, joined, cut with an ellipsis when long and whole on hover. A figure with no comparison shows no badge and no empty footer. A figure that opens its owner (`render`) ends its label with a chevron. Colour sits only where it reads a fact: direction crossed with whether up is good sets the badge icon's tone (success, blocked, or grey for a flat or neutral measure), and `tone` marks the value itself as warning or critical when it crosses a threshold; the card, label and comparison stay neutral. With `sparkline`, Vercel Observability's overview tile: the label across the tile, the value under it with the change badge at its right, a 32 px line in `chart-1` across the card's width, then the comparison and the note in muted ink on up to two lines, which every tile of a row reserves, so the tiles' lines and comparisons sit at the same heights and nothing is cut at a five-tile row. A figure with no line or no comparison keeps the empty rows.
  * @words The label names the measure in sentence case: "Active Agents", "Spend". The change is signed with a true minus and its unit ("+12.4%", "−1"), the comparison names the period: "vs 16 last week", "vs August 2026". No icon beside the label.
  * @access The trend icon is hidden and the direction is read as a word in the reader's language (`directionLabel`). Figures use tabular digits. The value is text, never only colour.
  */
-function KpiCard({ label, value, delta, note, tone = "default", render, presentation = "card", }) {
+function KpiCard({ label, value, delta, note, tone = "default", render, presentation = "card", sparkline, }) {
     if (presentation === "inline") {
         return (_jsxs("div", { className: "grid min-w-0 content-start gap-2", "data-slot": "metric-summary", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("p", { className: cn("text-2xl font-semibold tabular-nums", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), directionLabel: delta.directionLabel })) : null] }), delta ? _jsx("p", { className: "text-xs text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("p", { className: "text-xs text-muted-foreground", children: note }) : null] }));
     }
-    return (_jsxs(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, ...(render ? { render } : {}), children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { className: "line-clamp-2 min-h-10", children: label }), _jsx(CardTitle, { className: cn("text-heading-md tabular-nums group-data-[size=sm]/card:text-heading-md", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, children: _jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), directionLabel: delta.directionLabel }) })) : null] }), delta || note ? (_jsxs(CardFooter, { className: "flex-col items-start gap-1.5 text-sm", children: [delta ? _jsx("div", { className: "text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("div", { className: "text-muted-foreground", children: note }) : null] })) : null] }));
+    const footerLine = [delta?.comparison, note].filter(Boolean).join(" · ");
+    const badge = delta ? (_jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), directionLabel: delta.directionLabel })) : null;
+    if (sparkline) {
+        return (_jsx(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, render: render, variant: render ? "link" : "default", children: _jsxs(CardHeader, { className: "gap-y-1", children: [_jsxs(CardDescription, { className: "col-span-2 flex min-w-0 items-center gap-0.5", children: [_jsx("span", { className: "truncate", title: label, children: label }), render ? _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 shrink-0" }) : null] }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, className: "row-span-1 row-start-2 self-center", children: badge })) : null, _jsx(CardTitle, { className: cn("col-start-1 row-start-2 min-w-0 truncate text-heading-md tabular-nums group-data-[size=sm]/card:text-heading-md", VALUE_TONE_CLASS[tone]), children: value }), _jsx("div", { "data-slot": "kpi-card-sparkline", className: "col-span-2 mt-1 h-8 min-w-0", children: sparkline.length > 1 ? (_jsx(ChartSparkline, { data: sparkline, className: "h-8 w-full" })) : null }), _jsx("p", { "data-slot": "kpi-card-change", className: "col-span-2 mt-1 line-clamp-2 min-h-10 min-w-0 text-sm text-muted-foreground", title: footerLine || undefined, children: footerLine })] }) }));
+    }
+    return (_jsxs(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, render: render, variant: render ? "link" : "default", children: [_jsxs(CardHeader, { children: [_jsxs(CardDescription, { className: "flex min-h-10 items-start gap-0.5", children: [_jsx("span", { className: "line-clamp-2", children: label }), render ? _jsx(ChevronRight, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }) : null] }), _jsx(CardTitle, { className: cn("text-heading-md tabular-nums group-data-[size=sm]/card:text-heading-md", VALUE_TONE_CLASS[tone]), children: value }), delta ? _jsx(CardAction, { "data-kpi-delta": delta.direction, children: badge }) : null] }), delta || note ? (_jsx(CardFooter, { className: "flex-nowrap", children: _jsx("span", { className: "min-w-0 truncate", title: footerLine, children: footerLine }) })) : null] }));
 }
 export { KpiCard };

package/dist/components/label.d.ts

@@ -3,17 +3,24 @@ import * as React from "react";
  * The visible name of one control.
  *
  * @family Inputs
- * @when A control standing on its own that needs a visible name: a checkbox's sentence, a switch's
- * setting.
- * @instead A control inside a form takes `FieldLabel` through `Field`; a group of controls takes
- * `FieldLegend`. A short tag of metadata is `MetaLabel`.
- * @behaviour Sits beside or above its control and dims with it when the control is disabled.
+ * @when "Accessible text label for form controls." (https://vercel.com/geist/label) Ours: a control
+ * standing on its own that needs a visible name: a checkbox's sentence, a switch's
+ * setting, a bare control in a toolbar or a table cell.
+ * @instead A text box, a textarea or a select names itself with its own `label`, so it never needs
+ * this. A group of controls takes `FieldLegend`. A short tag of metadata is a `Tag`.
+ * @behaviour Above its control, 8 px clear of it, in 13 px type in the secondary grey, one step
+ * quieter than the control's own text. Beside a checkbox or a radio it is the sentence at 13 px in
+ * the text colour; beside a switch it is 12 px at medium weight. It stays neutral when the control
+ * is invalid. When its control is disabled it steps down to the placeholder grey, never in opacity.
  * Clicking it moves to its control.
- * @words A noun or a positive statement in sentence case, no colon: *Approvals*, *Send a copy to
- * the person who asked*.
- * @access A `label` tied to its control by `htmlFor`. Never replaced by a placeholder or overridden
- * by another `aria-label`.
+ * @words "Labels are short Title Case nouns: `Project Name`, `Domain`, `Environment Variable
+ * Name`." (https://vercel.com/geist/input) Ours: a noun or a positive statement in sentence case,
+ * no colon, kept as written (the label never recases its text, which is what Geist's `bypassCasing`
+ * asks for): *Approvals*, *Send a copy to the person who asked*. A placeholder never stands in for
+ * it.
+ * @access A `label` tied to its control by `htmlFor` and the control's `id`, or wrapping it. Never
+ * overridden by another `aria-label`.
  */
-declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
+declare function Label({ className, htmlFor, ...props }: React.ComponentProps<"label">): React.JSX.Element;
 export { Label };
 //# sourceMappingURL=label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;GAcG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAWpE;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAY7E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/label.js

@@ -5,18 +5,25 @@ import { cn } from "../lib/utils.js";
  * The visible name of one control.
  *
  * @family Inputs
- * @when A control standing on its own that needs a visible name: a checkbox's sentence, a switch's
- * setting.
- * @instead A control inside a form takes `FieldLabel` through `Field`; a group of controls takes
- * `FieldLegend`. A short tag of metadata is `MetaLabel`.
- * @behaviour Sits beside or above its control and dims with it when the control is disabled.
+ * @when "Accessible text label for form controls." (https://vercel.com/geist/label) Ours: a control
+ * standing on its own that needs a visible name: a checkbox's sentence, a switch's
+ * setting, a bare control in a toolbar or a table cell.
+ * @instead A text box, a textarea or a select names itself with its own `label`, so it never needs
+ * this. A group of controls takes `FieldLegend`. A short tag of metadata is a `Tag`.
+ * @behaviour Above its control, 8 px clear of it, in 13 px type in the secondary grey, one step
+ * quieter than the control's own text. Beside a checkbox or a radio it is the sentence at 13 px in
+ * the text colour; beside a switch it is 12 px at medium weight. It stays neutral when the control
+ * is invalid. When its control is disabled it steps down to the placeholder grey, never in opacity.
  * Clicking it moves to its control.
- * @words A noun or a positive statement in sentence case, no colon: *Approvals*, *Send a copy to
- * the person who asked*.
- * @access A `label` tied to its control by `htmlFor`. Never replaced by a placeholder or overridden
- * by another `aria-label`.
+ * @words "Labels are short Title Case nouns: `Project Name`, `Domain`, `Environment Variable
+ * Name`." (https://vercel.com/geist/input) Ours: a noun or a positive statement in sentence case,
+ * no colon, kept as written (the label never recases its text, which is what Geist's `bypassCasing`
+ * asks for): *Approvals*, *Send a copy to the person who asked*. A placeholder never stands in for
+ * it.
+ * @access A `label` tied to its control by `htmlFor` and the control's `id`, or wrapping it. Never
+ * overridden by another `aria-label`.
  */
-function Label({ className, ...props }) {
-    return (_jsx("label", { "data-slot": "label", className: cn("flex items-center gap-2 text-label font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+function Label({ className, htmlFor, ...props }) {
+    return (_jsx("label", { "data-slot": "label", htmlFor: htmlFor, className: cn("flex items-center gap-2 text-label-sm leading-normal text-muted-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-placeholder peer-disabled:cursor-not-allowed peer-disabled:text-placeholder peer-data-disabled:cursor-not-allowed peer-data-disabled:text-placeholder peer-[[role=checkbox]]:leading-5 peer-[[role=checkbox]:not([data-disabled])]:text-foreground peer-[[role=radio]]:leading-5 peer-[[role=radio]:not([data-disabled])]:text-foreground peer-[[role=switch]]:text-xs peer-[[role=switch]]:font-medium peer-[[role=switch]:not([data-disabled])]:text-foreground", className), ...props }));
 }
 export { Label };

package/dist/components/library-shelf.d.ts

@@ -3,8 +3,8 @@ import type { CatalogSection } from "./catalog-entry.js";
 import { type CollectionSearchProps } from "./collection-search.js";
 import { type EmptyStateKind } from "./empty-state.js";
 export type LibraryShelfProps = {
-    /** The one line under the shelf's title saying what it holds. */
-    definition: string;
+    /** One line saying what the shelf holds, for a shelf whose page has no title of its own to carry it, such as Nadia's gallery. */
+    definition?: string;
     /** Above the search, for the people who keep the shelf: the hub's sync. */
     notice?: ReactNode;
     search?: CollectionSearchProps;
@@ -25,10 +25,10 @@ export type LibraryShelfProps = {
  * reusable things a person adds, as two-column entries or Agent template cards.
  *
  * @family Compositions
- * @when A page of reusable things a person adds to an Agent: Skills, Plugins, Agent templates.
- * @instead Records a person already has and acts on are a CollectionPage; choosing from a catalogue without leaving the page is a CatalogDrawer.
- * @behaviour Shows, the first that holds: the failure; still entries while the shelf loads; noMatch while the search finds nothing; empty when the shelf holds nothing; then each section's title over its entries, two to a row from md, or the templates three to a row. Each entry has its kind's tile, its name (the link to its page), one line, one fact, one Add control or the word saying it is already added, then its menu. A failed add puts its message in the entry's line and its next steps beside its controls. The search shows unless the shelf is empty.
- * @words The product words every string: the definition (one sentence on what the shelf holds), the search's label ("Search skills"), the loading label, each entry's name, line, Add label and added word, the empty, noMatch and failed messages.
+ * @when A gallery of reusable things a person adds, as Vercel's Templates gallery: the Portal's Agent templates, Nadia's New Agent gallery.
+ * @instead The Portal's Skills and Plugins are entity rows a person finds, opens and adds, a CollectionPage; records a person already has and acts on are a CollectionPage too; choosing from a catalogue without leaving the page is a CatalogDrawer.
+ * @behaviour The definition line only where the page has no title row to stand under (a titled page follows the title with the search, as every collection does). Shows, the first that holds: the failure; still entries while the shelf loads; noMatch while the search finds nothing; empty when the shelf holds nothing; then each section's title over its entries, two to a row from md, or the templates three to a row. Each entry has its kind's tile, its name (the link to its page), one line, one fact, one Add control or the word saying it is already added, then its menu. A failed add puts its message in the entry's line and its next steps beside its controls. The search shows unless the shelf is empty.
+ * @words The product words every string: the optional definition (one sentence on what the shelf holds), the search's label ("Search skills"), the loading label, each entry's name, line, Add label and added word, the empty, noMatch and failed messages.
  * @access Each section is a region named by its h2; entries are list items; loading is a status named by loadingLabel and aria-busy; a failed add is announced as an alert; each entry's menu is named by its label.
  */
 export declare function LibraryShelf(props: LibraryShelfProps): import("react").JSX.Element;

package/dist/components/library-shelf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"library-shelf.d.ts","sourceRoot":"","sources":["../../src/components/library-shelf.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjE,iGAAiG;IACjG,OAAO,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;CACnC,GAAG,CACA;IAAE,QAAQ,EAAE,SAAS,cAAc,EAAE,GAAG,SAAS,CAAA;CAAE;AACrD,qEAAqE;GACnE;IAAE,SAAS,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,CAAA;CAAE,CACrD,CAAC;AA0BF;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAyBpD"}
+{"version":3,"file":"library-shelf.d.ts","sourceRoot":"","sources":["../../src/components/library-shelf.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iIAAiI;IACjI,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjE,iGAAiG;IACjG,OAAO,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;CACnC,GAAG,CACA;IAAE,QAAQ,EAAE,SAAS,cAAc,EAAE,GAAG,SAAS,CAAA;CAAE;AACrD,qEAAqE;GACnE;IAAE,SAAS,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,CAAA;CAAE,CACrD,CAAC;AA0BF;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAyBpD"}

package/dist/components/library-shelf.js

@@ -23,10 +23,10 @@ function ShelfContents({ shelf }) {
  * reusable things a person adds, as two-column entries or Agent template cards.
  *
  * @family Compositions
- * @when A page of reusable things a person adds to an Agent: Skills, Plugins, Agent templates.
- * @instead Records a person already has and acts on are a CollectionPage; choosing from a catalogue without leaving the page is a CatalogDrawer.
- * @behaviour Shows, the first that holds: the failure; still entries while the shelf loads; noMatch while the search finds nothing; empty when the shelf holds nothing; then each section's title over its entries, two to a row from md, or the templates three to a row. Each entry has its kind's tile, its name (the link to its page), one line, one fact, one Add control or the word saying it is already added, then its menu. A failed add puts its message in the entry's line and its next steps beside its controls. The search shows unless the shelf is empty.
- * @words The product words every string: the definition (one sentence on what the shelf holds), the search's label ("Search skills"), the loading label, each entry's name, line, Add label and added word, the empty, noMatch and failed messages.
+ * @when A gallery of reusable things a person adds, as Vercel's Templates gallery: the Portal's Agent templates, Nadia's New Agent gallery.
+ * @instead The Portal's Skills and Plugins are entity rows a person finds, opens and adds, a CollectionPage; records a person already has and acts on are a CollectionPage too; choosing from a catalogue without leaving the page is a CatalogDrawer.
+ * @behaviour The definition line only where the page has no title row to stand under (a titled page follows the title with the search, as every collection does). Shows, the first that holds: the failure; still entries while the shelf loads; noMatch while the search finds nothing; empty when the shelf holds nothing; then each section's title over its entries, two to a row from md, or the templates three to a row. Each entry has its kind's tile, its name (the link to its page), one line, one fact, one Add control or the word saying it is already added, then its menu. A failed add puts its message in the entry's line and its next steps beside its controls. The search shows unless the shelf is empty.
+ * @words The product words every string: the optional definition (one sentence on what the shelf holds), the search's label ("Search skills"), the loading label, each entry's name, line, Add label and added word, the empty, noMatch and failed messages.
  * @access Each section is a region named by its h2; entries are list items; loading is a status named by loadingLabel and aria-busy; a failed add is announced as an alert; each entry's menu is named by its label.
  */
 export function LibraryShelf(props) {
@@ -36,5 +36,5 @@ export function LibraryShelf(props) {
     const nothing = shelf !== undefined && holdsNothing(shelf);
     const body = failed ? (_jsx(EmptyState, { ...failed, scope: "page" })) : !shelf ? (_jsx(CatalogSkeleton, { columns: 2, label: loadingLabel })) : nothing && noMatch ? (_jsx(EmptyState, { kind: "noResults", ...noMatch, scope: "page" })) : nothing ? (_jsx(EmptyState, { ...empty, scope: "page" })) : (_jsx(ShelfContents, { shelf: shelf }));
     const showsEmpty = !failed && nothing && !noMatch;
-    return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "library-shelf", children: [_jsx("p", { className: "text-body-md text-muted-foreground", children: definition }), notice, search && !showsEmpty ? _jsx(CollectionSearch, { ...search }) : null, body] }));
+    return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "library-shelf", children: [definition ? _jsx("p", { className: "text-body-md text-muted-foreground", children: definition }) : null, notice, search && !showsEmpty ? _jsx(CollectionSearch, { ...search }) : null, body] }));
 }

package/dist/components/load-more-button.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { type TextButtonProps } from "./button.js";
+type LoadMoreButtonProps = Omit<TextButtonProps, "children" | "loading" | "loadingLabel" | "prefix" | "shape" | "size" | "suffix" | "variant"> & {
+    /** What comes next: "Load more". */
+    children: ReactNode;
+    loading: boolean;
+    /** The label while the next items load: "Loading more events". */
+    loadingLabel: string;
+    /** Sits flush against the list, with no space above it. */
+    noGap?: boolean | undefined;
+    /** Square corners, for a button that ends a list inside a card. */
+    noBorderRadius?: boolean | undefined;
+};
+/**
+ * The button at the end of a list that appends its next items in place.
+ *
+ * @family Actions
+ * @when "A full-width button used to append more items to a paginated list, with loading and styling variants." (https://vercel.com/geist/load-more-button)
+ * Ours: a list that grows in place by a page of items at a time: older events, more results. The
+ * button follows the last item.
+ * @instead A list that is whole stays whole, with no button.
+ * Going to another page of the product is a `ButtonLink`.
+ * @behaviour Takes the list's full width, 36 px high, below the last item, always `outline`: neutral,
+ * no hue in any state. The label and the `loadingLabel` are both required. While the next items load
+ * it is `loading`, held in the muted look, and the rows already shown stay. It sits one `md` step
+ * (16 px) below the list; `noGap` removes that space and `noBorderRadius` squares its corners, for
+ * a button that closes a list inside a card. The caller drops the button when no items are left.
+ * @words Ours: sentence case, naming what comes: *Load more*, *Show older events*. The loading word is the
+ * same in the -ing form: *Loading more*, *Showing older events*; Italian *Carica altro*, *Caricamento*.
+ * @access A native `button` that is `aria-busy` while it loads. New items appear after the last
+ * shown one, so focus stays on the button's place in the list.
+ */
+declare function LoadMoreButton({ className, loading, noBorderRadius, noGap, ...props }: LoadMoreButtonProps): import("react").JSX.Element;
+export { LoadMoreButton };
+//# sourceMappingURL=load-more-button.d.ts.map

package/dist/components/load-more-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-more-button.d.ts","sourceRoot":"","sources":["../../src/components/load-more-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGnE,KAAK,mBAAmB,GAAG,IAAI,CAC7B,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAC7F,GAAG;IACF,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,OAAO,EACP,cAAsB,EACtB,KAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAerB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/load-more-button.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { cn } from "../lib/utils.js";
+/**
+ * The button at the end of a list that appends its next items in place.
+ *
+ * @family Actions
+ * @when "A full-width button used to append more items to a paginated list, with loading and styling variants." (https://vercel.com/geist/load-more-button)
+ * Ours: a list that grows in place by a page of items at a time: older events, more results. The
+ * button follows the last item.
+ * @instead A list that is whole stays whole, with no button.
+ * Going to another page of the product is a `ButtonLink`.
+ * @behaviour Takes the list's full width, 36 px high, below the last item, always `outline`: neutral,
+ * no hue in any state. The label and the `loadingLabel` are both required. While the next items load
+ * it is `loading`, held in the muted look, and the rows already shown stay. It sits one `md` step
+ * (16 px) below the list; `noGap` removes that space and `noBorderRadius` squares its corners, for
+ * a button that closes a list inside a card. The caller drops the button when no items are left.
+ * @words Ours: sentence case, naming what comes: *Load more*, *Show older events*. The loading word is the
+ * same in the -ing form: *Loading more*, *Showing older events*; Italian *Carica altro*, *Caricamento*.
+ * @access A native `button` that is `aria-busy` while it loads. New items appear after the last
+ * shown one, so focus stays on the button's place in the list.
+ */
+function LoadMoreButton({ className, loading, noBorderRadius = false, noGap = false, ...props }) {
+    return (_jsx(Button, { ...props, className: cn("w-full", !noGap && "mt-nadicode-md", noBorderRadius && "rounded-none", className), loading: loading, type: "button", variant: "outline" }));
+}
+export { LoadMoreButton };

package/dist/components/menu-choice-row.d.ts

@@ -8,25 +8,23 @@ export type MenuChoiceOption<Value extends string = string> = {
 };
 export type MenuChoiceRowProps<Value extends string = string> = Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
     label: string;
-    /** Leads the label, so the row starts on the commands' line: the current theme's glyph. */
-    icon?: React.ReactElement | undefined;
     options: readonly MenuChoiceOption<Value>[];
     onValueChange: (value: Value) => void;
     value: Value;
     disabled?: boolean;
 };
 /**
- * A named preference inside a menu: its icon and label at the leading edge, the
- * exclusive choices together at the trailing edge, close enough to read as one
- * control.
+ * A named preference inside a menu: its label at the leading edge and the
+ * exclusive choices in one small round pill at the trailing edge, as Vercel's
+ * account menu draws Theme.
  *
  * @family Menus
  * @when A setting that applies at once from inside a menu: the account menu's Theme and Language.
  * @instead A product's own setting with more choices or longer names is a submenu of radio items (`AccountMenu`'s `choices`). A setting on a page is a `ToggleGroup` or a `Select` in its section.
- * @behaviour Icon and label lead, on the commands' 12 px line; the choices sit in one bordered group at the trailing edge. Choosing applies at once and keeps the menu open, so the result shows without reopening it.
+ * @behaviour The label leads on the row's 36 px line; the choices sit in one round pill at the trailing edge, the chosen one ringed. Choosing applies at once and keeps the menu open, so the result shows without reopening it.
  * @words The label is a noun: "Theme", "Language". Each choice carries a full name even when it shows a glyph or a short code: "EN" is named "English".
- * @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip. The icon is hidden.
+ * @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
  */
-declare function MenuChoiceRow<Value extends string = string>({ className, disabled, icon, label, onValueChange, options, value, ...props }: MenuChoiceRowProps<Value>): React.JSX.Element;
+declare function MenuChoiceRow<Value extends string = string>({ className, disabled, label, onValueChange, options, value, ...props }: MenuChoiceRowProps<Value>): React.JSX.Element;
 export { MenuChoiceRow };
 //# sourceMappingURL=menu-choice-row.d.ts.map

package/dist/components/menu-choice-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-choice-row.d.ts","sourceRoot":"","sources":["../../src/components/menu-choice-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAClE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;IACtC,OAAO,EAAE,SAAS,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,aAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,qBA8C3B;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"menu-choice-row.d.ts","sourceRoot":"","sources":["../../src/components/menu-choice-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAClE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,aAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,qBAkC3B;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/menu-choice-row.js

@@ -2,22 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "./dropdown-menu.js";
 import { cn } from "../lib/utils.js";
 /**
- * A named preference inside a menu: its icon and label at the leading edge, the
- * exclusive choices together at the trailing edge, close enough to read as one
- * control.
+ * A named preference inside a menu: its label at the leading edge and the
+ * exclusive choices in one small round pill at the trailing edge, as Vercel's
+ * account menu draws Theme.
  *
  * @family Menus
  * @when A setting that applies at once from inside a menu: the account menu's Theme and Language.
  * @instead A product's own setting with more choices or longer names is a submenu of radio items (`AccountMenu`'s `choices`). A setting on a page is a `ToggleGroup` or a `Select` in its section.
- * @behaviour Icon and label lead, on the commands' 12 px line; the choices sit in one bordered group at the trailing edge. Choosing applies at once and keeps the menu open, so the result shows without reopening it.
+ * @behaviour The label leads on the row's 36 px line; the choices sit in one round pill at the trailing edge, the chosen one ringed. Choosing applies at once and keeps the menu open, so the result shows without reopening it.
  * @words The label is a noun: "Theme", "Language". Each choice carries a full name even when it shows a glyph or a short code: "EN" is named "English".
- * @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip. The icon is hidden.
+ * @access A radio group named by the label; each choice is a radio named by its `label`, with the same text as its tooltip.
  */
-function MenuChoiceRow({ className, disabled, icon, label, onValueChange, options, value, ...props }) {
-    return (_jsxs("div", { "data-slot": "menu-choice-row", className: cn("flex min-h-touch-target items-center justify-between gap-4 px-3 py-1 text-sm", className), ...props, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "flex h-5 shrink-0 items-center justify-center text-muted-foreground [&_svg:not([class*='size-'])]:size-4", children: icon })) : null, _jsx("span", { children: label })] }), _jsx(DropdownMenuRadioGroup, { "aria-label": label, className: "flex shrink-0 items-center gap-0.5 rounded-md border border-border p-0.5", value: value, onValueChange: (next) => {
+function MenuChoiceRow({ className, disabled, label, onValueChange, options, value, ...props }) {
+    return (_jsxs("div", { "data-slot": "menu-choice-row", className: cn("flex h-9 items-center justify-between gap-3 px-2 text-sm", className), ...props, children: [_jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(DropdownMenuRadioGroup, { "aria-label": label, className: "flex shrink-0 items-center rounded-full border border-border", value: value, onValueChange: (next) => {
                     const selected = options.find((option) => option.value === next);
                     if (selected)
                         onValueChange(selected.value);
-                }, children: options.map((option) => (_jsx(DropdownMenuRadioItem, { value: option.value, "aria-label": option.label, title: option.label, iconOnly: true, closeOnClick: false, disabled: disabled, children: option.content }, option.value))) })] }));
+                }, children: options.map((option) => (_jsx(DropdownMenuRadioItem, { value: option.value, "aria-label": option.label, title: option.label, iconOnly: true, className: "size-6 rounded-full text-xs text-muted-foreground data-checked:bg-popover data-checked:text-foreground data-checked:ring-1 data-checked:ring-border", closeOnClick: false, disabled: disabled, children: option.content }, option.value))) })] }));
 }
 export { MenuChoiceRow };

package/dist/components/message-notice.d.ts

@@ -1,10 +1,11 @@
+import { type NoticeTone as MessageNoticeTone } from "../internal/notice.js";
 import { type ResolvedMessage } from "./product-message.js";
-export type MessageNoticeTone = "destructive" | "warning" | "info";
+export type { MessageNoticeTone };
 /**
  * A message where it changes the reader's decision (DESIGN.md "Elevation &
  * Depth", the notice paragraph):
  * - `action`: under the control whose write failed, as one passage with its
- *   controls beside it;
+ *   control beside it;
  * - `section`: at the top of the section it concerns, framed, for a condition
  *   that lasts.
  */
@@ -18,17 +19,11 @@ export type MessageNoticeProps = {
  * A catalogue message about one thing on the screen.
  *
  * @family Feedback
- * @when A catalogue message about one thing on the screen: under the control whose write failed
- * (`action`), or atop the section whose condition lasts (`section`).
- * @instead For a whole page or the account use `NoticeBanner`. For a finished action use a toast.
- * For a field's wrong value use `FieldError`. For a failed read use `EmptyState failed`.
- * @behaviour Tone `destructive` by default, `warning` or `info`. Its actions are outline buttons.
- * Long words wrap, nothing truncates. A successful retry removes it. A `section` message with no
- * action is drawn as the passage under a control, because a banner always carries its fix.
- * @words From the catalogue only. Title says what happened to which object; body only when it adds
- * something. Action labelled with its result: *Try again*, *Sign in*.
- * @access `action`: `role="alert"` (`status` for info). `section`: `role="status"`,
- * `aria-live="polite"`, atomic. Focus stays where the person was.
+ * @when "Display text that requires attention or provides additional information." (https://vercel.com/geist/note) "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "Choose `variant` by meaning: `error` for a problem the user must fix, `warning` for a consequence to acknowledge, `success` for a passed check, `secondary` for neutral information." (https://vercel.com/geist/note) Ours: a message beside the field, card or section it describes, under the control whose write failed (`action`), or atop the section whose condition lasts (`section`). The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` (a passed check or a state the product manages for the reader, drawn in the accent blue) and `neutral` is `secondary`; there is no violet or cyan.
+ * @instead "Pick `Banner` when the message is page-level or system-wide and needs a CTA, `Toast` for transient acknowledgments, `Modal` for destructive confirmations." (https://vercel.com/geist/note) Ours: `Banner` is `NoticeBanner`, `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a field's wrong value use `FieldError`. For a failed read use `EmptyState failed`.
+ * @behaviour "A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message." (https://vercel.com/geist/note) "One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button." (https://vercel.com/geist/note) Ours: tone `destructive` by default, `warning`, `info` or `neutral`. Colour sits on the line, the text and the mark; the ground stays clear, and the action stays neutral. `section` is the framed note, a line 36 px high with its mark and sentence on one row and the action at its trailing edge (under 768 px the action takes its own row, full width), with or without an action; `action` is the unframed passage, its mark and sentence on one row with the action link inside the sentence, after a space. The title and the body run on as one passage, the title closed by a full stop when it has none of its own, so the two never read as one sentence; the title leads in bold (semibold in a note, medium in a passage) only when a body follows it, and stands at regular weight alone. A message worded for a notice has one action, a small default button in a section and an underlined 14 px link in the passage, and at most a second one after it (Nadia's *Ask Nadia* after *Try again*), an outline button in a section and a second link in the passage; a third is not shown. Long words wrap, nothing truncates. A successful retry removes it. Required: the catalogue `message`, so the sentence and its mark are always drawn.
+ * @words "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) "`NoteContent` is one sentence in active voice that names the impact: `Changing this region restarts all functions.`" (https://vercel.com/geist/note) "No `variant="info"` exists; omit `variant` for the default info icon or use `variant="secondary"` for neutral copy." (https://vercel.com/geist/note) "Single-fragment labels take no period; full descriptive sentences in the body do." (https://vercel.com/geist/note) Ours: words come from the catalogue only. The message's title stands in for `NoteLabel` and `NoteContent`, in sentence case, and `info` exists as Geist's blue `success`. The action is labelled with its result: *Try again*, *Sign in*. When the message carries an action, its body does not repeat it: the link is the step, so the body ends before "Try again".
+ * @access `action`: `role="alert"` (`status` for info and neutral). `section`: `role="status"`, `aria-live="polite"`, atomic. The mark is hidden. Focus stays where the person was.
  */
 export declare function MessageNotice({ message, placement, tone, className, }: MessageNoticeProps): import("react").JSX.Element;
 //# sourceMappingURL=message-notice.d.ts.map

package/dist/components/message-notice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-notice.d.ts","sourceRoot":"","sources":["../../src/components/message-notice.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAeF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,IAAoB,EACpB,SAAS,GACV,EAAE,kBAAkB,+BA2CpB"}
+{"version":3,"file":"message-notice.d.ts","sourceRoot":"","sources":["../../src/components/message-notice.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,KAAK,UAAU,IAAI,iBAAiB,EACrC,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAalC;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,IAAoB,EACpB,SAAS,GACV,EAAE,kBAAkB,+BAuEpB"}