@tangle-network/ui 11.17.0 → 11.20.0

package/src/primitives/checkbox.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * A two- or three-state checkbox. An indeterminate state, controlled
+ * (`checked`) or uncontrolled (`defaultChecked`), draws a dash.
+ * Pair it with a `Label` through `id`/`htmlFor`; `aria-invalid` paints the
+ * danger hairline.
+ */
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer group/checkbox inline-grid size-4 shrink-0 cursor-pointer place-content-center rounded-[4px] border border-[var(--border-strong)] bg-transparent transition-[background-color,border-color,box-shadow] duration-150 ease-out",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "aria-invalid:border-[var(--surface-danger-border)]",
+      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      focusRing,
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
+      {/* Both glyphs render and the Root's Radix state picks one, so a
+          controlled or uncontrolled indeterminate box draws the same dash. */}
+      <Check aria-hidden="true" className="size-3.5 group-data-[state=indeterminate]/checkbox:hidden" strokeWidth={3} />
+      <Minus aria-hidden="true" className="hidden size-3.5 group-data-[state=indeterminate]/checkbox:block" strokeWidth={3} />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/primitives/collapsible.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+/**
+ * Unstyled show/hide region. The trigger carries `aria-expanded` and
+ * `data-state`, so a chevron can rotate with
+ * `group-data-[state=open]:rotate-90` without local state.
+ */
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/src/primitives/context-menu.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Right-click (and long-press) menu with the same surface and item styles as
+ * `DropdownMenu`. Anything reachable here must also be reachable from a
+ * visible control, because touch and keyboard users rarely open it.
+ */
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const menuSurface = cn(
+  "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+  "data-[state=closed]:animate-out data-[state=open]:animate-in",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "motion-reduce:animate-none",
+);
+
+const menuItem =
+  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(menuItem, "data-[state=open]:bg-muted/50", inset && "pl-8", className)}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.SubContent ref={ref} className={cn(menuSurface, className)} {...props} />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content ref={ref} className={cn(menuSurface, className)} {...props} />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+/** `tone="destructive"` paints the label and icon with the danger text token. */
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    tone?: "default" | "destructive";
+  }
+>(({ className, inset, tone = "default", ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      menuItem,
+      tone === "destructive" && "text-destructive focus:bg-destructive/10 focus:text-destructive",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(menuItem, "pl-8", className)}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem ref={ref} className={cn(menuItem, "pl-8", className)} {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="!size-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("ml-auto text-muted-foreground text-xs tracking-widest", className)} {...props} />
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+};

package/src/primitives/icon-tile.stories.tsx

@@ -62,10 +62,10 @@ export const Sizes: Story = {
   render: () => (
     <BothThemes>
       <div className="flex items-end gap-3">
-        {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
           <IconTile key={size} size={size} name="Tangle Network" />
         ))}
-        {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
           <IconTile key={`g-${size}`} size={size} tone="cyan" icon={<Globe />} />
         ))}
       </div>

