@hanzo/ui 8.27.44 → 8.27.45

package/dist/glass.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.fold = exports.unfold = exports.crease = exports.sheet = exports.glass = void 0;
+exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.fold = exports.unfold = exports.sheet = exports.glass = void 0;
 exports.paper = paper;
 /**
  * The chrome, as values — `@hanzo/ui/glass`.
@@ -108,28 +108,6 @@ const SHEET_FILL = {
     1: 'var(--sheet-1, rgb(38 38 38 / .5))',
     2: 'var(--sheet-2, rgb(38 38 38 / .75))',
 };
-/**
- * The crease — the valley where a neighbouring sheet lies over this one.
- *
- *   <YStack {...paper(sheet(0), crease('right'))}>
- *
- * The ladder's drops fall straight down (design's rule is one light, above), so
- * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
- * vertical seams. Three sheets a rung apart, side by side, still read as three
- * abutting rectangles. This is the mark that makes them read as paper: the
- * ground going dark in the valley, which is what a sheet actually lays on the
- * one beside it.
- *
- * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
- * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
- * outside its own box, so the receiver draws it; the caster only has to be
- * higher up the ladder.
- *
- * Spend it at a seam and nowhere else. A crease down the side of a card with
- * nothing beside it is a gradient somebody liked.
- */
-const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-crease': edge } : {}) });
-exports.crease = crease;
 /**
  * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
  * rather than fading up as a rectangle.
@@ -144,7 +122,7 @@ exports.crease = crease;
  * composes with `sheet`, `glass` or neither. Off under reduced motion, in
  * `styles/motion.css` beside every other keyframe this package ships.
  */
