@hanzo/ui 8.2.1 → 8.3.0

package/dist/backends/gui/screen.cjs

@@ -9,18 +9,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * The shape is always the same: something pinned at the top, something pinned at
  * the bottom, and a middle that takes whatever is left and scrolls. Chat writes
  * it, the console writes it, every workbench pane writes it. Written by hand it
- * is two declarations, and BOTH have to be right or the failure is silent:
+ * is `flex: 1` for the slack plus something that says what to do with the
+ * overflow, and the second half is the one that gets left out. Measured in this
+ * package: `Thread` rendered 976px of turns in a 332px box and drew every one of
+ * them across the composer, because a container with `overflow: visible` never
+ * scrolls no matter how full it gets.
  *
- *   `flex: 1`  alone gives the middle the slack…
- *   `minHeight: 0`  is what lets it actually shrink to take it.
- *
- * Without the second, a flex item's automatic minimum is its CONTENT, so the
- * middle refuses to go below its natural height, grows the shell instead, and —
- * because a scroll container that never overflows never scrolls — paints its
- * content straight over whatever follows. Measured in this package: `Thread`
- * rendered 976px of turns in a 332px box and drew every one of them across the
- * composer. 37 files here set `flex={1}`; exactly one had ever written the
- * second declaration, and only after that bug was found.
+ * The folklore names `minHeight: 0` as that second half — a flex item's
+ * automatic minimum is its content, so the item refuses to shrink and grows the
+ * shell instead. True in general, and already handled here: rnw's `View` base and
+ * gui's own stack base both set `min-height: 0`, measured on the rendered
+ * element. So on web it is the DECLARED OVERFLOW that contains a shell, and
+ * `scripts/contain.mjs` keeps one frame of each as a control to say so —
+ * overflow without `minH` contains, `minH` without overflow escapes by 310px.
+ * Do not go adding `minH={0}` to flex sites; it changes nothing here.
  *
  * So the rule stops being a rule. `Fill` IS the middle, with both halves and the
  * clip built in, and a caller cannot forget a thing it does not have to write.
@@ -57,10 +59,17 @@ exports.Screen = Screen;
 /**
  * The middle. Takes the slack, and can give it back.
  *
- * `flexBasis: 0` with `minHeight: 0` is the pair that makes "takes the slack"
- * true in both directions: grow into a bigger shell, shrink inside a smaller
- * one. Siblings need nothing — a bar keeps its natural height because it never
- * asked for slack.
+ * `flexBasis: 0` is what makes "takes the slack" true in both directions: grow
+ * into a bigger shell, shrink inside a smaller one. Siblings need nothing — a bar
+ * keeps its natural height because it never asked for slack. `overflowY` is the
+ * half that actually contains the result, and `minH` restates a floor the bases
+ * already set, kept because it costs nothing and this is where a reader looks
+ * for it.
+ *
+ * On web `scroll` becomes `overflow-y: auto` on a styled stack. A `ScrollView`
+ * is the other way to get a scrolling middle and the two are not
+ * interchangeable off the web — nothing here measures native, so nothing here
+ * claims it.
  */
 const Fill = ({ children, scroll = true, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('fill'), flex: 1, flexBasis: 0, minH: 0, width: "100%", overflowY: scroll ? 'auto' : 'hidden', ...props, children: children }));
 exports.Fill = Fill;

package/dist/backends/gui/screen.d.ts

@@ -4,18 +4,20 @@
  * The shape is always the same: something pinned at the top, something pinned at
  * the bottom, and a middle that takes whatever is left and scrolls. Chat writes
  * it, the console writes it, every workbench pane writes it. Written by hand it
- * is two declarations, and BOTH have to be right or the failure is silent:
+ * is `flex: 1` for the slack plus something that says what to do with the
+ * overflow, and the second half is the one that gets left out. Measured in this
+ * package: `Thread` rendered 976px of turns in a 332px box and drew every one of
+ * them across the composer, because a container with `overflow: visible` never
+ * scrolls no matter how full it gets.
  *
