@tangle-network/ui 11.34.0 → 11.36.0

package/dist/primitives/segmented-control.js

@@ -5,14 +5,39 @@ import { cn } from "../lib/utils.js";
 import "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 //#region src/primitives/segmented-control.tsx
-/** Width of the faded edge that marks more tabs past the strip, in px. */
-const TAB_EDGE_FADE = 24;
-const tabEdgeFade = [
-	"data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
-	"data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
-	"data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]"
-];
+/** 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;
+/**
+* A chevron pinned to one edge of the scrolling strip. It is a sticky flex
+* item with a negative margin equal to its width plus the gap, so it takes no room in the
+* row (showing it never reflows the options) and stays at the visible edge
+* while the strip scrolls. A solid surface keeps it legible on any plane,
+* which an edge fade is not: a fade over the gap between two options, or over
+* a host's inline padding, shows nothing.
+*/
+function ScrollCue({ side, onPage }) {
+	const Icon = side === "start" ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		"data-scroll-cue": side,
+		onClick: onPage,
+		className: cn("sticky z-[1] flex shrink-0 items-center justify-center self-center rounded-full border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground", side === "start" ? "left-0" : "right-0"),
+		style: {
+			width: SCROLL_CUE_SIZE,
+			height: SCROLL_CUE_SIZE,
+			[side === "start" ? "marginRight" : "marginLeft"]: -36
+		},
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		})
+	});
+}
 function SegmentedControl({ value, onValueChange, options, variant = "row", className, ...rest }) {
 	if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) console.warn("[SegmentedControl] role=\"radiogroup\" requires either aria-label or aria-labelledby for accessibility.");
 	const optionRefs = React.useRef(/* @__PURE__ */ new Map());
@@ -21,7 +46,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		start: false,
 		end: false
 	});
-	const tabs = variant === "tabs";
+	const optionKey = options.map((o) => o.value).join("\0");
 	const measureOverflow = React.useCallback(() => {
 		const strip = stripRef.current;
 		if (!strip) return;
@@ -32,31 +57,45 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 			end
 		});
 	}, []);
-	React.useLayoutEffect(() => {
-		if (!tabs) return;
+	const valueRef = React.useRef(value);
+	valueRef.current = value;
+	const revealSelected = React.useCallback(() => {
 		const strip = stripRef.current;
-		const option = optionRefs.current.get(value);
-		if (strip && option) {
+		const option = optionRefs.current.get(valueRef.current);
+		if (strip && option && strip.scrollWidth > strip.clientWidth) {
+			const style = getComputedStyle(strip);
+			const reserveStart = 36 + (Number.parseFloat(style.paddingLeft) || 0);
+			const reserveEnd = 36 + (Number.parseFloat(style.paddingRight) || 0);
 			const start = option.offsetLeft;
 			const end = start + option.offsetWidth;
-			if (start < strip.scrollLeft + TAB_EDGE_FADE) strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE);
-			else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE;
+			if (start - reserveStart < strip.scrollLeft) strip.scrollLeft = Math.max(0, start - reserveStart);
+			else if (end + reserveEnd > strip.scrollLeft + strip.clientWidth) strip.scrollLeft = end + reserveEnd - strip.clientWidth;
 		}
 		measureOverflow();
-	}, [
-		tabs,
+	}, [measureOverflow]);
+	React.useLayoutEffect(revealSelected, [
 		value,
 		options.length,
-		measureOverflow
+		revealSelected
 	]);
 	React.useEffect(() => {
-		if (!tabs || typeof ResizeObserver === "undefined") return;
+		if (typeof ResizeObserver === "undefined") return;
 		const strip = stripRef.current;
 		if (!strip) return;
-		const observer = new ResizeObserver(measureOverflow);
+		const observer = new ResizeObserver(revealSelected);
 		observer.observe(strip);
+		for (const option of optionRefs.current.values()) observer.observe(option);
 		return () => observer.disconnect();
-	}, [tabs, measureOverflow]);
+	}, [optionKey, revealSelected]);
+	const page = (direction) => {
+		const strip = stripRef.current;
+		if (!strip) return;
+		const reduce = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		strip.scrollBy({
+			left: direction * strip.clientWidth * .75,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
 	const hasMatch = options.some((o) => o.value === value);
 	const handleKeyDown = (e) => {
 		if (options.length === 0) return;
@@ -73,7 +112,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 			optionRefs.current.get(options[next].value)?.focus();
 		}
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		role: "radiogroup",
 		id: rest.id,
 		"aria-label": rest["aria-label"],
@@ -83,41 +122,51 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		"data-overflow-end": overflow.end || void 0,
 		ref: stripRef,
 		onKeyDown: handleKeyDown,
-		onScroll: tabs ? measureOverflow : void 0,
-		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;
-			return /* @__PURE__ */ jsxs("button", {
-				ref: (el) => {
-					if (el) optionRefs.current.set(option.value, el);
-					else optionRefs.current.delete(option.value);
-				},
-				type: "button",
-				role: "radio",
-				"aria-checked": active,
-				"data-testid": option.testId,
-				tabIndex: focusable ? 0 : -1,
-				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 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,
-					"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
-				})]
-			}, option.value);
-		})
+		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),
+		children: [
+			overflow.start && /* @__PURE__ */ jsx(ScrollCue, {
+				side: "start",
+				onPage: () => page(-1)
+			}),
+			options.map((option, i) => {
+				const active = option.value === value;
+				const focusable = active || !hasMatch && i === 0;
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (el) => {
+						if (el) optionRefs.current.set(option.value, el);
+						else optionRefs.current.delete(option.value);
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": active,
+					"data-testid": option.testId,
+					tabIndex: focusable ? 0 : -1,
+					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 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,
+						"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
+					})]
+				}, option.value);
+			}),
+			overflow.end && /* @__PURE__ */ jsx(ScrollCue, {
+				side: "end",
+				onPage: () => page(1)
+			})
+		]
 	});
 }
 //#endregion