package/src/primitives/icon-tile.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { Globe } from "lucide-react";
+import { describe, expect, it } from "vitest";
+import { IconTile, initialsOf } from "./icon-tile";
+
+describe("IconTile", () => {
+  it.each([
+    ["xs", "size-5"],
+    ["sm", "size-6"],
+    ["md", "size-8"],
+    ["lg", "size-10"],
+    ["xl", "size-16"],
+    ["2xl", "size-20"],
+  ] as const)("renders size %s as %s", (size, cls) => {
+    const { container } = render(<IconTile size={size} name="Tangle Network" />);
+    expect(container.firstElementChild).toHaveClass(cls);
+  });
+
+  it("scales the glyph with the large sizes", () => {
+    const { container } = render(<IconTile size="2xl" tone="cyan" icon={<Globe />} />);
+    expect(container.firstElementChild?.className).toContain("[&_svg]:size-10");
+  });
+
+  it("shows initials and is decorative without a label", () => {
+    const { container } = render(<IconTile size="xl" name="Acme Robotics" />);
+    const tile = container.firstElementChild;
+    expect(tile).toHaveTextContent("AR");
+    expect(tile).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("is an image with an accessible name when labelled", () => {
+    const { getByRole } = render(<IconTile size="xl" name="Acme" label="Acme" />);
+    expect(getByRole("img", { name: "Acme" })).toBeInTheDocument();
+  });
+
+  it("keeps an emoji whole in the initials", () => {
+    expect(initialsOf("🦊")).toBe("🦊");
+  });
+});

package/src/primitives/icon-tile.tsx

@@ -18,7 +18,12 @@ import { type CategoryTone, TONE_CLASSES, toneFor } from "./tone";
 export interface IconTileProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   /** Defaults to a tone derived from `name`, or violet when there is no name. */
   tone?: CategoryTone;
-  size?: "xs" | "sm" | "md" | "lg";
+  /**
+   * `xs` to `lg` (20 to 40px) sit in rows and cards. `xl` (64px) and `2xl`
+   * (80px) are for a page or profile header, where the tile is the thing's
+   * face rather than a list marker.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   src?: string;
   icon?: React.ReactNode;
   /** The thing's name. Supplies the initials and the derived tone. */
@@ -32,6 +37,8 @@ const SIZE = {
   sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
   md: "size-8 rounded-md text-xs [&_svg]:size-4",
   lg: "size-10 rounded-lg text-sm [&_svg]:size-5",
+  xl: "size-16 rounded-2xl text-xl [&_svg]:size-8",
+  "2xl": "size-20 rounded-2xl text-2xl [&_svg]:size-10",
 } as const;
 
 /** Up to two initials: the first letters of the first two words, or of the one word. */

package/src/primitives/index.ts

@@ -24,6 +24,44 @@ export {
   DialogDescription,
 } from "./dialog";
 
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./context-menu";
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./popover";
+
+export { Slider } from "./slider";
+
 export { Input, Textarea } from "./input";
 export type { InputProps, TextareaProps } from "./input";
 
@@ -87,6 +125,25 @@ export { Progress } from "./progress";
 
 export { Switch } from "./switch";
 
+export { Checkbox } from "./checkbox";
+
+export { Separator } from "./separator";
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
 export { Skeleton, SkeletonCard, SkeletonTable } from "./skeleton";
 
 export { TextShimmer } from "./text-shimmer";

package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChevronRight } from 'lucide-react'
+import { useState } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog'
+import { Button } from './button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible'
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from './context-menu'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+import { Slider } from './slider'
+
+const meta: Meta = {
+  title: 'Primitives/Popover, Collapsible, AlertDialog, ContextMenu, Slider',
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj
+
+const LONG_NAME = 'customer-onboarding-agent-with-a-very-long-project-name-that-never-wraps-on-its-own'
+
+export const PopoverWithLongContent: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Project details</Button>
+      </PopoverTrigger>
+      <PopoverContent className="[overflow-wrap:anywhere]">
+        <p className="font-medium text-sm">{LONG_NAME}</p>
+        <p className="mt-1 text-muted-foreground text-sm">Created by a teammate. Last deployed from the develop branch.</p>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const CollapsibleSection: Story = {
+  render: () => (
+    <Collapsible className="w-80">
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 text-sm">
+        <ChevronRight className="size-4 transition-transform group-data-[state=open]:rotate-90" />
+        Advanced settings
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-2 text-muted-foreground text-sm">
+        Retry each failed step once before the run is marked failed.
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+}
+
+export const DestructiveConfirm: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete project</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete {LONG_NAME}?</AlertDialogTitle>
+          <AlertDialogDescription>Its sandboxes stop and its deployments are removed.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction tone="destructive">Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}
+
+export const FileContextMenu: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-24 w-72 items-center justify-center rounded-lg border border-border border-dashed text-muted-foreground text-sm">
+        Right-click this file
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuItem>
+          Rename <ContextMenuShortcut>F2</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Copy path</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem tone="destructive">Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+}
+
+function RangeDemo() {
+  const [value, setValue] = useState([20, 80])
+  return (
+    <div className="w-72 space-y-2">
+      <Slider value={value} onValueChange={setValue} thumbLabels={['Minimum', 'Maximum']} />
+      <p className="text-muted-foreground text-sm">
+        {value[0]} to {value[1]}
+      </p>
+    </div>
+  )
+}
+
+export const Sliders: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Slider aria-label="Temperature" defaultValue={[40]} className="w-72" />
+      <RangeDemo />
+      <Slider aria-label="Disabled" defaultValue={[60]} disabled className="w-72" />
+    </div>
+  ),
+}

