@hanzo/ui 8.0.70 → 8.0.72

package/dist/glass.css

@@ -230,7 +230,18 @@
 
 :root {
   /* One sweep, closing on the stop it opened with — a conic gradient whose
-     first and last stop differ shows a hard seam. */
+     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);

package/dist/gui-config.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.monochrome = exports.config = void 0;
+exports.css = css;
 const v5_1 = require("@hanzogui/config/v5");
 const gui_1 = require("@hanzo/gui");
 // ─────────────────────────────────────────────────────────────────────────────
@@ -154,13 +155,33 @@ const STEP = {
     '19': 192,
     '20': 208,
 };
+/**
+ * Every step carries `--density`, the same way every type rung carries
+ * `--type-scale`.
+ *
+ * Spacing is the axis a density control actually moves — design's own
+ * `tokens/spacing.css` multiplies each `--space-*` by `var(--density, 1)`, but
+ * that reaches only CSS consumers. gui resolves `padding="$4"` in JS and writes
+ * it into an atomic class as `var(--c-space-4)`, so the ramp gui compiles is a
+ * SECOND ramp, and until it carried the knob a density preference moved the
+ * stylesheet and left every gui-rendered gap exactly where it was.
+ *
+ * The px literal stays the source of truth and stays visible in the number
+ * above; `calc()` multiplies it. At density 1 that is a byte-for-byte no-op —
+ * `calc(16px * 1)` computes to `16px` — so this changes nothing until somebody
+ * asks it to.
+ *
+ * Zero is left as the number `0`: `calc(0px * n)` is still zero, and a token
+ * whose whole meaning is "no space" does not need a knob to say so.
+ */
+const step = (px) => (px === 0 ? 0 : `calc(${px}px * var(--density, 1))`);
 const space = {};
 for (const [k, v] of Object.entries(STEP)) {
-    space[`$${k}`] = v;
-    space[`-${k}`] = -v;
+    space[`$${k}`] = step(v);
+    space[`-${k}`] = step(-v);
 }