- *   `flex: 1`  alone gives the middle the slack…
- *   `minHeight: 0`  is what lets it actually shrink to take it.
- *
- * Without the second, a flex item's automatic minimum is its CONTENT, so the
- * middle refuses to go below its natural height, grows the shell instead, and —
- * because a scroll container that never overflows never scrolls — paints its
- * content straight over whatever follows. Measured in this package: `Thread`
- * rendered 976px of turns in a 332px box and drew every one of them across the
- * composer. 37 files here set `flex={1}`; exactly one had ever written the
- * second declaration, and only after that bug was found.
+ * The folklore names `minHeight: 0` as that second half — a flex item's
+ * automatic minimum is its content, so the item refuses to shrink and grows the
+ * shell instead. True in general, and already handled here: rnw's `View` base and
+ * gui's own stack base both set `min-height: 0`, measured on the rendered
+ * element. So on web it is the DECLARED OVERFLOW that contains a shell, and
+ * `scripts/contain.mjs` keeps one frame of each as a control to say so —
+ * overflow without `minH` contains, `minH` without overflow escapes by 310px.
+ * Do not go adding `minH={0}` to flex sites; it changes nothing here.
  *
  * So the rule stops being a rule. `Fill` IS the middle, with both halves and the
  * clip built in, and a caller cannot forget a thing it does not have to write.
@@ -49,10 +51,17 @@ export interface FillProps extends YStackProps {
 /**
  * The middle. Takes the slack, and can give it back.
  *
- * `flexBasis: 0` with `minHeight: 0` is the pair that makes "takes the slack"
- * true in both directions: grow into a bigger shell, shrink inside a smaller
- * one. Siblings need nothing — a bar keeps its natural height because it never
- * asked for slack.
+ * `flexBasis: 0` is what makes "takes the slack" true in both directions: grow
+ * into a bigger shell, shrink inside a smaller one. Siblings need nothing — a bar
+ * keeps its natural height because it never asked for slack. `overflowY` is the
+ * half that actually contains the result, and `minH` restates a floor the bases
+ * already set, kept because it costs nothing and this is where a reader looks
+ * for it.
+ *
+ * On web `scroll` becomes `overflow-y: auto` on a styled stack. A `ScrollView`
+ * is the other way to get a scrolling middle and the two are not
+ * interchangeable off the web — nothing here measures native, so nothing here
+ * claims it.
  */
 declare const Fill: ({ children, scroll, ...props }: FillProps) => import("react/jsx-runtime").JSX.Element;
 export { Screen, Fill };

package/dist/backends/gui/screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAGrD,MAAM,WAAW,WAAY,SAAQ,WAAW;CAAG;AAEnD;;;;GAIG;AACH,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAkBlD,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,gCAAuC,SAAS,4CAY7D,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAGrD,MAAM,WAAW,WAAY,SAAQ,WAAW;CAAG;AAEnD;;;;GAIG;AACH,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAkBlD,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,IAAI,GAAI,gCAAuC,SAAS,4CAY7D,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}

package/dist/backends/gui/screen.js

@@ -6,18 +6,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * The shape is always the same: something pinned at the top, something pinned at
  * the bottom, and a middle that takes whatever is left and scrolls. Chat writes
  * it, the console writes it, every workbench pane writes it. Written by hand it
- * is two declarations, and BOTH have to be right or the failure is silent:
+ * is `flex: 1` for the slack plus something that says what to do with the
+ * overflow, and the second half is the one that gets left out. Measured in this
+ * package: `Thread` rendered 976px of turns in a 332px box and drew every one of
+ * them across the composer, because a container with `overflow: visible` never
+ * scrolls no matter how full it gets.
  *
