@hanzo/design 0.4.13 → 0.5.0

package/tailwind.css

@@ -252,23 +252,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#f7f7f7;
+  --background:#ffffff;
   --foreground:#0a0a0a;
   /* A ladder, not four names for #f5f5f5. Light lifts by the same tiny steps
      dark does — ~2% per rung — so --surface-0..3 mean something in both themes. */
-  --card:#f2f2f2;
+  --card:#fafafa;
   --card-foreground:#0a0a0a;
-  --popover:#fbfbfb;
+  --popover:#ffffff;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#e4e4e4;
+  --secondary:#ededed;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#ededed;
+  --muted:#f5f5f5;
   --muted-foreground:#525252;
-  --accent:#e4e4e4;
+  --accent:#ededed;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -293,9 +293,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#f2f2f2;
-  --surface-card-emphasis:#fdfdfd;
-  --surface-card-quiet:#f5f5f5;
+  --surface-card:#fafafa;
+  --surface-card-emphasis:#ffffff;
+  --surface-card-quiet:#fcfcfc;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);
@@ -313,25 +313,19 @@
    — the two are the SAME scale, mirrored. A surface/tenant overrides any --text-*
    on :root to retune density on demand. */
 :root{
-  /* The type knob. 1 is the published scale; every rung below multiplies by
-     it, so a surface or a person retunes the WHOLE ramp by setting one
-     number and no rung can drift out of relation with the others.
-     @hanzo/design's `vars({type})` emits exactly this name. */
-  --type-scale:1;
-
-  --text-xs:calc(0.6875rem * var(--type-scale, 1));  --leading-xs:calc(1rem * var(--type-scale, 1));      /* 11px — eyebrows / section labels */
-  --text-sm:calc(0.8125rem * var(--type-scale, 1));  --leading-sm:calc(1.15rem * var(--type-scale, 1));   /* 13px — nav labels, dense body */
-  --text-base:calc(0.875rem * var(--type-scale, 1)); --leading-base:calc(1.35rem * var(--type-scale, 1)); /* 14px — base app text (was 16px) */
-  --text-lg:calc(0.9375rem * var(--type-scale, 1));  --leading-lg:calc(1.4rem * var(--type-scale, 1));    /* 15px */
-  --text-xl:calc(1.0625rem * var(--type-scale, 1));  --leading-xl:calc(1.55rem * var(--type-scale, 1));   /* 17px */
-  --text-2xl:calc(1.3125rem * var(--type-scale, 1)); --leading-2xl:calc(1.7rem * var(--type-scale, 1));   /* 21px */
-  --text-3xl:calc(1.625rem * var(--type-scale, 1));  --leading-3xl:calc(1.95rem * var(--type-scale, 1));  /* 26px */
-  --text-4xl:calc(2rem * var(--type-scale, 1));      --leading-4xl:calc(2.25rem * var(--type-scale, 1));  /* 32px */
-  --text-5xl:calc(2.5rem * var(--type-scale, 1));    --leading-5xl:1.05;     /* 40px */
-  --text-6xl:calc(3.25rem * var(--type-scale, 1));   --leading-6xl:1;        /* 52px */
-  --text-7xl:calc(4rem * var(--type-scale, 1));      --leading-7xl:1;        /* 64px */
-  --text-8xl:calc(5.25rem * var(--type-scale, 1));   --leading-8xl:1;        /* 84px */
-  --text-9xl:calc(7rem * var(--type-scale, 1));      --leading-9xl:1;        /* 112px */
+  --text-xs:0.6875rem;  --leading-xs:1rem;      /* 11px — eyebrows / section labels */
+  --text-sm:0.8125rem;  --leading-sm:1.15rem;   /* 13px — nav labels, dense body */
+  --text-base:0.875rem; --leading-base:1.35rem; /* 14px — base app text (was 16px) */
+  --text-lg:0.9375rem;  --leading-lg:1.4rem;    /* 15px */
+  --text-xl:1.0625rem;  --leading-xl:1.55rem;   /* 17px */
+  --text-2xl:1.3125rem; --leading-2xl:1.7rem;   /* 21px */
+  --text-3xl:1.625rem;  --leading-3xl:1.95rem;  /* 26px */
+  --text-4xl:2rem;      --leading-4xl:2.25rem;  /* 32px */
+  --text-5xl:2.5rem;    --leading-5xl:1.05;     /* 40px */
+  --text-6xl:3.25rem;   --leading-6xl:1;        /* 52px */
+  --text-7xl:4rem;      --leading-7xl:1;        /* 64px */
+  --text-8xl:5.25rem;   --leading-8xl:1;        /* 84px */
+  --text-9xl:7rem;      --leading-9xl:1;        /* 112px */
 
   /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
      Hanzo Studio address the ramp as --font-size-*; both names are one value, so
@@ -396,7 +390,7 @@
    form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
    the compact 13px field. */
 @media (pointer:coarse){
-  :root{--text-control:calc(1rem * var(--type-scale, 1))}
+  :root{--text-control:1rem}
 }
 
 /* ── tokens/spacing.css ─────────────────────────────────────── */
@@ -404,27 +398,21 @@
    declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
    reference) — use it for editorial layouts, not for component padding. */
 :root{
-  /* The density knob. 1 is the published spacing; every --space-* rung below
-     multiplies by it, and --grid-gap-* reference those rungs rather than
-     restating them, so gaps, padding and section rhythm move together.
-     @hanzo/design's `vars({density})` emits exactly this name. */
-  --density:1;
-
   --space-0:0;
-  --space-1:calc(0.25rem * var(--density, 1));
-  --space-2:calc(0.5rem * var(--density, 1));
-  --space-3:calc(0.75rem * var(--density, 1));
-  --space-4:calc(1rem * var(--density, 1));
-  --space-5:calc(1.25rem * var(--density, 1));
-  --space-6:calc(1.5rem * var(--density, 1));
-  --space-8:calc(2rem * var(--density, 1));
-  --space-10:calc(2.5rem * var(--density, 1));
-  --space-12:calc(3rem * var(--density, 1));
-  --space-14:calc(3.5rem * var(--density, 1));
-  --space-16:calc(4rem * var(--density, 1));
-  --space-20:calc(5rem * var(--density, 1));
-  --space-24:calc(6rem * var(--density, 1));
-  --space-32:calc(8rem * var(--density, 1));
+  --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 ramp (φ) — hanzo.ai tailwind.config.ts */
   --golden-1:0.25rem;
@@ -869,26 +857,19 @@
     padding:0 var(--space-3);
   }
   :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