-space.$true = STEP['4'];
-space['-true'] = -STEP['4'];
+space.$true = step(STEP['4']);
+space['-true'] = step(-STEP['4']);
 /**
  * THREE RUNGS OF THE NUMBERED RAMP UNDID A TOKEN DECISION, so they are re-based.
  *
@@ -208,6 +229,54 @@ space['-true'] = -STEP['4'];
 const EDGE = { dark: 'rgb(255 255 255 / .10)', light: 'rgb(0 0 0 / .10)' };
 const LABEL = { dark: '#fafafa', light: '#0a0a0a' };
 const RING = { dark: 'rgb(255 255 255 / .40)', light: 'rgb(0 0 0 / .5)' };
+/**
+ * The ground, the placeholder, and the one loud fill — the rest of what a brand
+ * owns, on the same terms as the three rungs above.
+ *
+ * `color`, `placeholderColor` and the accent pair are plain references, because
+ * design spells them `--foreground`, `--text-tertiary`, `--primary` and
+ * `--primary-foreground` while gui's keys are `color`, `placeholderColor`,
+ * `accentBackground` and `accentColor`. Those names never meet, so the reference
+ * is live and that is the end of it.
+ *
+ * `background` is the ONE name that cannot be referenced, and it is worth being
+ * exact about why. gui publishes each THEME key as a bare `--<key>` on
+ * `:root.t_dark` — specificity (0,2,0) against design's (0,1,0) `:root` — so
+ * gui's copy wins for the whole document, not merely for gui's own components.
+ * Point it back at the name it shadows and `--background: var(--background)` is
+ * a self-reference; CSS drops BOTH sides of a cycle and the property computes
+ * EMPTY. Not theory: an empty `--border` is what left `border-border` falling
+ * back to `currentColor`, a white hairline on every pricing card on hanzo.ai.
+ *
+ * Three things that look like fixes are not, each measured in a browser:
+ *   · a fallback — `var(--background, #0a0a0a)` computes empty too, because the
+ *     fallback is inside the dependency graph the cycle is found in;
+ *   · routing through design's `--surface-page`, which is itself declared as
+ *     `var(--background)` — a two-hop cycle, equally empty;
+ *   · deleting the key here, which stops `$background` resolving at all and so
+ *     emits no class rather than the wrong one.
+ *
+ * So the value stays design's published literal — `gui-config.test.ts` reads it
+ * out of design's own stylesheet, so it cannot drift — and the DECLARATION is
+ * dropped from the root theme blocks by `css()` below. The literal never reaches
+ * a browser; `var(--background)` resolves through design, live and rebrandable.
+ * Keeping a true literal rather than a reference is deliberate: if a consumer
+ * ever emits this sheet without `css()`, it renders design's colour frozen
+ * instead of rendering nothing, and a frozen ground is a far cheaper failure
+ * than an empty one.
+ *
+ * `accentBackground`/`accentColor` are gui's loud control pair, and design's
+ * `--primary`/`--primary-foreground` are the same idea under this system's own
+ * name. Binding them is what puts an ACCENT within reach: `@hanzo/appearance`
+ * writes `--primary` (and `--accent`) for a person, `themeToTokens()` writes the
+ * same names for an org, and both now land on the same components. Before this
+ * the accent knob reached nothing gui rendered — nothing in this package
+ * referenced `--primary` at all.
+ */
+const GROUND = { dark: '#0a0a0a', light: '#f7f7f7' };
+const MUTED = { dark: 'rgb(255 255 255 / .55)', light: 'rgb(10 10 10 / .55)' };
+const LOUD = { dark: '#fafafa', light: '#0a0a0a' };
+const LOUD_LABEL = { dark: '#0a0a0a', light: '#fafafa' };
 /**
  * The edge and the label are re-based on the two ROOT themes; the ring is
  * re-based on ALL of them, and the asymmetry is the point.
@@ -240,6 +309,11 @@ const themes = Object.fromEntries(Object.entries(v5_1.defaultConfig.themes).map(
                 color4: `var(--border, ${EDGE[s]})`,
                 borderColor: `var(--border, ${EDGE[s]})`,
                 color12: `var(--foreground, ${LABEL[s]})`,
+                background: GROUND[s],
+                color: `var(--foreground, ${LABEL[s]})`,
+                placeholderColor: `var(--text-tertiary, ${MUTED[s]})`,
+                accentBackground: `var(--primary, ${LOUD[s]})`,
+                accentColor: `var(--primary-foreground, ${LOUD_LABEL[s]})`,
             }
             : ringed,
     ];
@@ -280,6 +354,70 @@ const base = {
 };
 exports.config = (0, gui_1.createGui)({ ...base, themes });
 exports.default = exports.config;
+/**
+ * The three names design owns that gui also publishes as theme keys.
+ *
+ * `background` is the ground; `black` and `white` are constants, and they are
+ * not harmless — design publishes `--white: #fafafa` in dark because pure white
+ * halates on near-black, and gui's ramp overwrites it with `#ffffff`. That is
+ * design's own decision being undone by a name collision.
+ */
+const OWNED = ['background', 'black', 'white'];
+/** Exactly `:root`, `:root.t_dark` or `:root.t_light` — a ROOT theme. Anything
+ *  carrying a further `.t_*` is a NESTED theme, and a nested theme scoping its
+ *  own ground is what a nested theme IS. ~248 of them legitimately do. */
+const ROOT_THEME = /^:root(\.t_(dark|light))?$/;
+/**
+ * gui's stylesheet, with the declarations that shadow @hanzo/design removed.
+ *
+ * THIS is what a consumer emits — never `config.getCSS()` directly. gui builds
+ * its atomic CSS as components render, so every app runs a generator of its own;
+ * that is why this cannot be a step inside one package's build script and has to
+ * be the function apps call. It was one, in `scripts/gen-css.mjs`, and it
+ * therefore fixed @hanzo/ui's own sheet and nothing else — hanzo.ai generates
+ * its sheet with its own script and still ships gui's grey over design's black.
+ *
+ * gui shadows TWICE, by two different mechanisms, and fixing one leaves the page
+ * just as wrong:
+ *   · `:root.t_dark` / `:root.t_light` — (0,2,0), beats design on SPECIFICITY,
+ *     so re-importing design's colours last cannot win. That workaround only
+ *     appears to work where the theme class never reaches <html>, and reverts
+ *     the day someone wires themes properly — a fix that expires on being fixed.
+ *   · plain `:root { --background: … }` — (0,1,0), TIES design and wins on
+ *     SOURCE ORDER, because gui's block is appended after design's.
+ *
+ * Removing the declaration does not remove the token: `$background` still
+ * resolves to `var(--background)` and still emits its class, and that `var()`
+ * now reads design's value from the cascade. So the ground follows the brand,
+ * the theme and any runtime retune, which is the whole point.
+ */
+function css() {
+    const source = exports.config.getCSS();
+    let out = '';
+    let i = 0;
+    while (i < source.length) {
+        const open = source.indexOf('{', i);
+        if (open === -1) {
+            out += source.slice(i);
+            break;
+        }
+        const close = source.indexOf('}', open);
+        if (close === -1) {
+            out += source.slice(i);
+            break;
+        }
+        const selector = source.slice(i, open);
+        let body = source.slice(open + 1, close);
+        if (selector.split(',').some((s) => ROOT_THEME.test(s.trim()))) {
+            for (const name of OWNED) {
+                body = body.replace(new RegExp(`(^|;)\\s*--${name}\\s*:[^;}]*;?`, 'g'), '$1');
+            }
+        }
+        out += selector + '{' + body + '}';
+        i = close + 1;
+    }
+    return out;
+}
 /**
  * The eight chromatic families. Everything else a sub-theme name can carry —
  * `accent`, `black`, `white`, `gray`, `neutral`, `surface1`, `surface2` — is a

package/dist/gui-config.d.ts

@@ -15,7 +15,7 @@ export declare const config: import("@hanzogui/web").GuiInternalConfig<{
         readonly 12: 9999;
         readonly true: 8;
     };
-    space: Record<string, number>;
+    space: Record<string, string | number>;
     zIndex: {
         0: number;
         1: number;
@@ -766,6 +766,31 @@ export declare const config: import("@hanzogui/web").GuiInternalConfig<{
     styleCompat: "web";
 }, "default">;
 export default config;
+/**
+ * gui's stylesheet, with the declarations that shadow @hanzo/design removed.
+ *
+ * THIS is what a consumer emits — never `config.getCSS()` directly. gui builds
+ * its atomic CSS as components render, so every app runs a generator of its own;
+ * that is why this cannot be a step inside one package's build script and has to
+ * be the function apps call. It was one, in `scripts/gen-css.mjs`, and it
+ * therefore fixed @hanzo/ui's own sheet and nothing else — hanzo.ai generates
+ * its sheet with its own script and still ships gui's grey over design's black.
+ *
+ * gui shadows TWICE, by two different mechanisms, and fixing one leaves the page
+ * just as wrong:
+ *   · `:root.t_dark` / `:root.t_light` — (0,2,0), beats design on SPECIFICITY,
+ *     so re-importing design's colours last cannot win. That workaround only
+ *     appears to work where the theme class never reaches <html>, and reverts
+ *     the day someone wires themes properly — a fix that expires on being fixed.
+ *   · plain `:root { --background: … }` — (0,1,0), TIES design and wins on
+ *     SOURCE ORDER, because gui's block is appended after design's.
+ *
+ * Removing the declaration does not remove the token: `$background` still
+ * resolves to `var(--background)` and still emits its class, and that `var()`
+ * now reads design's value from the cascade. So the ground follows the brand,
+ * the theme and any runtime retune, which is the whole point.
+ */
+export declare function css(): string;
 /**
  * The same system with the chromatic sub-themes omitted — 150 themes instead of
  * 390, and 62% less theme table.
@@ -799,7 +824,7 @@ export declare const monochrome: import("@hanzogui/web").GuiInternalConfig<{
         readonly 12: 9999;
         readonly true: 8;
     };
-    space: Record<string, number>;
+    space: Record<string, string | number>;
     zIndex: {
         0: number;
         1: number;

package/dist/gui-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gui-config.d.ts","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"AAqSA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAAiC,CAAA;AAEpD,eAAe,MAAM,CAAA;AAerB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAKrB,CAAA;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,MAAM,CAAA"}
+{"version":3,"file":"gui-config.d.ts","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"AAgXA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAAiC,CAAA;AAEpD,eAAe,MAAM,CAAA;AAiBrB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,GAAG,IAAI,MAAM,CAoB5B;AAeD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAKrB,CAAA;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,MAAM,CAAA"}

package/dist/gui-config.js

@@ -151,13 +151,33 @@ const STEP = {
     '19': 192,
     '20': 208,
 };
+/**
+ * Every step carries `--density`, the same way every type rung carries
+ * `--type-scale`.
+ *
+ * Spacing is the axis a density control actually moves — design's own
+ * `tokens/spacing.css` multiplies each `--space-*` by `var(--density, 1)`, but
+ * that reaches only CSS consumers. gui resolves `padding="$4"` in JS and writes
+ * it into an atomic class as `var(--c-space-4)`, so the ramp gui compiles is a
+ * SECOND ramp, and until it carried the knob a density preference moved the
+ * stylesheet and left every gui-rendered gap exactly where it was.
+ *
+ * The px literal stays the source of truth and stays visible in the number
+ * above; `calc()` multiplies it. At density 1 that is a byte-for-byte no-op —
+ * `calc(16px * 1)` computes to `16px` — so this changes nothing until somebody
+ * asks it to.
+ *
+ * Zero is left as the number `0`: `calc(0px * n)` is still zero, and a token
+ * whose whole meaning is "no space" does not need a knob to say so.
+ */
+const step = (px) => (px === 0 ? 0 : `calc(${px}px * var(--density, 1))`);
 const space = {};
 for (const [k, v] of Object.entries(STEP)) {
-    space[`$${k}`] = v;
-    space[`-${k}`] = -v;
+    space[`$${k}`] = step(v);
+    space[`-${k}`] = step(-v);
 }
