@hanzo/design 0.5.15 → 0.5.17

package/dist/brand.cjs

@@ -0,0 +1,62 @@
+"use strict";
+// A brand's declared theme, projected onto the semantic tokens.
+//
+// A brand package (@luxfi/brand, @zooai/brand) carries its own light and dark
+// theme in brand.json. This is the ONE place that says which semantic token each
+// of those answers for — the design system owns the token contract, a brand owns
+// the values, and neither holds a copy of the other.
+//
+// It exists because that mapping was about to be written twice: once in each
+// brand package to generate a stylesheet, and once in every app that resolves its
+// brand at runtime and cannot import a build-time stylesheet. Two copies of a
+// mapping is how a brand comes to look like itself in one surface and not
+// another.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeToTokens = themeToTokens;
+exports.applyBrandTheme = applyBrandTheme;
+/** theme key → the semantic tokens it answers for. */
+const OWNS = {
+    surface1: ['--background'],
+    surface2: ['--card', '--popover', '--muted'],
+    surface3: ['--accent'],
+    neutral1: ['--foreground', '--card-foreground', '--popover-foreground', '--accent-foreground'],
+    neutral2: ['--muted-foreground'],
+    neutral3: [],
+    accent1: ['--primary'],
+    accent2: [],
+    accent3: [],
+    border: ['--border'],
+    success: ['--state-success'],
+    warning: ['--state-warning'],
+    error: ['--state-error'],
+};
+/**
+ * The tokens a brand's theme sets, as `{ '--background': '#000', … }`.
+ *
+ * Only ground, ink, accent and the edges drawn on them. The radius scale, the
+ * type ramp, spacing, motion and z are NOT here and must not be: they are the
+ * system's grammar rather than a brand's voice, and a brand that redefines them
+ * is a fork wearing a stylesheet.
+ */
+function themeToTokens(theme) {
+    const out = {};
+    for (const [key, tokens] of Object.entries(OWNS)) {
+        const value = theme[key];
+        if (!value)
+            continue;
+        for (const token of tokens)
+            out[token] = value;
+    }
+    // --primary carries ink on top of it, so the accent names its own contrast
+    // partner rather than leaving whatever the previous theme set.
+    if (theme.accent1 && theme.surface1)
+        out['--primary-foreground'] = theme.surface1;
+    return out;
+}
+/** Apply a brand's theme to a live document — for an app that resolves its brand
+ *  at runtime and so cannot import a build-time stylesheet. */
+function applyBrandTheme(theme, el) {
+    for (const [name, value] of Object.entries(themeToTokens(theme))) {
+        el.style.setProperty(name, value);
+    }
+}

package/dist/index.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RATIO_MAX = exports.RATIO_MIN = exports.TYPE_MAX = exports.TYPE_MIN = exports.isColor = exports.css = exports.vars = void 0;
+exports.cssVar = cssVar;
+exports.tokenValue = tokenValue;
+exports.injectDesignCss = injectDesignCss;
+// @hanzo/design — the ONE programmatic control plane for Hanzo's look & feel.
+//
+// The look/feel is authored ONCE as CSS custom properties in tokens/*.css
+// (monochrome, dark-default — "one hue through an opacity ladder"). This module
+// exposes those exact tokens to code, generated from the CSS so the two can
+// never drift. Change a token in the CSS → the stylesheet AND every code
+// consumer (the @hanzogui/shell theme, Tamagui, any TS surface) update together.
+//
+//   import '@hanzo/design/styles.css'                 // the CSS layer (unchanged)
+//   import { colors, spacing, radius, cssVar } from '@hanzo/design'  // the code layer
+//
+__exportStar(require("./tokens.gen.cjs"), exports);
+__exportStar(require("./brand.cjs"), exports);
+const tokens_gen_js_1 = require("./tokens.gen.cjs");
+/**
+ * A `var(--name, <authored literal>)` reference to a token — the ONE way code
+ * should reach a token, so it resolves through the live CSS cascade (honoring
+ * the viewer's light/dark theme and any brand fork) rather than baking a value.
+ *
+ *   background: cssVar('--background')      // → "var(--background, #000000)"
+ *   color:      cssVar('foreground', '#fff')// → "var(--foreground, #fff)"
+ *
+ * The name is checked AGAINST THE STYLESHEET at compile time. That check used to
+ * be opted out of with `| (string & {})`, which is how `cssVar('surface-1')`
+ * shipped: the token did not exist, `var(--surface-1)` resolved to nothing, and
+ * a menu painted transparent with no error anywhere. An undefined custom
+ * property fails SILENTLY, so the type is the only place it can be caught.
+ *
+ * When no explicit fallback is given the token's own authored literal is used,
+ * so the reference still paints on a host that has not loaded the CSS layer.
+ */
+function cssVar(name, fallback) {
+    const n = (name.startsWith('--') ? name : `--${name}`);
+    const lit = fallback ?? tokens_gen_js_1.cssVars[n];
+    return lit ? `var(${n}, ${lit})` : `var(${n})`;
+}
+/** The raw authored value of a token (the literal from the CSS), or `undefined`. */
+function tokenValue(name) {
+    return tokens_gen_js_1.cssVars[name];
+}
+/**
+ * Inject the design-system stylesheet from code (idempotent) for surfaces that
+ * cannot use a bundler CSS import (e.g. a runtime-mounted island). Prefer the
+ * static `import '@hanzo/design/styles.css'` where a bundler is available.
+ * No-op outside the browser.
+ *
+ * `href` is REQUIRED: this used to default to esm.sh, which silently made a
+ * third-party CDN the origin of the entire token layer for anyone who called it
+ * bare. Pass a URL you serve.
+ */
+function injectDesignCss(href) {
+    if (typeof document === 'undefined')
+        return;
+    if (document.querySelector('link[data-hanzo-design]'))
+        return;
+    const l = document.createElement('link');
+    l.rel = 'stylesheet';
+    l.href = href;
+    l.setAttribute('data-hanzo-design', '');
+    document.head.appendChild(l);
+}
+// A person's own reading of the system — type size, density, accent — as CSS
+// custom properties. Pure: it maps a preference to variables and returns them,
+// so an app, an embedded preview and a server render all apply it the same way.
+var preference_js_1 = require("./preference.cjs");
+Object.defineProperty(exports, "vars", { enumerable: true, get: function () { return preference_js_1.vars; } });
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return preference_js_1.css; } });
+Object.defineProperty(exports, "isColor", { enumerable: true, get: function () { return preference_js_1.isColor; } });
+Object.defineProperty(exports, "TYPE_MIN", { enumerable: true, get: function () { return preference_js_1.TYPE_MIN; } });
+Object.defineProperty(exports, "TYPE_MAX", { enumerable: true, get: function () { return preference_js_1.TYPE_MAX; } });
+Object.defineProperty(exports, "RATIO_MIN", { enumerable: true, get: function () { return preference_js_1.RATIO_MIN; } });
+Object.defineProperty(exports, "RATIO_MAX", { enumerable: true, get: function () { return preference_js_1.RATIO_MAX; } });