- *   `flex: 1`  alone gives the middle the slack…
- *   `minHeight: 0`  is what lets it actually shrink to take it.
- *
- * Without the second, a flex item's automatic minimum is its CONTENT, so the
- * middle refuses to go below its natural height, grows the shell instead, and —
- * because a scroll container that never overflows never scrolls — paints its
- * content straight over whatever follows. Measured in this package: `Thread`
- * rendered 976px of turns in a 332px box and drew every one of them across the
- * composer. 37 files here set `flex={1}`; exactly one had ever written the
- * second declaration, and only after that bug was found.
+ * The folklore names `minHeight: 0` as that second half — a flex item's
+ * automatic minimum is its content, so the item refuses to shrink and grows the
+ * shell instead. True in general, and already handled here: rnw's `View` base and
+ * gui's own stack base both set `min-height: 0`, measured on the rendered
+ * element. So on web it is the DECLARED OVERFLOW that contains a shell, and
+ * `scripts/contain.mjs` keeps one frame of each as a control to say so —
+ * overflow without `minH` contains, `minH` without overflow escapes by 310px.
+ * Do not go adding `minH={0}` to flex sites; it changes nothing here.
  *
  * So the rule stops being a rule. `Fill` IS the middle, with both halves and the
  * clip built in, and a caller cannot forget a thing it does not have to write.