-space.$true = STEP['4'];
-space['-true'] = -STEP['4'];
+space.$true = step(STEP['4']);
+space['-true'] = step(-STEP['4']);
 /**
  * THREE RUNGS OF THE NUMBERED RAMP UNDID A TOKEN DECISION, so they are re-based.
  *
@@ -205,6 +225,54 @@ space['-true'] = -STEP['4'];
 const EDGE = { dark: 'rgb(255 255 255 / .10)', light: 'rgb(0 0 0 / .10)' };
 const LABEL = { dark: '#fafafa', light: '#0a0a0a' };
 const RING = { dark: 'rgb(255 255 255 / .40)', light: 'rgb(0 0 0 / .5)' };
+/**
+ * The ground, the placeholder, and the one loud fill — the rest of what a brand
+ * owns, on the same terms as the three rungs above.
+ *
+ * `color`, `placeholderColor` and the accent pair are plain references, because
+ * design spells them `--foreground`, `--text-tertiary`, `--primary` and
+ * `--primary-foreground` while gui's keys are `color`, `placeholderColor`,
+ * `accentBackground` and `accentColor`. Those names never meet, so the reference
+ * is live and that is the end of it.
+ *
+ * `background` is the ONE name that cannot be referenced, and it is worth being
+ * exact about why. gui publishes each THEME key as a bare `--<key>` on
+ * `:root.t_dark` — specificity (0,2,0) against design's (0,1,0) `:root` — so
+ * gui's copy wins for the whole document, not merely for gui's own components.
+ * Point it back at the name it shadows and `--background: var(--background)` is
+ * a self-reference; CSS drops BOTH sides of a cycle and the property computes
+ * EMPTY. Not theory: an empty `--border` is what left `border-border` falling
+ * back to `currentColor`, a white hairline on every pricing card on hanzo.ai.
+ *
+ * Three things that look like fixes are not, each measured in a browser:
+ *   · a fallback — `var(--background, #0a0a0a)` computes empty too, because the
+ *     fallback is inside the dependency graph the cycle is found in;
+ *   · routing through design's `--surface-page`, which is itself declared as
+ *     `var(--background)` — a two-hop cycle, equally empty;
+ *   · deleting the key here, which stops `$background` resolving at all and so
+ *     emits no class rather than the wrong one.
+ *
+ * So the value stays design's published literal — `gui-config.test.ts` reads it
+ * out of design's own stylesheet, so it cannot drift — and the DECLARATION is
+ * dropped from the root theme blocks by `css()` below. The literal never reaches
+ * a browser; `var(--background)` resolves through design, live and rebrandable.
+ * Keeping a true literal rather than a reference is deliberate: if a consumer
+ * ever emits this sheet without `css()`, it renders design's colour frozen
+ * instead of rendering nothing, and a frozen ground is a far cheaper failure
+ * than an empty one.
+ *
+ * `accentBackground`/`accentColor` are gui's loud control pair, and design's
+ * `--primary`/`--primary-foreground` are the same idea under this system's own
+ * name. Binding them is what puts an ACCENT within reach: `@hanzo/appearance`
+ * writes `--primary` (and `--accent`) for a person, `themeToTokens()` writes the
+ * same names for an org, and both now land on the same components. Before this
+ * the accent knob reached nothing gui rendered — nothing in this package
+ * referenced `--primary` at all.
+ */
+const GROUND = { dark: '#0a0a0a', light: '#f7f7f7' };
+const MUTED = { dark: 'rgb(255 255 255 / .55)', light: 'rgb(10 10 10 / .55)' };
+const LOUD = { dark: '#fafafa', light: '#0a0a0a' };
+const LOUD_LABEL = { dark: '#0a0a0a', light: '#fafafa' };
 /**
  * The edge and the label are re-based on the two ROOT themes; the ring is
  * re-based on ALL of them, and the asymmetry is the point.
@@ -237,6 +305,11 @@ const themes = Object.fromEntries(Object.entries(defaultConfig.themes).map(([nam
                 color4: `var(--border, ${EDGE[s]})`,
                 borderColor: `var(--border, ${EDGE[s]})`,
                 color12: `var(--foreground, ${LABEL[s]})`,
+                background: GROUND[s],
+                color: `var(--foreground, ${LABEL[s]})`,
+                placeholderColor: `var(--text-tertiary, ${MUTED[s]})`,
+                accentBackground: `var(--primary, ${LOUD[s]})`,
+                accentColor: `var(--primary-foreground, ${LOUD_LABEL[s]})`,
             }
             : ringed,
     ];
@@ -277,6 +350,70 @@ const base = {
 };
 export const config = createGui({ ...base, themes });
 export default config;
+/**
+ * The three names design owns that gui also publishes as theme keys.
+ *
+ * `background` is the ground; `black` and `white` are constants, and they are
+ * not harmless — design publishes `--white: #fafafa` in dark because pure white
+ * halates on near-black, and gui's ramp overwrites it with `#ffffff`. That is
+ * design's own decision being undone by a name collision.
+ */
+const OWNED = ['background', 'black', 'white'];
+/** Exactly `:root`, `:root.t_dark` or `:root.t_light` — a ROOT theme. Anything
+ *  carrying a further `.t_*` is a NESTED theme, and a nested theme scoping its
+ *  own ground is what a nested theme IS. ~248 of them legitimately do. */
+const ROOT_THEME = /^:root(\.t_(dark|light))?$/;
+/**
+ * gui's stylesheet, with the declarations that shadow @hanzo/design removed.
+ *
+ * THIS is what a consumer emits — never `config.getCSS()` directly. gui builds
+ * its atomic CSS as components render, so every app runs a generator of its own;
+ * that is why this cannot be a step inside one package's build script and has to
+ * be the function apps call. It was one, in `scripts/gen-css.mjs`, and it
+ * therefore fixed @hanzo/ui's own sheet and nothing else — hanzo.ai generates
+ * its sheet with its own script and still ships gui's grey over design's black.
+ *
+ * gui shadows TWICE, by two different mechanisms, and fixing one leaves the page
+ * just as wrong:
+ *   · `:root.t_dark` / `:root.t_light` — (0,2,0), beats design on SPECIFICITY,
+ *     so re-importing design's colours last cannot win. That workaround only
+ *     appears to work where the theme class never reaches <html>, and reverts
+ *     the day someone wires themes properly — a fix that expires on being fixed.
+ *   · plain `:root { --background: … }` — (0,1,0), TIES design and wins on
+ *     SOURCE ORDER, because gui's block is appended after design's.
+ *
+ * Removing the declaration does not remove the token: `$background` still
+ * resolves to `var(--background)` and still emits its class, and that `var()`
+ * now reads design's value from the cascade. So the ground follows the brand,
+ * the theme and any runtime retune, which is the whole point.
+ */
+export function css() {
+    const source = config.getCSS();
+    let out = '';
+    let i = 0;
+    while (i < source.length) {
+        const open = source.indexOf('{', i);
+        if (open === -1) {
+            out += source.slice(i);
+            break;
+        }
+        const close = source.indexOf('}', open);
+        if (close === -1) {
+            out += source.slice(i);
+            break;
+        }
+        const selector = source.slice(i, open);
+        let body = source.slice(open + 1, close);
+        if (selector.split(',').some((s) => ROOT_THEME.test(s.trim()))) {
+            for (const name of OWNED) {
+                body = body.replace(new RegExp(`(^|;)\\s*--${name}\\s*:[^;}]*;?`, 'g'), '$1');
+            }
+        }
+        out += selector + '{' + body + '}';
+        i = close + 1;
+    }
+    return out;
+}
 /**
  * The eight chromatic families. Everything else a sub-theme name can carry —
  * `accent`, `black`, `white`, `gray`, `neutral`, `surface1`, `surface2` — is a

package/dist/gui-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"gui-config.js","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"gui-config.js","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"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"}

package/dist/product/accent.cjs

@@ -25,6 +25,7 @@ exports.useAccent = useAccent;
  * from a stable default snapshot so the server render and first client paint agree.
  */
 const react_1 = require("react");
