@nadicodeai/ui 12.1.101 → 12.1.103

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

@@ -10,10 +10,27 @@ export type ConfirmDialogProps = {
     description: ReactNode;
     /** Repeats the verb and the noun: "Remove mailbox". */
     confirmLabel: string;
+    /** The confirm's word while the action runs, its label in the -ing form: "Removing mailbox". */
     confirmPendingLabel?: string;
     cancelLabel: string;
     destructive?: boolean;
+    /** The action is running: both buttons hold and the field turns read-only. */
     loading?: boolean;
+    /**
+     * The person must type `phrase` exactly before the confirm enables. The phrase is the record's
+     * own name; `prompt` is the sentence that asks for it and names the field, with the phrase in
+     * it, which is set in bold: "To confirm, type the mailbox address pec@acme.it".
+     */
+    verify?: {
+        phrase: string;
+        prompt: string;
+    };
+    /**
+     * What cannot be undone, as a sentence naming the action and the record and ending in
+     * "cannot be undone": "Removing pec@acme.it cannot be undone." Drawn as a red note above the
+     * field. Left out when the action can be reversed: its absence is what says so.
+     */
+    irreversible?: string;
     /**
      * Why the confirmed action did not happen, from the product's catalogue,
      * with the message's own actions, such as signing in, under it.
@@ -24,11 +41,11 @@ export type ConfirmDialogProps = {
  * A consequence confirmed before it happens, in a blocking alert dialog.
  *
  * @family Compositions
- * @when An action removes, disconnects or deletes something, or otherwise cannot be taken back: remove a mailbox, delete an Agent.
- * @instead An action that can be undone runs at once and offers its undo in a toast; a form of a few fields is a `FormDialog`; a choice from a catalogue is a `CatalogDrawer`.
- * @behaviour The title names the record, the description the consequence; a failed confirm keeps the dialog open with the catalogue's message and its actions under the description. Cancel then the confirm at the footer's trailing edge, the confirm in the error colour when `destructive`. While `loading` both hold, Escape does not close it, and the confirm says its pending word. The backdrop does not dismiss it.
- * @words The title is a statement naming the record, never a question: "Remove pec@acme.it". The description says what stops and what stays. The confirm repeats the verb and the noun, "Remove mailbox", never just "Delete" or "OK".
- * @access `role="alertdialog"` named by its title and described by its consequence; focus starts on Cancel, Escape cancels, and focus returns to the opener.
+ * @when "Reach for this over `Modal` when the action is destructive and warrants friction: delete, rotate, revoke, disconnect, downgrade, disable a security setting. The typed gate forces deliberate intent." (https://vercel.com/geist/destructive-action-modal) "Use it for reversible destructive actions too, when the consequence is serious enough to warrant a pause — disabling deployment protection, revoking a shared token. Keep the typed gate; drop `irreversibleDescription`." (https://vercel.com/geist/destructive-action-modal) "For high-stakes destructive actions (delete production resource, rotate signing key, downgrade plan), gate the primary button on a typed match of the resource name." (https://vercel.com/geist/modal) Ours: `ConfirmDialog` is Geist's DestructiveActionModal: remove a mailbox, delete an Agent, with `verify` as the typed gate.
+ * @instead "Don't use for routine confirmations (save draft, discard changes, close without saving). The typed gate reads as melodrama when the stakes are low — use a plain `Modal` instead." (https://vercel.com/geist/destructive-action-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: an action that can be undone runs at once and offers its undo in a toast; a form of a few fields is a `FormDialog`; a choice from a catalogue is a `CatalogDrawer`.
+ * @behaviour "The verification input gets focus on open so the user can start typing immediately. Submit stays disabled until the value matches `verificationPhrase` exactly." (https://vercel.com/geist/destructive-action-modal) "Enter submits only when the gate is open; it's a no-op otherwise. Cancel, outside-click, and Escape all dismiss." (https://vercel.com/geist/destructive-action-modal) "`loading` disables both buttons. The caller owns `open` — do not self-dismiss from `onConfirm`. Close the modal after the API settles (success or error), or keep it open on error so the user can retry." (https://vercel.com/geist/destructive-action-modal) "Default focus to `Cancel` on any destructive Modal. Enter must never trigger the destructive action without a typed confirmation." (https://vercel.com/geist/modal) "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: `title`, `description`, `confirmLabel` and `cancelLabel` are required; `irreversible` and `verify` are optional, and the absence of `irreversible` is what marks the action reversible. Geist's `irreversibleDescription` is `irreversible`, `verificationPhrase` and `verificationLabel` are `verify.phrase` and `verify.prompt`, and `error` is the catalogue's message. 480 px wide over a scrim. The title and the description, then the body in a 24 px column: the `irreversible` note, the `verify` field, the failure under it. `irreversible` is a flat red note with a red mark and red words, not a band over the footer; besides it the only red is the failure and the enabled destructive confirm. While `loading` the field turns read-only and keeps focus, Escape does not close it, and the confirm says `confirmPendingLabel`, which falls back to the confirm's label. A press outside does not close it, so a stray click never discards a typed phrase or an action in flight; Escape and Cancel do. The footer is a bar that stays at the bottom while a tall confirmation scrolls, and a row on a phone too.
+ * @words "`title` is Title Case, `Verb + Noun`, a statement — never a question. `Delete Project`, not `Delete this project?`." (https://vercel.com/geist/destructive-action-modal) "`description` is sentence case, names the consequence, and interpolates the specific resource when relevant. `<b>my-project</b> and all its deployments will be permanently deleted.` reads stronger than `This project and all its deployments will be deleted.`." (https://vercel.com/geist/destructive-action-modal) "`confirmLabel` matches the title 1:1. Never generic (`Confirm`, `OK`, `Continue`), never a bare verb (`Delete`)." (https://vercel.com/geist/destructive-action-modal) "`cancelLabel` defaults to `Cancel`. Override when Cancel is ambiguous, such as `Keep Turn Running` when the primary action is itself a cancellation." (https://vercel.com/geist/destructive-action-modal) "`verificationPhrase`: for entity deletes, type the **resource name itself** (`my-project`) and pair with `verificationLabel="project name"` so the prompt reads `To confirm, type the project name "my-project"`. That's the canonical signal that the user knows which thing they're acting on. Fall back to a lowercase verb phrase (`disable vercel authentication`) only when there's no entity to name." (https://vercel.com/geist/destructive-action-modal) "`irreversibleDescription` names the specific action and resource and ends with `cannot be undone.` — `Deleting my-project cannot be undone.` rather than the generic `This cannot be undone.`. Omit the prop entirely for reversible actions; the prop's absence is the signal, not a falsy value." (https://vercel.com/geist/destructive-action-modal) "`error` surfaces the API failure verbatim in Vercel voice: `Couldn't save settings. Try again.`. Never dump a raw error object." (https://vercel.com/geist/destructive-action-modal) "Pair the post-confirm success toast verb 1:1 with the primary button: `Delete Project` button, `Project deleted` toast. Never `Project removed`." (https://vercel.com/geist/destructive-action-modal) "Close irreversible bodies with `This cannot be undone.`; close cascade-only bodies with `Some effects cannot be undone.`. Don’t claim full irreversibility for a partial cascade." (https://vercel.com/geist/modal) Ours: the title is sentence case and names the record, "Remove pec@acme.it", and the confirm repeats the verb and the noun, "Remove mailbox", so the two share a verb and not every word; its success toast uses the same verb ("Mailbox removed"). The description names the record in medium weight.
+ * @access "The verification input is associated with its prompt via `aria-labelledby` + `htmlFor`. Screen readers announce the full prompt (`To confirm, type "delete my-project"`) on focus." (https://vercel.com/geist/destructive-action-modal) "The Warning icon in the irreversibility band is `aria-hidden`; the sentence carries the meaning so nothing is announced twice." (https://vercel.com/geist/destructive-action-modal) "Focus stays inside the modal across an `error` transition so the user can retry without losing context. After success, return focus to the trigger." (https://vercel.com/geist/destructive-action-modal) "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Keep the Cancel button literally `Cancel` so screen-reader users hear a stable dismissal label across destructive flows." (https://vercel.com/geist/modal) Ours: `role="alertdialog"` named by its title and described by its consequence; the note is `role="note"` with its icon hidden. Focus starts on Cancel, or in the field with `verify`.
  */
-export declare function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel, confirmPendingLabel, cancelLabel, destructive, loading, error, }: ConfirmDialogProps): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel, confirmPendingLabel, cancelLabel, destructive, loading, verify, irreversible, error, }: ConfirmDialogProps): import("react").JSX.Element;
 //# sourceMappingURL=confirm-dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/components/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAc/C,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAErF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,WAAmB,EACnB,OAAe,EACf,KAAK,GACN,EAAE,kBAAkB,+BAmDpB"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/components/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAgBhF,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAErF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,WAAmB,EACnB,OAAe,EACf,MAAM,EACN,YAAY,EACZ,KAAK,GACN,EAAE,kBAAkB,+BAgCpB"}

