@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/progress.js

@@ -2,56 +2,132 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { cva } from "class-variance-authority";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/utils.js";
-const progressIndicatorVariants = cva("h-full origin-left scale-x-[var(--progress-scale)] transition-transform duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none rtl:origin-right", {
+const progressIndicatorVariants = cva("h-full rounded-sm transition-[width,background-color] duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", {
     variants: {
         tone: {
             default: "bg-primary",
+            secondary: "bg-muted-foreground",
+            success: "bg-(--nc-state-complete)",
             warning: "bg-(--nc-state-review)",
             critical: "bg-(--nc-state-blocked)",
+            info: "bg-info",
         },
     },
     defaultVariants: {
         tone: "default",
     },
 });
+const PROGRESS_TRACK_CLASS = {
+    sm: "h-1",
+    md: "h-2.5",
+};
 const OVER_CAP_CLASS = "bg-(--nc-state-blocked)";
+const ANNOUNCE_INTERVAL_MS = 1000;
+function useAnnouncedValue(value) {
+    const [announced, setAnnounced] = useState(value);
+    const announcedAt = useRef(0);
+    useEffect(() => {
+        if (value === announced)
+            return undefined;
+        const announce = () => {
+            announcedAt.current = Date.now();
+            setAnnounced(value);
+        };
+        const wait = announcedAt.current + ANNOUNCE_INTERVAL_MS - Date.now();
+        if (wait <= 0) {
+            announce();
+            return undefined;
+        }
+        const timer = setTimeout(announce, wait);
+        return () => clearTimeout(timer);
+    }, [value, announced]);
+    return announced;
+}
+function reachedStage(stops, value) {
+    return stops.filter((stop) => stop.value <= value).sort((a, b) => b.value - a.value)[0];
+}
+function spokenReading(announced, { min, max, format, locale, stops, getAriaValueText }) {
+    if (!Number.isFinite(announced)) {
+        return { "aria-valuenow": undefined, "aria-valuetext": undefined };
+    }
+    const clamped = Math.min(max, Math.max(min, announced));
+    const formatted = format
+        ? new Intl.NumberFormat(locale, format).format(clamped)
+        : new Intl.NumberFormat(locale, { style: "percent" }).format(max > min ? (clamped - min) / (max - min) : 0);
+    const text = getAriaValueText?.(formatted, announced) ?? formatted;
+    const stage = stops ? reachedStage(stops, announced) : undefined;
+    return {
+        "aria-valuenow": clamped,
+        "aria-valuetext": stage ? `${stage.label}, ${text}` : text,
+    };
+}
 const ProgressStateContext = createContext({
-    scale: 0,
+    percent: 0,
     tone: "default",
+    size: "md",
     overCap: false,
+    hasStops: false,
 });
 /**
  * A known amount against a real maximum, with its label and value.
  *
  * @family Data
- * @when A known amount against a real maximum, with its label and value: included runs used against the plan's allowance.
- * @instead An unknown wait is the waiting line, never a bar with an invented percentage. A run's consumption in a dense spot is a `UsageMeter`. A single figure is a `KpiCard`.
- * @behaviour A 4 px track in the `line` colour. The fill moves only when the reading changes, on `open`; still under reduced motion. `tone` is the product's threshold, never derived from the value. Past the maximum the bar fills and turns red, whatever the tone.
- * @words Print the work and its unit in `ProgressValue`: "620 of 1,000".
- * @access A `progressbar` named by its `ProgressLabel` or `aria-label`, with its value.
+ * @when "Determinate work whose total is knowable, like file uploads, multi-step setup, build steps, or batch deletions." (https://vercel.com/geist/progress)
+ * "Use `max` for the real ceiling (`max={files.length}`), not a hardcoded `100`. The component computes the percentage from `value / max`." (https://vercel.com/geist/progress)
+ * Ours: it always has a `value` and a name, as `aria-label` or as `aria-labelledby` pointing at its
+ * `ProgressLabel`, and the type asks for both. `stops` mark genuine stages, each named. `size` is
+ * `md` (10 px), or `sm` (4 px) inside a table cell or a row.
+ * @instead "For short indeterminate waits (~1–3s), use `Spinner`; for inline copy like `Saving`, use `Loading Dots`." (https://vercel.com/geist/progress)
+ * Ours: neither exists; an unknown wait is the waiting line, never a bar with an invented
+ * percentage.
+ * "For usage against a quota or ratio, use `Gauge`; the circle reads as health, the bar reads as progress." (https://vercel.com/geist/progress)
+ * Ours: a run's consumption in a dense spot is a `UsageMeter`. A single figure is a `KpiCard`.
+ * @behaviour "Threshold colors via `dynamic colors` should mirror the same breakpoints used elsewhere (warning at the same threshold a quota note fires)." (https://vercel.com/geist/progress)
+ * Ours: colour sits on the fill alone: the track is always the neutral line colour and the words
+ * beside the bar stay neutral. The fill is neutral by default; `tone` is that threshold (amber
+ * where the note fires, red past the cap), never derived from the value. Past the maximum the bar
+ * fills and turns red, whatever the tone. The fill's end is rounded, and square when `stops` cut
+ * the bar. The fill moves only when the reading changes, on `open`; still under reduced motion. The
+ * printed value is always the live reading.
+ * "Use stops for genuine multi-stage work and label the stage next to the bar (`Step 2 of 4 · Building`); a stop with no label is decorative noise." (https://vercel.com/geist/progress)
+ * @words "Pair the bar with text naming the work and units: `Uploading 12 of 30 files`, `Building · 1.2 GB / 4 GB`. The bar alone doesn’t say what’s progressing." (https://vercel.com/geist/progress)
+ * "Don’t append `successfully` or `complete` once the bar fills; swap to a completion state (toast, success row, redirect)." (https://vercel.com/geist/progress)
+ * "For long operations, name the work in the surrounding copy (`Building deployment…`) instead of leaving a bare percentage." (https://vercel.com/geist/progress)
+ * Ours: print the work and its unit in `ProgressValue`.
+ * @access "Component sets `role="progressbar"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`; pass an accessible name through `aria-label` on the wrapper or a sibling `<label>` tied with `aria-labelledby`." (https://vercel.com/geist/progress)
+ * "Throttle `aria-valuenow` updates to roughly once a second so screen readers don’t announce every increment of a fast upload." (https://vercel.com/geist/progress)
+ * Ours: the printed value is live, and the value it announces follows it at most once a second.
+ * "Stops accept their own `ariaLabel`; name each one (`Build complete`, `Tests complete`) so the bar is navigable without sight." (https://vercel.com/geist/progress)
+ * Ours: a stop's name is its `label`. With `stops`, the stage reached leads the spoken value; a
+ * stop is not focusable, because a progressbar's children are presentational.
  */
-function Progress({ className, children, value, min = 0, max = 100, tone = "default", indicatorColor, ...props }) {
-    const measured = value !== null && Number.isFinite(value);
-    const scale = measured && max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0;
+function Progress({ className, children, value, min = 0, max = 100, format, locale, getAriaValueText, tone = "default", size = "md", indicatorColor, stops, ...props }) {
+    const announced = useAnnouncedValue(value);
+    const measured = Number.isFinite(value);
+    const percent = measured && max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) * 100 : 0;
     const overCap = measured && value > max;
-    return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, "data-slot": "progress", "data-tone": tone, "data-over-cap": overCap || undefined, className: cn("flex flex-wrap gap-3", className), ...props, children: _jsxs(ProgressStateContext.Provider, { value: { scale, tone, overCap, indicatorColor }, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
+    const spoken = spokenReading(announced, { min, max, format, locale, stops, getAriaValueText });
+    return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, format: format, locale: locale, "data-slot": "progress", "data-tone": tone, "data-over-cap": overCap || undefined, className: cn("flex flex-wrap gap-3", className), "aria-valuenow": spoken["aria-valuenow"], "aria-valuetext": spoken["aria-valuetext"], ...props, children: _jsxs(ProgressStateContext.Provider, { value: { percent, tone, size, overCap, hasStops: stops !== undefined, indicatorColor }, children: [children, _jsxs(ProgressTrack, { children: [_jsx(ProgressIndicator, {}), stops?.map((stop) => (_jsxs("span", { "aria-hidden": "true", className: "absolute inset-y-0 flex w-0.5", "data-slot": "progress-stop", style: {
+                                insetInlineStart: `calc(${((stop.value - min) / (max - min)) * 100}% - 1px)`,
+                            }, children: [_jsx("span", { className: "w-px bg-foreground/35" }), _jsx("span", { className: "w-px bg-background" })] }, stop.value)))] })] }) }));
 }
 function ProgressTrack({ className, ...props }) {
-    return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-border", className), "data-slot": "progress-track", ...props }));
+    const { size } = useContext(ProgressStateContext);
+    return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex w-full items-center overflow-x-hidden rounded-sm bg-border", PROGRESS_TRACK_CLASS[size], className), "data-slot": "progress-track", ...props }));
 }
 function ProgressIndicator({ className, style, ...props }) {
-    const { scale, tone, overCap, indicatorColor } = useContext(ProgressStateContext);
+    const { percent, tone, overCap, hasStops, indicatorColor } = useContext(ProgressStateContext);
     const indicatorStyle = (state) => {
         // oxlint-disable-next-line anti-slop/no-runtime-typeof -- Base UI's style prop is a CSSProperties | (state => CSSProperties) union, told apart only by typeof.
         const resolvedStyle = typeof style === "function" ? style(state) : style;
-        const base = { width: "100%", "--progress-scale": scale };
+        const base = { width: `${percent}%` };
         if (indicatorColor)
             base["--progress-indicator-color"] = indicatorColor;
         return { ...base, ...resolvedStyle };
     };
-    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", "data-tone": overCap ? "over-cap" : tone, "data-over-cap": overCap || undefined, className: cn(progressIndicatorVariants({ tone }), indicatorColor && "bg-(--progress-indicator-color)", 
+    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", "data-tone": overCap ? "over-cap" : tone, "data-over-cap": overCap || undefined, className: cn(progressIndicatorVariants({ tone }), indicatorColor && "bg-(--progress-indicator-color)", hasStops && "rounded-e-none", 
         // After the variant, so the merge keeps this one paint: an allowance
         // spent reads the same whatever tone the product chose for approaching
         // it.

package/dist/components/prose.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+export type ProseProps = ComponentProps<"div"> & {
+    /** `roomy` sets the copy at 16/24 for a page that is read through, such as a company wiki; the default is 14/20. */
+    size?: "default" | "roomy";
+};
+/**
+ * Written text a renderer produced, set in the design system's type roles: headings, paragraphs,
+ * lists, links, code, quotes and tables, none of them given a class by the page.
+ *
+ * @family Other
+ * @when "Copy styles are for multiple lines and have a higher line-height than Label." (https://vercel.com/geist/typography) Ours: Markdown or other rich text turned into elements by the product's renderer: a legal document in the Portal, a company wiki page in Nadia.
+ * @instead A conversation's Markdown stays the conversation's own `MarkdownText`. One fact in a sentence is its own role (`text-body-sm`), a table the product builds is `DataTable`, and a code sample with a copy button is `CodeBlock`. Prose that is a column of settings is `SettingsSection`.
+ * @behaviour "Headings: Used to introduce pages or sections." (https://vercel.com/geist/typography) "`text-copy-13-mono`: Used for inline code mentions." (https://vercel.com/geist/typography) Ours: it styles the elements inside it by their tag, so the product chooses the renderer and keeps only what is its own: an anchor on a heading, a page link that opens in place, the level a heading takes below the page's own title. A heading's size follows its tag: `h1` 24 px, `h2` 20, `h3` 16, `h4` to `h6` 14 (`heading-md` to `heading-compact`), with 24 px above and none below, so a renderer that moves a heading down a level moves its size down with it; blocks stand 12 px apart; lists indent 20 px; a quote has a 2 px rule at its left; a code block is a bordered recessed box in mono 13 px, inline code a muted chip, with no syntax colour; a table has medium muted headings, a 1 px rule under every row and no frame. Colour: ink for the text, the link blue on links alone, muted for quotes and table headings; no other hue. It sets no width: the reading column does.
+ * @words None of its own: the text is the document's. A heading is a noun or a short sentence in the document's language; a link's text names where it goes.
+ * @access It adds no landmark and no role. The renderer keeps the document's heading order and each link's text; a table keeps its `th` cells and a code block its `pre`.
+ */
+declare function Prose({ className, size, ...props }: ProseProps): import("react").JSX.Element;
+export { Prose };
+//# sourceMappingURL=prose.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../src/components/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAiB5C,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C,oHAAoH;IACpH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAcnE;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/prose.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const roles = [
+    "[&_h1]:text-heading-md [&_h2]:text-heading-sm [&_h3]:text-heading-xs",
+    "[&_:is(h4,h5,h6)]:text-heading-compact [&_:is(h1,h2,h3,h4,h5,h6)]:mt-6 [&_:is(h1,h2,h3,h4,h5,h6)]:scroll-mt-6",
+    "[&_:is(p,ul,ol,pre,blockquote,table,hr)]:mt-3 [&>:first-child]:mt-0",
+    "[&_:is(ul,ol)]:pl-5 [&_ul]:list-disc [&_ol]:list-decimal [&_li+li]:mt-1 [&_li>:is(ul,ol)]:mt-1",
+    "[&_a]:text-(--nc-link) [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:decoration-2",
+    "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-code [&_:not(pre)>code]:text-code",
+    "[&_pre]:overflow-x-auto [&_pre]:rounded-sm [&_pre]:border [&_pre]:border-border [&_pre]:bg-recessed [&_pre]:p-3 [&_pre]:font-code [&_pre]:text-code",
+    "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
+    "[&_hr]:border-border [&_img]:max-w-full",
+    "[&_table]:w-full [&_table]:border-collapse [&_td]:border-b [&_td]:border-border [&_td]:py-2 [&_td]:pr-3 [&_td]:align-top [&_th]:border-b [&_th]:border-border [&_th]:py-2 [&_th]:pr-3 [&_th]:text-left [&_th]:text-label-sm [&_th]:font-medium [&_th]:text-muted-foreground",
+];
+/**
+ * Written text a renderer produced, set in the design system's type roles: headings, paragraphs,
+ * lists, links, code, quotes and tables, none of them given a class by the page.
+ *
+ * @family Other
+ * @when "Copy styles are for multiple lines and have a higher line-height than Label." (https://vercel.com/geist/typography) Ours: Markdown or other rich text turned into elements by the product's renderer: a legal document in the Portal, a company wiki page in Nadia.
+ * @instead A conversation's Markdown stays the conversation's own `MarkdownText`. One fact in a sentence is its own role (`text-body-sm`), a table the product builds is `DataTable`, and a code sample with a copy button is `CodeBlock`. Prose that is a column of settings is `SettingsSection`.
+ * @behaviour "Headings: Used to introduce pages or sections." (https://vercel.com/geist/typography) "`text-copy-13-mono`: Used for inline code mentions." (https://vercel.com/geist/typography) Ours: it styles the elements inside it by their tag, so the product chooses the renderer and keeps only what is its own: an anchor on a heading, a page link that opens in place, the level a heading takes below the page's own title. A heading's size follows its tag: `h1` 24 px, `h2` 20, `h3` 16, `h4` to `h6` 14 (`heading-md` to `heading-compact`), with 24 px above and none below, so a renderer that moves a heading down a level moves its size down with it; blocks stand 12 px apart; lists indent 20 px; a quote has a 2 px rule at its left; a code block is a bordered recessed box in mono 13 px, inline code a muted chip, with no syntax colour; a table has medium muted headings, a 1 px rule under every row and no frame. Colour: ink for the text, the link blue on links alone, muted for quotes and table headings; no other hue. It sets no width: the reading column does.
+ * @words None of its own: the text is the document's. A heading is a noun or a short sentence in the document's language; a link's text names where it goes.
+ * @access It adds no landmark and no role. The renderer keeps the document's heading order and each link's text; a table keeps its `th` cells and a code block its `pre`.
+ */
+function Prose({ className, size = "default", ...props }) {
+    return (_jsx("div", { className: cn("min-w-0 text-foreground", size === "roomy" ? "text-body-md" : "text-body-sm", roles, className), "data-size": size, "data-slot": "prose", ...props }));
+}
+export { Prose };

package/dist/components/radio-group.d.ts

@@ -1,21 +1,60 @@
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { type ControlName } from "../internal/control-name.js";
+export type RadioGroupName = {
+    "aria-labelledby": string;
+    "aria-label"?: undefined;
+} | {
+    "aria-label": string;
+    "aria-labelledby"?: undefined;
+};
+type RadioGroupProps = Omit<RadioGroupPrimitive.Props, "aria-label" | "aria-labelledby"> & RadioGroupName;
+type RadioGroupItemProps = Omit<RadioPrimitive.Root.Props, "required"> & ControlName;
 /**
  * One option of a few, all shown at once.
  *
  * @family Choices
- * @when One of 2 to 6 options that exclude each other, all shown at once.
- * @instead Options that each need a sentence are choice tiles. Seven or more is a `Select`; a list
- * to search is a `Combobox`. Another view of the same thing is `Tabs`.
- * @behaviour One tab stop for the group; the arrows move and choose. The chosen circle fills with
- * ink and a white 8 px dot. Preselect the safe option when there is one; leave a consequential
- * choice empty until the person makes it.
- * @words Options are parallel phrases in sentence case with no end punctuation: *Only me*,
- * *Everyone in the company*. The legend names the setting; it does not ask a question.
- * @access `role="radiogroup"` named by its legend, each radio by its label. A disabled option shows
- * why in its own help line.
+ * @when "A single choice from 2–6 mutually exclusive options where seeing every option matters
+ * (deploy regions, plan tiers, billing cycle)." (https://vercel.com/geist/radio) Ours: a plan's
+ * billing cycle, who can see an Agent.
+ * @instead "Past 6 options, switch to `Select` or `Combobox` so the list doesn’t dominate the
+ * form." (https://vercel.com/geist/radio) "For binary on/off, use `Toggle`."
+ * (https://vercel.com/geist/radio) "For richer per-option content (icon, description, badge), use
+ * `Choicebox`." (https://vercel.com/geist/radio) Ours: Geist's `Toggle` is our `Switch` and its
+ * `Choicebox` our `ChoiceboxGroup`. Two or three views of one surface are a `SegmentedControl`.
+ * Another view of the same thing is `Tabs`.
+ * @behaviour "Pre-select the safest default so the field reads as configured, never as
+ * required-but-empty." (https://vercel.com/geist/radio) "Skip the default only when the choice has
+ * real consequences and you want a deliberate pick." (https://vercel.com/geist/radio) "Required
+ * state goes on the `RadioGroup`, not on individual options." (https://vercel.com/geist/radio)
+ * "Required-against-a-single-radio is meaningless." (https://vercel.com/geist/radio) "Arrow keys
+ * move selection within the group and skip disabled options." (https://vercel.com/geist/radio) "Tab
+ * moves to the next field, not the next radio." (https://vercel.com/geist/radio) "Disabled options
+ * need a Tooltip naming why (`Available on Pro and Enterprise`)." (https://vercel.com/geist/radio)
+ * "A greyed-out radio with no reason reads as broken." (https://vercel.com/geist/radio) Ours: the
+ * group is named by `aria-label` or `aria-labelledby`, and each `RadioGroupItem` by `aria-label`,
+ * `aria-labelledby` or an `id` that a `FieldLabel` points at; one without a name does not compile.
+ * Options are 16 px circles 24 px apart (a dense call site passes its own `gap`), each label 8 px
+ * away at 13 px regular weight on a 20 px row. Colour: the circle is unfilled, and the chosen one
+ * darkens its edge and shows an 8 px ink dot; nothing takes a hue, and a disabled option greys
+ * edge, dot and label together, with no hover change. The arrows also choose. The reason for a
+ * disabled option is written in its own help line.
+ * @words "Group label is a Title Case noun like `Deployment Region` or `Billing Cycle`."
+ * (https://vercel.com/geist/radio) "Render it via `<legend>` or a sibling label tied with
+ * `aria-labelledby`." (https://vercel.com/geist/radio) "Option labels are parallel: same part of
+ * speech, same length range, same register." (https://vercel.com/geist/radio) "`Monthly` /
+ * `Yearly`, not `Monthly` / `Pay yearly`." (https://vercel.com/geist/radio) Ours: sentence case
+ * with no end punctuation: *Only me*, *Everyone in the company*. The legend names the setting; it
+ * does not ask a question.
+ * @access "Wrap related radios in `<fieldset>` + `<legend>` so screen readers announce the group
+ * name before each option." (https://vercel.com/geist/radio) "The standalone unlabeled radio
+ * (custom UI) needs an `aria-label` describing the choice." (https://vercel.com/geist/radio) "Never
+ * ship a radio with no accessible name." (https://vercel.com/geist/radio) "Don’t replace the native
+ * focus ring with a CSS hack that drops outline-offset; keyboard users lose track of which option
+ * is focused." (https://vercel.com/geist/radio) Ours: `role="radiogroup"` inside a `FieldSet`. The
+ * legend names the fieldset, not the group, so point `aria-labelledby` at the `FieldLegend`'s id.
  */
-declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react").JSX.Element;
-declare function RadioGroupItem({ children, className, ...props }: RadioPrimitive.Root.Props): import("react").JSX.Element;
+declare function RadioGroup({ className, ...props }: RadioGroupProps): import("react").JSX.Element;
+declare function RadioGroupItem({ children, className, ...props }: RadioGroupItemProps): import("react").JSX.Element;
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,KAAK,+BAQrE;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,+BAoBnF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAG/E,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,MAAM,cAAc,GACtB;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5D,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,GACtF,cAAc,CAAC;AAEjB,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG,WAAW,CAAC;AAGrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAQ3D;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAmB7E;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/radio-group.js

@@ -2,25 +2,55 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { cn } from "../lib/utils.js";
+// eslint-disable-next-line no-warning-comments -- the block quotes Geist's radio rule word for word (https://vercel.com/geist/radio); "hack" there is prose, not a marker
 /**
  * One option of a few, all shown at once.
  *
  * @family Choices
- * @when One of 2 to 6 options that exclude each other, all shown at once.
- * @instead Options that each need a sentence are choice tiles. Seven or more is a `Select`; a list
- * to search is a `Combobox`. Another view of the same thing is `Tabs`.
- * @behaviour One tab stop for the group; the arrows move and choose. The chosen circle fills with
- * ink and a white 8 px dot. Preselect the safe option when there is one; leave a consequential
- * choice empty until the person makes it.
- * @words Options are parallel phrases in sentence case with no end punctuation: *Only me*,
- * *Everyone in the company*. The legend names the setting; it does not ask a question.
- * @access `role="radiogroup"` named by its legend, each radio by its label. A disabled option shows
- * why in its own help line.
+ * @when "A single choice from 2–6 mutually exclusive options where seeing every option matters
+ * (deploy regions, plan tiers, billing cycle)." (https://vercel.com/geist/radio) Ours: a plan's
+ * billing cycle, who can see an Agent.
+ * @instead "Past 6 options, switch to `Select` or `Combobox` so the list doesn’t dominate the
+ * form." (https://vercel.com/geist/radio) "For binary on/off, use `Toggle`."
+ * (https://vercel.com/geist/radio) "For richer per-option content (icon, description, badge), use
+ * `Choicebox`." (https://vercel.com/geist/radio) Ours: Geist's `Toggle` is our `Switch` and its
+ * `Choicebox` our `ChoiceboxGroup`. Two or three views of one surface are a `SegmentedControl`.
+ * Another view of the same thing is `Tabs`.
+ * @behaviour "Pre-select the safest default so the field reads as configured, never as
+ * required-but-empty." (https://vercel.com/geist/radio) "Skip the default only when the choice has
+ * real consequences and you want a deliberate pick." (https://vercel.com/geist/radio) "Required
+ * state goes on the `RadioGroup`, not on individual options." (https://vercel.com/geist/radio)
+ * "Required-against-a-single-radio is meaningless." (https://vercel.com/geist/radio) "Arrow keys
+ * move selection within the group and skip disabled options." (https://vercel.com/geist/radio) "Tab
+ * moves to the next field, not the next radio." (https://vercel.com/geist/radio) "Disabled options
+ * need a Tooltip naming why (`Available on Pro and Enterprise`)." (https://vercel.com/geist/radio)
+ * "A greyed-out radio with no reason reads as broken." (https://vercel.com/geist/radio) Ours: the
+ * group is named by `aria-label` or `aria-labelledby`, and each `RadioGroupItem` by `aria-label`,
+ * `aria-labelledby` or an `id` that a `FieldLabel` points at; one without a name does not compile.
+ * Options are 16 px circles 24 px apart (a dense call site passes its own `gap`), each label 8 px
+ * away at 13 px regular weight on a 20 px row. Colour: the circle is unfilled, and the chosen one
+ * darkens its edge and shows an 8 px ink dot; nothing takes a hue, and a disabled option greys
+ * edge, dot and label together, with no hover change. The arrows also choose. The reason for a
+ * disabled option is written in its own help line.
+ * @words "Group label is a Title Case noun like `Deployment Region` or `Billing Cycle`."
+ * (https://vercel.com/geist/radio) "Render it via `<legend>` or a sibling label tied with
+ * `aria-labelledby`." (https://vercel.com/geist/radio) "Option labels are parallel: same part of
+ * speech, same length range, same register." (https://vercel.com/geist/radio) "`Monthly` /
+ * `Yearly`, not `Monthly` / `Pay yearly`." (https://vercel.com/geist/radio) Ours: sentence case
+ * with no end punctuation: *Only me*, *Everyone in the company*. The legend names the setting; it
+ * does not ask a question.
+ * @access "Wrap related radios in `<fieldset>` + `<legend>` so screen readers announce the group
+ * name before each option." (https://vercel.com/geist/radio) "The standalone unlabeled radio
+ * (custom UI) needs an `aria-label` describing the choice." (https://vercel.com/geist/radio) "Never
+ * ship a radio with no accessible name." (https://vercel.com/geist/radio) "Don’t replace the native
+ * focus ring with a CSS hack that drops outline-offset; keyboard users lose track of which option
+ * is focused." (https://vercel.com/geist/radio) Ours: `role="radiogroup"` inside a `FieldSet`. The
+ * legend names the fieldset, not the group, so point `aria-labelledby` at the `FieldLegend`'s id.
  */
 function RadioGroup({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid w-full gap-2", className), ...props }));
+    return (_jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid w-full gap-6", className), ...props }));
 }
 function RadioGroupItem({ children, className, ...props }) {
-    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: children ?? (_jsx(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex size-4 items-center justify-center", children: _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" }) })) }));
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input nc-transition-paint after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 data-checked:border-primary data-checked:text-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-unchecked:not-data-disabled:hover:border-muted-foreground data-unchecked:not-data-disabled:hover:bg-accent aria-invalid:border-destructive aria-invalid:aria-checked:border-primary [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: children ?? (_jsx(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", keepMounted: true, className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-current nc-transition-transform data-checked:scale-100" })) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/components/reading-column.js

