@tangle-network/ui 11.34.0 → 11.36.0

package/src/lib/focus.ts

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

package/src/lib/motion.ts

@@ -0,0 +1,7 @@
+/** Brand motion roles contain duration AND easing; consume complete shorthands. */
+export const controlMotion =
+  "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none";
+
+/** Radix presence markers carry the scoped role; SurfaceMotion owns interruptible geometry. */
+export const surfaceMotion =
+  "data-[state=open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=delayed-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=instant-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=closed]:[animation:tangle-surface-absent_var(--motion-dismiss)_both] motion-reduce:animate-none!";

package/src/lib/surface-motion.tsx

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

package/src/presentation.ts

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

package/src/primitives/alert.tsx

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

package/src/primitives/button.tsx

@@ -1,7 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
+import { buttonVariants } from "../presentation";
 import * as React from "react";
-import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation";
 import { focusRing } from "../lib/focus";
 import { ixControl, ixControlSoft, ixSelected } from "../lib/interaction";
 import { cn } from "../lib/utils";
@@ -14,43 +13,6 @@ import { cn } from "../lib/utils";
 // `ixControl` (green edge and glow on hover, press and after a click); ghost,
 // link and bare take `ixControlSoft`, a wash that never glows. A toggle button
 // (any `aria-pressed`) adds `ixControl` + `ixSelected` whatever its variant.
-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",
-    },
-  },
-);
 
 // `bare` keeps the shared focus ring, disabled and loading behavior and drops
 // every surface, size and type class. It is for pressable rows, tiles and pills
@@ -75,7 +37,7 @@ 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;
@@ -136,6 +98,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         <Slot
           className={buttonClassName(variant, size, props["aria-pressed"], className)}
           ref={ref}
+          data-variant={size === "display" ? variant ?? "default" : undefined}
           {...props}
           {...(isDisabled ? disabledHandlers(props) : {})}
         >
@@ -161,6 +124,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         className={buttonClassName(variant, size, props["aria-pressed"], className)}
         ref={ref}
+        data-variant={size === "display" ? variant ?? "default" : undefined}
         {...props}
         disabled={disabled || loading}
         aria-busy={loading || props["aria-busy"]}

package/src/primitives/card.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ixControl } from "../lib/interaction";
+import { cardPresentation } from "../presentation";
 import { cn } from "../lib/utils";
 import { Heading } from "./heading";
 
@@ -24,20 +25,14 @@ const Card = React.forwardRef<
     interactive?: boolean;
   }
 >(({ className, variant = "default", hover = false, interactive = false, ...props }, ref) => {
-  const 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)]",
-  };
+
 
   return (
     <div
       ref={ref}
       className={cn(
-        "rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow,background-color]",
-        "duration-[var(--transition-default)]",
-        variants[variant],
+        cardPresentation.root,
+        cardPresentation.variants[variant],
         (hover || interactive) && ixControl,
         className,
       )}
@@ -98,7 +93,7 @@ const CardContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("p-4 [&:not(:first-child)]:pt-0", className)}
+    className={cn(cardPresentation.padding, "[&:not(:first-child)]:pt-0", className)}
     {...props}
   />
 ));

package/src/primitives/checkbox-separator-sheet-tooltip.test.tsx

@@ -71,7 +71,8 @@ describe("Sheet", () => {
     );
     fireEvent.click(screen.getByText("Open chat"));
     const dialog = await screen.findByRole("dialog", { name: "Assistant" });
-    expect(dialog.className).toContain("slide-in-from-left");
+    expect(dialog).toHaveAttribute("data-state", "open");
+    expect(dialog.style.opacity).toBe("1");
     fireEvent.click(screen.getByRole("button", { name: "Close" }));
     await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
   });

package/src/primitives/control-presentation.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { controlHeight, controlText, controlMotion, fieldPresentation } from "../lib/control-presentation";
+import { controlHeight, controlText, fieldPresentation } from "../lib/control-presentation";
 import { HelpText } from "./help-text";
 import { Label } from "./label";
 import { Button, buttonVariants } from "./button";
