@vaam-apps/ui 0.1.0

package/src/components/primitives/button.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn";
+
+// daisyUI does the heavy lifting (`btn-primary`, `btn-outline`, `btn-ghost`,
+// `btn-error`); the design doc's rule (§5.1) is that there is no
+// "success"/"warning" button variant — those hues are reserved for status,
+// so only these four exist. `btn-primary` is genuinely the achromatic
+// inverse fill (§1.3: near-black on light, near-white on dark) — `neutral`
+// is a *different*, deliberately quieter token (this theme's surface-3-ish
+// fill, used for badges) and using it here read as a washed-out primary
+// button in light theme; caught visually, not by inspection.
+//
+// D4/D11: rebuilt on `cva()` per docs/design/console-redesign.md §6.3 —
+// `Slot`/`asChild` are gone (nothing in this repo used `<Button asChild>`,
+// confirmed by grep before removing it), and `buttonVariants` is exported
+// standalone so a link that must look like a button reaches for the class
+// string directly: `<a className={buttonVariants({ variant: "secondary" })}>`.
+// `rounded-field` in the base string is the one deliberate D8 addition —
+// daisyUI's own `.btn` class already applies `--radius-field` per corner
+// internally, so this doesn't change the rendered radius, only makes the
+// D8 register explicit at the call site, matching §6.3's own sketch
+// verbatim.
+export const buttonVariants = cva("btn font-sans font-semibold rounded-field", {
+  variants: {
+    variant: {
+      primary: "btn-primary",
+      secondary: "btn-outline",
+      ghost: "btn-ghost",
+      destructive: "btn-error",
+    },
+    size: {
+      sm: "btn-sm",
+      md: "",
+      icon: "btn-square btn-sm",
+    },
+  },
+  defaultVariants: { variant: "primary", size: "md" },
+});
+
+export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />
+  ),
+);
+Button.displayName = "Button";

