@elabs-ai/components-ui 4.2.0 → 5.1.0

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

@@ -19,7 +19,7 @@ export const DropdownMenuSubTrigger = forwardRef<
       ref={ref}
       data-slot="dropdown-menu-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -41,7 +41,7 @@ export const DropdownMenuSubContent = forwardRef<
         ref={ref}
         data-slot="dropdown-menu-sub-content"
         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",
+          "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover 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}
@@ -59,7 +59,11 @@ export const DropdownMenuRadioItem = forwardRef<
       ref={ref}
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
+        // A leading glyph in a checkbox/radio row sizes and spaces exactly like one in a plain
+        // `DropdownMenuItem`. Direct children only: the indicator's own glyph sits inside the
+        // `start-2` span and keeps its own size.
+        "[&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       {...props}
@@ -84,7 +88,11 @@ export const DropdownMenuCheckboxItem = forwardRef<
       checked={checked}
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
+        // A leading glyph in a checkbox/radio row sizes and spaces exactly like one in a plain
+        // `DropdownMenuItem`. Direct children only: the indicator's own glyph sits inside the
+        // `start-2` span and keeps its own size.
+        "[&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       {...props}
@@ -109,7 +117,7 @@ export const DropdownMenuContent = forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover",
           "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,
@@ -129,7 +137,7 @@ export const DropdownMenuItem = forwardRef<
       ref={ref}
       className={cn(
         "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast",
-        "focus:bg-accent focus:text-accent-foreground",
+        "focus:bg-accent focus:text-accent-foreground focus-ring-inset",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         inset && "ps-8",

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

@@ -182,4 +182,51 @@ describe("ExpandDialog", () => {
       "0",
     );
   });
+
+  /*
+   * The field must be an even inset on all four sides. `DialogContent`'s
+   * `gap-4` used to leak into its header/body/footer grid (a band under the
+   * header and one below the body, where no footer is), and `DialogBody`'s
+   * `-m-1` focus gutter pushed the field under the clipped sides — 24px above
+   * and below the panes against 8px beside them.
+   */
+  it("insets the panes evenly, with no dialog gap or body gutter", () => {
+    renderOpen(
+      <ExpandDialog title="T" detail={<p>context</p>}>
+        <p>view</p>
+      </ExpandDialog>,
+    );
+    const content = document.querySelector('[data-slot="dialog-content"]')!.className.split(" ");
+    const body = document.querySelector('[data-slot="dialog-body"]')!.className.split(" ");
+    expect(content).toContain("gap-0");
+    expect(content).not.toContain("gap-4");
+    expect(body).toContain("m-0");
+    expect(body).not.toContain("-m-1");
+  });
+
+  /*
+   * The view is a raised surface (`shadow-ring-md`) that fills its track, so a
+   * clipping panes grid cut its shadow and hairline on every edge but the one
+   * facing the detail pane. The field's padding is the room the shadow paints
+   * into; only the field clips.
+   */
+  it("lets the raised view's shadow paint past the panes grid", () => {
+    const { rerender } = renderOpen(
+      <ExpandDialog title="T" detail={<p>context</p>}>
+        <p>view</p>
+      </ExpandDialog>,
+    );
+    const panes = () =>
+      document.querySelector('[data-slot="expand-dialog-panes"]')!.className.split(" ");
+    expect(panes()).not.toContain("overflow-hidden");
+
+    rerender(
+      <Dialog open>
+        <ExpandDialog title="T">
+          <p>view</p>
+        </ExpandDialog>
+      </Dialog>,
+    );
+    expect(panes()).not.toContain("overflow-hidden");
+  });
 });

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

@@ -44,7 +44,15 @@ import { useLocale } from "../locale-provider";
  * for `--card-detail-size`. The one pair of properties drives whichever axis is
  * active: columns when the detail is beside, rows when it is below.
  */
