@tangle-network/ui 11.34.0 → 11.36.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.36.0
+
+### Minor Changes
+
+- 19a10d9: Extend PageShell reading slots, Heading and PageHeader opt-in presentation, and Button display size. Publish React-free primitive presentation classes and native-dialog binding for Hono without changing existing control defaults.
+
+## 11.35.0
+
+### Minor Changes
+
+- 19e3cd6: SegmentedControl: a strip whose options outgrow it now shows a chevron at each edge with options past it, instead of an edge fade that a host's inline padding or a cut between two options made invisible. The chevrons page the strip on click or tap and take no room in the row. The selected option is kept fully in view clear of the chevrons, and this now also works for a row control a host made scroll with `flex-nowrap overflow-x-auto`.
+
 ## 11.34.0
 
 ### Minor Changes

package/README.md

@@ -2,7 +2,7 @@
 
 Generic React UI components for Tangle products. Imports tokens from `@tangle-network/brand` (peer dep). Tailwind v4-native.
 
-Component visual precedent is governed by the repo-level [brand guidelines](../../docs/brand-guidelines.md) and [component audit](../../docs/component-audit.md). Storybook examples are test surfaces; they are not automatically approved brand patterns.
+Component visual precedent is governed by the repo-level [design bible](../../docs/design-bible.md) and [component audit](../../docs/component-audit.md). Storybook examples are test surfaces; they are not automatically approved brand patterns.
 
 ## Install
 

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
+import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
+import { buttonVariants } from "./presentation.js";
+import { Button, ButtonProps } from "./primitives/button.js";
 import { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, SessionUser, UserMenu, UserMenuProps } from "./auth/auth.js";
 import { LoginLayout, LoginLayoutProps } from "./auth/login-layout.js";
 import "./auth.js";
@@ -88,9 +90,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";
@@ -120,7 +122,6 @@ 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";
 import "./utils.js";
 import { CommandPreview, CommandPreviewProps } from "./tool-previews/command-preview.js";
 import { WriteFilePreview, WriteFilePreviewProps } from "./tool-previews/write-file-preview.js";

package/dist/index.js

@@ -1,7 +1,8 @@
 import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
-import { 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/lib/control-presentation.d.ts

@@ -1,3 +1,4 @@
+import { controlMotion } from "./motion.js";
 //#region src/lib/control-presentation.d.ts
 /**
  * The control scale. Button, Input, Textarea and SelectTrigger take the same
@@ -7,4 +8,36 @@
  * Brand stylesheet at the same pixels.
  */
 export type ControlSize = "sm" | "md" | "lg";
-//#endregion
+export declare const controlHeight: {
+  readonly sm: "h-[var(--control-height-sm,2rem)]";
+  readonly md: "h-[var(--control-height,2.25rem)]";
+  readonly lg: "h-[var(--control-height-lg,2.75rem)]";
+};
+export declare const controlText: {
+  readonly sm: "text-[length:var(--control-text-sm,0.75rem)]";
+  readonly md: "text-[length:var(--control-text-md,0.875rem)]";
+  readonly lg: "text-[length:var(--control-text-lg,1rem)]";
+};
+export declare const controlRadius: {
+  readonly sm: "rounded-md";
+  readonly md: "rounded-lg";
+  readonly lg: "rounded-lg";
+};
+/**
+ * Field text never drops below 16px on a coarse pointer: iOS Safari zooms the
+ * page on focus for anything smaller.
+ */
+export declare const fieldTouchText = "pointer-coarse:text-base";
+/** Field sizes: the control scale with field padding. */
+export declare const fieldSizes: {
+  readonly sm: string;
+  readonly md: string;
+  readonly lg: string;
+};
+export declare const controlSizes: {
+  readonly compact: "h-[var(--control-height)] px-3 py-1 text-sm";
+  readonly touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base";
+};
+export declare const fieldPresentation: string;
+//#endregion
+export { controlMotion };

package/dist/lib/control-presentation.js

@@ -1,8 +1,8 @@
+import { controlMotion } from "./motion.js";
 import { ixField } from "./interaction.js";
 import { focusField } from "./focus.js";
 import { cn } from "./utils.js";
 //#region src/lib/control-presentation.ts
-const controlMotion = "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
 const controlHeight = {
 	sm: "h-[var(--control-height-sm,2rem)]",
 	md: "h-[var(--control-height,2.25rem)]",

package/dist/lib/focus.d.ts

@@ -27,7 +27,7 @@
  * replaces it through tailwind-merge; the focus border outranks it because
  * Tailwind emits `focus:` after `hover:`.
  */
-export declare 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)]";
+export declare const focusField = "border-border [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 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
  * composer around a textarea and its buttons. It lights while a FIELD inside