package/dist/components/confirm-dialog.js

@@ -1,27 +1,46 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "./alert-dialog.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { OctagonAlertIcon } from "lucide-react";
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "./alert-dialog.js";
 import { Button } from "./button.js";
-import { FieldError } from "./field.js";
+import { Field, FieldError, FieldLabel } from "./field.js";
+import { Input } from "./input.js";
 import { PageCommandButton } from "./page-actions.js";
-import { PendingLabel } from "./pending-label.js";
 import { bodyBeyondTitle } from "./product-message.js";
 /**
  * A consequence confirmed before it happens, in a blocking alert dialog.
  *
  * @family Compositions
- * @when An action removes, disconnects or deletes something, or otherwise cannot be taken back: remove a mailbox, delete an Agent.
- * @instead An action that can be undone runs at once and offers its undo in a toast; a form of a few fields is a `FormDialog`; a choice from a catalogue is a `CatalogDrawer`.
- * @behaviour The title names the record, the description the consequence; a failed confirm keeps the dialog open with the catalogue's message and its actions under the description. Cancel then the confirm at the footer's trailing edge, the confirm in the error colour when `destructive`. While `loading` both hold, Escape does not close it, and the confirm says its pending word. The backdrop does not dismiss it.
- * @words The title is a statement naming the record, never a question: "Remove pec@acme.it". The description says what stops and what stays. The confirm repeats the verb and the noun, "Remove mailbox", never just "Delete" or "OK".
- * @access `role="alertdialog"` named by its title and described by its consequence; focus starts on Cancel, Escape cancels, and focus returns to the opener.
+ * @when "Reach for this over `Modal` when the action is destructive and warrants friction: delete, rotate, revoke, disconnect, downgrade, disable a security setting. The typed gate forces deliberate intent." (https://vercel.com/geist/destructive-action-modal) "Use it for reversible destructive actions too, when the consequence is serious enough to warrant a pause — disabling deployment protection, revoking a shared token. Keep the typed gate; drop `irreversibleDescription`." (https://vercel.com/geist/destructive-action-modal) "For high-stakes destructive actions (delete production resource, rotate signing key, downgrade plan), gate the primary button on a typed match of the resource name." (https://vercel.com/geist/modal) Ours: `ConfirmDialog` is Geist's DestructiveActionModal: remove a mailbox, delete an Agent, with `verify` as the typed gate.
+ * @instead "Don't use for routine confirmations (save draft, discard changes, close without saving). The typed gate reads as melodrama when the stakes are low — use a plain `Modal` instead." (https://vercel.com/geist/destructive-action-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: an action that can be undone runs at once and offers its undo in a toast; a form of a few fields is a `FormDialog`; a choice from a catalogue is a `CatalogDrawer`.
+ * @behaviour "The verification input gets focus on open so the user can start typing immediately. Submit stays disabled until the value matches `verificationPhrase` exactly." (https://vercel.com/geist/destructive-action-modal) "Enter submits only when the gate is open; it's a no-op otherwise. Cancel, outside-click, and Escape all dismiss." (https://vercel.com/geist/destructive-action-modal) "`loading` disables both buttons. The caller owns `open` — do not self-dismiss from `onConfirm`. Close the modal after the API settles (success or error), or keep it open on error so the user can retry." (https://vercel.com/geist/destructive-action-modal) "Default focus to `Cancel` on any destructive Modal. Enter must never trigger the destructive action without a typed confirmation." (https://vercel.com/geist/modal) "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: `title`, `description`, `confirmLabel` and `cancelLabel` are required; `irreversible` and `verify` are optional, and the absence of `irreversible` is what marks the action reversible. Geist's `irreversibleDescription` is `irreversible`, `verificationPhrase` and `verificationLabel` are `verify.phrase` and `verify.prompt`, and `error` is the catalogue's message. 480 px wide over a scrim. The title and the description, then the body in a 24 px column: the `irreversible` note, the `verify` field, the failure under it. `irreversible` is a flat red note with a red mark and red words, not a band over the footer; besides it the only red is the failure and the enabled destructive confirm. While `loading` the field turns read-only and keeps focus, Escape does not close it, and the confirm says `confirmPendingLabel`, which falls back to the confirm's label. A press outside does not close it, so a stray click never discards a typed phrase or an action in flight; Escape and Cancel do. The footer is a bar that stays at the bottom while a tall confirmation scrolls, and a row on a phone too.
+ * @words "`title` is Title Case, `Verb + Noun`, a statement — never a question. `Delete Project`, not `Delete this project?`." (https://vercel.com/geist/destructive-action-modal) "`description` is sentence case, names the consequence, and interpolates the specific resource when relevant. `<b>my-project</b> and all its deployments will be permanently deleted.` reads stronger than `This project and all its deployments will be deleted.`." (https://vercel.com/geist/destructive-action-modal) "`confirmLabel` matches the title 1:1. Never generic (`Confirm`, `OK`, `Continue`), never a bare verb (`Delete`)." (https://vercel.com/geist/destructive-action-modal) "`cancelLabel` defaults to `Cancel`. Override when Cancel is ambiguous, such as `Keep Turn Running` when the primary action is itself a cancellation." (https://vercel.com/geist/destructive-action-modal) "`verificationPhrase`: for entity deletes, type the **resource name itself** (`my-project`) and pair with `verificationLabel="project name"` so the prompt reads `To confirm, type the project name "my-project"`. That's the canonical signal that the user knows which thing they're acting on. Fall back to a lowercase verb phrase (`disable vercel authentication`) only when there's no entity to name." (https://vercel.com/geist/destructive-action-modal) "`irreversibleDescription` names the specific action and resource and ends with `cannot be undone.` — `Deleting my-project cannot be undone.` rather than the generic `This cannot be undone.`. Omit the prop entirely for reversible actions; the prop's absence is the signal, not a falsy value." (https://vercel.com/geist/destructive-action-modal) "`error` surfaces the API failure verbatim in Vercel voice: `Couldn't save settings. Try again.`. Never dump a raw error object." (https://vercel.com/geist/destructive-action-modal) "Pair the post-confirm success toast verb 1:1 with the primary button: `Delete Project` button, `Project deleted` toast. Never `Project removed`." (https://vercel.com/geist/destructive-action-modal) "Close irreversible bodies with `This cannot be undone.`; close cascade-only bodies with `Some effects cannot be undone.`. Don’t claim full irreversibility for a partial cascade." (https://vercel.com/geist/modal) Ours: the title is sentence case and names the record, "Remove pec@acme.it", and the confirm repeats the verb and the noun, "Remove mailbox", so the two share a verb and not every word; its success toast uses the same verb ("Mailbox removed"). The description names the record in medium weight.
+ * @access "The verification input is associated with its prompt via `aria-labelledby` + `htmlFor`. Screen readers announce the full prompt (`To confirm, type "delete my-project"`) on focus." (https://vercel.com/geist/destructive-action-modal) "The Warning icon in the irreversibility band is `aria-hidden`; the sentence carries the meaning so nothing is announced twice." (https://vercel.com/geist/destructive-action-modal) "Focus stays inside the modal across an `error` transition so the user can retry without losing context. After success, return focus to the trigger." (https://vercel.com/geist/destructive-action-modal) "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Keep the Cancel button literally `Cancel` so screen-reader users hear a stable dismissal label across destructive flows." (https://vercel.com/geist/modal) Ours: `role="alertdialog"` named by its title and described by its consequence; the note is `role="note"` with its icon hidden. Focus starts on Cancel, or in the field with `verify`.
  */
