@hanzo/design 0.5.9 → 0.5.11

package/dist/index.d.ts

@@ -34,6 +34,6 @@ export declare function tokenValue(name: CssVarName): string | undefined;
  * bare. Pass a URL you serve.
  */
 export declare function injectDesignCss(href: string): void;
-export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';
-export type { Preference, Density } from './preference.js';
+export { vars, css, isColor, TYPE_MIN, TYPE_MAX, RATIO_MIN, RATIO_MAX } from './preference.js';
+export type { Preference, Density, Face, Measure } from './preference.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC/F,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -62,4 +62,4 @@ export function injectDesignCss(href) {
 // 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.
-export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';
+export { vars, css, isColor, TYPE_MIN, TYPE_MAX, RATIO_MIN, RATIO_MAX } from './preference.js';

package/dist/preference.d.ts

@@ -26,6 +26,13 @@
  * preview and a server render apply it identically.
  */
 export type Density = "compact" | "default" | "comfortable";
+/**
+ * The face, named by what it IS rather than by a family — the families are the
+ * token file's to choose, and it already names four.
+ */
+export type Face = "default" | "system" | "serif" | "mono";
+/** How wide the page runs before it stops. */
+export type Measure = "narrow" | "default" | "wide";
 export interface Preference {
     /** Multiplier on the type ramp. 1 is the published scale. */
     type?: number;
@@ -36,6 +43,10 @@ export interface Preference {
      */
     ratio?: number;
     density?: Density;
+    /** Which face the page is set in. */
+    font?: Face;
+    /** How wide the page runs — the measure, not the window. */
+    width?: Measure;
     /** A CSS colour for --primary / --accent. Rejected unless it is one. */
     accent?: string;
 }

package/dist/preference.d.ts.map

@@ -1 +1 @@
-{"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;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;AAE5B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,OAAO,CAAC;AAC9B,eAAO,MAAM,SAAS,MAAM,CAAC;AAqB7B;;;;;;;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,CAuB1D;AAED,2EAA2E;AAC3E,wBAAgB,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,SAAc,GAAG,MAAM,CAKjE"}
+{"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;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3D,8CAA8C;AAC9C,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,QAAQ,MAAM,CAAC;AAE5B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,OAAO,CAAC;AAC9B,eAAO,MAAM,SAAS,MAAM,CAAC;AAsD7B;;;;;;;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,CAqC1D;AAED,2EAA2E;AAC3E,wBAAgB,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,SAAc,GAAG,MAAM,CAKjE"}

package/dist/preference.js

@@ -62,6 +62,37 @@ const DENSITY = {
     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);
@@ -100,6 +131,19 @@ export function vars(p) {
     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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "packageManager": "pnpm@11.17.0",
   "description": "Hanzo Design System — 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",

package/scripts/check-preference.mjs

@@ -24,7 +24,13 @@ const js = src
   .replace(/^import[^\n]*\n/gm, "")
   .replace(/export (type|interface) [\s\S]*?\n}\n/g, "")
   .replace(/export type [^\n]*\n/g, "")
-  .replace(/: Record<[^>]*>/g, "")
+  // A generic annotation may nest (`Partial<Record<Face, string>>`), and
+  // stopping at the first `>` leaves `, string>` behind, so Function() fails to
+  // parse for a reason that has nothing to do with the preference. One level of
+  // nesting is matched explicitly — balanced, and it cannot run past the
+  // annotation the way a lookahead to the initializer can (that ate a function
+  // body, because a return type has no initializer to stop at).
+  .replace(/:\s*\w+<(?:[^<>]|<[^<>]*>)*>/g, "")
   .replace(/: Preference/g, "")
   .replace(/: Density/g, "")
   .replace(/: string/g, "")
@@ -114,6 +120,30 @@ check("a unitless leading stays a RATIO — scaling it would double-apply", () =
   eq(bad, [], "unitless leadings must not carry a multiplier:");
 });
 
