@hanzo/ui 8.27.46 → 8.27.48

package/dist/styles/motion.css

@@ -11,13 +11,15 @@
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -35,6 +37,17 @@
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -115,8 +128,45 @@
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }

package/dist/styles.css

@@ -1819,13 +1819,15 @@
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -1843,6 +1845,17 @@
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -1923,8 +1936,45 @@
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }
@@ -2500,13 +2550,15 @@ a svg,
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -2524,6 +2576,17 @@ a svg,
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -2604,8 +2667,45 @@ a svg,
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }

package/dist/theme.css

@@ -1817,13 +1817,15 @@
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -1841,6 +1843,17 @@
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -1921,8 +1934,45 @@
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.27.46",
+  "version": "8.27.48",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {
@@ -247,6 +247,7 @@
       "default": "./dist/telemetry.js"
     },
     "./styles/motion.css": "./dist/styles/motion.css",
+    "./styles/document.css": "./dist/styles/document.css",
     "./package.json": "./package.json",
     "./tw": {
       "types": "./dist/tw.d.ts",
@@ -412,7 +413,7 @@
   "license": "Apache-2.0 OR MIT",
   "author": "Hanzo AI <dev@hanzo.ai>",
   "scripts": {
-    "build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && node scripts/compose-theme.mjs && cp src/styles/motion.css dist/styles/motion.css && cp src/next.cjs dist/next.cjs && node scripts/postbuild.mjs && node scripts/gen-css.mjs",
+    "build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && node scripts/compose-theme.mjs && cp src/styles/motion.css dist/styles/motion.css && cp src/styles/document.css dist/styles/document.css && cp src/next.cjs dist/next.cjs && node scripts/postbuild.mjs && node scripts/gen-css.mjs",
     "clean": "rm -rf dist dist-cjs types",
     "gen:primitives": "node scripts/gen-primitives.mjs",
     "tc": "tsc --noEmit",