-const unfold = (hinge = 'left') => ({ className: 'hz-unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
+const unfold = (hinge = 'left') => ({ 'data-motion': 'unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
 exports.unfold = unfold;
 function paper(...marks) {
     const className = marks

package/dist/glass.css

@@ -244,73 +244,6 @@
   border-bottom-right-radius: 0 !important;
 }
 
-/* ── The crease — the valley where one sheet lies over another ───────────────
-   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
-   is one light, above, and `check-tokens.mjs` fails the build on a sideways
-   offset. That is right, and it means the ladder has nothing to say about a
-   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
-   a sidebar beside a pane, each a step apart on the ladder, still reads as three
-   abutting rectangles with lines ruled between them, because the only mark at
-   the seam is the hairline.
-
-   What a real sheet lays on the one beneath it, side by side under a light from
-   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
-   has no direction of its own, which is both why it is honest here and why it is
-   NOT spelled as a --shadow-*: those are directional by definition and this is
-   not one.
-
-   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
-   paints above the sheet's own fill and below every child. That ordering is the
-   whole reason it is not a `background-image` (which `.fold` already claims on
-   this same element, !important, so the two would silently fight) and not an
-   inset `box-shadow` (which `.elevation-*` claims, likewise).
-
-   No side named -> both edges, which is what a pane with a neighbour on each
-   hand needs. Name one and the other stops being drawn. */
-:root {
-  --crease-ink: rgb(0 0 0 / .28);
-  --crease-depth: 20px;
-}
-
-.light, :root.t_light, .t_light {
-  /* On white the valley is a smudge, not a shadow — the same redistribution the
-     drops make, and for the same reason. */
-  --crease-ink: rgb(0 0 0 / .05);
-}
-
-.hz-crease {
-  position: relative;
-  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
-     indistinguishable from the crease not being there at all. */
-  isolation: isolate;
-}
-
-.hz-crease::before,
-.hz-crease::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--crease-depth);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.hz-crease::before {
-  left: 0;
-  background-image: linear-gradient(to right, var(--crease-ink), transparent);
-}
-
-.hz-crease::after {
-  right: 0;
-  background-image: linear-gradient(to left, var(--crease-ink), transparent);
-}
-
-.hz-crease[data-crease="left"]::after,
-.hz-crease[data-crease="right"]::before {
-  content: none;
-}
-
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further
@@ -358,135 +291,6 @@
   border-top: 1px solid var(--borderColor, var(--border));
 }
 
-/* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
-   The composer is where you talk to Hanzo, so it is the thing that should look
-   alive, and it earns that with MOTION and LIGHT rather than hue. Every other
-   pixel of chrome stays monochrome; there is no second exemption, and the two
-   attempts to grant one (a violet ring, then a full-wheel rainbow) each made
-   the surface wearing it the only colour in the product.
-
-   THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
-   client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
-   each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
-   to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
-   fix — invisible until a glass panel sat in it, at which point the whole
-   spectrum washed up through the composer's interior. chat also quieted the
-   halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
-   copies of one look is how that happens, and neither app could see the other
-   was wrong.
-
-   Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
-   panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
-   panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
-   to be any material — opaque, glass, anything. The stops are declared once and
-   read by both, because duplicated they drift on the first palette change and
-   nobody notices which half moved. */
-
-/* `@property` is what lets a conic angle animate. Where it is unsupported the
-   ring is simply static, which is a fine floor. */
-@property --hz-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
-
-:root {
-  /* One sweep, closing on the stop it opened with — a conic gradient whose
-     first and last stop differ shows a hard seam.
-
-     LUMINANCE, NOT HUE. Four saturated stops at 0.40-0.48 alpha, swept around
-     a rounded RECTANGLE, do not distribute evenly: the long top and bottom
-     edges each take a wide angular slice and the short sides almost none, so
-     one edge wore a bright blue while the opposite wore a burnt orange — a
-     ring that highlights half the box and reads as sitting off-centre. White
-     at two close alphas removes the bright arc entirely, drops the peak from
-     0.48 to 0.18, and keeps the slow drift as a sheen. hanzo.chat and
-     hanzo.app both declare exactly these stops; this is the package catching
-     up to its consumers — the copies must not drift again, and this file is
-     the home. */
-  --hz-spectrum: rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.1);
-}
-
-@keyframes hzComposerSpin {
-  to {
-    --hz-angle: 360deg;
-  }
-}
-
-.hz-composer {
-  position: relative;
-  isolation: isolate;
-  padding: 1.5px;
-}
-
-/* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
-   paint outside it — `content-box` is the hole, the full box the plate, and
-   `exclude` leaves the lip. */
-.hz-composer::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1.5px;
-  border-radius: inherit;
-  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
-  animation: hzComposerSpin 10s linear infinite;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
-     declaring this first lets the shorthand reset it to `source-over` — the
-     filled disc again, on exactly the browsers too old to have `mask-composite`
-     at all. */
-  -webkit-mask-composite: xor;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* The halo lights the air AROUND the box and nothing behind it. */
-.hz-composer::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-  padding: 6px;
-  /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
-     inherited corner on this larger box curves too tight and reads as a second,
-     mismatched rounding just outside the panel. */
-  border-radius: calc(1.5rem + 6px);
-  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
-  filter: blur(16px);
-  opacity: 0.22;
-  animation: hzComposerSpin 10s linear infinite;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  z-index: -1;
-  pointer-events: none;
-}
-
-/* The panel sits above ring and halo. */
-.hz-composer > * {
-  position: relative;
-  z-index: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hz-composer::before,
-  .hz-composer::after {
-    animation: none;
-  }
-}
-
 /* FOCUS RINGS THE CONTROL A PERSON SEES, WHICH IS THE WHOLE COMPOSER.
 
    `Composer` is a bordered box holding a field above a toolbar row, so it reads

package/dist/glass.d.ts

@@ -80,30 +80,6 @@ export declare const sheet: (level?: 0 | 1 | 2) => {
  * what a pane between two other panes needs.
  */
 export type Edge = 'left' | 'right';