package/dist/primitives/sheet.js

@@ -1,6 +1,8 @@
 "use client";
+import { surfaceMotion } from "../lib/motion.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { SurfaceMotion } from "../lib/surface-motion.js";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,36 +14,44 @@ const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
 const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
-const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+const SheetOverlay = React.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
 	ref,
-	className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
-	...props
+	className: cn("fixed inset-0 z-50 bg-black/40", surfaceMotion, className),
+	...props,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(SurfaceMotion, {
+		kind: "overlay",
+		asChild,
+		children
+	})
 }));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-const sheetVariants = cva([
-	"fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
-	"data-[state=closed]:animate-out data-[state=open]:animate-in",
-	"data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none"
-], {
+const sheetVariants = cva(["fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg", surfaceMotion], {
 	variants: { side: {
-		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-		top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-		bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+		right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+		top: "inset-x-0 top-0 h-auto border-b",
+		bottom: "inset-x-0 bottom-0 h-auto border-t"
 	} },
 	defaultVariants: { side: "right" }
 });
-const SheetContent = React.forwardRef(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+const SheetContent = React.forwardRef(({ className, children, side = "right", hideCloseButton = false, asChild, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SheetPrimitive.Content, {
 	ref,
 	className: cn(sheetVariants({ side }), className),
 	...props,
-	children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
-		className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", focusRing),
-		children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Close"
+	asChild: true,
+	children: /* @__PURE__ */ jsxs(SurfaceMotion, {
+		kind: "sheet",
+		side: side ?? "right",
+		asChild,
+		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
+			className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none", focusRing),
+			children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
 		})]
-	})]
+	})
 })] }));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {

package/dist/primitives/skeleton.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/skeleton.tsx
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("animate-pulse rounded-lg bg-muted/50", className),
+		className: cn("animate-pulse motion-reduce:animate-none rounded-lg bg-muted/50", className),
 		...props
 	});
 }

package/dist/primitives/status-pill.d.ts

@@ -19,7 +19,7 @@ import * as React from "react";
  * that always brings its own background cannot be placed onto a plane that
  * breaks it.
  */
-export type StatusTone = "success" | "warning" | "danger" | "info" | "neutral" | "running";
+export type StatusTone = "success" | "warning" | "danger" | "info" | "neutral" | "running" | "violet";
 export interface StatusPillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   tone: StatusTone;
   children: React.ReactNode;
@@ -37,6 +37,8 @@ export interface StatusPillProps extends Omit<React.HTMLAttributes<HTMLSpanEleme
    * For a control that supplies its own surface (a chip, a selected row).
    */
   bare?: boolean;