package/dist/preference.cjs

@@ -0,0 +1,225 @@
+"use strict";
+/**
+ * A person's own reading of the system: type size, density, accent.
+ *
+ * Three knobs, and each is ONE multiplier on a whole axis — never a restated
+ * ramp. The ramps live in `tokens/*.css`, authored once, and each rung carries
+ * its own `calc(<base> * var(--type-scale, 1))`. So a preference sets three
+ * numbers and every rung follows, including rungs added later and rungs this
+ * file has never heard of.
+ *
+ * That is not a style choice; it is the fix for a real bug. The first version of
+ * this module kept its own copy of the type ramp so it could recompute each
+ * rung, and the copy was WRONG — it had `lg: 1rem` and `xl: 1.125rem` (16px and
+ * 18px) while `tokens/typography.css` says `0.9375rem` and `1.0625rem` (15px and
+ * 17px). Setting a preference of 1 — "leave it alone" — would have silently
+ * resized two rungs of the published design. A second copy of a value is a
+ * second source of truth, and it drifted before anyone used it.
+ *
+ * Because the knobs are plain multipliers, any OTHER ramp can opt in the same
+ * way. @hanzo/gui compiles its own `--f-size-*` scale for the 1600-odd
+ * `fontSize="$n"` call sites in the apps; an app that redeclares those as
+ * `calc(<its px> * var(--type-scale, 1))` gets the same control with no change
+ * at scale 1.
+ *
+ * It is a pure function on purpose: it maps a preference to custom properties
+ * and returns them, touching no document. That is what lets an app, an embedded
+ * preview and a server render apply it identically.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MODULAR_MAX = exports.MODULAR_MIN = exports.RATIO_MAX = exports.RATIO_MIN = exports.TYPE_MAX = exports.TYPE_MIN = void 0;
+exports.isColor = isColor;
+exports.vars = vars;
+exports.css = css;
+/**
+ * The type multiplier is CLAMPED, and the bounds are not arbitrary.
+ *
+ * Below 0.85 the smallest rung (--text-xs, 11px) drops under 9.4px, which stops
+ * being small and starts being unreadable — and a preference that lets someone
+ * render their own tools illegible is a trap, not a choice. Above 1.4 the
+ * chrome stops fitting its own containers: this app's builder header already
+ * overlaps its actions below 1440px at scale 1.
+ */
+exports.TYPE_MIN = 0.85;
+exports.TYPE_MAX = 1.4;
+/**
+ * The ratio's bounds are looser than type's, because the ramp defends its own
+ * floor.
+ *
+ * `tokens/typography.css` floors --text-xs/sm with `max()`, so the failure mode
+ * that forces type's tight clamp — a knob quietly rendering 9px labels — cannot
+ * happen on this axis however it combines with type. What is left to bound is
+ * only whether the ramp still READS as a ramp: at 0.75 the app register is
+ * within a hair of uniform, and past 1.5 a page's h2 has left its own body text
+ * behind entirely.
+ */
+exports.RATIO_MIN = 0.75;
+exports.RATIO_MAX = 1.5;
+/**
+ * A MODULAR scale — the classical one, where each display rung is the one below
+ * it times a fixed ratio. Golden is 1.618; the musical intervals designers name
+ * are 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth) and 1.5
+ * (perfect fifth).
+ *
+ * This is a different RULE from `ratio`, not another dial on it. `ratio` tunes
+ * the contrast of the ramp `tokens/typography.css` authored; this REPLACES that
+ * ramp's display half with a geometric one. Naming a golden-ratio preset as a
+ * contrast value would have been the dishonest version of this feature.
+ *
+ * Bounded below 1.05 because a ratio at 1 is not a scale — every display rung
+ * collapses onto the one before it — and above 2 because doubling every step
+ * puts the fourth rung past a phone's whole width.
+ *
+ * Golden is exactly 1.618 here and is NOT clamped down to something tamer,
+ * because a scale that quietly gives you not-golden when you asked for golden is
+ * worse than one that refuses. What makes that safe is the ceiling below: this
+ * ramp has EIGHT display rungs and a classical modular scale is used with about
+ * four, so at 1.618 the eighth would be 799px. Measured, --text-8xl and
+ * --text-9xl are referenced in 15 files across the fleet, so that is a broken
+ * page and not a hypothetical.
+ */
+exports.MODULAR_MIN = 1.05;
+exports.MODULAR_MAX = 2;
+/**
+ * The rungs a modular scale REGENERATES, in order, and the one it starts from.
+ *
+ * It deliberately stops at the display register. A geometric scale through the
+ * interface rungs is unusable at any real ratio: at 1.25 from a 14px base the
+ * next rungs are 17.5 and 21.9, so the 13px nav label and the 15px lead — the
+ * near-linear steps a dense interface is built on — do not exist. `xl` is the
+ * anchor because it is the last interface rung, so the display half continues
+ * from where the interface ends rather than restarting under it.
+ */
+const DISPLAY_RUNGS = ["2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"];
+const MODULAR_ANCHOR_REM = 1.0625; // --text-xl, 17px
+/**
+ * Density moves SPACING only, and its range is much tighter than type's.
+ *
+ * Spacing compounds: a page nests padding inside gap inside margin, so a 0.75
+ * multiplier is already three-quarters of every one of those in sequence. Below
+ * that, touch targets fall under the 44px floor `base.css` sets for coarse
+ * pointers, and the control that promised comfort takes it away.
+ */
+const DENSITY = {
+    compact: 0.85,
+    default: 1,
+    comfortable: 1.15,
+};
+/**
+ * A face is chosen from the ones `tokens/fonts.css` already declares, and it is
+ * set by REFERENCE — `var(--font-serif)`, never a family list restated here.
+ *
+ * That is what keeps a preference from pinning a face: when the token file
+ * changes what "mono" means, or a brand overrides it, a person who chose mono
+ * follows. Writing `Georgia, serif` here would freeze this file's idea of serif
+ * into every document that ever stored the preference.
+ *
+ * `default` is deliberately absent from the map rather than mapped to
+ * `var(--font-sans)`: the axis writes `--font-sans`, so resolving it to itself
+ * is a cycle, and "no opinion" is already how every other axis says default.
+ */
+const FACE = {
+    system: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+    serif: "var(--font-serif)",
+    mono: "var(--font-mono)",
+};
+/**
+ * The measure moves the CONTAINERS, not the columns.
+ *
+ * `--grid-columns` is 12 because layouts are authored against 12; changing it
+ * re-flows every span a page declares and is a different page, not a wider one.
+ * What a reader actually means by "wider" is how far the text runs before it
+ * wraps, which is `--container-*` — so that is the knob, and the grid inside it
+ * is untouched.
+ */
+const MEASURE = {
+    narrow: { max: "64rem", prose: "40rem", wide: "58rem" },
+    wide: { max: "96rem", prose: "56rem", wide: "86rem" },
+};
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+/** Trim to 4dp so a multiplier cannot emit a 17-digit float into a stylesheet. */
+const round = (n) => String(Math.round(n * 10000) / 10000);
+/**
+ * Is this a colour, or is it something being smuggled into a style attribute?
+ *
+ * A preference is user input and its destination is CSS. `#fff`, `rgb(...)`,
+ * `oklch(...)` and the bare keywords are colours; anything carrying a `;`, a
+ * `}`, or a `url(` is trying to be a second declaration, and the answer is to
+ * drop the axis rather than to sanitise a string into something plausible.
+ */
+function isColor(v) {
+    const s = v.trim();
+    if (!s || s.length > 64)
+        return false;
+    if (/[;{}()]/.test(s) && !/^(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color)\([^;{}]*\)$/i.test(s))
+        return false;
+    return (/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(s) ||
+        /^(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color)\([^;{}]*\)$/i.test(s) ||
+        /^[a-z]{3,20}$/i.test(s));
+}
+/**
+ * The custom properties a preference produces.
+ *
+ * Only the axes actually set appear, so an app can spread the result over
+ * whatever it already has without a default silently overriding a brand.
+ */
+function vars(p) {
+    const out = {};
+    if (typeof p.type === "number" && Number.isFinite(p.type)) {
+        out["--type-scale"] = round(clamp(p.type, exports.TYPE_MIN, exports.TYPE_MAX));
+    }
+    if (typeof p.ratio === "number" && Number.isFinite(p.ratio)) {
+        out["--type-ratio"] = round(clamp(p.ratio, exports.RATIO_MIN, exports.RATIO_MAX));
+    }
+    if (typeof p.modular === "number" && Number.isFinite(p.modular)) {
+        // Each display rung is the anchor times the ratio to its step, emitted as an
+        // explicit property. An INLINE custom property on :root outranks the
+        // stylesheet, so these simply replace the authored rungs — nothing has to be
+        // unset first, and the interface rungs the sheet declares are untouched
+        // because none is named here. It multiplies out with `--type-scale` for free,
+        // since every rung is still read through that ramp's own calc.
+        const r = clamp(p.modular, exports.MODULAR_MIN, exports.MODULAR_MAX);
+        DISPLAY_RUNGS.forEach((rung, i) => {
+            const rem = MODULAR_ANCHOR_REM * Math.pow(r, i + 1);
+            // THE SAME clamp the authored ramp carries, read from the same two names.
+            // A regenerated rung and an authored one must be bounded identically or
+            // the bound is a property of which code path produced the value, which is
+            // exactly the kind of "it depends" a design system exists to delete. The
+            // bounds are declared once, in tokens/typography.css, and referenced here
+            // — never restated, so moving one moves both.
+            out[`--text-${rung}`] =
+                `clamp(var(--text-floor), calc(${round(rem)}rem * var(--type-scale, 1)), var(--text-ceiling))`;
+        });
+    }
+    if (p.density && p.density in DENSITY) {
+        out["--density"] = round(DENSITY[p.density]);
+    }
+    // Indexed, not `in`-checked: the maps omit `default`, so a lookup answers
+    // undefined for it and for anything stored that is not a face at all. One
+    // read, no cast, and an unknown value is refused by the same line that
+    // resolves a known one.
+    const face = p.font ? FACE[p.font] : undefined;
+    if (face)
+        out["--font-sans"] = face;
+    const measure = p.width ? MEASURE[p.width] : undefined;
+    if (measure) {
+        out["--container-max"] = measure.max;
+        out["--container-prose"] = measure.prose;
+        out["--container-wide"] = measure.wide;
+    }
+    if (p.accent && isColor(p.accent)) {
+        // Both names, because the ramp uses --primary for action surfaces and
+        // --accent for selection. One hue, stated once, landing on both.
+        out["--primary"] = p.accent.trim();
+        out["--accent"] = p.accent.trim();
+    }
+    return out;
+}
+/** `vars()` as a declaration block, for a <style> tag or an SSR inline. */
+function css(p, selector = "html:root") {
+    const v = vars(p);
+    const keys = Object.keys(v);
+    if (!keys.length)
+        return "";
+    return `${selector}{${keys.map((k) => `${k}:${v[k]}`).join(";")}}`;
+}

