@hanzo/ui 8.0.43 → 8.0.45

package/dist/root.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `Hanzo` — the root. The only thing an app has to mount.
+ *
+ *   import { Hanzo, Button } from '@hanzo/ui'
+ *   <Hanzo><Button>Ship</Button></Hanzo>
+ *
+ * No config file, no CSS import, no generator script, no bundler aliases. Three
+ * things used to be the app's job and are now the package's:
+ *
+ *   the config — @hanzo/gui resolves `$3` / `$background` / `$borderColor`
+ *     against ONE process-global config, and @hanzo/ui owns it (gui-config.ts).
+ *     It is passed here as a value, not imported for its side effect: Vite 8
+ *     ignores package.json `sideEffects` ARRAYS outright, so a bare
+ *     `import './gui-config.js'` is dropped and the first render dies on "Missing
+ *     hanzogui config". A value a rendered component needs cannot be shaken out.
+ *
+ *   the stylesheet — `styles.css` is generated at OUR publish time by rendering
+ *     every component and harvesting the atomic CSS that render produces
+ *     (scripts/gen-css.mjs). It used to be each app's job to run a generator and
+ *     import its output; hanzo.app never did, and shipped 103 `_bg-` classes
+ *     against zero `_bg-` rules with a green build the whole time.
+ *
+ *   the theme — gui throws "Missing theme." for any component without a root
+ *     theme context, so there is no version of this that works with no root at
+ *     all. Dark-first, matching the Hanzo identity.
+ *
+ * `disableInjectCSS` because the sheet is a real file. Left on, the provider
+ * inlines `config.getCSS()` into the document on every streaming flush — that is
+ * how hanzo.ai once shipped thirteen byte-identical copies, 591,305 of its
+ * 638,443 bytes. A file is cached once and costs nothing after the first page.
+ * Styles gui generates at runtime for props we could not know at publish time
+ * still reach the document: that path is `insertStyleRules`, and it is not what
+ * this flag controls.
+ */
+import { GuiProvider } from '@hanzo/gui';
+import { config } from './gui-config.js';
+import './styles.css';
+/** A stylesheet that did not reach the document is invisible until someone opens
+ *  production. `styles.css` declares `--hanzo-ui-styles`, so the check is one
+ *  lookup, it runs once, and it names the fix. Development only.
+ *
+ *  A document with NO stylesheets at all is jsdom, where nothing loads CSS and
+ *  there is nothing to be wrong about — throwing there would break every
+ *  consumer's unit tests to report a condition that cannot exist. */
+let checked = false;
+const assertStylesheet = () => {
+    if (checked || typeof document === 'undefined' || document.styleSheets.length === 0)
+        return;
+    checked = true;
+    if (getComputedStyle(document.documentElement).getPropertyValue('--hanzo-ui-styles').trim())
+        return;
+    throw new Error('@hanzo/ui: styles.css did not reach the document. <Hanzo> imports it, so a bundler ' +
+        'that does not process CSS imported from node_modules has dropped it. Import it ' +
+        "directly instead: import '@hanzo/ui/styles.css'.");
+};
+export const Hanzo = ({ children, theme = 'dark' }) => {
+    if (process.env.NODE_ENV !== 'production')
+        assertStylesheet();
+    return (_jsx(GuiProvider, { config: config, defaultTheme: theme, disableInjectCSS: true, children: children }));
+};
+export default Hanzo;
+//# sourceMappingURL=root.js.map

package/dist/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","sourceRoot":"","sources":["../src/root.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,cAAc,CAAA;AAQrB;;;;;;qEAMqE;AACrE,IAAI,OAAO,GAAG,KAAK,CAAA;AACnB,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,IAAI,OAAO,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAM;IAC3F,OAAO,GAAG,IAAI,CAAA;IACd,IAAI,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,IAAI,EAAE;QAAE,OAAM;IACnG,MAAM,IAAI,KAAK,CACb,qFAAqF;QACnF,iFAAiF;QACjF,kDAAkD,CACrD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,MAAM,EAAc,EAAE,EAAE;IAChE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QAAE,gBAAgB,EAAE,CAAA;IAC7D,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,kBAC/D,QAAQ,GACG,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/styles/{hanzo-motion.css → motion.css}

@@ -8,7 +8,7 @@
 
 /* Fade-up entrance — <FadeIn> applies the class + a per-item stagger delay.
    ~0.4s ease-out, small upward travel (matches the hanzo.ai marketing feel). */
-@keyframes hz-fade-up {
+@keyframes fade-up {
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -19,41 +19,41 @@
   }
 }
 
