@tangle-network/ui 11.35.0 → 11.36.0

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", () => {

package/src/primitives/status-pill.tsx

@@ -26,7 +26,8 @@ export type StatusTone =
   | "danger"
   | "info"
   | "neutral"
-  | "running";
+  | "running"
+  | "violet";
 
 export interface StatusPillProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
@@ -46,10 +47,13 @@ export interface StatusPillProps
    * For a control that supplies its own surface (a chip, a selected row).
    */
   bare?: boolean;
+  /** Decorative caller glyph; the visible text remains the accessible status. */
+  icon?: React.ReactNode;
   size?: "sm" | "md";
 }
 
 const TONE_SURFACE: Record<StatusTone, string> = {
+  violet: "bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)] border-[var(--surface-violet-border)]",
   success:
     "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] border-[var(--surface-success-border)]",
   warning:
@@ -77,6 +81,7 @@ const TONE_SURFACE: Record<StatusTone, string> = {
  * has left — the glyph — with nothing to signal that it happened.
  */
 const TONE_TEXT: Record<StatusTone, string> = {
+  violet: "text-[var(--surface-violet-text)]",
   success: "text-[var(--surface-success-text)]",
   warning: "text-[var(--surface-warning-text)]",
   danger: "text-[var(--surface-danger-text)]",
@@ -100,6 +105,7 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
     className: "size-2 shrink-0",
   };
   switch (tone) {
+    case "violet": return <svg {...common} aria-hidden="true" fill="currentColor"><path d="M4 .5 7.5 4 4 7.5 .5 4Z"/></svg>;
     // Settled and good: a solid disc.
     case "success":
       return (
@@ -165,7 +171,7 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
 }
 
 const StatusPill = React.forwardRef<HTMLSpanElement, StatusPillProps>(
-  ({ className, tone, children, bare = false, size = "sm", ...props }, ref) => (
+  ({ className, tone, children, icon, bare = false, size = "sm", ...props }, ref) => (
     <span
       ref={ref}
       className={cn(
@@ -180,8 +186,8 @@ const StatusPill = React.forwardRef<HTMLSpanElement, StatusPillProps>(
     >
       {/* In `bare` mode the tone rides on the glyph alone, so it is scoped to
           the wrapper the glyph sits in rather than applied to the whole pill. */}
-      <span className={cn("inline-flex", bare && TONE_TEXT[tone])}>
-        <ToneGlyph tone={tone} />
+      <span aria-hidden="true" className={cn("inline-flex [&>svg]:size-3 [&>svg]:shrink-0", bare && TONE_TEXT[tone])}>
+        {icon ?? <ToneGlyph tone={tone} />}
       </span>
       {children}
     </span>

package/src/primitives/table.tsx

@@ -1,3 +1,4 @@
+import { tablePresentation } from "../presentation";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
@@ -17,7 +18,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     const table = (
       <table
         ref={ref}
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn(tablePresentation.root, className)}
         {...props}
       />
     );
@@ -27,7 +28,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     return (
       <div
         {...attributes}
-        className={cn("relative w-full overflow-auto", wrapperClassName)}
+        className={cn(tablePresentation.wrapper, wrapperClassName)}
       >
         {table}
       </div>
@@ -40,7 +41,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn(tablePresentation.head, className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -50,7 +51,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn(tablePresentation.body, className)}
     {...props}
   />
 ));
@@ -63,7 +64,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-card font-medium [&>tr]:last:border-b-0",
+      tablePresentation.footer,
       className,
     )}
     {...props}
@@ -78,7 +79,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50",
+      tablePresentation.row,
       className,
     )}
     {...props}
@@ -93,7 +94,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      tablePresentation.columnHeader,
       className,
     )}
     {...props}
@@ -107,7 +108,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(tablePresentation.cell, className)}
     {...props}
   />
 ));
@@ -119,7 +120,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-muted-foreground text-sm", className)}
+    className={cn(tablePresentation.caption, className)}
     {...props}
   />
 ));

package/src/primitives/tabs.tsx

@@ -1,7 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 import { focusRing } from "../lib/focus";
-import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction";
+import { tabsPresentation } from "../presentation";
 import { cn } from "../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