@@ -45,7 +45,7 @@ export declare const focusField = "border-border transition-[border-color,box-sh
  * own well fill, the `--field-border` hairline and the green hover edge. The
  * borderless field inside stays transparent.
  */
-export declare const focusFieldWithin = "focus-field-within transition-[border-color,box-shadow] duration-150 ease-out bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)] 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)]";
+export declare const focusFieldWithin = "focus-field-within [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 bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)] 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 declare const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
 /** Keyboard-only focus for a control: a 1px focus line with the halo beyond it. */

package/dist/lib/focus.js

@@ -1,3 +1,4 @@
+import { controlMotion } from "./motion.js";
 import { ixField } from "./interaction.js";
 //#region src/lib/focus.ts
 /**
@@ -28,7 +29,7 @@ import { ixField } from "./interaction.js";
 * replaces it through tailwind-merge; the focus border outranks it because
 * Tailwind emits `focus:` after `hover:`.
 */
-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)]";
+const focusField = `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
 * composer around a textarea and its buttons. It lights while a FIELD inside
@@ -46,7 +47,7 @@ const focusField = "border-border transition-[border-color,box-shadow] duration-
 * own well fill, the `--field-border` hairline and the green hover edge. The
 * borderless field inside stays transparent.
 */
-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)]`;
+const focusFieldWithin = `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`. */
 const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
 const focusRingBase = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)]";

package/dist/lib/motion.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/motion.d.ts
+/** Brand motion roles contain duration AND easing; consume complete shorthands. */
+export declare 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";
+//#endregion

package/dist/lib/motion.js

@@ -0,0 +1,7 @@
+//#region src/lib/motion.ts
+/** Brand motion roles contain duration AND easing; consume complete shorthands. */
+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. */
+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!";
+//#endregion
+export { controlMotion, surfaceMotion };

package/dist/lib/surface-motion.js

@@ -0,0 +1,84 @@
+"use client";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { animate } from "motion";
+//#region src/lib/surface-motion.tsx
+/** Radix owns state, focus and presence; Motion only retargets the visible object. */
+const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-state": state, ...props }, forwardedRef) => {
+	const element = React.useRef(null);
+	const initialized = React.useRef(false);
+	const controls = React.useRef(void 0);
+	const ref = React.useCallback((node) => {
+		element.current = node;
+		if (typeof forwardedRef === "function") {
+			const cleanup = 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)") : void 0;
+		const run = () => {
+			const closed = state === "closed";
+			const bounds = node.getBoundingClientRect();
+			const hidden = {
+				opacity: kind === "sheet" ? 1 : 0,
+				scale: kind === "dialog" || kind === "tooltip" ? .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);
+			const time = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(style.animationDuration.split(",")[0].trim());
+			const seconds = time ? Number(time[1]) / (time[2] === "ms" ? 1e3 : 1) : 0;
+			const place = (value) => {
+				node.style.opacity = String(value.opacity);
+				node.style.transform = `translateX(${value.x}px) translateY(${value.y}px) scale(${value.scale})`;
+			};
+			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;
+			}
+			const frequency = 12 / seconds;
+			controls.current = animate(node, target, {
+				type: "spring",
+				stiffness: frequency * frequency,
+				damping: 2 * frequency,
+				restDelta: .001,
+				restSpeed: .01
+			});
+		};
+		run();
+		preference?.addEventListener("change", run);
+		return () => preference?.removeEventListener("change", run);
+	}, [
+		state,
+		kind,
+		side
+	]);
+	React.useEffect(() => () => controls.current?.stop(), []);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		...props,
+		"data-state": state,
+		ref
+	});
+});
+SurfaceMotion.displayName = "SurfaceMotion";
+//#endregion
+export { SurfaceMotion };