package/src/components/primitives/calendar.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker, type DayPickerProps } from "react-day-picker";
+import { cn } from "../../lib/cn";
+
+export type CalendarProps = DayPickerProps & { className?: string | undefined };
+
+/**
+ * `react-day-picker`, themed with this design system's own tokens.
+ *
+ * # Why the whole `classNames` map is spelled out
+ *
+ * `react-day-picker` ships a stylesheet (`react-day-picker/style.css`)
+ * built on its own `--rdp-*` variables. Importing it would put a second,
+ * independent theme in the page whose colours are set from somewhere
+ * other than `theme.css` — so the first time anyone changed a surface
+ * colour, the calendar would not follow, and the mismatch would be
+ * invisible until someone opened a date picker.
+ *
+ * The stylesheet is therefore **not** imported, and every element gets a
+ * class from the tokens here instead. That is more code than a handful of
+ * overrides, and it is the point: there is exactly one place this
+ * component's colours come from, and it is the same place every other
+ * component's come from.
+ *
+ * # `selected` without `onSelect` is not a binding
+ *
+ * This component is a thin pass-through, so react-day-picker's own
+ * control semantics apply unchanged: given `selected` but no `onSelect`,
+ * it manages selection internally and treats `selected` as an initial
+ * value. A caller who expects a controlled component gets one that
+ * silently diverges from its own prop the first time someone clicks a
+ * day — found exactly that way, in a gallery demo. Pass both, or neither.
+ *
+ * # Layout is deliberately not themed away
+ *
+ * The grid itself is a `<table>` and needs `border-collapse` plus fixed
+ * cell sizing to stay square; those are structural, not thematic, and
+ * live here rather than in a token.
+ */
+export function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        root: "text-body text-foreground",
+        months: "flex flex-col gap-4 sm:flex-row",
+        month: "flex flex-col gap-3",
+        month_caption: "flex h-8 items-center justify-center",
+        caption_label: "font-medium text-body text-foreground",
+        nav: "flex items-center gap-1",
+        // The nav buttons are absolutely positioned by RDP's own layout at
+        // the top corners of the month; these restyle them in place.
+        button_previous: cn(
+          "absolute top-3 left-3 inline-flex size-7 items-center justify-center rounded-sm",
+          "text-muted-foreground transition-colors hover:bg-surface-3 hover:text-foreground",
+          "disabled:pointer-events-none disabled:opacity-40",
+        ),
+        button_next: cn(
+          "absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-sm",
+          "text-muted-foreground transition-colors hover:bg-surface-3 hover:text-foreground",
+          "disabled:pointer-events-none disabled:opacity-40",
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "w-8 font-normal text-caption text-subtle-foreground",
+        week: "mt-1 flex w-full",
+        // Selection state lives on the CELL, not on the button inside it.
+        // Read off the real DOM, not guessed: react-day-picker puts
+        // `aria-selected` and `data-selected` on the `<td>` and leaves the
+        // `<button>` carrying only `type`/`tabindex`/`aria-label`. An
+        // earlier revision of this file styled the button with
+        // `aria-selected:bg-primary` and the cell with
+        // `[&:has([data-range-middle])]`, and BOTH silently matched
+        // nothing — no selected day had a fill and no range had a tint.
+        // Neither `tsc` nor the classNames-key test could see it: the keys
+        // were all real, and the class strings were valid CSS for a DOM
+        // shape that does not exist. Found by rendering it.
+        day: "relative size-8 p-0 text-center",
+        day_button: cn(
+          "inline-flex size-8 items-center justify-center rounded-sm font-mono text-caption tabular-nums",
+          "text-foreground transition-colors hover:bg-surface-3",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        ),
+        // Fills the button from the cell's own state, which is where the
+        // state actually is. Covers single mode outright and both ends of
+        // a range; `range_middle` below overrides it for the interior.
+        selected:
+          "[&>button]:bg-primary [&>button]:text-primary-content [&>button]:hover:bg-primary",
+        today: "font-semibold text-state-uncertain-fg",
+        outside: "text-subtle-foreground opacity-50",
+        disabled: "pointer-events-none opacity-30",
+        hidden: "invisible",
+        // The interior of a range: tint the CELL so consecutive days meet
+        // with no gap, and knock the button's own fill back out.
+        //
+        // Two things here were wrong on the first attempt and are worth
+        // keeping written down. The tint was `bg-state-neutral-bg`, which
+        // is a real token that resolves to `transparent` — `neutral` is
+        // the quiet hue and deliberately has no fill — so the interior
+        // rendered as nothing at all. It is a wash of the selection
+        // colour instead, which is also what it means. And the `!` is
+        // load-bearing: a middle day also carries `selected` above, and
+        // both rules are arbitrary variants of equal specificity, so
+        // without it the winner is whichever class Tailwind emits last.
+        range_middle:
+          "bg-primary/15 [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-surface-3!",
+        range_start: "rounded-l-sm",
+        range_end: "rounded-r-sm",
+        week_number: "w-8 font-mono text-caption text-subtle-foreground",
+        footer: "pt-2 text-caption text-muted-foreground",
+        ...classNames,
+      }}
+      components={{
+        // RDP renders one `Chevron` for both directions and flips it with
+        // `orientation`; swapping in two real icons reads better than a
+        // CSS rotation and keeps the stroke weight matching every other
+        // icon in the system.
+        Chevron: ({ orientation, ...iconProps }) =>
+          orientation === "left" ? (
+            <ChevronLeft size={16} strokeWidth={1.5} {...iconProps} />
+          ) : (
+            <ChevronRight size={16} strokeWidth={1.5} {...iconProps} />
+          ),
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/primitives/card.tsx

@@ -0,0 +1,70 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+
+// Borders, not shadows (design doc §3.6): every card is `--shadow-none` +
+// a 1px border. daisyUI's own `card` class would add `shadow-xl` under
+// some presets — explicitly opted out here rather than stripped after the
+// fact, since this is a hand-built component, not a generated one.
+//
+// D8: the previous `rounded-sm` override is dropped, not swapped for
+// `rounded-box` — daisyUI's own `.card` rule already sets
+// `border-radius: var(--radius-box)` (confirmed by reading
+// `daisyui/components/card.css` directly), so an explicit override was
+// fighting the component's own class at equal specificity for no reason.
+// This *is* the deliberate D8 value change §5's inventory calls for
+// ("new radius (`--radius-box`)") — the previous `rounded-sm` resolved to
+// `--radius-field` (12px) once Phase 0 rewrote the alias, one tier tighter
+// than the box-tier corners the reference lock (§1.1/§1.2/§1.5) shows for
+// card/drawer/panel chrome.
+export function Card({ className, ...props }: CardProps) {
+  return (
+    <div className={cn("card border border-edge bg-base-300 shadow-none", className)} {...props} />
+  );
+}
+
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  /**
+   * Heading level for `title`. Defaults to `h3`, which is right for a
+   * card inside a section that already has an `h2`.
+   *
+   * It is a prop rather than a constant because a heading level is a
+   * property of the page's outline, not of the card: a card placed
+   * directly under the screen's `h1` with `h3` skips a level, which axe
+   * reports as `heading-order` and a screen-reader user experiences as a
+   * missing section.
+   */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /** Optional mono metadata line beneath the title. */
+  meta?: ReactNode;
+  /** Right-aligned slot, e.g. a row of buttons. */
+  action?: ReactNode;
+}
+
+export function CardHeader({
+  title,
+  meta,
+  action,
+  headingLevel = 3,
+  className,
+  ...props
+}: CardHeaderProps) {
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <div className={cn("flex items-start justify-between gap-4 p-4", className)} {...props}>
+      <div className="min-w-0">
+        <Heading className="truncate font-medium text-foreground text-title-sm">{title}</Heading>
+        {meta != null && (
+          <p className="mt-1 truncate font-mono text-caption text-subtle-foreground">{meta}</p>
+        )}
+      </div>
+      {action != null && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}
+
+export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("px-4 pb-4", className)} {...props} />;
+}

