@tangle-network/ui 11.32.2 → 11.34.0

package/dist/lib/interaction.d.ts

@@ -0,0 +1,41 @@
+//#region src/lib/interaction.d.ts
+/**
+ * The interaction states every control shares: one palette in five shapes, all
+ * read from `@tangle-network/brand`'s `--ix-*` tokens (tokens.css), which derive
+ * from the focus ring hue `--hsl-ring`. So hover, press, after-click and
+ * selected are the same green in Hospitality and the same indigo on the spine
+ * as the keyboard focus ring.
+ *
+ *   hover     1px edge at .45 plus a 4px halo at .16 (`--ix-hover`)
+ *   press     1px edge at .95 plus a 4px halo at .30 (`--ix-press`)
+ *   after     a control focused by a mouse click keeps a soft ring (`--ix-after`)
+ *   selected  a tint plus a 1px inset ring at .85 (`--ix-sel-bg`, `--ix-sel-ring`)
+ *
+ * The keyboard focus-visible glow stays exactly as `focusRing` / `focusField`
+ * (lib/focus.ts) draw it. Tailwind composes `--tw-ring-shadow` with
+ * `--tw-shadow`, so these shadows coexist with that ring, and
+ * `focus-visible:shadow-none` drops the hover glow while the keyboard ring shows.
+ *
+ * Every class is written out in full because Tailwind reads class names
+ * statically.
+ */
+/** Bordered or filled control: green edge on hover, deeper on press, a persistent soft ring after a mouse click. */
+export declare const ixControl: string;
+/** The after-click part of `ixControl` alone, for a field that opens a menu (SelectTrigger). */
+export declare const ixControlAfter = "focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)]";
+/** Ghost, icon, link and bare controls: a wash, never a glow (too noisy in sidebars and toolbars). */
+export declare const ixControlSoft = "hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]";
+/**
+ * Field: its own well and a visible border; hover replaces `focusField`'s
+ * neutral `--border-strong`. The well is the `--well` context variable, which a
+ * card re-declares for its descendants, so a field never takes its parent's
+ * colour. `--field-surface` still lets a context such as Toolbar pick the fill.
+ */
+export declare const ixField: string;
+/** Selected / on / current: tint plus a 1px inset green ring. */
+export declare const ixSelected: string;
+/** Underline tab: 2px green underline plus a faint tint, never a box; a faint underline on hover. */
+export declare const ixTabUnderline: string;
+/** List row / menu item: wash plus inset edge on hover or keyboard highlight; checked = selected. */
+export declare const ixRow: string;
+//#endregion

package/dist/lib/interaction.js

@@ -0,0 +1,42 @@
+//#region src/lib/interaction.ts
+/**
+* The interaction states every control shares: one palette in five shapes, all
+* read from `@tangle-network/brand`'s `--ix-*` tokens (tokens.css), which derive
+* from the focus ring hue `--hsl-ring`. So hover, press, after-click and
+* selected are the same green in Hospitality and the same indigo on the spine
+* as the keyboard focus ring.
+*
+*   hover     1px edge at .45 plus a 4px halo at .16 (`--ix-hover`)
+*   press     1px edge at .95 plus a 4px halo at .30 (`--ix-press`)
+*   after     a control focused by a mouse click keeps a soft ring (`--ix-after`)
+*   selected  a tint plus a 1px inset ring at .85 (`--ix-sel-bg`, `--ix-sel-ring`)
+*
+* The keyboard focus-visible glow stays exactly as `focusRing` / `focusField`
+* (lib/focus.ts) draw it. Tailwind composes `--tw-ring-shadow` with
+* `--tw-shadow`, so these shadows coexist with that ring, and
+* `focus-visible:shadow-none` drops the hover glow while the keyboard ring shows.
+*
+* Every class is written out in full because Tailwind reads class names
+* statically.
+*/
+/** Bordered or filled control: green edge on hover, deeper on press, a persistent soft ring after a mouse click. */
+const ixControl = "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none";
+/** The after-click part of `ixControl` alone, for a field that opens a menu (SelectTrigger). */
+const ixControlAfter = "focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)]";
+/** Ghost, icon, link and bare controls: a wash, never a glow (too noisy in sidebars and toolbars). */
+const ixControlSoft = "hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]";
+/**
+* Field: its own well and a visible border; hover replaces `focusField`'s
+* neutral `--border-strong`. The well is the `--well` context variable, which a
+* card re-declares for its descendants, so a field never takes its parent's
+* colour. `--field-surface` still lets a context such as Toolbar pick the fill.
+*/
+const ixField = "bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)]";
+/** Selected / on / current: tint plus a 1px inset green ring. */
+const ixSelected = "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)]";
+/** Underline tab: 2px green underline plus a faint tint, never a box; a faint underline on hover. */
+const ixTabUnderline = "hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]";
+/** List row / menu item: wash plus inset edge on hover or keyboard highlight; checked = selected. */
+const ixRow = "hover:bg-[var(--ix-hover-bg)] hover:shadow-[inset_0_0_0_1px_var(--ix-hover-border)] data-[highlighted]:bg-[var(--ix-sel-bg)] data-[highlighted]:shadow-[inset_0_0_0_1px_var(--ix-hover-border)] focus:bg-[var(--ix-sel-bg)] data-[state=checked]:bg-[var(--ix-sel-bg)] data-[state=checked]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] active:shadow-[inset_0_0_0_1px_hsl(var(--hsl-ring))]";
+//#endregion
+export { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline };

