@elabs-ai/components-ui 4.0.0

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

@@ -0,0 +1,146 @@
+"use client";
+
+import { type MouseEvent, type ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../alert-dialog";
+import { buttonVariants } from "../button";
+import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
+import { Spinner } from "../spinner";
+
+export interface ConfirmDialogProps {
+  /** Controlled open state — the app owns it. */
+  open: boolean;
+  /** Fires on cancel, Escape, and any other Radix dismissal. */
+  onOpenChange: (open: boolean) => void;
+  /** What is about to happen, as a question or a statement. */
+  title: ReactNode;
+  /**
+   * The consequence, spelled out. **Required**: `AlertDialogContent` is
+   * inaccessible to screen-reader users without a description (Radix warns), and
+   * a confirmation whose only text is its title cannot state what is at stake.
+   */
+  description: ReactNode;
+  /**
+   * The confirm action's label. States the CONSEQUENCE ("Delete skill"), never
+   * "OK" — a label that names the outcome is the last chance to catch a mistake.
+   * Defaults to a generic "Confirm", which you should almost always replace.
+   */
+  confirmLabel?: ReactNode;
+  /** The safe action's label. Defaults to "Cancel". */
+  cancelLabel?: ReactNode;
+  /** Runs when the confirm action is activated. */
+  onConfirm: () => void;
+  /** Runs when the safe action is activated (in addition to `onOpenChange`). */
+  onCancel?: () => void;
+  /** Visual tone of the CONFIRM action only. The dialog chrome never changes. */
+  tone?: "default" | "destructive";
+  /**
+   * The confirm request is in flight: the action swaps its label for a spinner
+   * and reports `aria-busy`. It deliberately stays ENABLED
+   * (`.claude/rules/interaction-guidelines.md`, Forms — a submit is never
+   * pre-disabled); repeat activations are ignored while it is set.
+   */
+  loading?: boolean;
+  /** Extra body content between the description and the actions. */
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * A destructive/irreversible confirmation (#341).
+ *
+ * Built on `AlertDialog`, not `Dialog`, and that is the entire point of it
+ * existing as a named component rather than a recipe: `AlertDialogContent`
+ * prevents its own open-autofocus and focuses the mounted `AlertDialogCancel`
+ * instead, so **initial focus lands on the safe action** — but only if a Cancel
+ * is actually mounted, which a hand-rolled confirmation routinely forgets (and a
+ * plain `Dialog` cannot do at all). `ConfirmDialog` always renders one, so the
+ * wrong choice is unrepresentable. It also inherits `AlertDialog`'s refusal to
+ * dismiss on an outside click.
+ *
+ * Cancel is FIRST in the DOM so assistive tech reads the safe action first;
+ * `AlertDialogFooter`'s `flex-col-reverse sm:flex-row sm:justify-end` still
+ * paints the confirm action bottom-right on every breakpoint.
+ *
+ * **Confirming does not close the dialog** — `onConfirm` fires and the app sets
+ * `open={false}` when it is ready (immediately for a synchronous action, after
+ * the request for an async one, which is what makes `loading` coherent).
+ * Cancelling closes through `onOpenChange(false)` as usual.
+ *
+ * ```tsx
+ * <ConfirmDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   tone="destructive"
+ *   title={`Delete ${skill.name}?`}
+ *   description={`Removing it also deletes its ${skill.runs} saved runs. This cannot be undone.`}
+ *   confirmLabel={`Delete ${skill.name}`}
+ *   onConfirm={() => { deleteSkill(); setOpen(false); }}
+ * />
+ * ```
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  tone = "default",
+  loading = false,
+  children,
+  className,
+}: ConfirmDialogProps) {
+  const { t } = useLocale();
+
+  function handleConfirm(event: MouseEvent<HTMLButtonElement>) {
+    // Radix's Action is a `Dialog.Close`; preventing the default stops it
+    // closing so the app stays in charge of `open` (and an in-flight request
+    // keeps its spinner on screen).
+    event.preventDefault();
+    if (loading) return;
+    onConfirm();
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent data-slot="confirm-dialog" className={className}>
+        <AlertDialogHeader>
+          <AlertDialogTitle data-slot="confirm-dialog-title">{title}</AlertDialogTitle>
+          <AlertDialogDescription data-slot="confirm-dialog-description">
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {children}
+        <AlertDialogFooter>
+          <AlertDialogCancel data-slot="confirm-dialog-cancel" onClick={onCancel}>
+            {cancelLabel ?? t("ui.confirmDialog.cancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            data-slot="confirm-dialog-confirm"
+            className={cn(tone === "destructive" && buttonVariants({ variant: "destructive" }))}
+            aria-busy={loading || undefined}
+            onClick={handleConfirm}
+          >
+            {/* `text-current` so the spinner inherits the action's foreground
+                token instead of `Spinner`'s muted default, which would drop
+                below 3:1 on a filled button. */}
+            {loading ? <Spinner className="text-current" label={t("loading")} /> : null}
+            {confirmLabel ?? t("ui.confirmDialog.confirm")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/confirm-dialog/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from "./confirm-dialog";
+export type { ConfirmDialogProps } from "./confirm-dialog";

package/src/components/context-menu/context-menu.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "./context-menu";
+const meta = {
+  title: "Overlays/ContextMenu",
+  component: ContextMenu,
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      description: "Controlled open state of the context menu.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    defaultOpen: {
+      description: "Uncontrolled initial open state.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    onOpenChange: {
+      description: "Callback when the open state changes.",
+      control: false,
+      table: { category: "Events" },
+    },
+    modal: {
+      description: "Whether the context menu is modal (traps focus). Default true.",
+      control: "boolean",
+      table: { category: "Behaviour" },
+    },
+    dir: {
+      description: "Reading direction for the context menu.",
+      control: { type: "select" },
+      options: ["ltr", "rtl"],
+      table: { category: "Behaviour" },
+    },
+  },
+} satisfies Meta<typeof ContextMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-32 w-72 items-center justify-center rounded-md border border-dashed text-body text-muted-foreground">
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Back</ContextMenuItem>
+        <ContextMenuItem>Reload</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Inspect</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+  // Right-clicks the trigger to open the portalled context menu and confirms
+  // the menu items are visible, then presses Escape to dismiss.
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByText("Right-click here");
+    await userEvent.pointer({ target: trigger, keys: "[MouseRight]" });
+    const body = within(canvasElement.ownerDocument.body);
+    const menu = await body.findByRole("menu");
+    await waitFor(() => expect(within(menu).getByText("Back")).toBeVisible());
+    await waitFor(() => expect(within(menu).getByText("Reload")).toBeVisible());
+    await userEvent.keyboard("{Escape}");
+  },
+};

package/src/components/context-menu/context-menu.tsx

@@ -0,0 +1,172 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes,
+} from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const ContextMenu = ContextMenuPrimitive.Root;
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+export const ContextMenuSubTrigger = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ms-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+});
+
+export const ContextMenuSubContent = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuContent = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
+
+export const ContextMenuItem = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { inset?: boolean }
+>(function ContextMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuCheckboxItem = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(function ContextMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={checked}
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors duration-fast focus:bg-accent",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Check className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});
+
+export const ContextMenuRadioItem = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors duration-fast focus:bg-accent",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Circle className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+});
+
+export const ContextMenuLabel = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn(
+        "px-2 py-1.5 text-xs font-semibold text-muted-foreground",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuSeparator = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator
+      ref={ref}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+});
+
+export function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/src/components/context-menu/index.ts

@@ -0,0 +1,16 @@
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuGroup,
+  ContextMenuSub,
+  ContextMenuRadioGroup,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+} from "./context-menu";