@@ -53,10 +55,17 @@ const Screen = ({ children, ...props }) => (_jsx(YStack, { ...slot('screen'),
 /**
  * The middle. Takes the slack, and can give it back.
  *
- * `flexBasis: 0` with `minHeight: 0` is the pair that makes "takes the slack"
- * true in both directions: grow into a bigger shell, shrink inside a smaller
- * one. Siblings need nothing — a bar keeps its natural height because it never
- * asked for slack.
+ * `flexBasis: 0` is what makes "takes the slack" true in both directions: grow
+ * into a bigger shell, shrink inside a smaller one. Siblings need nothing — a bar
+ * keeps its natural height because it never asked for slack. `overflowY` is the
+ * half that actually contains the result, and `minH` restates a floor the bases
+ * already set, kept because it costs nothing and this is where a reader looks
+ * for it.
+ *
+ * On web `scroll` becomes `overflow-y: auto` on a styled stack. A `ScrollView`
+ * is the other way to get a scrolling middle and the two are not
+ * interchangeable off the web — nothing here measures native, so nothing here
+ * claims it.
  */
 const Fill = ({ children, scroll = true, ...props }) => (_jsx(YStack, { ...slot('fill'), flex: 1, flexBasis: 0, minH: 0, width: "100%", overflowY: scroll ? 'auto' : 'hidden', ...props, children: children }));
 export { Screen, Fill };

package/dist/backends/gui/screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B;;;;GAIG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,MAAM,OACD,IAAI,CAAC,QAAQ,CAAC;IAClB,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,wEAAwE;IACxE,0EAA0E;IAC1E,8EAA8E;IAC9E,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,QAAQ,KACb,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAOD;;;;;;;GAOG;AACH,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,CAAC,EACZ,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KACjC,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B;;;;GAIG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,MAAM,OACD,IAAI,CAAC,QAAQ,CAAC;IAClB,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,wEAAwE;IACxE,0EAA0E;IAC1E,8EAA8E;IAC9E,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,QAAQ,KACb,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAOD;;;;;;;;;;;;;;GAcG;AACH,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,CAAC,EACZ,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KACjC,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.2.1</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.3.0</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *
@@ -1898,48 +1898,41 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-fade-up,
-.fade-up {
+.hz-fade-up {
   animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
   will-change: transform, opacity;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-fade-up,
-  .fade-up {
+  .hz-fade-up {
     animation: none;
   }
 }
 
 /* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
    nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
-.hz-collapse,
-.collapse {
+.hz-collapse {
   transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: width;
 }
 
-.hz-slide,
-.slide {
+.hz-slide {
   transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }
 
-.hz-fade,
-.fade {
+.hz-fade {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
 }
 
 /* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
    lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
-.hz-drag,
-.drag {
+.hz-drag {
   touch-action: none;
   transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.hz-drag[data-dragging='true'],
-.drag[data-dragging='true'] {
+.hz-drag[data-dragging='true'] {
   transition: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
   opacity: 0.96;
@@ -1948,13 +1941,9 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
 
 @media (prefers-reduced-motion: reduce) {
   .hz-collapse,
-  .collapse,
   .hz-slide,
-  .slide,
   .hz-fade,
-  .fade,
-  .hz-drag,
-  .drag {
+  .hz-drag {
     transition: none;
   }
 }
@@ -1974,8 +1963,7 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-skeleton,
-.skeleton {
+.hz-skeleton {
   background-color: var(--color3, rgba(128, 128, 128, 0.14));
   background-image: linear-gradient(
     90deg,
@@ -2013,18 +2001,15 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-row-in,
-.row-in {
+.hz-row-in {
   animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-skeleton,
-  .skeleton {
+  .hz-skeleton {
     animation: none;
   }
-  .hz-row-in,
-  .row-in {
+  .hz-row-in {
     animation: none;
   }
 }
@@ -2037,16 +2022,14 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
    correctly. The elevation/ring variables fall back to sane values, so a host
    that defines its own `--hz-*` theme tokens (the console does) still wins. */
 
-.hz-tnum,
-.tnum {
+.hz-tnum {
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
 }
 
 /* Data/numeric face — Geist Mono + tabular figures for metric values, prices, IDs
    and counts, so numbers read as precise, column-aligned data. */
-.hz-mono,
-.mono {
+.hz-mono {
   font-family: var(--font-mono, 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
@@ -2066,8 +2049,7 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
    order — so paper lost its drop on dark exactly the way the rungs did. The
    fallback stays because this sheet ships on its own: a host that imports
    motion.css without glass.css has no ladder to read. */
-.hz-paper,
-.paper {
+.hz-paper {
   box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
     var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
@@ -2082,20 +2064,17 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-menu-in,
-.menu-in {
+.hz-menu-in {
   animation: hz-menu-in 140ms ease-out both;
   will-change: opacity;
 }
 
-.hz-row,
-.row {
+.hz-row {
   transition: background-color 140ms ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-menu-in,
-  .menu-in {
+  .hz-menu-in {
     animation: none;
   }
 }

package/dist/styles/motion.css

@@ -36,48 +36,41 @@
   }
 }
 
-.hz-fade-up,
-.fade-up {
+.hz-fade-up {
   animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
   will-change: transform, opacity;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-fade-up,
-  .fade-up {
+  .hz-fade-up {
     animation: none;
   }
 }
 
 /* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
    nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
-.hz-collapse,
-.collapse {
+.hz-collapse {
   transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: width;
 }
 
-.hz-slide,
-.slide {
+.hz-slide {
   transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }
 
-.hz-fade,
-.fade {
+.hz-fade {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
 }
 
 /* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
    lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
-.hz-drag,
-.drag {
+.hz-drag {
   touch-action: none;
   transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.hz-drag[data-dragging='true'],
-.drag[data-dragging='true'] {
+.hz-drag[data-dragging='true'] {
   transition: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
   opacity: 0.96;
@@ -86,13 +79,9 @@
 
 @media (prefers-reduced-motion: reduce) {
   .hz-collapse,
-  .collapse,
   .hz-slide,
-  .slide,
   .hz-fade,
-  .fade,
-  .hz-drag,
-  .drag {
+  .hz-drag {
     transition: none;
   }
 }
@@ -112,8 +101,7 @@
   }
 }
 
-.hz-skeleton,
-.skeleton {
+.hz-skeleton {
   background-color: var(--color3, rgba(128, 128, 128, 0.14));
   background-image: linear-gradient(
     90deg,
@@ -151,18 +139,15 @@
   }
 }
 
-.hz-row-in,
-.row-in {
+.hz-row-in {
   animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-skeleton,
-  .skeleton {
+  .hz-skeleton {
     animation: none;
   }
-  .hz-row-in,
-  .row-in {
+  .hz-row-in {
     animation: none;
   }
 }
@@ -175,16 +160,14 @@
    correctly. The elevation/ring variables fall back to sane values, so a host
    that defines its own `--hz-*` theme tokens (the console does) still wins. */
 
-.hz-tnum,
-.tnum {
+.hz-tnum {
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
 }
 
 /* Data/numeric face — Geist Mono + tabular figures for metric values, prices, IDs
    and counts, so numbers read as precise, column-aligned data. */
-.hz-mono,
-.mono {
+.hz-mono {
   font-family: var(--font-mono, 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
@@ -204,8 +187,7 @@
    order — so paper lost its drop on dark exactly the way the rungs did. The
    fallback stays because this sheet ships on its own: a host that imports
    motion.css without glass.css has no ladder to read. */
-.hz-paper,
-.paper {
+.hz-paper {
   box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
     var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
@@ -220,20 +202,17 @@
   }
 }
 
-.hz-menu-in,
-.menu-in {
+.hz-menu-in {
   animation: hz-menu-in 140ms ease-out both;
   will-change: opacity;
 }
 
-.hz-row,
-.row {
+.hz-row {
   transition: background-color 140ms ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-menu-in,
-  .menu-in {
+  .hz-menu-in {
     animation: none;
   }
 }

package/dist/styles.css

@@ -1898,48 +1898,41 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-fade-up,
-.fade-up {
+.hz-fade-up {
   animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
   will-change: transform, opacity;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-fade-up,
-  .fade-up {
+  .hz-fade-up {
     animation: none;
   }
 }
 
 /* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
    nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
-.hz-collapse,
-.collapse {
+.hz-collapse {
   transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: width;
 }
 
-.hz-slide,
-.slide {
+.hz-slide {
   transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }
 
-.hz-fade,
-.fade {
+.hz-fade {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
 }
 
 /* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
    lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
-.hz-drag,
-.drag {
+.hz-drag {
   touch-action: none;
   transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.hz-drag[data-dragging='true'],
-.drag[data-dragging='true'] {
+.hz-drag[data-dragging='true'] {
   transition: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
   opacity: 0.96;
@@ -1948,13 +1941,9 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
 
 @media (prefers-reduced-motion: reduce) {
   .hz-collapse,
-  .collapse,
   .hz-slide,
-  .slide,
   .hz-fade,
-  .fade,
-  .hz-drag,
-  .drag {
+  .hz-drag {
     transition: none;
   }
 }
@@ -1974,8 +1963,7 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-skeleton,
-.skeleton {
+.hz-skeleton {
   background-color: var(--color3, rgba(128, 128, 128, 0.14));
   background-image: linear-gradient(
     90deg,
@@ -2013,18 +2001,15 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-row-in,
-.row-in {
+.hz-row-in {
   animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-skeleton,
-  .skeleton {
+  .hz-skeleton {
     animation: none;
   }
-  .hz-row-in,
-  .row-in {
+  .hz-row-in {
     animation: none;
   }
 }
@@ -2037,16 +2022,14 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
    correctly. The elevation/ring variables fall back to sane values, so a host
    that defines its own `--hz-*` theme tokens (the console does) still wins. */
 
-.hz-tnum,
-.tnum {
+.hz-tnum {
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
 }
 
 /* Data/numeric face — Geist Mono + tabular figures for metric values, prices, IDs
    and counts, so numbers read as precise, column-aligned data. */
-.hz-mono,
-.mono {
+.hz-mono {
   font-family: var(--font-mono, 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
@@ -2066,8 +2049,7 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
    order — so paper lost its drop on dark exactly the way the rungs did. The
    fallback stays because this sheet ships on its own: a host that imports
    motion.css without glass.css has no ladder to read. */
-.hz-paper,
-.paper {
+.hz-paper {
   box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
     var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
@@ -2082,20 +2064,17 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
   }
 }
 
-.hz-menu-in,
-.menu-in {
+.hz-menu-in {
   animation: hz-menu-in 140ms ease-out both;
   will-change: opacity;
 }
 
-.hz-row,
-.row {
+.hz-row {
   transition: background-color 140ms ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-menu-in,
-  .menu-in {
+  .hz-menu-in {
     animation: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "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": {