-export const expandDialogPanesVariants = cva("grid min-h-0 gap-3 overflow-hidden", {
+/*
+ * No `overflow-hidden` on the grid: every track is `minmax(0, …)` and every
+ * pane is `min-h-0 min-w-0 overflow-auto`, so nothing can spill — and the
+ * raised view fills its track, so a clipping grid cut its shadow and hairline
+ * on every edge but the one facing the detail pane. The field around the
+ * panes (`ExpandDialog`'s body) is the clip; its padding is where the shadow
+ * paints.
+ */
+export const expandDialogPanesVariants = cva("grid min-h-0 gap-3", {
   variants: {
     detailPlacement: { side: "", bottom: "" },
     /**
@@ -189,7 +197,7 @@ export const ExpandDialogPanes = forwardRef<HTMLDivElement, ExpandDialogPanesPro
         <div
           ref={ref}
           data-slot="expand-dialog-panes"
-          className={cn("grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden", className)}
+          className={cn("grid min-h-0 grid-rows-[minmax(0,1fr)]", className)}
           style={style}
           {...props}
         >
@@ -278,7 +286,10 @@ export const ExpandDialogContent = forwardRef<
   ElementRef<typeof DialogContent>,
   ExpandDialogContentProps
 >(function ExpandDialogContent({ className, ...props }, ref) {
-  return <DialogContent ref={ref} size="full" className={cn("p-0", className)} {...props} />;
+  // `gap-0`: the header and body butt together. `DialogContent`'s `gap-4`
+  // would otherwise open a band under the header AND one below the body — its
+  // body regime is a 3-row grid, and the empty footer track still gets a gap.
+  return <DialogContent ref={ref} size="full" className={cn("gap-0 p-0", className)} {...props} />;
 });
 
 export interface ExpandDialogProps
@@ -359,10 +370,14 @@ export const ExpandDialog = forwardRef<ElementRef<typeof DialogContent>, ExpandD
       >
         <ExpandDialogHeader actions={actions} description={description} title={title} />
         {/* `tabIndex={-1}`: the panes below are the real scroll owners and take
-            their own tab stops, so the body must not add a third. */}
+            their own tab stops, so the body must not add a third. `m-0` drops
+            `DialogBody`'s `-m-1` focus-ring gutter: this body never scrolls and
+            its `p-3` already clears any ring, while the negative margin tucked
+            the field under the clipped dialog edge — 8px beside the panes
+            against 12px above and below. */}
         <DialogBody
           tabIndex={-1}
-          className={cn("overflow-hidden bg-background p-3", fieldClassName)}
+          className={cn("m-0 overflow-hidden bg-background p-3", fieldClassName)}
         >
           <ExpandDialogPanes
             className={cn("h-full", panesClassName)}

package/src/components/hover-card/hover-card.tsx

@@ -16,7 +16,7 @@ export const HoverCardContent = forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-64 rounded-md bg-popover p-4 text-popover-foreground shadow-ring-md outline-none",
+        "z-50 w-64 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none",
         "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",
         className,
       )}

package/src/components/input/input.stories.tsx

@@ -129,6 +129,21 @@ export const InAmbientTextContainer: Story = {
       );
     };
 