package/src/components/copyable-value/copyable-value.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { CopyableValue } from "./copyable-value";
+
+const meta = {
+  title: "Display/CopyableValue",
+  component: CopyableValue,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Shown short, copied exact. Numbers are formatted compact across the library — this keeps the unrounded figure one click (or one Enter) away.",
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      description: "The exact text written to the clipboard.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    children: {
+      description: "What the reader sees. Defaults to `value`.",
+      table: { category: "Content" },
+    },
+    hint: {
+      description: 'Screen-reader hint appended to the visible text. Default: "Copy exact value".',
+      control: "text",
+      table: { category: "Content" },
+    },
+    resetAfterMs: {
+      description: 'ms the "Copied" confirmation stays. Default: 1500.',
+      control: "number",
+      table: { category: "Behavior" },
+    },
+  },
+} satisfies Meta<typeof CopyableValue>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** With no children the exact value is also what is shown. */
+export const Default: Story = {
+  args: { value: "50012102.632741" },
+};
+
+/** The usual case: a compact display over an unrounded clipboard payload. */
+export const Compacted: Story = {
+  args: { value: "50012102.632741", children: "50M" },
+};
+
+/** Inline inside a sentence — it reads as text, not as a link. */
+export const InProse: Story = {
+  args: { value: "1500000" },
+  render: (args) => (
+    <p className="text-body text-foreground">
+      Revenue reached <CopyableValue {...args}>1.5M</CopyableValue> across the quarter.
+    </p>
+  ),
+};
+
+/** The hint is part of the accessible name, so voice control can say what it reads. */
+export const CustomHint: Story = {
+  args: { value: "0.9612", children: "96.1%", hint: "Copy unrounded rate" },
+};
+
+/**
+ * Keyboard path: the value is a real button, so it is a tab stop and Enter copies.
+ * jsdom/Chromium may deny clipboard permission — the assertion is on the control's
+ * reachability and name, not on the clipboard contents.
+ */
+export const KeyboardReachable: Story = {
+  args: { value: "50012102.632741", children: "50M" },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /50M Copy exact value/i });
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+  },
+};