-export function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel, confirmPendingLabel, cancelLabel, destructive = false, loading = false, error, }) {
+export function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel, confirmPendingLabel, cancelLabel, destructive = false, loading = false, verify, irreversible, error, }) {
     const cancel = useRef(null);
-    const errorBody = error ? bodyBeyondTitle(error) : null;
+    const phraseField = useRef(null);
     return (_jsx(AlertDialog, { open: open, onOpenChange: (nextOpen) => {
             if (!nextOpen && !loading)
                 onCancel();
-        }, children: _jsxs(AlertDialogContent, { initialFocus: cancel, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description }), error ? (_jsxs(FieldError, { className: "break-words", "data-message-code": error.code, children: [_jsx("span", { className: "block font-medium", children: error.title }), errorBody ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "block", children: errorBody })] })) : null] })) : null, error?.actions.length ? (_jsx("div", { className: "flex flex-wrap items-center gap-2", "data-message-actions": true, children: error.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) })) : null] }), _jsxs(AlertDialogFooter, { children: [_jsx(Button, { disabled: loading, onClick: onCancel, ref: cancel, variant: "outline", children: cancelLabel }), _jsx(Button, { "aria-busy": loading || undefined, disabled: loading, onClick: onConfirm, variant: destructive ? "destructive" : "default", children: _jsx(PendingLabel, { pending: loading, pendingLabel: confirmPendingLabel ?? confirmLabel, children: confirmLabel }) })] })] }) }));
+        }, children: _jsxs(AlertDialogContent, { initialFocus: verify ? phraseField : cancel, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsx(ConfirmDialogPanel, { cancel: cancel, cancelLabel: cancelLabel, confirmLabel: confirmLabel, confirmPendingLabel: confirmPendingLabel, destructive: destructive, error: error, irreversible: irreversible, loading: loading, onCancel: onCancel, onConfirm: onConfirm, phraseField: phraseField, verify: verify })] }) }));
+}
+function ConfirmDialogPanel({ cancel, phraseField, onConfirm, onCancel, confirmLabel, confirmPendingLabel, cancelLabel, destructive = false, loading = false, verify, irreversible, error, }) {
+    const [typed, setTyped] = useState("");
+    const phraseId = useId();
+    const phraseLabelId = useId();
+    const errorBody = error ? bodyBeyondTitle(error) : null;
+    const confirmable = verify === undefined || typed === verify.phrase;
+    const hasBody = Boolean(irreversible || verify || error);
+    return (_jsxs(_Fragment, { children: [hasBody ? (_jsxs(AlertDialogBody, { children: [irreversible ? (_jsxs("p", { className: "flex items-start gap-3 rounded-sm border border-destructive/15 bg-destructive-soft px-nadicode-sm py-1.5 text-body-sm text-destructive-soft-foreground", "data-slot": "confirm-dialog-irreversible", role: "note", children: [_jsx(OctagonAlertIcon, { "aria-hidden": "true", className: "h-5 w-3.5 shrink-0" }), irreversible] })) : null, verify ? (_jsxs(Field, { children: [_jsx(FieldLabel, { className: "text-label leading-5 text-foreground", htmlFor: phraseId, id: phraseLabelId, children: _jsx(VerifyPrompt, { phrase: verify.phrase, prompt: verify.prompt }) }), _jsx(Input, { "aria-labelledby": phraseLabelId, autoCapitalize: "none", autoComplete: "off", id: phraseId, onChange: (event) => setTyped(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === "Enter" && confirmable && !loading)
+                                        onConfirm();
+                                }, readOnly: loading, ref: phraseField, spellCheck: false, value: typed })] })) : null, error ? (_jsxs(FieldError, { className: "text-body-sm break-words", "data-message-code": error.code, children: [_jsx("span", { className: "block", children: error.title }), errorBody ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "block", children: errorBody })] })) : null] })) : null, error?.actions.length ? (_jsx("div", { className: "flex flex-wrap items-center gap-2", "data-message-actions": true, children: error.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) })) : null] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(Button, { disabled: loading, onClick: onCancel, ref: cancel, variant: "outline", children: cancelLabel }), _jsx(Button, { disabled: !confirmable, loading: loading, loadingLabel: confirmPendingLabel ?? confirmLabel, onClick: onConfirm, variant: destructive ? "destructive" : "default", children: confirmLabel })] })] }));
+}
+function VerifyPrompt({ phrase, prompt }) {
+    const at = prompt.indexOf(phrase);
+    if (at < 0)
+        return prompt;
+    return (_jsxs("span", { children: [prompt.slice(0, at), _jsx("strong", { className: "font-semibold", children: phrase }), prompt.slice(at + phrase.length)] }));
 }

