@hanzo/ui 8.1.20 → 8.2.0

package/dist/styles/motion.css

@@ -269,24 +269,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    Scrollbars, on the surfaces this package scrolls.
 
-   A scroll region is a component decision, so its scrollbar is one too. Left to
-   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
-   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
-   scroll region — visible in chat's thread, its source strip and the composer at
-   the same time. Windows draws a wide light track. macOS overlays a thin one and
-   hides it, which is the behaviour the other two should have had.
-
-   So the package states it, and states it ONCE, for the five slots that actually
-   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
-   composer-field). Scoping to our own slots is the point — a component library
-   restyling the HOST's page scrollbars is taking a decision that is not its own.
-
-   `::-webkit-scrollbar-button { display: none }` is the line that removes the
-   steppers; without it the arrows survive every other rule here. The thumb sits
-   on the same alpha ladder as every other edge, so it lifts with its surface
-   instead of being a fixed grey that only suits one theme.
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -295,12 +305,44 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 ) {
-  /* Firefox — no pseudo-elements, two properties, same intent. */
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
-}
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -308,13 +350,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -322,13 +362,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -336,11 +372,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -349,16 +383,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(255 255 255 / 0.18);
-  border-radius: 999px;
-  /* A transparent border with background-clip keeps the thumb off the very edge
-     without a track colour doing it, which is what makes it read as an overlay
-     rather than a channel. */
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-:where(
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -367,12 +400,10 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb:hover {
-  background: rgb(255 255 255 / 0.30);
-  background-clip: content-box;
-}
-
-/* The light theme reads the same ladder from the other side. */
-.t_light :where(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -380,11 +411,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -393,14 +422,12 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
 }
 
 /* The textarea's resize grip is the other platform artefact in the same family:
-   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
-   and matching nothing. A composer that grows with its content does not need a
-   drag handle, and one that does not grow should not offer a broken one. */
-:where([data-slot='textarea'], [data-slot='composer-field']) {
-  resize: none;
-}
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }

package/dist/styles.css

@@ -1957,24 +1957,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    Scrollbars, on the surfaces this package scrolls.
 
-   A scroll region is a component decision, so its scrollbar is one too. Left to
-   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
-   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
-   scroll region — visible in chat's thread, its source strip and the composer at
-   the same time. Windows draws a wide light track. macOS overlays a thin one and
-   hides it, which is the behaviour the other two should have had.
-
-   So the package states it, and states it ONCE, for the five slots that actually
-   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
-   composer-field). Scoping to our own slots is the point — a component library
-   restyling the HOST's page scrollbars is taking a decision that is not its own.
-
-   `::-webkit-scrollbar-button { display: none }` is the line that removes the
-   steppers; without it the arrows survive every other rule here. The thumb sits
-   on the same alpha ladder as every other edge, so it lifts with its surface
-   instead of being a fixed grey that only suits one theme.
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1983,12 +1993,44 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 ) {
-  /* Firefox — no pseudo-elements, two properties, same intent. */
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
-}
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1996,13 +2038,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2010,13 +2050,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2024,11 +2060,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2037,16 +2071,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(255 255 255 / 0.18);
-  border-radius: 999px;
-  /* A transparent border with background-clip keeps the thumb off the very edge
-     without a track colour doing it, which is what makes it read as an overlay
-     rather than a channel. */
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-:where(
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2055,12 +2088,10 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb:hover {
-  background: rgb(255 255 255 / 0.30);
-  background-clip: content-box;
-}
-
-/* The light theme reads the same ladder from the other side. */
-.t_light :where(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2068,11 +2099,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2081,17 +2110,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
 }
 
 /* The textarea's resize grip is the other platform artefact in the same family:
-   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
-   and matching nothing. A composer that grows with its content does not need a
-   drag handle, and one that does not grow should not offer a broken one. */
-:where([data-slot='textarea'], [data-slot='composer-field']) {
-  resize: none;
-}
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }
 
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.1.20",
+  "version": "8.2.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": {
@@ -188,6 +188,11 @@
       "types": "./dist/dots.d.ts",
       "import": "./dist/dots.js",
       "require": "./dist/dots.cjs"
+    },
+    "./grid": {
+      "types": "./dist/grid.d.ts",
+      "import": "./dist/grid.js",
+      "require": "./dist/grid.cjs"
     }
   },
   "main": "./dist/index.cjs",

package/dist/backends/gui/grid.cjs

