@tangle-network/ui 11.35.0 → 11.36.0

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.35.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.2",
+    "@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

package/src/lib/focus.ts

@@ -1,3 +1,4 @@
+import { controlMotion } from "./motion";
 import { ixField } from "./interaction";
 
 /**
@@ -30,7 +31,7 @@ import { ixField } from "./interaction";
  * Tailwind emits `focus:` after `hover:`.
  */
 export const focusField =
-  "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
+  `border-border ${controlMotion} hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]`;
 
 /**
  * The field treatment for a container that wraps a borderless field, such as a
@@ -50,7 +51,7 @@ export const focusField =
  * borderless field inside stays transparent.
  */
 export const focusFieldWithin =
-  `focus-field-within transition-[border-color,box-shadow] duration-150 ease-out ${ixField} has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]`;
+  `focus-field-within ${controlMotion} ${ixField} has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]`;
 
 /** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
 export const focusFieldInvalid =

package/src/lib/motion.ts

@@ -0,0 +1,7 @@
+/** Brand motion roles contain duration AND easing; consume complete shorthands. */
+export const controlMotion =
+  "[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";
+
+/** Radix presence markers carry the scoped role; SurfaceMotion owns interruptible geometry. */
+export const surfaceMotion =
+  "data-[state=open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=delayed-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=instant-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=closed]:[animation:tangle-surface-absent_var(--motion-dismiss)_both] motion-reduce:animate-none!";

package/src/lib/surface-motion.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { animate } from "motion";
+
+type Side = "top" | "right" | "bottom" | "left";
+type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
+  kind: "dialog" | "sheet" | "overlay" | "tooltip";
+  side?: Side;
+  asChild?: boolean;
+  "data-state"?: string;
+};
+
+/** Radix owns state, focus and presence; Motion only retargets the visible object. */
+export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
+  ({ kind, side = "right", asChild, "data-state": state, ...props }, forwardedRef) => {
+    const element = React.useRef<HTMLDivElement | null>(null);
+    const initialized = React.useRef(false);
+    const controls = React.useRef<ReturnType<typeof animate> | undefined>(undefined);
+    const ref = React.useCallback<React.RefCallback<HTMLDivElement>>((node) => {
+      element.current = node;
+      if (typeof forwardedRef === "function") {
+        const cleanup: unknown = forwardedRef(node);
+        if (typeof cleanup === "function") return () => { element.current = null; cleanup(); };
+      } else if (forwardedRef) forwardedRef.current = node;
+    }, [forwardedRef]);
+
+    React.useLayoutEffect(() => {
+      const node = element.current;
+      if (!node) return;
+      const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
+      const run = () => {
+        const closed = state === "closed";
+        const bounds = node.getBoundingClientRect();
+        const hidden = {
+          opacity: kind === "sheet" ? 1 : 0,
+          scale: kind === "dialog" || kind === "tooltip" ? 0.98 : 1,
+          x: kind === "sheet" ? side === "left" ? -bounds.width : side === "right" ? bounds.width : 0 : 0,
+          y: kind === "sheet" ? side === "top" ? -bounds.height : side === "bottom" ? bounds.height : 0 : 0,
+        };
+        const target = closed ? hidden : { opacity: 1, scale: 1, x: 0, y: 0 };
+        const style = getComputedStyle(node);
+        // The nonvisual marker resolves the full role, including scoped calc().
+        const time = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(style.animationDuration.split(",")[0]!.trim());
+        const seconds = time ? Number(time[1]) / (time[2] === "ms" ? 1000 : 1) : 0;
+        const place = (value: typeof target) => {
+          node.style.opacity = String(value.opacity);
+          node.style.transform = `translateX(${value.x}px) translateY(${value.y}px) scale(${value.scale})`;
+        };
+        // Missing styles and reduced motion settle synchronously. No semantic
+        // transition waits for a JavaScript completion callback.
+        if (preference?.matches || seconds <= 0 || style.animationName === "none") {
+          controls.current?.stop();
+          place(target);
+          if (initialized.current) controls.current = animate(node, target, { duration: 0 });
+          return;
+        }
+        if (!initialized.current) { place(hidden); initialized.current = true; }
+        // Critically damped response: <0.01% residual at the role's deadline.
+        // Reusing this element's Motion values preserves position and velocity
+        // on reversal; a duration-based spring would discard velocity.
+        const frequency = 12 / seconds;
+        controls.current = animate(node, target, {
+          type: "spring", stiffness: frequency * frequency, damping: 2 * frequency,
+          restDelta: 0.001, restSpeed: 0.01,
+        });
+      };
+      run();
+      preference?.addEventListener("change", run);
+      return () => preference?.removeEventListener("change", run);
+    }, [state, kind, side]);
+    React.useEffect(() => () => controls.current?.stop(), []);
+    const Component = asChild ? Slot : "div";
+    return <Component {...props} data-state={state} ref={ref} />;
+  },
+);
+SurfaceMotion.displayName = "SurfaceMotion";