package/src/components/primitives/checkbox.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { Field, Checkbox as HeadlessCheckbox, Label as HeadlessLabel } from "@headlessui/react";
+import { Check, Minus } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface CheckboxProps {
+  checked: boolean;
+  /** Omit for an uncontrolled display-only checkbox (e.g. inside a row
+   * whose whole surface handles the click). */
+  onCheckedChange?: ((checked: boolean) => void) | undefined;
+  /** Neither on nor off — a parent whose children disagree. Rendered as a
+   * dash. `checked` is still what a click toggles from. */
+  indeterminate?: boolean;
+  disabled?: boolean | undefined;
+  /** Required when no visible `<CheckboxField>` label wraps it. */
+  "aria-label"?: string | undefined;
+  "aria-labelledby"?: string | undefined;
+  className?: string | undefined;
+}
+
+/**
+ * A checkbox, rendered as a real focusable control rather than a styled
+ * `<input>`.
+ *
+ * Headless UI gives it `role="checkbox"`, `aria-checked`, space-to-toggle
+ * and focus management; everything here is appearance. A native
+ * `<input type="checkbox">` styled with `appearance-none` would be
+ * equivalent for the plain case but cannot express `indeterminate`
+ * without an imperative DOM write on a ref, which is how that state ends
+ * up out of sync with React's own.
+ */
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  indeterminate = false,
+  disabled,
+  className,
+  ...aria
+}: CheckboxProps) {
+  return (
+    <HeadlessCheckbox
+      checked={checked}
+      onChange={onCheckedChange ?? (() => undefined)}
+      disabled={disabled ?? false}
+      indeterminate={indeterminate}
+      className={cn(
+        "group inline-flex size-4 shrink-0 items-center justify-center rounded-selector border border-edge-strong bg-surface-2",
+        "transition-colors data-checked:border-primary data-checked:bg-primary",
+        "data-indeterminate:border-primary data-indeterminate:bg-primary",
+        "data-focus:outline-none data-focus:ring-1 data-focus:ring-ring",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...aria}
+    >
+      {indeterminate ? (
+        <Minus size={12} strokeWidth={2.5} className="text-primary-content" />
+      ) : (
+        <Check
+          size={12}
+          strokeWidth={2.5}
+          className="text-primary-content opacity-0 group-data-checked:opacity-100"
+        />
+      )}
+    </HeadlessCheckbox>
+  );
+}
+
+export interface CheckboxFieldProps extends Omit<CheckboxProps, "aria-label" | "aria-labelledby"> {
+  label: ReactNode;
+  /** One line beneath the label. */
+  description?: ReactNode;
+}
+
+/**
+ * A checkbox with a clickable label beside it.
+ *
+ * Separate from `FormField`, which stacks a label *above* a control:
+ * a checkbox's label belongs on the same line and must itself be a click
+ * target, which is a different layout and a different association
+ * (`Field`/`Label` wiring rather than `htmlFor`).
+ */
+export function CheckboxField({ label, description, className, ...props }: CheckboxFieldProps) {
+  return (
+    <Field className={cn("flex items-start gap-2", className)}>
+      <span className="mt-0.5">
+        <Checkbox {...props} />
+      </span>
+      <span className="flex flex-col gap-0.5">
+        <HeadlessLabel className="cursor-pointer text-body text-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50">
+          {label}
+        </HeadlessLabel>
+        {description !== undefined && (
+          <span className="text-caption text-muted-foreground">{description}</span>
+        )}
+      </span>
+    </Field>
+  );
+}

package/src/components/primitives/chip-select.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+// No `CheckboxGroup` — Headless UI 2.2.10 does not export one (checked,
+// not assumed: `tsc` rejected it), so the grouping is done here.
+//
+// A `<fieldset>`, not `<div role="group">`. Biome's `a11y/useSemanticElements`
+// is right that the native element beats the ARIA role, and it caught the
+// div in CI after a local `biome check frontends` had passed — CI runs
+// `pnpm biome ci .`, which is not the same command. Run CI's own.
+//
+// `min-w-0` because a `<fieldset>` has a UA `min-width: min-content` that a
+// `<div>` does not, which would otherwise stop the chips wrapping inside a
+// narrow drawer.
+import { Checkbox, Field, Label } from "@headlessui/react";
+import { Check } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+/**
+ * Multi-select over a small, fixed vocabulary, rendered as toggleable
+ * chips.
+ *
+ * # Why chips rather than a text field or a multi-select
+ *
+ * The motivating case is OAuth scopes when provisioning a client. That
+ * field was a free-text input: an operator had to already know both that
+ * scopes are space-delimited *and* what the fourteen valid strings are,
+ * with a typo silently producing a client that is denied at Layer 2 with
+ * no hint why. Showing the vocabulary is the whole point.
+ *
+ * Not a `Select` with `multiple`: this renders inline with no portal and
+ * no transition, so it cannot hit the focus-trap bug that made `Select`
+ * unusable inside a drawer (#315). Same reasoning as `RadioGroup` — for a
+ * bounded vocabulary in a drawer, the inline control is the safer one.
+ *
+ * Not a `<datalist>` or a tag input either: both still let a caller type
+ * something outside the vocabulary, which is exactly the property being
+ * removed.
+ */
+export interface ChipOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  /** Shown beneath the label — for scopes, what the scope actually permits. */
+  description?: ReactNode;
+}
+
+export interface ChipSelectProps<T extends string> {
+  value: readonly T[];
+  onValueChange: (value: T[]) => void;
+  options: readonly ChipOption<T>[];
+  disabled?: boolean | undefined;
+  "aria-label"?: string | undefined;
+  className?: string | undefined;
+}
+
+export function ChipSelect<T extends string>({
+  value,
+  onValueChange,
+  options,
+  disabled,
+  className,
+  ...aria
+}: ChipSelectProps<T>) {
+  return (
+    <fieldset className={cn("flex min-w-0 flex-wrap gap-2", className)} {...aria}>
+      {options.map((option) => {
+        const checked = value.includes(option.value);
+        return (
+          <Field key={option.value}>
+            <Checkbox
+              checked={checked}
+              disabled={disabled ?? false}
+              onChange={(next: boolean) => {
+                onValueChange(
+                  next ? [...value, option.value] : value.filter((v) => v !== option.value),
+                );
+              }}
+              className={cn(
+                "flex cursor-pointer items-start gap-2 rounded-sm border border-edge bg-surface-2 px-3 py-2 text-body text-muted-foreground",
+                "data-checked:border-state-success-border data-checked:bg-state-success-bg data-checked:text-state-success-fg",
+                "data-focus:outline-none data-focus:ring-1 data-focus:ring-state-success-border",
+                "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+              )}
+            >
+              <span
+                className={cn(
+                  "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-xs border border-edge",
+                  checked && "border-state-success-fg",
+                )}
+              >
+                {checked && <Check className="size-3" aria-hidden="true" />}
+              </span>
+              <span className="flex flex-col gap-0.5">
+                <Label className="cursor-pointer font-mono font-medium">{option.label}</Label>
+                {option.description !== undefined && (
+                  <span className="text-caption text-subtle-foreground">{option.description}</span>
+                )}
+              </span>
+            </Checkbox>
+          </Field>
+        );
+      })}
+    </fieldset>
+  );
+}

package/src/components/primitives/command-menu.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn";
+
+// cmdk is standalone (no Radix wrapper needed — it already owns its own
+// keyboard nav/ARIA). Styled with the same surface-2/border-edge/radius-md
+// floating-layer treatment as Popover/DropdownMenu for visual consistency.
+
+export const CommandMenu = forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex w-full flex-col overflow-hidden rounded-md border border-edge bg-surface-2 text-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandMenu.displayName = "CommandMenu";
+
+export function CommandMenuInput(
+  props: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
+) {
+  return (
+    <div className="flex items-center gap-2 border-edge border-b px-3">
+      <Search size={14} strokeWidth={1.5} className="shrink-0 text-subtle-foreground" />
+      <CommandPrimitive.Input
+        className="h-10 w-full bg-transparent text-prose outline-none placeholder:text-subtle-foreground"
+        {...props}
+      />
+    </div>
+  );
+}
+
+export const CommandMenuList = forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto overflow-x-hidden p-1", className)}
+    {...props}
+  />
+));
+CommandMenuList.displayName = "CommandMenuList";
+
+export function CommandMenuEmpty(
+  props: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>,
+) {
+  return (
+    <CommandPrimitive.Empty
+      className="px-3 py-6 text-center text-body text-muted-foreground"
+      {...props}
+    />
+  );
+}
+
+export const CommandMenuGroup = forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "text-body [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-micro [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandMenuGroup.displayName = "CommandMenuGroup";
+
+export const CommandMenuItem = forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body data-[selected=true]:bg-surface-3",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandMenuItem.displayName = "CommandMenuItem";

