@tangle-network/sandbox-ui 0.134.7 → 0.134.8

package/dist/styles.css

@@ -2024,6 +2024,9 @@
       border-color: color-mix(in oklab, hsl(var(--border)) 70%, transparent);
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -2296,6 +2299,9 @@
   .border-\[var\(--surface-success-border\)\] {
     border-color: var(--surface-success-border);
   }
+  .border-\[var\(--surface-violet-border\)\] {
+    border-color: var(--surface-violet-border);
+  }
   .border-\[var\(--surface-warning-border\)\] {
     border-color: var(--surface-warning-border);
   }
@@ -2638,6 +2644,9 @@
   .bg-\[var\(--surface-success-text\)\] {
     background-color: var(--surface-success-text);
   }
+  .bg-\[var\(--surface-violet-bg\)\] {
+    background-color: var(--surface-violet-bg);
+  }
   .bg-\[var\(--surface-warning-bg\)\] {
     background-color: var(--surface-warning-bg);
   }
@@ -3703,6 +3712,9 @@
   .text-\[var\(--surface-success-text\,\#047857\)\] {
     color: var(--surface-success-text,#047857);
   }
+  .text-\[var\(--surface-violet-text\)\] {
+    color: var(--surface-violet-text);
+  }
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
@@ -4168,11 +4180,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[border-color\,box-shadow\,background-color\] {
-    transition-property: border-color,box-shadow,background-color;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[border-color\,box-shadow\] {
     transition-property: border-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4183,11 +4190,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[color\,background-color\,border-color\,box-shadow\,transform\,scale\] {
-    transition-property: color,background-color,border-color,box-shadow,transform,scale;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[color\,background-color\,border-color\,box-shadow\] {
     transition-property: color,background-color,border-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4198,11 +4200,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[margin-left\] {
-    transition-property: margin-left;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[opacity\,background-color\] {
     transition-property: opacity,background-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4253,6 +4250,9 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-none {
+    transition-property: none;
+  }
   .duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;
@@ -4269,34 +4269,10 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
-  .duration-\[var\(--duration-base\)\] {
-    --tw-duration: var(--duration-base);
-    transition-duration: var(--duration-base);
-  }
-  .duration-\[var\(--duration-fast\)\] {
-    --tw-duration: var(--duration-fast);
-    transition-duration: var(--duration-fast);
-  }
-  .duration-\[var\(--duration-slow\)\] {
-    --tw-duration: var(--duration-slow);
-    transition-duration: var(--duration-slow);
-  }
-  .duration-\[var\(--transition-default\)\] {
-    --tw-duration: var(--transition-default);
-    transition-duration: var(--transition-default);
-  }
   .duration-\[var\(--transition-fast\)\] {
     --tw-duration: var(--transition-fast);
     transition-duration: var(--transition-fast);
   }
-  .ease-\[var\(--ease-entrance\)\] {
-    --tw-ease: var(--ease-entrance);
-    transition-timing-function: var(--ease-entrance);
-  }
-  .ease-\[var\(--ease-standard\)\] {
-    --tw-ease: var(--ease-standard);
-    transition-timing-function: var(--ease-standard);
-  }
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
@@ -4312,6 +4288,12 @@
   .\[--field-surface\:hsl\(var\(--card\)\)\] {
     --field-surface: hsl(var(--card));
   }
+  .\[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\)\] {
+    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);
+  }
+  .\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\] {
+    transition: opacity var(--motion-surface),transform var(--motion-surface);
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -5162,6 +5144,30 @@
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .data-\[copy-loading\=true\]\:gap-1[data-copy-loading="true"] {
+    gap: var(--spacing);
+  }
+  .data-\[copy-loading\=true\]\:after\:content-\[\'…\'\][data-copy-loading="true"]::after {
+    --tw-content: '…';
+    content: var(--tw-content);
+  }
+  .data-\[copy-long-work\=true\]\:not-sr-only[data-copy-long-work="true"] {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+  .data-\[copy-long-work\=true\]\:text-xs[data-copy-long-work="true"] {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .data-\[copy-long-work\=true\]\:text-muted-foreground[data-copy-long-work="true"] {
+    color: hsl(var(--muted-foreground));
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
@@ -5202,15 +5208,6 @@
   .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
     flex-direction: column;
   }
-  .data-\[overflow-end\]\:\[mask-image\:linear-gradient\(to_right\,\#000_calc\(100\%-24px\)\,transparent\)\][data-overflow-end] {
-    mask-image: linear-gradient(to right,#000 calc(100% - 24px),transparent);
-  }
-  .data-\[overflow-start\]\:\[mask-image\:linear-gradient\(to_right\,transparent\,\#000_24px\)\][data-overflow-start] {
-    mask-image: linear-gradient(to right,transparent,#000 24px);
-  }
-  .data-\[overflow-start\]\:data-\[overflow-end\]\:\[mask-image\:linear-gradient\(to_right\,transparent\,\#000_24px\,\#000_calc\(100\%-24px\)\,transparent\)\][data-overflow-start][data-overflow-end] {
-    mask-image: linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);
-  }
   .data-\[placeholder\]\:text-\[var\(--text-dim\)\][data-placeholder] {
     color: var(--text-dim);
   }
@@ -5304,9 +5301,11 @@
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .data-\[state\=closed\]\:duration-200[data-state="closed"] {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
+  .data-\[state\=closed\]\:\[animation\:tangle-surface-absent_var\(--motion-dismiss\)_both\][data-state="closed"] {
+    animation: tangle-surface-absent var(--motion-dismiss) both;
+  }
+  .data-\[state\=delayed-open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="delayed-open"] {
+    animation: tangle-surface-present var(--motion-surface) both;
   }
   .data-\[state\=inactive\]\:text-muted-foreground[data-state="inactive"] {
     color: hsl(var(--muted-foreground));
@@ -5320,6 +5319,9 @@
   .data-\[state\=indeterminate\]\:text-primary-foreground[data-state="indeterminate"] {
     color: hsl(var(--primary-foreground));
   }
+  .data-\[state\=instant-open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="instant-open"] {
+    animation: tangle-surface-present var(--motion-surface) both;
+  }
   .data-\[state\=on\]\:bg-\[var\(--ix-sel-bg\)\][data-state="on"] {
     background-color: var(--ix-sel-bg);
   }
@@ -5330,6 +5332,9 @@
   .data-\[state\=open\]\:rotate-180[data-state="open"] {
     rotate: 180deg;
   }
+  .data-\[state\=open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="open"] {
+    animation: tangle-surface-present var(--motion-surface) both;
+  }
   .data-\[state\=open\]\:border-\[var\(--ix-hover-border\)\][data-state="open"] {
     border-color: var(--ix-hover-border);
   }
@@ -5370,10 +5375,6 @@
     --tw-shadow: var(--ix-after);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .data-\[state\=open\]\:duration-300[data-state="open"] {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
   .data-\[state\=selected\]\:bg-muted\/50[data-state="selected"] {
     background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
@@ -5404,16 +5405,25 @@
     }
   }
   @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:not-sr-only {
+      position: static;
+      width: auto;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
     .motion-reduce\:animate-none {
       animation: none;
     }
+    .motion-reduce\:animate-none\! {
+      animation: none !important;
+    }
     .motion-reduce\:transition-none {
       transition-property: none;
     }
-    .motion-reduce\:duration-0 {
-      --tw-duration: 0ms;
-      transition-duration: 0ms;
-    }
     .motion-reduce\:active\:scale-100:active {
       --tw-scale-x: 100%;
       --tw-scale-y: 100%;
@@ -5490,6 +5500,9 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
     }
+    .sm\:flex {
+      display: flex;
+    }
     .sm\:grid {
       display: grid;
     }
@@ -5813,6 +5826,9 @@
     .pointer-coarse\:min-h-11 {
       min-height: calc(var(--spacing) * 11);
     }
+    .pointer-coarse\:min-w-11 {
+      min-width: calc(var(--spacing) * 11);
+    }
     .pointer-coarse\:text-base {
       font-size: var(--text-base);
       line-height: var(--tw-leading, var(--text-base--line-height));
@@ -6044,12 +6060,19 @@
   .\[\&\>span\]\:text-left > span {
     text-align: left;
   }
+  .\[\&\>svg\]\:size-3 > svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .\[\&\>svg\]\:h-4 > svg {
     height: calc(var(--spacing) * 4);
   }
   .\[\&\>svg\]\:w-4 > svg {
     width: calc(var(--spacing) * 4);
   }
+  .\[\&\>svg\]\:shrink-0 > svg {
+    flex-shrink: 0;
+  }
   .\[\&\>svg\]\:transition-transform > svg {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -6126,9 +6149,9 @@
 :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
   color-scheme: dark;
   --md3-surface: #0a0a14;
-  --md3-surface-dim: #060610;
+  --md3-surface-dim: #040408;
   --md3-surface-bright: #232238;
-  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-lowest: #040408;
   --md3-surface-container-low: #12111f;
   --md3-surface-container: #191826;
   --md3-surface-container-high: #221f33;
@@ -6421,6 +6444,25 @@
   --tracking-tight: -0.02em;
   --tracking-snug: -0.01em;
   --tracking-wide: 0.08em;
+  --tracking-display: -0.03em;
+  --hero-gutter: 1.5rem;
+  --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
+  --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
+  --display-max-width: 56rem;
+  --reading-max-width: 42rem;
+  --hero-action-gap: 0.75rem;
+  --hero-content-gap: 1.5rem;
+  --display-control-height: 2.875rem;
+  --display-control-radius: 0.625rem;
+  --display-control-font-size: 0.9375rem;
+  --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
+  --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
+  --hero-grid-pitch: 3.5rem;
+  --hero-atmosphere-opacity: 0.16;
+  --hero-knot-opacity: 0.07;
+  --duration-expressive-entrance: 300ms;
+  --duration-expressive-ambient: 14s;
+  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
   --avatar-size: 2rem;
   --timeline-dot-size: 0.625rem;
   --indicator-dot-size: 0.25rem;
@@ -6460,6 +6502,10 @@
   --motion-dismiss: var(--duration-instant) var(--ease-exit);
   --motion-stream: var(--duration-stream) var(--ease-expo);
   --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  --interaction-feedback-budget: 100ms;
+  --interaction-pending-delay: 200ms;
+  --interaction-long-work-delay: 1000ms;
+  --interaction-mutation-budget: 500ms;
   --stagger-step: 50ms;
   --stagger-index: 0;
   --arrive-distance: 8px;
@@ -6739,12 +6785,18 @@
   }
   --hsl-raised: var(--hsl-card);
   --hsl-raised-2: var(--hsl-card);
-  --well-page: var(--bg-input);
-  --well-card: var(--bg-input);
-  --well-raised: var(--bg-input);
-  --well-raised-2: var(--bg-input);
+  --well-page: hsl(var(--hsl-background));
+  @supports (color: color-mix(in lab, red, red)) {
+    --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
+  }
+  --well-card: var(--well-page);
+  --well-raised: var(--well-page);
+  --well-raised-2: var(--well-page);
   --well: var(--well-page);
   --field-border: hsl(var(--hsl-border));
+  @supports (color: color-mix(in lab, red, red)) {
+    --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
+  }
   --shadow-raised: var(--shadow-card);
   --shadow-well: 0 0 0 0 transparent;
   --edge-highlight: 0 0 0 0 transparent;
@@ -6759,6 +6811,10 @@
 [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
   --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
   --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
+  --well-page: hsl(var(--hsl-card));
+  --well-card: hsl(var(--hsl-background));
+  --well-raised: hsl(var(--hsl-background));
+  --well-raised-2: hsl(var(--hsl-background));
 }
 [data-slot="card"] :where(*) {
   --card: var(--hsl-raised);
@@ -7262,7 +7318,7 @@
   --bg-root: #0a0a14;
   --bg-card: var(--depth-2);
   --bg-input: hsl(var(--hsl-input));
-  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-lowest: #040408;
   --md3-surface-container-low: #12111f;
   --md3-surface-container: #191826;
   --md3-surface-container-high: #221f33;
@@ -7523,8 +7579,8 @@
   --border-subtle: rgba(227, 233, 229, 0.10);
   --border-default: rgba(227, 233, 229, 0.16);
   --border-hover: rgba(227, 233, 229, 0.28);
-  --border-strong: #868f87;
-  --field-border: #868f87;
+  --border-strong: #939c94;
+  --field-border: #939c94;
   --border-accent: rgba(118, 183, 145, 0.35);
   --border-accent-hover: rgba(118, 183, 145, 0.50);
   --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
@@ -7766,25 +7822,6 @@
   --muted-foreground: var(--hsl-muted-foreground);
 }
 :root {
-  --duration-instant: 90ms;
-  --duration-fast: 150ms;
-  --duration-base: 240ms;
-  --duration-slow: 360ms;
-  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-  --motion-control: var(--duration-fast) var(--ease-standard);
-  --motion-surface: var(--duration-base) var(--ease-entrance);
-  --motion-dismiss: var(--duration-instant) var(--ease-exit);
-  --duration-stream: 420ms;
-  --duration-arrive: 600ms;
-  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
-  --motion-stream: var(--duration-stream) var(--ease-expo);
-  --motion-arrive: var(--duration-arrive) var(--ease-expo);
-  --stagger-step: 50ms;
-  --stagger-index: 0;
-  --arrive-distance: 8px;
-  --stream-blur: 4px;
   --shimmer-period: 1400ms;
 }
 .sandbox-tree-surface {
@@ -8196,15 +8233,6 @@
   opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-  :root {
-    --duration-instant: 1ms;
-    --duration-fast: 1ms;
-    --duration-base: 1ms;
-    --duration-slow: 1ms;
-    --duration-stream: 1ms;
-    --duration-arrive: 1ms;
-    --stagger-step: 0ms;
-  }
   *:where(:not([data-motion="essential"], [data-motion="essential"] *)), *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before, *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
     animation-duration: 1ms !important;
     animation-iteration-count: 1 !important;

package/dist/tailwind.css

@@ -123,86 +123,9 @@
   --color-surface-bright: var(--md3-surface-bright);
 }
 
-/* ── Motion ────────────────────────────────────────────────────────────────
- *
- * `@tangle-network/brand` ships exactly one motion token (`--transition-default:
- * 0.16s ease`) and no curves, so every animated surface in this package picked
- * its own number: `duration-150` on a rail button, `duration-200` on the rail
- * itself, `0.18s ease-out` on a session row, Tailwind's implicit default
- * everywhere a bare `transition-colors` was written. Nothing was wrong;
- * nothing was decidable either, and none of it was reachable by a reduced-motion
- * preference.
- *
- * These are the SAME names and the SAME values `@tangle-network/agent-app`
- * declares in its own `theme/tokens.css` (0.45.46+), deliberately duplicated
- * rather than imported: sandbox-ui does not depend on agent-app, and a product
- * that loads both stylesheets must not get two different answers for
- * `--duration-base`. Identical declarations are order-independent; divergent
- * ones are a coin flip decided by import order. If agent-app retunes the
- * ladder, retune it here in the same change.
- *
- * They live in `globals.css` and not in `dist/tokens.css` because that file is
- * a byte-for-byte copy of brand's (see scripts/copy-styles.mjs) — the tokens
- * that are ours to declare belong in the one stylesheet this package authors,
- * next to the utilities that consume them.
- *
- *   instant  a control acknowledging a pointer (hover/active colour)
- *   fast     a state change on a control already on screen
- *   base     a surface arriving or leaving (popover, panel, disclosure)
- *   slow     a full-height surface travelling (drawer, sheet, the rail)
- *
- * Curves: entrances decelerate hard and land softly; state changes decelerate
- * normally; exits ACCELERATE away, because a user who dismissed something is
- * done with it and should not wait for it to glide out. */
+/* Brand owns motion roles and preference reduction. This period remains local
+ * for existing shimmer consumers; Sidebar exposes a static pending label. */
 :root {
-  --duration-instant: 90ms;
-  --duration-fast: 150ms;
-  --duration-base: 240ms;
-  --duration-slow: 360ms;
-  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-  /* Drop-in duration+easing pairs: `transition: background-color var(--motion-control)`. */
-  --motion-control: var(--duration-fast) var(--ease-standard);
-  --motion-surface: var(--duration-base) var(--ease-entrance);
-  --motion-dismiss: var(--duration-instant) var(--ease-exit);
-
-  /* Entrance choreography. The durations above answer "how fast does an
-   * existing thing change"; these answer "how does a thing that was not there
-   * ARRIVE" — a nav rail unfolding, a session appearing in the list, a
-   * disclosure revealing its sub-items.
-   *
-   * `--motion-stream` is longer than `base` on purpose: streamed text arrives
-   * continuously, so each chunk overlaps its neighbours and a fast curve makes
-   * the paragraph flicker. `--motion-arrive` is the row/card entrance and is
-   * meant to be staggered by index (see `--stagger-step`). */
-  --duration-stream: 420ms;
-  --duration-arrive: 600ms;
-  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
-  --motion-stream: var(--duration-stream) var(--ease-expo);
-  --motion-arrive: var(--duration-arrive) var(--ease-expo);
-  /* Per-item delay in a staggered group. 5 items = 200ms tail, which stays
-   * under the 250ms an interface can add before it reads as latency. */
-  --stagger-step: 50ms;
-  /* Position in a staggered group, overridden PER ELEMENT by the caller. It is
-   * declared here with a zero default rather than read through a `var()`
-   * fallback so the file never references a token it does not define — an
-   * undefined `var()` resolves to nothing and paints silently, which is the
-   * failure the token contract exists to catch. */
-  --stagger-index: 0;
-  /* How far an arriving surface travels, and how far a streamed chunk resolves
-   * from. Both are small: motion that announces itself is motion you notice
-   * twice. */
-  --arrive-distance: 8px;
-  --stream-blur: 4px;
-  /* Period of the `.agent-shimmer` sweep. Deliberately NOT named
-   * `--duration-*`: that prefix is the collapsible ladder, and the
-   * reduced-motion block sets every member of it to 1ms at `:root`. A custom
-   * property collapsed at the root cannot be excluded per element, so naming
-   * this one `--duration-shimmer` would freeze the sweep for the very users the
-   * `data-motion="essential"` exemption exists to keep informed. The sweep is a
-   * looping SIGNAL, not a transition, so it sits with the other non-collapsible
-   * motion constants above. */
   --shimmer-period: 1400ms;
 }
 
@@ -808,66 +731,10 @@
   opacity: 1;
 }
 
-/**
- * Reduced motion, at the token layer and at the floor.
- *
- * Two rules, because they cover two different populations. Collapsing the
- * duration TOKENS is what makes motion built on this system honour the
- * preference for free — a component that wrote `var(--motion-surface)` or
- * `duration-[var(--duration-fast)]` needs no media query of its own, and gets no
- * chance to forget one. The universal rule under it is the floor for everything
- * that predates the tokens: this package still carries transitions on Tailwind's
- * implicit duration, and a consuming app carries its own. Neither reads a token,
- * so neither would be reached.
- *
- * 1ms rather than 0: a zero-duration transition fires no `transitionend`, and
- * any component that awaits one to unmount or advance a state machine hangs
- * forever. 1ms is imperceptible AND still fires.
- *
- * THE RULE, so the next element is classified the same way this one was:
- *
- *   Motion is ESSENTIAL when it is the only evidence that something is
- *   happening RIGHT NOW — an operation in flight, a resource actively running.
- *   Freeze it and "working" becomes indistinguishable from "stuck", which is
- *   information removed. Everything else is DECORATIVE and is silenced.
- *
- * Two consequences make it decidable rather than a matter of taste:
- *
- *  - A static label beside the motion does NOT make an in-flight indicator
- *    decorative. "Loading processes…" stays on screen whether the fetch is
- *    alive or hung; only the spinner separates those.
- *  - A state that is NOT in flight is carried by its label, its colour and its
- *    shape, so motion on it is emphasis. The `animate-ping` beside "Error
- *    fetching logs" says nothing the sentence does not, and it is silenced.
- *    Skeleton placeholders are the same case: a frozen skeleton still reads as
- *    a placeholder, because the shape is the message.
- *
- * The exemption is declared PER ELEMENT with `data-motion="essential"`, never on
- * a class. `.agent-shimmer` is the reason: the identical sweep marks a session
- * whose agent is mid-turn and dresses a plain skeleton, and only the caller
- * knows which one it built. The exclusion covers the element and its subtree,
- * and `:where()` keeps the selector at zero specificity so a consumer's own rule
- * can still win. Reduced motion is not a design preference to be overridden, it
- * is a request from the person using the product; the only defensible exemption
- * is motion whose absence removes information.
- *
- * Note the asymmetry with the `:root` block: a duration collapsed there reaches
- * every element, `data-motion` included, because a custom property cannot be
- * un-inherited. That is why an essential animation's period is not a
- * `--duration-*` token — @see `--shimmer-period`.
- */
+/* Brand reduces its motion tokens, including scoped themes. Keep the existing
+ * floor for legacy components that do not consume those roles. Its per-element
+ * essential-motion exclusion is unchanged; new Sidebar pending state is static. */
 @media (prefers-reduced-motion: reduce) {
-  :root {
-    --duration-instant: 1ms;
-    --duration-fast: 1ms;
-    --duration-base: 1ms;
-    --duration-slow: 1ms;
-    --duration-stream: 1ms;
-    --duration-arrive: 1ms;
-    /* The stagger is a delay, not a duration, and a collapsed animation with a
-       live delay still arrives as a visible cascade. */
-    --stagger-step: 0ms;
-  }
 
   /* `::before` and `::after` are listed because `*` matches elements only, and
      an animation declared on a pseudo-element is therefore invisible to the