package/src/presentation.ts

@@ -0,0 +1,205 @@
+/** React-free presentation. Consumers scan this published source with Tailwind. */
+import { surfaceMotion } from "./lib/motion";
+import { cva } from "class-variance-authority";
+import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation";
+import { focusRing, focusFieldInvalid } from "./lib/focus";
+import { ixControl, ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction";
+import { cn } from "./lib/utils";
+export { controlHeight, controlMotion, controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation";
+
+export const buttonVariants = cva(
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium ${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] ${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`,
+        md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
+        sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} px-3`,
+        lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} px-7`,
+        display: "tangle-control-display",
+        xl: "h-13 rounded-xl px-9 text-base",
+        icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
+        "icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
+        "icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
+        ...controlSizes,
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+
+export const inputVariants = cva(
+  cn(
+    "flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium",
+    fieldPresentation,
+    fieldTouchText,
+  ),
+  {
+    variants: {
+      // `default` and `sandbox` render the same field; both names stay valid.
+      variant: {
+        default: "",
+        sandbox: "",
+        error: focusFieldInvalid,
+      },
+      size: {
+        default: fieldSizes.md,
+        md: fieldSizes.md,
+        sm: fieldSizes.sm,
+        lg: fieldSizes.lg,
+        compact: cn(fieldSizes.md, controlSizes.compact),
+        touch: cn(fieldSizes.md, controlSizes.touch),
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+
+export const tablePresentation = {
+  root: "w-full caption-bottom text-sm",
+  wrapper: "relative w-full overflow-auto",
+  head: "[&_tr]:border-b",
+  body: "[&_tr:last-child]:border-0",
+  footer: "border-t bg-card font-medium [&>tr]:last:border-b-0",
+  row: `border-border border-b ${controlMotion} hover:bg-muted/50 data-[state=selected]:bg-muted/50`,
+  columnHeader: "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+  cell: "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+  caption: "mt-4 text-muted-foreground text-sm",
+} as const;
+
+export const emptyStatePresentation = {
+  root: "flex flex-col items-center justify-center px-4 py-16 text-center",
+  icon: "mb-4 rounded-full bg-muted p-4 text-muted-foreground",
+  title: "font-semibold text-lg",
+  description: "mt-2 max-w-sm text-muted-foreground text-sm",
+  action: "mt-6",
+} as const;
+
+export const metricPresentation = {
+  strip: "grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]",
+  item: "min-w-0 border-border p-4 sm:p-5",
+  value: "mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
+  label: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
+  labelText: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+  hint: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs",
+} as const;
+
+export const metricLayouts = {
+  3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
+  4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
+  5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
+  6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l",
+} as const;
+
+export const dialogPresentation = {
+  overlay: "fixed inset-0 z-50 bg-black/40",
+  transition: surfaceMotion,
+  position: "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+  surface: "gap-4 rounded-lg border bg-card p-6 shadow-lg",
+  close: `absolute top-4 right-4 rounded-sm opacity-70 ${controlMotion} hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground`,
+  header: "flex flex-col space-y-1.5 text-center sm:text-left",
+  footer: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+  title: "font-semibold text-lg leading-none tracking-tight",
+  description: "text-muted-foreground text-sm",
+} as const;
+
+/** Native-dialog adapter for Hono/static markup. Radix remains the React Dialog/Sheet owner. */
+export function bindDialog(dialog: HTMLDialogElement, trigger: HTMLElement): () => void {
+  const sync = () => trigger.setAttribute("aria-expanded", String(dialog.open));
+  const show = () => { if (!dialog.open) dialog.showModal(); sync(); };
+  const close = () => { sync(); trigger.focus(); };
+  const click = (event: MouseEvent) => {
+    const target = event.target;
+    if (target instanceof Element && target.closest("[data-dialog-close]")) dialog.close();
+  };
+  // Native modal inertness blocks page controls, but Tab can still visit browser
+  // chrome at a boundary. Keep this reading surface's keyboard cycle local.
+  const key = (event: KeyboardEvent) => {
+    if (event.key !== "Tab" || !dialog.open) return;
+    const candidates = [...dialog.querySelectorAll<HTMLElement>("*")]
+      .filter(element => (element.tabIndex >= 0 || (element.isContentEditable && !element.hasAttribute("tabindex")))
+        && !element.matches(":disabled") && !element.closest("[inert]")
+        && element.getClientRects().length > 0 && getComputedStyle(element).visibility === "visible");
+    const radio = (element: Element): element is HTMLInputElement => element instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+    const sameRadioGroup = (a: Element, b: Element) => radio(a) && radio(b) && a.name === b.name && a.form === b.form && a.getRootNode() === b.getRootNode();
+    const stops = candidates.filter(element => {
+      if (!radio(element)) return true;
+      const group = candidates.filter(candidate => sameRadioGroup(element, candidate));
+      const checked = group.find(candidate => (candidate as HTMLInputElement).checked);
+      return element === (checked ?? (event.shiftKey ? group.at(-1) : group[0]));
+    }).sort((a, b) => (a.tabIndex > 0 ? a.tabIndex : Infinity) - (b.tabIndex > 0 ? b.tabIndex : Infinity));
+    const first = stops[0], last = stops.at(-1), active = document.activeElement;
+    if (!first) { event.preventDefault(); dialog.focus(); return; }
+    const atBoundary = (boundary: HTMLElement) => active === boundary || (active instanceof Element && sameRadioGroup(active, boundary));
+    if (active === dialog || (event.shiftKey ? atBoundary(first) : atBoundary(last!))) {
+      event.preventDefault(); (event.shiftKey ? last! : first).focus();
+    }
+  };
+  trigger.setAttribute("aria-haspopup", "dialog");
+  if (dialog.id) trigger.setAttribute("aria-controls", dialog.id);
+  sync();trigger.addEventListener("click",show);dialog.addEventListener("close",close);dialog.addEventListener("click",click);dialog.addEventListener("keydown",key);
+  return () => {trigger.removeEventListener("click",show);dialog.removeEventListener("close",close);dialog.removeEventListener("click",click);dialog.removeEventListener("keydown",key);};
+}
+
+export const labelVariants = cva(
+  "font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+export const helpPresentation = {
+ root: "text-[length:var(--font-size-help,0.75rem)] leading-4",
+ error: "font-medium text-[var(--surface-danger-text)]",
+ hint: "text-[var(--text-dim)]",
+};
+
+export const cardPresentation = {
+ root: `rounded-[var(--radius-lg)] border text-card-foreground ${controlMotion}`,
+ padding: "p-4",
+ variants: {
+    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)]",
+  },
+} as const;
+
+/** Canonical segmented, pill and underline navigation presentation. */
+export const tabsPresentation = {
+list: {
+    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",
+  },
+trigger: {
+    default:
+      `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ${controlMotion} ${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 ${controlMotion} ${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 ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground ${ixTabUnderline}`,
+  }
+} as const;
+export { ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction";

package/src/primitives/alert.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
-import type { StatusTone } from "./status-pill";
 
 /**
  * An inline message that stays on the page: a policy note above a form, a
@@ -14,7 +13,7 @@ import type { StatusTone } from "./status-pill";
  * `danger` and `warning` announce themselves (`role="alert"`); the quieter
  * tones are `role="status"` so a screen reader is not interrupted by a note.
  */
-export type AlertTone = Exclude<StatusTone, "running">;
+export type AlertTone = "neutral" | "info" | "success" | "warning" | "danger";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   tone?: AlertTone;