-/**
- * The crease — the valley where a neighbouring sheet lies over this one.
- *
- *   <YStack {...paper(sheet(0), crease('right'))}>
- *
- * The ladder's drops fall straight down (design's rule is one light, above), so
- * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
- * vertical seams. Three sheets a rung apart, side by side, still read as three
- * abutting rectangles. This is the mark that makes them read as paper: the
- * ground going dark in the valley, which is what a sheet actually lays on the
- * one beside it.
- *
- * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
- * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
- * outside its own box, so the receiver draws it; the caster only has to be
- * higher up the ladder.
- *
- * Spend it at a seam and nowhere else. A crease down the side of a card with
- * nothing beside it is a gradient somebody liked.
- */
-export declare const crease: (edge?: Edge) => {
-    readonly className: 'hz-crease';
-    readonly 'data-crease'?: Edge | undefined;
-};
 /**
  * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
  * rather than fading up as a rectangle.
@@ -119,7 +95,7 @@ export declare const crease: (edge?: Edge) => {
  * `styles/motion.css` beside every other keyframe this package ships.
  */
 export declare const unfold: (hinge?: Edge) => {
-    readonly className: 'hz-unfold';
+    readonly 'data-motion': 'unfold';
     readonly 'data-hinge'?: string | undefined;
 };
 interface Mark {
@@ -128,7 +104,7 @@ interface Mark {
 /**
  * Compose marks onto one surface, without losing a class.
  *
- *   <YStack {...paper(sheet(1), crease('left'), fold)}>
+ *   <YStack {...paper(sheet(1), unfold(), fold)}>
  *
  * SPREADING TWO RECIPES SILENTLY DROPS ONE. `{...sheet(1)} {...fold}` — the
  * composition `fold`'s own documentation shows — keeps only the last

package/dist/glass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,KAAK,WAAW,IAAI;aAE7B,SAAS;aACT,eAAe,EAAE,aAAa;aAC9B,WAAW,EAAE,cAAc;CAClB,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC;;;CAIzB,CAAA;AAQb;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,CAAA;AAEnC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,WAAW,IAAI;4BACd,QAAQ;;CAAqE,CAAA;AAEjG,UAAU,IAAI;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;AAC9C,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AACxE,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AASlG;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI;aAAK,SAAS,EAAE,MAAM;CAAW,CAAA;AAElD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;aAAK,eAAe,EAAE,uCAAuC;CAAW,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;aAChB,eAAe,EAAE,SAAS;aAC1B,WAAW,EAAE,CAAC;aACd,WAAW,EAAE,cAAc;aAC3B,YAAY,EAAE,IAAI;aAClB,SAAS,EAAE,aAAa;CAChB,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI;8BAxBE,SAAS;0BACb,CAAC;0BACD,cAAc;2BACb,IAAI;wBACP,aAAa;uBAuBd,QAAQ;CACV,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,GAAG;aACd,aAAa,EAAE,KAAK;aACpB,UAAU,EAAE,QAAQ;aACpB,cAAc,EAAE,eAAe;aAC/B,GAAG,EAAE,IAAI;aACT,iBAAiB,EAAE,IAAI;aACvB,eAAe,EAAE,IAAI;CACb,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,OAAQ,OAAO;8BAEV,SAAS;oBAAS,UAAU;;8BAC5B,aAAa;oBAAS,UAAU;CAAY,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;aACjB,eAAe,EAAE,SAAS;aAC1B,WAAW,EAAE,CAAC;aACd,WAAW,EAAE,SAAS;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;aACH,KAAK,EAAE,UAAU;aACjB,UAAU;iBAAI,eAAe,EAAE,SAAS;iBAAE,KAAK,EAAE,UAAU;;CACnD,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;aACjB,SAAS,EAAE,QAAQ;aACnB,UAAU,EAAE,QAAQ;aACpB,cAAc,EAAE,QAAQ;CAChB,CAAA"}

package/dist/glass.js

@@ -102,27 +102,6 @@ const SHEET_FILL = {
     1: 'var(--sheet-1, rgb(38 38 38 / .5))',
     2: 'var(--sheet-2, rgb(38 38 38 / .75))',
 };
-/**
- * The crease — the valley where a neighbouring sheet lies over this one.
- *
- *   <YStack {...paper(sheet(0), crease('right'))}>
- *
- * The ladder's drops fall straight down (design's rule is one light, above), so
- * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
- * vertical seams. Three sheets a rung apart, side by side, still read as three
- * abutting rectangles. This is the mark that makes them read as paper: the
- * ground going dark in the valley, which is what a sheet actually lays on the
- * one beside it.
- *
- * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
- * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
- * outside its own box, so the receiver draws it; the caster only has to be
- * higher up the ladder.
- *
- * Spend it at a seam and nowhere else. A crease down the side of a card with
- * nothing beside it is a gradient somebody liked.
- */
-export const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-crease': edge } : {}) });
 /**
  * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
  * rather than fading up as a rectangle.
@@ -137,7 +116,7 @@ export const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-cr
  * composes with `sheet`, `glass` or neither. Off under reduced motion, in
  * `styles/motion.css` beside every other keyframe this package ships.
  */
-export const unfold = (hinge = 'left') => ({ className: 'hz-unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
+export const unfold = (hinge = 'left') => ({ 'data-motion': 'unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
 export function paper(...marks) {
     const className = marks
         .map((mark) => mark.className)

package/dist/glass.js.map

@@ -1 +1 @@
-{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GAAS,CAAC,EAAE,EAAE,CACvC,CAAC;IACC,SAAS,EAAE,mBAAmB,KAAK,EAAE;IACrC,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,cAAc;CAC5B,CAAU,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GAAc,CAAC,EAAE,EAAE,CAC5C,CAAC;IACC,eAAe,EAAE,UAAU,CAAC,KAAK,CAAC;IAClC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,EAAW,EAAE,CAAC;CACrE,CAAU,CAAA;AAEb,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,yBAAyB;IAC5B,CAAC,EAAE,oCAAoC;IACvC,CAAC,EAAE,qCAAqC;CAChC,CAAA;AAQV;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,IAAW,EAAE,EAAE,CACpC,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAU,CAAA;AAEjF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAK,GAAS,MAAM,EAAE,EAAE,CAC7C,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAU,CAAA;AA0BhG,MAAM,UAAU,KAAK,CAAC,GAAG,KAAa;IACpC,MAAM,SAAS,GAAG,KAAK;SACpB,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC;SAC7B,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IACZ,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAA;AAChF,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,SAAS,EAAE,MAAM,EAAW,CAAA;AAElD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,eAAe,EAAE,uCAAuC,EAAW,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,IAAI;IAClB,SAAS,EAAE,aAAa;CAChB,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,KAAK;IACR,GAAG,IAAI,CAAC,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ;CACV,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,IAAI;IACT,iBAAiB,EAAE,IAAI;IACvB,eAAe,EAAE,IAAI;CACb,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAW,EAAE,EAAE,CACtC,EAAE;IACA,CAAC,CAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAY;IAC9D,CAAC,CAAE,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAY,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,SAAS;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,KAAK,EAAE,UAAU;IACjB,UAAU,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;CACrD,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CAChB,CAAA"}
+{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"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"}

package/dist/grid.cjs

@@ -3,6 +3,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = exports.Grid = exports.tracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Grid — a real CSS grid whose tracks come from the CONTAINER, not the children.
+ *
+ * This exists to kill a specific shipped defect: hand-rolled
+ * `width="calc(25% - 7.5px)"` grids that collapse asymmetrically. That shape is
+ * broken by construction — each child computes its own width, so the row is only
+ * even while every child agrees, and one long word or one `box-sizing` surprise
+ * makes the row ragged. Nothing about it can be fixed by tuning the number.
+ *
+ * Here the parent declares the tracks once and the children have no say. Equal
+ * columns are structural, not arithmetic, and no child can widen its own track.
+ *
+ * A gui View with `display="grid"` and the grid's own props, at `@hanzo/ui/grid`
+ * beside `@hanzo/ui/dots`. `columns` and `rows` are TRACK LISTS and `Cell`
+ * places and spans, all CSS-grid concepts rather than facts about the element,
+ * so the same call lays out wherever gui's grid props reach.
+ *
+ * IT FLOORS ITS OWN CHILDREN. A grid item's initial `min-width` is `auto`, which
+ * floors its box at the content's min-content width: one long unbroken string —
+ * a hash, a URL, a wide <pre> — pushes the item past its track and over its
+ * neighbour. Grid gives every element child `min-width: 0` itself — a gui child
+ * has it from its own base, any other takes it as a style — so a host needs no
+ * rule for it, and a child that states its own minimum keeps it.
+ *
+ * A LAYOUT BOX, NOT A TYPE SCOPE. A gui View carries the body font's family,
+ * weight, tracking and leading; a grid of bare tags must read in whatever face
+ * surrounds it, as the `div` this replaced did. So those four inherit, and it
+ * shrinks in a flex row the way a `div` does.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
 /** `'$3'` -> 12. A raw number passes through as px. */
 /**
  * A gap, as a CSS length.
@@ -34,6 +65,7 @@ const track = (v) => (typeof v === 'number' ? `${v}px` : v);
  * `minmax(auto, 1fr)`, and `auto` floors the track at the content's min-content
  * width — so one long unbroken string pushes its own column wider and every
  * sibling narrower. That IS the ragged row this component exists to prevent.
+ * A raw string is the caller's track list, as written.
  */
 const list = (t) => {
     if (typeof t === 'number')
@@ -68,19 +100,37 @@ const fitted = ({ min, max }, gap) => {
  */
 const tracks = (columns, gap = '0px') => fit(columns) ? fitted(columns, gap) : list(columns);
 exports.tracks = tracks;
-const Grid = ({ columns = { min: 240 }, rows, gap = '$3', style, ...props }) => {
+/** The four type properties a gui View sets and a layout box must not. */
+const TYPE = {
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    letterSpacing: 'inherit',
+    lineHeight: 'inherit',
+};
+/** A gui component: its box already floors at `min-width: 0` unless it says otherwise. */
+const gui = (type) => (typeof type === 'function' || typeof type === 'object') && type !== null && 'staticConfig' in type;
+/**
+ * One child with its min-width floor. A gui child has it already and a child
+ * that names its own minimum keeps it; a fragment is left alone, since it has
+ * no box to floor.
+ */
+const floor = (child) => {
+    if (!(0, react_1.isValidElement)(child) || child.type === react_1.Fragment || gui(child.type))
+        return child;
+    const el = child;
+    const style = el.props.style;
+    if (Array.isArray(style))
+        return (0, react_1.cloneElement)(el, { style: [{ minWidth: 0 }, ...style] });
+    if (style && typeof style === 'object' && 'minWidth' in style)
+        return el;
+    return (0, react_1.cloneElement)(el, { style: { minWidth: 0, ...style } });
+};
+const Grid = ({ columns = { min: 240 }, rows, gap = '$3', style, children, ...props }) => {
     const g = space(gap, 12);
-    const grid = {
-        display: 'grid',
-        gridTemplateColumns: (0, exports.tracks)(columns, g),
-        gap: g,
-    };
-    if (rows !== undefined)
-        grid.gridTemplateRows = list(rows);
-    return (0, jsx_runtime_1.jsx)("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
+    return ((0, jsx_runtime_1.jsx)(gui_1.View, { "data-slot": "grid", display: "grid", gridTemplateColumns: (0, exports.tracks)(columns, g), ...(rows !== undefined ? { gridTemplateRows: list(rows) } : null), gap: g, shrink: 1, minW: 'auto', minH: 'auto', style: { ...TYPE, ...style }, ...props, children: react_1.Children.map(children, floor) }));
 };
 exports.Grid = Grid;
 /** A cell only exists to span or to place; a plain child needs neither. */
 const place = (v) => v === undefined ? undefined : typeof v === 'number' ? `span ${v}` : v;
-const Cell = ({ col, row, style, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "grid-cell", style: { gridColumn: place(col), gridRow: place(row), ...style }, ...props }));
+const Cell = ({ col, row, style, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.View, { "data-slot": "grid-cell", ...(col !== undefined ? { gridColumn: place(col) } : null), ...(row !== undefined ? { gridRow: place(row) } : null), minW: 0, shrink: 1, style: { ...TYPE, ...style }, ...props }));
 exports.Cell = Cell;

package/dist/grid.d.ts

@@ -10,30 +10,26 @@
  * Here the parent declares the tracks once and the children have no say. Equal
  * columns are structural, not arithmetic, and no child can widen its own track.
  *
- * WEB ONLY, which is why it sits at `@hanzo/ui/grid` rather than on the barrel,
- * beside `@hanzo/ui/dots`. That is a statement about this file and nothing else:
- * it renders a `div` and sets `display: grid`, and neither of those exists on
- * React Native — Yoga has grid data structures but no grid algorithm, so
- * `display: 'grid'` is not in the platform's style types at all.
+ * A gui View with `display="grid"` and the grid's own props, at `@hanzo/ui/grid`
+ * beside `@hanzo/ui/dots`. `columns` and `rows` are TRACK LISTS and `Cell`
+ * places and spans, all CSS-grid concepts rather than facts about the element,
+ * so the same call lays out wherever gui's grid props reach.
  *
- * The quarantine is a pin, not a law, and the API is named so that lifting it
- * costs nothing: `columns` and `rows` are TRACK LISTS and `Cell` places and
- * spans, all of them CSS-grid concepts rather than facts about the div. When a
- * native grid engine lands, this file changes and call sites do not.
+ * IT FLOORS ITS OWN CHILDREN. A grid item's initial `min-width` is `auto`, which
+ * floors its box at the content's min-content width: one long unbroken string —
+ * a hash, a URL, a wide <pre> — pushes the item past its track and over its
+ * neighbour. Grid gives every element child `min-width: 0` itself — a gui child
+ * has it from its own base, any other takes it as a style — so a host needs no
+ * rule for it, and a child that states its own minimum keeps it.
  *
- * Why a plain div and not a gui YStack: gui's box model is Yoga, which is
- * flexbox here — a YStack would compile its own `display:flex` atomic class and
- * fight the grid. Inline styles, not a stylesheet class, so there is no rule to
- * fail to ship: this package's own checker exists because "class with no rule"
- * has shipped here three times.
- *
- * The min-width floor every grid child needs is declared ONCE, as
- * `[data-slot='grid'] > *` in `styles/motion.css`. It is not restated inline
- * here: a grid item's `grid-column` only applies to a direct child of the grid,
- * so a `Cell` is always in range of that selector, and a second copy inline
- * would be a second place for the same invariant to be edited.
+ * A LAYOUT BOX, NOT A TYPE SCOPE. A gui View carries the body font's family,
+ * weight, tracking and leading; a grid of bare tags must read in whatever face
+ * surrounds it, as the `div` this replaced did. So those four inherit, and it
+ * shrinks in a flex row the way a `div` does.
  */
-import type { ComponentProps, ReactNode } from 'react';
+import { View } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+type ViewProps = ComponentProps<typeof View>;
 /**
  * A track list, in the spellings a caller actually has. Every one of these is
  * `grid-template-columns` / `grid-template-rows`.
@@ -63,7 +59,7 @@ export interface Fit {
      */
     max?: number;
 }
-export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
+export interface GridProps extends Omit<ViewProps, 'children' | 'columns' | 'rows' | 'gap'> {
     /** The column tracks. A count, a list, a raw track list, or a `Fit`. */
     columns?: Tracks | Fit;
     /** The row tracks. Rows size to content unless you say otherwise. */
@@ -80,8 +76,8 @@ export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
  * tidied back into the ragged row.
  */
 export declare const tracks: (columns: Tracks | Fit, gap?: string) => string;
-declare const Grid: ({ columns, rows, gap, style, ...props }: GridProps) => import("react").JSX.Element;
-export interface CellProps extends ComponentProps<'div'> {
+declare const Grid: ({ columns, rows, gap, style, children, ...props }: GridProps) => import("react").JSX.Element;
+export interface CellProps extends Omit<ViewProps, 'col' | 'row'> {
     /**
      * Where this cell sits across the columns, as `grid-column`. A NUMBER spans
      * that many tracks (`span 2`); a string places it (`'1 / 3'`, `'2 / -1'`).

package/dist/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE;;;;;;;GAOG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,GAAG;IAClB,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AA8DD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,YAAa,MAAM,GAAG,GAAG,mBAAgB,MACP,CAAA;AAErD,QAAA,MAAM,IAAI,4CAAmE,SAAS,gCASrF,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAMD,QAAA,MAAM,IAAI,kCAAmC,SAAS,gCAMrD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAKL,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,KAAK,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5C;;;;;;;GAOG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,GAAG;IAClB,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;IACzF,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AA+DD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,YAAa,MAAM,GAAG,GAAG,mBAAgB,MACP,CAAA;AA4BrD,QAAA,MAAM,IAAI,sDAA6E,SAAS,gCAkB/F,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IAC/D;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAMD,QAAA,MAAM,IAAI,kCAAmC,SAAS,gCAUrD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}

package/dist/grid.js

@@ -1,5 +1,36 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Grid — a real CSS grid whose tracks come from the CONTAINER, not the children.
+ *
+ * This exists to kill a specific shipped defect: hand-rolled
+ * `width="calc(25% - 7.5px)"` grids that collapse asymmetrically. That shape is
+ * broken by construction — each child computes its own width, so the row is only
+ * even while every child agrees, and one long word or one `box-sizing` surprise
+ * makes the row ragged. Nothing about it can be fixed by tuning the number.
+ *
+ * Here the parent declares the tracks once and the children have no say. Equal
+ * columns are structural, not arithmetic, and no child can widen its own track.
+ *
+ * A gui View with `display="grid"` and the grid's own props, at `@hanzo/ui/grid`
+ * beside `@hanzo/ui/dots`. `columns` and `rows` are TRACK LISTS and `Cell`
+ * places and spans, all CSS-grid concepts rather than facts about the element,
+ * so the same call lays out wherever gui's grid props reach.
+ *
+ * IT FLOORS ITS OWN CHILDREN. A grid item's initial `min-width` is `auto`, which
+ * floors its box at the content's min-content width: one long unbroken string —
+ * a hash, a URL, a wide <pre> — pushes the item past its track and over its
+ * neighbour. Grid gives every element child `min-width: 0` itself — a gui child
+ * has it from its own base, any other takes it as a style — so a host needs no
+ * rule for it, and a child that states its own minimum keeps it.
+ *
+ * A LAYOUT BOX, NOT A TYPE SCOPE. A gui View carries the body font's family,
+ * weight, tracking and leading; a grid of bare tags must read in whatever face
+ * surrounds it, as the `div` this replaced did. So those four inherit, and it
+ * shrinks in a flex row the way a `div` does.
+ */
+import { View } from '@hanzo/gui';
+import { Children, cloneElement, Fragment, isValidElement, } from 'react';
 /** `'$3'` -> 12. A raw number passes through as px. */
 /**
  * A gap, as a CSS length.
@@ -31,6 +62,7 @@ const track = (v) => (typeof v === 'number' ? `${v}px` : v);
  * `minmax(auto, 1fr)`, and `auto` floors the track at the content's min-content
  * width — so one long unbroken string pushes its own column wider and every
  * sibling narrower. That IS the ragged row this component exists to prevent.
+ * A raw string is the caller's track list, as written.
  */
 const list = (t) => {
     if (typeof t === 'number')
@@ -64,19 +96,37 @@ const fitted = ({ min, max }, gap) => {
  * tidied back into the ragged row.
  */
 export const tracks = (columns, gap = '0px') => fit(columns) ? fitted(columns, gap) : list(columns);
-const Grid = ({ columns = { min: 240 }, rows, gap = '$3', style, ...props }) => {
+/** The four type properties a gui View sets and a layout box must not. */
+const TYPE = {
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    letterSpacing: 'inherit',
+    lineHeight: 'inherit',
+};
+/** A gui component: its box already floors at `min-width: 0` unless it says otherwise. */
+const gui = (type) => (typeof type === 'function' || typeof type === 'object') && type !== null && 'staticConfig' in type;
+/**
+ * One child with its min-width floor. A gui child has it already and a child
+ * that names its own minimum keeps it; a fragment is left alone, since it has
+ * no box to floor.
+ */
+const floor = (child) => {
+    if (!isValidElement(child) || child.type === Fragment || gui(child.type))
+        return child;
+    const el = child;
+    const style = el.props.style;
+    if (Array.isArray(style))
+        return cloneElement(el, { style: [{ minWidth: 0 }, ...style] });
+    if (style && typeof style === 'object' && 'minWidth' in style)
+        return el;
+    return cloneElement(el, { style: { minWidth: 0, ...style } });
+};
+const Grid = ({ columns = { min: 240 }, rows, gap = '$3', style, children, ...props }) => {
     const g = space(gap, 12);
-    const grid = {
-        display: 'grid',
-        gridTemplateColumns: tracks(columns, g),
-        gap: g,
-    };
-    if (rows !== undefined)
-        grid.gridTemplateRows = list(rows);
-    return _jsx("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
+    return (_jsx(View, { "data-slot": "grid", display: "grid", gridTemplateColumns: tracks(columns, g), ...(rows !== undefined ? { gridTemplateRows: list(rows) } : null), gap: g, shrink: 1, minW: 'auto', minH: 'auto', style: { ...TYPE, ...style }, ...props, children: Children.map(children, floor) }));
 };
 /** A cell only exists to span or to place; a plain child needs neither. */
 const place = (v) => v === undefined ? undefined : typeof v === 'number' ? `span ${v}` : v;
-const Cell = ({ col, row, style, ...props }) => (_jsx("div", { "data-slot": "grid-cell", style: { gridColumn: place(col), gridRow: place(row), ...style }, ...props }));
+const Cell = ({ col, row, style, ...props }) => (_jsx(View, { "data-slot": "grid-cell", ...(col !== undefined ? { gridColumn: place(col) } : null), ...(row !== undefined ? { gridRow: place(row) } : null), minW: 0, shrink: 1, style: { ...TYPE, ...style }, ...props }));
 export { Grid, Cell };
 //# sourceMappingURL=grid.js.map