package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.test.tsx

@@ -0,0 +1,165 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./context-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Slider } from "./slider";
+
+const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
+
+describe("Popover", () => {
+  it("opens from its trigger on a token surface and closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Filters</PopoverTrigger>
+        <PopoverContent>Only failed runs</PopoverContent>
+      </Popover>,
+    );
+    await user.click(screen.getByRole("button", { name: "Filters" }));
+    const content = await screen.findByRole("dialog");
+    expect(content).toHaveTextContent("Only failed runs");
+    expect(content.className).toContain("bg-card");
+    expect(content.className).not.toMatch(PALETTE);
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+});
+
+describe("Collapsible", () => {
+  it("reports its expanded state on the trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Details</CollapsibleTrigger>
+        <CollapsibleContent>Hidden body</CollapsibleContent>
+      </Collapsible>,
+    );
+    const trigger = screen.getByRole("button", { name: "Details" });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByText("Hidden body")).toBeNull();
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("Hidden body")).toBeVisible();
+  });
+});
+
+describe("AlertDialog", () => {
+  it("focuses Cancel on open so a destructive action is never under Enter", async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn();
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Delete project</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
+          <AlertDialogDescription>Its sandboxes stop.</AlertDialogDescription>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction tone="destructive" onClick={onDelete}>
+            Delete
+          </AlertDialogAction>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+    await user.click(screen.getByRole("button", { name: "Delete project" }));
+    const dialog = await screen.findByRole("alertdialog", { name: "Delete this project?" });
+    expect(dialog).toHaveAccessibleDescription("Its sandboxes stop.");
+    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus();
+    const action = screen.getByRole("button", { name: "Delete" });
+    expect(action.className).toContain("bg-destructive");
+    await user.click(action);
+    expect(onDelete).toHaveBeenCalledOnce();
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+  });
+});
+
+describe("ContextMenu", () => {
+  it("opens on contextmenu and runs the chosen item", async () => {
+    const onRename = vi.fn();
+    render(
+      <ContextMenu>
+        <ContextMenuTrigger>File row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem onSelect={onRename}>Rename</ContextMenuItem>
+          <ContextMenuItem tone="destructive">Delete</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText("File row"));
+    const menu = await screen.findByRole("menu");
+    expect(menu.className).toContain("bg-card");
+    expect(screen.getByRole("menuitem", { name: "Delete" }).className).toContain("text-destructive");
+    fireEvent.click(screen.getByRole("menuitem", { name: "Rename" }));
+    expect(onRename).toHaveBeenCalledOnce();
+  });
+
+  it("portals submenu content out of the clipped parent menu", async () => {
+    const user = userEvent.setup();
+    render(
+      <ContextMenu>
+        <ContextMenuTrigger>File row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              <ContextMenuItem>Archive</ContextMenuItem>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText("File row"));
+    const parent = await screen.findByRole("menu");
+    await user.hover(screen.getByRole("menuitem", { name: "Move to" }));
+    await user.keyboard("{ArrowRight}");
+    const archive = await screen.findByRole("menuitem", { name: "Archive" });
+    expect(parent.contains(archive)).toBe(false);
+  });
+});
+
+describe("Slider", () => {
+  beforeAll(() => {
+    // Radix measures the thumb with ResizeObserver, which jsdom lacks.
+    globalThis.ResizeObserver ??= class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  });
+
+  it("renders one labelled thumb per value", () => {
+    render(<Slider defaultValue={[20, 80]} thumbLabels={["Minimum", "Maximum"]} />);
+    const thumbs = screen.getAllByRole("slider");
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0]).toHaveAccessibleName("Minimum");
+    expect(thumbs[1]).toHaveAttribute("aria-valuenow", "80");
+  });
+
+  it("moves with the keyboard and reports the value", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Slider aria-label="Budget" defaultValue={[50]} step={10} onValueChange={onValueChange} />);
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Budget");
+    screen.getByRole("slider").focus();
+    await user.keyboard("{ArrowRight}");
+    expect(onValueChange).toHaveBeenLastCalledWith([60]);
+  });
+});