@tangle-network/ui 11.44.1 → 11.46.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @tangle-network/ui
 
+## 11.46.0
+
+### Minor Changes
+
+- 7924be7: SegmentedControl (row): the selected segment is a raised thumb on one quiet well instead of a tint inside an inset ring, the track uses the hairline border token, and the control is 36px tall so it sits inside a 44px toolbar with air above and below.
+
+### Patch Changes
+
+- 9bd1487: RunRowShell shows its description (the file, command or query) at every width, truncated, instead of hiding it below 640px, where a transcript read as a column of bare verbs ("Read", "Read", "Shell").
+
+## 11.45.0
+
+### Minor Changes
+
+- 14a7a9e: FileTabs: the active tab paints the card plane and covers the strip's baseline, so it joins the content below it; the close button sits inside each tab; long names are cut in the middle so their end and extension stay readable. The strip is a `tablist` with one tab stop: arrow keys, Home and End move the selection, and Delete closes the focused tab. New `label` names the list (default "Open files"). A host whose own border is the baseline passes `shadow-none`, as FileArtifactPane does.
+
+### Patch Changes
+
+- 4678ab2: The canonical spine (`:root`, `.dark`, `.light`, `data-theme` `dark`, `light`
+  and `tangle-dark`) has a real surface ladder. `--hsl-raised` is now the spine's
+  L3 plane and `--hsl-raised-2` its L4 plane, instead of both repeating the card,
+  and every adjacent plane and well is at least 4.4 OKLCH L apart (gated in
+  `surface-ladder.test.ts`):
+  
+  - Dark: page `#0a0a14`, card `#191826`, raised `#252237`, raised-2 and popover
+    `#312e47`. A field in a raised card takes the card colour instead of the page's
+    near-black well, and dark cards and menus carry the 1px top highlight
+    (`--edge-highlight`).
+  - Light: page `#eceef3`, card white, raised `#edeff4`, raised-2 white. A field in
+    a raised card is white.
+  
+  `--hsl-secondary` and `--hsl-popover` moved with the ladder (dark `#221f33` to
+  `#252237`, `#2c2942` to `#312e47`; light `#f2f3f8` to `#edeff4`). Named themes
+  other than Hospitality keep their flat ladder.
+  
+  One hairline: `--border-subtle` and `--border-default` now alias `--hsl-border`
+  in the spine, so every divider, card edge and table rule renders one colour. The
+  dark hairline is `#37364a` (1.5:1 on the card, as documented; it measured 1.2:1).
+  `--glass-border-hover` now follows `--border-hover`.
+  
+  The `--font-size-xs`, `-sm`, `-base` and `-lg` tokens now equal Tailwind's
+  `text-xs`, `text-sm`, `text-base` and `text-lg` (12, 14, 16 and 18px; they were
+  11, 12, 15 and 16px), so `sm` means 14px in CSS and in a class. `text-eyebrow`,
+  the `Heading` eyebrow and subsection variants and `.tangle-api-meta` keep their
+  rendered sizes on the new steps. Code that relied on the old values reads
+  `--font-size-xs` for 12px captions and `--font-size-base` for 16px emphasis.
+
 ## 11.44.1
 
 ### Patch Changes

package/dist/files/file-artifact-pane.js