-     layer, which is the one focus indicator for everything.
-
-     There used to be one here: `outline:none` plus a brightened edge (.15 ->
-     .22) plus a soft halo, the composer look. It was removed because it could
-     not do the job in either of the two ways that matter.
-
-     It was never VISIBLE ENOUGH. Composited on --background the brightened edge
-     measures 1.91:1 and the halo 1.25:1, against the 3:1 that WCAG 1.4.11 asks
-     of a focus indicator and that this package already gates --ring on. The
-     budget was documented as being spent entirely on --ring "because that is
-     what a keyboard user navigates by" — true for a button, and false for a
-     field for exactly as long as this rule told fields not to use it.
-
-     And it was SUPPRESSIBLE. It carried the indicator on `border-color`, so any
-     app that states `border` on its own fields overrode it — @hanzo/id does,
-     unlayered, which beats this layer whatever its specificity, and its focused
-     fields sat at the resting .15 while both files read as correct. An outline
-     is not a border: nothing in an app's field styling reaches it, so the ring
-     paints whether or not the app has opinions about edges. */
+  /* ——— focus, on a control ———
+     Not the generic ring. A field already HAS an edge, so focus brightens that
+     edge (.15 -> .22) and adds a soft halo just outside it — which is what the
+     reference does (.composer-box:focus-within) and what separates a focused
+     field from a browser default. The generic `outline` is suppressed here
+     precisely because it would draw a second, harder box around this one. */
+  :where(input,select,textarea):focus-visible{
+    outline:none;
+    border-color:var(--border-focus);
+    box-shadow:var(--ring-focus);
+  }
+  /* A hovered field lifts its surface a rung. Nudging its EDGE from .15 to .16
+     is a state nobody can see. */
   :where(input,select,textarea):hover:not(:focus-visible):not(:disabled){background:var(--surface-3)}
   :where(input,textarea)::placeholder{color:var(--text-disabled)}
   :where(input,select,textarea,button):disabled{opacity:.5;cursor:not-allowed}