-.hz-fade-up {
-  animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+.fade-up {
+  animation: 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 {
     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 {
   transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: width;
 }
 
-.hz-slide {
+.slide {
   transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }
 
-.hz-fade {
+.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-item {
+   lifted row gets a subtle lift; siblings ease into place via `.slide`. */
+.drag {
   touch-action: none;
   transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.hz-drag-item[data-dragging='true'] {
+.drag[data-dragging='true'] {
   transition: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
   opacity: 0.96;
@@ -61,10 +61,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-collapse,
-  .hz-slide,
-  .hz-fade,
-  .hz-drag-item {
+  .collapse,
+  .slide,
+  .fade,
+  .drag {
     transition: none;
   }
 }
@@ -75,7 +75,7 @@
    a brief highlight when a freshly-arrived row lands. */
 
 /* Skeleton shimmer — an honest "loading", never fabricated content. */
-@keyframes hz-shimmer {
+@keyframes shimmer {
   0% {
     background-position: -160px 0;
   }
@@ -84,7 +84,7 @@
   }
 }
 
-.hz-skeleton {
+.skeleton {
   background-color: var(--color3, rgba(148, 163, 184, 0.14));
   background-image: linear-gradient(
     90deg,
@@ -94,11 +94,11 @@
   );
   background-size: 160px 100%;
   background-repeat: no-repeat;
-  animation: hz-shimmer 1.2s ease-in-out infinite;
+  animation: shimmer 1.2s ease-in-out infinite;
 }
 
 /* Live-feed pulse — the "Live" dot on a streaming panel. */
-@keyframes hz-pulse {
+@keyframes pulse {
   0%,
   100% {
     opacity: 1;
@@ -111,7 +111,7 @@
 }
 
 /* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
-@keyframes hz-row-in {
+@keyframes row-in {
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -122,48 +122,48 @@
   }
 }
 
-.hz-row-in {
-  animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+.row-in {
+  animation: row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-skeleton {
+  .skeleton {
     animation: none;
   }
-  .hz-row-in {
+  .row-in {
     animation: none;
   }
 }
 
 /* ── Typography + surface classes the product layer's components reference ──────
-   DataTable/Metric typeset numeric cells with `hz-mono`/`hz-tnum`; ComboBox and
-   SelectMenu paint their popovers with `hz-paper hz-menu-in`; DataTable rows use
-   `hz-row`. They travel WITH the components (this is the package's one stylesheet)
+   DataTable/Metric typeset numeric cells with `mono`/`tnum`; ComboBox and
+   SelectMenu paint their popovers with `paper menu-in`; DataTable rows use
+   `row`. They travel WITH the components (this is the package's one stylesheet)
    so any host that imports `@hanzo/ui/styles/motion.css` renders them 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 {
   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 {
   font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
   letter-spacing: -0.01em;
 }
 
-.hz-paper {
+.paper {
   box-shadow: var(--hz-ring, inset 0 0 0 1px rgba(255, 255, 255, 0.08)),
     var(--hz-paper-highlight, inset 0 1px 0 0 rgba(255, 255, 255, 0.05)),
     var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36));
 }
 
-@keyframes hz-menu-in {
+@keyframes menu-in {
   from {
     opacity: 0;
   }
@@ -172,17 +172,44 @@
   }
 }
 
-.hz-menu-in {
-  animation: hz-menu-in 140ms ease-out both;
+.menu-in {
+  animation: menu-in 140ms ease-out both;
   will-change: opacity;
 }
 
-.hz-row {
+.row {
   transition: background-color 140ms ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .hz-menu-in {
+  .menu-in {
     animation: none;
   }
 }
+
+/* ── Layout guarantees ─────────────────────────────────────────────────────────
+   Two rules, both structural. They are attached to `data-slot` rather than to a
+   class because they are not styling a caller can opt out of — they are the
+   thing the primitive PROMISES, and a class can be overwritten by forgetting to
+   pass it on. */
+
+/* A grid item's initial `min-width` is `auto`, which floors the track at the
+   item's min-content width. One long unbroken string — a hash, a URL, a wide
+   <pre> — then pushes its own column wider and squeezes every sibling, which is
+   the ragged row Grid exists to prevent. The track sizing in grid.tsx is only
+   honoured once this floor is gone. */
+[data-slot='grid'] > * {
+  min-width: 0;
+}
+
+/* Media fills the ratio box instead of setting its own size. Without this an
+   <img> renders at its intrinsic pixel size and either overflows the frame or
+   sits letterboxed inside it, and the ratio the caller asked for is decoration.
+   `display:block` kills the inline-baseline gap under the image. */
+[data-ratio] > img,
+[data-ratio] > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}