@@ -21,7 +21,8 @@ function FileArtifactPane({ filename, content, blobUrl, mimeType, size, onClose,
 		tabs,
 		activeId: activeTabId,
 		onSelect: onTabSelect,
-		onClose: onTabClose
+		onClose: onTabClose,
+		className: "shadow-none"
 	}) : void 0;
 	const isEditableMarkdown = (detectFileFormat(filename, mimeType) === "markdown" || (path ? detectFileFormat(path, mimeType) === "markdown" : false)) && editor?.enabled;
 	const headerActions = onDownload || onClose ? /* @__PURE__ */ jsxs(Fragment$1, { children: [onDownload && /* @__PURE__ */ jsx("button", {

package/dist/files/file-tabs.d.ts

@@ -1,5 +1,9 @@
 /**
- * FileTabs — tab bar for open files in the preview panel.
+ * FileTabs: one tab per open file. The strip sits on its host's chrome plane and
+ * draws its baseline as an inset shadow (a host whose border is the baseline
+ * passes `shadow-none`); the active tab paints the card plane over it, so it
+ * joins the content below. A long name is cut in the middle, keeping its end
+ * and extension. Arrow keys, Home and End move the selection; Delete closes.
  */
 export interface FileTabData {
   id: string;
@@ -12,6 +16,8 @@ export interface FileTabsProps {
   activeId?: string;
   onSelect: (id: string) => void;
   onClose: (id: string) => void;
+  /** Accessible name of the tab list. Defaults to "Open files". */
+  label?: string;
   className?: string;
 }
-export declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): import("react").JSX.Element | null;
+export declare function FileTabs({ tabs, activeId, onSelect, onClose, label, className }: FileTabsProps): import("react").JSX.Element | null;

package/dist/files/file-tabs.js

@@ -1,10 +1,16 @@
-import { focusRing, focusRingInset } from "../lib/focus.js";
+import { controlMotion } from "../lib/motion.js";
+import { focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileCode, FileSpreadsheet, FileText, X } from "lucide-react";
 // src/files/file-tabs.tsx
 /**
-* FileTabs — tab bar for open files in the preview panel.
+* FileTabs: one tab per open file. The strip sits on its host's chrome plane and
+* draws its baseline as an inset shadow (a host whose border is the baseline
+* passes `shadow-none`); the active tab paints the card plane over it, so it
+* joins the content below. A long name is cut in the middle, keeping its end
+* and extension. Arrow keys, Home and End move the selection; Delete closes.
 */
 function getTabIcon(name) {
 	const ext = name.split(".").pop()?.toLowerCase() || "";
@@ -12,33 +18,92 @@ function getTabIcon(name) {
 	if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet;
 	return FileCode;
 }
-function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
+/** A long name keeps its extension and the characters before it after the ellipsis. */
+function splitName(name) {
+	if (name.length <= 18) return [name, ""];
+	const dot = name.lastIndexOf(".");
+	const keep = Math.min(Math.max((dot > 0 ? name.length - dot : 0) + 6, 8), 12);
+	return [name.slice(0, -keep), name.slice(-keep)];
+}
+function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", className }) {
+	const stripRef = useRef(null);
+	useEffect(() => {
+		const strip = stripRef.current;
+		const tab = strip?.querySelector("[aria-selected=\"true\"]")?.parentElement;
+		if (strip && tab) strip.scrollLeft = Math.min(tab.offsetLeft, Math.max(strip.scrollLeft, tab.offsetLeft + tab.offsetWidth - strip.clientWidth));
+	}, [activeId, tabs.length]);
 	if (tabs.length === 0) return null;
+	const tabButtons = () => [...stripRef.current?.querySelectorAll("[role=\"tab\"]") ?? []];
+	const onKeyDown = (event) => {
+		const at = tabButtons().indexOf(event.target);
+		const last = tabs.length - 1;
+		const next = {
+			ArrowRight: at === last ? 0 : at + 1,
+			ArrowLeft: at === 0 ? last : at - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (at < 0 || next === void 0 && event.key !== "Delete") return;
+		event.preventDefault();
+		if (next !== void 0) {
+			tabButtons()[next]?.focus();
+			onSelect(tabs[next].id);
+			return;
+		}
+		onClose(tabs[at].id);
+		requestAnimationFrame(() => (tabButtons().find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabButtons().at(-1))?.focus());
+	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center border-b border-border bg-background overflow-x-auto", className),
+		ref: stripRef,
+		role: "tablist",
+		"aria-label": label,
+		onKeyDown,
+		className: cn("relative flex h-10 min-w-0 items-end gap-1 overflow-x-auto px-2 shadow-[inset_0_-1px_0_hsl(var(--border))] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className),
 		children: tabs.map((tab) => {
 			const isActive = tab.id === activeId;
 			const Icon = getTabIcon(tab.name);
+			const [head, tail] = splitName(tab.name);
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn("group flex items-center border-r border-border shrink-0", isActive ? "bg-card text-foreground border-b-2 border-b-primary" : "text-muted-foreground hover:bg-muted/50"),
+				title: tab.path,
+				className: cn("group relative flex h-[calc(100%-0.375rem)] max-w-72 shrink-0 items-center rounded-t-lg border border-b-0 text-sm", controlMotion, isActive ? "border-border bg-card text-foreground" : "border-transparent text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground"),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
+					role: "tab",
+					"aria-selected": isActive,
+					"aria-label": tab.dirty ? `${tab.name}, unsaved changes` : tab.name,
+					tabIndex: isActive || !activeId && tab === tabs[0] ? 0 : -1,
 					onClick: () => onSelect(tab.id),
-					className: cn("flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground", focusRingInset),
+					className: cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset),
 					children: [
-						/* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0" }),
-						/* @__PURE__ */ jsx("span", {
-							className: "max-w-[120px] truncate",
-							children: tab.name
+						/* @__PURE__ */ jsx(Icon, {
+							"aria-hidden": true,
+							className: "size-3.5 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "overflow-hidden text-ellipsis whitespace-pre",
+								children: head
+							}), tail && /* @__PURE__ */ jsx("span", {
+								className: "shrink-0 whitespace-pre",
+								children: tail
+							})]
 						}),
-						tab.dirty && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-primary" })
+						tab.dirty && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]"
+						})
 					]
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
+					tabIndex: -1,
 					"aria-label": `Close ${tab.name}`,
 					onClick: () => onClose(tab.id),
-					className: cn("mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 group-hover:opacity-100", focusRing),
-					children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+					className: cn("mr-1.5 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground", controlMotion, !isActive && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": true,
+						className: "size-3"
+					})
 				})]
 			}, tab.id);
 		})