@@ -928,19 +909,6 @@
     }
   }
 
-  /* THE focus indicator. One rule, every focusable thing, no exceptions — a
-     button, a link, a summary, a field. 2px at --ring is 3.77:1 on the darkest
-     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.
-
-     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,
-     this rule was written later, and it overrode the `outline:none` the field
-     rule stated expressly to prevent it. Every focused input on every consumer
-     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}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */

package/tokens/base.css

@@ -99,26 +99,19 @@
     padding:0 var(--space-3);
   }
   :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
-     layer, which is the one focus indicator for everything.
-
-     There used to be one here: `outline:none` plus a brightened edge (.15 ->
-     .22) plus a soft halo, the composer look. It was removed because it could
-     not do the job in either of the two ways that matter.
-
-     It was never VISIBLE ENOUGH. Composited on --background the brightened edge
-     measures 1.91:1 and the halo 1.25:1, against the 3:1 that WCAG 1.4.11 asks
-     of a focus indicator and that this package already gates --ring on. The
-     budget was documented as being spent entirely on --ring "because that is
-     what a keyboard user navigates by" — true for a button, and false for a
-     field for exactly as long as this rule told fields not to use it.
-
-     And it was SUPPRESSIBLE. It carried the indicator on `border-color`, so any
-     app that states `border` on its own fields overrode it — @hanzo/id does,
-     unlayered, which beats this layer whatever its specificity, and its focused
-     fields sat at the resting .15 while both files read as correct. An outline
-     is not a border: nothing in an app's field styling reaches it, so the ring
-     paints whether or not the app has opinions about edges. */
+  /* ——— focus, on a control ———
+     Not the generic ring. A field already HAS an edge, so focus brightens that
+     edge (.15 -> .22) and adds a soft halo just outside it — which is what the
+     reference does (.composer-box:focus-within) and what separates a focused
+     field from a browser default. The generic `outline` is suppressed here
+     precisely because it would draw a second, harder box around this one. */
+  :where(input,select,textarea):focus-visible{
+    outline:none;
+    border-color:var(--border-focus);
+    box-shadow:var(--ring-focus);
+  }
+  /* A hovered field lifts its surface a rung. Nudging its EDGE from .15 to .16
+     is a state nobody can see. */
   :where(input,select,textarea):hover:not(:focus-visible):not(:disabled){background:var(--surface-3)}
   :where(input,textarea)::placeholder{color:var(--text-disabled)}
   :where(input,select,textarea,button):disabled{opacity:.5;cursor:not-allowed}
@@ -158,19 +151,6 @@
     }
   }
 
-  /* THE focus indicator. One rule, every focusable thing, no exceptions — a
-     button, a link, a summary, a field. 2px at --ring is 3.77:1 on the darkest
-     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.
-
-     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,
-     this rule was written later, and it overrode the `outline:none` the field
-     rule stated expressly to prevent it. Every focused input on every consumer
-     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}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */

package/tokens/colors.css

@@ -214,23 +214,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#f7f7f7;
+  --background:#ffffff;
   --foreground:#0a0a0a;
   /* A ladder, not four names for #f5f5f5. Light lifts by the same tiny steps
      dark does — ~2% per rung — so --surface-0..3 mean something in both themes. */
