@tangle-network/ui 11.35.0 → 11.37.0

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/code-block.tsx

@@ -1,7 +1,7 @@
 // Re-exports the canonical themed CodeBlock from the markdown package.
 // Kept here for backwards compatibility with openui and other importers.
 export { CodeBlock, CopyButton } from "../markdown/code-block";
-export type { CodeBlockProps } from "../markdown/code-block";
+export type { CodeBlockProps, CopyButtonProps } from "../markdown/code-block";
 
 import { cn } from "../lib/utils";
 

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>
     );
   },

package/src/primitives/heading.tsx

@@ -38,6 +38,7 @@ 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;
   /**
@@ -53,7 +54,7 @@ export interface HeadingProps
  * display/page h1 per page; choose `as` according to the document hierarchy.
  */
 const Heading = React.forwardRef<HTMLElement, HeadingProps>(
-  ({ variant, role, as, className, ...props }, ref) => {
+  ({ variant, role, as, className, presentation, ...props }, ref) => {
     const legacyVariant =
       role && Object.prototype.hasOwnProperty.call(VARIANT_CLASS, role)
         ? (role as HeadingVariant)
@@ -64,7 +65,8 @@ const Heading = React.forwardRef<HTMLElement, HeadingProps>(
     return (
       <Tag
         ref={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 : undefined}
         role={legacyVariant ? undefined : role}
         {...props}
       />

package/src/primitives/help-text.tsx

@@ -1,3 +1,4 @@
+import { helpPresentation } from "../presentation";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
@@ -17,8 +18,8 @@ const HelpText = React.forwardRef<HTMLParagraphElement, HelpTextProps>(
       ref={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)]",
+        helpPresentation.root,
+        helpPresentation[tone],
         className,
       )}
       {...props}

package/src/primitives/input.tsx

@@ -1,45 +1,17 @@
 "use client";
 
 import * as React from "react";
-import { controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation";
+import { controlRadius, controlSizes, controlText, fieldPresentation, fieldTouchText } from "../lib/control-presentation";
 import { focusFieldInvalid } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { HelpText } from "./help-text";
 import { Label } from "./label";
 
-import { cva, type VariantProps } from "class-variance-authority";
+import { inputVariants } from "../presentation";
+import { type VariantProps } from "class-variance-authority";
 
 // Sizes follow the shared control scale (control-presentation.ts), so an Input
 // and a Button at the same size share a height, text size and corner.
-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",
-    },
-  }
-);
 
 // Only rendered descriptions are added; caller IDs and their order are retained.
 function descriptionIds(...ids: Array<string | undefined>) {

package/src/primitives/label.tsx

@@ -1,14 +1,12 @@
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import { labelVariants } from "../presentation";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
 // One label size (`--font-size-label`, 14px) for every field size.
-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<
   React.ElementRef<typeof LabelPrimitive.Root>,

package/src/primitives/metric-strip.tsx

@@ -1,17 +1,8 @@
+import { metricPresentation, metricLayouts } from "../presentation";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { StatusPill, type StatusTone } from "./status-pill";
 
-// Each finite preset owns its grid AND its row-start rules. Keep the strings
-// literal so host Tailwind consumers scanning the published source emit them.
-// Ranges do not overlap: no drawn border is subsequently suppressed.
-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",
-} as const;
-
 /** Headline readings on one plane, with native definition-list semantics. */
 export interface MetricStripProps
   extends React.HTMLAttributes<HTMLDListElement> {
@@ -26,8 +17,8 @@ const MetricStrip = React.forwardRef<HTMLDListElement, MetricStripProps>(
     <dl
       ref={ref}
       className={cn(
-        "grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]",
-        layouts[columns],
+        metricPresentation.strip,
+        metricLayouts[columns],
         className,
       )}
       {...props}
@@ -55,10 +46,10 @@ const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
   ({ className, label, value, hint, attention, icon, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("min-w-0 border-border p-4 sm:p-5", className)}
+      className={cn(metricPresentation.item, className)}
       {...props}
     >
-      <dt className="flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm">
+      <dt className={metricPresentation.label}>
         {icon != null && icon !== false && (
           <span
             aria-hidden="true"
@@ -67,7 +58,7 @@ const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
             {icon}
           </span>
         )}
-        <span className="min-w-0 whitespace-normal [overflow-wrap:anywhere]">{label}</span>
+        <span className={metricPresentation.labelText}>{label}</span>
         {attention && (
           <StatusPill tone={attention.tone}>{attention.label}</StatusPill>
         )}
@@ -76,7 +67,7 @@ const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
           title. Wrap even unbroken values without making the grid wider. */}
       <dd
         className={cn(
-          "mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
+          metricPresentation.value,
           attention?.tone === "danger" && "text-[var(--surface-danger-text)]",
         )}
         title={typeof value === "string" ? value : undefined}
@@ -85,7 +76,7 @@ const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
       </dd>
       {hint !== undefined && hint !== null && hint !== false && hint !== "" && (
         <dd
-          className="mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs"
+          className={metricPresentation.hint}
           title={typeof hint === "string" ? hint : undefined}
         >
           {hint}

package/src/primitives/page-header.tsx

@@ -10,6 +10,7 @@ import { Heading } from "./heading";
 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;
@@ -31,6 +32,7 @@ const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
   (
     {
       className,
+      presentation,
       title,
       description,
       actions,
@@ -46,28 +48,29 @@ const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
   ) => {
     const resolvedActions = actions === undefined ? action : actions;
     return (
-      <header ref={ref} className={cn("mb-6 min-w-0", className)} {...props}>
-        <div className="flex min-w-0 flex-wrap items-start justify-between gap-x-6 gap-y-3">
+      <header ref={ref} className={cn(presentation === "expressive" ? "tangle-intro" : presentation === "operational" ? "tangle-page-header" : "mb-6 min-w-0", className)} {...props}>
+        <div className={presentation ? "tangle-page-header-main" : "flex min-w-0 flex-wrap items-start justify-between gap-x-6 gap-y-3"}>
           <div className="min-w-0 flex-[1_1_16rem]">
             {hasContent(eyebrow) && (
               <Heading variant="eyebrow" className="mb-1.5">{eyebrow}</Heading>
             )}
             <Heading
               id={titleId}
-              variant={level === 1 ? "page" : "section"}
+              variant={presentation === "expressive" ? "display" : level === 1 ? "page" : "section"}
+              presentation={presentation}
               as={titleAs ?? (level === 1 ? "h1" : "h2")}
               className="text-balance"
             >
               {title}
             </Heading>
             {hasContent(description) && (
-              <p className="mt-1 max-w-prose text-muted-foreground text-sm [overflow-wrap:anywhere]">
+              <p className={presentation === "expressive" ? "tangle-intro-description" : presentation ? "tangle-page-description" : "mt-1 max-w-prose text-muted-foreground text-sm [overflow-wrap:anywhere]"}>
                 {description}
               </p>
             )}
           </div>
           {hasContent(resolvedActions) && (
-            <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2 [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full">
+            <div className={presentation === "expressive" ? "tangle-intro-actions" : "flex min-w-0 max-w-full flex-wrap items-center gap-2 [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full"}>
               {resolvedActions}
             </div>
           )}

package/src/primitives/page-shell.tsx

@@ -2,7 +2,13 @@ import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
 
 export interface PageShellProps {
-  children: ReactNode;
+  children?: ReactNode;
+  /** Optional reading layout. Content, routing and navigation interaction stay caller-owned. */
+  navigation?: ReactNode;
+  article?: ReactNode;
+  outline?: ReactNode;
+  navigationLabel?: string;
+  outlineLabel?: string;
   className?: string;
 }
 
@@ -12,7 +18,12 @@ export interface PageShellProps {
  * The caller owns landmarks, routing, auth, navigation and data state. Use
  * className to override the bound/gutters, or omit it for a workbench layout.
  */
-export function PageShell({ children, className }: PageShellProps) {
+export function PageShell({ children, className, navigation, article, outline, navigationLabel = "Sections", outlineLabel = "On this page" }: PageShellProps) {
+  if (navigation || article || outline) return <div className={cn("tangle-reading-shell",className)}>
+    {navigation && <nav aria-label={navigationLabel} className="tangle-reading-nav">{navigation}</nav>}
+    <article className="tangle-reading-article">{article ?? children}</article>
+    {outline && <aside aria-label={outlineLabel} className="tangle-reading-outline">{outline}</aside>}
+  </div>;
   return (
     <div
       className={cn(

package/src/primitives/popover.tsx

@@ -2,6 +2,8 @@
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
+import { SurfaceMotion } from "../lib/surface-motion";
+import { surfaceMotion } from "../lib/motion";
 import { cn } from "../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
@@ -20,7 +22,7 @@ const PopoverClose = PopoverPrimitive.Close;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, asChild, children, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
@@ -28,16 +30,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden",
-        "data-[state=closed]:animate-out data-[state=open]:animate-in",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        "motion-reduce:animate-none",
+        surfaceMotion,
         className,
       )}
       {...props}
-    />
+      asChild
+    ><SurfaceMotion kind="popover" asChild={asChild}>{children}</SurfaceMotion></PopoverPrimitive.Content>
   </PopoverPrimitive.Portal>
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;

package/src/primitives/sheet.tsx

@@ -4,6 +4,8 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
+import { SurfaceMotion } from "../lib/surface-motion";
+import { controlMotion, surfaceMotion } from "../lib/motion";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
@@ -19,35 +21,34 @@ const SheetPortal = SheetPrimitive.Portal;
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+>(({ className, asChild, children, ...props }, ref) => (
   <SheetPrimitive.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",
+      surfaceMotion,
       className,
     )}
     {...props}
-  />
+    asChild
+  ><SurfaceMotion kind="overlay" asChild={asChild}>{children}</SurfaceMotion></SheetPrimitive.Overlay>
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   [
     "fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
-    "data-[state=closed]:animate-out data-[state=open]:animate-in",
-    "data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none",
+    surfaceMotion,
   ],
   {
     variants: {
       side: {
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        top: "inset-x-0 top-0 h-auto border-b",
         bottom:
-          "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          "inset-x-0 bottom-0 h-auto border-t",
       },
     },
     defaultVariants: { side: "right" },
@@ -61,19 +62,22 @@ const SheetContent = React.forwardRef<
       /** Hide only the built-in close button; Escape and outside clicks still dismiss. */
       hideCloseButton?: boolean;
     }
->(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => (
+>(({ className, children, side = "right", hideCloseButton = false, asChild, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}
       {...props}
+      asChild
     >
+      <SurfaceMotion kind="sheet" side={side ?? "right"} asChild={asChild}>
       {children}
       {!hideCloseButton && (
         <SheetPrimitive.Close
           className={cn(
             "absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none",
+            controlMotion,
             focusRing,
           )}
         >
@@ -81,6 +85,7 @@ const SheetContent = React.forwardRef<
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
       )}
+      </SurfaceMotion>
     </SheetPrimitive.Content>
   </SheetPortal>
 ));

package/src/primitives/skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-lg bg-muted/50", className)}
+      className={cn("animate-pulse motion-reduce:animate-none rounded-lg bg-muted/50", className)}
       {...props}
     />
   );

package/src/primitives/status-pill.test.tsx

@@ -9,6 +9,7 @@ const TONES: StatusTone[] = [
   "info",
   "running",
   "neutral",
+  "violet",
 ];
 
 describe("StatusPill", () => {