+check("a face is set by REFERENCE, so a brand's own face still wins", () => {
+  // Restating "Georgia, serif" here would freeze this file's idea of serif into
+  // every document that ever stored the preference.
+  eq(vars({ font: "serif" })["--font-sans"], "var(--font-serif)");
+  eq(vars({ font: "mono" })["--font-sans"], "var(--font-mono)");
+  ok(!("--font-mono" in vars({ font: "serif" })), "code must stay monospaced");
+  eq(vars({ font: "default" }), {}, "default is no opinion, not a self-reference:");
+});
+
+check("the measure moves containers, never the column count", () => {
+  const v = vars({ width: "wide" });
+  ok(!("--grid-columns" in v), "changing the columns is a different page, not a wider one");
+  ok("--container-max" in v && "--container-prose" in v, Object.keys(v).join(","));
+  ok(parseFloat(v["--container-prose"]) > parseFloat(vars({ width: "narrow" })["--container-prose"]), "wide must exceed narrow");
+  eq(vars({ width: "default" }), {}, "default is no opinion:");
+});
+
+check("an unknown stored value is refused, not passed through", () => {
+  // A preference is user input; these axes are string unions, so a stored value
+  // from a future version or a hand-edited store must not reach a stylesheet.
+  eq(vars({ font: "comic" }), {});
+  eq(vars({ width: "enormous" }), {});
+});
+
 check("a colour lands on both --primary and --accent", () => {
   const v = vars({ accent: "#808000" });
   eq(v["--primary"], "#808000");
@@ -156,7 +186,11 @@ check("every emitted name is one the token files actually read", () => {
   const declared = new Set([...text.matchAll(/^\s*(--[a-z0-9-]+)\s*:/gm)].map((m) => m[1]));
   const read = new Set([...text.matchAll(/var\((--[a-z0-9-]+)/g)].map((m) => m[1]));
 
-  const emitted = Object.keys(vars({ type: 1.1, density: "compact", accent: "#fff" }));
+  // EVERY axis, not a sample — an axis missing here is an axis whose names
+  // nothing gates, which is how a knob starts writing into another document.
+  const emitted = Object.keys(
+    vars({ type: 1.1, ratio: 1.2, density: "compact", font: "serif", width: "wide", accent: "#fff" })
+  );
   const orphans = emitted.filter((k) => !declared.has(k) && !read.has(k));
   eq(orphans, [], "emitted names no token file declares or reads:");
 });

package/src/index.ts

@@ -67,5 +67,5 @@ export function injectDesignCss(href: string): void {
 // 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.
-export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';
-export type { Preference, Density } from './preference.js';
+export { vars, css, isColor, TYPE_MIN, TYPE_MAX, RATIO_MIN, RATIO_MAX } from './preference.js';
+export type { Preference, Density, Face, Measure } from './preference.js';

package/src/preference.ts

@@ -28,6 +28,15 @@
 
 export type Density = "compact" | "default" | "comfortable";
 
+/**
+ * The face, named by what it IS rather than by a family — the families are the
+ * token file's to choose, and it already names four.
+ */
+export type Face = "default" | "system" | "serif" | "mono";
+
+/** How wide the page runs before it stops. */
+export type Measure = "narrow" | "default" | "wide";
+
 export interface Preference {
   /** Multiplier on the type ramp. 1 is the published scale. */
   type?: number;
@@ -38,6 +47,10 @@ export interface Preference {
    */
   ratio?: number;
   density?: Density;
+  /** Which face the page is set in. */
+  font?: Face;
+  /** How wide the page runs — the measure, not the window. */
+  width?: Measure;
   /** A CSS colour for --primary / --accent. Rejected unless it is one. */
   accent?: string;
 }
@@ -82,6 +95,39 @@ const DENSITY: Record<Density, number> = {
   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: Partial<Record<Face, string>> = {
+  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: Partial<Record<Measure, { max: string; prose: string; wide: string }>> = {
+  narrow: { max: "64rem", prose: "40rem", wide: "58rem" },
+  wide: { max: "96rem", prose: "56rem", wide: "86rem" },
+};
+
 const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
 
 /** Trim to 4dp so a multiplier cannot emit a 17-digit float into a stylesheet. */
@@ -127,6 +173,20 @@ export function vars(p: Preference): Record<string, string> {
     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.