@@ -11,7 +11,7 @@ import { Select, SelectTrigger, SelectValue } from "./select";
 afterEach(cleanup);
 
 describe("shared control presentation", () => {
-  it("uses the field well, not the border/track alias, with scoped foreground and time-only motion", () => {
+  it("uses the field well, not the border/track alias, with scoped foreground", () => {
     // The well is the brand's --well context variable; Toolbar can still pick the fill.
     expect(fieldPresentation).toContain("bg-[var(--field-surface,var(--well))]");
     expect(fieldPresentation.split(" ")).not.toContain("bg-input");
@@ -20,10 +20,6 @@ describe("shared control presentation", () => {
     expect(fieldPresentation.split(" ")).toContain("border-[var(--field-border)]");
     expect(fieldPresentation.split(" ")).not.toContain("border-border");
     expect(fieldPresentation).toContain("text-foreground");
-    expect(fieldPresentation).not.toContain("duration-150");
-    expect(controlMotion).toContain("duration-[var(--duration-fast)]");
-    expect(controlMotion).not.toContain("--transition-fast");
-    expect(controlMotion).toContain("motion-reduce:duration-0");
   });
 
   it("puts Button, Input, Textarea and SelectTrigger on one height and text scale", () => {
@@ -116,7 +112,6 @@ describe("shared control presentation", () => {
     expect(buttonVariants({ variant: "destructive" })).toContain("text-destructive-foreground");
     expect(buttonVariants({ variant: "sandbox" })).toContain("text-[var(--btn-primary-text)]");
     expect(buttonVariants()).not.toContain("transition-all");
-    expect(buttonVariants()).toContain("box-shadow,transform,scale");
     expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
   });
 });

package/src/primitives/dialog.tsx

@@ -1,3 +1,5 @@
+import { SurfaceMotion } from "../lib/surface-motion";
+import { dialogPresentation } from "../presentation";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
@@ -15,17 +17,17 @@ const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+>(({ className, asChild, children, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={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",
+      dialogPresentation.overlay,
+      dialogPresentation.transition,
       className,
     )}
     {...props}
-  />
+    asChild
+  ><SurfaceMotion kind="overlay" asChild={asChild}>{children}</SurfaceMotion></DialogPrimitive.Overlay>
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
@@ -40,7 +42,7 @@ const DialogContent = React.forwardRef<
      */
     hideCloseButton?: boolean;
   }
->(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
+>(({ className, children, variant = "default", hideCloseButton = false, asChild, ...props }, ref) => {
   const variants = {
     default: "border-border",
     sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]",
@@ -52,23 +54,21 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={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%]",
+          dialogPresentation.position,
+          dialogPresentation.surface,
+          dialogPresentation.transition,
           variants[variant],
           className,
         )}
         {...props}
+        asChild
       >
+        <SurfaceMotion kind="dialog" asChild={asChild}>
         {children}
         {!hideCloseButton && (
           <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",
+              dialogPresentation.close,
               focusRing,
             )}
           >
@@ -76,6 +76,7 @@ const DialogContent = React.forwardRef<
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
+        </SurfaceMotion>
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -88,7 +89,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      dialogPresentation.header,
       className,
     )}
     {...props}
@@ -102,7 +103,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      dialogPresentation.footer,
       className,
     )}
     {...props}
@@ -117,7 +118,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "font-semibold text-lg leading-none tracking-tight",
+      dialogPresentation.title,
       className,
     )}
     {...props}
@@ -131,7 +132,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    className={cn(dialogPresentation.description, className)}
     {...props}
   />
 ));

package/src/primitives/empty-state.tsx

@@ -1,3 +1,4 @@
+import { emptyStatePresentation } from "../presentation";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
@@ -17,23 +18,23 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
       <div
         ref={ref}
         className={cn(
-          "flex flex-col items-center justify-center px-4 py-16 text-center",
+          emptyStatePresentation.root,
           className,
         )}
         {...props}
       >
         {icon && (
-          <div className="mb-4 rounded-full bg-muted p-4 text-muted-foreground">
+          <div className={emptyStatePresentation.icon}>
             {icon}
           </div>
         )}
-        <Title className="font-semibold text-lg">{title}</Title>
+        <Title className={emptyStatePresentation.title}>{title}</Title>
         {description && (
-          <p className="mt-2 max-w-sm text-muted-foreground text-sm">
+          <p className={emptyStatePresentation.description}>
             {description}
           </p>
         )}
-        {action && <div className="mt-6">{action}</div>}
+        {action && <div className={emptyStatePresentation.action}>{action}</div>}
       </div>
     );
   },