@tangle-network/ui 11.35.0 → 11.37.0

package/dist/primitives/page-header.js

@@ -4,14 +4,14 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/page-header.tsx
 const hasContent = (node) => Boolean(node) || node === 0;
-const PageHeader = React.forwardRef(({ className, title, description, actions, action, eyebrow, meta, titleId, titleAs, level = 1, ...props }, ref) => {
+const PageHeader = React.forwardRef(({ className, presentation, title, description, actions, action, eyebrow, meta, titleId, titleAs, level = 1, ...props }, ref) => {
 	const resolvedActions = actions === void 0 ? action : actions;
 	return /* @__PURE__ */ jsxs("header", {
 		ref,
-		className: cn("mb-6 min-w-0", className),
+		className: cn(presentation === "expressive" ? "tangle-intro" : presentation === "operational" ? "tangle-page-header" : "mb-6 min-w-0", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-wrap items-start justify-between gap-x-6 gap-y-3",
+			className: presentation ? "tangle-page-header-main" : "flex min-w-0 flex-wrap items-start justify-between gap-x-6 gap-y-3",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-[1_1_16rem]",
 				children: [
@@ -22,18 +22,19 @@ const PageHeader = React.forwardRef(({ className, title, description, actions, a
 					}),
 					/* @__PURE__ */ jsx(Heading, {
 						id: titleId,
-						variant: level === 1 ? "page" : "section",
+						variant: presentation === "expressive" ? "display" : level === 1 ? "page" : "section",
+						presentation,
 						as: titleAs ?? (level === 1 ? "h1" : "h2"),
 						className: "text-balance",
 						children: title
 					}),
 					hasContent(description) && /* @__PURE__ */ jsx("p", {
-						className: "mt-1 max-w-prose text-muted-foreground text-sm [overflow-wrap:anywhere]",
+						className: presentation === "expressive" ? "tangle-intro-description" : presentation ? "tangle-page-description" : "mt-1 max-w-prose text-muted-foreground text-sm [overflow-wrap:anywhere]",
 						children: description
 					})
 				]
 			}), hasContent(resolvedActions) && /* @__PURE__ */ jsx("div", {
-				className: "flex min-w-0 max-w-full flex-wrap items-center gap-2 [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
+				className: presentation === "expressive" ? "tangle-intro-actions" : "flex min-w-0 max-w-full flex-wrap items-center gap-2 [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
 				children: resolvedActions
 			})]
 		}), hasContent(meta) && /* @__PURE__ */ jsx("div", {

package/dist/primitives/page-shell.d.ts

@@ -1,7 +1,13 @@
 import { ReactNode } from "react";
 //#region src/primitives/page-shell.d.ts
 export interface PageShellProps {
-  children: ReactNode;
+  children?: ReactNode;
+  /** Optional reading layout. Content, routing and navigation interaction stay caller-owned. */
+  navigation?: ReactNode;
+  article?: ReactNode;
+  outline?: ReactNode;
+  navigationLabel?: string;
+  outlineLabel?: string;
   className?: string;
 }
 /**
@@ -10,5 +16,5 @@ export interface PageShellProps {
  * The caller owns landmarks, routing, auth, navigation and data state. Use
  * className to override the bound/gutters, or omit it for a workbench layout.
  */
-export declare function PageShell({ children, className }: PageShellProps): import("react").JSX.Element;
+export declare function PageShell({ children, className, navigation, article, outline, navigationLabel, outlineLabel }: PageShellProps): import("react").JSX.Element;
 //#endregion

package/dist/primitives/page-shell.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/page-shell.tsx
 /**
 * Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
@@ -7,7 +7,26 @@ import { jsx } from "react/jsx-runtime";
 * The caller owns landmarks, routing, auth, navigation and data state. Use
 * className to override the bound/gutters, or omit it for a workbench layout.
 */
-function PageShell({ children, className }) {
+function PageShell({ children, className, navigation, article, outline, navigationLabel = "Sections", outlineLabel = "On this page" }) {
+	if (navigation || article || outline) return /* @__PURE__ */ jsxs("div", {
+		className: cn("tangle-reading-shell", className),
+		children: [
+			navigation && /* @__PURE__ */ jsx("nav", {
+				"aria-label": navigationLabel,
+				className: "tangle-reading-nav",
+				children: navigation
+			}),
+			/* @__PURE__ */ jsx("article", {
+				className: "tangle-reading-article",
+				children: article ?? children
+			}),
+			outline && /* @__PURE__ */ jsx("aside", {
+				"aria-label": outlineLabel,
+				className: "tangle-reading-outline",
+				children: outline
+			})
+		]
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("mx-auto min-w-0 w-full max-w-6xl space-y-8 px-6 py-8 lg:px-8", className),
 		children

package/dist/primitives/pagination.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { buttonVariants } from "./button.js";
+import { buttonVariants } from "../presentation.js";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";

package/dist/primitives/popover.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 PopoverPrimitive from "@radix-ui/react-popover";
@@ -13,12 +15,18 @@ const PopoverClose = PopoverPrimitive.Close;
 * shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
 * for wider content and keep long text wrapping inside it.
 */
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
-	className: cn("z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden", "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", "motion-reduce:animate-none", className),
-	...props
+	className: cn("z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden", surfaceMotion, className),
+	...props,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(SurfaceMotion, {
+		kind: "popover",
+		asChild,
+		children
+	})
 }) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 //#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.35.0",
+  "version": "11.37.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,19 @@
       "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",
+    "./code-presentation": {
+      "types": "./dist/code-presentation.d.ts",
+      "import": "./dist/code-presentation.js",
+      "default": "./dist/code-presentation.js"
+    },
+    "./styles/compat.css": "./src/styles/compat.css"
   },
   "dependencies": {
     "@pierre/theme": "1.1.0",
@@ -139,6 +153,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
     "marked": "^18.0.14",
+    "motion": "14.1.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
@@ -150,7 +165,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 +243,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/code-presentation.ts

@@ -0,0 +1,2 @@
+/** Framework-neutral highlighting, copy and tabs; no React runtime dependency. */
+export { codeBlockGrammar, highlightCode, codePreStyle, codeTextStyle, codePresentation, bindCopyButton, bindCodeTabs, createCopyFeedback, interactionBudgets, writeClipboard, apiMetadataText, schemaRows, type CopyFeedback, type InteractionBudgets, type CodeExample, type ApiMetadata, type ApiField, type TokenStyle } from "./lib/code-presentation";