+  /** Decorative caller glyph; the visible text remains the accessible status. */
+  icon?: React.ReactNode;
   size?: "sm" | "md";
 }
 declare const StatusPill: React.ForwardRefExoticComponent<StatusPillProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/primitives/status-pill.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/status-pill.tsx
 const TONE_SURFACE = {
+	violet: "bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)] border-[var(--surface-violet-border)]",
 	success: "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] border-[var(--surface-success-border)]",
 	warning: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border-[var(--surface-warning-border)]",
 	danger: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border-[var(--surface-danger-border)]",
@@ -18,6 +19,7 @@ const TONE_SURFACE = {
 * has left — the glyph — with nothing to signal that it happened.
 */
 const TONE_TEXT = {
+	violet: "text-[var(--surface-violet-text)]",
 	success: "text-[var(--surface-success-text)]",
 	warning: "text-[var(--surface-warning-text)]",
 	danger: "text-[var(--surface-danger-text)]",
@@ -35,6 +37,12 @@ function ToneGlyph({ tone }) {
 		className: "size-2 shrink-0"
 	};
 	switch (tone) {
+		case "violet": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M4 .5 7.5 4 4 7.5 .5 4Z" })
+		});
 		case "success": return /* @__PURE__ */ jsx("svg", {
 			...common,
 			"aria-hidden": "true",
@@ -99,13 +107,14 @@ function ToneGlyph({ tone }) {
 		});
 	}
 }
-const StatusPill = React.forwardRef(({ className, tone, children, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs("span", {
+const StatusPill = React.forwardRef(({ className, tone, children, icon, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs("span", {
 	ref,
 	className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-medium", size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm", bare ? "border border-transparent bg-transparent px-0" : cn("border", TONE_SURFACE[tone]), className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex", bare && TONE_TEXT[tone]),
-		children: /* @__PURE__ */ jsx(ToneGlyph, { tone })
+		"aria-hidden": "true",
+		className: cn("inline-flex [&>svg]:size-3 [&>svg]:shrink-0", bare && TONE_TEXT[tone]),
+		children: icon ?? /* @__PURE__ */ jsx(ToneGlyph, { tone })
 	}), children]
 }));
 StatusPill.displayName = "StatusPill";

package/dist/primitives/table.js

@@ -1,61 +1,62 @@
 import { cn } from "../lib/utils.js";
+import { tablePresentation } from "../presentation.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/table.tsx
 const Table = React.forwardRef(({ className, wrapper = true, wrapperProps, ...props }, ref) => {
 	const table = /* @__PURE__ */ jsx("table", {
 		ref,
-		className: cn("w-full caption-bottom text-sm", className),
+		className: cn(tablePresentation.root, className),
 		...props
 	});
 	if (!wrapper) return table;
 	const { className: wrapperClassName, ...attributes } = wrapperProps ?? {};
 	return /* @__PURE__ */ jsx("div", {
 		...attributes,
-		className: cn("relative w-full overflow-auto", wrapperClassName),
+		className: cn(tablePresentation.wrapper, wrapperClassName),
 		children: table
 	});
 });
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
 	ref,
-	className: cn("[&_tr]:border-b", className),
+	className: cn(tablePresentation.head, className),
 	...props
 }));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
 	ref,
-	className: cn("[&_tr:last-child]:border-0", className),
+	className: cn(tablePresentation.body, className),
 	...props
 }));
 TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
 	ref,
-	className: cn("border-t bg-card font-medium [&>tr]:last:border-b-0", className),
+	className: cn(tablePresentation.footer, className),
 	...props
 }));
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
 	ref,
-	className: cn("border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50", className),
+	className: cn(tablePresentation.row, className),
 	...props
 }));
 TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", {
 	ref,
-	className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className),
+	className: cn(tablePresentation.columnHeader, className),
 	...props
 }));
 TableHead.displayName = "TableHead";
 const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", {
 	ref,
-	className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+	className: cn(tablePresentation.cell, className),
 	...props
 }));
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
 	ref,
-	className: cn("mt-4 text-muted-foreground text-sm", className),
+	className: cn(tablePresentation.caption, className),
 	...props
 }));
 TableCaption.displayName = "TableCaption";

package/dist/primitives/tabs.js