@@ -12,6 +12,6 @@ import { cn } from "../lib/utils.js";
  * @access A layout container.
  */
 function ReadingColumn({ width = "reading", className, ...props }) {
-    return (_jsx("div", { "data-slot": "reading-column", "data-width": width, className: cn("mx-auto flex w-full min-w-0 flex-col gap-6", width === "reading" && "max-w-3xl", width === "configuration" && "max-w-4xl", className), ...props }));
+    return (_jsx("div", { "data-slot": "reading-column", "data-width": width, className: cn("mx-auto flex w-full min-w-0 flex-col gap-6", width === "reading" && "max-w-3xl", width === "configuration" && "max-w-2xl", className), ...props }));
 }
 export { ReadingColumn };

package/dist/components/record-identity.d.ts

@@ -8,17 +8,18 @@ import { type IdentityMarkProps } from "./identity-mark.js";
  * @family Status
  * @when The first cell of every collection row: the mark, the name, and one muted line saying what the record is or where it comes from, so the row reads without a heading.
  * @instead An Agent in a gallery is `AgentListRow`; a model is `ModelIdentity`. A descriptive item with prose and actions is `Item`.
- * @behaviour The name holds one line and ends in an ellipsis, whole in its title, with a `hint` such as an ID read after it. `wraps` only when the name is the whole record, such as a memory. The detail breaks between words, so a failure inside the row is read whole. The table owns the link.
- * @words The name as the record calls itself. Detail: kind, then relation, three to six words: "Company skill · every Agent has it".
+ * @behaviour The mark stands 16 px before the name. The name is semibold ink and the detail muted, two lines with no gap between them, so the row is an entity row; `mark` and `detail` are both required, and a record with nothing to say in the detail passes the dash of `TableValue`. The name holds one line and ends in an ellipsis, whole in its title, with a `hint` such as an ID read after it. The detail is one line too and ends in an ellipsis, whole in its title when it is text; in a row on a card narrower than its columns, the facts that leave the row join it after a middle dot, so the record stays the name over one line. `wraps` only when the name is the whole record, such as a memory, and then the detail wraps too. The table owns the link.
+ * @words “Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity)
+ * Ours: the name as the record calls itself, and the detail in sentence case: kind, then relation, three to six words, "Company skill · every Agent has it".
  * @access The name is the row link's text; the mark is decorative; the title carries the full name.
  */
 declare function RecordIdentity({ name, mark, hint, detail, wraps, }: {
     name: ReactNode;
-    /** Drawn at 32, whatever size it carries. */
-    mark?: IdentityMarkProps;
+    /** Drawn at 32, whatever size it carries. An initials mark when the record has no picture. */
+    mark: IdentityMarkProps;
     /** Read after the name in its title, such as an identifier the row does not show. */
     hint?: string;
-    detail?: ReactNode;
+    detail: NonNullable<ReactNode>;
     wraps?: boolean;
 }): import("react").JSX.Element;
 export { RecordIdentity };