package/dist/presentation.d.ts

@@ -0,0 +1,88 @@
+import { controlMotion } from "./lib/motion.js";
+import { controlHeight, controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation.js";
+import { ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction.js";
+//#region src/presentation.d.ts
+export declare const buttonVariants: (props?: ({
+  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
+  size?: "compact" | "default" | "display" | "icon" | "icon-lg" | "icon-sm" | "lg" | "md" | "sm" | "touch" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export 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 declare const tablePresentation: {
+  readonly root: "w-full caption-bottom text-sm";
+  readonly wrapper: "relative w-full overflow-auto";
+  readonly head: "[&_tr]:border-b";
+  readonly body: "[&_tr:last-child]:border-0";
+  readonly footer: "border-t bg-card font-medium [&>tr]:last:border-b-0";
+  readonly row: "border-border border-b [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 hover:bg-muted/50 data-[state=selected]:bg-muted/50";
+  readonly columnHeader: "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0";
+  readonly cell: "p-4 align-middle [&:has([role=checkbox])]:pr-0";
+  readonly caption: "mt-4 text-muted-foreground text-sm";
+};
+export declare const emptyStatePresentation: {
+  readonly root: "flex flex-col items-center justify-center px-4 py-16 text-center";
+  readonly icon: "mb-4 rounded-full bg-muted p-4 text-muted-foreground";
+  readonly title: "font-semibold text-lg";
+  readonly description: "mt-2 max-w-sm text-muted-foreground text-sm";
+  readonly action: "mt-6";
+};
+export declare const metricPresentation: {
+  readonly strip: "grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]";
+  readonly item: "min-w-0 border-border p-4 sm:p-5";
+  readonly value: "mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl";
+  readonly label: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm";
+  readonly labelText: "min-w-0 whitespace-normal [overflow-wrap:anywhere]";
+  readonly hint: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs";
+};
+export declare const metricLayouts: {
+  readonly 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";
+  readonly 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";
+  readonly 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";
+  readonly 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";
+};
+export declare const dialogPresentation: {
+  readonly overlay: "fixed inset-0 z-50 bg-black/40";
+  readonly transition: "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!";
+  readonly position: "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]";
+  readonly surface: "gap-4 rounded-lg border bg-card p-6 shadow-lg";
+  readonly close: "absolute top-4 right-4 rounded-sm opacity-70 [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 hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground";
+  readonly header: "flex flex-col space-y-1.5 text-center sm:text-left";
+  readonly footer: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2";
+  readonly title: "font-semibold text-lg leading-none tracking-tight";
+  readonly description: "text-muted-foreground text-sm";
+};
+/** Native-dialog adapter for Hono/static markup. Radix remains the React Dialog/Sheet owner. */
+export declare function bindDialog(dialog: HTMLDialogElement, trigger: HTMLElement): () => void;
+export declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const helpPresentation: {
+  root: string;
+  error: string;
+  hint: string;
+};
+export declare const cardPresentation: {
+  readonly root: "rounded-[var(--radius-lg)] border text-card-foreground [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";
+  readonly padding: "p-4";
+  readonly variants: {
+    readonly default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]";
+    readonly elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]";
+    readonly glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]";
+    readonly sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]";
+  };
+};
+/** Canonical segmented, pill and underline navigation presentation. */
+export declare const tabsPresentation: {
+  readonly list: {
+    readonly default: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground";
+    readonly pills: "inline-flex items-center gap-2";
+    readonly underline: "inline-flex items-center gap-4 border-b border-border";
+  };
+  readonly trigger: {
+    readonly default: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium [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 focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)] aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]";
+    readonly pills: "inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium [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 focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:text-muted-foreground hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)] aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]";
+    readonly underline: "inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium [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 focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]";
+  };
+};
+//#endregion
+export { controlHeight, controlMotion, controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText, ixControlSoft, ixSelected, ixTabUnderline };

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;