@tangle-network/ui 11.32.1 → 11.33.0

package/src/primitives/interaction-states.test.tsx

@@ -0,0 +1,285 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { compile } from "tailwindcss";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { focusFieldWithin } from "../lib/focus";
+import {
+  ixControl,
+  ixControlAfter,
+  ixControlSoft,
+  ixField,
+  ixRow,
+  ixSelected,
+  ixTabUnderline,
+} from "../lib/interaction";
+import { Button } from "./button";
+import { Card, CardDescription } from "./card";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Input, Textarea } from "./input";
+import { SegmentedControl } from "./segmented-control";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Tabs, TabsList, TabsTrigger } from "./tabs";
+
+/**
+ * Every primitive draws its interaction states from one helper in
+ * lib/interaction.ts (ROOT-SPEC section b). This is the cheap static guard:
+ * each primitive's rendered className carries every class of its helper, so a
+ * later edit or a tailwind-merge conflict cannot silently drop a state. The
+ * second suite compiles each helper with Tailwind to prove the classes emit the
+ * declarations and selectors the states need.
+ */
+afterEach(cleanup);
+beforeAll(() => {
+  // jsdom lacks the layout APIs Radix Select and Menu call while opening.
+  Element.prototype.scrollIntoView ??= vi.fn();
+  Element.prototype.hasPointerCapture ??= vi.fn(() => false);
+  Element.prototype.releasePointerCapture ??= vi.fn();
+});
+
+const tokens = (helper: string) => helper.split(/\s+/).filter(Boolean);
+const classes = (el: Element) => new Set(el.className.split(/\s+/));
+
+/** Every class of every helper is on the element. */
+function expectHelpers(el: Element, ...helpers: string[]) {
+  const have = classes(el);
+  for (const helper of helpers) {
+    for (const token of tokens(helper)) expect(have, `${el.tagName} is missing ${token}`).toContain(token);
+  }
+}
+
+/** The glow only strong controls get. */
+const HOVER_GLOW = "hover:shadow-[var(--ix-hover)]";
+/** focusRing, which every control keeps exactly. */
+const FOCUS_RING = [
+  "focus-visible:outline-1",
+  "focus-visible:outline-[var(--focus-border)]",
+  "focus-visible:ring-4",
+  "focus-visible:ring-[var(--focus-halo)]",
+];
+/** focusField's `:focus` part, which every field keeps exactly. */
+const FOCUS_FIELD = ["focus:outline-hidden", "focus:border-[var(--focus-border)]", "focus:ring-3", "focus:ring-[var(--focus-halo)]"];
+
+describe("each primitive renders its interaction helper", () => {
+  it.each(["default", "destructive", "secondary", "outline", "sandbox"] as const)(
+    "Button %s takes ixControl and keeps the focus ring",
+    (variant) => {
+      render(<Button variant={variant}>Go</Button>);
+      const button = screen.getByRole("button");
+      expectHelpers(button, ixControl);
+      for (const token of FOCUS_RING) expect(classes(button)).toContain(token);
+    },
+  );
+
+  it.each(["ghost", "link", "bare"] as const)("Button %s takes ixControlSoft and never the hover glow", (variant) => {
+    render(<Button variant={variant}>Go</Button>);
+    const button = screen.getByRole("button");
+    expectHelpers(button, ixControlSoft);
+    expect(classes(button)).not.toContain(HOVER_GLOW);
+    expect(classes(button)).not.toContain("hover:bg-muted");
+    for (const token of FOCUS_RING) expect(classes(button)).toContain(token);
+  });
+
+  it.each(["outline", "ghost", "bare"] as const)("a %s toggle Button (aria-pressed) adds ixControl and ixSelected", (variant) => {
+    render(<Button variant={variant} aria-pressed>Bold</Button>);
+    expectHelpers(screen.getByRole("button"), ixControl, ixSelected);
+  });
+
+  it("Input and Textarea take ixField with focusField's focus border and halo", () => {
+    render(<><Input aria-label="Name" /><Textarea aria-label="Notes" /></>);
+    for (const field of [screen.getByLabelText("Name"), screen.getByLabelText("Notes")]) {
+      expectHelpers(field, ixField);
+      for (const token of FOCUS_FIELD) expect(classes(field)).toContain(token);
+      expect(classes(field)).not.toContain("border-border");
+      expect(classes(field)).not.toContain("hover:border-[var(--border-strong)]");
+    }
+  });
+
+  it("focusFieldWithin is a field: ixField plus the has-focus ring, without the neutral hover", () => {
+    expect(tokens(focusFieldWithin)).toEqual(expect.arrayContaining(tokens(ixField)));
+    expect(focusFieldWithin).toContain("has-[");
+    expect(focusFieldWithin).toContain(":focus]:ring-[var(--focus-halo)]");
+    expect(tokens(focusFieldWithin)).not.toContain("hover:border-[var(--border-strong)]");
+    expect(tokens(focusFieldWithin)).not.toContain("border-border");
+  });
+
+  it("SelectTrigger is a field that keeps its well and an after-click ring while open", () => {
+    render(<Select><SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger></Select>);
+    const trigger = screen.getByRole("combobox");
+    expectHelpers(trigger, ixField, ixControlAfter);
+    for (const token of FOCUS_FIELD) expect(classes(trigger)).toContain(token);
+    expect(classes(trigger)).toContain("data-[state=open]:shadow-[var(--ix-after)]");
+    expect(classes(trigger)).toContain("data-[state=open]:border-[var(--ix-hover-border)]");
+    // The open state must not repaint the well.
+    expect([...classes(trigger)].filter((c) => c.startsWith("data-[state=open]:bg-"))).toEqual([]);
+  });
+
+  it("SelectContent paints the popover level and SelectItem takes ixRow", async () => {
+    render(
+      <Select open value="a">
+        <SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger>
+        <SelectContent><SelectItem value="a">Active</SelectItem><SelectItem value="b">Paused</SelectItem></SelectContent>
+      </Select>,
+    );
+    const listbox = await screen.findByRole("listbox");
+    const content = listbox.closest("[data-radix-select-viewport]")?.parentElement ?? listbox;
+    expect(classes(content)).toContain("bg-popover");
+    expect(classes(content)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
+    expect(classes(content)).not.toContain("bg-card");
+    for (const option of screen.getAllByRole("option")) {
+      expectHelpers(option, ixRow);
+      expect(classes(option)).not.toContain("focus:bg-[var(--accent-surface-strong)]");
+    }
+  });
+
+  it("DropdownMenu content paints the popover level and every item kind takes ixRow", async () => {
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Rename</DropdownMenuItem>
+          <DropdownMenuCheckboxItem checked>Pinned</DropdownMenuCheckboxItem>
+          <DropdownMenuRadioGroup value="a"><DropdownMenuRadioItem value="a">Newest</DropdownMenuRadioItem></DropdownMenuRadioGroup>
+          <DropdownMenuSub><DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger></DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    const menu = await screen.findByRole("menu");
+    expect(classes(menu)).toContain("bg-popover");
+    expect(classes(menu)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
+    expect(classes(menu)).not.toContain("bg-card");
+    const items = [
+      screen.getByRole("menuitem", { name: "Rename" }),
+      screen.getByRole("menuitemcheckbox", { name: "Pinned" }),
+      screen.getByRole("menuitemradio", { name: "Newest" }),
+      screen.getByRole("menuitem", { name: "Move to" }),
+    ];
+    for (const item of items) {
+      expectHelpers(item, ixRow);
+      expect(classes(item)).not.toContain("focus:bg-muted/50");
+    }
+  });
+
+  it("Card is a ladder level with a shadow; hover and interactive cards take ixControl", () => {
+    render(
+      <>
+        <Card data-testid="plain" />
+        <Card data-testid="hover" hover />
+        <Card data-testid="interactive" interactive />
+        <CardDescription>Guests, staff and vendors message your business on WhatsApp.</CardDescription>
+      </>,
+    );
+    const plain = screen.getByTestId("plain");
+    expect(plain).toHaveAttribute("data-slot", "card");
+    expect(classes(plain)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
+    expect(classes(plain)).not.toContain(HOVER_GLOW);
+    for (const id of ["hover", "interactive"]) {
+      const card = screen.getByTestId(id);
+      expectHelpers(card, ixControl);
+      expect(card).not.toHaveAttribute("interactive");
+      expect(classes(card)).not.toContain("hover:border-[var(--border-strong)]");
+    }
+    expect(classes(screen.getByText(/Guests, staff/))).toContain("line-clamp-2");
+  });
+
+  it("SegmentedControl row: a well track, soft items, the selected state on aria-checked", () => {
+    const options = [{ value: "a", label: "A–Z" }, { value: "b", label: "Recent" }];
+    render(<SegmentedControl aria-label="Sort" value="a" onValueChange={() => {}} options={options} />);
+    const track = screen.getByRole("radiogroup");
+    expect(classes(track)).toContain("bg-[var(--well)]");
+    expect(classes(track)).toContain("border-[var(--field-border)]");
+    expect(classes(track)).not.toContain("bg-card");
+    for (const radio of screen.getAllByRole("radio")) {
+      expectHelpers(radio, ixControlSoft, ixSelected);
+      for (const token of FOCUS_RING) expect(classes(radio)).toContain(token);
+      expect(classes(radio)).not.toContain("bg-[var(--accent-surface)]");
+    }
+  });
+
+  it("SegmentedControl tabs: the underline helper and a transparent border slot", () => {
+    const options = [{ value: "a", label: "Team" }, { value: "b", label: "Roles" }];
+    render(<SegmentedControl aria-label="Section" variant="tabs" value="a" onValueChange={() => {}} options={options} />);
+    for (const radio of screen.getAllByRole("radio")) {
+      expectHelpers(radio, ixTabUnderline);
+      expect(classes(radio)).toContain("border-transparent");
+      expect(classes(radio)).not.toContain("border-[var(--accent-text)]");
+    }
+  });
+
+  it.each([
+    ["default", [ixControlSoft, ixSelected]],
+    ["pills", [ixControlSoft, ixSelected]],
+    ["underline", [ixTabUnderline]],
+  ] as const)("TabsTrigger %s takes its helper", (variant, helpers) => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList variant={variant}>
+          <TabsTrigger variant={variant} value="a">Overview</TabsTrigger>
+          <TabsTrigger variant={variant} value="b">Activity</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+    for (const tab of screen.getAllByRole("tab")) {
+      expectHelpers(tab, ...helpers);
+      for (const token of FOCUS_RING) expect(classes(tab)).toContain(token);
+      expect([...classes(tab)]).not.toEqual(expect.arrayContaining(["data-[state=active]:bg-background"]));
+      expect(classes(tab)).not.toContain("data-[state=active]:border-primary");
+    }
+  });
+});
+
+describe("Tailwind compiles every interaction class to the state it names", () => {
+  /** A fresh compiler per class, so each class's CSS is read on its own. */
+  async function cssFor(candidate: string) {
+    const compiler = await compile("@tailwind utilities;");
+    return compiler.build([candidate]);
+  }
+
+  const all = [...new Set([ixControl, ixControlAfter, ixControlSoft, ixField, ixSelected, ixTabUnderline, ixRow].flatMap(tokens))];
+
+  it.each(all)("%s emits a rule", async (candidate) => {
+    expect(await cssFor(candidate)).toMatch(/\{[^}]*:[^}]*\}/);
+  });
+
+  it("composes the hover and press glows with the focus ring instead of replacing it", async () => {
+    for (const [candidate, value] of [
+      ["hover:shadow-[var(--ix-hover)]", "var(--ix-hover)"],
+      ["active:shadow-[var(--ix-press)]", "var(--ix-press)"],
+    ]) {
+      const css = await cssFor(candidate);
+      expect(css).toContain(`--tw-shadow: ${value}`);
+      expect(css).toContain("var(--tw-ring-shadow), var(--tw-shadow)");
+    }
+  });
+
+  it("keys the after-click ring on mouse focus only", async () => {
+    const css = await cssFor("focus:not-focus-visible:shadow-[var(--ix-after)]");
+    expect(css).toContain(":focus:not(:focus-visible)");
+    expect(css).toContain("--tw-shadow: var(--ix-after)");
+  });
+
+  it("reads the field fill and border from the surface context", async () => {
+    expect(await cssFor("bg-[var(--field-surface,var(--well))]")).toContain("background-color: var(--field-surface,var(--well))");
+    expect(await cssFor("border-[var(--field-border)]")).toContain("border-color: var(--field-border)");
+    expect(await cssFor("hover:border-[var(--ix-hover-border)]")).toContain("border-color: var(--ix-hover-border)");
+  });
+
+  it("draws selection on aria-pressed, aria-checked, aria-current, data-state on and active", async () => {
+    const css = await cssFor("aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]");
+    expect(css).toContain('[aria-current="page"]');
+    expect(css).toContain("inset 0 0 0 1px");
+    expect(await cssFor("aria-pressed:bg-[var(--ix-sel-bg)]")).toContain('[aria-pressed="true"]');
+    expect(await cssFor("aria-checked:bg-[var(--ix-sel-bg)]")).toContain('[aria-checked="true"]');
+    expect(await cssFor("data-[state=active]:bg-[var(--ix-sel-bg)]")).toContain('[data-state="active"]');
+    expect(await cssFor("data-[highlighted]:bg-[var(--ix-sel-bg)]")).toContain("[data-highlighted]");
+  });
+});