package/dist/primitives/heading.js

@@ -7,8 +7,8 @@ const VARIANT_CLASS = {
 	hero: "font-display font-bold text-foreground text-[length:var(--font-size-hero,2.5rem)] leading-[1.1] tracking-[var(--tracking-tight,-0.02em)]",
 	page: "font-display font-semibold text-foreground text-[length:var(--font-size-3xl,1.875rem)] leading-[var(--line-height-heading,1.15)] tracking-[var(--tracking-tight,-0.02em)]",
 	section: "font-display font-semibold text-foreground text-[length:var(--font-size-xl,1.25rem)] leading-[1.3] tracking-[var(--tracking-snug,-0.01em)]",
-	subsection: "font-semibold text-foreground text-[length:var(--font-size-lg,1rem)] leading-[1.4]",
-	eyebrow: "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-sm,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]"
+	subsection: "font-semibold text-foreground text-[length:var(--font-size-base,1rem)] leading-[1.4]",
+	eyebrow: "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-xs,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]"
 };
 const DEFAULT_TAG = {
 	display: "h1",

package/dist/primitives/segmented-control.d.ts

@@ -11,10 +11,13 @@ import * as React from "react";
  * console warning fires when both are omitted.
  *
  * Design rules baked into the default variant:
- *   - 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
+ *   - The row track is one quiet well (`--well`, the hairline `border`), so
+ *     the control reads as one inset group on whatever plane it sits on, and
+ *     it is compact (36px) so it sits inside a 44px toolbar with air above
+ *     and below instead of touching its edges.
+ *   - Only the SELECTED segment shows a surface: a raised thumb (the card
+ *     colour with a hairline and a soft shadow) with accent text. No ring is
+ *     drawn around the track's segments, so the group never stacks rings. 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

package/dist/primitives/segmented-control.js

@@ -7,6 +7,8 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 // src/primitives/segmented-control.tsx
+/** The row variant's selected segment: a raised thumb on the well, not a tint inside a ring. */
+const rowThumb = "aria-checked:bg-card aria-checked:border-border aria-checked:shadow-[0_1px_2px_rgb(0_0_0/0.08)] hover:aria-checked:bg-card";
 /** Size of the edge chevron, in px. The selected option is kept this far
 *  (plus the strip's own padding) from an edge so the chevron never covers it. */
 const SCROLL_CUE_SIZE = 32;
@@ -123,7 +125,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		ref: stripRef,
 		onKeyDown: handleKeyDown,
 		onScroll: measureOverflow,
-		className: cn("relative flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
+		className: cn("relative flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-[var(--well)] p-0.5", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
 		children: [
 			overflow.start && /* @__PURE__ */ jsx(ScrollCue, {
 				side: "start",
@@ -146,10 +148,10 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 						if (!active) onValueChange(option.value);
 					},
 					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 border border-transparent px-3 py-1.5",
+						"rounded-md border border-transparent px-3 py-1",
 						"focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0",
 						"hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]",
-						"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
+						rowThumb
 					], variant === "tabs" && [
 						"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
 						"pointer-coarse:min-h-11 pointer-coarse:min-w-11",

package/dist/primitives/sidebar-drop-zone.js

@@ -64,7 +64,7 @@ function SidebarDropZone({ onDrop, accept, disabled, title = "Drop files here",
 		onDragLeave: handleDragLeave,
 		onDragOver: handleDragOver,
 		onDrop: handleDrop,
-		className: cn("rounded-lg border-2 border-dashed transition-all duration-150", isVisible ? "p-4" : "p-0 border-transparent", dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]" : "", disabled && "opacity-50 pointer-events-none", className),
+		className: cn("rounded-lg border-2 border-dashed transition-all duration-150", isVisible ? "p-4" : "p-0 border-transparent", dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover,hsl(var(--accent)))]" : "", disabled && "opacity-50 pointer-events-none", className),
 		children: isVisible && /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center gap-2 text-center",
 			children: [

package/dist/run/run-row-shell.js

@@ -76,7 +76,7 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 									children: title
 								}),
 								description ? /* @__PURE__ */ jsx("span", {
-									className: cn("hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline", descriptionMono && "font-mono"),
+									className: cn("min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground", descriptionMono && "font-mono"),
 									children: description
 								}) : null,
 								/* @__PURE__ */ jsxs("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.44.1",
+  "version": "11.46.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -166,7 +166,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.27.1",
+    "@tangle-network/brand": "^1.29.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/files/file-artifact-pane.tsx

@@ -90,6 +90,7 @@ export function FileArtifactPane({
       activeId={activeTabId}
       onSelect={onTabSelect}
       onClose={onTabClose}
+      className="shadow-none"
     />
   ) : undefined;
   const isMarkdown =

package/src/files/file-tabs.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+import { FileTabs, type FileTabData } from "./file-tabs";
+
+const TABS: FileTabData[] = [
+  { id: "a", name: "records-graph-20261026a.md", path: "pages/graphs/records-graph-20261026a.md" },
+  { id: "b", name: "parity.json", path: "run/parity.json", dirty: true },
+  { id: "c", name: "README.md", path: "README.md" },
+];
+
+function Editor() {
+  const [tabs, setTabs] = useState(TABS);
+  const [active, setActive] = useState("a");
+  return (
+    <FileTabs
+      tabs={tabs}
+      activeId={active}
+      onSelect={setActive}
+      onClose={(id) => {
+        const at = tabs.findIndex((tab) => tab.id === id);
+        const rest = tabs.filter((tab) => tab.id !== id);
+        setTabs(rest);
+        if (id === active && rest.length) setActive(rest[Math.min(at, rest.length - 1)]!.id);
+      }}
+    />
+  );
+}
+
+describe("FileTabs", () => {
+  it("is one tab list with a single tab stop, named by each full file name", () => {
+    render(<Editor />);
+    const list = screen.getByRole("tablist", { name: "Open files" });
+    const tabs = within(list).getAllByRole("tab");
+    expect(tabs.map((tab) => tab.getAttribute("aria-label"))).toEqual([
+      "records-graph-20261026a.md",
+      "parity.json, unsaved changes",
+      "README.md",
+    ]);
+    expect(tabs.map((tab) => tab.tabIndex)).toEqual([0, -1, -1]);
+    expect(screen.getByRole("tab", { name: "records-graph-20261026a.md" })).toHaveAttribute("aria-selected", "true");
+    expect(tabs[0]!.textContent).toBe("records-graph-20261026a.md");
+  });
+
+  it("moves the selection with arrow keys, Home and End, and closes the focused tab with Delete", () => {
+    render(<Editor />);
+    const first = screen.getByRole("tab", { name: "records-graph-20261026a.md" });
+    first.focus();
+    fireEvent.keyDown(first, { key: "ArrowRight" });
+    expect(screen.getByRole("tab", { name: "parity.json, unsaved changes" })).toHaveAttribute("aria-selected", "true");
+    expect(document.activeElement).toBe(screen.getByRole("tab", { name: "parity.json, unsaved changes" }));
+    fireEvent.keyDown(document.activeElement!, { key: "End" });
+    expect(screen.getByRole("tab", { name: "README.md" })).toHaveAttribute("aria-selected", "true");
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowRight" });
+    expect(screen.getByRole("tab", { name: "records-graph-20261026a.md" })).toHaveAttribute("aria-selected", "true");
+    fireEvent.keyDown(document.activeElement!, { key: "Delete" });
+    expect(screen.queryByRole("tab", { name: "records-graph-20261026a.md" })).toBeNull();
+    expect(screen.getByRole("tab", { name: "parity.json, unsaved changes" })).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("closes a tab from its own close button", () => {
+    render(<Editor />);
+    fireEvent.click(screen.getByRole("button", { name: "Close README.md" }));
+    expect(screen.getAllByRole("tab")).toHaveLength(2);
+  });
+});

package/src/files/file-tabs.tsx

@@ -1,9 +1,15 @@
 /**
- * FileTabs — tab bar for open files in the preview panel.
+ * FileTabs: one tab per open file. The strip sits on its host's chrome plane and
+ * draws its baseline as an inset shadow (a host whose border is the baseline
+ * passes `shadow-none`); the active tab paints the card plane over it, so it
+ * joins the content below. A long name is cut in the middle, keeping its end
+ * and extension. Arrow keys, Home and End move the selection; Delete closes.
  */
 
+import { useEffect, useRef, type KeyboardEvent } from "react";
 import { X, FileText, FileCode, FileSpreadsheet } from "lucide-react";
-import { focusRing, focusRingInset } from "../lib/focus";
+import { focusRingInset } from "../lib/focus";
+import { controlMotion } from "../lib/motion";
 import { cn } from "../lib/utils";
 
 export interface FileTabData {
@@ -18,6 +24,8 @@ export interface FileTabsProps {
   activeId?: string;
   onSelect: (id: string) => void;
   onClose: (id: string) => void;
+  /** Accessible name of the tab list. Defaults to "Open files". */
+  label?: string;
   className?: string;
 }
 
@@ -28,47 +36,99 @@ function getTabIcon(name: string) {
   return FileCode;
 }
 
-export function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps) {
+/** A long name keeps its extension and the characters before it after the ellipsis. */
+function splitName(name: string): [string, string] {
+  if (name.length <= 18) return [name, ""];
+  const dot = name.lastIndexOf(".");
+  const keep = Math.min(Math.max((dot > 0 ? name.length - dot : 0) + 6, 8), 12);
+  return [name.slice(0, -keep), name.slice(-keep)];
+}
+
+export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", className }: FileTabsProps) {
+  const stripRef = useRef<HTMLDivElement>(null);
+
+  // Reveal the active tab inside the strip only; scrollIntoView would also scroll the page.
+  useEffect(() => {
+    const strip = stripRef.current;
+    const tab = strip?.querySelector<HTMLElement>('[aria-selected="true"]')?.parentElement;
+    if (strip && tab) strip.scrollLeft = Math.min(tab.offsetLeft, Math.max(strip.scrollLeft, tab.offsetLeft + tab.offsetWidth - strip.clientWidth));
+  }, [activeId, tabs.length]);
+
   if (tabs.length === 0) return null;
 
+  const tabButtons = () => [...(stripRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]') ?? [])];
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const at = tabButtons().indexOf(event.target as HTMLButtonElement);
+    const last = tabs.length - 1;
+    const next = ({ ArrowRight: at === last ? 0 : at + 1, ArrowLeft: at === 0 ? last : at - 1, Home: 0, End: last } as Record<string, number>)[event.key];
+    if (at < 0 || (next === undefined && event.key !== "Delete")) return;
+    event.preventDefault();
+    if (next !== undefined) {
+      tabButtons()[next]?.focus();
+      onSelect(tabs[next]!.id);
+      return;
+    }
+    onClose(tabs[at]!.id);
+    // Once the host has re-rendered, keep focus on the tab it opened.
+    requestAnimationFrame(() => (tabButtons().find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabButtons().at(-1))?.focus());
+  };
+
   return (
-    <div className={cn("flex items-center border-b border-border bg-background overflow-x-auto", className)}>
+    <div
+      ref={stripRef}
+      role="tablist"
+      aria-label={label}
+      onKeyDown={onKeyDown}
+      className={cn(
+        "relative flex h-10 min-w-0 items-end gap-1 overflow-x-auto px-2 shadow-[inset_0_-1px_0_hsl(var(--border))] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        className,
+      )}
+    >
       {tabs.map((tab) => {
         const isActive = tab.id === activeId;
         const Icon = getTabIcon(tab.name);
+        const [head, tail] = splitName(tab.name);
 
         return (
           <div
             key={tab.id}
+            title={tab.path}
             className={cn(
-              "group flex items-center border-r border-border shrink-0",
+              "group relative flex h-[calc(100%-0.375rem)] max-w-72 shrink-0 items-center rounded-t-lg border border-b-0 text-sm",
+              controlMotion,
               isActive
-                ? "bg-card text-foreground border-b-2 border-b-primary"
-                : "text-muted-foreground hover:bg-muted/50",
+                ? "border-border bg-card text-foreground"
+                : "border-transparent text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground",
             )}
           >
             <button
               type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-label={tab.dirty ? `${tab.name}, unsaved changes` : tab.name}
+              tabIndex={isActive || (!activeId && tab === tabs[0]) ? 0 : -1}
               onClick={() => onSelect(tab.id)}
-              className={cn(
-                "flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground",
-                focusRingInset,
-              )}
+              className={cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset)}
             >
-              <Icon className="h-3 w-3 shrink-0" />
-              <span className="max-w-[120px] truncate">{tab.name}</span>
-              {tab.dirty && <span className="h-1.5 w-1.5 rounded-full bg-primary" />}
+              <Icon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="flex min-w-0">
+                <span className="overflow-hidden text-ellipsis whitespace-pre">{head}</span>
+                {tail && <span className="shrink-0 whitespace-pre">{tail}</span>}
+              </span>
+              {tab.dirty && <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]" />}
             </button>
             <button
               type="button"
+              tabIndex={-1}
               aria-label={`Close ${tab.name}`}
               onClick={() => onClose(tab.id)}
               className={cn(
-                "mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 group-hover:opacity-100",
-                focusRing,
+                "mr-1.5 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground",
+                controlMotion,
+                !isActive && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
               )}
             >
-              <X className="h-2.5 w-2.5" />
+              <X aria-hidden className="size-3" />
             </button>
           </div>
         );

package/src/primitives/heading.tsx

@@ -20,9 +20,9 @@ const VARIANT_CLASS: Record<HeadingVariant, string> = {
   section:
     "font-display font-semibold text-foreground text-[length:var(--font-size-xl,1.25rem)] leading-[1.3] tracking-[var(--tracking-snug,-0.01em)]",
   subsection:
-    "font-semibold text-foreground text-[length:var(--font-size-lg,1rem)] leading-[1.4]",
+    "font-semibold text-foreground text-[length:var(--font-size-base,1rem)] leading-[1.4]",
   eyebrow:
-    "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-sm,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]",
+    "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-xs,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]",
 };
 
 const DEFAULT_TAG: Record<HeadingVariant, React.ElementType> = {

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

@@ -191,15 +191,17 @@ describe("each primitive renders its interaction helper", () => {
     expect(classes(screen.getByText(/Guests, staff/))).toContain("line-clamp-2");
   });
 
-  it("SegmentedControl row: a well track, soft items, the selected state on aria-checked", () => {
+  it("SegmentedControl row: a quiet well track, soft items, a raised thumb on aria-checked and no ring", () => {
     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)).toContain("border-border");
     expect(classes(track)).not.toContain("bg-card");
     for (const radio of screen.getAllByRole("radio")) {
-      expectHelpers(radio, ixControlSoft, ixSelected);
+      expectHelpers(radio, ixControlSoft);
+      expect(classes(radio)).toContain("aria-checked:bg-card");
+      expect([...classes(radio)].some((token) => token.includes("--ix-sel-ring"))).toBe(false);
       for (const token of FOCUS_RING) expect(classes(radio)).toContain(token);
       expect(classes(radio)).not.toContain("bg-[var(--accent-surface)]");
     }

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

@@ -271,9 +271,10 @@ describe("SegmentedControl", () => {
     const radiogroup = screen.getByRole("radiogroup")
     expect(radiogroup.className).toContain("flex-wrap")
     expect(radiogroup.className).toContain("rounded-lg")
-    // The row track is a field well, so it steps off whatever plane holds it.
+    // The row track is one quiet well: the hairline border, not a field's strong border.
     expect(radiogroup.className).toContain("bg-[var(--well)]")
-    expect(radiogroup.className).toContain("border-[var(--field-border)]")
+    expect(radiogroup.className).toContain("border-border")
+    expect(radiogroup.className).not.toContain("border-[var(--field-border)]")
   })
 
   it("applies tabs variant classes with nowrap", () => {

package/src/primitives/segmented-control.tsx

@@ -6,9 +6,13 @@ import { ChevronLeft, ChevronRight } from "lucide-react"
 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 { ixControlSoft, ixTabUnderline } from "../lib/interaction"
 import { cn } from "../lib/utils"
 
+/** The row variant's selected segment: a raised thumb on the well, not a tint inside a ring. */
+const rowThumb =
+  "aria-checked:bg-card aria-checked:border-border aria-checked:shadow-[0_1px_2px_rgb(0_0_0/0.08)] hover:aria-checked:bg-card"
+
 /**
  * Visually lightweight segmented control for single-value selection.
  *
@@ -21,10 +25,13 @@ import { cn } from "../lib/utils"
  * console warning fires when both are omitted.
  *
  * Design rules baked into the default variant:
- *   - 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
+ *   - The row track is one quiet well (`--well`, the hairline `border`), so
+ *     the control reads as one inset group on whatever plane it sits on, and
+ *     it is compact (36px) so it sits inside a 44px toolbar with air above
+ *     and below instead of touching its edges.
+ *   - Only the SELECTED segment shows a surface: a raised thumb (the card
+ *     colour with a hairline and a soft shadow) with accent text. No ring is
+ *     drawn around the track's segments, so the group never stacks rings. 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
@@ -224,7 +231,7 @@ export function SegmentedControl<T extends string = string>({
       className={cn(
         "relative flex gap-1",
         variant === "row" &&
-          "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1",
+          "flex-wrap items-center rounded-lg border border-border bg-[var(--well)] p-0.5",
         variant === "tabs" &&
           "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
         className,
@@ -251,7 +258,7 @@ 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 border border-transparent px-3 py-1.5", focusRing, ixControlSoft, ixSelected],
+              variant === "row" && ["rounded-md border border-transparent px-3 py-1", focusRing, ixControlSoft, rowThumb],
               // The strip scrolls horizontally, which would clip an outer ring.
               // 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],

package/src/primitives/sidebar-drop-zone.tsx

@@ -113,7 +113,7 @@ export function SidebarDropZone({
         dragOver
           ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]"
           : persistent
-            ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]"
+            ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover,hsl(var(--accent)))]"
             : "",
         disabled && "opacity-50 pointer-events-none",
         className,

package/src/run/run-row-shell.tsx

@@ -166,7 +166,7 @@ export function RunRowShell({
               {description ? (
                 <span
                   className={cn(
-                    "hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline",
+                    "min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground",
                     descriptionMono && "font-mono",
                   )}
                 >

package/src/styles/presentation.css

@@ -4,8 +4,8 @@
 .tangle-heading[data-variant="hero"] { font-size: var(--font-size-hero); line-height: var(--line-height-display); }
 .tangle-heading[data-variant="page"] { font-size: var(--font-size-3xl); }
 .tangle-heading[data-variant="section"] { font-size: var(--font-size-xl); }
-.tangle-heading[data-variant="subsection"] { font-size: var(--font-size-lg); }
-.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); }
+.tangle-heading[data-variant="subsection"] { font-size: var(--font-size-base); }
+.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); }
 .tangle-page-header { min-width: 0; margin-bottom: 1.5rem; }
 .tangle-page-header-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
 .tangle-intro .tangle-page-header-main { display: block; }
@@ -68,7 +68,7 @@
 .tangle-native-dialog { max-width: min(32rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
 .tangle-native-dialog::backdrop { background: var(--scrim); }
 
-.tangle-api-meta { font-family: var(--font-mono); font-size: var(--font-size-sm); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
+.tangle-api-meta { font-family: var(--font-mono); font-size: var(--font-size-xs); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
 .tangle-api-schema { margin: 1rem 0; }
 .tangle-api-schema > div { padding-block: 0.75rem; border-bottom: 1px solid hsl(var(--border)); overflow-wrap: anywhere; }
 .tangle-api-schema dt { font-family: var(--font-mono); font-size: var(--font-size-label); }