package/dist/markdown/markdown-table.js

@@ -113,7 +113,7 @@ function MarkdownTable({ node, className, children, ...props }) {
 		};
 	}, [node]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose my-4 overflow-hidden rounded-lg border border-border bg-card",
+		className: "not-prose relative my-4 overflow-hidden rounded-lg border border-border bg-card",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1",
 			children: [/* @__PURE__ */ jsx("span", {

package/dist/primitives/button.js

@@ -1,3 +1,4 @@
+import { ixControl, ixControlSoft, ixSelected } from "../lib/interaction.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation.js";
@@ -9,13 +10,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97]",
-			outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground",
-			secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97]",
-			ghost: "hover:bg-muted hover:text-foreground text-muted-foreground border border-transparent",
-			link: "text-[var(--accent-text)] underline-offset-4 hover:underline",
-			sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]"
+			default: `bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] ${ixControl}`,
+			destructive: `bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] ${ixControl}`,
+			outline: `border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground ${ixControl}`,
+			secondary: `bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] ${ixControl}`,
+			ghost: `hover:text-foreground text-muted-foreground border border-transparent ${ixControlSoft}`,
+			link: `text-[var(--accent-text)] underline-offset-4 hover:underline ${ixControlSoft}`,
+			sandbox: `bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] ${ixControl}`
 		},
 		size: {
 			default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
@@ -34,7 +35,15 @@ const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-const bareButton = `${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+const bareButton = `${focusRing} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+/** One Button render's classes: variant and size, the toggle states, then the caller's. */
+function buttonClassName(variant, size, pressed, className) {
+	const toggle = pressed === void 0 ? void 0 : `${ixControl} ${ixSelected}`;
+	return variant === "bare" ? cn(bareButton, toggle, className) : cn(buttonVariants({
+		variant,
+		size
+	}), toggle, className);
+}
 function preventActivation(event) {
 	event.preventDefault();
 	event.stopPropagation();
@@ -61,11 +70,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
 		const child = React.isValidElement(children) ? children : null;
 		const isDisabled = disabled || loading || child?.props.disabled;
 		return /* @__PURE__ */ jsx(Slot, {
-			className: variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({
-				variant,
-				size,
-				className
-			})),
+			className: buttonClassName(variant, size, props["aria-pressed"], className),
 			ref,
 			...props,
 			...isDisabled ? disabledHandlers(props) : {},
@@ -84,11 +89,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
 		});
 	}
 	return /* @__PURE__ */ jsxs("button", {
-		className: variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({
-			variant,
-			size,
-			className
-		})),
+		className: buttonClassName(variant, size, props["aria-pressed"], className),
 		ref,
 		...props,
 		disabled: disabled || loading,

package/dist/primitives/card.d.ts

@@ -1,9 +1,22 @@
 import * as React from "react";
 //#region src/primitives/card.d.ts
+/**
+ * A card is one level of the brand surface ladder. It carries
+ * `data-slot="card"`, and the brand's surface-context rule (tokens.css)
+ * re-declares `--card` and `--well` for everything inside it: a Card or a
+ * `bg-card` box inside a card paints the raised level, one inside that the
+ * raised-2 level, and a field in any of them takes the well that is the
+ * opposite step from its parent. Nesting needs no prop and no app selector.
+ */
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
   variant?: "default" | "glass" | "sandbox" | "elevated";
-  /** Decorative border feedback only. Put actions in a native button or link. */
+  /** Decorative hover feedback only (the shared green edge). Put actions in a native button or link. */
   hover?: boolean;
+  /**
+   * The card is itself the control, such as a card wrapped in a link: it takes
+   * the full control states (hover glow, press, the ring after a click).
+   */
+  interactive?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {

package/dist/primitives/card.js

@@ -1,17 +1,27 @@
+import "../lib/interaction.js";
 import { cn } from "../lib/utils.js";
 import { Heading } from "./heading.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/card.tsx
-const Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
+/**
+* A card is one level of the brand surface ladder. It carries
+* `data-slot="card"`, and the brand's surface-context rule (tokens.css)
+* re-declares `--card` and `--well` for everything inside it: a Card or a
+* `bg-card` box inside a card paints the raised level, one inside that the
+* raised-2 level, and a field in any of them takes the well that is the
+* opposite step from its parent. Nesting needs no prop and no app selector.
+*/
+const Card = React.forwardRef(({ className, variant = "default", hover = false, interactive = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cn("rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow]", "duration-[var(--transition-default)]", {
-			default: "bg-card border-border",
+		className: cn("rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow,background-color]", "duration-[var(--transition-default)]", {
+			default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]",
 			elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]",
 			glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]",
 			sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]"
-		}[variant], hover && "hover:border-[var(--border-strong)]", className),
+		}[variant], (hover || interactive) && "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none", className),
+		"data-slot": "card",
 		...props
 	});
 });