package/dist/components/context-menu.d.ts

@@ -1,32 +1,36 @@
 import * as React from "react";
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
-import { DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger } from "./dropdown-menu.js";
+import { DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLink, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger } from "./dropdown-menu.js";
 /**
- * A menu that opens at the pointer on a right-click, from the dropdown's own parts.
+ * A menu that opens at the pointer on a right-click or a long press, from the dropdown's own parts.
  *
  * @family Menus
- * @when A right-click on a canvas or a surface no record owns, whose commands are also reachable another way.
- * @instead A record's right-click is `ActionContextMenu`, from the same data as its `ActionMenu`. A context menu is never the only way to a command: give it a visible trigger too.
- * @behaviour The dropdown's surface and rows exactly, opening at the pointer on the right. Destructive last, after a divider. One level of submenu at most.
- * @words Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
- * @access The Menu key and Shift+F10 open it on the focused element. Escape closes it and returns focus to that element.
+ * @when "Use ContextMenu for power-user shortcuts on right-click or long-press over a row, file, or canvas object." (https://vercel.com/geist/context-menu) "ContextMenu must never be the only entry point for an action. Mirror every item in a visible `Menu` trigger or row button so mouse-only and keyboard-only users have parity." (https://vercel.com/geist/context-menu) Ours: a right-click on a canvas or a surface no record owns, whose commands are also reachable another way.
+ * @instead "For a global command palette, use `CommandMenu`; for a dropdown opened from a visible trigger, use `Menu`." (https://vercel.com/geist/context-menu) Ours: those are `CommandDialog` and `DropdownMenu`. A record's right-click is `ActionContextMenu`, from the same data as its `ActionMenu`.
+ * @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: the dropdown's surface and rows exactly, 160 px wide at least, opening 2 px right of the pointer and appearing at once, with no entry motion. A row that cannot be chosen keeps its place with its text muted, never dimmed. Destructive last, after a divider.
+ * @words "Items follow the same rules as `Menu`: Title Case `Verb + Noun` (`Open in New Tab`, `Copy URL`, `Delete Deployment`). Bare verbs are wrong." (https://vercel.com/geist/context-menu) "End with `…` only when activating opens a follow-up dialog (`Rename…`, `Move to Folder…`)." (https://vercel.com/geist/context-menu) "Group destructive items at the bottom with a divider and keep the destructive label `Verb + Noun`. `Delete` alone never ships." (https://vercel.com/geist/context-menu) Ours: sentence case, "Copy address", not Title Case. Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
+ * @access "Trigger the keyboard menu key (`Shift+F10` on Windows/Linux, the menu key, or platform equivalent) to open the same menu without right-click." (https://vercel.com/geist/context-menu) "Up/Down arrows move focus, Enter/Space activates, Escape closes and returns focus to the row." (https://vercel.com/geist/context-menu) "Don’t bury destructive items behind nested submenus. One level deep keeps keyboard navigation predictable." (https://vercel.com/geist/context-menu) Ours: the trigger must itself be focusable or hold something that is. The content requires an `aria-label` naming the menu, because nothing visible labels a menu opened at the pointer.
  */
 declare function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props): React.JSX.Element;
 declare function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props): React.JSX.Element;
 declare function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props): React.JSX.Element;
