@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/field.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cva } from "class-variance-authority";
+import { OctagonAlertIcon } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Label } from "./label.js";
 import { Separator } from "./separator.js";
@@ -9,12 +10,12 @@ function FieldSet({ className, ...props }) {
     return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
 }
 function FieldLegend({ className, variant = "legend", ...props }) {
-    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 data-[variant=label]:text-label data-[variant=label]:font-medium data-[variant=legend]:text-heading-xs", className), ...props }));
+    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 data-[variant=label]:text-label-sm data-[variant=label]:leading-normal data-[variant=label]:text-muted-foreground data-[variant=legend]:text-heading-xs", className), ...props }));
 }
 function FieldGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
+    return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3", className), ...props }));
 }
-const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+const fieldVariants = cva("group/field flex w-full gap-2", {
     variants: {
         orientation: {
             vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
@@ -27,21 +28,49 @@ const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:tex
     },
 });
 /**
- * A control with its label, its help and its error, tied together.
+ * A control with its label and its error, tied together; a checkbox, a radio or a switch with the
+ * sentence beside it.
  *
  * @family Inputs
- * @when Every control with a name: it ties the label, the help and the error to the control. Inside
- * a settings section `SettingsField` does it and hands the control its `controlProps`. A rich
- * choice tile is a `FieldLabel` holding a `Field` with its radio or checkbox.
- * @instead A group of radios or checkboxes is a `FieldSet` with a `FieldLegend`. A whole save group
- * is `SettingsSection`.
- * @behaviour Label, then help, then the error, then the control, 8 px apart. Invalid turns the
- * label and message red and puts the red edge and outline on the control. Validate on submit or on
- * leaving a field, then update the message as the value is corrected.
- * @words The help says what the setting changes, in one sentence. The error says how to fix it, not
- * what went wrong: *Enter a full address, like name@company.it.* A disabled field says why.
+ * @when A checkbox, a radio or a switch with its sentence, or a group of such rows. Inside a
+ * settings section `SettingsField` does it and hands the control its `controlProps`.
+ * @instead A text box, a textarea, a select, a combobox or a multi-select takes `label` and `error`
+ * as props and draws these same parts: wrapping one in `Field` with a `FieldLabel` is the same job
+ * done twice. A bordered tile that holds a radio or checkbox and a sentence is `ChoiceboxGroup`. A
+ * whole save group is `SettingsSection`. A group of radios or checkboxes is a `FieldSet` with a
+ * `FieldLegend`:
+ * "Wrap related radios in `<fieldset>` + `<legend>` so screen readers announce the group name before each option." (https://vercel.com/geist/radio)
+ * "Wrap related checkboxes in `<fieldset>` with a `<legend>` so screen readers announce the group name before each option." (https://vercel.com/geist/checkbox)
+ * @behaviour "Accessible text label for form controls." (https://vercel.com/geist/label) Label,
+ * then the control, then the error under it, 8 px apart, at regular weight; the fields of a
+ * `FieldGroup` stand 16 px apart. The label stays neutral when the control is invalid: red sits on
+ * the control's edge and on the message, the message with an alert mark before it at 13 px (16 px
+ * beside a large control). A control fills its field.
+ * "Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through `aria-describedby`." (https://vercel.com/geist/input)
+ * Ours: help is the one-line description of the card or the form that holds the field, not a line
+ * under each field; a `FieldDescription` is for the sentence beside a checkbox, a radio or a
+ * switch.
+ * "Validate on blur, not on every keystroke; surface the message by passing a string to `error`." (https://vercel.com/geist/input)
+ * "Validate on blur and pass a string to `error` to render the inline message; the validation replaces helper text on failure." (https://vercel.com/geist/textarea)
+ * Ours: the message updates as the value is corrected.
+ * "Keep the field focusable while saving; pair `disabled` with a spinner only when input is impossible." (https://vercel.com/geist/input)
+ * Ours: no spinner, the loading state stays still.
+ * "Trim leading and trailing whitespace before submit so ` example.com` and `example.com` resolve to one value." (https://vercel.com/geist/input)
+ * Ours: the save of `FormDialog`, `FormDrawer`, `RowEditForm` and `SettingsSection` trims the ends
+ * of every text value; a bare `<form>` does not.
+ * "The click target already extends to the label. Don’t override the `<label>`/`htmlFor` association with a custom wrapper that breaks the click region." (https://vercel.com/geist/checkbox)
+ * "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox)
+ * Ours: a disabled field says why in the card's footer, never in a tooltip around the control.
+ * @words
+ * "Labels are short Title Case nouns: `Project Name`, `Domain`, `Environment Variable Name`." (https://vercel.com/geist/input)
+ * Ours: sentence case, a short noun (*Display name*); a field that may stay empty says so in its
+ * label (*Address line 2 (optional)*), never in its placeholder.
+ * "Placeholders show an example value (`my-awesome-project`, `example.com`), never instructions like `Enter your project name`." (https://vercel.com/geist/input)
+ * "Validation names the field and the constraint, ends in a period, and skips `please` (`Project name is required.`, `Code must be 6 digits.`)." (https://vercel.com/geist/input)
+ * Ours: *Enter a full address, like name@company.it.*
  * @access `FieldError` is `role="alert"`. The control carries `id`, `aria-invalid`,
- * `aria-describedby` (help, then error), `disabled` and `required`.
+ * `aria-describedby` (the error), `disabled` and `required`.
+ * "Don’t wrap a labelled `<Input>` in a `Tooltip`; put the explainer on a sibling icon button so the label stays announced." (https://vercel.com/geist/input)
  */
 function Field({ className, orientation = "vertical", ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
@@ -52,11 +81,11 @@ function Field({ className, orientation = "vertical", ...props }) {
 function FieldContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1 *:data-[slot=field-label]:block *:data-[slot=field-label]:leading-snug", className), ...props }));
 }
-function FieldLabel({ className, ...props }) {
-    return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary has-data-checked:bg-muted has-[>[data-slot=field]]:rounded-sm has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
+function FieldLabel({ className, htmlFor, ...props }) {
+    return (_jsx(Label, { "data-slot": "field-label", htmlFor: htmlFor, className: cn("group/field-label peer/field-label flex w-fit gap-2 group-data-[disabled=true]/field:text-placeholder", "group-has-[[role=checkbox]]/field:leading-5 group-has-[[role=checkbox]]/field:text-foreground group-has-[[role=radio]]/field:leading-5 group-has-[[role=radio]]/field:text-foreground", "group-has-[[role=switch]]/field:text-xs group-has-[[role=switch]]/field:font-medium group-has-[[role=switch]]/field:text-foreground", className), ...props }));
 }
 function FieldTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
+    return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-label group-data-[disabled=true]/field:text-placeholder", className), ...props }));
 }
 function FieldDescription({ className, ...props }) {
     return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:text-(--nc-link) [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:decoration-2", className), ...props }));
@@ -64,7 +93,7 @@ function FieldDescription({ className, ...props }) {
 function FieldSeparator({ children, className, ...props }) {
     return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
 }
-function FieldError({ className, children, errors, ...props }) {
+function FieldError({ className, children, errors, size = "default", ...props }) {
     const content = useMemo(() => {
         if (children) {
             return children;
@@ -83,6 +112,6 @@ function FieldError({ className, children, errors, ...props }) {
     if (!content) {
         return null;
     }
-    return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
+    return (_jsxs("div", { role: "alert", "aria-atomic": "true", "data-slot": "field-error", "data-size": size, className: cn("flex items-start gap-2 text-label-sm leading-5 font-normal text-destructive data-[size=lg]:text-base data-[size=lg]:leading-6", className), ...props, children: [_jsx(OctagonAlertIcon, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0 in-data-[size=lg]:mt-1" }), _jsx("div", { className: "min-w-0", children: content })] }));
 }
 export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/components/file-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-diff.d.ts","sourceRoot":"","sources":["../../src/components/file-diff.tsx"],"names":[],"mappings":"AAKA,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAcD;;;;;;;;;;;GAWG;AACH,iBAAS,QAAQ,CAAC,EAChB,UAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAW,EACX,YAAwB,EACxB,YAAoD,EACpD,GAAG,KAAK,EACT,EAAE,aAAa,+BAkCf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"file-diff.d.ts","sourceRoot":"","sources":["../../src/components/file-diff.tsx"],"names":[],"mappings":"AAMA,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAYD;;;;;;;;;;;GAWG;AACH,iBAAS,QAAQ,CAAC,EAChB,UAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAW,EACX,YAAwB,EACxB,YAAoD,EACpD,GAAG,KAAK,EACT,EAAE,aAAa,+BAkCf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/file-diff.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { DIFF_MARK, DIFF_ROW } from "../internal/diff-line.js";
 import { lineDiff } from "../lib/line-diff.js";
 import { cn } from "../lib/utils.js";
 const ROW = {
-    added: "bg-success-soft text-success-soft-foreground",
+    ...DIFF_ROW,
     context: "text-muted-foreground",
-    removed: "bg-destructive-soft text-destructive-soft-foreground",
 };
 const MARK = {
-    added: "+",
+    ...DIFF_MARK,
     context: "",
-    removed: "−",
 };
 /**
  * A file's before and after, line by line.

package/dist/components/form-dialog.d.ts

@@ -5,15 +5,15 @@ export type FormDialogProps = FormSurfaceProps & {
     pending?: boolean;
 };
 /**
- * A new record, or one or two values from a command, in a centred dialog.
+ * A new record, or one or two values from a command, in a modal dialog.
  *
  * @family Compositions
- * @when A person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.
- * @instead A record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.
- * @behaviour Centred over a scrim without blur: the title and its help, the fields in a body that scrolls, then the footer with Cancel and the primary at its trailing edge. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them.
- * @words The title names the job and its object: "New customer", "Add a mailbox". The primary repeats it: "Create customer", "Add mailbox", never "OK" or "Submit".
- * @access A modal dialog named by its title; focus starts in its first field or `initialFocus`, Escape and Close close it unless the save runs, and focus returns to the opener or `finalFocus`.
+ * @when "Use Modal when a decision must block the rest of the page. For persistent associated context where the underlying page stays readable, use `Sheet` on desktop or `Drawer` on mobile." (https://vercel.com/geist/modal) Ours: a person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.
+ * @instead "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.
+ * @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close.
+ * @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox".
+ * @access "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Trap focus inside the Modal while it’s open and return focus to the trigger after close. Restore body scroll on the same tick the Modal unmounts." (https://vercel.com/geist/modal) "After an error inside the Modal, keep focus inside so the user can retry; after success, return focus to the trigger." (https://vercel.com/geist/modal) Ours: a modal dialog with a Close named by `closeLabel`; focus starts in its first field or `initialFocus` and returns to the opener or `finalFocus`. Escape and Close close it unless the save runs.
  */
-export declare function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, pending, }: FormDialogProps): import("react").JSX.Element;
+export declare function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, unsaved, pending, }: FormDialogProps): import("react").JSX.Element;
 export declare function FormDialogForm({ cancelLabel, submit, notice, children, ...form }: FormProps): import("react").JSX.Element;
 //# sourceMappingURL=form-dialog.d.ts.map

package/dist/components/form-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,OAAe,GAChB,EAAE,eAAe,+BAuBjB;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAsB3F"}
+{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAG1E,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAiB,EACjB,OAAO,EACP,OAAe,GAChB,EAAE,eAAe,+BAmBjB;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAsB3F"}

package/dist/components/form-dialog.js

@@ -4,23 +4,25 @@ import { Button } from "./button.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "./dialog.js";
 import { WaitingLine } from "./waiting-line.js";
 import { FormSubmitButton } from "../internal/form-submit.js";
+import { guardUnsaved } from "../internal/unsaved-guard.js";
 /**
- * A new record, or one or two values from a command, in a centred dialog.
+ * A new record, or one or two values from a command, in a modal dialog.
  *
  * @family Compositions
- * @when A person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.
- * @instead A record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.
- * @behaviour Centred over a scrim without blur: the title and its help, the fields in a body that scrolls, then the footer with Cancel and the primary at its trailing edge. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them.
- * @words The title names the job and its object: "New customer", "Add a mailbox". The primary repeats it: "Create customer", "Add mailbox", never "OK" or "Submit".
- * @access A modal dialog named by its title; focus starts in its first field or `initialFocus`, Escape and Close close it unless the save runs, and focus returns to the opener or `finalFocus`.
+ * @when "Use Modal when a decision must block the rest of the page. For persistent associated context where the underlying page stays readable, use `Sheet` on desktop or `Drawer` on mobile." (https://vercel.com/geist/modal) Ours: a person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.
+ * @instead "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.
+ * @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close.
+ * @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox".
+ * @access "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Trap focus inside the Modal while it’s open and return focus to the trigger after close. Restore body scroll on the same tick the Modal unmounts." (https://vercel.com/geist/modal) "After an error inside the Modal, keep focus inside so the user can retry; after success, return focus to the trigger." (https://vercel.com/geist/modal) Ours: a modal dialog with a Close named by `closeLabel`; focus starts in its first field or `initialFocus` and returns to the opener or `finalFocus`. Escape and Close close it unless the save runs.
  */
-export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, pending = false, }) {
-    return (_jsx(Dialog, { open: open, onOpenChange: (next) => {
+export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus = true, unsaved, pending = false, }) {
+    const requestOpenChange = guardUnsaved(onOpenChange, unsaved);
+    return (_jsx(Dialog, { open: open, onOpenChange: (next, details) => {
             if (next || !pending)
-                onOpenChange(next);
-        }, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(DialogContent, { className: "sm:max-w-lg", closeLabel: closeLabel, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsxs(DialogHeader, { className: "pr-8", children: [_jsx(DialogTitle, { children: title }), description ? _jsx(DialogDescription, { children: description }) : null] }), children] }) }));
+                requestOpenChange(next, details);
+        }, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(DialogContent, { closeLabel: closeLabel, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? _jsx(DialogDescription, { children: description }) : null] }), children] }) }));
 }
 export function FormDialogForm({ cancelLabel, submit, notice, children, ...form }) {
     const pending = submit.pending === true;
-    return (_jsxs("form", { className: "flex min-h-0 flex-col gap-6", "aria-busy": pending || undefined, "data-slot": "form-dialog-form", ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(FormSubmitButton, { submit: submit }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-lg bottom-1 w-auto", decorative: true })) : null] })] }));
+    return (_jsxs("form", { className: "flex min-h-0 flex-col gap-(--dialog-gap)", "aria-busy": pending || undefined, "data-slot": "form-dialog-form", ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(FormSubmitButton, { submit: submit }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-sm bottom-1 w-auto", decorative: true })) : null] })] }));
 }

package/dist/components/form-drawer.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentProps, ReactNode } from "react";
 import { SheetContent } from "./sheet.js";
 import { type FormProps } from "../internal/form-submit.js";
+import { type UnsavedGuard } from "../internal/unsaved-guard.js";
 export type { FormProps, FormSubmit } from "../internal/form-submit.js";
 /** What a form surface is told by its caller, whether it draws a drawer or a dialog. */
 export type FormSurfaceProps = {
@@ -19,6 +20,8 @@ export type FormSurfaceProps = {
     initialFocus?: ComponentProps<typeof SheetContent>["initialFocus"];
     /** Where focus returns when the drawer closes, when its opener is gone. */
     finalFocus?: ComponentProps<typeof SheetContent>["finalFocus"];
+    /** Typed input that Escape would lose: while `dirty` it is held back and `onDismissBlocked` runs. */
+    unsaved?: UnsavedGuard;
 };
 /**
  * Why this is a drawer and not a dialog: "catalog" chooses from a list too long
@@ -34,14 +37,14 @@ export type FormDrawerProps = FormSurfaceProps & ({
     progress: string;
 });
 /**
- * The right-side drawer for a catalogue or a setup in steps, at one width.
+ * The right-side sheet for a catalogue or a setup in steps, at one width.
  *
  * @family Compositions
- * @when Choosing from a catalogue too long for a dialog (through `CatalogDrawer`), or setting something up in several steps with a wait: connect a messaging channel, Telegram's code.
- * @instead A new record from a few fields is a `FormDialog`; a record already in a list edits in its row with `RowEditForm`; a fact on the record's own page changes in place in its section; a consequence is confirmed in a `ConfirmDialog`.
- * @behaviour Opens from the right edge at one width, 560 px (the full width on a compact screen), with the page still behind it; 12 px corners on the edges not flush with the window. The header holds the step ("Step 2 of 3") over the title, the description and Close; the body scrolls between the header and a recessed footer that stays, Cancel then the primary at its trailing edge. Cancel holds while a save runs.
- * @words The title names the job and its object: "Connect Telegram", "Add a skill". The step reads "Step N of M". The primary says what it does: "Connect", "Continue", never "OK".
- * @access A modal dialog named by its title; focus moves inside on open and returns to the opener on close, or to `finalFocus` when the opener is gone. Escape and Close close it; the step is read before the title.
+ * @when Ours: choosing from a catalogue too long for a dialog (through `CatalogDrawer`), or setting something up in several steps with a wait: connect a messaging channel, Telegram's code.
+ * @instead "Don’t use Sheet to confirm destructive actions. The default `modal=false` keeps the page interactive, which weakens severity for a delete or revoke." (https://vercel.com/geist/sheet) Ours: a new record from a few fields is a `FormDialog`; a record already in a list edits in its row with `RowEditForm`; a fact on the record's own page changes in place in its section; a consequence is confirmed in a `ConfirmDialog`; a phone's short job is a `Drawer`.
+ * @behaviour "Sheet defaults to `modal=false` so toasts and other high-z elements stay reachable. Keep that default unless the sheet owns the screen." (https://vercel.com/geist/sheet) "Pick `side` from the trigger location: a row inspector slides from `right`, a global filter from `left`. Don’t change sides mid-session." (https://vercel.com/geist/sheet) "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal `Sheet` from the right edge over the scrim, because the drawer owns the screen, at the Sheet's one width that no caller sets. The header holds the step ("Step 2 of 3") over the title, the description and Close; the body scrolls between the header and a footer that stays, with no fill or rule of its own, Cancel then the primary at its trailing edge. A press outside does not close it; Escape does, unless `unsaved.dirty` holds it back. Cancel holds while a save runs.
+ * @words "Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Body is read-mostly: sentence case prose with Title Case sub-headings. Action buttons are optional; when present, follow `Verb + Noun`." (https://vercel.com/geist/sheet) Ours: the title is sentence case and names the job and its object: "Connect Telegram", "Add a skill". The step reads "Step N of M". The primary says what it does: "Connect", "Continue", never "OK".
+ * @access "Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) "Announce the sheet with `aria-labelledby` pointing at the title; pair it with `aria-describedby` only when the body is short and load-bearing." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus returns to the opener on close, or to `finalFocus` when the opener is gone. The step is read before the title.
  */
 export declare function FormDrawer(props: FormDrawerProps): import("react").JSX.Element;
 /** The part of the drawer that scrolls between its title and its footer. */
@@ -55,7 +58,7 @@ export type FormDrawerFooterProps = {
     /** The step's own actions, the primary last so it sits rightmost. */
     children?: ReactNode;
 };
-/** The footer that stays in place under the body: Cancel, then the actions, right-aligned. */
+/** The footer that stays in place under the body, on the sheet's own surface: Cancel, then the actions, at the trailing edge. */
 export declare function FormDrawerFooter({ cancel, children }: FormDrawerFooterProps): import("react").JSX.Element;
 /**
  * The drawer's form: the fields in the body, a notice where the save button

package/dist/components/form-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-drawer.d.ts","sourceRoot":"","sources":["../../src/components/form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAGL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAG1E,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpE,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;IACnE,2EAA2E;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;CAChE,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAC5C,CACI;IAAE,GAAG,EAAE,SAAS,CAAA;CAAE,GAClB;IACE,GAAG,EAAE,OAAO,CAAC;IACb,8FAA8F;IAC9F,QAAQ,EAAE,MAAM,CAAC;CAClB,CACJ,CAAC;AAEJ;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAqChD;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAc3E;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAqB3F"}
+{"version":3,"file":"form-drawer.d.ts","sourceRoot":"","sources":["../../src/components/form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAGL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG3E,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpE,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;IACnE,2EAA2E;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;IAC/D,qGAAqG;IACrG,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAC5C,CACI;IAAE,GAAG,EAAE,SAAS,CAAA;CAAE,GAClB;IACE,GAAG,EAAE,OAAO,CAAC;IACb,8FAA8F;IAC9F,QAAQ,EAAE,MAAM,CAAC;CAClB,CACJ,CAAC;AAEJ;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA0ChD;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iIAAiI;AACjI,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAW3E;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAqB3F"}

package/dist/components/form-drawer.js

@@ -4,28 +4,29 @@ import { Button } from "./button.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
 import { WaitingLine } from "./waiting-line.js";
 import { FormSubmitButton } from "../internal/form-submit.js";
+import { guardUnsaved } from "../internal/unsaved-guard.js";
 import { cn } from "../lib/utils.js";
 /**
- * The right-side drawer for a catalogue or a setup in steps, at one width.
+ * The right-side sheet for a catalogue or a setup in steps, at one width.
  *
  * @family Compositions
- * @when Choosing from a catalogue too long for a dialog (through `CatalogDrawer`), or setting something up in several steps with a wait: connect a messaging channel, Telegram's code.
- * @instead A new record from a few fields is a `FormDialog`; a record already in a list edits in its row with `RowEditForm`; a fact on the record's own page changes in place in its section; a consequence is confirmed in a `ConfirmDialog`.
- * @behaviour Opens from the right edge at one width, 560 px (the full width on a compact screen), with the page still behind it; 12 px corners on the edges not flush with the window. The header holds the step ("Step 2 of 3") over the title, the description and Close; the body scrolls between the header and a recessed footer that stays, Cancel then the primary at its trailing edge. Cancel holds while a save runs.
- * @words The title names the job and its object: "Connect Telegram", "Add a skill". The step reads "Step N of M". The primary says what it does: "Connect", "Continue", never "OK".
- * @access A modal dialog named by its title; focus moves inside on open and returns to the opener on close, or to `finalFocus` when the opener is gone. Escape and Close close it; the step is read before the title.
+ * @when Ours: choosing from a catalogue too long for a dialog (through `CatalogDrawer`), or setting something up in several steps with a wait: connect a messaging channel, Telegram's code.
+ * @instead "Don’t use Sheet to confirm destructive actions. The default `modal=false` keeps the page interactive, which weakens severity for a delete or revoke." (https://vercel.com/geist/sheet) Ours: a new record from a few fields is a `FormDialog`; a record already in a list edits in its row with `RowEditForm`; a fact on the record's own page changes in place in its section; a consequence is confirmed in a `ConfirmDialog`; a phone's short job is a `Drawer`.
+ * @behaviour "Sheet defaults to `modal=false` so toasts and other high-z elements stay reachable. Keep that default unless the sheet owns the screen." (https://vercel.com/geist/sheet) "Pick `side` from the trigger location: a row inspector slides from `right`, a global filter from `left`. Don’t change sides mid-session." (https://vercel.com/geist/sheet) "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal `Sheet` from the right edge over the scrim, because the drawer owns the screen, at the Sheet's one width that no caller sets. The header holds the step ("Step 2 of 3") over the title, the description and Close; the body scrolls between the header and a footer that stays, with no fill or rule of its own, Cancel then the primary at its trailing edge. A press outside does not close it; Escape does, unless `unsaved.dirty` holds it back. Cancel holds while a save runs.
+ * @words "Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Body is read-mostly: sentence case prose with Title Case sub-headings. Action buttons are optional; when present, follow `Verb + Noun`." (https://vercel.com/geist/sheet) Ours: the title is sentence case and names the job and its object: "Connect Telegram", "Add a skill". The step reads "Step N of M". The primary says what it does: "Connect", "Continue", never "OK".
+ * @access "Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) "Announce the sheet with `aria-labelledby` pointing at the title; pair it with `aria-describedby` only when the body is short and load-bearing." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus returns to the opener on close, or to `finalFocus` when the opener is gone. The step is read before the title.
  */
 export function FormDrawer(props) {
-    const { open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, } = props;
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(SheetContent, { className: "max-sm:data-[side=right]:left-nadicode-sm max-sm:data-[side=right]:w-auto data-[side=right]:sm:w-[560px] data-[side=right]:sm:max-w-[calc(100%-var(--nc-lg))]", closeLabel: closeLabel, finalFocus: finalFocus, initialFocus: initialFocus, side: "right", children: [_jsxs(SheetHeader, { className: "pr-12", children: [props.job === "steps" ? (_jsx("p", { className: "font-label-mono text-label-mono text-muted-foreground", "data-slot": "form-drawer-progress", children: props.progress })) : null, _jsx(SheetTitle, { className: "break-words", children: title }), description ? _jsx(SheetDescription, { children: description }) : null] }), children] }) }));
+    const { open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus = true, unsaved, } = props;
+    return (_jsx(Sheet, { modal: true, open: open, onOpenChange: guardUnsaved(onOpenChange, unsaved), onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(SheetContent, { closeLabel: closeLabel, finalFocus: finalFocus, initialFocus: initialFocus, side: "right", children: [_jsxs(SheetHeader, { className: "pr-12", children: [props.job === "steps" ? (_jsx("p", { className: "font-label-mono text-label-mono text-muted-foreground", "data-slot": "form-drawer-progress", children: props.progress })) : null, _jsx(SheetTitle, { className: "break-words", children: title }), description ? _jsx(SheetDescription, { children: description }) : null] }), children] }) }));
 }
 /** The part of the drawer that scrolls between its title and its footer. */
 export function FormDrawerBody({ className, ...props }) {
     return (_jsx("div", { "data-slot": "form-drawer-body", className: cn("grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)] content-start gap-4 overflow-y-auto px-nadicode-lg", className), ...props }));
 }
-/** The footer that stays in place under the body: Cancel, then the actions, right-aligned. */
+/** The footer that stays in place under the body, on the sheet's own surface: Cancel, then the actions, at the trailing edge. */
 export function FormDrawerFooter({ cancel, children }) {
-    return (_jsxs(SheetFooter, { className: "flex-row flex-wrap items-center justify-end", "data-slot": "form-drawer-footer", children: [cancel ? (_jsx(SheetClose, { disabled: cancel.disabled, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancel.label })) : null, children] }));
+    return (_jsxs(SheetFooter, { className: "flex-wrap items-center", "data-slot": "form-drawer-footer", children: [cancel ? (_jsx(SheetClose, { disabled: cancel.disabled, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancel.label })) : null, children] }));
 }
 /**
  * The drawer's form: the fields in the body, a notice where the save button

package/dist/components/gauge.d.ts

@@ -0,0 +1,64 @@
+import type { ReactElement } from "react";
+import { Meter } from "@base-ui/react/meter";
+import type { ProgressTone } from "./progress.js";
+type GaugeSize = "xs" | "sm" | "md" | "lg";
+type GaugeValueSize = Exclude<GaugeSize, "xs">;
+type GaugeName = {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};
+type GaugeFace = {
+    size?: GaugeValueSize;
+    showValue: true;
+    children?: never;
+} | {
+    size?: GaugeSize;
+    showValue?: false;
+    children?: ReactElement;
+};
+type GaugeProps = Omit<Meter.Root.Props, "value" | "min" | "max" | "children" | "aria-label" | "aria-labelledby"> & {
+    /** The ratio, 0 to 100; a value outside it is drawn at the nearest end. */
+    value: number;
+    tone?: ProgressTone;
+} & GaugeName & GaugeFace;
+/**
+ * A ring that shows one ratio out of 100.
+ *
+ * @family Data
+ * @when "A 0–100 ratio against a fixed maximum where the comparison is the point, like quota usage, build cache hit rate, uptime, or billing-period consumption." (https://vercel.com/geist/gauge)
+ * Ours: `size` follows the weight of the figure beside it.
+ * @instead "For determinate task progress with a known total (uploads, multi-step setup), use `Progress`." (https://vercel.com/geist/gauge)
+ * "For binary or enumerated state, use `Status Dot` for deployments or `Badge` for everything else." (https://vercel.com/geist/gauge)
+ * Ours: those are `StatusDot` and `StatusBadge`. A single figure on its own is a `KpiCard`. A wait
+ * of unknown length is the waiting line; the gauge has no indeterminate form. Two shares of one
+ * whole are a chart.
+ * @behaviour "Use `arc="equal"` for true ratios so 50% reads as exactly half." (https://vercel.com/geist/gauge)
+ * "Use the default `primary` arc for single-percentage usage where the filled portion is the story." (https://vercel.com/geist/gauge)
+ * "When using the gauge to display a ratio, use the `equal` arc priority to make both arcs are equally sized." (https://vercel.com/geist/gauge)
+ * Ours: there is no `arc` prop; the gauge always draws the primary arc, from the top, clockwise,
+ * with round ends and a small gap before the neutral track; at 0 or 100 there is no gap. Colour
+ * sits on the arc alone: the track stays the neutral line colour, and the number and icon stay
+ * neutral.
+ * "Threshold colors should match the same numeric breakpoints used elsewhere in the product (`>=80%` warning, `>=95%` error). Don’t invent gauge-only thresholds." (https://vercel.com/geist/gauge)
+ * Ours: `tone` is that threshold, never derived from the value.
+ * "Pair `indeterminate` with explanatory copy nearby (`Calculating usage…`) so the user knows the value is loading, not zero." (https://vercel.com/geist/gauge)
+ * Ours: there is no `indeterminate`; a value still loading is the waiting line. The smallest size
+ * has room only for an icon. The arc moves on `open`, still under reduced motion.
+ * @words "Always pair the gauge with an adjacent label or `Tooltip` naming what the number represents (`Build Cache Hit Rate`). The gauge alone is not self-describing." (https://vercel.com/geist/gauge)
+ * "Don’t put units inside `children`; the label carries the unit (`Uptime · 99.97%`). `children` is reserved for an icon overlay." (https://vercel.com/geist/gauge)
+ * "When `showValue` is on, the rendered number is the value only. Never inject a `%` or unit string into the prop." (https://vercel.com/geist/gauge)
+ * Ours: sentence case, *Cache hit rate · 99.97%*. `showValue` prints the number; `children` is only
+ * an icon.
+ * @access "The component sets `role="progressbar"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. Don’t override those." (https://vercel.com/geist/gauge)
+ * Ours: the role is `meter`, with the same three values.
+ * "The adjacent label is the gauge’s accessible name. Tie it with `aria-labelledby` on the gauge wrapper so screen readers read “Uptime, 99 percent.”" (https://vercel.com/geist/gauge)
+ * Ours: it always has a name, `aria-label` or `aria-labelledby` pointing at the adjacent label, and
+ * the type asks for one.
+ * "Don’t use color to encode the threshold without redundant text; pair the warning tint with copy below or in the Tooltip." (https://vercel.com/geist/gauge)
+ */
+declare function Gauge({ className, value, tone, size, showValue, children, ...props }: GaugeProps): import("react").JSX.Element;
+export { Gauge };
+//# sourceMappingURL=gauge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/components/gauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,KAAK,cAAc,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAkC/C,KAAK,SAAS,GACV;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,KAAK,SAAS,GACV;IAAE,IAAI,CAAC,EAAE,cAAc,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GAC5D;IAAE,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC;AAErE,KAAK,UAAU,GAAG,IAAI,CACpB,KAAK,CAAC,IAAI,CAAC,KAAK,EAChB,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,YAAY,GAAG,iBAAiB,CACxE,GAAG;IACF,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,GAAG,SAAS,GACX,SAAS,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAK,EACL,IAAgB,EAChB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,+BAuEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/gauge.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+import { cn } from "../lib/utils.js";
+const GAUGE_BOX_CLASS = {
+    xs: "size-5",
+    sm: "size-8",
+    md: "size-16",
+    lg: "size-32",
+};
+const GAUGE_VALUE_CLASS = {
+    sm: "text-[11px] leading-5 font-medium",
+    md: "nc-type-label-lg font-medium",
+    lg: "text-[32px] leading-5 font-semibold",
+};
+const GAUGE_ARC_CLASS = {
+    default: "stroke-primary",
+    secondary: "stroke-muted-foreground",
+    success: "stroke-(--nc-state-complete)",
+    warning: "stroke-(--nc-state-review)",
+    critical: "stroke-(--nc-state-blocked)",
+    info: "stroke-info",
+};
+const GAUGE_RING = {
+    xs: { radius: 42.5, strokeWidth: 15, gap: 9 },
+    sm: { radius: 45, strokeWidth: 10, gap: 6 },
+    md: { radius: 45, strokeWidth: 10, gap: 5 },
+    lg: { radius: 45, strokeWidth: 10, gap: 5 },
+};
+const GAUGE_ARC_MOTION = "transition-[stroke-dasharray,stroke-dashoffset,stroke] duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none";
+/**
+ * A ring that shows one ratio out of 100.
+ *
+ * @family Data
+ * @when "A 0–100 ratio against a fixed maximum where the comparison is the point, like quota usage, build cache hit rate, uptime, or billing-period consumption." (https://vercel.com/geist/gauge)
+ * Ours: `size` follows the weight of the figure beside it.
+ * @instead "For determinate task progress with a known total (uploads, multi-step setup), use `Progress`." (https://vercel.com/geist/gauge)
+ * "For binary or enumerated state, use `Status Dot` for deployments or `Badge` for everything else." (https://vercel.com/geist/gauge)
+ * Ours: those are `StatusDot` and `StatusBadge`. A single figure on its own is a `KpiCard`. A wait
+ * of unknown length is the waiting line; the gauge has no indeterminate form. Two shares of one
+ * whole are a chart.
+ * @behaviour "Use `arc="equal"` for true ratios so 50% reads as exactly half." (https://vercel.com/geist/gauge)
+ * "Use the default `primary` arc for single-percentage usage where the filled portion is the story." (https://vercel.com/geist/gauge)
+ * "When using the gauge to display a ratio, use the `equal` arc priority to make both arcs are equally sized." (https://vercel.com/geist/gauge)
+ * Ours: there is no `arc` prop; the gauge always draws the primary arc, from the top, clockwise,
+ * with round ends and a small gap before the neutral track; at 0 or 100 there is no gap. Colour
+ * sits on the arc alone: the track stays the neutral line colour, and the number and icon stay
+ * neutral.
+ * "Threshold colors should match the same numeric breakpoints used elsewhere in the product (`>=80%` warning, `>=95%` error). Don’t invent gauge-only thresholds." (https://vercel.com/geist/gauge)
+ * Ours: `tone` is that threshold, never derived from the value.
+ * "Pair `indeterminate` with explanatory copy nearby (`Calculating usage…`) so the user knows the value is loading, not zero." (https://vercel.com/geist/gauge)
+ * Ours: there is no `indeterminate`; a value still loading is the waiting line. The smallest size
+ * has room only for an icon. The arc moves on `open`, still under reduced motion.
+ * @words "Always pair the gauge with an adjacent label or `Tooltip` naming what the number represents (`Build Cache Hit Rate`). The gauge alone is not self-describing." (https://vercel.com/geist/gauge)
+ * "Don’t put units inside `children`; the label carries the unit (`Uptime · 99.97%`). `children` is reserved for an icon overlay." (https://vercel.com/geist/gauge)
+ * "When `showValue` is on, the rendered number is the value only. Never inject a `%` or unit string into the prop." (https://vercel.com/geist/gauge)
+ * Ours: sentence case, *Cache hit rate · 99.97%*. `showValue` prints the number; `children` is only
+ * an icon.
+ * @access "The component sets `role="progressbar"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. Don’t override those." (https://vercel.com/geist/gauge)
+ * Ours: the role is `meter`, with the same three values.
+ * "The adjacent label is the gauge’s accessible name. Tie it with `aria-labelledby` on the gauge wrapper so screen readers read “Uptime, 99 percent.”" (https://vercel.com/geist/gauge)
+ * Ours: it always has a name, `aria-label` or `aria-labelledby` pointing at the adjacent label, and
+ * the type asks for one.
+ * "Don’t use color to encode the threshold without redundant text; pair the warning tint with copy below or in the Tooltip." (https://vercel.com/geist/gauge)
+ */
+function Gauge({ className, value, tone = "default", size = "md", showValue, children, ...props }) {
+    const ratio = Math.min(100, Math.max(0, value));
+    const { radius, strokeWidth, gap } = GAUGE_RING[size];
+    const gapLength = ratio === 0 || ratio === 100 ? 0 : gap;
+    const trackLength = Math.max(0, 100 - ratio - 2 * gapLength);
+    return (_jsxs(Meter.Root, { className: cn("relative inline-flex shrink-0 items-center justify-center", GAUGE_BOX_CLASS[size], className), "data-size": size, "data-slot": "gauge", "data-tone": tone, max: 100, min: 0, value: ratio, ...props, children: [_jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 size-full -rotate-90", fill: "none", viewBox: "0 0 100 100", children: [_jsx("circle", { className: cn("stroke-border", GAUGE_ARC_MOTION), cx: "50", cy: "50", "data-slot": "gauge-track", opacity: trackLength === 0 ? 0 : 1, pathLength: 100, r: radius, strokeDasharray: `${trackLength} 100`, strokeDashoffset: -(ratio + gapLength), strokeLinecap: "round", strokeWidth: strokeWidth }), _jsx("circle", { className: cn(GAUGE_ARC_CLASS[tone], GAUGE_ARC_MOTION), cx: "50", cy: "50", "data-slot": "gauge-arc", opacity: ratio === 0 ? 0 : 1, pathLength: 100, r: radius, strokeDasharray: `${ratio} 100`, strokeLinecap: "round", strokeWidth: strokeWidth })] }), showValue && size !== "xs" ? (_jsx("span", { className: cn("relative tabular-nums", GAUGE_VALUE_CLASS[size]), "data-slot": "gauge-value", children: Math.round(ratio) })) : null, children ? (_jsx("span", { className: "absolute inset-0 flex items-center justify-center text-muted-foreground [&>svg]:size-1/2", "data-slot": "gauge-icon", children: children })) : null] }));
+}
+export { Gauge };