package/src/components/copyable-value/copyable-value.test.tsx

@@ -0,0 +1,128 @@
+/**
+ * copyable-value.test.tsx — "shown short, copied exact" is only defensible if
+ * the exact value is genuinely reachable, so the locks here are: the clipboard
+ * gets the UNROUNDED string, the visible text stays inside the accessible name
+ * (WCAG 2.5.3), the live region exists before the copy (ARIA22), and a missing
+ * clipboard degrades instead of throwing.
+ *
+ * `userEvent.setup()` installs its OWN clipboard stub, so every clipboard stub
+ * below is installed AFTER setup — otherwise the spy is silently replaced.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CopyableValue } from "./copyable-value";
+
+/** Install a clipboard stub for one test; returns the writeText spy. */
+function stubClipboard(impl: () => Promise<void> = () => Promise.resolve()) {
+  const writeText = vi.fn(impl);
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText },
+    configurable: true,
+    writable: true,
+  });
+  return writeText;
+}
+
+describe("CopyableValue", () => {
+  it("shows the children and copies the exact value", async () => {
+    const writeText = stubClipboard();
+    render(<CopyableValue value="50012102.632741">50M</CopyableValue>);
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveTextContent("50M");
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith("50012102.632741");
+    });
+  });
+
+  it("falls back to the exact value as its own display", () => {
+    render(<CopyableValue value="1234" />);
+    expect(screen.getByRole("button")).toHaveTextContent("1234");
+  });
+
+  it("keeps the visible text inside the accessible name (WCAG 2.5.3)", () => {
+    render(<CopyableValue value="1500000">1.5M</CopyableValue>);
+    // The hint is APPENDED, never substituted — a voice-control user must be
+    // able to say what they read.
+    expect(screen.getByRole("button", { name: "1.5M Copy exact value" })).toBeInTheDocument();
+  });
+
+  it("accepts a custom hint", () => {
+    render(
+      <CopyableValue hint="Copy unrounded rate" value="0.9612">
+        96.1%
+      </CopyableValue>,
+    );
+    expect(screen.getByRole("button", { name: "96.1% Copy unrounded rate" })).toBeInTheDocument();
+  });
+
+  it("mounts the live region before the copy so it can be announced (ARIA22)", async () => {
+    stubClipboard();
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    const status = screen.getByRole("status");
+    expect(status).toBeInTheDocument();
+    expect(status).toHaveTextContent("");
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("Copied");
+    });
+  });
+
+  it("marks the copied state on the control", async () => {
+    stubClipboard();
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    const button = screen.getByRole("button");
+    expect(button).not.toHaveAttribute("data-copied");
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(button).toHaveAttribute("data-copied");
+    });
+  });
+
+  it("is a real tab stop and copies on Enter", async () => {
+    const user = userEvent.setup();
+    const writeText = stubClipboard();
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    await user.tab();
+    expect(screen.getByRole("button")).toHaveFocus();
+    await user.keyboard("{Enter}");
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith("42");
+    });
+  });
+
+  it("lets a consumer's onClick pre-empt the copy", () => {
+    const writeText = stubClipboard();
+    render(
+      <CopyableValue
+        onClick={(event) => {
+          event.preventDefault();
+        }}
+        value="42"
+      >
+        42
+      </CopyableValue>,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("degrades where there is no clipboard (insecure context / old browser)", async () => {
+    Object.defineProperty(navigator, "clipboard", { value: undefined, configurable: true });
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("");
+    });
+  });
+});