-declare function ContextMenuContent({ className, align, alignOffset, density, side, sideOffset, ...props }: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
+type ContextMenuPopupProps = ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
     density?: "compact" | "comfortable";
+};
+declare function ContextMenuContent({ "aria-label": name, ...props }: Omit<ContextMenuPopupProps, "aria-label"> & {
+    "aria-label": string;
 }): React.JSX.Element;
 declare function ContextMenuGroup(props: React.ComponentProps<typeof DropdownMenuGroup>): React.JSX.Element;
 declare function ContextMenuLabel(props: React.ComponentProps<typeof DropdownMenuLabel>): React.JSX.Element;
 declare function ContextMenuItem(props: React.ComponentProps<typeof DropdownMenuItem>): React.JSX.Element;
+declare function ContextMenuLink(props: React.ComponentProps<typeof DropdownMenuLink>): React.JSX.Element;
 declare function ContextMenuSub(props: React.ComponentProps<typeof DropdownMenuSub>): React.JSX.Element;
 declare function ContextMenuSubTrigger(props: React.ComponentProps<typeof DropdownMenuSubTrigger>): React.JSX.Element;
-declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuContent>): React.JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: ContextMenuPopupProps): React.JSX.Element;
 declare function ContextMenuCheckboxItem(props: React.ComponentProps<typeof DropdownMenuCheckboxItem>): React.JSX.Element;
 declare function ContextMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuRadioGroup>): React.JSX.Element;
 declare function ContextMenuRadioItem(props: React.ComponentProps<typeof DropdownMenuRadioItem>): React.JSX.Element;
 declare function ContextMenuSeparator(props: React.ComponentProps<typeof DropdownMenuSeparator>): React.JSX.Element;
 declare function ContextMenuShortcut(props: React.ComponentProps<typeof DropdownMenuShortcut>): React.JSX.Element;
