@omniharmonic/openspace-theme 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2342 @@
+// src/color.ts
+var GAMUT_EPSILON = 1e-6;
+var ACHROMATIC_CHROMA = 1e-4;
+function srgbChannelToLinear(v) {
+  const abs = Math.abs(v);
+  const lin = abs <= 0.04045 ? abs / 12.92 : ((abs + 0.055) / 1.055) ** 2.4;
+  return Math.sign(v) * lin;
+}
+function linearChannelToSrgb(v) {
+  const abs = Math.abs(v);
+  const enc = abs <= 31308e-7 ? abs * 12.92 : 1.055 * abs ** (1 / 2.4) - 0.055;
+  return Math.sign(v) * enc;
+}
+function srgbToLinear({ r, g, b }) {
+  return { r: srgbChannelToLinear(r), g: srgbChannelToLinear(g), b: srgbChannelToLinear(b) };
+}
+function linearToSrgb({ r, g, b }) {
+  return { r: linearChannelToSrgb(r), g: linearChannelToSrgb(g), b: linearChannelToSrgb(b) };
+}
+function linearSrgbToOklab({ r, g, b }) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return {
+    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  };
+}
+function oklabToLinearSrgb({ l: L, a, b }) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return {
+    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  };
+}
+function normalizeHue(h) {
+  const n = h % 360;
+  return n < 0 ? n + 360 : n;
+}
+function oklabToOklch({ l, a, b }) {
+  const c2 = Math.sqrt(a * a + b * b);
+  const h = c2 < ACHROMATIC_CHROMA ? 0 : normalizeHue(Math.atan2(b, a) * 180 / Math.PI);
+  return { l, c: c2, h };
+}
+function oklchToOklab({ l, c: c2, h }) {
+  const rad = h * Math.PI / 180;
+  return { l, a: c2 * Math.cos(rad), b: c2 * Math.sin(rad) };
+}
+function srgbToOklch(rgb) {
+  return oklabToOklch(linearSrgbToOklab(srgbToLinear(rgb)));
+}
+function oklchToSrgb(color) {
+  return linearToSrgb(oklabToLinearSrgb(oklchToOklab(color)));
+}
+function inSrgbGamut(color) {
+  const { r, g, b } = oklabToLinearSrgb(oklchToOklab(color));
+  return [r, g, b].every((v) => v >= -GAMUT_EPSILON && v <= 1 + GAMUT_EPSILON);
+}
+function gamutMap(color) {
+  const l = Math.min(1, Math.max(0, color.l));
+  const base = { l, c: Math.max(0, color.c), h: normalizeHue(color.h) };
+  if (l <= 0) return { l: 0, c: 0, h: base.h };
+  if (l >= 1) return { l: 1, c: 0, h: base.h };
+  if (inSrgbGamut(base)) return base;
+  let lo = 0;
+  let hi = base.c;
+  for (let i = 0; i < 24; i++) {
+    const mid = (lo + hi) / 2;
+    if (inSrgbGamut({ ...base, c: mid })) lo = mid;
+    else hi = mid;
+  }
+  return { ...base, c: lo };
+}
+var clamp01 = (v) => Math.min(1, Math.max(0, v));
+function oklchToSrgbInGamut(color) {
+  const { r, g, b } = oklchToSrgb(gamutMap(color));
+  return { r: clamp01(r), g: clamp01(g), b: clamp01(b) };
+}
+var hex2 = (v) => Math.round(clamp01(v) * 255).toString(16).padStart(2, "0");
+function rgbToHex({ r, g, b }) {
+  return `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+}
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(hex.trim());
+  if (!m?.[1]) throw new Error(`Invalid hex color: ${hex}`);
+  let h = m[1];
+  if (h.length <= 4) h = [...h].map((ch) => ch + ch).join("");
+  const n = (i) => Number.parseInt(h.slice(i, i + 2), 16) / 255;
+  return { r: n(0), g: n(2), b: n(4) };
+}
+function oklchToHex(color) {
+  return rgbToHex(oklchToSrgbInGamut(color));
+}
+function hexToOklch(hex) {
+  return srgbToOklch(hexToRgb(hex));
+}
+function num(token, percentRef) {
+  const t = token.trim().toLowerCase();
+  if (t === "none") return 0;
+  if (t.endsWith("%")) return Number.parseFloat(t) / 100 * percentRef;
+  const v = Number.parseFloat(t);
+  if (!Number.isFinite(v)) throw new Error(`Invalid number: ${token}`);
+  return v;
+}
+function hue(token) {
+  const t = token.trim().toLowerCase();
+  if (t === "none") return 0;
+  const v = Number.parseFloat(t);
+  if (!Number.isFinite(v)) throw new Error(`Invalid hue: ${token}`);
+  if (t.endsWith("turn")) return normalizeHue(v * 360);
+  if (t.endsWith("grad")) return normalizeHue(v * 0.9);
+  if (t.endsWith("rad")) return normalizeHue(v * 180 / Math.PI);
+  return normalizeHue(v);
+}
+function args(body) {
+  const noAlpha = body.split("/")[0] ?? "";
+  const parts = noAlpha.split(/[\s,]+/).map((s) => s.trim()).filter(Boolean);
+  return parts.slice(0, 3);
+}
+var D50 = [0.3457 / 0.3585, 1, (1 - 0.3457 - 0.3585) / 0.3585];
+function labToLinearSrgb(L, a, b) {
+  const k = 24389 / 27;
+  const e = 216 / 24389;
+  const fy = (L + 16) / 116;
+  const fx = a / 500 + fy;
+  const fz = fy - b / 200;
+  const xr = fx ** 3 > e ? fx ** 3 : (116 * fx - 16) / k;
+  const yr = L > k * e ? fy ** 3 : L / k;
+  const zr = fz ** 3 > e ? fz ** 3 : (116 * fz - 16) / k;
+  const x50 = xr * D50[0];
+  const y50 = yr * D50[1];
+  const z50 = zr * D50[2];
+  const x = 0.955473421488075 * x50 - 0.02309845494876471 * y50 + 0.06325924320057072 * z50;
+  const y = -0.0283697093338637 * x50 + 1.0099953980813041 * y50 + 0.021041441191917323 * z50;
+  const z = 0.012314014864481998 * x50 - 0.020507649298898964 * y50 + 1.330365926242124 * z50;
+  return {
+    r: 3.2409699419045226 * x - 1.537383177570094 * y - 0.4986107602930034 * z,
+    g: -0.9692436362808796 * x + 1.8759675015077202 * y + 0.04155505740717559 * z,
+    b: 0.05563007969699366 * x - 0.20397695888897652 * y + 1.0569715142428786 * z
+  };
+}
+function hslToRgb(h, s, l) {
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function parseColor(input) {
+  const s = input.trim().toLowerCase();
+  if (s.startsWith("#")) return hexToOklch(s);
+  const m = /^([a-z]+)\(([^()]*)\)$/.exec(s);
+  if (!m?.[1] || m[2] === void 0) throw new Error(`Unsupported color: ${input}`);
+  const fn = m[1];
+  const parts = args(m[2]);
+  if (parts.length !== 3) throw new Error(`Expected 3 components: ${input}`);
+  const [p0, p1, p2] = parts;
+  switch (fn) {
+    case "oklch":
+      return { l: num(p0, 1), c: Math.max(0, num(p1, 0.4)), h: hue(p2) };
+    case "oklab":
+      return oklabToOklch({ l: num(p0, 1), a: num(p1, 0.4), b: num(p2, 0.4) });
+    case "rgb":
+    case "rgba":
+      return srgbToOklch({ r: num(p0, 255) / 255, g: num(p1, 255) / 255, b: num(p2, 255) / 255 });
+    case "hsl":
+    case "hsla":
+      return srgbToOklch(hslToRgb(hue(p0), num(p1, 100) / 100, num(p2, 100) / 100));
+    case "lab":
+      return oklabToOklch(
+        linearSrgbToOklab(labToLinearSrgb(num(p0, 100), num(p1, 125), num(p2, 125)))
+      );
+    case "lch": {
+      const L = num(p0, 100);
+      const C = num(p1, 150);
+      const H = hue(p2) * Math.PI / 180;
+      return oklabToOklch(linearSrgbToOklab(labToLinearSrgb(L, C * Math.cos(H), C * Math.sin(H))));
+    }
+    default:
+      throw new Error(`Unsupported color function: ${fn}()`);
+  }
+}
+function isColor(input) {
+  try {
+    parseColor(input);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var round = (v, digits) => {
+  const f = 10 ** digits;
+  const r = Math.round(v * f) / f;
+  return Object.is(r, -0) ? 0 : r;
+};
+function formatOklch({ l, c: c2, h }) {
+  const cc = round(c2, 4);
+  return `oklch(${round(l, 4)} ${cc} ${cc === 0 ? 0 : round(h, 2)})`;
+}
+function toHex(input) {
+  return oklchToHex(typeof input === "string" ? parseColor(input) : input);
+}
+function mixHue(a, b, t) {
+  const d = ((b - a) % 360 + 540) % 360 - 180;
+  return normalizeHue(a + d * t);
+}
+function deltaEOK(x, y) {
+  const a = oklchToOklab(x);
+  const b = oklchToOklab(y);
+  return Math.hypot(a.l - b.l, a.a - b.a, a.b - b.b);
+}
+
+// src/compile.ts
+import {
+  COLOR_ROLES as COLOR_ROLES3,
+  COLOR_SCALE_STEPS as COLOR_SCALE_STEPS3,
+  COLOR_THEMES as COLOR_THEMES4
+} from "@omniharmonic/openspace-schema";
+
+// src/contrast.ts
+import { COLOR_THEMES } from "@omniharmonic/openspace-schema";
+function relativeLuminance(color) {
+  const hex = typeof color === "string" ? toHexStrict(color) : oklchToHex(color);
+  const { r, g, b } = srgbToLinear(hexToRgb(hex));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function toHexStrict(color) {
+  return /^#[0-9a-f]{6}$/i.test(color) ? color.toLowerCase() : oklchToHex(parseColor(color));
+}
+var CONTRAST_MINIMUMS = {
+  standard: { body: 4.5, large: 3 },
+  high: { body: 7, large: 4.5 }
+};
+var BACKGROUNDS = ["background", "surface", "surface-raised"];
+var onAll = (fg, level) => BACKGROUNDS.map((bg) => ({ fg, bg, level }));
+var CORE_CONTRAST_PAIRS = [
+  ...onAll("text", "body"),
+  ...onAll("heading", "body"),
+  ...onAll("text-muted", "body"),
+  ...onAll("link", "body"),
+  { fg: "accent", bg: "background", level: "large" },
+  { fg: "accent", bg: "surface", level: "large" },
+  { fg: "accent", bg: "surface-raised", level: "large" },
+  { fg: "accent-text", bg: "accent", level: "body" },
+  ...onAll("focus", "large"),
+  ...onAll("success", "body"),
+  ...onAll("warning", "body"),
+  ...onAll("danger", "body")
+];
+var STATE_PAIRS = [
+  { fg: "accent-text", bg: "accent-hover", level: "body", adjust: "bg" },
+  { fg: "accent-text", bg: "accent-pressed", level: "body", adjust: "bg" },
+  { fg: "accent-hover", bg: "background", level: "large" },
+  { fg: "accent-pressed", bg: "background", level: "large" }
+];
+var CONTRAST_PAIRS = [...CORE_CONTRAST_PAIRS, ...STATE_PAIRS];
+function auditContrast(themes, options = {}) {
+  const mins = CONTRAST_MINIMUMS[options.contrast ?? "standard"];
+  const failures = [];
+  for (const theme of COLOR_THEMES) {
+    const colors = themes[theme];
+    if (!colors) continue;
+    for (const { fg, bg, level, adjust } of CONTRAST_PAIRS) {
+      const fgColor = colors[fg];
+      const bgColor = colors[bg];
+      if (fgColor === void 0 || bgColor === void 0) continue;
+      const required = mins[level];
+      const ratio = contrastRatio(fgColor, bgColor);
+      if (ratio < required) {
+        failures.push({
+          theme,
+          fg,
+          bg,
+          level,
+          fgColor,
+          bgColor,
+          ratio: Math.round(ratio * 100) / 100,
+          required,
+          suggestion: adjust === "bg" ? nearestAccessible(bgColor, fgColor, required) : nearestAccessible(fgColor, bgColor, required)
+        });
+      }
+    }
+  }
+  return failures;
+}
+var SOLVER_MARGIN = 0.03;
+function withL(color, l) {
+  return gamutMap({ ...color, l });
+}
+function solveLightness(color, against, min, direction = "either") {
+  const bg = typeof against === "string" ? parseColor(against) : against;
+  const target = min + SOLVER_MARGIN;
+  const start = gamutMap(color);
+  if (contrastRatio(start, bg) >= target) return start;
+  let best = null;
+  let bestDelta = Number.POSITIVE_INFINITY;
+  const ends = direction === "darker" ? [0] : direction === "lighter" ? [1] : [0, 1];
+  for (const end of ends) {
+    if (contrastRatio(withL(start, end), bg) < target) continue;
+    let fail = start.l;
+    let pass = end;
+    for (let i = 0; i < 24; i++) {
+      const mid = (fail + pass) / 2;
+      if (contrastRatio(withL(start, mid), bg) >= target) pass = mid;
+      else fail = mid;
+    }
+    const delta = Math.abs(pass - start.l);
+    if (delta < bestDelta) {
+      bestDelta = delta;
+      best = withL(start, pass);
+    }
+  }
+  return best;
+}
+function nearestAccessible(color, against, min = 4.5) {
+  const fg = parseColor(color);
+  const solved = solveLightness(fg, against, min);
+  if (solved) return oklchToHex(solved);
+  const dark = withL(fg, 0);
+  const light = withL(fg, 1);
+  return oklchToHex(contrastRatio(dark, against) >= contrastRatio(light, against) ? dark : light);
+}
+
+// src/pairings.ts
+var FALLBACK_STACKS = {
+  serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
+  "sans-serif": [
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    '"Segoe UI"',
+    "Roboto",
+    '"Helvetica Neue"',
+    "Arial",
+    "sans-serif"
+  ],
+  monospace: [
+    "ui-monospace",
+    "SFMono-Regular",
+    "Menlo",
+    "Consolas",
+    '"Liberation Mono"',
+    "monospace"
+  ]
+};
+var serif = (family, weights, extra = {}) => ({ family, category: "serif", weights, ...extra });
+var sans = (family, weights, extra = {}) => ({ family, category: "sans-serif", weights, ...extra });
+function pairing(p) {
+  return { bodyWeight: 400, strongWeight: 600, eyebrowTracking: "0.12em", ...p };
+}
+var TYPE_PAIRINGS = [
+  // --- the twelve launch-template pairings (doc 04 §7) ---
+  pairing({
+    id: "fraunces-hanken",
+    name: "Fraunces & Hanken Grotesk",
+    heading: serif("Fraunces", [400, 500, 600], { italic: true, opticalSize: true }),
+    body: sans("Hanken Grotesk", [400, 500, 600]),
+    headingWeight: 400,
+    headingTracking: "-0.02em",
+    mood: ["calm", "organic", "warm"],
+    template: "meadow"
+  }),
+  pairing({
+    id: "newsreader-public-sans",
+    name: "Newsreader & Public Sans",
+    heading: serif("Newsreader", [400, 500, 600], { italic: true, opticalSize: true }),
+    body: sans("Public Sans", [400, 600, 700]),
+    headingWeight: 500,
+    headingTracking: "-0.015em",
+    mood: ["trustworthy", "civic", "editorial"],
+    template: "harbor"
+  }),
+  pairing({
+    id: "instrument",
+    name: "Instrument Serif & Instrument Sans",
+    heading: serif("Instrument Serif", [400], { italic: true }),
+    body: sans("Instrument Sans", [400, 500, 600]),
+    headingWeight: 400,
+    headingTracking: "-0.01em",
+    mood: ["minimal", "gallery", "refined"],
+    template: "atelier"
+  }),
+  pairing({
+    id: "source-serif-plex",
+    name: "Source Serif 4 & IBM Plex Sans",
+    heading: serif("Source Serif 4", [400, 600, 700], { italic: true, opticalSize: true }),
+    body: sans("IBM Plex Sans", [400, 500, 600]),
+    headingWeight: 600,
+    headingTracking: "-0.015em",
+    mood: ["crisp", "editorial", "confident"],
+    template: "ledger"
+  }),
+  pairing({
+    id: "young-serif-work-sans",
+    name: "Young Serif & Work Sans",
+    heading: serif("Young Serif", [400]),
+    body: sans("Work Sans", [400, 500, 600]),
+    headingWeight: 400,
+    headingTracking: "-0.01em",
+    mood: ["warm", "appetizing", "friendly"],
+    template: "hearth"
+  }),
+  pairing({
+    id: "bricolage-geist",
+    name: "Bricolage Grotesque & Geist",
+    heading: sans("Bricolage Grotesque", [500, 600, 700], { opticalSize: true }),
+    body: sans("Geist", [400, 500, 600]),
+    headingWeight: 700,
+    headingTracking: "-0.035em",
+    mood: ["bold", "modern", "technical"],
+    template: "signal"
+  }),
+  pairing({
+    id: "literata-manrope",
+    name: "Literata & Manrope",
+    heading: serif("Literata", [400, 500, 600], { italic: true, opticalSize: true }),
+    body: sans("Manrope", [400, 500, 700]),
+    headingWeight: 500,
+    headingTracking: "-0.015em",
+    mood: ["literary", "reading", "calm"],
+    template: "field-notes"
+  }),
+  pairing({
+    id: "syne-dm-sans",
+    name: "Syne & DM Sans",
+    heading: sans("Syne", [600, 700, 800]),
+    body: sans("DM Sans", [400, 500, 700]),
+    headingWeight: 700,
+    headingTracking: "-0.02em",
+    mood: ["expressive", "nocturnal", "artsy"],
+    template: "encore"
+  }),
+  pairing({
+    id: "gloock-albert-sans",
+    name: "Gloock & Albert Sans",
+    heading: serif("Gloock", [400]),
+    body: sans("Albert Sans", [400, 500, 600]),
+    headingWeight: 400,
+    headingTracking: "-0.01em",
+    mood: ["tactile", "crafted", "classic"],
+    template: "kiln"
+  }),
+  pairing({
+    id: "spectral-epilogue",
+    name: "Spectral & Epilogue",
+    heading: serif("Spectral", [400, 500, 600], { italic: true }),
+    body: sans("Epilogue", [400, 500, 600]),
+    headingWeight: 500,
+    headingTracking: "-0.01em",
+    mood: ["grounded", "collective", "earnest"],
+    template: "commons"
+  }),
+  pairing({
+    id: "cormorant-jost",
+    name: "Cormorant Garamond & Jost",
+    heading: serif("Cormorant Garamond", [400, 500, 600], { italic: true }),
+    body: sans("Jost", [400, 500]),
+    headingWeight: 500,
+    headingTracking: "0em",
+    strongWeight: 500,
+    eyebrowTracking: "0.2em",
+    mood: ["romantic", "refined", "elegant"],
+    template: "vow"
+  }),
+  pairing({
+    id: "outfit",
+    name: "Outfit",
+    heading: sans("Outfit", [600, 700]),
+    body: sans("Outfit", [400, 500]),
+    headingWeight: 700,
+    headingTracking: "-0.025em",
+    strongWeight: 600,
+    mood: ["punchy", "mobile", "friendly"],
+    template: "link"
+  }),
+  // --- library pairings ---
+  pairing({
+    id: "playfair-source-sans",
+    name: "Playfair Display & Source Sans 3",
+    heading: serif("Playfair Display", [400, 600, 700], { italic: true }),
+    body: sans("Source Sans 3", [400, 600]),
+    headingWeight: 600,
+    headingTracking: "-0.015em",
+    mood: ["classic", "fashion", "editorial"]
+  }),
+  pairing({
+    id: "dm-serif-dm-sans",
+    name: "DM Serif Display & DM Sans",
+    heading: serif("DM Serif Display", [400], { italic: true }),
+    body: sans("DM Sans", [400, 500, 700]),
+    headingWeight: 400,
+    headingTracking: "-0.015em",
+    mood: ["confident", "warm", "modern"]
+  }),
+  pairing({
+    id: "lora-inter",
+    name: "Lora & Inter",
+    heading: serif("Lora", [500, 600, 700], { italic: true }),
+    body: sans("Inter", [400, 500, 600], { opticalSize: true }),
+    headingWeight: 600,
+    headingTracking: "-0.01em",
+    mood: ["approachable", "balanced", "versatile"]
+  }),
+  pairing({
+    id: "eb-garamond-inter",
+    name: "EB Garamond & Inter",
+    heading: serif("EB Garamond", [400, 500, 600], { italic: true }),
+    body: sans("Inter", [400, 500, 600], { opticalSize: true }),
+    headingWeight: 500,
+    headingTracking: "-0.01em",
+    mood: ["scholarly", "timeless", "quiet"]
+  }),
+  pairing({
+    id: "libre-baskerville-karla",
+    name: "Libre Baskerville & Karla",
+    heading: serif("Libre Baskerville", [400, 700], { italic: true }),
+    body: sans("Karla", [400, 500, 700]),
+    headingWeight: 400,
+    headingTracking: "-0.01em",
+    mood: ["bookish", "trustworthy", "warm"]
+  }),
+  pairing({
+    id: "space-grotesk-inter",
+    name: "Space Grotesk & Inter",
+    heading: sans("Space Grotesk", [500, 600, 700]),
+    body: sans("Inter", [400, 500, 600], { opticalSize: true }),
+    headingWeight: 600,
+    headingTracking: "-0.03em",
+    mood: ["technical", "startup", "precise"]
+  }),
+  pairing({
+    id: "sora-inter",
+    name: "Sora & Inter",
+    heading: sans("Sora", [500, 600, 700]),
+    body: sans("Inter", [400, 500, 600], { opticalSize: true }),
+    headingWeight: 600,
+    headingTracking: "-0.03em",
+    mood: ["clean", "product", "modern"]
+  }),
+  pairing({
+    id: "plus-jakarta",
+    name: "Plus Jakarta Sans",
+    heading: sans("Plus Jakarta Sans", [600, 700, 800]),
+    body: sans("Plus Jakarta Sans", [400, 500]),
+    headingWeight: 700,
+    headingTracking: "-0.025em",
+    mood: ["friendly", "product", "crisp"]
+  }),
+  pairing({
+    id: "manrope",
+    name: "Manrope",
+    heading: sans("Manrope", [600, 700, 800]),
+    body: sans("Manrope", [400, 500]),
+    headingWeight: 700,
+    headingTracking: "-0.025em",
+    mood: ["neutral", "geometric", "calm"]
+  }),
+  pairing({
+    id: "unbounded-figtree",
+    name: "Unbounded & Figtree",
+    heading: sans("Unbounded", [500, 600, 700]),
+    body: sans("Figtree", [400, 500, 600]),
+    headingWeight: 600,
+    headingTracking: "-0.02em",
+    mood: ["loud", "playful", "event"]
+  }),
+  pairing({
+    id: "bodoni-montserrat",
+    name: "Bodoni Moda & Montserrat",
+    heading: serif("Bodoni Moda", [400, 500, 600], { italic: true, opticalSize: true }),
+    body: sans("Montserrat", [400, 500, 600]),
+    headingWeight: 500,
+    headingTracking: "-0.01em",
+    mood: ["luxury", "fashion", "dramatic"]
+  }),
+  pairing({
+    id: "libre-caslon-nunito-sans",
+    name: "Libre Caslon Text & Nunito Sans",
+    heading: serif("Libre Caslon Text", [400, 700], { italic: true }),
+    body: sans("Nunito Sans", [400, 600, 700]),
+    headingWeight: 400,
+    headingTracking: "-0.01em",
+    mood: ["gentle", "heritage", "warm"]
+  }),
+  pairing({
+    id: "zilla-slab-inter",
+    name: "Zilla Slab & Inter",
+    heading: serif("Zilla Slab", [500, 600, 700]),
+    body: sans("Inter", [400, 500, 600], { opticalSize: true }),
+    headingWeight: 600,
+    headingTracking: "-0.01em",
+    mood: ["sturdy", "journalistic", "honest"]
+  }),
+  pairing({
+    id: "bitter-roboto",
+    name: "Bitter & Roboto",
+    heading: serif("Bitter", [500, 600, 700], { italic: true }),
+    body: sans("Roboto", [400, 500, 700]),
+    headingWeight: 600,
+    headingTracking: "-0.015em",
+    mood: ["practical", "clear", "service"]
+  }),
+  pairing({
+    id: "alegreya",
+    name: "Alegreya & Alegreya Sans",
+    heading: serif("Alegreya", [500, 600, 700], { italic: true }),
+    body: sans("Alegreya Sans", [400, 500, 700]),
+    headingWeight: 600,
+    headingTracking: "-0.01em",
+    mood: ["humanist", "literary", "warm"]
+  }),
+  pairing({
+    id: "josefin-crimson",
+    name: "Josefin Sans & Crimson Pro",
+    heading: sans("Josefin Sans", [400, 600, 700]),
+    body: serif("Crimson Pro", [400, 500, 600], { italic: true }),
+    headingWeight: 600,
+    headingTracking: "0em",
+    eyebrowTracking: "0.18em",
+    mood: ["vintage", "elegant", "art-deco"]
+  }),
+  pairing({
+    id: "merriweather-open-sans",
+    name: "Merriweather & Open Sans",
+    heading: serif("Merriweather", [400, 700], { italic: true }),
+    body: sans("Open Sans", [400, 600, 700]),
+    headingWeight: 700,
+    headingTracking: "-0.01em",
+    mood: ["readable", "dependable", "community"]
+  }),
+  pairing({
+    id: "plex-mono-plex-sans",
+    name: "IBM Plex Mono & IBM Plex Sans",
+    heading: { family: "IBM Plex Mono", category: "monospace", weights: [500, 600] },
+    body: sans("IBM Plex Sans", [400, 500, 600]),
+    headingWeight: 600,
+    headingTracking: "-0.02em",
+    mood: ["developer", "technical", "structured"]
+  }),
+  pairing({
+    id: "crimson-figtree",
+    name: "Crimson Pro & Figtree",
+    heading: serif("Crimson Pro", [500, 600, 700], { italic: true }),
+    body: sans("Figtree", [400, 500, 600]),
+    headingWeight: 600,
+    headingTracking: "-0.01em",
+    mood: ["soft", "personal", "story"]
+  }),
+  pairing({
+    id: "abril-lato",
+    name: "Abril Fatface & Lato",
+    heading: serif("Abril Fatface", [400]),
+    body: sans("Lato", [400, 700]),
+    headingWeight: 400,
+    headingTracking: "-0.01em",
+    strongWeight: 700,
+    mood: ["poster", "bold", "retro"]
+  }),
+  pairing({
+    id: "archivo",
+    name: "Archivo",
+    heading: sans("Archivo", [600, 700, 800]),
+    body: sans("Archivo", [400, 500]),
+    headingWeight: 700,
+    headingTracking: "-0.03em",
+    mood: ["industrial", "grotesque", "direct"]
+  })
+];
+var DEFAULT_PAIRING_ID = "fraunces-hanken";
+var BY_ID = new Map(TYPE_PAIRINGS.map((p) => [p.id, p]));
+function getPairing(id) {
+  return BY_ID.get(id);
+}
+function fontsourceId(spec) {
+  return spec.fontsourceId ?? spec.family.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+var quoteFamily = (family) => /^[a-z-]+$/i.test(family) ? family : `"${family}"`;
+function fontStack(spec) {
+  return [`"${spec.family}"`, ...FALLBACK_STACKS[spec.category]].map((f) => f.startsWith('"') ? f : quoteFamily(f)).join(", ");
+}
+function pairingFamilies(p) {
+  const merged = /* @__PURE__ */ new Map();
+  for (const spec of [p.heading, p.body]) {
+    const prev = merged.get(spec.family);
+    if (!prev) {
+      merged.set(spec.family, { ...spec, weights: [...spec.weights] });
+      continue;
+    }
+    prev.weights = [.../* @__PURE__ */ new Set([...prev.weights, ...spec.weights])].sort((a, b) => a - b);
+    prev.italic = prev.italic || spec.italic;
+  }
+  return [...merged.values()];
+}
+function googleFontsUrl(p, display = "swap") {
+  const families = pairingFamilies(p).map((spec) => {
+    const name2 = spec.family.replace(/ /g, "+");
+    const weights = [...spec.weights].sort((a, b) => a - b);
+    if (spec.italic) {
+      const tuples = [...weights.map((w) => `0,${w}`), ...weights.map((w) => `1,${w}`)];
+      return `family=${name2}:ital,wght@${tuples.join(";")}`;
+    }
+    return `family=${name2}:wght@${weights.join(";")}`;
+  });
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=${display}`;
+}
+function fontsourcePackages(p) {
+  return pairingFamilies(p).map((spec) => `@fontsource/${fontsourceId(spec)}`);
+}
+function fontsourceCss(p, options = {}) {
+  const out = [];
+  for (const spec of pairingFamilies(p)) {
+    const pkg = `@fontsource/${fontsourceId(spec)}`;
+    const base = options.cdn ? `https://cdn.jsdelivr.net/npm/${pkg}@5` : pkg;
+    for (const w of spec.weights) {
+      out.push(`${base}/${w}.css`);
+      if (spec.italic) out.push(`${base}/${w}-italic.css`);
+    }
+  }
+  return out;
+}
+
+// src/custom-fonts.ts
+var FORMAT = { woff2: "woff2", ttf: "truetype", otf: "opentype" };
+var CATEGORY_FALLBACK = {
+  serif: FALLBACK_STACKS.serif,
+  "sans-serif": FALLBACK_STACKS["sans-serif"],
+  monospace: FALLBACK_STACKS.monospace,
+  display: FALLBACK_STACKS["sans-serif"],
+  handwriting: ["cursive", ...FALLBACK_STACKS.serif]
+};
+var cssString = (s) => `"${s.replace(/["\\\n\r]/g, "")}"`;
+function customFontStack(font) {
+  return [cssString(font.family), ...CATEGORY_FALLBACK[font.category]].join(", ");
+}
+function chosenCustomFont(styles, family) {
+  if (!family) return void 0;
+  const key = family.toLowerCase();
+  return styles.fonts?.find((f) => f.family.toLowerCase() === key);
+}
+function nearestWeight(font, wanted) {
+  let best = font.files[0]?.weight ?? wanted;
+  for (const f of font.files) {
+    const d = Math.abs(f.weight - wanted);
+    const bd = Math.abs(best - wanted);
+    if (d < bd || d === bd && f.weight > best) best = f.weight;
+  }
+  return best;
+}
+function customFontFaces(styles, url, opts = {}) {
+  const used = new Set(
+    [styles.choices.headingFont, styles.choices.bodyFont].filter((x) => !!x).map((x) => x.toLowerCase())
+  );
+  const rules = [];
+  for (const font of styles.fonts ?? []) {
+    if (!opts.all && !used.has(font.family.toLowerCase())) continue;
+    for (const file of font.files) {
+      const ext = file.src.split(".").pop()?.toLowerCase() ?? "";
+      const format = FORMAT[ext];
+      if (!format) continue;
+      rules.push(
+        `@font-face{font-family:${cssString(font.family)};src:url(${cssString(url(file.src))}) format("${format}");font-weight:${file.weight};font-style:${file.style};font-display:swap}`
+      );
+    }
+  }
+  return rules.join("\n");
+}
+function customFontPreloads(styles, weights) {
+  const out = [];
+  for (const [family, weight] of [
+    [styles.choices.headingFont, weights.heading],
+    [styles.choices.bodyFont, weights.body]
+  ]) {
+    const font = chosenCustomFont(styles, family);
+    if (!font) continue;
+    const w = nearestWeight(font, weight);
+    const file = font.files.find(
+      (f) => f.weight === w && f.style === "normal" && f.src.endsWith(".woff2")
+    );
+    if (file && !out.includes(file.src)) out.push(file.src);
+  }
+  return out;
+}
+
+// src/type-scale.ts
+var TYPE_PRESET_NAMES = [
+  "display",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "lead",
+  "body",
+  "small",
+  "eyebrow",
+  "button",
+  "nav"
+];
+var FLUID_TYPE = {
+  minViewport: 360,
+  maxViewport: 1440,
+  /** Body size (px) at the min / max viewport. */
+  minBase: 16,
+  maxBase: 18,
+  minRatio: 1.2,
+  maxRatio: 1.333
+};
+var PRESET_STEP = {
+  display: 5.5,
+  h1: 4,
+  h2: 3,
+  h3: 2,
+  h4: 1,
+  lead: 0.5,
+  body: 0,
+  small: -1,
+  eyebrow: -1,
+  button: -0.5,
+  nav: -0.5
+};
+var LINE_HEIGHT = {
+  display: 1.05,
+  h1: 1.1,
+  h2: 1.15,
+  h3: 1.2,
+  h4: 1.3,
+  lead: 1.5,
+  body: 1.6,
+  small: 1.5,
+  eyebrow: 1.3,
+  button: 1.2,
+  nav: 1.3
+};
+var MIN_FONT_SIZE_PX = 14;
+var HEADINGS = /* @__PURE__ */ new Set(["display", "h1", "h2", "h3", "h4"]);
+var LARGE_HEADINGS = /* @__PURE__ */ new Set(["display", "h1", "h2"]);
+var r4 = (v) => {
+  const r = Math.round(v * 1e4) / 1e4;
+  return Object.is(r, -0) ? 0 : r;
+};
+function fluidClamp(minPx, maxPx, minViewport = FLUID_TYPE.minViewport, maxViewport = FLUID_TYPE.maxViewport) {
+  if (Math.abs(maxPx - minPx) < 0.01) return `${r4(minPx / 16)}rem`;
+  const slope = (maxPx - minPx) / (maxViewport - minViewport);
+  const intercept = minPx - slope * minViewport;
+  const lo = Math.min(minPx, maxPx);
+  const hi = Math.max(minPx, maxPx);
+  return `clamp(${r4(lo / 16)}rem, ${r4(intercept / 16)}rem + ${r4(slope * 100)}vw, ${r4(hi / 16)}rem)`;
+}
+function stepSizes(step) {
+  return {
+    min: FLUID_TYPE.minBase * FLUID_TYPE.minRatio ** step,
+    max: FLUID_TYPE.maxBase * FLUID_TYPE.maxRatio ** step
+  };
+}
+function halfTracking(value) {
+  const m = /^(-?\d*\.?\d+)em$/.exec(value.trim());
+  return m?.[1] ? `${r4(Number.parseFloat(m[1]) / 2)}em` : value;
+}
+function typeScale(p) {
+  const out = {};
+  for (const name2 of TYPE_PRESET_NAMES) {
+    const sizes = stepSizes(PRESET_STEP[name2]);
+    const min = Math.max(MIN_FONT_SIZE_PX, sizes.min);
+    const max = Math.max(MIN_FONT_SIZE_PX, sizes.max);
+    const heading = HEADINGS.has(name2);
+    let letterSpacing = "0em";
+    if (LARGE_HEADINGS.has(name2)) letterSpacing = p.headingTracking;
+    else if (heading) letterSpacing = halfTracking(p.headingTracking);
+    else if (name2 === "eyebrow") letterSpacing = p.eyebrowTracking;
+    else if (name2 === "button" || name2 === "nav") letterSpacing = "0.01em";
+    let weight = "var(--os-font-weight-body)";
+    if (heading) weight = "var(--os-font-weight-heading)";
+    else if (name2 === "eyebrow" || name2 === "button" || name2 === "nav")
+      weight = "var(--os-font-weight-strong)";
+    out[name2] = {
+      "font-family": heading ? "var(--os-font-heading)" : "var(--os-font-body)",
+      "font-size": fluidClamp(min, max),
+      "line-height": String(LINE_HEIGHT[name2]),
+      "letter-spacing": letterSpacing,
+      "font-weight": weight,
+      "text-transform": name2 === "eyebrow" ? "uppercase" : "none"
+    };
+  }
+  return out;
+}
+function fontTokens(p) {
+  return {
+    heading: fontStack(p.heading),
+    body: fontStack(p.body),
+    "weight-heading": String(p.headingWeight),
+    "weight-body": String(p.bodyWeight),
+    "weight-strong": String(p.strongWeight)
+  };
+}
+
+// src/layout.ts
+var rem = (px) => px === 0 ? "0" : `${Math.round(px / 16 * 1e4) / 1e4}rem`;
+var SPACE_SCALES = {
+  compact: { "3xs": 4, "2xs": 8, xs: 12, sm: 16, md: 20, lg: 24, xl: 32, "2xl": 48, "3xl": 64 },
+  comfortable: {
+    "3xs": 4,
+    "2xs": 8,
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+    "2xl": 64,
+    "3xl": 96
+  },
+  airy: { "3xs": 4, "2xs": 8, xs: 16, sm: 24, md: 32, lg: 48, xl: 64, "2xl": 96, "3xl": 128 }
+};
+var SECTION_RHYTHM = {
+  compact: { padY: [48, 80], gap: [16, 24], gutter: [20, 32] },
+  comfortable: { padY: [64, 120], gap: [24, 32], gutter: [24, 40] },
+  airy: { padY: [88, 168], gap: [32, 48], gutter: [24, 48] }
+};
+function spaceTokens(density) {
+  const out = { none: "0" };
+  for (const [step, px] of Object.entries(SPACE_SCALES[density])) out[step] = rem(px);
+  return out;
+}
+function sectionTokens(density) {
+  const r = SECTION_RHYTHM[density];
+  return {
+    "pad-y": fluidClamp(...r.padY),
+    "block-gap": fluidClamp(...r.gap),
+    gutter: fluidClamp(...r.gutter)
+  };
+}
+var WIDTH_TOKENS = { narrow: "720px", content: "1280px", wide: "1440px" };
+var RADIUS_SCALES = {
+  sharp: { none: 0, sm: 0, md: 0, lg: 0, xl: 0, button: 0, card: 0, input: 0, image: 0 },
+  soft: { none: 0, sm: 4, md: 8, lg: 12, xl: 20, button: 8, card: 12, input: 6, image: 8 },
+  round: { none: 0, sm: 8, md: 14, lg: 22, xl: 32, button: 14, card: 22, input: 12, image: 22 }
+};
+function radiusTokens(shape) {
+  const out = {};
+  for (const [name2, px] of Object.entries(RADIUS_SCALES[shape]))
+    out[name2] = px === 0 ? "0" : `${px}px`;
+  out.full = "9999px";
+  return out;
+}
+var SHADOW_VALUES = {
+  none: "none",
+  sm: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08)",
+  md: "0 2px 4px rgb(0 0 0 / 0.05), 0 6px 16px rgb(0 0 0 / 0.08)",
+  lg: "0 4px 8px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.12)"
+};
+var BUTTON_ROLES = ["primary", "secondary", "tertiary"];
+var BUTTON_PROPS = [
+  "bg",
+  "color",
+  "border-color",
+  "border-width",
+  "radius",
+  "padding-x",
+  "padding-y",
+  "text-decoration",
+  "icon",
+  "bg-hover",
+  "color-hover",
+  "border-color-hover",
+  "bg-active",
+  "color-active",
+  "border-color-active"
+];
+var BUTTON_SYSTEMS = {
+  solid: {
+    primary: { kind: "solid", pill: false, tone: "accent" },
+    secondary: { kind: "outline", pill: false, tone: "text" },
+    tertiary: { kind: "underline", pill: false, tone: "text" }
+  },
+  outline: {
+    primary: { kind: "outline", pill: false, tone: "accent" },
+    secondary: { kind: "outline", pill: false, tone: "text" },
+    tertiary: { kind: "underline", pill: false, tone: "text" }
+  },
+  underline: {
+    primary: { kind: "underline", pill: false, tone: "accent" },
+    secondary: { kind: "underline", pill: false, tone: "text" },
+    tertiary: { kind: "text-arrow", pill: false, tone: "text" }
+  },
+  "pill-solid": {
+    primary: { kind: "solid", pill: true, tone: "accent" },
+    secondary: { kind: "outline", pill: true, tone: "text" },
+    tertiary: { kind: "underline", pill: false, tone: "text" }
+  },
+  "pill-outline": {
+    primary: { kind: "outline", pill: true, tone: "accent" },
+    secondary: { kind: "outline", pill: true, tone: "text" },
+    tertiary: { kind: "underline", pill: false, tone: "text" }
+  },
+  "text-arrow": {
+    primary: { kind: "text-arrow", pill: false, tone: "accent" },
+    secondary: { kind: "text-arrow", pill: false, tone: "text" },
+    tertiary: { kind: "underline", pill: false, tone: "text" }
+  }
+};
+var c = (role) => `var(--os-color-${role})`;
+function variantTokens(v) {
+  const ink = v.tone === "accent" ? c("link") : c("text");
+  const radius = v.pill ? "var(--os-radius-full)" : "var(--os-radius-button)";
+  const padded = { "padding-x": "var(--os-space-lg)", "padding-y": "var(--os-space-xs)" };
+  const bare = { "padding-x": "0", "padding-y": "var(--os-space-3xs)" };
+  switch (v.kind) {
+    case "solid": {
+      const accent = v.tone === "accent";
+      const fill = accent ? c("accent") : c("text");
+      const label = accent ? c("accent-text") : c("background");
+      const hover = accent ? c("accent-hover") : c("heading");
+      const active = accent ? c("accent-pressed") : c("heading");
+      return {
+        bg: fill,
+        color: label,
+        "border-color": fill,
+        "border-width": "1px",
+        radius,
+        ...padded,
+        "text-decoration": "none",
+        icon: "none",
+        "bg-hover": hover,
+        "color-hover": label,
+        "border-color-hover": hover,
+        "bg-active": active,
+        "color-active": label,
+        "border-color-active": active
+      };
+    }
+    case "outline": {
+      const line = v.tone === "accent" ? c("accent") : c("text");
+      const fillHover = v.tone === "accent" ? c("accent") : c("text");
+      const labelHover = v.tone === "accent" ? c("accent-text") : c("background");
+      return {
+        bg: "transparent",
+        color: ink,
+        "border-color": line,
+        "border-width": "1.5px",
+        radius,
+        ...padded,
+        "text-decoration": "none",
+        icon: "none",
+        "bg-hover": fillHover,
+        "color-hover": labelHover,
+        "border-color-hover": fillHover,
+        "bg-active": v.tone === "accent" ? c("accent-pressed") : c("heading"),
+        "color-active": labelHover,
+        "border-color-active": v.tone === "accent" ? c("accent-pressed") : c("heading")
+      };
+    }
+    case "underline":
+      return {
+        bg: "transparent",
+        color: ink,
+        "border-color": "transparent",
+        "border-width": "0",
+        radius: "0",
+        ...bare,
+        "text-decoration": "underline",
+        icon: "none",
+        "bg-hover": "transparent",
+        "color-hover": c("heading"),
+        "border-color-hover": "transparent",
+        "bg-active": "transparent",
+        "color-active": c("heading"),
+        "border-color-active": "transparent"
+      };
+    case "text-arrow":
+      return {
+        bg: "transparent",
+        color: ink,
+        "border-color": "transparent",
+        "border-width": "0",
+        radius: "0",
+        ...bare,
+        "text-decoration": "none",
+        icon: '"\u2192"',
+        "bg-hover": "transparent",
+        "color-hover": c("heading"),
+        "border-color-hover": "transparent",
+        "bg-active": "transparent",
+        "color-active": c("heading"),
+        "border-color-active": "transparent"
+      };
+  }
+}
+function buttonTokens(style) {
+  const sys = BUTTON_SYSTEMS[style];
+  return {
+    primary: variantTokens(sys.primary),
+    secondary: variantTokens(sys.secondary),
+    tertiary: variantTokens(sys.tertiary)
+  };
+}
+var MOTION_PROPS = [
+  "enabled",
+  "duration-fast",
+  "duration-base",
+  "duration-slow",
+  "ease",
+  "reveal-distance",
+  "reveal-duration",
+  "stagger",
+  "hover-scale",
+  "parallax"
+];
+var MOTION_VALUES = {
+  none: {
+    enabled: "0",
+    "duration-fast": "0ms",
+    "duration-base": "0ms",
+    "duration-slow": "0ms",
+    ease: "linear",
+    "reveal-distance": "0px",
+    "reveal-duration": "0ms",
+    stagger: "0ms",
+    "hover-scale": "1",
+    parallax: "0"
+  },
+  subtle: {
+    enabled: "1",
+    "duration-fast": "150ms",
+    "duration-base": "250ms",
+    "duration-slow": "400ms",
+    ease: "cubic-bezier(0.2, 0, 0, 1)",
+    "reveal-distance": "12px",
+    "reveal-duration": "600ms",
+    stagger: "60ms",
+    "hover-scale": "1.02",
+    parallax: "0"
+  },
+  expressive: {
+    enabled: "1",
+    "duration-fast": "200ms",
+    "duration-base": "350ms",
+    "duration-slow": "600ms",
+    ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+    "reveal-distance": "32px",
+    "reveal-duration": "900ms",
+    stagger: "110ms",
+    "hover-scale": "1.06",
+    parallax: "0.2"
+  }
+};
+var IMAGE_PROPS = [
+  "radius",
+  "clip-path",
+  "aspect-ratio",
+  "filter",
+  "blend",
+  "backdrop",
+  "overlay",
+  "overlay-blend",
+  "overlay-opacity",
+  "frame-padding",
+  "frame-color",
+  "frame-border"
+];
+var GRAIN_SVG = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+var IMAGE_BASE = {
+  radius: "0",
+  "clip-path": "none",
+  "aspect-ratio": "auto",
+  filter: "none",
+  blend: "normal",
+  backdrop: "transparent",
+  overlay: "none",
+  "overlay-blend": "normal",
+  "overlay-opacity": "0",
+  "frame-padding": "0",
+  "frame-color": "transparent",
+  "frame-border": "0 solid transparent"
+};
+var IMAGE_TREATMENT_VALUES = {
+  none: IMAGE_BASE,
+  rounded: { ...IMAGE_BASE, radius: "max(var(--os-radius-lg), 0.75rem)" },
+  arch: { ...IMAGE_BASE, radius: "9999px 9999px 0 0" },
+  circle: { ...IMAGE_BASE, radius: "50%", "aspect-ratio": "1" },
+  blob: { ...IMAGE_BASE, radius: "42% 58% 63% 37% / 41% 44% 56% 59%" },
+  duotone: {
+    ...IMAGE_BASE,
+    radius: "var(--os-radius-image)",
+    filter: "grayscale(1) contrast(1.1)",
+    blend: "multiply",
+    backdrop: "var(--os-color-accent-200)",
+    overlay: "linear-gradient(var(--os-color-accent-900), var(--os-color-accent-900))",
+    "overlay-blend": "lighten",
+    "overlay-opacity": "1"
+  },
+  grain: {
+    ...IMAGE_BASE,
+    radius: "var(--os-radius-image)",
+    overlay: GRAIN_SVG,
+    "overlay-blend": "overlay",
+    "overlay-opacity": "0.22"
+  },
+  frame: {
+    ...IMAGE_BASE,
+    radius: "var(--os-radius-sm)",
+    "frame-padding": "var(--os-space-xs)",
+    "frame-color": "var(--os-color-surface-raised)",
+    "frame-border": "1px solid var(--os-color-border)"
+  }
+};
+
+// src/vars.ts
+import {
+  COLOR_ROLES,
+  COLOR_SCALE_STEPS,
+  COLOR_THEMES as COLOR_THEMES2,
+  RADIUS_TOKENS,
+  SHADOW_TOKENS,
+  SPACE_TOKENS
+} from "@omniharmonic/openspace-schema";
+
+// src/types.ts
+var STATE_ROLES = ["accent-hover", "accent-pressed"];
+
+// src/vars.ts
+var VAR_PREFIX = "--os-";
+function varName(...path) {
+  return VAR_PREFIX + path.map(
+    (seg) => String(seg).replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()
+  ).join("-");
+}
+var cssVar = (...path) => `var(${varName(...path)})`;
+var colorVar = (token) => varName("color", token);
+var themeClass = (theme) => `os-theme-${theme}`;
+var imageTreatmentClass = (treatment) => `os-image-${treatment}`;
+var SPACE_STEPS = SPACE_TOKENS;
+var RADIUS_NAMES = [...RADIUS_TOKENS, "button", "card", "input", "image"];
+var SHADOW_NAMES = SHADOW_TOKENS;
+var TYPE_PROPS = [
+  "font-family",
+  "font-size",
+  "line-height",
+  "letter-spacing",
+  "font-weight",
+  "text-transform"
+];
+var record = (keys, fn) => Object.fromEntries(keys.map((k) => [k, fn(k)]));
+var TOKEN_VARS = {
+  /** Semantic roles plus `accent-hover` / `accent-pressed` (theme-scoped, contrast-solved). */
+  color: record([...COLOR_ROLES, ...STATE_ROLES], (r) => varName("color", r)),
+  /** Accent scale `--os-color-accent-50` … `-950`. */
+  accent: record(COLOR_SCALE_STEPS, (s) => varName("color", "accent", s)),
+  /** Neutral scale `--os-color-neutral-50` … `-950`. */
+  neutral: record(COLOR_SCALE_STEPS, (s) => varName("color", "neutral", s)),
+  /** The (gamut-mapped) brand color as chosen. */
+  brand: varName("color", "brand"),
+  font: {
+    heading: varName("font", "heading"),
+    body: varName("font", "body"),
+    weightHeading: varName("font", "weight", "heading"),
+    weightBody: varName("font", "weight", "body"),
+    weightStrong: varName("font", "weight", "strong")
+  },
+  /** Typography presets: `--os-type-<preset>-<css-property>`. */
+  type: record(
+    TYPE_PRESET_NAMES,
+    (preset) => record(TYPE_PROPS, (prop) => varName("type", preset, prop))
+  ),
+  /** Max line length for running text (~70 characters). */
+  measure: varName("measure"),
+  space: record(SPACE_STEPS, (s) => varName("space", s)),
+  section: {
+    padY: varName("section", "pad-y"),
+    blockGap: varName("section", "block-gap"),
+    gutter: varName("section", "gutter")
+  },
+  width: {
+    narrow: varName("width", "narrow"),
+    content: varName("width", "content"),
+    wide: varName("width", "wide")
+  },
+  radius: record(RADIUS_NAMES, (r) => varName("radius", r)),
+  shadow: record(SHADOW_NAMES, (s) => varName("shadow", s)),
+  /** Buttons: `--os-button-<primary|secondary|tertiary>-<prop>`. */
+  button: record(
+    BUTTON_ROLES,
+    (role) => record(BUTTON_PROPS, (prop) => varName("button", role, prop))
+  ),
+  motion: record(MOTION_PROPS, (p) => varName("motion", p)),
+  image: record(IMAGE_PROPS, (p) => varName("image", p))
+};
+function allTokenVars() {
+  const out = [];
+  const walk = (v) => {
+    if (typeof v === "string") out.push(v);
+    else if (v && typeof v === "object") for (const x of Object.values(v)) walk(x);
+  };
+  walk(TOKEN_VARS);
+  return out;
+}
+var THEME_CLASSES = COLOR_THEMES2.map(themeClass);
+
+// src/overrides.ts
+var isToken = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && "$value" in v;
+function flattenDtcg(group) {
+  const out = [];
+  const walk = (node, path, inherited) => {
+    const groupType = typeof node.$type === "string" ? node.$type : inherited;
+    for (const key of Object.keys(node).sort()) {
+      if (key.startsWith("$")) continue;
+      const child = node[key];
+      if (isToken(child)) {
+        out.push({ path: [...path, key], token: child, type: child.$type ?? groupType });
+      } else if (typeof child === "object" && child !== null) {
+        walk(child, [...path, key], groupType);
+      }
+    }
+  };
+  if (group) walk(group, [], void 0);
+  return out;
+}
+var ALIAS_RE = /\{([^{}]+)\}/g;
+var SOLE_ALIAS_RE = /^\{([^{}]+)\}$/;
+function resolveAliases(value) {
+  return value.replace(ALIAS_RE, (_, ref) => cssVar(...ref.split(".")));
+}
+var UNSAFE_RE = /[;{}<>\\]|\/\*|\*\/|url\s*\(|expression\s*\(|@import|!important|javascript:/i;
+function isSafeCssValue(value) {
+  return value.trim().length > 0 && !UNSAFE_RE.test(value);
+}
+var UNIT_RE = /^(px|rem|em|%|vw|vh|svh|dvh|ch|ex|ms|s|deg|fr)$/;
+var quoteFamily2 = (f) => /^[a-z-]+$/i.test(f) || f.startsWith('"') ? f : `"${f.replace(/"/g, "")}"`;
+function shadowLayer(v) {
+  if (typeof v !== "object" || v === null || Array.isArray(v)) return null;
+  const parts = ["offsetX", "offsetY", "blur", "spread"].map((k) => {
+    const p = v[k];
+    return p === void 0 ? "0" : scalar(p, "dimension");
+  });
+  const color = v.color;
+  if (parts.some((p) => p === null) || typeof color !== "string") return null;
+  const layer = `${parts.join(" ")} ${resolveAliases(color)}`;
+  return v.inset === true ? `inset ${layer}` : layer;
+}
+function scalar(v, type) {
+  if (typeof v === "string") return resolveAliases(v.trim());
+  if (typeof v === "number") {
+    if (!Number.isFinite(v)) return null;
+    if (type === "dimension") return v === 0 ? "0" : `${v}px`;
+    if (type === "duration") return `${v}ms`;
+    return String(v);
+  }
+  if (typeof v === "object" && v !== null && !Array.isArray(v)) {
+    const { value, unit } = v;
+    if (typeof value === "number" && typeof unit === "string" && UNIT_RE.test(unit)) {
+      return `${value}${unit}`;
+    }
+  }
+  return null;
+}
+function dtcgToCss(value, type) {
+  let out = null;
+  if (Array.isArray(value)) {
+    if (type === "cubicBezier" && value.length === 4 && value.every((n) => typeof n === "number")) {
+      out = `cubic-bezier(${value.join(", ")})`;
+    } else if (type === "fontFamily" || value.every((x) => typeof x === "string")) {
+      out = value.map((f) => typeof f === "string" ? quoteFamily2(f) : "").join(", ");
+    } else if (type === "shadow") {
+      const layers = value.map(shadowLayer);
+      out = layers.every((l) => l !== null) ? layers.join(", ") : null;
+    }
+  } else if (type === "shadow") {
+    out = shadowLayer(value);
+  } else if (type === "fontFamily" && typeof value === "string") {
+    out = value.includes(",") ? value : quoteFamily2(value);
+  } else {
+    out = scalar(value, type);
+  }
+  if (out === null || !isSafeCssValue(out)) return null;
+  if (type === "color" && !out.startsWith("var(") && !isColor(out)) return null;
+  return out;
+}
+
+// src/themes.ts
+import { COLOR_ROLES as COLOR_ROLES2, COLOR_THEMES as COLOR_THEMES3 } from "@omniharmonic/openspace-schema";
+
+// src/scales.ts
+import { COLOR_SCALE_STEPS as COLOR_SCALE_STEPS2 } from "@omniharmonic/openspace-schema";
+var ACCENT_LIGHTNESS = {
+  50: 0.975,
+  100: 0.94,
+  200: 0.88,
+  300: 0.8,
+  400: 0.71,
+  500: 0.625,
+  600: 0.545,
+  700: 0.465,
+  800: 0.385,
+  900: 0.305,
+  950: 0.235
+};
+var ACCENT_CHROMA = {
+  50: 0.14,
+  100: 0.28,
+  200: 0.5,
+  300: 0.74,
+  400: 0.92,
+  500: 1,
+  600: 1,
+  700: 0.92,
+  800: 0.8,
+  900: 0.66,
+  950: 0.52
+};
+var NEUTRAL_LIGHTNESS = {
+  50: 0.985,
+  100: 0.962,
+  200: 0.922,
+  300: 0.86,
+  400: 0.72,
+  500: 0.6,
+  600: 0.5,
+  700: 0.415,
+  800: 0.325,
+  900: 0.245,
+  950: 0.185
+};
+var NEUTRAL_CHROMA = {
+  50: 0.45,
+  100: 0.55,
+  200: 0.65,
+  300: 0.75,
+  400: 0.85,
+  500: 0.9,
+  600: 0.95,
+  700: 1,
+  800: 1,
+  900: 1,
+  950: 1
+};
+var TINT_HUE = { warm: 70, cool: 250 };
+var toOklch = (c2) => typeof c2 === "string" ? parseColor(c2) : c2;
+function buildScale(fn) {
+  const out = {};
+  for (const step of COLOR_SCALE_STEPS2) out[step] = gamutMap(fn(step));
+  return out;
+}
+function accentScale(brand) {
+  const b = gamutMap(toOklch(brand));
+  return buildScale((step) => ({
+    l: ACCENT_LIGHTNESS[step],
+    c: b.c * ACCENT_CHROMA[step],
+    h: b.h
+  }));
+}
+function neutralScale(brand, tint) {
+  if (tint === "pure") return buildScale((step) => ({ l: NEUTRAL_LIGHTNESS[step], c: 0, h: 0 }));
+  const b = gamutMap(toOklch(brand));
+  const target = TINT_HUE[tint];
+  const h = b.c < 0.02 ? target : mixHue(target, b.h, 0.35);
+  const base = Math.min(0.018, Math.max(8e-3, b.c * 0.12));
+  return buildScale((step) => ({ l: NEUTRAL_LIGHTNESS[step], c: base * NEUTRAL_CHROMA[step], h }));
+}
+function nearestStep(color) {
+  const { l } = toOklch(color);
+  let best = 500;
+  for (const step of COLOR_SCALE_STEPS2) {
+    if (Math.abs(ACCENT_LIGHTNESS[step] - l) < Math.abs(ACCENT_LIGHTNESS[best] - l)) best = step;
+  }
+  return best;
+}
+
+// src/themes.ts
+function buildPalette(brand, neutral) {
+  const b = gamutMap(typeof brand === "string" ? parseColor(brand) : brand);
+  return { brand: b, accent: accentScale(b), neutral: neutralScale(b, neutral) };
+}
+var WHITE = { l: 1, c: 0, h: 0 };
+var BLACK = { l: 0, c: 0, h: 0 };
+var STATUS_HUE = { success: 150, warning: 70, danger: 27 };
+var status = (l, c2 = 0.14) => ({
+  success: { l, c: c2, h: STATUS_HUE.success },
+  warning: { l, c: c2, h: STATUS_HUE.warning },
+  danger: { l, c: c2 + 0.04, h: STATUS_HUE.danger }
+});
+function bestOn(bg, candidates) {
+  let best = candidates[0];
+  for (const c2 of candidates) if (contrastRatio(c2, bg) > contrastRatio(best, bg)) best = c2;
+  return best;
+}
+function onColor(bg, palette) {
+  return bestOn(bg, [WHITE, palette.neutral[950]]);
+}
+var shift = (c2, dl) => gamutMap({ ...c2, l: c2.l + dl });
+function themeRoles(palette) {
+  const { accent: a, neutral: n, brand } = palette;
+  const onAccent = (bg) => onColor(bg, palette);
+  const light = {
+    background: n[50],
+    surface: n[100],
+    "surface-raised": WHITE,
+    text: n[900],
+    "text-muted": n[600],
+    heading: n[950],
+    accent: brand,
+    "accent-text": onAccent(brand),
+    border: n[200],
+    focus: a[600],
+    link: a[700],
+    ...status(0.5)
+  };
+  const lightAccent = {
+    background: a[50],
+    surface: a[100],
+    "surface-raised": n[50],
+    text: n[900],
+    "text-muted": n[700],
+    heading: n[950],
+    accent: a[600],
+    "accent-text": onAccent(a[600]),
+    border: a[200],
+    focus: a[700],
+    link: a[700],
+    ...status(0.48)
+  };
+  const dark = {
+    background: n[950],
+    surface: n[900],
+    "surface-raised": n[800],
+    text: n[100],
+    "text-muted": n[400],
+    heading: n[50],
+    accent: a[400],
+    "accent-text": onAccent(a[400]),
+    border: n[800],
+    focus: a[300],
+    link: a[300],
+    ...status(0.78, 0.13)
+  };
+  const darkAccent = {
+    background: a[950],
+    surface: a[900],
+    "surface-raised": a[800],
+    text: a[50],
+    "text-muted": a[200],
+    heading: WHITE,
+    accent: a[300],
+    "accent-text": onAccent(a[300]),
+    border: a[800],
+    focus: a[200],
+    link: a[200],
+    ...status(0.82, 0.12)
+  };
+  const brandIsLight = contrastRatio(brand, BLACK) >= contrastRatio(brand, WHITE);
+  const toward = brandIsLight ? -1 : 1;
+  const ink = brandIsLight ? a[950] : a[50];
+  const brandTheme = {
+    background: brand,
+    surface: shift(brand, -0.04 * toward),
+    "surface-raised": shift(brand, -0.08 * toward),
+    text: ink,
+    "text-muted": brandIsLight ? a[900] : a[100],
+    heading: brandIsLight ? n[950] : WHITE,
+    accent: brandIsLight ? n[950] : WHITE,
+    "accent-text": brand,
+    border: shift(brand, 0.12 * toward),
+    focus: ink,
+    link: ink,
+    ...status(brandIsLight ? 0.32 : 0.92, 0.1)
+  };
+  return {
+    light,
+    "light-accent": lightAccent,
+    dark,
+    "dark-accent": darkAccent,
+    brand: brandTheme
+  };
+}
+var POLARITY_HEADROOM = 1.2;
+var SURFACES = ["background", "surface", "surface-raised"];
+var SURFACE_SET = new Set(SURFACES);
+var HOVER_STEP = 0.06;
+function accentStates(accent, label) {
+  const sign = label.l > accent.l ? -1 : 1;
+  const step = (n) => {
+    const next = shift(accent, sign * HOVER_STEP * n);
+    return oklchToHex(next) === oklchToHex(accent) ? shift(accent, -sign * HOVER_STEP * n) : next;
+  };
+  return { "accent-hover": step(1), "accent-pressed": step(2) };
+}
+function solveThemes(roles, mode = "standard") {
+  const mins = CONTRAST_MINIMUMS[mode];
+  const adjustments = /* @__PURE__ */ new Map();
+  const themes = {};
+  for (const theme of COLOR_THEMES3) {
+    const set = { ...roles[theme] };
+    const hex = (role) => oklchToHex(set[role]);
+    const record2 = (role, against, required, next) => {
+      const key = `${theme}:${role}`;
+      const prev = adjustments.get(key);
+      const from = prev?.from ?? hex(role);
+      set[role] = next;
+      adjustments.set(key, { theme, role, from, to: hex(role), against, required });
+    };
+    const lightText = relativeLuminance(set.text) > relativeLuminance(set.background);
+    const extreme = lightText ? WHITE : BLACK;
+    const away = lightText ? "lighter" : "darker";
+    const need = mins.body * POLARITY_HEADROOM;
+    for (const surface of SURFACES) {
+      if (contrastRatio(extreme, set[surface]) >= need) continue;
+      const moved = solveLightness(set[surface], extreme, need);
+      if (moved) record2(surface, "text", mins.body, moved);
+    }
+    const ownPairsPass = (role, candidate) => CORE_CONTRAST_PAIRS.every(
+      (p) => p.fg !== role || contrastRatio(candidate, set[p.bg]) >= mins[p.level]
+    );
+    const solvePairs = (pairs, allowBgMoves) => {
+      for (let pass = 0; pass < 10; pass++) {
+        let changed = false;
+        for (const { fg, bg, level, adjust } of pairs) {
+          const required = mins[level];
+          if (contrastRatio(hex(fg), hex(bg)) >= required) continue;
+          const [move, fixed] = adjust === "bg" ? [bg, fg] : [fg, bg];
+          const direction = SURFACE_SET.has(fixed) ? away : "either";
+          const solved = solveLightness(set[move], set[fixed], required, direction);
+          if (solved) {
+            record2(move, fixed, required, solved);
+            changed = true;
+            continue;
+          }
+          if (!allowBgMoves) continue;
+          let best = null;
+          for (const end of [WHITE, BLACK]) {
+            const fgEnd = gamutMap({ ...set[fg], l: end.l });
+            const movedBg = solveLightness(set[bg], fgEnd, required);
+            if (!movedBg || !ownPairsPass(bg, movedBg)) continue;
+            const delta = Math.abs(movedBg.l - set[bg].l);
+            if (best && delta >= best.delta) continue;
+            best = {
+              bg: movedBg,
+              fg: solveLightness(set[fg], movedBg, required) ?? fgEnd,
+              delta
+            };
+          }
+          if (!best) continue;
+          record2(bg, fg, required, best.bg);
+          record2(fg, bg, required, best.fg);
+          changed = true;
+        }
+        if (!changed) break;
+      }
+    };
+    solvePairs(CORE_CONTRAST_PAIRS, true);
+    for (const surface of SURFACES) {
+      if (contrastRatio(set["text-muted"], set[surface]) > contrastRatio(set.text, set[surface])) {
+        record2("text-muted", "text", mins.body, set.text);
+        break;
+      }
+    }
+    Object.assign(set, accentStates(set.accent, set["accent-text"]));
+    solvePairs(STATE_PAIRS, false);
+    if (hex("accent-hover") === hex("accent") || hex("accent-pressed") === hex("accent")) {
+      const toward = set["accent-text"].l > set.accent.l ? 1 : -1;
+      const pressed = shift(set.accent, toward * HOVER_STEP * 2);
+      const label = solveLightness(
+        set["accent-text"],
+        pressed,
+        mins.body,
+        toward > 0 ? "lighter" : "darker"
+      );
+      if (label) {
+        record2("accent-text", "accent-pressed", mins.body, label);
+        set["accent-hover"] = shift(set.accent, toward * HOVER_STEP);
+        set["accent-pressed"] = pressed;
+        solvePairs(STATE_PAIRS, false);
+      }
+    }
+    const out = {};
+    for (const role of [...COLOR_ROLES2, ...STATE_ROLES]) out[role] = hex(role);
+    themes[theme] = out;
+  }
+  const list = [...adjustments.values()].filter((a) => a.from !== a.to);
+  return { themes, adjustments: list };
+}
+
+// src/compile.ts
+var FALLBACK_BRAND = "oklch(0.55 0.12 250)";
+var COLOR_THEME_SET = new Set(COLOR_THEMES4);
+var COLOR_ROLE_SET = new Set(COLOR_ROLES3);
+var ALL_THEMES = "all";
+var THEME_ROLES = [...COLOR_ROLES3, ...STATE_ROLES];
+function scaleHex(scale) {
+  const out = {};
+  for (const step of COLOR_SCALE_STEPS3) out[step] = oklchToHex(scale[step]);
+  return out;
+}
+function overrideColor(raw, palette, roles) {
+  if (typeof raw !== "string") return null;
+  const alias = SOLE_ALIAS_RE.exec(raw.trim());
+  if (alias?.[1]) {
+    const [group, name2] = alias[1].split(".");
+    if (group !== "color" || !name2) return null;
+    if (name2 === "brand") return palette.brand;
+    const m = /^(accent|neutral)-(\d+)$/.exec(name2);
+    if (m) {
+      const scale = m[1] === "accent" ? palette.accent : palette.neutral;
+      return scale[Number(m[2])] ?? null;
+    }
+    return COLOR_ROLE_SET.has(name2) ? roles[name2] : null;
+  }
+  try {
+    return parseColor(raw);
+  } catch {
+    return null;
+  }
+}
+function compileStyles(styles, options = {}) {
+  const { choices } = styles;
+  const warnings = [];
+  const mode = choices.palette.contrast ?? "standard";
+  let brand;
+  try {
+    brand = parseColor(choices.palette.brand);
+  } catch {
+    warnings.push({
+      code: "invalid-brand",
+      path: "choices.palette.brand",
+      message: `Could not read brand color "${choices.palette.brand}"; using ${FALLBACK_BRAND}.`
+    });
+    brand = parseColor(FALLBACK_BRAND);
+  }
+  const palette = buildPalette(brand, choices.palette.neutral);
+  let pairing2 = getPairing(choices.pairing);
+  if (!pairing2) {
+    warnings.push({
+      code: "unknown-pairing",
+      path: "choices.pairing",
+      message: `Unknown type pairing "${choices.pairing}"; using "${DEFAULT_PAIRING_ID}".`
+    });
+    pairing2 = getPairing(DEFAULT_PAIRING_ID);
+  }
+  const accentHex = scaleHex(palette.accent);
+  const neutralHex = scaleHex(palette.neutral);
+  const root = /* @__PURE__ */ new Map();
+  root.set(varName("color", "brand"), oklchToHex(palette.brand));
+  for (const step of COLOR_SCALE_STEPS3) root.set(varName("color", "accent", step), accentHex[step]);
+  for (const step of COLOR_SCALE_STEPS3)
+    root.set(varName("color", "neutral", step), neutralHex[step]);
+  const fonts = fontTokens(pairing2);
+  const headingFont = chosenCustomFont(styles, choices.headingFont);
+  if (headingFont) {
+    fonts.heading = customFontStack(headingFont);
+    fonts["weight-heading"] = String(nearestWeight(headingFont, pairing2.headingWeight));
+  }
+  const bodyFont = chosenCustomFont(styles, choices.bodyFont);
+  if (bodyFont) {
+    fonts.body = customFontStack(bodyFont);
+    fonts["weight-body"] = String(nearestWeight(bodyFont, pairing2.bodyWeight));
+    fonts["weight-strong"] = String(nearestWeight(bodyFont, pairing2.strongWeight));
+  }
+  for (const [k, v] of Object.entries(fonts)) root.set(varName("font", k), v);
+  const type = typeScale(pairing2);
+  for (const preset of TYPE_PRESET_NAMES) {
+    for (const [prop, v] of Object.entries(type[preset]))
+      root.set(varName("type", preset, prop), v);
+  }
+  root.set(varName("measure"), "70ch");
+  for (const [k, v] of Object.entries(spaceTokens(choices.density)))
+    root.set(varName("space", k), v);
+  for (const [k, v] of Object.entries(sectionTokens(choices.density)))
+    root.set(varName("section", k), v);
+  for (const [k, v] of Object.entries(WIDTH_TOKENS)) root.set(varName("width", k), v);
+  for (const [k, v] of Object.entries(radiusTokens(choices.shape)))
+    root.set(varName("radius", k), v);
+  for (const [k, v] of Object.entries(SHADOW_VALUES)) root.set(varName("shadow", k), v);
+  for (const [k, v] of Object.entries(MOTION_VALUES[choices.motion]))
+    root.set(varName("motion", k), v);
+  const themed = /* @__PURE__ */ new Map();
+  const buttons = buttonTokens(choices.buttons);
+  for (const role of BUTTON_ROLES) {
+    for (const [prop, v] of Object.entries(buttons[role]))
+      themed.set(varName("button", role, prop), v);
+  }
+  for (const [k, v] of Object.entries(IMAGE_TREATMENT_VALUES[choices.imageTreatment]))
+    themed.set(varName("image", k), v);
+  const roles = themeRoles(palette);
+  const custom = /* @__PURE__ */ new Map();
+  const overriddenRoles = /* @__PURE__ */ new Map();
+  const roleOverrides = [];
+  for (const { path, token, type: t } of flattenDtcg(styles.overrides)) {
+    const dotted = path.join(".");
+    const invalid = (why) => warnings.push({ code: "invalid-override", path: dotted, message: why });
+    if (path[0] === "color") {
+      const [, a, b] = path;
+      const scope = path.length === 3 && a && (a === ALL_THEMES || COLOR_THEME_SET.has(a)) ? a : null;
+      const role = scope ? b : path.length === 2 ? a : void 0;
+      if (role && COLOR_ROLE_SET.has(role)) {
+        const tier = scope === ALL_THEMES ? 0 : scope ? 2 : 1;
+        roleOverrides.push({
+          tier,
+          scope: scope ?? "light",
+          role,
+          dotted,
+          value: token.$value
+        });
+        continue;
+      }
+    }
+    if (t === "typography" && typeof token.$value === "object" && token.$value !== null) {
+      for (const [prop, sub] of Object.entries(token.$value).sort()) {
+        const subType = prop === "fontFamily" ? "fontFamily" : prop === "fontSize" ? "dimension" : void 0;
+        const css2 = dtcgToCss(sub, subType);
+        if (css2 === null) invalid(`Unsupported value for ${prop}.`);
+        else applyVar(varName(...path, prop), css2);
+      }
+      continue;
+    }
+    const colorPath = path[0] === "color";
+    const css = dtcgToCss(token.$value, t ?? (colorPath ? "color" : void 0));
+    if (css === null) {
+      invalid(`Unsupported or unsafe value ${JSON.stringify(token.$value)}.`);
+      continue;
+    }
+    applyVar(varName(...path), css);
+  }
+  function applyVar(name2, css) {
+    if (root.has(name2)) root.set(name2, css);
+    else if (themed.has(name2)) themed.set(name2, css);
+    else {
+      custom.set(name2, css);
+      warnings.push({
+        code: "custom-token",
+        path: name2,
+        message: `${name2} is not a built-in token; emitted as a custom property.`
+      });
+    }
+  }
+  for (const name2 of [...custom.keys()].sort()) root.set(name2, custom.get(name2));
+  for (const o of roleOverrides.sort((x, y) => x.tier - y.tier)) {
+    const targets = o.scope === ALL_THEMES ? COLOR_THEMES4 : [o.scope];
+    for (const target of targets) {
+      const color = overrideColor(o.value, palette, roles[target]);
+      if (!color) {
+        warnings.push({
+          code: "invalid-override",
+          path: o.dotted,
+          message: `"${String(o.value)}" is not a color.`
+        });
+        break;
+      }
+      roles[target][o.role] = color;
+      overriddenRoles.set(`${target}:${o.role}`, o.dotted);
+    }
+  }
+  for (const theme of COLOR_THEMES4) {
+    if (overriddenRoles.has(`${theme}:accent`) && !overriddenRoles.has(`${theme}:accent-text`)) {
+      roles[theme]["accent-text"] = onColor(roles[theme].accent, palette);
+    }
+  }
+  let themes;
+  let adjustments = [];
+  if (options.solve === false) {
+    themes = {};
+    for (const theme of COLOR_THEMES4) {
+      const set = roles[theme];
+      const all = { ...set, ...accentStates(set.accent, set["accent-text"]) };
+      const out = {};
+      for (const role of THEME_ROLES) out[role] = oklchToHex(all[role]);
+      themes[theme] = out;
+    }
+  } else {
+    ({ themes, adjustments } = solveThemes(roles, mode));
+  }
+  const failures = auditContrast(themes, { contrast: mode });
+  for (const a of adjustments) {
+    const path = overriddenRoles.get(`${a.theme}:${a.role}`);
+    if (!path) continue;
+    warnings.push({
+      code: "contrast-adjusted",
+      path,
+      message: `Override ${a.from} adjusted to ${a.to} to reach ${a.required}:1 against ${a.against} (${a.theme}).`
+    });
+  }
+  for (const f of failures) {
+    warnings.push({
+      code: "contrast-failure",
+      path: `${f.theme}.${f.fg}/${f.bg}`,
+      message: `${f.fg} on ${f.bg} is ${f.ratio}:1 in ${f.theme}; needs ${f.required}:1 (try ${f.suggestion}).`
+    });
+  }
+  const themeVars = {};
+  for (const theme of COLOR_THEMES4) {
+    const vars = {};
+    for (const role of THEME_ROLES) vars[varName("color", role)] = themes[theme][role];
+    themeVars[theme] = vars;
+  }
+  const imageTreatments = {};
+  for (const [treatment, values] of Object.entries(IMAGE_TREATMENT_VALUES)) {
+    imageTreatments[treatment] = Object.fromEntries(
+      Object.entries(values).map(([k, v]) => [varName("image", k), v])
+    );
+  }
+  const reducedMotion = Object.fromEntries(
+    Object.entries(MOTION_VALUES.none).filter(([k]) => k !== "ease").map(([k, v]) => [varName("motion", k), v])
+  );
+  const tokens = {
+    choices,
+    pairing: pairing2,
+    palette: {
+      brand: oklchToHex(palette.brand),
+      brandOklch: formatOklch(palette.brand),
+      accent: accentHex,
+      neutral: neutralHex
+    },
+    themes,
+    fonts: { googleFontsUrl: googleFontsUrl(pairing2), fontsource: fontsourceCss(pairing2) },
+    vars: {
+      root: Object.fromEntries(root),
+      themes: themeVars,
+      themed: Object.fromEntries(themed),
+      imageTreatments,
+      reducedMotion
+    }
+  };
+  return {
+    tokens,
+    css: emitCss(tokens),
+    contrast: { mode, adjustments, failures },
+    warnings
+  };
+}
+function block(selectors, decls, indent = "") {
+  const lines = Object.entries(decls).map(([k, v]) => `${indent}  ${k}: ${v};`);
+  return `${indent}${selectors.join(`,
+${indent}`)} {
+${lines.join("\n")}
+${indent}}`;
+}
+function emitCss(tokens) {
+  const parts = [
+    "/* OpenSpace design tokens. Generated by @omniharmonic/openspace-theme from content/styles.json; do not edit. */",
+    block([":root"], tokens.vars.root)
+  ];
+  for (const theme of COLOR_THEMES4) {
+    const scheme = relativeLuminance(tokens.themes[theme].background) > 0.18 ? "light" : "dark";
+    const selectors = theme === "light" ? [":root", `.${themeClass(theme)}`] : [`.${themeClass(theme)}`];
+    parts.push(block(selectors, { "color-scheme": scheme, ...tokens.vars.themes[theme] }));
+  }
+  parts.push(block([":root", ...THEME_CLASSES.map((c2) => `.${c2}`)], tokens.vars.themed));
+  for (const [treatment, decls] of Object.entries(tokens.vars.imageTreatments)) {
+    parts.push(block([`.${imageTreatmentClass(treatment)}`], decls));
+  }
+  parts.push(
+    `@media (prefers-reduced-motion: reduce) {
+${block([":root"], tokens.vars.reducedMotion, "  ")}
+}`
+  );
+  return `${parts.join("\n\n")}
+`;
+}
+
+// src/extract.ts
+var LINEAR = Array.from({ length: 256 }, (_, i) => srgbChannelToLinear(i / 255));
+var dist2 = (a, b) => (a.l - b.l) ** 2 + (a.a - b.a) ** 2 + (a.b - b.b) ** 2;
+function extractPalette(pixels, options = {}) {
+  const channels = options.channels ?? 4;
+  const k = Math.max(1, options.k ?? 6);
+  const count = options.count ?? 5;
+  const total = Math.floor(pixels.length / channels);
+  const stride = Math.max(1, Math.ceil(total / (options.maxSamples ?? 2e4)));
+  const samples = [];
+  const weights = [];
+  for (let i = 0; i < total; i += stride) {
+    const o = i * channels;
+    if (channels === 4 && (pixels[o + 3] ?? 255) < 128) continue;
+    const lab = linearSrgbToOklab({
+      r: LINEAR[pixels[o] ?? 0],
+      g: LINEAR[pixels[o + 1] ?? 0],
+      b: LINEAR[pixels[o + 2] ?? 0]
+    });
+    samples.push(lab);
+    weights.push(1 + 12 * Math.hypot(lab.a, lab.b));
+  }
+  if (samples.length === 0) return [];
+  let first = 0;
+  for (let i = 1; i < samples.length; i++) if ((weights[i] ?? 0) > (weights[first] ?? 0)) first = i;
+  const centers = [{ ...samples[first] }];
+  const nearest = samples.map((s) => dist2(s, centers[0]));
+  while (centers.length < Math.min(k, samples.length)) {
+    let far = 0;
+    for (let i = 1; i < samples.length; i++) {
+      if ((nearest[i] ?? 0) * (weights[i] ?? 0) > (nearest[far] ?? 0) * (weights[far] ?? 0))
+        far = i;
+    }
+    if ((nearest[far] ?? 0) === 0) break;
+    const c2 = { ...samples[far] };
+    centers.push(c2);
+    for (let i = 0; i < samples.length; i++) {
+      nearest[i] = Math.min(nearest[i] ?? 0, dist2(samples[i], c2));
+    }
+  }
+  const assign = new Array(samples.length).fill(0);
+  for (let iter = 0; iter < 16; iter++) {
+    let moved = false;
+    for (let i = 0; i < samples.length; i++) {
+      let best = 0;
+      let bestD = Number.POSITIVE_INFINITY;
+      for (let j = 0; j < centers.length; j++) {
+        const d = dist2(samples[i], centers[j]);
+        if (d < bestD) {
+          bestD = d;
+          best = j;
+        }
+      }
+      if (assign[i] !== best) {
+        assign[i] = best;
+        moved = true;
+      }
+    }
+    const sums = centers.map(() => ({ l: 0, a: 0, b: 0, w: 0 }));
+    for (let i = 0; i < samples.length; i++) {
+      const s = samples[i];
+      const w = weights[i] ?? 1;
+      const acc = sums[assign[i] ?? 0];
+      if (!acc) continue;
+      acc.l += s.l * w;
+      acc.a += s.a * w;
+      acc.b += s.b * w;
+      acc.w += w;
+    }
+    sums.forEach((acc, j) => {
+      if (acc.w > 0) centers[j] = { l: acc.l / acc.w, a: acc.a / acc.w, b: acc.b / acc.w };
+    });
+    if (!moved && iter > 0) break;
+  }
+  const counts = centers.map(() => 0);
+  for (const a of assign) counts[a] = (counts[a] ?? 0) + 1;
+  const candidates = [];
+  centers.forEach((center, j) => {
+    const n = counts[j] ?? 0;
+    if (n === 0) return;
+    const lch = oklabToOklch(center);
+    const population = n / samples.length;
+    const chromaWeight = Math.min(1, lch.c / 0.12);
+    const extreme = lch.l > 0.96 || lch.l < 0.12 ? 0.05 : 1;
+    const score = population * (0.04 + chromaWeight) * extreme;
+    candidates.push({
+      hex: oklchToHex(lch),
+      oklch: formatOklch(lch),
+      l: lch.l,
+      c: lch.c,
+      h: lch.h,
+      population,
+      score
+    });
+  });
+  candidates.sort((a, b) => b.score - a.score || a.hex.localeCompare(b.hex));
+  const out = [];
+  for (const c2 of candidates) if (!out.some((o) => o.hex === c2.hex)) out.push(c2);
+  return out.slice(0, count);
+}
+
+// src/palettes.ts
+var curatedPalettes = [
+  {
+    id: "sage",
+    name: "Oat & Sage",
+    brand: "oklch(0.62 0.07 145)",
+    neutral: "warm",
+    description: "Soft sage on oat paper; calm and organic.",
+    templates: ["meadow"]
+  },
+  {
+    id: "clay",
+    name: "Clay",
+    brand: "oklch(0.6 0.11 45)",
+    neutral: "warm",
+    description: "Sun-baked terracotta with bone neutrals.",
+    templates: ["meadow", "kiln"]
+  },
+  {
+    id: "harbor",
+    name: "Harbor Blue",
+    brand: "oklch(0.42 0.12 255)",
+    neutral: "warm",
+    description: "Deep civic blue on warm paper.",
+    templates: ["harbor"]
+  },
+  {
+    id: "signal-orange",
+    name: "Signal Orange",
+    brand: "oklch(0.68 0.19 45)",
+    neutral: "warm",
+    description: "A bright call-to-action orange.",
+    templates: ["harbor"]
+  },
+  {
+    id: "monochrome",
+    name: "Monochrome",
+    brand: "oklch(0.25 0 0)",
+    neutral: "pure",
+    description: "Ink and white; lets the photography lead.",
+    templates: ["atelier"]
+  },
+  {
+    id: "ledger-green",
+    name: "Ledger Green",
+    brand: "oklch(0.42 0.08 160)",
+    neutral: "warm",
+    description: "Deep green with ink and ivory.",
+    templates: ["ledger"]
+  },
+  {
+    id: "tomato",
+    name: "Tomato",
+    brand: "oklch(0.6 0.2 30)",
+    neutral: "warm",
+    description: "Ripe tomato red on cream.",
+    templates: ["hearth"]
+  },
+  {
+    id: "olive",
+    name: "Olive Grove",
+    brand: "oklch(0.55 0.09 115)",
+    neutral: "warm",
+    description: "Olive and cream, quietly appetizing.",
+    templates: ["hearth"]
+  },
+  {
+    id: "electric",
+    name: "Electric Violet",
+    brand: "oklch(0.62 0.25 285)",
+    neutral: "cool",
+    description: "Near-black chrome with an electric accent.",
+    templates: ["signal"]
+  },
+  {
+    id: "highlighter",
+    name: "Highlighter",
+    brand: "oklch(0.9 0.17 100)",
+    neutral: "warm",
+    description: "Paper and ink with a highlighter-yellow mark.",
+    templates: ["field-notes"]
+  },
+  {
+    id: "plum",
+    name: "Night Plum",
+    brand: "oklch(0.45 0.14 330)",
+    neutral: "cool",
+    description: "Dark plum with a vivid edge.",
+    templates: ["encore"]
+  },
+  {
+    id: "charcoal-clay",
+    name: "Charcoal & Clay",
+    brand: "oklch(0.52 0.08 50)",
+    neutral: "warm",
+    description: "Fired clay against charcoal and bone.",
+    templates: ["kiln"]
+  },
+  {
+    id: "earth",
+    name: "Earth & Sky",
+    brand: "oklch(0.5 0.1 140)",
+    neutral: "cool",
+    description: "Grounded greens under an open sky.",
+    templates: ["commons"]
+  },
+  {
+    id: "dusty-rose",
+    name: "Dusty Rose",
+    brand: "oklch(0.68 0.07 10)",
+    neutral: "warm",
+    description: "Linen, ink and a muted rose.",
+    templates: ["vow"]
+  },
+  {
+    id: "lagoon",
+    name: "Lagoon",
+    brand: "oklch(0.58 0.1 195)",
+    neutral: "cool",
+    description: "Clear teal water; fresh and open.",
+    templates: ["link"]
+  },
+  {
+    id: "saffron",
+    name: "Saffron",
+    brand: "oklch(0.78 0.15 80)",
+    neutral: "warm",
+    description: "Golden saffron, warm and generous.",
+    templates: ["link"]
+  },
+  {
+    id: "ink-blue",
+    name: "Ink Blue",
+    brand: "oklch(0.35 0.08 265)",
+    neutral: "cool",
+    description: "Fountain-pen blue; serious and literate.",
+    templates: ["field-notes", "ledger"]
+  },
+  {
+    id: "lavender",
+    name: "Lavender",
+    brand: "oklch(0.7 0.1 300)",
+    neutral: "cool",
+    description: "Gentle lavender for soft, restful brands."
+  },
+  {
+    id: "forest",
+    name: "Forest",
+    brand: "oklch(0.4 0.07 150)",
+    neutral: "warm",
+    description: "Old-growth green, steady and natural.",
+    templates: ["commons"]
+  },
+  {
+    id: "coral",
+    name: "Coral",
+    brand: "oklch(0.7 0.15 25)",
+    neutral: "warm",
+    description: "Playful coral with sunny neutrals.",
+    templates: ["link"]
+  }
+];
+function getCuratedPalette(id) {
+  return curatedPalettes.find((p) => p.id === id);
+}
+
+// src/index.ts
+var name = "@omniharmonic/openspace-theme";
+export {
+  ACCENT_LIGHTNESS,
+  ACHROMATIC_CHROMA,
+  ALL_THEMES,
+  BUTTON_PROPS,
+  BUTTON_ROLES,
+  CONTRAST_MINIMUMS,
+  CONTRAST_PAIRS,
+  CORE_CONTRAST_PAIRS,
+  DEFAULT_PAIRING_ID,
+  FALLBACK_STACKS,
+  FLUID_TYPE,
+  IMAGE_PROPS,
+  IMAGE_TREATMENT_VALUES,
+  MIN_FONT_SIZE_PX,
+  MOTION_PROPS,
+  MOTION_VALUES,
+  NEUTRAL_LIGHTNESS,
+  RADIUS_NAMES,
+  RADIUS_SCALES,
+  SHADOW_NAMES,
+  SHADOW_VALUES,
+  SOLE_ALIAS_RE,
+  SPACE_SCALES,
+  SPACE_STEPS,
+  STATE_PAIRS,
+  THEME_CLASSES,
+  TOKEN_VARS,
+  TYPE_PAIRINGS,
+  TYPE_PRESET_NAMES,
+  TYPE_PROPS,
+  VAR_PREFIX,
+  WIDTH_TOKENS,
+  accentScale,
+  accentStates,
+  allTokenVars,
+  auditContrast,
+  bestOn,
+  buildPalette,
+  buttonTokens,
+  chosenCustomFont,
+  colorVar,
+  compileStyles,
+  contrastRatio,
+  cssVar,
+  curatedPalettes,
+  customFontFaces,
+  customFontPreloads,
+  customFontStack,
+  deltaEOK,
+  dtcgToCss,
+  emitCss,
+  extractPalette,
+  flattenDtcg,
+  fluidClamp,
+  fontStack,
+  fontTokens,
+  fontsourceCss,
+  fontsourceId,
+  fontsourcePackages,
+  formatOklch,
+  gamutMap,
+  getCuratedPalette,
+  getPairing,
+  googleFontsUrl,
+  hexToOklch,
+  hexToRgb,
+  imageTreatmentClass,
+  inSrgbGamut,
+  isColor,
+  isSafeCssValue,
+  linearChannelToSrgb,
+  linearSrgbToOklab,
+  linearToSrgb,
+  mixHue,
+  name,
+  nearestAccessible,
+  nearestStep,
+  nearestWeight,
+  neutralScale,
+  normalizeHue,
+  oklabToLinearSrgb,
+  oklabToOklch,
+  oklchToHex,
+  oklchToOklab,
+  oklchToSrgb,
+  oklchToSrgbInGamut,
+  onColor,
+  pairingFamilies,
+  parseColor,
+  radiusTokens,
+  relativeLuminance,
+  resolveAliases,
+  rgbToHex,
+  sectionTokens,
+  solveLightness,
+  solveThemes,
+  spaceTokens,
+  srgbChannelToLinear,
+  srgbToLinear,
+  srgbToOklch,
+  stepSizes,
+  themeClass,
+  themeRoles,
+  toHex,
+  typeScale,
+  varName
+};
+//# sourceMappingURL=index.js.map