package/src/primitives/segmented-control.test.tsx

@@ -271,7 +271,9 @@ describe("SegmentedControl", () => {
     const radiogroup = screen.getByRole("radiogroup")
     expect(radiogroup.className).toContain("flex-wrap")
     expect(radiogroup.className).toContain("rounded-lg")
-    expect(radiogroup.className).toContain("bg-card")
+    // The row track is a field well, so it steps off whatever plane holds it.
+    expect(radiogroup.className).toContain("bg-[var(--well)]")
+    expect(radiogroup.className).toContain("border-[var(--field-border)]")
   })
 
   it("applies tabs variant classes with nowrap", () => {
@@ -287,7 +289,7 @@ describe("SegmentedControl", () => {
     expect(radiogroup.className).toContain("flex-nowrap")
     expect(radiogroup.className).toContain("overflow-x-auto")
     expect(radiogroup.className).toContain("border-b")
-    expect(radiogroup.className).not.toContain("bg-card")
+    expect(radiogroup.className).not.toContain("bg-[var(--well)]")
   })
 
   it("passes aria-label to the radiogroup", () => {

package/src/primitives/segmented-control.tsx

@@ -5,6 +5,7 @@ declare const process: { env: { NODE_ENV?: string } } | undefined
 import * as React from "react"
 import { touchTarget } from "../lib/control-presentation"
 import { focusRing, focusRingInset } from "../lib/focus"
+import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction"
 import { cn } from "../lib/utils"
 
 /**
@@ -19,7 +20,11 @@ import { cn } from "../lib/utils"
  * console warning fires when both are omitted.
  *
  * Design rules baked into the default variant:
- *   - Only the SELECTED segment shows a surface colour + accent text.
+ *   - The row track is a field well (`--well`, `--field-border`), so the
+ *     control reads as one inset group on whatever plane it sits on.
+ *   - Only the SELECTED segment shows a surface colour + accent text: the
+ *     shared selected state (`ixSelected`: tint plus an inset ring). A tab
+ *     shows it as an underline instead (`ixTabUnderline`).
  *   - Unselected segments have NO background — they're plain-text labels
  *     that darken on hover. This keeps the selected segment as the
  *     single visual anchor instead of the whole group competing with
@@ -160,7 +165,7 @@ export function SegmentedControl<T extends string = string>({
       className={cn(
         "flex gap-1",
         variant === "row" &&
-          "flex-wrap items-center rounded-lg border border-border bg-card p-1",
+          "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1",
         variant === "tabs" &&
           ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade],
         className,
@@ -186,19 +191,13 @@ export function SegmentedControl<T extends string = string>({
             }}
             className={cn(
               "relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]",
-              variant === "row" && ["rounded-md px-3 py-1.5", focusRing],
+              variant === "row" && ["rounded-md border border-transparent px-3 py-1.5", focusRing, ixControlSoft, ixSelected],
               // The strip scrolls horizontally, which would clip an outer ring.
-              variant === "tabs" && ["shrink-0 rounded-none border-b-2 -mb-px px-4 py-2", touchTarget, focusRingInset],
-              // Active styling is the ONLY styled state — unselected
-              // segments stay transparent on purpose so they don't
-              // compete visually with the selection.
-              active
-                ? variant === "row"
-                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)]"
-                  : "border-[var(--accent-text)] text-[var(--accent-text)]"
-                : variant === "row"
-                  ? "border border-transparent text-muted-foreground hover:text-foreground"
-                  : "border-transparent text-muted-foreground hover:text-foreground",
+              // The border-b-2 slot stays transparent: the underline is ixTabUnderline's inset shadow.
+              variant === "tabs" && ["shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2", touchTarget, focusRingInset, ixTabUnderline],
+              // Selection (aria-checked) is the only filled state; unselected
+              // segments stay transparent so they don't compete with it.
+              active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground",
             )}
           >
             <span>{option.label}</span>

package/src/primitives/select.tsx

@@ -4,6 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { controlSizes, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation";
+import { ixControlAfter, ixRow } from "../lib/interaction";
 import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
@@ -22,14 +23,18 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50",
+      "flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50",
+      // A field (ixField, via fieldPresentation) that keeps a soft ring after a
+      // mouse click, like every control.
       fieldPresentation,
+      ixControlAfter,
       fieldTouchText,
       // A long value ends in an ellipsis before the chevron: line-clamp cannot
       // ellipsize a nowrap line, so it clipped mid-glyph under the icon.
       "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>span]:text-left",
-      // The designed open state: accent border and surface while the menu is up.
-      "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
+      // Open: the after-click ring stays while the menu is up, and the field
+      // keeps its well fill so it still reads as the field it is.
+      "data-[state=open]:border-[var(--ix-hover-border)] data-[state=open]:shadow-[var(--ix-after)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
       size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size],
       className,
     )}
@@ -86,7 +91,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-[var(--shadow-dropdown)] 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
         position === "popper" &&
           "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
         className,
@@ -129,7 +134,8 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-[var(--accent-surface-strong)] focus:text-foreground data-[state=checked]:bg-[var(--accent-surface-strong)] data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-[color,background-color,box-shadow] focus:text-foreground data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      ixRow,
       className,
     )}
     {...props}

package/src/primitives/tabs.tsx

@@ -1,6 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 import { focusRing } from "../lib/focus";
+import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction";
 import { cn } from "../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
@@ -34,13 +35,16 @@ const TabsTrigger = React.forwardRef<
     variant?: "default" | "pills" | "underline";
   }
 >(({ className, variant = "default", ...props }, ref) => {
+  // Selection is the shared selected state (lib/interaction.ts): a tint and an
+  // inset ring for default and pills, a 2px underline for underline, whose
+  // border-b-2 slot stays transparent.
   const variants = {
     default:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm`,
+      `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 ${ixControlSoft} ${ixSelected}`,
     pills:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted`,
+      `inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:text-muted-foreground ${ixControlSoft} ${ixSelected}`,
     underline:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground`,
+      `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground ${ixTabUnderline}`,
   };
 
   return (

package/src/run/run-group.tsx

@@ -64,6 +64,7 @@ import {
   type OpenUIAction,
   type OpenUIComponentNode,
 } from "../openui/openui-artifact-renderer";
+import { TRANSCRIPT_TEXT } from "../chat/transcript-text";
 
 // ---------------------------------------------------------------------------
 // Default branding
@@ -427,7 +428,7 @@ export const RunGroup = memo(
                 if (part.type === "text" && !part.synthetic && part.text.trim()) {
                   return (
                     <div key={key} className="px-0.5">
-                      <Markdown className="tangle-prose text-[15px] leading-7 text-[var(--text-primary)]">
+                      <Markdown className={`tangle-prose ${TRANSCRIPT_TEXT} text-[var(--text-primary)]`}>
                         {part.text}
                       </Markdown>
                     </div>
@@ -570,7 +571,7 @@ export const RunGroup = memo(
                     <SyntheticText text={part.text} />
                   ) : (
                     <div className="px-1 py-0.5">
-                      <Markdown className="tangle-prose text-[15px] leading-7">{part.text}</Markdown>
+                      <Markdown className={`tangle-prose ${TRANSCRIPT_TEXT}`}>{part.text}</Markdown>
                     </div>
                   );
                 }

package/src/utils/index.ts

@@ -15,3 +15,12 @@ export {
   focusRing,
   focusRingInset,
 } from '../lib/focus';
+export {
+  ixControl,
+  ixControlAfter,
+  ixControlSoft,
+  ixField,
+  ixRow,
+  ixSelected,
+  ixTabUnderline,
+} from '../lib/interaction';