@@ -1,73 +0,0 @@
-'use client';"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Grid = 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.
- *
- * Why a plain div and not a gui YStack: gui's box model is Yoga, which is
- * flexbox and has no grid — 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 two track formulas, both deliberate:
- *
- *   auto  repeat(auto-fill, minmax(min(Npx, 100%), 1fr))
- *         The `min(Npx, 100%)` is what makes it safe below N: a bare
- *         `minmax(240px, 1fr)` forces a 240px track inside a 200px phone and
- *         overflows the viewport horizontally. Responsive with ZERO breakpoint
- *         props — the wrap count follows the container, so the same tree is
- *         right at 390 and at 1280.
- *
- *   cols  repeat(n, minmax(0, 1fr))
- *         `1fr` alone means `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. `minmax(0, 1fr)` is the fix.
- *
- * `[data-slot='grid'] > *` also gets `min-width: 0` in the stylesheet, for the
- * same reason: a grid item's default `min-width: auto` lets its content set the
- * floor and blow the track out.
- */
-const gui_1 = require("@hanzo/gui");
-/** `'$3'` -> 12. A raw number passes through as px. */
-const space = (v, fallback) => {
-    if (v == null)
-        return fallback;
-    if (typeof v === 'number')
-        return v;
-    const t = (0, gui_1.getTokenValue)(v, 'space');
-    return typeof t === 'number' ? t : fallback;
-};
-const Grid = ({ min = 240, cols, max, gap = '$3', style, ...props }) => {
-    const g = space(gap, 12);
-    // The track floor, capped. Without `max` it is `min(Npx, 100%)` — N wide, but
-    // never wider than the container, which is what keeps a 900px min from
-    // overflowing a 390px phone.
-    //
-    // With `max` the floor also has to be at least "one Mth of the row", so
-    // auto-fill can never fit an (M+1)th track: subtract the M-1 gaps first, then
-    // divide. Below that width the max() picks Npx again and the grid wraps
-    // normally — so the cap costs nothing on small screens, which is the whole
-    // point of expressing it as a floor rather than a breakpoint.
-    const floor = max
-        ? `max(min(${min}px, 100%), calc((100% - ${(max - 1) * g}px) / ${max}))`
-        : `min(${min}px, 100%)`;
-    const columns = cols
-        ? `repeat(${cols}, minmax(0, 1fr))`
-        : `repeat(auto-fill, minmax(${floor}, 1fr))`;
-    const grid = { display: 'grid', gridTemplateColumns: columns, gap: g };
-    return (0, jsx_runtime_1.jsx)("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
-};
-exports.Grid = Grid;

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

@@ -1,25 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
-    /**
-     * Narrowest a column may get before the grid drops one. The whole responsive
-     * story: no breakpoints, no props per screen size.
-     */
-    min?: number;
-    /** Fixed column count. Overrides `min` — use it when the count is the design. */
-    cols?: number;
-    /**
-     * Never exceed this many columns, while still wrapping down on narrow
-     * screens. `<Grid min={160} max={4}>` is 2-up on a phone and 4-up on a
-     * desktop, with nothing in between to configure.
-     *
-     * A single `min` cannot express that: 2-up at 390px needs min ~170, and that
-     * same 170 gives SIX columns at 1280. Capping is the missing half.
-     */
-    max?: number;
-    /** A `$n` space token or a raw px number. */
-    gap?: number | string;
-    children?: ReactNode;
-}
-declare const Grid: ({ min, cols, max, gap, style, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
-export { Grid };
-//# sourceMappingURL=grid.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAUD,QAAA,MAAM,IAAI,GAAI,0CAAuD,SAAS,4CAmB7E,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/backends/gui/grid.js

@@ -1,71 +0,0 @@
-'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.
- *
- * Why a plain div and not a gui YStack: gui's box model is Yoga, which is
- * flexbox and has no grid — 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 two track formulas, both deliberate:
- *
- *   auto  repeat(auto-fill, minmax(min(Npx, 100%), 1fr))
- *         The `min(Npx, 100%)` is what makes it safe below N: a bare
- *         `minmax(240px, 1fr)` forces a 240px track inside a 200px phone and
- *         overflows the viewport horizontally. Responsive with ZERO breakpoint
- *         props — the wrap count follows the container, so the same tree is
- *         right at 390 and at 1280.
- *
- *   cols  repeat(n, minmax(0, 1fr))
- *         `1fr` alone means `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. `minmax(0, 1fr)` is the fix.
- *
- * `[data-slot='grid'] > *` also gets `min-width: 0` in the stylesheet, for the
- * same reason: a grid item's default `min-width: auto` lets its content set the
- * floor and blow the track out.
- */
-import { getTokenValue } from '@hanzo/gui';
-/** `'$3'` -> 12. A raw number passes through as px. */
-const space = (v, fallback) => {
-    if (v == null)
-        return fallback;
-    if (typeof v === 'number')
-        return v;
-    const t = getTokenValue(v, 'space');
-    return typeof t === 'number' ? t : fallback;
-};
-const Grid = ({ min = 240, cols, max, gap = '$3', style, ...props }) => {
-    const g = space(gap, 12);
-    // The track floor, capped. Without `max` it is `min(Npx, 100%)` — N wide, but
-    // never wider than the container, which is what keeps a 900px min from
-    // overflowing a 390px phone.
-    //
-    // With `max` the floor also has to be at least "one Mth of the row", so
-    // auto-fill can never fit an (M+1)th track: subtract the M-1 gaps first, then
-    // divide. Below that width the max() picks Npx again and the grid wraps
-    // normally — so the cap costs nothing on small screens, which is the whole
-    // point of expressing it as a floor rather than a breakpoint.
-    const floor = max
-        ? `max(min(${min}px, 100%), calc((100% - ${(max - 1) * g}px) / ${max}))`
-        : `min(${min}px, 100%)`;
-    const columns = cols
-        ? `repeat(${cols}, minmax(0, 1fr))`
-        : `repeat(auto-fill, minmax(${floor}, 1fr))`;
-    const grid = { display: 'grid', gridTemplateColumns: columns, gap: g };
-    return _jsx("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
-};
-export { Grid };
-//# sourceMappingURL=grid.js.map