@tangle-network/ui 11.45.0 → 11.46.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/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.45.0",
+  "version": "11.46.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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/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",
                   )}
                 >