package/dist/tokens.gen.cjs

@@ -0,0 +1,597 @@
+"use strict";
+// AUTO-GENERATED by scripts/gen-tokens.mjs from tokens/*.css — DO NOT EDIT.
+// Edit the token in tokens/<group>.css and re-run `npm run gen`.
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssVars = exports.base = exports.fonts = exports.zIndex = exports.motion = exports.elevation = exports.radius = exports.grid = exports.spacing = exports.typography = exports.colors = void 0;
+/** colors tokens (from tokens/colors.css). Values are raw CSS. */
+exports.colors = {
+    'neutral-50': '#FAFAFA',
+    'neutral-100': '#F5F5F5',
+    'neutral-200': '#E5E5E5',
+    'neutral-300': '#D4D4D4',
+    'neutral-400': '#A3A3A3',
+    'neutral-500': '#737373',
+    'neutral-600': '#525252',
+    'neutral-700': '#404040',
+    'neutral-800': '#262626',
+    'neutral-900': '#171717',
+    'neutral-950': '#0A0A0A',
+    'pure-black': '#000000',
+    'pure-white': '#FFFFFF',
+    'hanzo-black': '#0A0A0B',
+    'hanzo-white': '#FFFFFF',
+    'white-03': 'rgb(255 255 255 / .03)',
+    'white-05': 'rgb(255 255 255 / .05)',
+    'white-06': 'rgb(255 255 255 / .06)',
+    'white-08': 'rgb(255 255 255 / .08)',
+    'white-10': 'rgb(255 255 255 / .10)',
+    'white-14': 'rgb(255 255 255 / .14)',
+    'white-15': 'rgb(255 255 255 / .15)',
+    'white-16': 'rgb(255 255 255 / .16)',
+    'white-18': 'rgb(255 255 255 / .18)',
+    'white-20': 'rgb(255 255 255 / .20)',
+    'white-22': 'rgb(255 255 255 / .22)',
+    'white-30': 'rgb(255 255 255 / .30)',
+    'white-40': 'rgb(255 255 255 / .40)',
+    'white-45': 'rgb(255 255 255 / .45)',
+    'white-55': 'rgb(255 255 255 / .55)',
+    'white-60': 'rgb(255 255 255 / .60)',
+    'white-78': 'rgb(255 255 255 / .78)',
+    'white-80': 'rgb(255 255 255 / .80)',
+    'white-92': 'rgb(255 255 255 / .92)',
+    'background': '#0a0a0a',
+    'foreground': '#e5e5e5',
+    'card': '#0f0f0f',
+    'card-foreground': '#e5e5e5',
+    'popover': '#0f0f0f',
+    'popover-foreground': '#e5e5e5',
+    'primary': '#fafafa',
+    'primary-hover': '#e5e5e5',
+    'primary-foreground': '#0a0a0a',
+    'secondary': '#262626',
+    'secondary-hover': '#333333',
+    'secondary-foreground': '#fafafa',
+    'muted': '#171717',
+    'muted-foreground': '#a3a3a3',
+    'accent': '#262626',
+    'accent-foreground': '#fafafa',
+    'destructive': 'var(--state-error)',
+    'destructive-hover': '#dc2626',
+    'destructive-foreground': '#fafafa',
+    'border': 'var(--white-10)',
+    'border-strong': 'var(--white-16)',
+    'border-control': 'var(--white-15)',
+    'border-focus': 'var(--white-22)',
+    'border-selected': 'var(--white-30)',
+    'input': 'var(--border-control)',
+    'ring': 'var(--white-40)',
+    'ring-halo': 'var(--white-10)',
+    'brand': '#e4e4e7',
+    'brand-foreground': '#09090b',
+    'brand-muted': '#a3a3a3',
+    'black': '#000000',
+    'white': '#fafafa',
+    'selection': 'var(--white-20)',
+    'glass': 'var(--white-05)',
+    'glass-strong': 'var(--white-08)',
+    'surface-page': 'var(--background)',
+    'surface-card': 'rgb(38 38 38 / .5)',
+    'surface-card-emphasis': 'rgb(38 38 38 / .75)',
+    'surface-card-quiet': 'rgb(38 38 38 / .35)',
+    'surface-overlay': 'rgb(23 23 23 / .92)',
+    'surface-header': 'rgb(0 0 0 / .7)',
+    'surface-scrim': 'rgb(0 0 0 / .8)',
+    'surface-0': 'var(--background)',
+    'surface-1': 'var(--card)',
+    'surface-2': 'var(--muted)',
+    'surface-3': 'var(--secondary)',
+    'text-primary': '#fafafa',
+    'text-secondary': 'var(--white-78)',
+    'text-tertiary': 'var(--white-55)',
+    'text-helper': 'var(--muted-foreground)',
+    'text-disabled': 'var(--white-30)',
+    'state-error': '#ef4444',
+    'state-error-text': '#fca5a5',
+    'state-error-bg': 'rgb(239 68 68 / .1)',
+    'state-online': '#4ade80',
+    'state-success': '#22c55e',
+    'chrome-dot-red': 'rgb(239 68 68 / .6)',
+    'chrome-dot-yellow': 'rgb(234 179 8 / .6)',
+    'chrome-dot-green': 'rgb(34 197 94 / .6)',
+};
+/** typography tokens (from tokens/typography.css). Values are raw CSS. */
+exports.typography = {
+    'type-scale': '1',
+    'type-ratio': '1',
+    'text-floor': '0.625rem',
+    'text-ceiling': '30vw',
+    'text-xs': '0.6875rem',
+    'leading-xs': '1rem',
+    'text-sm': '0.8125rem',
+    'leading-sm': '1.15rem',
+    'text-base': '0.875rem',
+    'leading-base': '1.35rem',
+    'text-lg': '0.9375rem',
+    'leading-lg': '1.4rem',
+    'text-xl': '1.0625rem',
+    'leading-xl': '1.55rem',
+    'text-2xl': '1.3125rem',
+    'leading-2xl': '1.7rem',
+    'text-3xl': '1.625rem',
+    'leading-3xl': '1.95rem',
+    'text-4xl': '2rem',
+    'leading-4xl': '2.25rem',
+    'text-5xl': '2.5rem',
+    'leading-5xl': '1.05',
+    'text-6xl': '3.25rem',
+    'leading-6xl': '1',
+    'text-7xl': '4rem',
+    'leading-7xl': '1',
+    'text-8xl': '5.25rem',
+    'leading-8xl': '1',
+    'text-9xl': '7rem',
+    'leading-9xl': '1',
+    'font-size-xs': 'var(--text-xs)',
+    'font-size-sm': 'var(--text-sm)',
+    'font-size-base': 'var(--text-base)',
+    'font-size-lg': 'var(--text-lg)',
+    'font-size-xl': 'var(--text-xl)',
+    'font-size-2xl': 'var(--text-2xl)',
+    'font-size-3xl': 'var(--text-3xl)',
+    'font-size-4xl': 'var(--text-4xl)',
+    'font-size-5xl': 'var(--text-5xl)',
+    'font-size-6xl': 'var(--text-6xl)',
+    'font-size-7xl': 'var(--text-7xl)',
+    'font-size-8xl': 'var(--text-8xl)',
+    'font-size-9xl': 'var(--text-9xl)',
+    'text-control': 'var(--text-sm)',
+    'weight-normal': '400',
+    'weight-medium': '500',
+    'weight-semibold': '600',
+    'weight-bold': '700',
+    'tracking-tight': '-0.025em',
+    'tracking-normal': '0em',
+    'tracking-wide': '0.025em',
+    'tracking-widest': '0.1em',
+    'leading-none': '1',
+    'leading-tight': '1.25',
+    'leading-snug': '1.375',
+    'leading-normal': '1.5',
+    'leading-relaxed': '1.625',
+    'leading-golden': '1.618',
+    'type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
+    'type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
+    'type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
+    'type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
+    'type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
+    'type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
+    'type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
+    'type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+};
+/** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
+exports.spacing = {
+    'density': '1',
+    'space-0': '0',
+    'space-1': '0.25rem',
+    'space-2': '0.5rem',
+    'space-3': '0.75rem',
+    'space-4': '1rem',
+    'space-5': '1.25rem',
+    'space-6': '1.5rem',
+    'space-8': '2rem',
+    'space-10': '2.5rem',
+    'space-12': '3rem',
+    'space-14': '3.5rem',
+    'space-16': '4rem',
+    'space-20': '5rem',
+    'space-24': '6rem',
+    'space-32': '8rem',
+    'golden-1': '0.25rem',
+    'golden-2': '0.405rem',
+    'golden-3': '0.654rem',
+    'golden-4': '1.059rem',
+    'golden-5': '1.713rem',
+    'golden-6': '2.772rem',
+    'golden-7': '4.487rem',
+    'golden-8': '7.26rem',
+    'golden-9': '11.749rem',
+    'golden-split': '38.2% 61.8%',
+    'container-max': '80rem',
+    'container-prose': '48rem',
+    'container-wide': '72rem',
+    'gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
+    'gutter-sm': '1.5rem',
+    'gutter-lg': '2rem',
+    'section-y': '2.5rem',
+    'section-y-lg': '3.5rem',
+    'hero-y': '3rem',
+    'hero-y-lg': '4.5rem',
+    'header-height': '3.5rem',
+    'tap-target': '44px',
+    'control-height-sm': '32px',
+    'control-height': '36px',
+    'control-height-lg': '40px',
+    'control-height-xl': '52px',
+    'safe-top': 'env(safe-area-inset-top,0px)',
+    'safe-right': 'env(safe-area-inset-right,0px)',
+    'safe-bottom': 'env(safe-area-inset-bottom,0px)',
+    'safe-left': 'env(safe-area-inset-left,0px)',
+};
+/** grid tokens (from tokens/grid.css). Values are raw CSS. */
+exports.grid = {
+    'grid-columns': '12',
+    'grid-gap': 'var(--space-6)',
+    'grid-gap-tight': 'var(--space-4)',
+    'grid-gap-loose': 'var(--space-8)',
+    'breakpoint-sm': '40rem',
+    'breakpoint-md': '48rem',
+    'breakpoint-lg': '64rem',
+    'breakpoint-xl': '80rem',
+    'breakpoint-2xl': '96rem',
+    'grid-card-min': '18rem',
+    'grid-card-min-wide': '24rem',
+};
+/** radius tokens (from tokens/radius.css). Values are raw CSS. */
+exports.radius = {
+    'radius': '0.5rem',
+    'radius-sm': '0.375rem',
+    'radius-md': '0.5rem',
+    'radius-lg': '0.75rem',
+    'radius-xl': '1rem',
+    'radius-2xl': '1.5rem',
+    'radius-composer': '28px',
+    'radius-full': '9999px',
+};
+/** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
+exports.elevation = {
+    'shadow-none': 'none',
+    'shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
+    'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
+    'edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
+    'bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
+    'ring-focus': '0 0 0 3px var(--ring-halo)',
+    'shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
+    'shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
+    'shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
+    'shadow-lg': '0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)',
+    'shadow-xl': '0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60)',
+    'shadow-2xl': 'var(--shadow-floating)',
+    'sheet-0': 'var(--surface-page)',
+    'sheet-1': 'var(--surface-card)',
+    'sheet-2': 'var(--surface-card-emphasis)',
+    'shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
+    'shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
+    'fold': '12px',
+    'fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
+    'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
+    'glow-hero-blur': '120px',
+    'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    'sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
+    'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
+    'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
+    'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
+};
+/** motion tokens (from tokens/motion.css). Values are raw CSS. */
+exports.motion = {
+    'duration-fast': '150ms',
+    'duration-base': '300ms',
+    'duration-slow': '400ms',
+    'duration-slower': '500ms',
+    'duration-glow': '9s',
+    'duration-press': '90ms',
+    'ease-out': 'cubic-bezier(0,0,0.2,1)',
+    'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    'ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
+    'stagger': '60ms',
+    'entry-rise': '16px',
+    'entry-rise-lg': '24px',
+};
+/** zIndex tokens (from tokens/z.css). Values are raw CSS. */
+exports.zIndex = {
+    'z-base': '0',
+    'z-raised': '10',
+    'z-sticky': '200',
+    'z-header': '300',
+    'z-dropdown': '400',
+    'z-overlay': '500',
+    'z-modal': '600',
+    'z-popover': '700',
+    'z-toast': '800',
+    'z-tooltip': 'var(--z-popover)',
+    'z-notification': 'var(--z-toast)',
+};
+/** fonts tokens (from tokens/fonts.css). Values are raw CSS. */
+exports.fonts = {
+    'font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
+    'font-display': 'var(--font-sans)',
+    'font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
+    'font-serif': 'Georgia,serif',
+    'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+};
+/** base tokens (from tokens/base.css). Values are raw CSS. */
+exports.base = {
+    'ring-offset': '-2px',
+};
+/** Every token, keyed by its literal CSS custom-property name ('--background', …). */
+exports.cssVars = {
+    '--neutral-50': '#FAFAFA',
+    '--neutral-100': '#F5F5F5',
+    '--neutral-200': '#E5E5E5',
+    '--neutral-300': '#D4D4D4',
+    '--neutral-400': '#A3A3A3',
+    '--neutral-500': '#737373',
+    '--neutral-600': '#525252',
+    '--neutral-700': '#404040',
+    '--neutral-800': '#262626',
+    '--neutral-900': '#171717',
+    '--neutral-950': '#0A0A0A',
+    '--pure-black': '#000000',
+    '--pure-white': '#FFFFFF',
+    '--hanzo-black': '#0A0A0B',
+    '--hanzo-white': '#FFFFFF',
+    '--white-03': 'rgb(255 255 255 / .03)',
+    '--white-05': 'rgb(255 255 255 / .05)',
+    '--white-06': 'rgb(255 255 255 / .06)',
+    '--white-08': 'rgb(255 255 255 / .08)',
+    '--white-10': 'rgb(255 255 255 / .10)',
+    '--white-14': 'rgb(255 255 255 / .14)',
+    '--white-15': 'rgb(255 255 255 / .15)',
+    '--white-16': 'rgb(255 255 255 / .16)',
+    '--white-18': 'rgb(255 255 255 / .18)',
+    '--white-20': 'rgb(255 255 255 / .20)',
+    '--white-22': 'rgb(255 255 255 / .22)',
+    '--white-30': 'rgb(255 255 255 / .30)',
+    '--white-40': 'rgb(255 255 255 / .40)',
+    '--white-45': 'rgb(255 255 255 / .45)',
+    '--white-55': 'rgb(255 255 255 / .55)',
+    '--white-60': 'rgb(255 255 255 / .60)',
+    '--white-78': 'rgb(255 255 255 / .78)',
+    '--white-80': 'rgb(255 255 255 / .80)',
+    '--white-92': 'rgb(255 255 255 / .92)',
+    '--background': '#0a0a0a',
+    '--foreground': '#e5e5e5',
+    '--card': '#0f0f0f',
+    '--card-foreground': '#e5e5e5',
+    '--popover': '#0f0f0f',
+    '--popover-foreground': '#e5e5e5',
+    '--primary': '#fafafa',
+    '--primary-hover': '#e5e5e5',
+    '--primary-foreground': '#0a0a0a',
+    '--secondary': '#262626',
+    '--secondary-hover': '#333333',
+    '--secondary-foreground': '#fafafa',
+    '--muted': '#171717',
+    '--muted-foreground': '#a3a3a3',
+    '--accent': '#262626',
+    '--accent-foreground': '#fafafa',
+    '--destructive': 'var(--state-error)',
+    '--destructive-hover': '#dc2626',
+    '--destructive-foreground': '#fafafa',
+    '--border': 'var(--white-10)',
+    '--border-strong': 'var(--white-16)',
+    '--border-control': 'var(--white-15)',
+    '--border-focus': 'var(--white-22)',
+    '--border-selected': 'var(--white-30)',
+    '--input': 'var(--border-control)',
+    '--ring': 'var(--white-40)',
+    '--ring-halo': 'var(--white-10)',
+    '--brand': '#e4e4e7',
+    '--brand-foreground': '#09090b',
+    '--brand-muted': '#a3a3a3',
+    '--black': '#000000',
+    '--white': '#fafafa',
+    '--selection': 'var(--white-20)',
+    '--glass': 'var(--white-05)',
+    '--glass-strong': 'var(--white-08)',
+    '--surface-page': 'var(--background)',
+    '--surface-card': 'rgb(38 38 38 / .5)',
+    '--surface-card-emphasis': 'rgb(38 38 38 / .75)',
+    '--surface-card-quiet': 'rgb(38 38 38 / .35)',
+    '--surface-overlay': 'rgb(23 23 23 / .92)',
+    '--surface-header': 'rgb(0 0 0 / .7)',
+    '--surface-scrim': 'rgb(0 0 0 / .8)',
+    '--surface-0': 'var(--background)',
+    '--surface-1': 'var(--card)',
+    '--surface-2': 'var(--muted)',
+    '--surface-3': 'var(--secondary)',
+    '--text-primary': '#fafafa',
+    '--text-secondary': 'var(--white-78)',
+    '--text-tertiary': 'var(--white-55)',
+    '--text-helper': 'var(--muted-foreground)',
+    '--text-disabled': 'var(--white-30)',
+    '--state-error': '#ef4444',
+    '--state-error-text': '#fca5a5',
+    '--state-error-bg': 'rgb(239 68 68 / .1)',
+    '--state-online': '#4ade80',
+    '--state-success': '#22c55e',
+    '--chrome-dot-red': 'rgb(239 68 68 / .6)',
+    '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
+    '--chrome-dot-green': 'rgb(34 197 94 / .6)',
+    '--type-scale': '1',
+    '--type-ratio': '1',
+    '--text-floor': '0.625rem',
+    '--text-ceiling': '30vw',
+    '--text-xs': '0.6875rem',
+    '--leading-xs': '1rem',
+    '--text-sm': '0.8125rem',
+    '--leading-sm': '1.15rem',
+    '--text-base': '0.875rem',
+    '--leading-base': '1.35rem',
+    '--text-lg': '0.9375rem',
+    '--leading-lg': '1.4rem',
+    '--text-xl': '1.0625rem',
+    '--leading-xl': '1.55rem',
+    '--text-2xl': '1.3125rem',
+    '--leading-2xl': '1.7rem',
+    '--text-3xl': '1.625rem',
+    '--leading-3xl': '1.95rem',
+    '--text-4xl': '2rem',
+    '--leading-4xl': '2.25rem',
+    '--text-5xl': '2.5rem',
+    '--leading-5xl': '1.05',
+    '--text-6xl': '3.25rem',
+    '--leading-6xl': '1',
+    '--text-7xl': '4rem',
+    '--leading-7xl': '1',
+    '--text-8xl': '5.25rem',
+    '--leading-8xl': '1',
+    '--text-9xl': '7rem',
+    '--leading-9xl': '1',
+    '--font-size-xs': 'var(--text-xs)',
+    '--font-size-sm': 'var(--text-sm)',
+    '--font-size-base': 'var(--text-base)',
+    '--font-size-lg': 'var(--text-lg)',
+    '--font-size-xl': 'var(--text-xl)',
+    '--font-size-2xl': 'var(--text-2xl)',
+    '--font-size-3xl': 'var(--text-3xl)',
+    '--font-size-4xl': 'var(--text-4xl)',
+    '--font-size-5xl': 'var(--text-5xl)',
+    '--font-size-6xl': 'var(--text-6xl)',
+    '--font-size-7xl': 'var(--text-7xl)',
+    '--font-size-8xl': 'var(--text-8xl)',
+    '--font-size-9xl': 'var(--text-9xl)',
+    '--text-control': 'var(--text-sm)',
+    '--weight-normal': '400',
+    '--weight-medium': '500',
+    '--weight-semibold': '600',
+    '--weight-bold': '700',
+    '--tracking-tight': '-0.025em',
+    '--tracking-normal': '0em',
+    '--tracking-wide': '0.025em',
+    '--tracking-widest': '0.1em',
+    '--leading-none': '1',
+    '--leading-tight': '1.25',
+    '--leading-snug': '1.375',
+    '--leading-normal': '1.5',
+    '--leading-relaxed': '1.625',
+    '--leading-golden': '1.618',
+    '--type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
+    '--type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
+    '--type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
+    '--type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
+    '--type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
+    '--type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
+    '--type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
+    '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+    '--density': '1',
+    '--space-0': '0',
+    '--space-1': '0.25rem',
+    '--space-2': '0.5rem',
+    '--space-3': '0.75rem',
+    '--space-4': '1rem',
+    '--space-5': '1.25rem',
+    '--space-6': '1.5rem',
+    '--space-8': '2rem',
+    '--space-10': '2.5rem',
+    '--space-12': '3rem',
+    '--space-14': '3.5rem',
+    '--space-16': '4rem',
+    '--space-20': '5rem',
+    '--space-24': '6rem',
+    '--space-32': '8rem',
+    '--golden-1': '0.25rem',
+    '--golden-2': '0.405rem',
+    '--golden-3': '0.654rem',
+    '--golden-4': '1.059rem',
+    '--golden-5': '1.713rem',
+    '--golden-6': '2.772rem',
+    '--golden-7': '4.487rem',
+    '--golden-8': '7.26rem',
+    '--golden-9': '11.749rem',
+    '--golden-split': '38.2% 61.8%',
+    '--container-max': '80rem',
+    '--container-prose': '48rem',
+    '--container-wide': '72rem',
+    '--gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
+    '--gutter-sm': '1.5rem',
+    '--gutter-lg': '2rem',
+    '--section-y': '2.5rem',
+    '--section-y-lg': '3.5rem',
+    '--hero-y': '3rem',
+    '--hero-y-lg': '4.5rem',
+    '--header-height': '3.5rem',
+    '--tap-target': '44px',
+    '--control-height-sm': '32px',
+    '--control-height': '36px',
+    '--control-height-lg': '40px',
+    '--control-height-xl': '52px',
+    '--safe-top': 'env(safe-area-inset-top,0px)',
+    '--safe-right': 'env(safe-area-inset-right,0px)',
+    '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
+    '--safe-left': 'env(safe-area-inset-left,0px)',
+    '--grid-columns': '12',
+    '--grid-gap': 'var(--space-6)',
+    '--grid-gap-tight': 'var(--space-4)',
+    '--grid-gap-loose': 'var(--space-8)',
+    '--breakpoint-sm': '40rem',
+    '--breakpoint-md': '48rem',
+    '--breakpoint-lg': '64rem',
+    '--breakpoint-xl': '80rem',
+    '--breakpoint-2xl': '96rem',
+    '--grid-card-min': '18rem',
+    '--grid-card-min-wide': '24rem',
+    '--radius': '0.5rem',
+    '--radius-sm': '0.375rem',
+    '--radius-md': '0.5rem',
+    '--radius-lg': '0.75rem',
+    '--radius-xl': '1rem',
+    '--radius-2xl': '1.5rem',
+    '--radius-composer': '28px',
+    '--radius-full': '9999px',
+    '--shadow-none': 'none',
+    '--shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
+    '--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
+    '--edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
+    '--bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
+    '--ring-focus': '0 0 0 3px var(--ring-halo)',
+    '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
+    '--shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
+    '--shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
+    '--shadow-lg': '0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)',
+    '--shadow-xl': '0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60)',
+    '--shadow-2xl': 'var(--shadow-floating)',
+    '--sheet-0': 'var(--surface-page)',
+    '--sheet-1': 'var(--surface-card)',
+    '--sheet-2': 'var(--surface-card-emphasis)',
+    '--shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
+    '--shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
+    '--fold': '12px',
+    '--fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
+    '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
+    '--glow-hero-blur': '120px',
+    '--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    '--sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
+    '--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
+    '--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
+    '--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
+    '--duration-fast': '150ms',
+    '--duration-base': '300ms',
+    '--duration-slow': '400ms',
+    '--duration-slower': '500ms',
+    '--duration-glow': '9s',
+    '--duration-press': '90ms',
+    '--ease-out': 'cubic-bezier(0,0,0.2,1)',
+    '--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    '--ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
+    '--stagger': '60ms',
+    '--entry-rise': '16px',
+    '--entry-rise-lg': '24px',
+    '--z-base': '0',
+    '--z-raised': '10',
+    '--z-sticky': '200',
+    '--z-header': '300',
+    '--z-dropdown': '400',
+    '--z-overlay': '500',
+    '--z-modal': '600',
+    '--z-popover': '700',
+    '--z-toast': '800',
+    '--z-tooltip': 'var(--z-popover)',
+    '--z-notification': 'var(--z-toast)',
+    '--font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
+    '--font-display': 'var(--font-sans)',
+    '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
+    '--font-serif': 'Georgia,serif',
+    '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+    '--ring-offset': '-2px',
+};

package/dist/tokens.gen.d.ts

@@ -304,7 +304,9 @@ export declare const fonts: {
     readonly 'font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
 };
 /** base tokens (from tokens/base.css). Values are raw CSS. */
-export declare const base: {};
+export declare const base: {
+    readonly 'ring-offset': "-2px";
+};
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
 export declare const cssVars: {
     readonly '--neutral-50': "#FAFAFA";
@@ -585,6 +587,7 @@ export declare const cssVars: {
     readonly '--font-mono': "\"Geist Mono\",ui-monospace,SFMono-Regular,monospace";
     readonly '--font-serif': "Georgia,serif";
     readonly '--font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
+    readonly '--ring-offset': "-2px";
 };
 export type CssVarName = keyof typeof cssVars;
 //# sourceMappingURL=tokens.gen.d.ts.map

package/dist/tokens.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;CAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -307,7 +307,9 @@ export const fonts = {
     'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
 };
 /** base tokens (from tokens/base.css). Values are raw CSS. */
-export const base = {};
+export const base = {
+    'ring-offset': '-2px',
+};
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
 export const cssVars = {
     '--neutral-50': '#FAFAFA',
@@ -588,4 +590,5 @@ export const cssVars = {
     '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
     '--font-serif': 'Georgia,serif',
     '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+    '--ring-offset': '-2px',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.15",
+  "version": "0.5.17",
   "packageManager": "pnpm@11.17.0",
   "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "MIT OR Apache-2.0",
@@ -13,13 +13,14 @@
   "sideEffects": [
     "*.css"
   ],
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json",
@@ -35,7 +36,7 @@
   "scripts": {
     "gen": "node scripts/gen-tokens.mjs",
     "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
-    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
+    "build": "rm -rf dist dist-cjs && pnpm gen && pnpm test && tsc -p tsconfig.json && tsc -p tsconfig.cjs.json --noCheck && node scripts/cjs.mjs && node scripts/check-dist.mjs",
     "prepublishOnly": "pnpm build",
     "lint": "node scripts/lint.mjs"
   },

package/scripts/check-dist.mjs

@@ -12,6 +12,7 @@
  * A test that reads source cannot see that. This one loads the artifact.
  */
 import { readFileSync, existsSync } from 'node:fs'
+import { createRequire } from 'node:module'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { dirname, join } from 'node:path'
 
@@ -58,6 +59,25 @@ await check('the barrel IMPORTS — the check that 0.4.10 and 0.4.11 needed', as
   if (v['--type-scale'] !== '1.2') throw new Error(`built vars() returned ${JSON.stringify(v)}`)
 })
 
+await check('the barrel REQUIRES, with the same names it imports', async () => {
+  // `type: module` makes every `.js` here ESM, so a CommonJS consumer cannot read
+  // the barrel at all — it parses `export` as a syntax error and reports the line
+  // in OUR file. Plain Node hides this now that `require(esm)` works, but jest
+  // still loads a dependency as CommonJS, so `require('@hanzo/design')` in a
+  // jsdom test died at `dist/index.js:12` through 0.5.16.
+  //
+  // Same names from both formats, checked against each other rather than a list:
+  // a list is a third copy that goes stale the next time an export is added.
+  const esm = await import(pathToFileURL(join(root, 'dist/index.js')).href)
+  const cjs = createRequire(import.meta.url)(join(root, 'dist/index.cjs'))
+  const names = (m) => Object.keys(m).filter((k) => k !== 'default' && k !== '__esModule').sort()
+  const missing = names(esm).filter((n) => !(n in cjs))
+  if (missing.length) throw new Error(`dist/index.cjs is missing ${missing.join(', ')}`)
+  if (typeof cjs.vars !== 'function') throw new Error('vars is not callable from the CommonJS build')
+  if (cjs.vars({ type: 1.2, density: 'compact' })['--type-scale'] !== '1.2')
+    throw new Error('the CommonJS build computes a different preference than the ESM one')
+})
+
 await check('no emitted module uses an extensionless relative specifier', () => {
   // The class of bug, not just the one instance: Node ESM resolves relative
   // specifiers literally, so a missing `.js` is always a runtime failure.

package/scripts/cjs.mjs

@@ -0,0 +1,43 @@
+/**
+ * Fold the CommonJS pass into `dist` as `.cjs`.
+ *
+ * `tsc` emits one module format per outDir, so the CJS build lands in
+ * `dist-cjs` beside the ESM one. Both halves ship from `dist`, distinguished by
+ * extension — `.cjs` is CommonJS whatever the package `type` says, which is the
+ * only way an ESM-typed package can hand a `require()` consumer real CJS.
+ *
+ * Specifiers are rewritten on the way in. The sources name siblings with an
+ * explicit `./x.js`, which `tsc` copies through verbatim, so an unrewritten
+ * `dist/index.cjs` would `require('./tokens.gen.js')` — the ESM copy sitting
+ * right next to it. That either throws or loads a SECOND instance of every
+ * token, so the extension has to travel with the file.
+ */
+import { mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const dist = join(root, 'dist')
+const cjs = join(root, 'dist-cjs')
+
+const files = (dir, out = []) => {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name)
+    statSync(p).isDirectory() ? files(p, out) : out.push(p)
+  }
+  return out
+}
+
+// `from './x.js'`, `import './x.js'`, `import('./x.js')`, `require('./x.js')`
+const SPECIFIER = /(\bfrom\s*|\bimport\s*\(?\s*|\brequire\s*\(\s*)(['"])(\.[^'"]*)\.js\2/g
+
+for (const f of files(cjs)) {
+  if (!f.endsWith('.js')) continue
+  const src = readFileSync(f, 'utf8')
+  const out = src.replace(SPECIFIER, (_, head, q, spec) => `${head}${q}${spec}.cjs${q}`)
+  const dest = join(dist, relative(cjs, f)).replace(/\.js$/, '.cjs')
+  mkdirSync(dirname(dest), { recursive: true })
+  writeFileSync(dest, out)
+}
+
+rmSync(cjs, { recursive: true, force: true })

package/src/tokens.gen.ts

@@ -318,7 +318,7 @@ export const fonts = {
 
 /** base tokens (from tokens/base.css). Values are raw CSS. */
 export const base = {
-
+  'ring-offset': '-2px',
 } as const
 
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
@@ -601,6 +601,7 @@ export const cssVars = {
   '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
   '--font-serif': 'Georgia,serif',
   '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+  '--ring-offset': '-2px',
 } as const
 
 export type CssVarName = keyof typeof cssVars

package/styles.css

@@ -979,6 +979,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -1045,6 +1061,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -1053,7 +1074,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tailwind.css

@@ -1002,6 +1002,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -1068,6 +1084,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -1076,7 +1097,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tokens/base.css

@@ -97,6 +97,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -163,6 +179,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -171,7 +192,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}