-export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLink, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
 //# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/components/context-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKlF,OAAO,EACL,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AAKpC;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,qBAEjE;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,qBAEzE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,qBAQtF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAe,EACf,WAAe,EACf,OAAuB,EACvB,IAAc,EACd,UAAc,EACd,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC,qBAoBF;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,qBAE9E;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,qBAE9E;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAE5E;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,qBAE1E;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,qBAExF;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,qBASjD;AAED,iBAAS,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,qBAE5F;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,qBAExF;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,qBAEtF;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,qBAEtF;AAED,iBAAS,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,qBAEpF;AAED,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC"}
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/components/context-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAIlF,OAAO,EACL,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AAKpC;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,qBAEjE;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,qBAEzE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,qBAQtF;AAED,KAAK,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,GAC3D,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC,CAAC;AAqCJ,iBAAS,kBAAkB,CAAC,EAC1B,YAAY,EAAE,IAAI,EAClB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,qBAEtE;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,qBAE9E;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,qBAE9E;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAE5E;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAE5E;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,qBAE1E;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,qBAExF;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAS5E;AAED,iBAAS,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,qBAE5F;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,qBAExF;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,qBAEtF;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,qBAEtF;AAED,iBAAS,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,qBAEpF;AAED,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC"}

package/dist/components/context-menu.js

@@ -2,20 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
 import { cn } from "../lib/utils.js";
-import { anchoredOverlayMotion } from "../lib/motion.js";
 import { menuSurface } from "../internal/menu-surface.js";
