@nxds/core 0.11.0 → 0.13.0

package/dist/runtime/catalogue.cjs

@@ -27,384 +27,60 @@ __export(catalogue_exports, {
 });
 module.exports = __toCommonJS(catalogue_exports);
 
-// tokens/primitives/typography/typography-default.json
-var typography_default_default = {
-  family: {
-    "font-sans": {
-      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
-    },
-    "font-heading": {
-      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
-    },
-    "font-serif": {
-      $value: "Georgia",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
-    },
-    "font-mono": {
-      $value: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
-    }
-  },
-  size: {
-    xxs: {
-      $value: {
-        value: 11,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xs: {
-      $value: {
-        value: 12,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    sm: {
-      $value: {
-        value: 14,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    base: {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    lg: {
-      $value: {
-        value: 18,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xl: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "2xl": {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "3xl": {
-      $value: {
-        value: 30,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "4xl": {
-      $value: {
-        value: 36,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "5xl": {
-      $value: {
-        value: 48,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "6xl": {
-      $value: {
-        value: 60,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "7xl": {
-      $value: {
-        value: 72,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "8xl": {
-      $value: {
-        value: 96,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "9xl": {
-      $value: {
-        value: 128,
-        unit: "px"
-      },
-      $type: "dimension"
+// src/lib/contrast.ts
+var import_apca_w32 = require("apca-w3");
+var import_culori5 = require("culori");
+
+// src/lib/apca.ts
+var import_apca_w3 = require("apca-w3");
+var import_culori = require("culori");
+var toRgb = (0, import_culori.converter)("rgb");
+function channel(value) {
+  return Math.max(0, Math.min(255, Math.round(value * 255)));
+}
+function toSrgbInts(input) {
+  const parsed = (0, import_culori.parse)(input);
+  if (!parsed) throw new Error(`apca: cannot parse color '${input}'`);
+  const converted = (0, import_culori.oklch)(parsed);
+  if (!converted) throw new Error(`apca: cannot convert '${input}' to OKLCH`);
+  const rgb = toRgb((0, import_culori.clampChroma)(converted, "oklch", "rgb"));
+  return [channel(rgb.r), channel(rgb.g), channel(rgb.b)];
+}
+function blendAlphaOver(hex8, bgInts) {
+  const h = hex8.slice(1);
+  const a = parseInt(h.slice(6, 8), 16) / 255;
+  const [bgR, bgG, bgB] = bgInts;
+  const mix = (fg, bg) => Math.round(fg * a + bg * (1 - a));
+  return [
+    mix(parseInt(h.slice(0, 2), 16), bgR),
+    mix(parseInt(h.slice(2, 4), 16), bgG),
+    mix(parseInt(h.slice(4, 6), 16), bgB)
+  ];
+}
+function resolveToSrgbInts(value, bgInts) {
+  if (typeof value !== "string") {
+    throw new Error(`apca: expected string color value, got ${typeof value}`);
+  }
+  if (/^#[0-9a-fA-F]{8}$/.test(value)) {
+    if (!bgInts) {
+      throw new Error(
+        `apca: alpha color "${value}" needs a backdrop to composite against`
+      );
     }
-  },
-  weight: {
-    thin: {
-      $value: 100,
-      $type: "fontWeight"
-    },
-    extralight: {
-      $value: 200,
-      $type: "fontWeight"
-    },
-    light: {
-      $value: 300,
-      $type: "fontWeight"
-    },
-    normal: {
-      $value: 400,
-      $type: "fontWeight"
-    },
-    medium: {
-      $value: 500,
-      $type: "fontWeight"
-    },
-    semibold: {
-      $value: 600,
-      $type: "fontWeight"
-    },
-    bold: {
-      $value: 700,
-      $type: "fontWeight"
-    },
-    extrabold: {
-      $value: 800,
-      $type: "fontWeight"
-    },
-    black: {
-      $value: 900,
-      $type: "fontWeight"
-    }
-  },
-  "line-height": {
-    xxs: {
-      $value: {
-        value: 12,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xs: {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    sm: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    base: {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    lg: {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xl: {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "2xl": {
-      $value: {
-        value: 32,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "3xl": {
-      $value: {
-        value: 36,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "4xl": {
-      $value: {
-        value: 48,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "5xl": {
-      $value: {
-        value: 48,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "6xl": {
-      $value: {
-        value: 60,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "7xl": {
-      $value: {
-        value: 72,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "8xl": {
-      $value: {
-        value: 96,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "9xl": {
-      $value: {
-        value: 128,
-        unit: "px"
-      },
-      $type: "dimension"
-    }
-  },
-  letterspacing: {
-    tighter: {
-      $value: {
-        value: -0.800000011920929,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    tight: {
-      $value: {
-        value: -0.4000000059604645,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    normal: {
-      $value: {
-        value: 0,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    wide: {
-      $value: {
-        value: 0.4000000059604645,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    wider: {
-      $value: {
-        value: 0.800000011920929,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    widest: {
-      $value: {
-        value: 1.600000023841858,
-        unit: "px"
-      },
-      $type: "dimension"
-    }
-  }
-};
-
-// src/lib/contrast.ts
-var import_apca_w32 = require("apca-w3");
-var import_culori5 = require("culori");
-
-// src/lib/apca.ts
-var import_apca_w3 = require("apca-w3");
-var import_culori = require("culori");
-var toRgb = (0, import_culori.converter)("rgb");
-function channel(value) {
-  return Math.max(0, Math.min(255, Math.round(value * 255)));
-}
-function toSrgbInts(input) {
-  const parsed = (0, import_culori.parse)(input);
-  if (!parsed) throw new Error(`apca: cannot parse color '${input}'`);
-  const converted = (0, import_culori.oklch)(parsed);
-  if (!converted) throw new Error(`apca: cannot convert '${input}' to OKLCH`);
-  const rgb = toRgb((0, import_culori.clampChroma)(converted, "oklch", "rgb"));
-  return [channel(rgb.r), channel(rgb.g), channel(rgb.b)];
-}
-function blendAlphaOver(hex8, bgInts) {
-  const h = hex8.slice(1);
-  const a = parseInt(h.slice(6, 8), 16) / 255;
-  const [bgR, bgG, bgB] = bgInts;
-  const mix = (fg, bg) => Math.round(fg * a + bg * (1 - a));
-  return [
-    mix(parseInt(h.slice(0, 2), 16), bgR),
-    mix(parseInt(h.slice(2, 4), 16), bgG),
-    mix(parseInt(h.slice(4, 6), 16), bgB)
-  ];
-}
-function resolveToSrgbInts(value, bgInts) {
-  if (typeof value !== "string") {
-    throw new Error(`apca: expected string color value, got ${typeof value}`);
-  }
-  if (/^#[0-9a-fA-F]{8}$/.test(value)) {
-    if (!bgInts) {
-      throw new Error(
-        `apca: alpha color "${value}" needs a backdrop to composite against`
-      );
-    }
-    return blendAlphaOver(value, bgInts);
-  }
-  const parsed = (0, import_culori.parse)(value);
-  if (!parsed) throw new Error(`apca: cannot parse color '${value}'`);
-  const converted = (0, import_culori.oklch)(parsed);
-  if (!converted) throw new Error(`apca: cannot convert '${value}'`);
-  const rgb = toRgb((0, import_culori.clampChroma)(converted, "oklch", "rgb"));
-  const alpha = rgb.alpha ?? 1;
-  const ints = [channel(rgb.r), channel(rgb.g), channel(rgb.b)];
-  if (alpha < 1) {
-    if (!bgInts) {
-      throw new Error(
-        `apca: alpha color "${value}" needs a backdrop to composite against`
-      );
+    return blendAlphaOver(value, bgInts);
+  }
+  const parsed = (0, import_culori.parse)(value);
+  if (!parsed) throw new Error(`apca: cannot parse color '${value}'`);
+  const converted = (0, import_culori.oklch)(parsed);
+  if (!converted) throw new Error(`apca: cannot convert '${value}'`);
+  const rgb = toRgb((0, import_culori.clampChroma)(converted, "oklch", "rgb"));
+  const alpha = rgb.alpha ?? 1;
+  const ints = [channel(rgb.r), channel(rgb.g), channel(rgb.b)];
+  if (alpha < 1) {
+    if (!bgInts) {
+      throw new Error(
+        `apca: alpha color "${value}" needs a backdrop to composite against`
+      );
     }
     return [
       Math.round(ints[0] * alpha + bgInts[0] * (1 - alpha)),
@@ -826,249 +502,607 @@ var perceptual_grid_hue_default = {
     "900": 0.32,
     "950": 0.24
   },
-  fuchsia: {
-    "50": 0.97,
-    "100": 0.94,
-    "200": 0.89,
-    "300": 0.81,
-    "400": 0.71,
-    "500": 0.63,
-    "600": 0.56,
-    "700": 0.49,
-    "800": 0.41,
-    "900": 0.33,
-    "950": 0.25
+  fuchsia: {
+    "50": 0.97,
+    "100": 0.94,
+    "200": 0.89,
+    "300": 0.81,
+    "400": 0.71,
+    "500": 0.63,
+    "600": 0.56,
+    "700": 0.49,
+    "800": 0.41,
+    "900": 0.33,
+    "950": 0.25
+  },
+  pink: {
+    "50": 0.97,
+    "100": 0.94,
+    "200": 0.89,
+    "300": 0.82,
+    "400": 0.72,
+    "500": 0.64,
+    "600": 0.57,
+    "700": 0.5,
+    "800": 0.42,
+    "900": 0.34,
+    "950": 0.25
+  }
+};
+
+// src/token-source/perceptual-grid.ts
+var EMIT_GAMUT = "p3";
+var toRgb2 = (0, import_culori3.converter)("rgb");
+var PERCEPTUAL_L_GRID = Object.freeze(perceptual_grid_default);
+var PERCEPTUAL_L_GRID_HUE = Object.freeze(
+  Object.fromEntries(
+    Object.entries(perceptual_grid_hue_default).map(([name, curve]) => [name, Object.freeze(curve)])
+  )
+);
+var CUSP_FRACTION = 0.95;
+var SHADE_KEY_RE = /^(50|100|200|300|400|500|600|700|800|900|950)$/;
+function isPaletteShadeKey(key) {
+  return typeof key === "string" && SHADE_KEY_RE.test(key);
+}
+function round2(value, decimals) {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+function formatPaletteOklch({ l, c, h, alpha }) {
+  const finite = (v) => v !== void 0 && Number.isFinite(v) ? v : 0;
+  const lRounded = round2(finite(l), 4);
+  const cRounded = round2(finite(c), 4);
+  const hRounded = c && h !== void 0 ? round2(finite(h), 3) : 0;
+  const base = `oklch(${lRounded} ${cRounded} ${hRounded}`;
+  if (alpha !== void 0 && alpha < 1) {
+    return `${base} / ${round2(alpha, 4)})`;
+  }
+  return `${base})`;
+}
+function parseToOklch(hex) {
+  const parsed = (0, import_culori3.parse)(hex);
+  if (!parsed) {
+    throw new Error(`palette: cannot parse color "${hex}"`);
+  }
+  return (0, import_culori3.oklch)(parsed);
+}
+function computePinnedOklch(hex, shade, palette, reportGamutClip) {
+  const hueCurve = palette ? PERCEPTUAL_L_GRID_HUE[palette] : void 0;
+  const pinnedL = isPaletteShadeKey(shade) ? (hueCurve ?? PERCEPTUAL_L_GRID)[shade] : void 0;
+  if (pinnedL === void 0) {
+    throw new Error(`palette: unknown shade "${shade}" for ${hex}`);
+  }
+  const source = parseToOklch(hex);
+  let chroma = source.c ?? 0;
+  if (hueCurve) {
+    const cuspC = (0, import_culori3.clampChroma)(
+      { mode: "oklch", l: pinnedL, c: 0.5, h: source.h },
+      "oklch",
+      EMIT_GAMUT
+    ).c ?? 0;
+    chroma = cuspC * CUSP_FRACTION;
+  }
+  const target = {
+    mode: "oklch",
+    l: pinnedL,
+    c: chroma,
+    h: source.h,
+    ...source.alpha !== void 0 ? { alpha: source.alpha } : {}
+  };
+  const clamped = (0, import_culori3.clampChroma)(target, "oklch", EMIT_GAMUT);
+  if (!hueCurve) {
+    const originalC = target.c;
+    const clampedC = clamped.c ?? 0;
+    if (originalC > 0 && (originalC - clampedC) / originalC > 0.2) {
+      reportGamutClip?.(
+        `palette: P3 gamut clip on ${hex} at shade ${shade} \u2014 C ${originalC.toFixed(4)} \u2192 ${clampedC.toFixed(4)}`
+      );
+    }
+  }
+  return clamped;
+}
+function hexToOklchPinned(hex, shade, palette, reportGamutClip) {
+  return formatPaletteOklch(
+    computePinnedOklch(hex, shade, palette, reportGamutClip)
+  );
+}
+function hexToOklchMechanical(hex) {
+  return formatPaletteOklch(parseToOklch(hex));
+}
+
+// src/lib/perceptual-ramp.ts
+var EMIT_GAMUT2 = "p3";
+var CUSP_FRACTION2 = 0.95;
+function seedOklch(input) {
+  const parsed = (0, import_culori4.parse)(input);
+  if (!parsed)
+    throw new Error(`perceptual-ramp: cannot parse color '${input}'`);
+  const converted = (0, import_culori4.oklch)(parsed);
+  if (!converted)
+    throw new Error(`perceptual-ramp: cannot convert '${input}' to OKLCH`);
+  return converted;
+}
+function pinnedOklch(seedHex, shade, options = {}) {
+  const { capAtSeedChroma = true } = options;
+  const seed = seedOklch(seedHex);
+  const l = PERCEPTUAL_L_GRID[shade];
+  const hue = seed.h ?? 0;
+  const seedC = seed.c ?? 0;
+  const cuspC = (0, import_culori4.clampChroma)({ mode: "oklch", l, c: 0.5, h: hue }, "oklch", EMIT_GAMUT2).c ?? 0;
+  let chroma = cuspC * CUSP_FRACTION2;
+  if (capAtSeedChroma) chroma = Math.min(chroma, seedC);
+  const target = { mode: "oklch", l, c: chroma, h: hue };
+  return formatOklch((0, import_culori4.clampChroma)(target, "oklch", EMIT_GAMUT2));
+}
+function rampFromSeed(seedHex, options = {}) {
+  const ramp = {};
+  for (const shade of SHADES)
+    ramp[shade] = pinnedOklch(seedHex, shade, options);
+  return ramp;
+}
+
+// src/lib/contrast.ts
+var CONTRAST_MIN = 0;
+var CONTRAST_MAX = 100;
+function normalizeContrast(value, fallback = 50) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.round(Math.max(CONTRAST_MIN, Math.min(CONTRAST_MAX, value))) : fallback;
+}
+function contrastTarget(tier, contrast) {
+  return TIER_THRESHOLDS[tier] + 15 * contrast / 100;
+}
+var BISECT_STEPS = 12;
+function bisect(fail, pass, passes) {
+  for (let i = 0; i < BISECT_STEPS; i++) {
+    const middle = (fail + pass) / 2;
+    if (passes(middle)) pass = middle;
+    else fail = middle;
+  }
+  return pass;
+}
+var token = (map, name) => {
+  const value = map[`--nx-color-${name}`];
+  if (value === void 0) throw new Error(`contrast: missing ${name}`);
+  return value;
+};
+function pairBackground(map, pair) {
+  const backdrop = pair.backdrop ? resolveToSrgbInts(
+    pair.backdrop.startsWith("#") ? pair.backdrop : token(map, pair.backdrop)
+  ) : void 0;
+  return resolveToSrgbInts(token(map, pair.bg), backdrop);
+}
+var luminance = (color) => (0, import_apca_w32.sRGBtoY)(resolveToSrgbInts(color));
+var score = (foregroundY, backgroundY) => Math.abs((0, import_apca_w32.APCAcontrast)(foregroundY, backgroundY));
+function constraintsFor(map, pairs, contrast, endpointY) {
+  const constraints = [];
+  for (const pair of pairs) {
+    const backgroundY = (0, import_apca_w32.sRGBtoY)(pairBackground(map, pair));
+    const reachable = score(endpointY, backgroundY);
+    if (reachable < TIER_THRESHOLDS[pair.tier]) return void 0;
+    const target = contrastTarget(pair.tier, contrast) + (pair.offset ?? 0);
+    constraints.push({ backgroundY, target: Math.min(target, reachable) });
+  }
+  return constraints;
+}
+var keepsTextSeed = (mode, kind) => mode === "light" && kind === "text";
+function solveForeground(seed, constraints, endpoint, keepSeed) {
+  const passes = (color) => {
+    const y = luminance(color);
+    return constraints.every((c) => score(y, c.backgroundY) >= c.target);
+  };
+  if (keepSeed && passes(seed)) return seed;
+  const parsed = seedOklch(seed);
+  const at = (l) => formatOklch((0, import_culori5.clampChroma)({ ...parsed, l, alpha: 1 }, "oklch", "p3"));
+  return at(
+    bisect(keepSeed ? parsed.l : 1 - endpoint, endpoint, (l) => passes(at(l)))
+  );
+}
+var SOLVE_GROUPS = /* @__PURE__ */ new Map();
+for (const pair of APCA_PAIRS) {
+  const key = pair.solveAs ?? pair.fg;
+  const group = SOLVE_GROUPS.get(key);
+  if (!group) {
+    SOLVE_GROUPS.set(key, { kind: pair.kind, pairs: [pair] });
+    continue;
+  }
+  if (group.kind !== pair.kind)
+    throw new Error(
+      `contrast: ${pair.fg} is '${pair.kind}' but joins '${group.kind}' group ${key}`
+    );
+  group.pairs.push(pair);
+}
+function constrainFamilyFills(map, name, pairs) {
+  const basePair = pairs[0];
+  if (!basePair) throw new Error(`contrast: missing pairs for ${name}`);
+  const baseY = luminance(token(map, basePair.bg));
+  const endpoint = score(1, baseY) >= score(0, baseY) ? 1 : 0;
+  map[`--nx-color-${name}`] = `oklch(${endpoint} 0 0)`;
+  for (const pair of pairs) {
+    const floor = TIER_THRESHOLDS[pair.tier];
+    const value = token(map, pair.bg);
+    if (score(endpoint, luminance(value)) >= floor) continue;
+    const fill = seedOklch(value);
+    const at = (l) => formatOklch((0, import_culori5.clampChroma)({ ...fill, l }, "oklch", "p3"));
+    const readable = (l) => score(endpoint, luminance(at(l))) >= floor;
+    map[`--nx-color-${pair.bg}`] = at(bisect(fill.l, 1 - endpoint, readable));
+  }
+}
+function constrainColors(map, mode, contrast) {
+  for (const [name, { kind, pairs }] of SOLVE_GROUPS)
+    if (kind === "label") constrainFamilyFills(map, name, pairs);
+  const endpoint = mode === "dark" ? 1 : 0;
+  const endpointY = luminance(`oklch(${endpoint} 0 0)`);
+  for (const [name, { kind, pairs }] of SOLVE_GROUPS) {
+    if (kind === "label") continue;
+    const constraints = constraintsFor(map, pairs, contrast, endpointY);
+    if (constraints === void 0)
+      throw new Error(`contrast: no readable ${name} in ${mode}`);
+    const solved = solveForeground(
+      token(map, name),
+      constraints,
+      endpoint,
+      keepsTextSeed(mode, kind)
+    );
+    for (const fg of new Set(pairs.map((pair) => pair.fg).concat(name)))
+      map[`--nx-color-${fg}`] = solved;
+  }
+  return map;
+}
+
+// tokens/primitives/typography/typography-default.json
+var typography_default_default = {
+  family: {
+    "font-sans": {
+      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    },
+    "font-heading": {
+      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    },
+    "font-serif": {
+      $value: "Georgia",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    },
+    "font-mono": {
+      $value: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    }
+  },
+  size: {
+    xxs: {
+      $value: {
+        value: 11,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xs: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    sm: {
+      $value: {
+        value: 14,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    base: {
+      $value: {
+        value: 16,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    lg: {
+      $value: {
+        value: 18,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xl: {
+      $value: {
+        value: 20,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "2xl": {
+      $value: {
+        value: 24,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "3xl": {
+      $value: {
+        value: 30,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "4xl": {
+      $value: {
+        value: 36,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "5xl": {
+      $value: {
+        value: 48,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "6xl": {
+      $value: {
+        value: 60,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "7xl": {
+      $value: {
+        value: 72,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "8xl": {
+      $value: {
+        value: 96,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "9xl": {
+      $value: {
+        value: 128,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    code: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
+    }
+  },
+  weight: {
+    thin: {
+      $value: 100,
+      $type: "fontWeight"
+    },
+    extralight: {
+      $value: 200,
+      $type: "fontWeight"
+    },
+    light: {
+      $value: 300,
+      $type: "fontWeight"
+    },
+    normal: {
+      $value: 400,
+      $type: "fontWeight"
+    },
+    medium: {
+      $value: 500,
+      $type: "fontWeight"
+    },
+    semibold: {
+      $value: 600,
+      $type: "fontWeight"
+    },
+    bold: {
+      $value: 700,
+      $type: "fontWeight"
+    },
+    extrabold: {
+      $value: 800,
+      $type: "fontWeight"
+    },
+    black: {
+      $value: 900,
+      $type: "fontWeight"
+    }
   },
-  pink: {
-    "50": 0.97,
-    "100": 0.94,
-    "200": 0.89,
-    "300": 0.82,
-    "400": 0.72,
-    "500": 0.64,
-    "600": 0.57,
-    "700": 0.5,
-    "800": 0.42,
-    "900": 0.34,
-    "950": 0.25
-  }
-};
-
-// src/token-source/perceptual-grid.ts
-var EMIT_GAMUT = "p3";
-var toRgb2 = (0, import_culori3.converter)("rgb");
-var PERCEPTUAL_L_GRID = Object.freeze(perceptual_grid_default);
-var PERCEPTUAL_L_GRID_HUE = Object.freeze(
-  Object.fromEntries(
-    Object.entries(perceptual_grid_hue_default).map(([name, curve]) => [name, Object.freeze(curve)])
-  )
-);
-var CUSP_FRACTION = 0.95;
-var SHADE_KEY_RE = /^(50|100|200|300|400|500|600|700|800|900|950)$/;
-function isPaletteShadeKey(key) {
-  return typeof key === "string" && SHADE_KEY_RE.test(key);
-}
-function round2(value, decimals) {
-  const factor = 10 ** decimals;
-  return Math.round(value * factor) / factor;
-}
-function formatPaletteOklch({ l, c, h, alpha }) {
-  const finite = (v) => v !== void 0 && Number.isFinite(v) ? v : 0;
-  const lRounded = round2(finite(l), 4);
-  const cRounded = round2(finite(c), 4);
-  const hRounded = c && h !== void 0 ? round2(finite(h), 3) : 0;
-  const base = `oklch(${lRounded} ${cRounded} ${hRounded}`;
-  if (alpha !== void 0 && alpha < 1) {
-    return `${base} / ${round2(alpha, 4)})`;
-  }
-  return `${base})`;
-}
-function parseToOklch(hex) {
-  const parsed = (0, import_culori3.parse)(hex);
-  if (!parsed) {
-    throw new Error(`palette: cannot parse color "${hex}"`);
-  }
-  return (0, import_culori3.oklch)(parsed);
-}
-function computePinnedOklch(hex, shade, palette, reportGamutClip) {
-  const hueCurve = palette ? PERCEPTUAL_L_GRID_HUE[palette] : void 0;
-  const pinnedL = isPaletteShadeKey(shade) ? (hueCurve ?? PERCEPTUAL_L_GRID)[shade] : void 0;
-  if (pinnedL === void 0) {
-    throw new Error(`palette: unknown shade "${shade}" for ${hex}`);
-  }
-  const source = parseToOklch(hex);
-  let chroma = source.c ?? 0;
-  if (hueCurve) {
-    const cuspC = (0, import_culori3.clampChroma)(
-      { mode: "oklch", l: pinnedL, c: 0.5, h: source.h },
-      "oklch",
-      EMIT_GAMUT
-    ).c ?? 0;
-    chroma = cuspC * CUSP_FRACTION;
-  }
-  const target = {
-    mode: "oklch",
-    l: pinnedL,
-    c: chroma,
-    h: source.h,
-    ...source.alpha !== void 0 ? { alpha: source.alpha } : {}
-  };
-  const clamped = (0, import_culori3.clampChroma)(target, "oklch", EMIT_GAMUT);
-  if (!hueCurve) {
-    const originalC = target.c;
-    const clampedC = clamped.c ?? 0;
-    if (originalC > 0 && (originalC - clampedC) / originalC > 0.2) {
-      reportGamutClip?.(
-        `palette: P3 gamut clip on ${hex} at shade ${shade} \u2014 C ${originalC.toFixed(4)} \u2192 ${clampedC.toFixed(4)}`
-      );
+  "line-height": {
+    xxs: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xs: {
+      $value: {
+        value: 16,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    sm: {
+      $value: {
+        value: 20,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    base: {
+      $value: {
+        value: 24,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    lg: {
+      $value: {
+        value: 28,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xl: {
+      $value: {
+        value: 28,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "2xl": {
+      $value: {
+        value: 32,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "3xl": {
+      $value: {
+        value: 36,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "4xl": {
+      $value: {
+        value: 48,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "5xl": {
+      $value: {
+        value: 48,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "6xl": {
+      $value: {
+        value: 60,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "7xl": {
+      $value: {
+        value: 72,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "8xl": {
+      $value: {
+        value: 96,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "9xl": {
+      $value: {
+        value: 128,
+        unit: "px"
+      },
+      $type: "dimension"
+    }
+  },
+  letterspacing: {
+    tighter: {
+      $value: {
+        value: -0.800000011920929,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    tight: {
+      $value: {
+        value: -0.4000000059604645,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    normal: {
+      $value: {
+        value: 0,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    wide: {
+      $value: {
+        value: 0.4000000059604645,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    wider: {
+      $value: {
+        value: 0.800000011920929,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    widest: {
+      $value: {
+        value: 1.600000023841858,
+        unit: "px"
+      },
+      $type: "dimension"
     }
   }
-  return clamped;
-}
-function hexToOklchPinned(hex, shade, palette, reportGamutClip) {
-  return formatPaletteOklch(
-    computePinnedOklch(hex, shade, palette, reportGamutClip)
-  );
-}
-function hexToOklchMechanical(hex) {
-  return formatPaletteOklch(parseToOklch(hex));
-}
-
-// src/lib/perceptual-ramp.ts
-var EMIT_GAMUT2 = "p3";
-var CUSP_FRACTION2 = 0.95;
-function seedOklch(input) {
-  const parsed = (0, import_culori4.parse)(input);
-  if (!parsed)
-    throw new Error(`perceptual-ramp: cannot parse color '${input}'`);
-  const converted = (0, import_culori4.oklch)(parsed);
-  if (!converted)
-    throw new Error(`perceptual-ramp: cannot convert '${input}' to OKLCH`);
-  return converted;
-}
-function pinnedOklch(seedHex, shade, options = {}) {
-  const { capAtSeedChroma = true } = options;
-  const seed = seedOklch(seedHex);
-  const l = PERCEPTUAL_L_GRID[shade];
-  const hue = seed.h ?? 0;
-  const seedC = seed.c ?? 0;
-  const cuspC = (0, import_culori4.clampChroma)({ mode: "oklch", l, c: 0.5, h: hue }, "oklch", EMIT_GAMUT2).c ?? 0;
-  let chroma = cuspC * CUSP_FRACTION2;
-  if (capAtSeedChroma) chroma = Math.min(chroma, seedC);
-  const target = { mode: "oklch", l, c: chroma, h: hue };
-  return formatOklch((0, import_culori4.clampChroma)(target, "oklch", EMIT_GAMUT2));
-}
-function rampFromSeed(seedHex, options = {}) {
-  const ramp = {};
-  for (const shade of SHADES)
-    ramp[shade] = pinnedOklch(seedHex, shade, options);
-  return ramp;
-}
-
-// src/lib/contrast.ts
-function normalizeContrast(value, fallback = 50) {
-  return typeof value === "number" && Number.isFinite(value) ? Math.round(Math.max(0, Math.min(100, value))) : fallback;
-}
-function contrastTarget(tier, contrast) {
-  return TIER_THRESHOLDS[tier] + 15 * contrast / 100;
-}
-var BISECT_STEPS = 12;
-function bisect(fail, pass, passes) {
-  for (let i = 0; i < BISECT_STEPS; i++) {
-    const middle = (fail + pass) / 2;
-    if (passes(middle)) pass = middle;
-    else fail = middle;
-  }
-  return pass;
-}
-var token = (map, name) => {
-  const value = map[`--nx-color-${name}`];
-  if (value === void 0) throw new Error(`contrast: missing ${name}`);
-  return value;
 };
-function pairBackground(map, pair) {
-  const backdrop = pair.backdrop ? resolveToSrgbInts(
-    pair.backdrop.startsWith("#") ? pair.backdrop : token(map, pair.backdrop)
-  ) : void 0;
-  return resolveToSrgbInts(token(map, pair.bg), backdrop);
-}
-var luminance = (color) => (0, import_apca_w32.sRGBtoY)(resolveToSrgbInts(color));
-var score = (foregroundY, backgroundY) => Math.abs((0, import_apca_w32.APCAcontrast)(foregroundY, backgroundY));
-function constraintsFor(map, pairs, contrast, endpointY) {
-  const constraints = [];
-  for (const pair of pairs) {
-    const backgroundY = (0, import_apca_w32.sRGBtoY)(pairBackground(map, pair));
-    const reachable = score(endpointY, backgroundY);
-    if (reachable < TIER_THRESHOLDS[pair.tier]) return void 0;
-    const target = contrastTarget(pair.tier, contrast) + (pair.offset ?? 0);
-    constraints.push({ backgroundY, target: Math.min(target, reachable) });
-  }
-  return constraints;
-}
-var keepsTextSeed = (mode, kind) => mode === "light" && kind === "text";
-function solveForeground(seed, constraints, endpoint, keepSeed) {
-  const passes = (color) => {
-    const y = luminance(color);
-    return constraints.every((c) => score(y, c.backgroundY) >= c.target);
-  };
-  if (keepSeed && passes(seed)) return seed;
-  const parsed = seedOklch(seed);
-  const at = (l) => formatOklch((0, import_culori5.clampChroma)({ ...parsed, l, alpha: 1 }, "oklch", "p3"));
-  return at(
-    bisect(keepSeed ? parsed.l : 1 - endpoint, endpoint, (l) => passes(at(l)))
-  );
-}
-var SOLVE_GROUPS = /* @__PURE__ */ new Map();
-for (const pair of APCA_PAIRS) {
-  const key = pair.solveAs ?? pair.fg;
-  const group = SOLVE_GROUPS.get(key);
-  if (!group) {
-    SOLVE_GROUPS.set(key, { kind: pair.kind, pairs: [pair] });
-    continue;
-  }
-  if (group.kind !== pair.kind)
-    throw new Error(
-      `contrast: ${pair.fg} is '${pair.kind}' but joins '${group.kind}' group ${key}`
-    );
-  group.pairs.push(pair);
-}
-function constrainFamilyFills(map, name, pairs) {
-  const basePair = pairs[0];
-  if (!basePair) throw new Error(`contrast: missing pairs for ${name}`);
-  const baseY = luminance(token(map, basePair.bg));
-  const endpoint = score(1, baseY) >= score(0, baseY) ? 1 : 0;
-  map[`--nx-color-${name}`] = `oklch(${endpoint} 0 0)`;
-  for (const pair of pairs) {
-    const floor = TIER_THRESHOLDS[pair.tier];
-    const value = token(map, pair.bg);
-    if (score(endpoint, luminance(value)) >= floor) continue;
-    const fill = seedOklch(value);
-    const at = (l) => formatOklch((0, import_culori5.clampChroma)({ ...fill, l }, "oklch", "p3"));
-    const readable = (l) => score(endpoint, luminance(at(l))) >= floor;
-    map[`--nx-color-${pair.bg}`] = at(bisect(fill.l, 1 - endpoint, readable));
-  }
+
+// src/lib/typography-scale.ts
+var TYPOGRAPHY_BASE_PX = 14;
+function formatPx(value) {
+  return `${Number(value.toFixed(4))}px`;
 }
-function constrainColors(map, mode, contrast) {
-  for (const [name, { kind, pairs }] of SOLVE_GROUPS)
-    if (kind === "label") constrainFamilyFills(map, name, pairs);
-  const endpoint = mode === "dark" ? 1 : 0;
-  const endpointY = luminance(`oklch(${endpoint} 0 0)`);
-  for (const [name, { kind, pairs }] of SOLVE_GROUPS) {
-    if (kind === "label") continue;
-    const constraints = constraintsFor(map, pairs, contrast, endpointY);
-    if (constraints === void 0)
-      throw new Error(`contrast: no readable ${name} in ${mode}`);
-    const solved = solveForeground(
-      token(map, name),
-      constraints,
-      endpoint,
-      keepsTextSeed(mode, kind)
-    );
-    for (const fg of new Set(pairs.map((pair) => pair.fg).concat(name)))
-      map[`--nx-color-${fg}`] = solved;
-  }
-  return map;
+var CODE_SIZE = "code";
+function typographyScale(uiPx, codePx) {
+  const scale = uiPx / TYPOGRAPHY_BASE_PX;
+  return new Map([
+    ...Object.entries(typography_default_default.size).map(
+      ([name, token2]) => [
+        `--nx-typography-size-${name}`,
+        formatPx(name === CODE_SIZE ? codePx : token2.$value.value * scale)
+      ]
+    ),
+    ...Object.entries(typography_default_default["line-height"]).map(
+      ([name, token2]) => [
+        `--nx-typography-line-height-${name}`,
+        formatPx(token2.$value.value * scale)
+      ]
+    )
+  ]);
 }
+var isCodeSize = (path) => path[0] === "size" && path[1] === CODE_SIZE;
 
 // src/lib/appearance-model.ts
 var DEFAULT_BRAND_COLOR = "#0a0a0a";
@@ -1140,8 +1174,9 @@ var DEFAULT_NXDS_APPEARANCE = {
   stroke: "normal",
   prefs: {
     uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    headingFont: null,
     codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
-    uiFontSize: 14,
+    uiFontSize: TYPOGRAPHY_BASE_PX,
     codeFontSize: 12,
     reduceMotion: false,
     pointerCursors: false,
@@ -3283,7 +3318,7 @@ function formatTypographyDeclarations(tokenPath, value, primitiveMap) {
     const css = fieldValue === "auto" ? "normal" : resolveValue(fieldValue, primitiveMap);
     declarations.push({ property, value: css });
   }
-  if (tokenPath[0] === "heading") {
+  if (tokenPath[0] === "display" || tokenPath[0] === "heading") {
     declarations.push({ property: "text-wrap", value: "balance" });
   }
   if (tokenPath[0] === "body") {
@@ -10862,6 +10897,41 @@ var shadows_default = {
 
 // tokens/styles/typography.json
 var typography_default = {
+  display: {
+    large: {
+      $type: "typography",
+      $value: {
+        fontFamily: "{family.font-heading}",
+        fontSize: "{size.5xl}",
+        fontWeight: "{weight.semibold}",
+        lineHeight: "{line-height.5xl}",
+        letterSpacing: "{letterspacing.tighter}"
+      },
+      $description: "Largest display title \u2014 hero and landing-page section titles"
+    },
+    medium: {
+      $type: "typography",
+      $value: {
+        fontFamily: "{family.font-heading}",
+        fontSize: "{size.4xl}",
+        fontWeight: "{weight.semibold}",
+        lineHeight: "{line-height.4xl}",
+        letterSpacing: "{letterspacing.tighter}"
+      },
+      $description: "Display title one step below display-large, for page sections"
+    },
+    small: {
+      $type: "typography",
+      $value: {
+        fontFamily: "{family.font-heading}",
+        fontSize: "{size.3xl}",
+        fontWeight: "{weight.semibold}",
+        lineHeight: "{line-height.3xl}",
+        letterSpacing: "{letterspacing.tighter}"
+      },
+      $description: "Smallest display title \u2014 page-section titles in narrow layouts"
+    }
+  },
   heading: {
     large: {
       $type: "typography",
@@ -10994,7 +11064,7 @@ var typography_default = {
       $type: "typography",
       $value: {
         fontFamily: "{family.font-mono}",
-        fontSize: "{size.sm}",
+        fontSize: "{size.code}",
         fontWeight: "{weight.normal}",
         lineHeight: "{line-height.sm}",
         letterSpacing: {
@@ -11007,7 +11077,7 @@ var typography_default = {
       $type: "typography",
       $value: {
         fontFamily: "{family.font-mono}",
-        fontSize: "{size.sm}",
+        fontSize: "{size.code}",
         fontWeight: "{weight.semibold}",
         lineHeight: "auto",
         letterSpacing: {
@@ -11077,11 +11147,13 @@ var PRESET_CONTROLS = {
 };
 function typographyControl(path) {
   const [group, key] = path;
+  if (isCodeSize(path)) return { kind: "pref", field: "codeFontSize" };
   if (group === "size" || group === "line-height") {
     return { kind: "pref", field: "uiFontSize" };
   }
   if (group !== "family") return null;
   if (key === "font-sans") return { kind: "pref", field: "uiFont" };
+  if (key === "font-heading") return { kind: "pref", field: "headingFont" };
   if (key === "font-mono") return { kind: "pref", field: "codeFont" };
   return null;
 }
@@ -11242,7 +11314,7 @@ function primitiveAliases(family, path) {
   }
   return [];
 }
-function primitiveEntry(lookup) {
+function primitiveEntry(lookup, scaled) {
   return ({ family, leaf }) => {
     const name = primitiveName(family, leaf.path);
     const reference = leaf.path.join(".");
@@ -11256,7 +11328,7 @@ function primitiveEntry(lookup) {
       declarations: [
         {
           property: name,
-          value: resolveValue(leaf.value, lookup, leaf.type, leaf.path)
+          value: scaled.get(name) ?? resolveValue(leaf.value, lookup, leaf.type, leaf.path)
         }
       ]
     };
@@ -11358,13 +11430,6 @@ function styleLeaves(family, file) {
     ({ leaf }) => leaf.type === family
   );
 }
-function runtimeAppearance(mode) {
-  return {
-    ...DEFAULT_NXDS_APPEARANCE,
-    prefs: { ...DEFAULT_NXDS_APPEARANCE.prefs },
-    mode
-  };
-}
 function runtimeColorAliases(name) {
   const aliases = [cssVariable(`--color-${name}`)];
   const borderName = borderColorAliasName(name);
@@ -11373,15 +11438,14 @@ function runtimeColorAliases(name) {
   }
   return aliases;
 }
-function runtimeColorTokens() {
-  const themes = RUNTIME_MODES.map((mode) => {
-    const appearance = runtimeAppearance(mode);
-    return {
-      mode,
-      appearance,
-      values: deriveThemeMode(createNxdsThemeContract(appearance), mode)
-    };
-  });
+function runtimeColorTokens(appearance) {
+  const { brandColor, surfaceTone, lightContrast, darkContrast } = appearance;
+  const colors = { brandColor, surfaceTone, lightContrast, darkContrast };
+  const themes = RUNTIME_MODES.map((mode) => ({
+    mode,
+    appearance: { ...colors, mode },
+    values: deriveThemeMode(createNxdsThemeContract(colors), mode)
+  }));
   return SEMANTIC_TOKEN_REGISTRY.map(({ name, category }) => {
     const property = `--nx-color-${name}`;
     return {
@@ -11392,7 +11456,7 @@ function runtimeColorTokens() {
       description: RUNTIME_COLOR_DESCRIPTIONS[name] ?? null,
       aliases: runtimeColorAliases(name),
       control: null,
-      variants: themes.map(({ mode, appearance, values }) => {
+      variants: themes.map(({ mode, appearance: appearance2, values }) => {
         const value = values[property];
         if (value === void 0) {
           throw new Error(`catalogue: deriveTheme emitted no ${property}`);
@@ -11401,7 +11465,7 @@ function runtimeColorTokens() {
           mode,
           preset: null,
           source: null,
-          appearance,
+          appearance: appearance2,
           authoredValue: null,
           declarations: [{ property, value }],
           references: []
@@ -11410,7 +11474,7 @@ function runtimeColorTokens() {
     };
   });
 }
-function createTokenCatalogue() {
+function createTokenCatalogue(appearance = DEFAULT_NXDS_APPEARANCE) {
   const primitives = PRIMITIVE_FAMILIES.flatMap(primitiveLeaves);
   const lookup = primitiveLookup(primitives);
   const shadowLayers = primitives.filter(({ family }) => family === "shadow");
@@ -11418,9 +11482,15 @@ function createTokenCatalogue() {
     ...authoredTokens(
       primitives.filter((leaf) => leaf.family !== "shadow"),
       lookup,
-      primitiveEntry(lookup)
+      primitiveEntry(
+        lookup,
+        typographyScale(
+          appearance.prefs.uiFontSize,
+          appearance.prefs.codeFontSize
+        )
+      )
     ),
-    ...runtimeColorTokens(),
+    ...runtimeColorTokens(appearance),
     ...authoredTokens(spacingLeaves(), lookup, spacingEntry),
     ...authoredTokens(
       fileLeaves("z-index", Z_INDEX_FILE, SINGLE_SOURCE),