@@ -12,17 +12,12 @@ const TabsList = React.forwardRef<
     variant?: "default" | "pills" | "underline";
   }
 >(({ className, variant = "default", ...props }, ref) => {
-  const variants = {
-    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",
-  };
+
 
   return (
     <TabsPrimitive.List
       ref={ref}
-      className={cn(variants[variant], className)}
+      className={cn(tabsPresentation.list[variant], className)}
       {...props}
     />
   );
@@ -38,19 +33,12 @@ const TabsTrigger = React.forwardRef<
   // Selection is the shared selected state (lib/interaction.ts): a tint and an
   // inset ring for default and pills, a 2px underline for underline, whose
   // border-b-2 slot stays transparent.
-  const variants = {
-    default:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 ${ixControlSoft} ${ixSelected}`,
-    pills:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:text-muted-foreground ${ixControlSoft} ${ixSelected}`,
-    underline:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground ${ixTabUnderline}`,
-  };
+
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
-      className={cn(variants[variant], className)}
+      className={cn(tabsPresentation.trigger[variant], className)}
       {...props}
     />
   );

package/src/primitives/tooltip.tsx

@@ -2,6 +2,8 @@
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { SurfaceMotion } from "../lib/surface-motion";
+import { surfaceMotion } from "../lib/motion";
 import { cn } from "../lib/utils";
 
 /**
@@ -33,20 +35,19 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, ...props }, ref) => (
+>(({ className, sideOffset = 6, asChild, children, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
         "z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md",
-        "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "duration-150 ease-out motion-reduce:animate-none",
+        surfaceMotion,
         className,
       )}
       {...props}
-    />
+      asChild
+    ><SurfaceMotion kind="tooltip" asChild={asChild}>{children}</SurfaceMotion></TooltipPrimitive.Content>
   </TooltipPrimitive.Portal>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;

package/src/styles/compat.css

@@ -0,0 +1,12 @@
+/* Generated by scripts/generate-presentation-css.mjs from shared primitive recipes. Requires Tailwind + Brand theme. */
+@layer components {
+  .btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
+  .btn-primary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
+  .btn-secondary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
+  .btn-danger { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
+  .input { @apply 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 focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)] 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)] [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 min-w-0 text-foreground aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)] autofill:shadow-[inset_0_0_0_1000px_var(--field-surface,var(--well))] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)] pointer-coarse:text-base h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-3; }
+  .card { @apply 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 bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)] p-4; }
+  .stat-card { @apply 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 bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)] min-w-0 border-border p-4 sm:p-5; }
+  .table-header { @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0; }
+  .table-cell { @apply p-4 align-middle [&:has([role=checkbox])]:pr-0; }
+}

package/src/styles/presentation.css

@@ -0,0 +1,30 @@
+/* Requires Brand styles; the same contracts serve React and Hono. */
+.tangle-heading { color: hsl(var(--foreground)); font-family: var(--font-display); font-weight: 600; line-height: var(--line-height-heading); letter-spacing: var(--tracking-tight); }
+.tangle-heading[data-variant="display"] { font-size: var(--font-size-display); line-height: var(--line-height-display); }
+.tangle-heading[data-variant="hero"] { font-size: var(--font-size-hero); line-height: var(--line-height-display); }
+.tangle-heading[data-variant="page"] { font-size: var(--font-size-3xl); }
+.tangle-heading[data-variant="section"] { font-size: var(--font-size-xl); }
+.tangle-heading[data-variant="subsection"] { font-size: var(--font-size-lg); }
+.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); }
+.tangle-page-header { min-width: 0; margin-bottom: 1.5rem; }
+.tangle-page-header-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
+.tangle-intro .tangle-page-header-main { display: block; }
+.tangle-reading-shell { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; padding: 2rem var(--hero-gutter); max-width: var(--content-max-width); margin: auto; min-width: 0; }
+.tangle-reading-shell > * { min-width: 0; }
+.tangle-reading-article { width: 100%; max-width: var(--reading-max-width); overflow-wrap: anywhere; }
+.tangle-reading-nav a, .tangle-reading-outline a { display: block; padding: 0.5rem 0; color: hsl(var(--muted-foreground)); text-decoration: none; }
+.tangle-reading-nav a[aria-current]:not([aria-current="false"]), .tangle-reading-outline a[aria-current]:not([aria-current="false"]) { color: var(--accent-text); font-weight: 600; }
+@media(min-width: 64rem) {
+  .tangle-reading-shell { grid-template-columns: 13rem minmax(0,1fr); }
+  .tangle-reading-outline { display: none; }
+  .tangle-reading-nav { position: sticky; top: var(--shell-header-height); align-self: start; max-height: calc(100dvh - var(--shell-header-height)); overflow: auto; }
+}
+@media(min-width: 80rem) {
+  .tangle-reading-shell:has(.tangle-reading-outline) { grid-template-columns: 13rem minmax(0,1fr) 11rem; }
+  .tangle-reading-outline { display: block; position: sticky; top: var(--shell-header-height); align-self: start; }
+}
+/* Native dialog has the same solid reading surface as React's Dialog/Sheet. */
+.tangle-native-dialog { max-width: min(32rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
+.tangle-native-dialog::backdrop { background: var(--scrim); }
+
+.tangle-page-description { margin-top: 0.25rem; max-width: 65ch; color: hsl(var(--muted-foreground)); font-size: var(--font-size-label); overflow-wrap: anywhere; }

package/src/primitives/page-shell.test.tsx

@@ -1,24 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { PageShell } from "./page-shell";
-
-describe("PageShell", () => {
-  it("ports Sandbox's width, gutters and rhythm without imposing a landmark or grid", () => {
-    const { container } = render(<PageShell><p>Content</p></PageShell>);
-    const shell = container.firstElementChild;
-    expect(shell?.tagName).toBe("DIV");
-    expect(shell).toHaveClass("mx-auto", "max-w-6xl", "space-y-8", "px-6", "py-8", "lg:px-8");
-    expect(shell).not.toHaveAttribute("role");
-    expect(shell).not.toHaveClass("grid");
-    expect(screen.queryByRole("main")).toBeNull();
-    expect(screen.getByText("Content")).toBeInTheDocument();
-  });
-
-  it("allows a caller-owned fluid layout without introducing shell behavior", () => {
-    const { container } = render(<main><PageShell className="mx-0 max-w-none px-0 lg:px-0"><p>Workbench</p></PageShell></main>);
-    const shell = container.querySelector("main > div");
-    expect(shell).toHaveClass("mx-0", "max-w-none", "px-0", "lg:px-0");
-    expect(shell).not.toHaveClass("mx-auto", "max-w-6xl", "px-6", "lg:px-8");
-    expect(screen.getAllByRole("main")).toHaveLength(1);
-  });
-});