@tangle-network/ui 11.35.0 → 11.37.0

package/dist/presentation.js

@@ -0,0 +1,183 @@
+import { controlMotion, surfaceMotion } from "./lib/motion.js";
+import { ixControl, ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction.js";
+import { focusFieldInvalid, focusRing } from "./lib/focus.js";
+import { cn } from "./lib/utils.js";
+import { controlHeight, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation.js";
+import { cva } from "class-variance-authority";
+//#region src/presentation.ts
+/** React-free presentation. Consumers scan this published source with Tailwind. */
+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"
+	}
+});
+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: {
+		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"
+	}
+});
+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"
+};
+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"
+};
+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"
+};
+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"
+};
+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"
+};
+/** Native-dialog adapter for Hono/static markup. Radix remains the React Dialog/Sheet owner. */
+function bindDialog(dialog, trigger) {
+	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) => {
+		const target = event.target;
+		if (target instanceof Element && target.closest("[data-dialog-close]")) dialog.close();
+	};
+	const key = (event) => {
+		if (event.key !== "Tab" || !dialog.open) return;
+		const candidates = [...dialog.querySelectorAll("*")].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 instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+		const sameRadioGroup = (a, b) => 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));
+			return element === (group.find((candidate) => candidate.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) => 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);
+	};
+}
+const labelVariants = cva("font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+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)]"
+};
+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)]"
+	}
+};
+/** Canonical segmented, pill and underline navigation presentation. */
+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}`
+	}
+};
+//#endregion
+export { bindDialog, buttonVariants, cardPresentation, controlHeight, controlMotion, controlRadius, controlSizes, controlText, dialogPresentation, emptyStatePresentation, fieldPresentation, fieldSizes, fieldTouchText, helpPresentation, inputVariants, ixControlSoft, ixSelected, ixTabUnderline, labelVariants, metricLayouts, metricPresentation, tablePresentation, tabsPresentation };

package/dist/primitives/alert-dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { buttonVariants } from "./button.js";
+import { buttonVariants } from "../presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";

package/dist/primitives/alert.d.ts

@@ -1,4 +1,3 @@
-import { StatusTone } from "./status-pill.js";
 import * as React from "react";
 //#region src/primitives/alert.d.ts
 /**
@@ -13,7 +12,7 @@ import * as React from "react";
  * `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;
   /** A leading icon. It takes the tone's colour and sits beside the title. */

package/dist/primitives/button.d.ts

@@ -1,13 +1,10 @@
+import { buttonVariants } from "../presentation.js";
 import * as React from "react";
 //#region src/primitives/button.d.ts
-declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
-  size?: "compact" | "default" | "icon" | "icon-lg" | "icon-sm" | "lg" | "md" | "sm" | "touch" | "xl" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
   /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
-  size?: "default" | "md" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
+  size?: "default" | "md" | "sm" | "lg" | "xl" | "display" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/dist/primitives/button.js

@@ -1,41 +1,13 @@
+import { controlMotion } from "../lib/motion.js";
 import { ixControl, ixControlSoft, ixSelected } from "../lib/interaction.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation.js";