package/dist/components/record-identity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-identity.d.ts","sourceRoot":"","sources":["../../src/components/record-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAGlF;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BA2BA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"record-identity.d.ts","sourceRoot":"","sources":["../../src/components/record-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAIlF;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,8FAA8F;IAC9F,IAAI,EAAE,iBAAiB,CAAC;IACxB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAmCA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/record-identity.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IdentityMark } from "./identity-mark.js";
+import { TableCompactFacts } from "../internal/table-compact-line.js";
 import { cn } from "../lib/utils.js";
 /**
  * A record's identity in a row (DESIGN.md "Tables and missing values"): its
@@ -9,13 +10,21 @@ import { cn } from "../lib/utils.js";
  * @family Status
  * @when The first cell of every collection row: the mark, the name, and one muted line saying what the record is or where it comes from, so the row reads without a heading.
  * @instead An Agent in a gallery is `AgentListRow`; a model is `ModelIdentity`. A descriptive item with prose and actions is `Item`.
- * @behaviour The name holds one line and ends in an ellipsis, whole in its title, with a `hint` such as an ID read after it. `wraps` only when the name is the whole record, such as a memory. The detail breaks between words, so a failure inside the row is read whole. The table owns the link.
- * @words The name as the record calls itself. Detail: kind, then relation, three to six words: "Company skill · every Agent has it".
+ * @behaviour The mark stands 16 px before the name. The name is semibold ink and the detail muted, two lines with no gap between them, so the row is an entity row; `mark` and `detail` are both required, and a record with nothing to say in the detail passes the dash of `TableValue`. The name holds one line and ends in an ellipsis, whole in its title, with a `hint` such as an ID read after it. The detail is one line too and ends in an ellipsis, whole in its title when it is text; in a row on a card narrower than its columns, the facts that leave the row join it after a middle dot, so the record stays the name over one line. `wraps` only when the name is the whole record, such as a memory, and then the detail wraps too. The table owns the link.
+ * @words “Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity)
+ * Ours: the name as the record calls itself, and the detail in sentence case: kind, then relation, three to six words, "Company skill · every Agent has it".
  * @access The name is the row link's text; the mark is decorative; the title carries the full name.
  */
 function RecordIdentity({ name, mark, hint, detail, wraps = false, }) {
     // oxlint-disable-next-line anti-slop/no-runtime-typeof -- name is a ReactNode; only a string can be a title attribute.
     const title = typeof name === "string" ? (hint ? `${name} · ${hint}` : name) : undefined;
-    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", "data-slot": "record-identity", children: [mark ? _jsx(IdentityMark, { ...mark, size: 32 }) : null, _jsxs("span", { className: "grid min-w-0", children: [_jsx("span", { className: cn("min-w-0 font-medium", wraps ? "break-words whitespace-pre-wrap" : "truncate"), title: wraps ? undefined : title, children: name }), detail ? (_jsx("span", { className: "text-xs break-words whitespace-normal text-muted-foreground", "data-slot": "record-identity-detail", children: detail })) : null] })] }));
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-4", "data-slot": "record-identity", children: [_jsx(IdentityMark, { ...mark, size: 32 }), _jsxs("span", { className: "grid min-w-0 in-[table]:w-0 in-[table]:flex-1", children: [_jsx("span", { className: cn("min-w-0 font-semibold text-foreground", wraps ? "break-words whitespace-pre-wrap" : "truncate"), title: wraps ? undefined : title, children: name }), _jsxs("span", { className: cn(
+                        // The line is the containing block of the facts' screen-reader labels, so what it cuts
+                        // stays cut instead of widening the table.
+                        "relative text-sm text-muted-foreground", wraps
+                            ? "break-words whitespace-normal"
+                            : "truncate has-[[data-wraps]]:break-words has-[[data-wraps]]:whitespace-normal"), "data-slot": "record-identity-detail", 
+                        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- detail is a ReactNode; only a string can be a title attribute.
+                        title: !wraps && typeof detail === "string" ? detail : undefined, children: [detail, _jsx(TableCompactFacts, {})] })] })] }));
 }
 export { RecordIdentity };