@elabs-ai/components-ui 4.0.0

package/src/components/command/command.tsx

@@ -0,0 +1,301 @@
+import {
+  createContext,
+  forwardRef,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { mergeRefs } from "../../lib/merge-refs";
+import { Dialog, DialogContent } from "../dialog";
+
+/** cmdk's own marker attribute on an item row — the scope for the id lookup. */
+const CMDK_ITEM_SELECTOR = '[cmdk-item=""][aria-selected="true"]';
+
+/** Distinguishes "no `<Command>` ancestor" from "nothing is highlighted". */
+const NO_COMMAND_PROVIDER = Symbol("no-command-provider");
+
+const CommandActiveItemIdContext = createContext<string | undefined | typeof NO_COMMAND_PROVIDER>(
+  NO_COMMAND_PROVIDER,
+);
+
+/**
+ * Resolves the DOM `id` of the currently highlighted `CommandItem`, publishes
+ * it on a context and reports it to `Command`'s `onActiveItemIdChange`.
+ *
+ * It renders no DOM of its own, and it deliberately does NOT simply forward
+ * cmdk's `state.selectedItemId`. cmdk only recomputes that field inside a
+ * `schedule(7, …)` callback queued from `setState("value", …)`, and its own
+ * `selectFirstItem()` runs INSIDE the layout-effect flush that drains that
+ * queue — so the callback executes before React has committed the new
+ * `aria-selected` attribute and cmdk's `getSelectedItem()` DOM query finds
+ * nothing. The field therefore stays `undefined` for BOTH cases that matter
+ * here: the item auto-highlighted on mount, and the item re-highlighted after
+ * every filter keystroke. (cmdk's own `Command.Input` inherits the same hole —
+ * it renders no `aria-activedescendant` in either state. Verified against
+ * cmdk 1.1.1 in jsdom and Chromium.)
+ *
+ * Reading the committed DOM from a post-commit `useEffect` — the same query
+ * cmdk itself uses, just at a point where the attribute exists — closes both
+ * gaps. `state.selectedItemId` is kept as a fallback and as one of the change
+ * triggers.
+ */
+function CommandActiveItemProvider({
+  rootRef,
+  onChange,
+  children,
+}: {
+  rootRef: RefObject<HTMLDivElement | null>;
+  onChange?: (id: string | undefined) => void;
+  children: ReactNode;
+}) {
+  const value = useCommandState((state) => state.value);
+  const selectedItemId = useCommandState((state) => state.selectedItemId);
+  const filteredCount = useCommandState((state) => state.filtered.count);
+
+  const [activeId, setActiveId] = useState<string | undefined>(undefined);
+
+  // The callback lives in a ref so an inline arrow prop doesn't re-fire the
+  // effect on every render.
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // `undefined` is a legitimate reported value ("nothing highlighted"), so the
+  // "not reported yet" sentinel has to be something else.
+  const lastReportedRef = useRef<string | undefined | typeof NO_COMMAND_PROVIDER>(
+    NO_COMMAND_PROVIDER,
+  );
+
+  useEffect(() => {
+    const element = rootRef.current?.querySelector<HTMLElement>(CMDK_ITEM_SELECTOR);
+    const next = element?.id ?? selectedItemId ?? undefined;
+
+    setActiveId(next);
+    if (lastReportedRef.current !== next) {
+      lastReportedRef.current = next;
+      onChangeRef.current?.(next);
+    }
+  }, [value, selectedItemId, filteredCount, rootRef]);
+
+  return <CommandActiveItemIdContext value={activeId}>{children}</CommandActiveItemIdContext>;
+}
+
+export interface CommandProps extends ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  /**
+   * Reports the DOM `id` cmdk assigned to the currently highlighted item, so
+   * an input rendered OUTSIDE this `Command` tree (a composer textarea, a
+   * combobox trigger) can set `aria-activedescendant` without querying
+   * `[role="option"]` positionally. Fires with `undefined` when nothing is
+   * highlighted.
+   *
+   * cmdk owns each item's `id`/`role`/`aria-selected` and applies them AFTER
+   * the consumer spread, so a consumer-supplied `id` on `CommandItem` is
+   * silently dropped (`CommandItem` warns about this in development) — this
+   * callback is the supported way to obtain it. See also the
+   * `useCommandActiveItemId` hook for reading the same value from a
+   * descendant already inside the `<Command>` tree.
+   *
+   * It fires for EVERY highlight change, including the item cmdk
+   * auto-highlights on mount and the one it re-highlights after each filter
+   * keystroke — the two states cmdk's own `state.selectedItemId` misses.
+   */
+  onActiveItemIdChange?: (id: string | undefined) => void;
+}
+
+export const Command = forwardRef<ElementRef<typeof CommandPrimitive>, CommandProps>(
+  function Command({ className, children, onActiveItemIdChange, ...props }, ref) {
+    const innerRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMemo(() => mergeRefs<HTMLDivElement>(ref, innerRef), [ref]);
+
+    return (
+      <CommandPrimitive
+        ref={mergedRef}
+        data-slot="command"
+        className={cn(
+          "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+          className,
+        )}
+        {...props}
+      >
+        <CommandActiveItemProvider rootRef={innerRef} onChange={onActiveItemIdChange}>
+          {children}
+        </CommandActiveItemProvider>
+      </CommandPrimitive>
+    );
+  },
+);
+
+/**
+ * The DOM `id` of the currently highlighted `CommandItem`. Must be called
+ * from a component rendered inside a `<Command>` tree; returns `undefined`
+ * when nothing is highlighted (or when there is no `<Command>` ancestor).
+ * Reports exactly the same value as `Command`'s `onActiveItemIdChange`
+ * callback, for a consumer that is already a descendant (rather than an
+ * external input above the tree).
+ */
+export function useCommandActiveItemId(): string | undefined {
+  const id = use(CommandActiveItemIdContext);
+  return id === NO_COMMAND_PROVIDER ? undefined : id;
+}
+
+export function CommandDialog({
+  children,
+  filter,
+  ...props
+}: ComponentPropsWithoutRef<typeof Dialog> & {
+  /** Custom cmdk ranking (e.g. strict substring instead of fuzzy). */
+  filter?: ComponentPropsWithoutRef<typeof CommandPrimitive>["filter"];
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command
+          filter={filter}
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3"
+        >
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = forwardRef<
+  ElementRef<typeof CommandPrimitive.Input>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(function CommandInput({ className, ...props }, ref) {
+  return (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+      <Search className="me-2 size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        ref={ref}
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+
+export const CommandList = forwardRef<
+  ElementRef<typeof CommandPrimitive.List>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(function CommandList({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.List
+      ref={ref}
+      data-slot="command-list"
+      className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+      {...props}
+    />
+  );
+});
+
+export const CommandEmpty = forwardRef<
+  ElementRef<typeof CommandPrimitive.Empty>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(function CommandEmpty(props, ref) {
+  return (
+    <CommandPrimitive.Empty
+      ref={ref}
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+});
+
+export const CommandGroup = forwardRef<
+  ElementRef<typeof CommandPrimitive.Group>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(function CommandGroup({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.Group
+      ref={ref}
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const CommandSeparator = forwardRef<
+  ElementRef<typeof CommandPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(function CommandSeparator({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.Separator
+      ref={ref}
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+});
+
+/**
+ * Props cmdk owns and applies AFTER a consumer spread — see the `Command`
+ * `onActiveItemIdChange` docblock. Passing any of these is a silent no-op;
+ * `CommandItem` warns once per key in development.
+ */
+const CMDK_OVERRIDDEN_ITEM_PROPS = ["id", "role", "aria-selected"] as const;
+const warnedAboutOverriddenItemProps = new Set<string>();
+
+export const CommandItem = forwardRef<
+  ElementRef<typeof CommandPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(function CommandItem({ className, ...props }, ref) {
+  if (process.env.NODE_ENV !== "production") {
+    for (const key of CMDK_OVERRIDDEN_ITEM_PROPS) {
+      if (key in props && !warnedAboutOverriddenItemProps.has(key)) {
+        warnedAboutOverriddenItemProps.add(key);
+        // oxlint-disable-next-line no-console
+        console.warn(
+          `CommandItem: "${key}" is assigned internally by cmdk, so the value you passed is ` +
+            'ignored. Use <Command onActiveItemIdChange> (or the "useCommandActiveItemId" hook) ' +
+            "to read the DOM id of the highlighted item instead — see " +
+            "packages/ui/src/components/command/command.tsx.",
+        );
+      }
+    }
+  }
+
+  return (
+    <CommandPrimitive.Item
+      ref={ref}
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export function CommandShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/src/components/command/index.ts

@@ -0,0 +1,13 @@
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandSeparator,
+  CommandItem,
+  CommandShortcut,
+  useCommandActiveItemId,
+  type CommandProps,
+} from "./command";

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

@@ -0,0 +1,183 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { ThemeProvider } from "@elabs-ai/components-tokens";
+import { Button } from "../button";
+import { Text } from "../typography";
+import { ConfirmDialog } from "./confirm-dialog";
+
+const meta = {
+  title: "Overlays/ConfirmDialog",
+  component: ConfirmDialog,
+  tags: ["autodocs"],
+  // Every story drives its own `open` state through a `render`; these args exist
+  // so the autodocs props table has real values to describe.
+  args: {
+    open: false,
+    onOpenChange: () => {},
+    title: "Delete this skill?",
+    description: "Removing it also deletes its 42 saved runs. This cannot be undone.",
+    confirmLabel: "Delete skill",
+    onConfirm: () => {},
+  },
+} satisfies Meta<typeof ConfirmDialog>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DestructiveConfirm({ loading = false }: { loading?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [deleted, setDeleted] = useState(false);
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>
+        Delete skill
+      </Button>
+      {deleted ? <Text variant="caption">Skill deleted</Text> : null}
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        tone="destructive"
+        loading={loading}
+        title="Delete this skill?"
+        description="Removing it also deletes its 42 saved runs. This cannot be undone."
+        confirmLabel="Delete skill"
+        onConfirm={() => {
+          setDeleted(true);
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+}
+
+/**
+ * The confirm tier. Initial focus lands on **Cancel**, not on the destructive
+ * action — asserted below rather than eyeballed, because that is the whole
+ * reason this component exists instead of a hand-built `Dialog`.
+ */
+export const Default: Story = {
+  render: () => <DestructiveConfirm />,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Delete skill" }));
+    const doc = within(canvasElement.ownerDocument.body);
+    const dialog = await doc.findByRole("alertdialog");
+    await waitFor(() => expect(within(dialog).getByText("Delete this skill?")).toBeVisible());
+
+    const cancel = within(dialog).getByRole("button", { name: "Cancel" });
+    const confirm = within(dialog).getByRole("button", { name: "Delete skill" });
+    await waitFor(() => expect(document.activeElement).toBe(cancel));
+    expect(document.activeElement).not.toBe(confirm);
+
+    // Cancel is FIRST in the DOM (so AT reads the safe action first) while the
+    // footer still paints the confirm action to its inline end.
+    expect(cancel.compareDocumentPosition(confirm) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(confirm.getBoundingClientRect().left).toBeGreaterThan(
+      cancel.getBoundingClientRect().left,
+    );
+
+    await userEvent.click(confirm);
+    await waitFor(() => expect(canvas.getByText("Skill deleted")).toBeVisible());
+  },
+};
+
+/** Escape cancels — the keyboard route to the safe outcome. */
+export const EscapeCancels: Story = {
+  render: () => <DestructiveConfirm />,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Delete skill" }));
+    const doc = within(canvasElement.ownerDocument.body);
+    await doc.findByRole("alertdialog");
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(doc.queryByRole("alertdialog")).toBeNull());
+    expect(canvas.queryByText("Skill deleted")).toBeNull();
+  },
+};
+
+/**
+ * The request is in flight. The action swaps in a spinner and reports
+ * `aria-busy`, but it is never pre-disabled — and repeat activations are
+ * swallowed, so a double-click cannot fire the deletion twice.
+ */
+export const Loading: Story = {
+  render: () => <DestructiveConfirm loading />,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Delete skill" }));
+    const doc = within(canvasElement.ownerDocument.body);
+    const dialog = await doc.findByRole("alertdialog");
+    const confirm = within(dialog).getByRole("button", { name: /delete skill/i });
+
+    await waitFor(() => expect(confirm).toHaveAttribute("aria-busy", "true"));
+    expect(confirm).not.toBeDisabled();
+    expect(within(dialog).getByRole("button", { name: "Cancel" })).not.toBeDisabled();
+
+    await userEvent.click(confirm);
+    expect(canvas.queryByText("Skill deleted")).toBeNull();
+  },
+};
+
+function NeutralConfirm() {
+  const [open, setOpen] = useState(false);
+  const [published, setPublished] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Publish version</Button>
+      {published ? <Text variant="caption">Version 4 published</Text> : null}
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Publish version 4?"
+        description="Everyone in the workspace gets the new prompt on their next run."
+        confirmLabel="Publish version"
+        onConfirm={() => {
+          setPublished(true);
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+}
+
+const openNeutral: Story["play"] = async ({ canvas, canvasElement, userEvent }) => {
+  await userEvent.click(canvas.getByRole("button", { name: "Publish version" }));
+  const doc = within(canvasElement.ownerDocument.body);
+  const dialog = await doc.findByRole("alertdialog");
+  const cancel = within(dialog).getByRole("button", { name: "Cancel" });
+  await waitFor(() => expect(document.activeElement).toBe(cancel));
+};
+
+/** A neutral, non-destructive confirmation — same contract, calmer action. */
+export const NeutralTone: Story = {
+  render: () => <NeutralConfirm />,
+  play: openNeutral,
+};
+
+/**
+ * The DESTRUCTIVE tone in dark — the second theme of the sweep, alongside
+ * light (`Default`).
+ *
+ * This story used to sweep the *neutral* tone here on purpose, because
+ * `--destructive-foreground` on `--destructive` measured 3.02:1 in dark —
+ * a token defect every `variant="destructive"` control in the theme shared,
+ * which this component could not fix. That token is now the theme's own
+ * warm-dark ink at 5.50:1 (#321), so the destructive tone finally gets a real
+ * dark sweep and the workaround is retired.
+ */
+export const DestructiveDark: Story = {
+  name: "Destructive — dark",
+  decorators: [
+    (Story) => (
+      <ThemeProvider defaultTheme="dark" storageKey={null}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  render: () => <DestructiveConfirm />,
+  play: Default.play,
+};
+
+export const DestructiveHighDecoration: Story = {
+  name: "Destructive — high decoration",
+  globals: { decoration: "10" },
+  render: () => <DestructiveConfirm />,
+  play: Default.play,
+};

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

@@ -0,0 +1,147 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ConfirmDialog } from "./confirm-dialog";
+import { Button } from "../button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle } from "../dialog";
+
+function open(props: Partial<React.ComponentProps<typeof ConfirmDialog>> = {}) {
+  const onConfirm = vi.fn();
+  const onOpenChange = vi.fn();
+  render(
+    <ConfirmDialog
+      open
+      onOpenChange={onOpenChange}
+      title="Delete this skill?"
+      description="Removing it also deletes its saved runs. This cannot be undone."
+      confirmLabel="Delete skill"
+      tone="destructive"
+      onConfirm={onConfirm}
+      {...props}
+    />,
+  );
+  return { onConfirm, onOpenChange };
+}
+
+describe("ConfirmDialog initial focus", () => {
+  // The headline AC: opening a confirmation must NOT put the keyboard on the
+  // destructive action. `AlertDialogContent` prevents its own open-autofocus and
+  // focuses the mounted Cancel — which is why ConfirmDialog always renders one.
+  it("lands focus on the safe action, not the destructive one", async () => {
+    open();
+    const cancel = await screen.findByRole("button", { name: "Cancel" });
+    await waitFor(() => expect(document.activeElement).toBe(cancel));
+    expect(document.activeElement).not.toBe(screen.getByRole("button", { name: "Delete skill" }));
+  });
+
+  // The negative twin — this documents WHY the named component exists. A plain
+  // `Dialog` focuses whatever comes first in the DOM, so a confirmation built
+  // from one is only ever safe by accident: reorder the footer and the keyboard
+  // now starts on the destructive action.
+  it("a plain Dialog focuses by DOM order — the destructive action when it is first", async () => {
+    render(
+      <Dialog open>
+        <DialogContent>
+          <DialogTitle>Delete this skill?</DialogTitle>
+          <DialogDescription>This cannot be undone.</DialogDescription>
+          <DialogFooter>
+            <Button variant="destructive">Delete skill</Button>
+            <Button variant="outline">Cancel</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+    const destructive = await screen.findByRole("button", { name: "Delete skill" });
+    await waitFor(() => expect(document.activeElement).toBe(destructive));
+  });
+
+  // …whereas ConfirmDialog cannot be mis-ordered: Cancel is always rendered, and
+  // Radix focuses IT rather than the first tabbable child.
+  it("keeps focus on Cancel even with extra focusable content above it", async () => {
+    open({
+      children: (
+        <a href="#docs" data-testid="learn-more">
+          What happens to my runs?
+        </a>
+      ),
+    });
+    const cancel = await screen.findByRole("button", { name: "Cancel" });
+    await waitFor(() => expect(document.activeElement).toBe(cancel));
+  });
+
+  it("uses role=alertdialog and is described by its description", async () => {
+    open();
+    const dialog = await screen.findByRole("alertdialog");
+    const describedBy = dialog.getAttribute("aria-describedby");
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(describedBy!)?.textContent).toContain("cannot be undone");
+  });
+});
+
+describe("ConfirmDialog actions", () => {
+  it("fires onConfirm once and leaves closing to the app", async () => {
+    const user = userEvent.setup();
+    const { onConfirm, onOpenChange } = open();
+
+    await user.click(await screen.findByRole("button", { name: "Delete skill" }));
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    // The app owns `open` — confirming must not close behind its back, which is
+    // what makes an async `loading` state possible.
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("cancel closes through onOpenChange(false) and calls onCancel", async () => {
+    const user = userEvent.setup();
+    const onCancel = vi.fn();
+    const { onOpenChange, onConfirm } = open({ onCancel });
+
+    await user.click(await screen.findByRole("button", { name: "Cancel" }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("Escape cancels", async () => {
+    const user = userEvent.setup();
+    const { onOpenChange, onConfirm } = open();
+    await screen.findByRole("alertdialog");
+
+    await user.keyboard("{Escape}");
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("labels the confirm action with the consequence, defaulting to Confirm", async () => {
+    open({ confirmLabel: undefined });
+    expect(await screen.findByRole("button", { name: "Confirm" })).toBeInTheDocument();
+  });
+});
+
+describe("ConfirmDialog loading", () => {
+  it("shows a spinner, reports aria-busy and stays ENABLED", async () => {
+    open({ loading: true });
+    const confirm = await screen.findByRole("button", { name: /delete skill/i });
+
+    expect(confirm).toHaveAttribute("aria-busy", "true");
+    // interaction-guidelines (Forms): a submit is never pre-disabled.
+    expect(confirm).not.toBeDisabled();
+    expect(screen.getByRole("status", { name: "Loading…" })).toBeInTheDocument();
+  });
+
+  it("ignores repeat activations while the request is in flight", async () => {
+    const user = userEvent.setup();
+    const { onConfirm } = open({ loading: true });
+
+    await user.click(await screen.findByRole("button", { name: /delete skill/i }));
+
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("never disables the safe action", async () => {
+    open({ loading: true });
+    expect(await screen.findByRole("button", { name: "Cancel" })).not.toBeDisabled();
+  });
+});