+import { buttonVariants } from "../presentation.js";
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/button.tsx
-const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
-	variants: {
-		variant: {
-			default: `bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] ${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`,
-			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"
-	}
-});
-const bareButton = `${focusRing} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+const bareButton = `${focusRing} ${controlMotion} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
 /** One Button render's classes: variant and size, the toggle states, then the caller's. */
 function buttonClassName(variant, size, pressed, className) {
 	const toggle = pressed === void 0 ? void 0 : `${ixControl} ${ixSelected}`;
@@ -72,6 +44,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
 		return /* @__PURE__ */ jsx(Slot, {
 			className: buttonClassName(variant, size, props["aria-pressed"], className),
 			ref,
+			"data-variant": size === "display" ? variant ?? "default" : void 0,
 			...props,
 			...isDisabled ? disabledHandlers(props) : {},
 			children: child ? React.cloneElement(child, {
@@ -91,6 +64,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
 	return /* @__PURE__ */ jsxs("button", {
 		className: buttonClassName(variant, size, props["aria-pressed"], className),
 		ref,
+		"data-variant": size === "display" ? variant ?? "default" : void 0,
 		...props,
 		disabled: disabled || loading,
 		"aria-busy": loading || props["aria-busy"],

package/dist/primitives/card.js

@@ -1,5 +1,6 @@
 import "../lib/interaction.js";
 import { cn } from "../lib/utils.js";
+import { cardPresentation } from "../presentation.js";
 import { Heading } from "./heading.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,12 +16,7 @@ import { jsx } from "react/jsx-runtime";
 const Card = React.forwardRef(({ className, variant = "default", hover = false, interactive = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cn("rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow,background-color]", "duration-[var(--transition-default)]", {
-			default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]",
-			elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]",
-			glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]",
-			sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]"
-		}[variant], (hover || interactive) && "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none", className),
+		className: cn(cardPresentation.root, cardPresentation.variants[variant], (hover || interactive) && "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none", className),
 		"data-slot": "card",
 		...props
 	});
@@ -48,7 +44,7 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
 CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
-	className: cn("p-4 [&:not(:first-child)]:pt-0", className),
+	className: cn(cardPresentation.padding, "[&:not(:first-child)]:pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";

package/dist/primitives/code-block.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlock, CodeBlockProps, CopyButton } from "../markdown/code-block.js";
+import { CodeBlock, CodeBlockProps, CopyButton, CopyButtonProps } from "../markdown/code-block.js";
 //#region src/primitives/code-block.d.ts
 export interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {}
 export declare function InlineCode({ className, children, ...props }: InlineCodeProps): import("react").JSX.Element;

package/dist/primitives/date-picker.d.ts

@@ -1,5 +1,5 @@
-import { CalendarDate, CalendarProps } from "./calendar.js";
 import { ControlSize } from "../lib/control-presentation.js";
+import { CalendarDate, CalendarProps } from "./calendar.js";
 import * as React from "react";
 //#region src/primitives/date-picker.d.ts
 export interface DatePickerProps extends Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "today" | "weekStartsOn" | "locale" | "defaultMonth"> {

package/dist/primitives/dialog.js

@@ -1,5 +1,7 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { dialogPresentation } from "../presentation.js";
+import { SurfaceMotion } from "../lib/surface-motion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -9,49 +11,60 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+const DialogOverlay = React.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.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(dialogPresentation.overlay, dialogPresentation.transition, className),
+	...props,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(SurfaceMotion, {
+		kind: "overlay",
+		asChild,
+		children
+	})
 }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
-	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, asChild, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 		ref,
-		className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]", "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200", "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", {
+		className: cn(dialogPresentation.position, dialogPresentation.surface, dialogPresentation.transition, {
 			default: "border-border",
 			sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
 		}[variant], className),
 		...props,
-		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-			className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", focusRing),
-			children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Close"
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(SurfaceMotion, {
+			kind: "dialog",
+			asChild,
+			children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+				className: cn(dialogPresentation.close, focusRing),
+				children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
 			})]
-		})]
+		})
 	})] });
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+	className: cn(dialogPresentation.header, className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+	className: cn(dialogPresentation.footer, className),
 	...props
 });
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
 	ref,
-	className: cn("font-semibold text-lg leading-none tracking-tight", className),
+	className: cn(dialogPresentation.title, className),
 	...props
 }));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
 	ref,
-	className: cn("text-muted-foreground text-sm", className),
+	className: cn(dialogPresentation.description, className),
 	...props
 }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/dist/primitives/empty-state.js

@@ -1,27 +1,28 @@
 import { cn } from "../lib/utils.js";