@@ -32,7 +42,7 @@ const CardTitle = React.forwardRef(({ className, as = "h3", ...props }, ref) =>
 CardTitle.displayName = "CardTitle";
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
-	className: cn("text-muted-foreground text-sm", className),
+	className: cn("text-muted-foreground text-sm line-clamp-2", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";

package/dist/primitives/dropdown-menu.js

@@ -1,3 +1,4 @@
+import { ixRow } from "../lib/interaction.js";
 import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,33 +13,33 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
 	ref,
-	className: cn("flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none", "focus:bg-accent data-[state=open]:bg-muted/50", inset && "pl-8", className),
+	className: cn("flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "data-[state=open]:bg-[var(--ix-sel-bg)]", ixRow, inset && "pl-8", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })]
 }));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
 	ref,
-	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "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", className),
+	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "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", className),
 	...props
 }));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
 	ref,
 	sideOffset,
-	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "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", className),
+	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "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", className),
 	...props
 }) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors", "focus:bg-muted/50 focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
+	className: cn("relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
 	...props
 }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors", "focus:bg-muted/50 focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	checked,
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
@@ -49,7 +50,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors", "focus:bg-muted/50 focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",

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

@@ -12,7 +12,11 @@ import * as React from "react";
  * 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

package/dist/primitives/segmented-control.js

@@ -1,4 +1,5 @@
 "use client";
+import "../lib/interaction.js";
 import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import "../lib/control-presentation.js";
@@ -83,7 +84,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		ref: stripRef,
 		onKeyDown: handleKeyDown,
 		onScroll: tabs ? measureOverflow : void 0,