+const design_1 = require("@hanzo/design");
 /** True for a 3- or 6-digit CSS hex color (`#RGB` / `#RRGGBB`). */
 function isHexColor(v) {
     return typeof v === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v.trim());
@@ -82,9 +83,43 @@ function setOrgAccent(theme) {
     if (next.accent === current.accent)
         return;
     current = next.accent ? next : DEFAULT;
+    publish(current.accent);
     for (const l of listeners)
         l();
 }
+/**
+ * The org's accent as CSS custom properties, so it reaches the whole product
+ * rather than the components that happen to call `useAccent()`.
+ *
+ * An org accent and a person's accent are the SAME adjustment at two scopes, so
+ * they are the same two properties — `--primary` and `--accent`, produced by
+ * @hanzo/design's own `vars()`. `@hanzo/appearance` writes them for a person and
+ * this writes them for an org; nothing here restates what an accent means.
+ *
+ * PRECEDENCE FALLS OUT OF CSS AND IS NOT COORDINATED IN CODE. This writes a
+ * `:root` STYLESHEET; a person's preference is written INLINE on <html>, which
+ * outranks any stylesheet. So a person who chose an accent keeps it, an org that
+ * sets one gets it for everybody who did not, and neither module has to know the
+ * other exists. Writing both inline would have made it a race decided by load
+ * order — the org fetch resolving after mount would silently overwrite the
+ * person's choice on every reload.
+ */
+function publish(accent) {
+    if (typeof document === 'undefined')
+        return;
+    const ID = 'hanzo-org-accent';
+    let el = document.getElementById(ID);
+    if (!accent) {
+        el?.remove();
+        return;
+    }
+    if (!el) {
+        el = document.createElement('style');
+        el.id = ID;
+        document.head.appendChild(el);
+    }
+    el.textContent = (0, design_1.css)({ accent }, ':root');
+}
 function subscribe(cb) {
     listeners.add(cb);
     return () => {

package/dist/product/accent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accent.d.ts","sourceRoot":"","sources":["../../src/product/accent.ts"],"names":[],"mappings":"AAqBA,0FAA0F;AAC1F,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,2FAA2F;AAC3F,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhE,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,OAAO,CAEhE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAInF;AASD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAS/D;AAED,mGAAmG;AACnG,wBAAgB,SAAS,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAGxE;AAUD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAKzE;AASD,oGAAoG;AACpG,wBAAgB,SAAS,IAAI,MAAM,CAMlC"}
+{"version":3,"file":"accent.d.ts","sourceRoot":"","sources":["../../src/product/accent.ts"],"names":[],"mappings":"AAuBA,0FAA0F;AAC1F,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,2FAA2F;AAC3F,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhE,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,OAAO,CAEhE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAInF;AASD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAS/D;AAED,mGAAmG;AACnG,wBAAgB,SAAS,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAGxE;AAUD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAMzE;AAuCD,oGAAoG;AACpG,wBAAgB,SAAS,IAAI,MAAM,CAMlC"}

package/dist/product/accent.js

@@ -17,6 +17,7 @@
  * from a stable default snapshot so the server render and first client paint agree.
  */
 import { useSyncExternalStore } from 'react';
+import { css } from '@hanzo/design';
 /** True for a 3- or 6-digit CSS hex color (`#RGB` / `#RRGGBB`). */
 export function isHexColor(v) {
     return typeof v === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v.trim());
@@ -74,9 +75,43 @@ export function setOrgAccent(theme) {
     if (next.accent === current.accent)
         return;
     current = next.accent ? next : DEFAULT;
+    publish(current.accent);
     for (const l of listeners)
         l();
 }
+/**
+ * The org's accent as CSS custom properties, so it reaches the whole product
+ * rather than the components that happen to call `useAccent()`.
+ *
+ * An org accent and a person's accent are the SAME adjustment at two scopes, so
+ * they are the same two properties — `--primary` and `--accent`, produced by
+ * @hanzo/design's own `vars()`. `@hanzo/appearance` writes them for a person and
+ * this writes them for an org; nothing here restates what an accent means.
+ *
+ * PRECEDENCE FALLS OUT OF CSS AND IS NOT COORDINATED IN CODE. This writes a
+ * `:root` STYLESHEET; a person's preference is written INLINE on <html>, which
+ * outranks any stylesheet. So a person who chose an accent keeps it, an org that
+ * sets one gets it for everybody who did not, and neither module has to know the
+ * other exists. Writing both inline would have made it a race decided by load
+ * order — the org fetch resolving after mount would silently overwrite the
+ * person's choice on every reload.
+ */
+function publish(accent) {
+    if (typeof document === 'undefined')
+        return;
+    const ID = 'hanzo-org-accent';
+    let el = document.getElementById(ID);
+    if (!accent) {
+        el?.remove();
+        return;
+    }
+    if (!el) {
+        el = document.createElement('style');
+        el.id = ID;
+        document.head.appendChild(el);
+    }
+    el.textContent = css({ accent }, ':root');
+}
 function subscribe(cb) {
     listeners.add(cb);
     return () => {

package/dist/product/accent.js.map

@@ -1 +1 @@
-{"version":3,"file":"accent.js","sourceRoot":"","sources":["../../src/product/accent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"accent.js","sourceRoot":"","sources":["../../src/product/accent.ts"],"names":[],"mappings":"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"}

package/dist/root.cjs

@@ -39,6 +39,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 const gui_1 = require("@hanzo/gui");
 const telemetry_1 = require("@hanzogui/telemetry");
+const react_1 = require("react");
+const state_1 = require("@hanzo/appearance/state");
 const gui_config_1 = require("./gui-config.cjs");
 require("./styles.css");
 /** A stylesheet that did not reach the document is invisible until someone opens
@@ -62,6 +64,24 @@ const assertStylesheet = () => {
 const Hanzo = ({ children, theme = 'dark', analytics }) => {
     if (process.env.NODE_ENV !== 'production')
         assertStylesheet();
+    // A person's stored type size, density and accent, put on the document.
+    //
+    // Unconditional, unlike `analytics`, and the difference is the whole reason
+    // that one is a prop. Analytics starts a conversation with a server the app
+    // did not ask for; this reads a preference the PERSON already set on this
+    // device and honours it. An app that has to opt in is an app that forgets to,
+    // and then the setting silently does nothing on that surface — which is worse
+    // than not offering it.
+    //
+    // Costs nothing when unused: an axis nobody set is absent rather than
+    // neutral, so `apply()` removes the property instead of stamping a `1` that
+    // would outrank a brand's own scale.
+    //
+    // This is the MOUNT half only. First paint still wants `bootScript()` in
+    // <head>, because no component can run before the document exists.
+    (0, react_1.useEffect)(() => {
+        (0, state_1.apply)((0, state_1.read)());
+    }, []);
     const tree = ((0, jsx_runtime_1.jsx)(gui_1.GuiProvider, { config: gui_config_1.config, defaultTheme: theme, disableInjectCSS: true, children: children }));
     // OUTSIDE the gui provider: capture is delegated at the document, so it does
     // not need to be inside the styled tree, and an app that renders its own

package/dist/root.d.ts

@@ -1,5 +1,5 @@
 import { type TelemetryConfig } from '@hanzogui/telemetry';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import './styles.css';
 export type HanzoProps = {
     children?: ReactNode;

package/dist/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../src/root.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAA;CACtC,CAAA;AAqBD,eAAO,MAAM,KAAK,GAAI,gCAAyC,UAAU,4CAaxE,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../src/root.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC7E,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAA;CACtC,CAAA;AAqBD,eAAO,MAAM,KAAK,GAAI,gCAAyC,UAAU,4CA+BxE,CAAA;AAED,eAAe,KAAK,CAAA"}