package/src/components/primitives/confirm-dialog.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+import { Spinner } from "./spinner";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  /**
+   * What will happen, in the user's terms — and for anything
+   * irreversible, say so here. "This cannot be undone" is not filler;
+   * it is the one sentence that changes the decision.
+   */
+  description: ReactNode;
+  /** Names the action, e.g. "Delete endpoint". Never "OK" or "Yes": the
+   * confirm button is often the only text read before clicking, so it has
+   * to say what it does on its own. */
+  confirmLabel: string;
+  cancelLabel?: string;
+  /** `destructive` renders the confirm button in the error variant. Use
+   * it for anything that deletes, revokes or cancels — not merely for
+   * anything important. */
+  tone?: "default" | "destructive";
+  onConfirm: () => void;
+  /** In-flight: both buttons disabled, confirm shows a spinner. The
+   * dialog does not close itself — the caller closes it when the write
+   * actually lands, so a failure leaves the dialog open with its error
+   * rather than vanishing and losing the context. */
+  busy?: boolean;
+  /** Rendered above the buttons. The place for a failed attempt's message. */
+  children?: ReactNode;
+}
+
+/**
+ * A modal yes/no for an action worth interrupting someone over.
+ *
+ * # When *not* to use it
+ *
+ * Most of the time. A modal confirm is an interruption, and an
+ * interruption that appears on every delete trains people to dismiss it
+ * without reading — at which point it protects nothing and costs a click.
+ * `InlineConfirm` (the two-step button that expands in place) is the
+ * right default for a row-level action; this is for the ones where
+ * getting it wrong is expensive and hard to reverse.
+ *
+ * # Why the caller closes it
+ *
+ * `onConfirm` returning does not close the dialog, and `busy` is a prop
+ * rather than internal state. Both follow from the same requirement: the
+ * dialog must still be open, with its context intact, when a write fails.
+ * A self-closing confirm reports failure through a toast on a screen the
+ * operator has already been returned to, which is where error messages go
+ * to be missed.
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  tone = "default",
+  onConfirm,
+  busy = false,
+  children,
+}: ConfirmDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        {children}
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={busy}
+            onClick={() => onOpenChange(false)}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            type="button"
+            variant={tone === "destructive" ? "destructive" : "primary"}
+            size="sm"
+            disabled={busy}
+            onClick={onConfirm}
+          >
+            {busy && <Spinner size="xs" />}
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}