-		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade], className),
+		className: cn("flex gap-1", variant === "row" && "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),
 		children: options.map((option, i) => {
 			const active = option.value === value;
 			const focusable = active || !hasMatch && i === 0;
@@ -100,11 +101,17 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 				onClick: () => {
 					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 px-3 py-1.5", focusRing], variant === "tabs" && [
-					"shrink-0 rounded-none border-b-2 -mb-px px-4 py-2",
+				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,
+					"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)]"
+				], variant === "tabs" && [
+					"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
 					"pointer-coarse:min-h-11",
-					focusRingInset
-				], 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"),
+					focusRingInset,
+					"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
+				], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),
 				children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
 					className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
 					children: option.adornment

package/dist/primitives/select.js

@@ -1,4 +1,5 @@
 "use client";
+import { ixControlAfter, ixRow } from "../lib/interaction.js";
 import { cn } from "../lib/utils.js";
 import { controlSizes, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation.js";
 import * as React from "react";
@@ -11,7 +12,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	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", fieldPresentation, fieldTouchText, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size], className),
+	className: cn("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", fieldPresentation, ixControlAfter, fieldTouchText, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>span]:text-left", "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),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,
@@ -35,7 +36,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
 	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", 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),
+	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-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),
 	position,
 	...props,
 	children: [
@@ -56,7 +57,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 	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", className),
+	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-[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,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",

package/dist/primitives/tabs.js

@@ -1,3 +1,4 @@
+import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import * as React from "react";
@@ -19,9 +20,9 @@ const TabsList = React.forwardRef(({ className, variant = "default", ...props },
 TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
 	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`,
-		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`,
-		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`
+		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 ${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=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=inactive]:text-muted-foreground ${ixTabUnderline}`
 	};
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
 		ref,

package/dist/run/inline-thinking-item.d.ts

@@ -4,8 +4,14 @@ export interface InlineThinkingItemProps {
   part: ReasoningPart;
   defaultOpen?: boolean;
   autoCollapse?: boolean;
+  /**
+   * Open the row while the model is still thinking. A product that keeps
+   * deliberation out of the reader's way passes false: the row stays as
+   * `defaultOpen` left it, with its one-line preview, until the reader opens it.
+   */
+  openWhileActive?: boolean;
   className?: string;
   contentClassName?: string;
 }
-export declare const InlineThinkingItem: import("react").MemoExoticComponent<({ part, defaultOpen, autoCollapse, className, contentClassName }: InlineThinkingItemProps) => import("react").JSX.Element>;
+export declare const InlineThinkingItem: import("react").MemoExoticComponent<({ part, defaultOpen, autoCollapse, openWhileActive, className, contentClassName }: InlineThinkingItemProps) => import("react").JSX.Element>;
 //#endregion

package/dist/run/inline-thinking-item.js

@@ -1,5 +1,5 @@
 import { TextShimmer } from "../primitives/text-shimmer.js";
-import { truncateText } from "../utils/format.js";
+import { plainTextFromMarkdown, truncateText } from "../utils/format.js";
 import { ExpandableContent } from "./expandable-content.js";
 import { RunRowShell } from "./run-row-shell.js";
 import { Markdown } from "../markdown/markdown.js";
@@ -7,18 +7,18 @@ import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Brain } from "lucide-react";
 //#region src/run/inline-thinking-item.tsx
-const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = true, className, contentClassName }) => {
+const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = true, openWhileActive = true, className, contentClassName }) => {
 	const [open, setOpen] = useState(defaultOpen);
 	const autoCollapsedRef = useRef(false);
 	const startTime = part.time?.start;
 	const endTime = part.time?.end;
 	const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
 	const isActive = startTime != null && endTime == null;
-	const preview = part.text ? truncateText(part.text, 120) : void 0;
+	const preview = part.text ? truncateText(plainTextFromMarkdown(part.text), 120) : void 0;
 	useEffect(() => {
 		if (isActive) {
 			autoCollapsedRef.current = false;
-			setOpen(true);
+			if (openWhileActive) setOpen(true);
 			return;
 		}
 		if (autoCollapse && !autoCollapsedRef.current && durationMs != null) {
@@ -31,7 +31,8 @@ const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = tru
 	}, [
 		autoCollapse,
 		durationMs,
-		isActive
+		isActive,
+		openWhileActive
 	]);
 	return /* @__PURE__ */ jsx(RunRowShell, {
 		icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),

package/dist/utils/format.d.ts

@@ -1,6 +1,12 @@
 //#region src/utils/format.d.ts
 /** Format a duration in milliseconds to a human-readable string. */
 export declare function formatDuration(ms: number): string;
+/**
+ * Markdown read as plain text, for a one-line preview: code fences, emphasis,
+ * headings, list and quote markers, and link syntax are removed, so a preview
+ * never shows `**` or `#`. Underscores inside words (`snake_case`) are kept.
+ */
+export declare function plainTextFromMarkdown(text: string): string;
 /** Truncate text to `max` characters, appending "..." if truncated. */
 export declare function truncateText(text: string, max: number): string;
 /**

package/dist/utils/format.js

@@ -8,6 +8,14 @@ function formatDuration(ms) {
 	const remaining = seconds % 60;
 	return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
 }
+/**
+* Markdown read as plain text, for a one-line preview: code fences, emphasis,
+* headings, list and quote markers, and link syntax are removed, so a preview
+* never shows `**` or `#`. Underscores inside words (`snake_case`) are kept.
+*/
+function plainTextFromMarkdown(text) {
+	return text.replace(/```[^\n]*\n?([\s\S]*?)```/g, "$1").replace(/`([^`]*)`/g, "$1").replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/^[ \t]{0,3}(?:#{1,6}[ \t]+|>[ \t]?|[-*+][ \t]+|\d+[.)][ \t]+)/gm, "").replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "$2").replace(/(^|[^\w*])\*(?=\S)([^*\n]*?\S)\*(?![\w*])/g, "$1$2").replace(/(^|[^\w])_(?=\S)([^_\n]*?\S)_(?!\w)/g, "$1$2").replace(/~~(?=\S)([\s\S]*?\S)~~/g, "$1");
+}
 /** Truncate text to `max` characters, appending "..." if truncated. */
 function truncateText(text, max) {
 	const cleaned = text.replace(/\s+/g, " ").trim();
@@ -51,4 +59,4 @@ function formatBytes(bytes) {
 	return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
 }
 //#endregion
-export { formatBytes, formatDuration, formatUptime, truncateText };
+export { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText };

package/dist/utils.d.ts

@@ -1,7 +1,8 @@
 import { copyText } from "./utils/copy-text.js";
-import { formatBytes, formatDuration, formatUptime, truncateText } from "./utils/format.js";
+import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { cn } from "./lib/utils.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/dist/utils.js

@@ -1,7 +1,8 @@
+import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
-import { formatBytes, formatDuration, formatUptime, truncateText } from "./utils/format.js";
+import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.32.2",
+  "version": "11.34.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -150,7 +150,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.22.1",
+    "@tangle-network/brand": "^1.24.1",
     "@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",