+    /*
+     * `Input` animates its colour, and reduced motion only shortens that to
+     * 0.01ms: until the browser draws its next frame, a read straight after a
+     * flip still returns the previous theme's ink. Measure the resting colour.
+     * A transition that a newer one replaces rejects instead of finishing, so
+     * wait until none is left rather than for the first batch.
+     */
+    const settle = async () => {
+      for (;;) {
+        const running = [reference, nested, muted].flatMap((input) => input.getAnimations());
+        if (running.length === 0) return;
+        await Promise.allSettled(running.map((animation) => animation.finished));
+      }
+    };
+
     const host = themeHost(nested);
     const original = host.getAttribute("data-theme");
     /*
@@ -148,11 +163,13 @@ export const InAmbientTextContainer: Story = {
     try {
       host.setAttribute("data-theme", "light");
       await assertThemeApplied("light");
+      await settle();
       const lightInk = getComputedStyle(nested).color;
       await assertMatchesReference();
 
       host.setAttribute("data-theme", "dark");
       await assertThemeApplied("dark");
+      await settle();
       await assertMatchesReference();
       // The two themes must actually resolve to different ink, or "checked in
       // both themes" is a claim about an attribute nobody read.

package/src/components/input/input.tsx

@@ -14,7 +14,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       className={cn(
         "flex h-control w-full rounded-control border border-input bg-input-background text-foreground px-3 py-1 text-body shadow-input transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
         "placeholder:text-muted-foreground",
-        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
         // One disabled mechanism (opacity fade), matching every `Button`
         // variant — `disabled:bg-muted` used to also fire here, stacking a
         // fill swap on top of the fade (#286); `disabled:border-border` stays,

package/src/components/input-group/input-group.stories.tsx

@@ -150,12 +150,49 @@ export const CompoundFocusIndicator: Story = {
 };
 
 /**
- * `--tw-ring-shadow` is a `0 0 0 calc(<offset> + <width>) <colour>` string; the
- * painted reach is that `calc`. Reading it (rather than `boxShadow`) keeps the
- * measurement independent of whatever elevation rung the element also carries.
+ * The compound ring's outer reach, in pixels.
+ *
+ * Since ADR 0027 Amendment 2 (commit 779c040b), `--tw-ring-shadow` is a
+ * three-segment composite (`@utility focus-ring-static`, themes.css) whose
+ * SPECIFIED value keeps its nested `var(--focus-ring-offset)` /
+ * `var(--focus-ring-width)` references literal when read directly via
+ * `getPropertyValue("--tw-ring-shadow")` — custom-property computed values do
+ * not substitute var()s referencing other custom properties, so the old
+ * `calc(<offset> + <width>)` regex never matches the new shape and always
+ * reported a false `0`. `getComputedStyle().boxShadow`, by contrast, is a
+ * genuine standard property: its computed value fully resolves every
+ * `var()`/`calc()`, elevation rung included. The ring is always the widest
+ * NON-inset layer in that resolved list — the "gap" layer only reaches
+ * `offset`, the elevation rungs (`shadow-input` et al.) carry zero spread,
+ * and only the ring layer reaches `offset + width` (+ any call-site
+ * `ring-offset-*`) — so its spread is the measurement this helper returns.
  */
 function ringSpread(style: CSSStyleDeclaration): number {
-  const shadow = style.getPropertyValue("--tw-ring-shadow");
-  const match = /calc\(\s*([\d.]+)px\s*\+\s*([\d.]+)px\s*\)/.exec(shadow);
-  return match ? parseFloat(match[1]) + parseFloat(match[2]) : 0;
+  const layers = splitShadowLayers(style.boxShadow);
+  const spreads = layers
+    .filter((layer) => !/\binset\b/.test(layer))
+    .map((layer) => {
+      const lengths = [...layer.matchAll(/(-?[\d.]+)px/g)].map((match) => Number(match[1]));
+      return lengths.length ? lengths[lengths.length - 1]! : 0;
+    });
+  return spreads.length ? Math.max(...spreads) : 0;
+}
+
+/** Split a computed `box-shadow` into its comma-separated layers, ignoring commas nested inside a colour function's parens (`color(srgb 0 0 0 / 0.1)`, `oklch(…)`). */
+function splitShadowLayers(shadowValue: string): string[] {
+  const layers: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const char of shadowValue) {
+    if (char === "(") depth += 1;
+    if (char === ")") depth -= 1;
+    if (char === "," && depth === 0) {
+      layers.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) layers.push(current.trim());
+  return layers;
 }

package/src/components/input-group/input-group.tsx