-  --card:#f2f2f2;
+  --card:#fafafa;
   --card-foreground:#0a0a0a;
-  --popover:#fbfbfb;
+  --popover:#ffffff;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#e4e4e4;
+  --secondary:#ededed;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#ededed;
+  --muted:#f5f5f5;
   --muted-foreground:#525252;
-  --accent:#e4e4e4;
+  --accent:#ededed;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -255,9 +255,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#f2f2f2;
-  --surface-card-emphasis:#fdfdfd;
-  --surface-card-quiet:#f5f5f5;
+  --surface-card:#fafafa;
+  --surface-card-emphasis:#ffffff;
+  --surface-card-quiet:#fcfcfc;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);

package/tokens/spacing.css

@@ -2,27 +2,21 @@
    declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
    reference) — use it for editorial layouts, not for component padding. */
 :root{
-  /* The density knob. 1 is the published spacing; every --space-* rung below
-     multiplies by it, and --grid-gap-* reference those rungs rather than
-     restating them, so gaps, padding and section rhythm move together.
-     @hanzo/design's `vars({density})` emits exactly this name. */
-  --density:1;
-
   --space-0:0;
-  --space-1:calc(0.25rem * var(--density, 1));
-  --space-2:calc(0.5rem * var(--density, 1));
-  --space-3:calc(0.75rem * var(--density, 1));
-  --space-4:calc(1rem * var(--density, 1));
-  --space-5:calc(1.25rem * var(--density, 1));
-  --space-6:calc(1.5rem * var(--density, 1));
-  --space-8:calc(2rem * var(--density, 1));
-  --space-10:calc(2.5rem * var(--density, 1));
-  --space-12:calc(3rem * var(--density, 1));
-  --space-14:calc(3.5rem * var(--density, 1));
-  --space-16:calc(4rem * var(--density, 1));
-  --space-20:calc(5rem * var(--density, 1));
-  --space-24:calc(6rem * var(--density, 1));
-  --space-32:calc(8rem * var(--density, 1));
+  --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 ramp (φ) — hanzo.ai tailwind.config.ts */
   --golden-1:0.25rem;

package/tokens/typography.css

@@ -5,25 +5,19 @@
    — the two are the SAME scale, mirrored. A surface/tenant overrides any --text-*
    on :root to retune density on demand. */
 :root{
-  /* The type knob. 1 is the published scale; every rung below multiplies by
-     it, so a surface or a person retunes the WHOLE ramp by setting one
-     number and no rung can drift out of relation with the others.
-     @hanzo/design's `vars({type})` emits exactly this name. */
-  --type-scale:1;
-
-  --text-xs:calc(0.6875rem * var(--type-scale, 1));  --leading-xs:calc(1rem * var(--type-scale, 1));      /* 11px — eyebrows / section labels */
-  --text-sm:calc(0.8125rem * var(--type-scale, 1));  --leading-sm:calc(1.15rem * var(--type-scale, 1));   /* 13px — nav labels, dense body */
-  --text-base:calc(0.875rem * var(--type-scale, 1)); --leading-base:calc(1.35rem * var(--type-scale, 1)); /* 14px — base app text (was 16px) */
-  --text-lg:calc(0.9375rem * var(--type-scale, 1));  --leading-lg:calc(1.4rem * var(--type-scale, 1));    /* 15px */
-  --text-xl:calc(1.0625rem * var(--type-scale, 1));  --leading-xl:calc(1.55rem * var(--type-scale, 1));   /* 17px */
-  --text-2xl:calc(1.3125rem * var(--type-scale, 1)); --leading-2xl:calc(1.7rem * var(--type-scale, 1));   /* 21px */
-  --text-3xl:calc(1.625rem * var(--type-scale, 1));  --leading-3xl:calc(1.95rem * var(--type-scale, 1));  /* 26px */
-  --text-4xl:calc(2rem * var(--type-scale, 1));      --leading-4xl:calc(2.25rem * var(--type-scale, 1));  /* 32px */
-  --text-5xl:calc(2.5rem * var(--type-scale, 1));    --leading-5xl:1.05;     /* 40px */
-  --text-6xl:calc(3.25rem * var(--type-scale, 1));   --leading-6xl:1;        /* 52px */
-  --text-7xl:calc(4rem * var(--type-scale, 1));      --leading-7xl:1;        /* 64px */
-  --text-8xl:calc(5.25rem * var(--type-scale, 1));   --leading-8xl:1;        /* 84px */
-  --text-9xl:calc(7rem * var(--type-scale, 1));      --leading-9xl:1;        /* 112px */
+  --text-xs:0.6875rem;  --leading-xs:1rem;      /* 11px — eyebrows / section labels */
+  --text-sm:0.8125rem;  --leading-sm:1.15rem;   /* 13px — nav labels, dense body */
+  --text-base:0.875rem; --leading-base:1.35rem; /* 14px — base app text (was 16px) */
+  --text-lg:0.9375rem;  --leading-lg:1.4rem;    /* 15px */
+  --text-xl:1.0625rem;  --leading-xl:1.55rem;   /* 17px */
+  --text-2xl:1.3125rem; --leading-2xl:1.7rem;   /* 21px */
+  --text-3xl:1.625rem;  --leading-3xl:1.95rem;  /* 26px */
+  --text-4xl:2rem;      --leading-4xl:2.25rem;  /* 32px */
+  --text-5xl:2.5rem;    --leading-5xl:1.05;     /* 40px */
+  --text-6xl:3.25rem;   --leading-6xl:1;        /* 52px */
+  --text-7xl:4rem;      --leading-7xl:1;        /* 64px */
+  --text-8xl:5.25rem;   --leading-8xl:1;        /* 84px */
+  --text-9xl:7rem;      --leading-9xl:1;        /* 112px */
 
   /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
      Hanzo Studio address the ramp as --font-size-*; both names are one value, so
@@ -88,5 +82,5 @@
    form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
    the compact 13px field. */
 @media (pointer:coarse){
-  :root{--text-control:calc(1rem * var(--type-scale, 1))}
+  :root{--text-control:1rem}
 }

package/dist/preference.d.ts

@@ -1,65 +0,0 @@
-/**
- * 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.
- */
-export type Density = "compact" | "default" | "comfortable";
-export interface Preference {
-    /** Multiplier on the type ramp. 1 is the published scale. */
-    type?: number;
-    density?: Density;
-    /** A CSS colour for --primary / --accent. Rejected unless it is one. */
-    accent?: string;
-}
-/**
- * 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.
- */
-export declare const TYPE_MIN = 0.85;
-export declare const TYPE_MAX = 1.4;
-/**
- * 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.
- */
-export declare function isColor(v: string): boolean;
-/**
- * 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.
- */
-export declare function vars(p: Preference): Record<string, string>;
-/** `vars()` as a declaration block, for a <style> tag or an SSR inline. */
-export declare function css(p: Preference, selector?: string): string;
-//# sourceMappingURL=preference.d.ts.map

package/dist/preference.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preference.d.ts","sourceRoot":"","sources":["../src/preference.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,QAAQ,MAAM,CAAC;AAqB5B;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAS1C;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmB1D;AAED,2EAA2E;AAC3E,wBAAgB,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,SAAc,GAAG,MAAM,CAKjE"}

package/dist/preference.js

@@ -1,102 +0,0 @@
-/**
- * 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.
- */
-/**
- * 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.
- */
-export const TYPE_MIN = 0.85;
-export const TYPE_MAX = 1.4;
-/**
- * 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,
-};
-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.
- */
-export 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.
- */
-export function vars(p) {
-    const out = {};
-    if (typeof p.type === "number" && Number.isFinite(p.type)) {
-        out["--type-scale"] = round(clamp(p.type, TYPE_MIN, TYPE_MAX));
-    }
-    if (p.density && p.density in DENSITY) {
-        out["--density"] = round(DENSITY[p.density]);
-    }
-    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. */
-export 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/scripts/check-dist.mjs

@@ -1,81 +0,0 @@
-/**
- * Import the BUILT package the way a consumer does.
- *
- * Everything else in this repo checks the sources: the token files, the
- * generator's output, the preference contract. All of it passed while
- * `dist/index.js` was unimportable — 0.4.10 and 0.4.11 both shipped a barrel
- * that re-exported `'./preference'` with no extension, which TypeScript emits
- * verbatim and Node ESM refuses to resolve. `pnpm build` was green, `pnpm test`
- * was green, and `import '@hanzo/design'` threw ERR_MODULE_NOT_FOUND for every
- * consumer.
- *
- * A test that reads source cannot see that. This one loads the artifact.
- */
-import { readFileSync, existsSync } from 'node:fs'
-import { fileURLToPath, pathToFileURL } from 'node:url'
-import { dirname, join } from 'node:path'
-
-const here = dirname(fileURLToPath(import.meta.url))
-const root = join(here, '..')
-
-let failed = 0
-const check = async (name, fn) => {
-  try {
-    await fn()
-    console.log(`  ok   ${name}`)
-  } catch (e) {
-    failed++
-    console.error(`  FAIL ${name}\n       ${e.message}`)
-  }
-}
-
-console.log('dist:')
-
-const pkg = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'))
-
-await check('every export the package advertises actually exists on disk', () => {
-  const missing = []
-  for (const [name, entry] of Object.entries(pkg.exports ?? {})) {
-    for (const target of typeof entry === 'string' ? [entry] : Object.values(entry)) {
-      if (typeof target !== 'string' || target.includes('*')) continue
-      if (!existsSync(join(root, target))) missing.push(`${name} -> ${target}`)
-    }
-  }
-  if (missing.length) throw new Error(`exports pointing at nothing:\n         ${missing.join('\n         ')}`)
-})
-
-await check('the barrel IMPORTS — the check that 0.4.10 and 0.4.11 needed', async () => {
-  const entry = join(root, 'dist/index.js')
-  if (!existsSync(entry)) throw new Error('dist/index.js is missing — run the build first')
-  const mod = await import(pathToFileURL(entry).href)
-  // The preference API is the part that was unreachable; naming it here means a
-  // future re-export losing its extension fails by name rather than by silence.
-  for (const name of ['vars', 'css', 'isColor', 'TYPE_MIN', 'TYPE_MAX', 'cssVar', 'tokenValue']) {
-    if (mod[name] === undefined) throw new Error(`dist/index.js does not export ${name}`)
-  }
-  if (typeof mod.vars !== 'function') throw new Error('vars is not callable from the built package')
-  const v = mod.vars({ type: 1.2, density: 'compact' })
-  if (v['--type-scale'] !== '1.2') throw new Error(`built vars() returned ${JSON.stringify(v)}`)
-})
-
-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.
-  const bad = []
-  for (const [, entry] of Object.entries(pkg.exports ?? {})) {
-    const target = typeof entry === 'string' ? entry : entry.import
-    if (typeof target !== 'string' || target.includes('*') || !target.endsWith('.js')) continue
-    const file = join(root, target)
-    if (!existsSync(file)) continue
-    for (const m of readFileSync(file, 'utf8').matchAll(/from\s+['"](\.[^'"]*)['"]/g)) {
-      if (!/\.(js|mjs|cjs|json|css)$/.test(m[1])) bad.push(`${target}: ${m[1]}`)
-    }
-  }
-  if (bad.length) throw new Error(`extensionless relative imports:\n         ${bad.join('\n         ')}`)
-})
-
-if (failed) {
-  console.error(`\n${failed} dist check(s) failed`)
-  process.exit(1)
-}
-console.log('dist: all checks passed')