@@ -1,6 +1,6 @@
-import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { tabsPresentation } from "../presentation.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
@@ -9,24 +9,15 @@ const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
 	return /* @__PURE__ */ jsx(TabsPrimitive.List, {
 		ref,
-		className: cn({
-			default: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-			pills: "inline-flex items-center gap-2",
-			underline: "inline-flex items-center gap-4 border-b border-border"
-		}[variant], className),
+		className: cn(tabsPresentation.list[variant], className),
 		...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 ${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,
-		className: cn(variants[variant], className),
+		className: cn(tabsPresentation.trigger[variant], className),
 		...props
 	});
 });

package/dist/primitives/tooltip.js

@@ -1,5 +1,7 @@
 "use client";
+import { surfaceMotion } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
+import { SurfaceMotion } from "../lib/surface-motion.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -21,11 +23,17 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 * Inverse-surface label for a control whose name is otherwise only an icon.
 * It is supplementary: the trigger still needs its own accessible name.
 */
-const TooltipContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React.forwardRef(({ className, sideOffset = 6, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 	ref,
 	sideOffset,
-	className: cn("z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md", "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "duration-150 ease-out motion-reduce:animate-none", className),
-	...props
+	className: cn("z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md", surfaceMotion, className),
+	...props,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(SurfaceMotion, {
+		kind: "tooltip",
+		asChild,
+		children
+	})
 }) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 //#endregion

package/dist/primitives.d.ts

@@ -1,4 +1,5 @@
-import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
+import { buttonVariants } from "./presentation.js";
+import { Button, ButtonProps } from "./primitives/button.js";
 import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
 import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
 import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
@@ -44,9 +45,9 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
-import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
+import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";

package/dist/primitives.js

@@ -1,4 +1,5 @@
-import { Button, buttonVariants } from "./primitives/button.js";
+import { buttonVariants } from "./presentation.js";
+import { Button } from "./primitives/button.js";
 import { Heading } from "./primitives/heading.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";

package/dist/utils.d.ts

@@ -1,8 +1,8 @@
+import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { copyText } from "./utils/copy-text.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";
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.34.0",
+  "version": "11.36.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -13,7 +13,9 @@
     "url": "https://github.com/tangle-network/brand/issues"
   },
   "homepage": "https://github.com/tangle-network/brand",
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/styles/*.css"
+  ],
   "files": [
     "dist",
     "src",
@@ -111,7 +113,14 @@
       "types": "./dist/redaction.d.ts",
       "import": "./dist/redaction.js",
       "default": "./dist/redaction.js"
-    }
+    },
+    "./presentation": {
+      "types": "./dist/presentation.d.ts",
+      "import": "./dist/presentation.js",
+      "default": "./dist/presentation.js"
+    },
+    "./styles/presentation.css": "./src/styles/presentation.css",
+    "./styles/compat.css": "./src/styles/compat.css"
   },
   "dependencies": {
     "@pierre/theme": "1.1.0",
@@ -139,6 +148,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
     "marked": "^18.0.14",
+    "motion": "14.2.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
@@ -150,7 +160,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.24.1",
+    "@tangle-network/brand": "^1.25.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",
@@ -228,7 +238,7 @@
     "design-system"
   ],
   "scripts": {
-    "build": "node scripts/generate-openui-validators.mjs --check && tsdown && node ../../scripts/validate-dist.mjs && node scripts/probe-openui-worker.mjs",
+    "build": "node scripts/generate-openui-validators.mjs --check && tsdown && node scripts/generate-presentation-css.mjs --check && node ../../scripts/validate-dist.mjs && node scripts/probe-openui-worker.mjs",
     "gen:openui-schema": "node scripts/generate-openui-validators.mjs",
     "dev": "tsdown --watch"
   }

package/src/lib/control-presentation.ts

@@ -2,10 +2,8 @@ import { focusField } from "./focus";
 import { ixField } from "./interaction";
 import { cn } from "./utils";
 
-// Time-valued tokens only: --transition-fast is a legacy duration + easing
-// shorthand, not a valid transition-duration. Reuse Brand's scoped vocabulary.
-export const controlMotion =
-  "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
+import { controlMotion } from "./motion";
+export { controlMotion } from "./motion";
 
 /**
  * The control scale. Button, Input, Textarea and SelectTrigger take the same