@@ -28,8 +28,11 @@ export const inputGroupVariants = cva(
     variants: {
       variant: {
         // The form-field look: the strong `--input` boundary is the field's
-        // sole structural cue, so it stays on the strong rung.
-        outline: "border border-input shadow-input",
+        // sole structural cue, so it stays on the strong rung. Focus lands on
+        // the inner control, not this wrapper, so the border swap reads its
+        // `has-[:focus-visible]` state instead of its own `focus-visible`.
+        outline:
+          "border border-input shadow-input has-[[data-slot=input-group-control]:focus-visible]:border-input-focus",
         // The composer look (#194, research 08 §C.1/§D): a soft fill with the
         // focus-within ring carrying focus — NO hard border. Separation comes
         // from the fill (the chat footer already draws its own `border-t`).

package/src/components/input-otp/input-otp.tsx

@@ -47,8 +47,10 @@ export const InputOTPSlot = forwardRef<
         // The OTP slot IS the field's focus indicator: the real focused element is
         // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It
         // therefore carries the compound indicator (#67) — the state is JS-driven, so
-        // it is the `-static` flavour rather than a `:focus-visible` one.
-        isActive && "z-10 focus-ring-static",
+        // it is the `-static` flavour rather than a `:focus-visible` one, and the
+        // border-color swap is a plain class (twMerge drops `border-input` for it)
+        // rather than a `focus-visible:` variant.
+        isActive && "z-10 focus-ring-static border-input-focus",
         className,
       )}
       {...props}

package/src/components/install-tabs/index.ts

@@ -0,0 +1,8 @@
+export {
+  InstallTabs,
+  DEFAULT_INSTALL_TABS_LABELS,
+  type InstallTabsSelectOption,
+  type InstallTabsHostTab,
+  type InstallTabsLabels,
+  type InstallTabsProps,
+} from "./install-tabs";

package/src/components/install-tabs/install-tabs.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { InstallTabs, type InstallTabsHostTab, type InstallTabsSelectOption } from "./install-tabs";
+
+const PACKAGE_OPTIONS: InstallTabsSelectOption[] = [
+  {
+    id: "ai-assistant",
+    label: "AI assistant",
+    command: "pnpm add @elabs-ai/components-ai @elabs-ai/components-ui",
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    command:
+      "pnpm add @elabs-ai/components-charts @elabs-ai/components-data @elabs-ai/components-ui",
+  },
+  {
+    id: "data-app",
+    label: "Data app",
+    command: "pnpm add @elabs-ai/components-data @elabs-ai/components-ui",
+  },
+];
+
+const BLOCK_OPTIONS: InstallTabsSelectOption[] = [
+  {
+    id: "kpi-movers-01",
+    label: "KPI movers",
+    command: "npx shadcn@latest add https://elabs-ai.com/r/kpi-movers-01.json",
+  },
+  {
+    id: "app-shell",
+    label: "App shell",
+    command: "npx shadcn@latest add https://elabs-ai.com/r/app-shell.json",
+  },
+];
+
+const HOST_TABS: InstallTabsHostTab[] = [
+  {
+    id: "claude-code",
+    label: "Claude Code",
+    commands: [
+      { label: "Add marketplace", command: "/plugin marketplace add mreimitz/elabs-components" },
+      { label: "Install plugin", command: "/plugin install brand-ui" },
+    ],
+  },
+  {
+    id: "cursor",
+    label: "Cursor",
+    commands: [
+      {
+        label: "Add MCP server",
+        command: '{ "mcpServers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }',
+      },
+    ],
+  },
+];
+
+const PROMPT =
+  "Use brand-ui — MCP at https://elabs-ai.com/mcp, docs at /llms.txt — to build a dashboard for our support queue.";
+
+const meta = {
+  title: "Display/InstallTabs",
+  component: InstallTabs,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Every way to bring brand-ui into a project, one tab strip: `pnpm add` by archetype, copy-own a registry block, per-host MCP setup, and an agent prompt.",
+      },
+    },
+  },
+  args: {
+    packageOptions: PACKAGE_OPTIONS,
+    blockOptions: BLOCK_OPTIONS,
+    hostTabs: HOST_TABS,
+    prompt: PROMPT,
+    onCommandCopy: fn(),
+    onPromptCopy: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-2xl">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InstallTabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Picking the "dashboard" archetype swaps the shown command. */
+export const ArchetypeSelected: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("combobox", { name: "Archetype" }));
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(await body.findByRole("option", { name: "Dashboard" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText(
+          "pnpm add @elabs-ai/components-charts @elabs-ai/components-data @elabs-ai/components-ui",
+        ),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** The `Copy-own` tab lists blocks and shows the `shadcn add` command for the selection. */
+export const CopyOwnTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("tab", { name: "Copy-own" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText("npx shadcn@latest add https://elabs-ai.com/r/kpi-movers-01.json"),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** A host tab shows its own commands, top to bottom. */
+export const HostTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("tab", { name: "Cursor" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText('{ "mcpServers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }'),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** The prompt tab's text is read-only and contains the MCP URL and `/llms.txt`. */
+export const PromptTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("tab", { name: "Prompt" }));
+    const textbox = canvas.getByDisplayValue(PROMPT);
+    await expect(textbox).toHaveAttribute("readonly");
+  },
+};

package/src/components/install-tabs/install-tabs.test.tsx

@@ -0,0 +1,120 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { InstallTabs, type InstallTabsHostTab, type InstallTabsSelectOption } from "./install-tabs";
+
+const PACKAGE_OPTIONS: InstallTabsSelectOption[] = [
+  { id: "ai-assistant", label: "AI assistant", command: "pnpm add @elabs-ai/components-ai" },
+  { id: "dashboard", label: "Dashboard", command: "pnpm add @elabs-ai/components-charts" },
+];
+
+const BLOCK_OPTIONS: InstallTabsSelectOption[] = [
+  { id: "kpi-movers-01", label: "KPI movers", command: "npx shadcn@latest add kpi-movers-01.json" },
+];
+
+const HOST_TABS: InstallTabsHostTab[] = [
+  {
+    id: "claude-code",
+    label: "Claude Code",
+    commands: [{ label: "Install plugin", command: "/plugin install brand-ui" }],
+  },
+];
+
+const PROMPT = "Use brand-ui — MCP at https://elabs-ai.com/mcp, docs at /llms.txt.";
+
+describe("InstallTabs", () => {
+  it("renders its data-slot and defaults to the packages tab", () => {
+    const { container } = render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    expect(container.querySelector('[data-slot="install-tabs"]')).not.toBeNull();
+    expect(screen.getByText("pnpm add @elabs-ai/components-ai")).toBeInTheDocument();
+  });
+
+  it("honours a controlled package value", () => {
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+        packageValue="dashboard"
+        onPackageValueChange={() => {}}
+      />,
+    );
+    expect(screen.getByText("pnpm add @elabs-ai/components-charts")).toBeInTheDocument();
+  });
+
+  it("switches to the copy-own tab and shows the block command", async () => {
+    const user = userEvent.setup();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Copy-own" }));
+    expect(await screen.findByText("npx shadcn@latest add kpi-movers-01.json")).toBeInTheDocument();
+  });
+
+  it("switches to a host tab and shows its commands", async () => {
+    const user = userEvent.setup();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Claude Code" }));
+    expect(await screen.findByText("/plugin install brand-ui")).toBeInTheDocument();
+  });
+
+  it("shows the read-only prompt on the prompt tab", async () => {
+    const user = userEvent.setup();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Prompt" }));
+    expect(await screen.findByDisplayValue(PROMPT)).toHaveAttribute("readonly");
+  });
+
+  it("copies the prompt to the clipboard", async () => {
+    // `userEvent.setup()` attaches its OWN clipboard stub to `navigator` — define ours
+    // AFTER setup, or `userEvent`'s overwrites it and the assertion below sees 0 calls.
+    const user = userEvent.setup();
+    const writeText = vi.fn(() => Promise.resolve());
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+      writable: true,
+    });
+    const onPromptCopy = vi.fn();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+        onPromptCopy={onPromptCopy}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Prompt" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Copy prompt" }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(PROMPT));
+    expect(onPromptCopy).toHaveBeenCalledWith(true);
+  });
+});