+import { emptyStatePresentation } from "../presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/empty-state.tsx
 const EmptyState = React.forwardRef(({ className, icon, title, description, action, titleAs: Title = "h3", ...props }, ref) => {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cn("flex flex-col items-center justify-center px-4 py-16 text-center", className),
+		className: cn(emptyStatePresentation.root, className),
 		...props,
 		children: [
 			icon && /* @__PURE__ */ jsx("div", {
-				className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground",
+				className: emptyStatePresentation.icon,
 				children: icon
 			}),
 			/* @__PURE__ */ jsx(Title, {
-				className: "font-semibold text-lg",
+				className: emptyStatePresentation.title,
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "mt-2 max-w-sm text-muted-foreground text-sm",
+				className: emptyStatePresentation.description,
 				children: description
 			}),
 			action && /* @__PURE__ */ jsx("div", {
-				className: "mt-6",
+				className: emptyStatePresentation.action,
 				children: action
 			})
 		]

package/dist/primitives/heading.d.ts

@@ -5,6 +5,7 @@ export type HeadingVariant = "display" | "hero" | "page" | "section" | "subsecti
 export interface HeadingProps extends Omit<React.HTMLAttributes<HTMLElement>, "role"> {
   /** Visual treatment, independent of the rendered element. Defaults to section. */
   variant?: HeadingVariant;
+  presentation?: "operational" | "expressive";
   /** Semantic element; changing it does not change the visual variant. */
   as?: React.ElementType;
   /**

package/dist/primitives/heading.js

@@ -22,13 +22,14 @@ const DEFAULT_TAG = {
 * One renderer for page, section and card titles. Use at most one default
 * display/page h1 per page; choose `as` according to the document hierarchy.
 */
-const Heading = React.forwardRef(({ variant, role, as, className, ...props }, ref) => {
+const Heading = React.forwardRef(({ variant, role, as, className, presentation, ...props }, ref) => {
 	const legacyVariant = role && Object.prototype.hasOwnProperty.call(VARIANT_CLASS, role) ? role : void 0;
 	const visualVariant = variant ?? legacyVariant ?? "section";
 	const Tag = as ?? DEFAULT_TAG[visualVariant];
 	return /* @__PURE__ */ jsx(Tag, {
 		ref,
-		className: cn("[overflow-wrap:anywhere]", VARIANT_CLASS[visualVariant], className),
+		className: cn("[overflow-wrap:anywhere]", presentation ? presentation === "expressive" ? "tangle-display" : "tangle-heading" : VARIANT_CLASS[visualVariant], className),
+		"data-variant": presentation ? visualVariant : void 0,
 		role: legacyVariant ? void 0 : role,
 		...props
 	});

package/dist/primitives/help-text.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { helpPresentation } from "../presentation.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/help-text.tsx
@@ -10,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 const HelpText = React.forwardRef(({ className, tone = "hint", ...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	"data-tone": tone,
-	className: cn("text-[length:var(--font-size-help,0.75rem)] leading-4", tone === "error" ? "font-medium text-[var(--surface-danger-text)]" : "text-[var(--text-dim)]", className),
+	className: cn(helpPresentation.root, helpPresentation[tone], className),
 	...props
 }));
 HelpText.displayName = "HelpText";

package/dist/primitives/input.d.ts

@@ -1,10 +1,7 @@
+import { inputVariants } from "../presentation.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/primitives/input.d.ts
-declare const inputVariants: (props?: ({
-  variant?: "default" | "error" | "sandbox" | null | undefined;
-  size?: "compact" | "default" | "lg" | "md" | "sm" | "touch" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
   label?: string;
   error?: string;

package/dist/primitives/input.js

@@ -1,34 +1,13 @@
 "use client";
-import { focusFieldInvalid } from "../lib/focus.js";
+import "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation.js";
+import { controlRadius, controlText, fieldPresentation, fieldTouchText } from "../lib/control-presentation.js";
+import { inputVariants } from "../presentation.js";
 import { HelpText } from "./help-text.js";
 import { Label } from "./label.js";
-import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-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: {
-		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"
-	}
-});
 function descriptionIds(...ids) {
 	return [...new Set(ids.join(" ").split(/\s+/).filter(Boolean))].join(" ") || void 0;
 }

package/dist/primitives/label.js

@@ -1,11 +1,10 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { cva } from "class-variance-authority";
+import { labelVariants } from "../presentation.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
 //#region src/primitives/label.tsx
-const labelVariants = cva("font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 	ref,
 	className: cn(labelVariants(), className),

package/dist/primitives/metric-strip.js

@@ -1,17 +1,12 @@
 import { cn } from "../lib/utils.js";
+import { metricLayouts, metricPresentation } from "../presentation.js";
 import { StatusPill } from "./status-pill.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/metric-strip.tsx
-const layouts = {
-	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"
-};
 const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
 	ref,
-	className: cn("grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]", layouts[columns], className),
+	className: cn(metricPresentation.strip, metricLayouts[columns], className),
 	...props,
 	children
 }));
@@ -19,11 +14,11 @@ MetricStrip.displayName = "MetricStrip";
 /** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef(({ className, label, value, hint, attention, icon, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
-	className: cn("min-w-0 border-border p-4 sm:p-5", className),
+	className: cn(metricPresentation.item, className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsxs("dt", {
-			className: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
+			className: metricPresentation.label,
 			children: [
 				icon != null && icon !== false && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
@@ -31,7 +26,7 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ico
 					children: icon
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+					className: metricPresentation.labelText,
 					children: label
 				}),
 				attention && /* @__PURE__ */ jsx(StatusPill, {
@@ -41,12 +36,12 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ico
 			]
 		}),
 		/* @__PURE__ */ jsx("dd", {
-			className: cn("mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
+			className: cn(metricPresentation.value, attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
 			title: typeof value === "string" ? value : void 0,
 			children: value
 		}),
 		hint !== void 0 && hint !== null && hint !== false && hint !== "" && /* @__PURE__ */ jsx("dd", {
-			className: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs",
+			className: metricPresentation.hint,
 			title: typeof hint === "string" ? hint : void 0,
 			children: hint
 		})

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

@@ -7,6 +7,7 @@ import * as React from "react";
  */
 export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
   title: React.ReactNode;
+  presentation?: "operational" | "expressive";
   description?: React.ReactNode;
   /** Canonical action slot. If supplied (even null), takes precedence over action. */
   actions?: React.ReactNode;