-import { DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, } from "./dropdown-menu.js";
+import { DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLink, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, } from "./dropdown-menu.js";
 // A context menu's items are Base UI's menu items, so every part below the popup is the dropdown's own: the two
 // menus cannot drift apart in their rows, only in how they open.
 /**
- * A menu that opens at the pointer on a right-click, from the dropdown's own parts.
+ * A menu that opens at the pointer on a right-click or a long press, from the dropdown's own parts.
  *
  * @family Menus
- * @when A right-click on a canvas or a surface no record owns, whose commands are also reachable another way.
- * @instead A record's right-click is `ActionContextMenu`, from the same data as its `ActionMenu`. A context menu is never the only way to a command: give it a visible trigger too.
- * @behaviour The dropdown's surface and rows exactly, opening at the pointer on the right. Destructive last, after a divider. One level of submenu at most.
- * @words Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
- * @access The Menu key and Shift+F10 open it on the focused element. Escape closes it and returns focus to that element.
+ * @when "Use ContextMenu for power-user shortcuts on right-click or long-press over a row, file, or canvas object." (https://vercel.com/geist/context-menu) "ContextMenu must never be the only entry point for an action. Mirror every item in a visible `Menu` trigger or row button so mouse-only and keyboard-only users have parity." (https://vercel.com/geist/context-menu) Ours: a right-click on a canvas or a surface no record owns, whose commands are also reachable another way.
+ * @instead "For a global command palette, use `CommandMenu`; for a dropdown opened from a visible trigger, use `Menu`." (https://vercel.com/geist/context-menu) Ours: those are `CommandDialog` and `DropdownMenu`. A record's right-click is `ActionContextMenu`, from the same data as its `ActionMenu`.
+ * @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: the dropdown's surface and rows exactly, 160 px wide at least, opening 2 px right of the pointer and appearing at once, with no entry motion. A row that cannot be chosen keeps its place with its text muted, never dimmed. Destructive last, after a divider.
+ * @words "Items follow the same rules as `Menu`: Title Case `Verb + Noun` (`Open in New Tab`, `Copy URL`, `Delete Deployment`). Bare verbs are wrong." (https://vercel.com/geist/context-menu) "End with `…` only when activating opens a follow-up dialog (`Rename…`, `Move to Folder…`)." (https://vercel.com/geist/context-menu) "Group destructive items at the bottom with a divider and keep the destructive label `Verb + Noun`. `Delete` alone never ships." (https://vercel.com/geist/context-menu) Ours: sentence case, "Copy address", not Title Case. Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
+ * @access "Trigger the keyboard menu key (`Shift+F10` on Windows/Linux, the menu key, or platform equivalent) to open the same menu without right-click." (https://vercel.com/geist/context-menu) "Up/Down arrows move focus, Enter/Space activates, Escape closes and returns focus to the row." (https://vercel.com/geist/context-menu) "Don’t bury destructive items behind nested submenus. One level deep keeps keyboard navigation predictable." (https://vercel.com/geist/context-menu) Ours: the trigger must itself be focusable or hold something that is. The content requires an `aria-label` naming the menu, because nothing visible labels a menu opened at the pointer.
  */
 function ContextMenu({ ...props }) {
     return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
@@ -26,8 +25,11 @@ function ContextMenuPortal({ ...props }) {
 function ContextMenuTrigger({ className, ...props }) {
     return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
 }
-function ContextMenuContent({ className, align = "start", alignOffset = 4, density = "comfortable", side = "right", sideOffset = 0, ...props }) {
-    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: 8, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", "data-density": density, className: cn("pointer-events-auto", menuSurface, anchoredOverlayMotion, className), ...props }) }) }));
+function ContextMenuPopup({ className, align = "start", alignOffset = 0, density = "comfortable", side = "right", sideOffset = 2, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: 8, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", "data-density": density, className: cn("pointer-events-auto", menuSurface, "min-w-[min(10rem,var(--available-width))]", className), ...props }) }) }));
+}
+function ContextMenuContent({ "aria-label": name, ...props }) {
+    return _jsx(ContextMenuPopup, { "aria-label": name, ...props });
 }
 function ContextMenuGroup(props) {
     return _jsx(DropdownMenuGroup, { "data-slot": "context-menu-group", ...props });
@@ -38,6 +40,9 @@ function ContextMenuLabel(props) {
 function ContextMenuItem(props) {
     return _jsx(DropdownMenuItem, { "data-slot": "context-menu-item", ...props });
 }
+function ContextMenuLink(props) {
+    return _jsx(DropdownMenuLink, { "data-slot": "context-menu-link", ...props });
+}
 function ContextMenuSub(props) {
     return _jsx(DropdownMenuSub, { "data-slot": "context-menu-sub", ...props });
 }
@@ -45,7 +50,7 @@ function ContextMenuSubTrigger(props) {
     return _jsx(DropdownMenuSubTrigger, { "data-slot": "context-menu-sub-trigger", ...props });
 }
 function ContextMenuSubContent({ className, ...props }) {
-    return (_jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", className: cn("w-auto min-w-24", className), side: "right", ...props }));
+    return (_jsx(ContextMenuPopup, { "data-slot": "context-menu-sub-content", className: cn("w-auto min-w-24", className), side: "right", ...props }));
 }
 function ContextMenuCheckboxItem(props) {
     return _jsx(DropdownMenuCheckboxItem, { "data-slot": "context-menu-checkbox-item", ...props });
@@ -62,4 +67,4 @@ function ContextMenuSeparator(props) {
 function ContextMenuShortcut(props) {
     return _jsx(DropdownMenuShortcut, { "data-slot": "context-menu-shortcut", ...props });
 }
-export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLink, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/components/copy-button.d.ts

@@ -4,6 +4,8 @@ export type CopyButtonProps = {
     copiedLabel: string;
     copyFailedLabel: string;
     size?: "icon" | "icon-xs" | "icon-sm";
+    copied?: boolean | undefined;
+    onCopy?: (() => void) | undefined;
 };
 /**
  * Copies an exact value someone will paste elsewhere.
@@ -11,9 +13,10 @@ export type CopyButtonProps = {
  * @family Actions
  * @when An exact value someone will paste elsewhere: an Agent ID, a server address, a command. A shell prompt shown before a command stays outside the copied value.
  * @instead Several lines of code are a `CodeBlock`. Ordinary prose never gets copy chrome. A secret needs its reveal policy first.
- * @behaviour Copies the full underlying value even when the shown one is shortened. The check shows for 2 s, and only after the clipboard confirms. A failure shows the alert mark and the button stays for a retry. Sizes: `icon` (36), `icon-sm` (32) after a value, `icon-xs` (24) inside a field.
+ * @behaviour "A button that copies a given string to the clipboard and provides feedback when copied." (https://vercel.com/geist/copy-button)
+ * Ours: copies the full underlying value even when the shown one is shortened. The copy mark fades into the check for about a second, and only after the clipboard confirms; no colour changes. A failure shows the alert mark and the button stays for a retry. The standalone `icon` button is outlined; `icon-sm` sits after a value and `icon-xs` inside a field, both without chrome. `copied` shows the check from outside for a parent that copies other text, and `onCopy` runs once the clipboard confirms. While the clipboard works a second press is ignored and the button looks as it did, with no held look.
  * @words Three catalogue strings: `copyLabel` names the target ("Copy Agent ID"), `copiedLabel` ("Copied"), `copyFailedLabel` ("Couldn't copy").
- * @access `aria-label` is the copy label and does not change. The result is read once from a hidden `role="status"`. The button stays focusable while it works.
+ * @access `aria-label` is the copy label and does not change. The result is read once from a hidden `role="status"`.
  */
 export declare function CopyButton(props: CopyButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/components/copy-button.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACvC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/components/copy-button.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD"}

package/dist/components/copy-button.js

@@ -1,35 +1,43 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
 import { Check, CircleAlert, Copy } from "lucide-react";
 import { Button } from "./button.js";
 import { useCopyToClipboard } from "../lib/use-copy-to-clipboard.js";
+import { cn } from "../lib/utils.js";
 /**
  * Copies an exact value someone will paste elsewhere.
  *
  * @family Actions
  * @when An exact value someone will paste elsewhere: an Agent ID, a server address, a command. A shell prompt shown before a command stays outside the copied value.
  * @instead Several lines of code are a `CodeBlock`. Ordinary prose never gets copy chrome. A secret needs its reveal policy first.
- * @behaviour Copies the full underlying value even when the shown one is shortened. The check shows for 2 s, and only after the clipboard confirms. A failure shows the alert mark and the button stays for a retry. Sizes: `icon` (36), `icon-sm` (32) after a value, `icon-xs` (24) inside a field.
+ * @behaviour "A button that copies a given string to the clipboard and provides feedback when copied." (https://vercel.com/geist/copy-button)
+ * Ours: copies the full underlying value even when the shown one is shortened. The copy mark fades into the check for about a second, and only after the clipboard confirms; no colour changes. A failure shows the alert mark and the button stays for a retry. The standalone `icon` button is outlined; `icon-sm` sits after a value and `icon-xs` inside a field, both without chrome. `copied` shows the check from outside for a parent that copies other text, and `onCopy` runs once the clipboard confirms. While the clipboard works a second press is ignored and the button looks as it did, with no held look.
  * @words Three catalogue strings: `copyLabel` names the target ("Copy Agent ID"), `copiedLabel` ("Copied"), `copyFailedLabel` ("Couldn't copy").
- * @access `aria-label` is the copy label and does not change. The result is read once from a hidden `role="status"`. The button stays focusable while it works.
+ * @access `aria-label` is the copy label and does not change. The result is read once from a hidden `role="status"`.
  */
 export function CopyButton(props) {
     return _jsx(CopyValueButton, { ...props }, props.value);
 }
-function CopyValueButton({ value, copyLabel, copiedLabel, copyFailedLabel, size = "icon", }) {
+function markClass(shown) {
+    return cn("col-start-1 row-start-1 transition-opacity duration-[var(--nc-duration-confirm)]", !shown && "opacity-0");
+}
+function CopyValueButton({ value, copyLabel, copiedLabel, copyFailedLabel, size = "icon", copied: copiedProp, onCopy, }) {
     const [failed, setFailed] = useState(false);
     const [pending, startTransition] = useTransition();
     const { copyToClipboard, isCopied } = useCopyToClipboard({
         text: value,
-        timeout: 2000,
+        timeout: 1000,
+        onCopy,
         onError: () => setFailed(true),
     });
-    const copied = isCopied && !failed && !pending;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": copyLabel, "aria-busy": pending, title: failed ? copyFailedLabel : copyLabel, disabled: pending, focusableWhenDisabled: true, onClick: () => {
+    const copied = (copiedProp ?? isCopied) && !failed && !pending;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": copyLabel, title: failed ? copyFailedLabel : copyLabel, onClick: () => {
+                    if (pending)
+                        return;
                     setFailed(false);
                     startTransition(async () => {
                         await copyToClipboard();
                     });
-                }, size: size, type: "button", variant: "ghost", children: pending ? (_jsx(Copy, { "data-icon": "inline-start" })) : failed ? (_jsx(CircleAlert, { "data-icon": "inline-start" })) : copied ? (_jsx(Check, { "data-icon": "inline-start" })) : (_jsx(Copy, { "data-icon": "inline-start" })) }), _jsx("span", { className: "sr-only", role: "status", children: pending ? "" : failed ? copyFailedLabel : copied ? copiedLabel : "" })] }));
+                }, size: size, type: "button", variant: size === "icon" ? "outline" : "ghost", children: _jsxs("span", { className: "grid place-items-center", children: [_jsx(Copy, { className: markClass(!failed && !copied) }), _jsx(Check, { className: markClass(copied) }), _jsx(CircleAlert, { className: markClass(failed) })] }) }), _jsx("span", { className: "sr-only", role: "status", children: pending ? "" : failed ? copyFailedLabel : copied ? copiedLabel : "" })] }));
 }