@rojaostudio/ds-core 1.0.0

package/dist/chunk-NIIC6HPN.js

@@ -0,0 +1,898 @@
+import { primitives } from './chunk-MJA5ZGMI.js';
+import { __spreadValues, __spreadProps } from './chunk-ORMEWXMH.js';
+
+// generate/scale.ts
+var SCALE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+var L_T = {
+  50: 0.985,
+  100: 0.945,
+  200: 0.875,
+  300: 0.785,
+  400: 0.675,
+  500: 0.565,
+  600: 0.455,
+  700: 0.355,
+  800: 0.255,
+  900: 0.16
+};
+var C_MUL = {
+  50: 0.42,
+  100: 0.58,
+  200: 0.78,
+  300: 0.9,
+  400: 0.97,
+  500: 1,
+  600: 1,
+  700: 1,
+  800: 0.96,
+  900: 0.9
+};
+function hexToHsl(hex) {
+  const m = hex.replace("#", "");
+  const r = parseInt(m.slice(0, 2), 16) / 255;
+  const g = parseInt(m.slice(2, 4), 16) / 255;
+  const b = parseInt(m.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, Math.round(l * 100)];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+function hslToHex(h, s, l) {
+  const sn = s / 100;
+  const ln = l / 100;
+  const a = sn * Math.min(ln, 1 - ln);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * c).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+var DEG = 180 / Math.PI;
+var RAD = Math.PI / 180;
+var toLin = (c) => {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+var toGam = (c) => {
+  const s = c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+  return Math.round(Math.max(0, Math.min(1, s)) * 255);
+};
+function hexToOklch(hex) {
+  const m = hex.replace("#", "");
+  const r = toLin(parseInt(m.slice(0, 2), 16));
+  const g = toLin(parseInt(m.slice(2, 4), 16));
+  const b = toLin(parseInt(m.slice(4, 6), 16));
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const mm = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * mm - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * mm + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * mm - 0.808675766 * s;
+  return [L, Math.hypot(A, B), Math.atan2(B, A)];
+}
+function oklchToLinRgb(L, C, h) {
+  const A = C * Math.cos(h), B = C * Math.sin(h);
+  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 [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var inGamut = (rgb) => rgb.every((c) => c >= -1e-3 && c <= 1.001);
+function oklchToHex(L, C, h) {
+  if (!inGamut(oklchToLinRgb(L, C, h))) {
+    let lo = 0, hi = C;
+    for (let i = 0; i < 18; i++) {
+      const mid = (lo + hi) / 2;
+      if (inGamut(oklchToLinRgb(L, mid, h))) lo = mid;
+      else hi = mid;
+    }
+    C = lo;
+  }
+  const [r, g, b] = oklchToLinRgb(L, C, h);
+  return `#${[toGam(r), toGam(g), toGam(b)].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+function warmShiftDeg(hDeg, L, Lanchor) {
+  if (hDeg < 60 || hDeg > 115 || L >= Lanchor) return hDeg;
+  const t = Math.min(1, (Lanchor - L) / (Lanchor - 0.35));
+  return hDeg - t * (hDeg - 55) * 0.9;
+}
+function warmFloor(hDeg) {
+  if (hDeg >= 95 && hDeg <= 115) return 0.62;
+  if (hDeg >= 45 && hDeg < 95) return 0.255 + (hDeg - 45) / 50 * (0.62 - 0.255);
+  return 0.255;
+}
+function nearestStep(lOklch) {
+  let best = SCALE_STEPS[0];
+  let bestDiff = Infinity;
+  for (const step2 of SCALE_STEPS) {
+    const diff = Math.abs(L_T[step2] - lOklch);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      best = step2;
+    }
+  }
+  return best;
+}
+function buildScale(inputHex) {
+  const [Li, Ci, hRad] = hexToOklch(inputHex);
+  const hDeg = (hRad * DEG % 360 + 360) % 360;
+  const floor = Ci < 0.08 ? 0.16 : warmFloor(hDeg);
+  const lAt = (s) => floor + (L_T[s] - 0.16) / 0.825 * (0.985 - floor);
+  let anchor = SCALE_STEPS[0], bd = Infinity;
+  for (const s of SCALE_STEPS) {
+    const d = Math.abs(lAt(s) - Li);
+    if (d < bd) {
+      bd = d;
+      anchor = s;
+    }
+  }
+  const isNeutral = Ci < 0.02;
+  const out = {};
+  for (const step2 of SCALE_STEPS) {
+    if (step2 === anchor) {
+      out[step2] = inputHex.toLowerCase();
+      continue;
+    }
+    const L = lAt(step2);
+    const h = warmShiftDeg(hDeg, L, Li) * RAD;
+    const cMul = isNeutral && step2 <= 200 ? 0 : C_MUL[step2];
+    out[step2] = oklchToHex(L, Ci * cMul, h);
+  }
+  return out;
+}
+function relativeLuminance(hex) {
+  const m = hex.replace("#", "");
+  const channel = (v) => {
+    const sr = v / 255;
+    return sr <= 0.03928 ? sr / 12.92 : Math.pow((sr + 0.055) / 1.055, 2.4);
+  };
+  const r = channel(parseInt(m.slice(0, 2), 16));
+  const g = channel(parseInt(m.slice(2, 4), 16));
+  const b = channel(parseInt(m.slice(4, 6), 16));
+  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 onColor(bgHex, scale) {
+  const candidates = ["#ffffff", "#000000", scale == null ? void 0 : scale[50], scale == null ? void 0 : scale[900]].filter(
+    (c) => !!c
+  );
+  let best = candidates[0];
+  let bestRatio = 0;
+  for (const c of candidates) {
+    const ratio = contrastRatio(bgHex, c);
+    if (ratio > bestRatio) {
+      bestRatio = ratio;
+      best = c;
+    }
+  }
+  return best;
+}
+var HEX_RE = /^#[0-9a-fA-F]{6}$/;
+var isHex = (c) => HEX_RE.test(c);
+var PALETTE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+function parseRef(c) {
+  const m = c.match(/^([a-zA-Z][a-zA-Z-]*?)-(\d{2,3})$/);
+  if (!m) return null;
+  return { palette: m[1], step: Number(m[2]) };
+}
+function refToHex(c) {
+  var _a;
+  if (isHex(c)) return c;
+  if (c === "white") return "#ffffff";
+  if (c === "black") return "#000000";
+  const p = parseRef(c);
+  if (!p) return null;
+  const hex = (_a = primitives.color[p.palette]) == null ? void 0 : _a[p.step];
+  return typeof hex === "string" && HEX_RE.test(hex) ? hex : null;
+}
+function onColorRef(c) {
+  const hex = refToHex(c);
+  if (!hex) return null;
+  return onColor(hex) === "#000000" ? "black" : "white";
+}
+function hoverRef(c) {
+  const p = parseRef(c);
+  if (!p) return null;
+  const i = PALETTE_STEPS.indexOf(p.step);
+  if (i < 0) return null;
+  const j = i < PALETTE_STEPS.length - 1 ? i + 1 : i - 1;
+  return `${p.palette}-${PALETTE_STEPS[j]}`;
+}
+function brandTones(hex) {
+  const scale = buildScale(hex);
+  const pinned = SCALE_STEPS.findIndex((s) => scale[s].toLowerCase() === hex.toLowerCase());
+  const i = pinned >= 0 ? pinned : SCALE_STEPS.indexOf(nearestStep(hexToOklch(hex)[0]));
+  const hoverStep = i < SCALE_STEPS.length - 1 ? SCALE_STEPS[i + 1] : SCALE_STEPS[i - 1];
+  return { hover: scale[hoverStep], on: onColor(hex, scale) };
+}
+var NEUTRAL_SAT_MAX = 20;
+function brandHex(c, palettes) {
+  var _a, _b;
+  if (isHex(c)) return c;
+  if (c === "white") return "#ffffff";
+  if (c === "black") return "#000000";
+  const p = parseRef(c);
+  if (p && palettes) {
+    const raw = palettes[p.palette];
+    if (typeof raw === "string") return (_a = buildScale(raw)[p.step]) != null ? _a : null;
+    if (raw && typeof raw === "object") return (_b = raw[String(p.step)]) != null ? _b : null;
+  }
+  return refToHex(c);
+}
+function isNeutralBrand(def) {
+  if (def.archetype === "neutral") return true;
+  if (def.archetype === "chromatic") return false;
+  const hex = brandHex(def.brand.primary, def.palettes);
+  if (!hex) return false;
+  const [, s] = hexToHsl(hex);
+  return s <= NEUTRAL_SAT_MAX;
+}
+
+// generate/generateTheme.ts
+var step = (p, n) => `var(--color-${p}-${n})`;
+function ref(c, allowLiteral = false) {
+  const mix = c.match(/^mix\((.+)\)$/);
+  if (mix) {
+    const [aPart, bPart] = mix[1].split(",").map((s) => s.trim());
+    const a = aPart.match(/^(.+?)\s+(\d+%)$/);
+    const aStr = a ? `${ref(a[1], allowLiteral)} ${a[2]}` : ref(aPart, allowLiteral);
+    const bStr = bPart === "transparent" ? "transparent" : ref(bPart, allowLiteral);
+    return `color-mix(in srgb, ${aStr}, ${bStr})`;
+  }
+  if (c.startsWith("#")) return c;
+  return `var(--color-${c})`;
+}
+var alpha = (pct) => `color-mix(in srgb, var(--color-white) ${pct}%, transparent)`;
+var SURF = { light: "#ffffff", dark: "#0a0a0a" };
+function surfaceSafeHex(hex, mode, min = 3) {
+  const bg = SURF[mode];
+  if (contrastRatio(hex, bg) >= min) return hex;
+  const scale = buildScale(hex);
+  const order = mode === "light" ? [600, 700, 800, 900] : [300, 200, 100, 50];
+  for (const s of order) if (contrastRatio(scale[s], bg) >= min) return scale[s];
+  return mode === "light" ? scale[900] : scale[50];
+}
+var FILL_AFFORDANCE_MIN = 2;
+function primaryFillBorder(fillRef, surfaceRef) {
+  const fill = isHex(fillRef) ? fillRef : refToHex(fillRef);
+  const surf = refToHex(surfaceRef);
+  if (!fill || !surf) return null;
+  if (contrastRatio(fill, surf) >= FILL_AFFORDANCE_MIN) return null;
+  return "color-mix(in srgb, var(--brand-on-primary) 60%, transparent)";
+}
+var isSerif = (name) => !!name && /serif/.test(name);
+var familyFb = (name, kind) => kind === "serif" || isSerif(name) ? "Georgia, serif" : "system-ui, sans-serif";
+function fonts(def) {
+  var _a;
+  const f = def.fonts;
+  const out = { "--font-family": `var(--font-${f.body}), system-ui, sans-serif` };
+  const disp = (_a = f.display) != null ? _a : f.body;
+  out["--font-family-display"] = `var(--font-${disp}), ${familyFb(disp, f.displayKind)}`;
+  if (f.editorial) out["--font-family-editorial"] = `var(--font-${f.editorial}), ${familyFb(f.editorial)}`;
+  if (f.mono) out["--font-family-mono"] = `var(--font-${f.mono}), 'Courier New', monospace`;
+  return out;
+}
+function onOf(explicit, color, lit) {
+  var _a;
+  if (explicit) return ref(explicit, lit);
+  return ref((_a = onColorRef(color)) != null ? _a : "white", lit);
+}
+var SECONDARY_DOTS = "radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand-on-secondary) 14%, transparent) 1px, transparent 0)";
+var SECONDARY_TEXTURE_SIZE = "18px 18px";
+var TEXTURE_SAT_MIN = 20;
+var TEXTURE_LUM_MIN = 0.03;
+var TEXTURE_LUM_MAX = 0.85;
+function isChromaticSurface(secRef) {
+  const hex = secRef ? refToHex(secRef) : null;
+  if (!hex) return true;
+  const [, s] = hexToHsl(hex);
+  const l = relativeLuminance(hex);
+  return s > TEXTURE_SAT_MIN && l >= TEXTURE_LUM_MIN && l <= TEXTURE_LUM_MAX;
+}
+function secondaryTexture(secRef) {
+  return {
+    "--brand-secondary-texture": isChromaticSurface(secRef) ? SECONDARY_DOTS : "none",
+    "--brand-secondary-texture-size": SECONDARY_TEXTURE_SIZE
+  };
+}
+function brandScale(primary) {
+  const o = {};
+  if (isHex(primary)) {
+    const scale = buildScale(primary);
+    for (const s of SCALE_STEPS) o[`--brand-primary-${s}`] = scale[s];
+    return o;
+  }
+  const m = primary.match(/^([a-zA-Z]+)-\d+$/);
+  if (m) for (const s of SCALE_STEPS) o[`--brand-primary-${s}`] = `var(--color-${m[1]}-${s})`;
+  return o;
+}
+function deriveHarmony(primaryHex) {
+  const [h, s, l] = hexToHsl(primaryHex);
+  const clampS = (x) => Math.min(72, Math.max(35, x));
+  const clampL = (x) => Math.min(60, Math.max(42, x));
+  return {
+    secondary: hslToHex((h + 28) % 360, clampS(s * 0.9), clampL(l)),
+    accent: hslToHex((h + 170) % 360, clampS(s), clampL(l))
+  };
+}
+function brandLight(def, lit) {
+  var _a;
+  const b = def.brand;
+  const o = {};
+  Object.assign(o, brandScale(b.primary));
+  const primary = b.primary;
+  o["--brand-primary"] = ref(primary, lit);
+  const tones = isHex(primary) ? brandTones(primary) : null;
+  if (b.hover) o["--brand-hover"] = ref(b.hover, lit);
+  else if (tones) o["--brand-hover"] = tones.hover;
+  else {
+    const h = hoverRef(b.primary);
+    if (h) o["--brand-hover"] = ref(h, lit);
+  }
+  o["--brand-on-primary"] = b.onPrimary ? ref(b.onPrimary, lit) : tones ? tones.on : ref((_a = onColorRef(primary)) != null ? _a : "white", lit);
+  if (b.secondary) {
+    o["--brand-secondary"] = ref(b.secondary, lit);
+    o["--brand-on-secondary"] = onOf(b.onSecondary, b.secondary, lit);
+    o["--brand-secondary-surface"] = "var(--brand-secondary)";
+    o["--brand-secondary-band"] = "var(--brand-secondary)";
+    Object.assign(o, secondaryTexture(b.secondary));
+  }
+  if (b.accent) {
+    o["--brand-accent"] = ref(b.accent, lit);
+    if (b.accentLight) o["--brand-accent-light"] = ref(b.accentLight, lit);
+    o["--brand-on-accent"] = onOf(b.onAccent, b.accent, lit);
+  }
+  return o;
+}
+function light(def) {
+  var _a, _b;
+  const S = def.surface, T = def.text, b = def.brand, lit = !!def.allowLiteral;
+  const ink = (_b = (_a = def.dark) == null ? void 0 : _a.surface) != null ? _b : T;
+  const o = __spreadValues(__spreadValues({}, fonts(def)), brandLight(def, lit));
+  const tintPct = def.surfaceTint ? Math.min(def.surfaceTint, 10) : void 0;
+  const tint = (base) => tintPct ? `color-mix(in srgb, ${ref(b.primary, lit)} ${tintPct}%, ${base})` : base;
+  o["--surface-page"] = tint(step(S, 50));
+  o["--surface-default"] = tint("var(--color-white)");
+  o["--surface-raised"] = tint(step(S, 100));
+  o["--surface-overlay"] = step(ink, 900);
+  o["--surface-invert"] = step(ink, 900);
+  o["--border-subtle"] = S !== T ? step(S, 200) : step(T, 100);
+  o["--border-default"] = step(T, 200);
+  o["--border-strong"] = step(T, 300);
+  o["--border-control"] = step(T, 500);
+  o["--border-focus"] = b.borderFocus ? ref(b.borderFocus, lit) : isNeutralBrand(def) ? step(T, 900) : isHex(b.primary) ? surfaceSafeHex(b.primary, "light") : ref(b.primary, lit);
+  o["--brand-text"] = isNeutralBrand(def) ? step(T, 900) : isHex(b.primary) ? surfaceSafeHex(b.primary, "light") : ref(b.primary, lit);
+  const pb = primaryFillBorder(b.primary, `${S}-50`);
+  if (pb) o["--brand-primary-border"] = pb;
+  o["--text-primary"] = step(ink, 900);
+  o["--text-secondary"] = step(T, 700);
+  o["--text-muted"] = step(T, 600);
+  o["--text-disabled"] = step(T, 400);
+  o["--text-inverse"] = ink !== T ? step(T, 100) : "var(--color-white)";
+  o["--text-placeholder"] = step(T, 600);
+  o["--icon-default"] = step(T, 800);
+  return o;
+}
+function darkFull(def) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const Sd = (_b = (_a = def.dark) == null ? void 0 : _a.surface) != null ? _b : def.surface;
+  const Td = (_d = (_c = def.dark) == null ? void 0 : _c.text) != null ? _d : def.text;
+  const ink = (_f = (_e = def.dark) == null ? void 0 : _e.surface) != null ? _f : def.text;
+  const lit = !!def.allowLiteral;
+  const o = {};
+  o["--surface-page"] = step(Sd, 900);
+  o["--surface-default"] = step(Sd, 800);
+  o["--surface-raised"] = step(Sd, 700);
+  o["--surface-overlay"] = step(Sd, 200);
+  o["--surface-invert"] = step(Td, 50);
+  o["--border-subtle"] = alpha(8);
+  o["--border-default"] = alpha(14);
+  o["--border-strong"] = alpha(22);
+  o["--border-control"] = alpha(40);
+  o["--text-primary"] = step(Td, 50);
+  o["--text-secondary"] = step(Td, 200);
+  o["--text-muted"] = step(Td, 300);
+  o["--text-disabled"] = step(Td, 600);
+  o["--text-inverse"] = step(ink, 900);
+  o["--text-placeholder"] = step(Td, 300);
+  o["--icon-default"] = step(Td, 400);
+  const db = (_g = def.dark) == null ? void 0 : _g.brand;
+  if (isNeutralBrand(def) && !db) {
+    o["--brand-primary"] = "var(--color-white)";
+    o["--brand-hover"] = step(Td, 100);
+    o["--brand-on-primary"] = step(Td, 900);
+    o["--brand-secondary"] = step(Td, 900);
+    o["--brand-on-secondary"] = "var(--color-white)";
+    o["--border-focus"] = step(Td, 400);
+    o["--brand-text"] = step(Td, 50);
+    Object.assign(o, secondaryTexture(`${Td}-900`));
+  } else if (db) {
+    if (db.primary) {
+      const dpHex = isHex(db.primary);
+      const dp = ref(db.primary, lit);
+      o["--brand-primary"] = dp;
+      if (dpHex) {
+        const t = brandTones(db.primary);
+        if (!db.hover) o["--brand-hover"] = t.hover;
+        if (!db.onPrimary) o["--brand-on-primary"] = t.on;
+      }
+    }
+    if (db.hover) o["--brand-hover"] = ref(db.hover, lit);
+    if (db.onPrimary) o["--brand-on-primary"] = ref(db.onPrimary, lit);
+    o["--brand-secondary"] = db.secondary ? ref(db.secondary, lit) : `color-mix(in srgb, ${ref((_h = db.primary) != null ? _h : def.brand.primary, lit)} 15%, transparent)`;
+    if (db.onSecondary) o["--brand-on-secondary"] = ref(db.onSecondary, lit);
+    Object.assign(o, db.secondary ? secondaryTexture(db.secondary) : { "--brand-secondary-texture": "none", "--brand-secondary-texture-size": SECONDARY_TEXTURE_SIZE });
+    if (db.accent) {
+      o["--brand-accent"] = ref(db.accent, lit);
+      o["--brand-accent-light"] = db.accentLight ? ref(db.accentLight, lit) : `color-mix(in srgb, ${ref(db.accent, lit)} 15%, transparent)`;
+    }
+    if (db.onAccent) o["--brand-on-accent"] = ref(db.onAccent, lit);
+    o["--border-focus"] = ref((_j = (_i = db.borderFocus) != null ? _i : db.primary) != null ? _j : def.brand.primary, lit);
+    const pbd = primaryFillBorder((_k = db.primary) != null ? _k : def.brand.primary, `${Sd}-900`);
+    if (pbd) o["--brand-primary-border"] = pbd;
+  } else if (isHex(def.brand.primary)) {
+    const dp = surfaceSafeHex(def.brand.primary, "dark");
+    const t = brandTones(dp);
+    o["--brand-primary"] = dp;
+    o["--brand-hover"] = t.hover;
+    o["--brand-on-primary"] = t.on;
+    o["--border-focus"] = dp;
+  }
+  if (!("--brand-text" in o)) {
+    o["--brand-text"] = isHex(def.brand.primary) ? surfaceSafeHex(((_m = (_l = def.dark) == null ? void 0 : _l.brand) == null ? void 0 : _m.primary) && isHex(def.dark.brand.primary) ? def.dark.brand.primary : def.brand.primary, "dark") : ((_o = (_n = def.dark) == null ? void 0 : _n.brand) == null ? void 0 : _o.primary) ? ref(def.dark.brand.primary, lit) : step(Td, 50);
+  }
+  const hasSecondary = !!db || isNeutralBrand(def) || !!def.brand.secondary;
+  if (hasSecondary) {
+    const translucentSecondary = !!db && !db.secondary;
+    const darkSecRef = (_q = db == null ? void 0 : db.secondary) != null ? _q : isNeutralBrand(def) && !db ? `${Td}-900` : (_p = def.brand.secondary) != null ? _p : null;
+    const chromatic = !translucentSecondary && isChromaticSurface(darkSecRef);
+    o["--brand-secondary-surface"] = chromatic ? "var(--brand-secondary)" : "var(--surface-page)";
+    o["--brand-secondary-band"] = chromatic ? "var(--brand-secondary)" : "transparent";
+  }
+  return o;
+}
+function mixTheme(def) {
+  const A = step(def.surface, 900);
+  const W = "var(--color-white)";
+  const onA = (p) => `color-mix(in srgb, ${W} ${p}%, ${A})`;
+  const lift = (p) => `color-mix(in srgb, ${W} ${p}%, transparent)`;
+  const o = __spreadValues(__spreadValues({}, fonts(def)), brandLight(def, !!def.allowLiteral));
+  o["--surface-page"] = A;
+  o["--surface-default"] = onA(5);
+  o["--surface-raised"] = onA(9);
+  o["--surface-overlay"] = W;
+  o["--surface-invert"] = W;
+  o["--border-subtle"] = lift(8);
+  o["--border-default"] = lift(14);
+  o["--border-strong"] = lift(26);
+  o["--border-control"] = lift(40);
+  o["--border-focus"] = W;
+  o["--border-on-invert"] = `color-mix(in srgb, ${A} 16%, transparent)`;
+  o["--text-primary"] = W;
+  o["--text-secondary"] = onA(68);
+  o["--text-muted"] = onA(46);
+  o["--text-disabled"] = onA(30);
+  o["--text-inverse"] = A;
+  o["--text-placeholder"] = onA(36);
+  o["--icon-default"] = onA(68);
+  o["--brand-text"] = W;
+  return o;
+}
+function resolveExtra(v) {
+  if (v === "transparent") return "transparent";
+  if (/^#/.test(v) || /^mix\(/.test(v) || /^[a-zA-Z]+-\d+$/.test(v) || v === "white" || v === "black")
+    return ref(v, true);
+  return v;
+}
+function applyExtras(l, dark, def) {
+  if (!def.extras) return;
+  for (const [tok, val] of Object.entries(def.extras)) {
+    if (val.light !== void 0) l[tok] = resolveExtra(val.light);
+    if (val.dark !== void 0) dark[tok] = resolveExtra(val.dark);
+  }
+}
+var FONT_SCALE = {
+  xs: "12px",
+  sm: "14px",
+  base: "16px",
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "30px",
+  "4xl": "36px"
+};
+function applyPalettes(l, def) {
+  if (!def.palettes) return;
+  for (const [name, val] of Object.entries(def.palettes)) {
+    if (typeof val === "string") {
+      if (!isHex(val)) continue;
+      const scale = buildScale(val);
+      for (const step2 of SCALE_STEPS) l[`--color-${name}-${step2}`] = scale[step2];
+    } else {
+      for (const [step2, hex] of Object.entries(val)) l[`--color-${name}-${step2}`] = hex;
+    }
+  }
+}
+function applyType(l, def) {
+  if (!def.type) return;
+  for (const [name, style] of Object.entries(def.type)) {
+    const px = (style == null ? void 0 : style.token) ? FONT_SCALE[style.token] : void 0;
+    if (px) l[`--font-size-${name}`] = px;
+  }
+}
+var RADIUS_LEVEL = {
+  square: "0",
+  sharp: "0.25rem",
+  // 4px
+  soft: "0.5rem",
+  // 8px (= base)
+  round: "1rem",
+  // 16px
+  pill: "9999px"
+};
+function applyRadius(l, def) {
+  const r = def.radius;
+  if (!r) return;
+  const roles = typeof r === "string" ? { control: r, card: r, avatar: r } : r;
+  const set = (lvl, token) => {
+    if (lvl && lvl !== "soft") l[token] = RADIUS_LEVEL[lvl];
+  };
+  set(roles.control, "--radius-control");
+  set(roles.card, "--radius-card");
+  set(roles.avatar, "--radius-avatar");
+  if (roles.control && roles.control !== "soft") {
+    l["--radius-tooltip"] = RADIUS_LEVEL[roles.control];
+    l["--radius-toast"] = RADIUS_LEVEL[roles.control === "pill" ? "round" : roles.control];
+  }
+}
+function applyDisplay(l, def) {
+  const d = def.display;
+  if (!d) return;
+  if (d.transform) l["--display-transform"] = d.transform;
+  if (d.tracking === "wide") l["--display-tracking"] = "0.08em";
+}
+function applyGradient(l, def) {
+  const g = def.surfaceGradient;
+  if (!g) return;
+  const pct = Math.min(g, 40);
+  l["--surface-gradient"] = `radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--brand-primary) ${pct}%, transparent), transparent 68%)`;
+}
+var SURFACE_TEXTURE = {
+  dots: {
+    image: "radial-gradient(color-mix(in srgb, var(--text-primary) 8%, transparent) 1px, transparent 1.5px)",
+    size: "16px 16px"
+  },
+  grain: {
+    image: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E")`,
+    size: "120px 120px"
+  },
+  rays: {
+    image: "repeating-conic-gradient(from 0deg at 50% 0%, color-mix(in srgb, var(--brand-primary) 6%, transparent) 0deg 4deg, transparent 4deg 12deg)",
+    size: "auto"
+  },
+  "soft-blobs": {
+    image: "radial-gradient(40% 40% at 15% 10%, color-mix(in srgb, var(--brand-primary) 7%, transparent), transparent 70%), radial-gradient(45% 45% at 90% 18%, color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 6%, transparent), transparent 70%)",
+    size: "auto"
+  }
+};
+function applySurfacePattern(l, def) {
+  const p = def.surfacePattern;
+  if (!p || p === "none") return;
+  const t = SURFACE_TEXTURE[p];
+  l["--surface-texture"] = t.image;
+  l["--surface-texture-size"] = t.size;
+}
+var CARD_SHADOW = {
+  flat: "none",
+  sm: "0 1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent)",
+  md: "0 4px 14px color-mix(in srgb, var(--text-primary) 12%, transparent)"
+};
+var CARD_RATIO = {
+  square: "1 / 1",
+  portrait: "3 / 4",
+  landscape: "4 / 3"
+};
+function applyCard(l, def) {
+  const c = def.card;
+  if (!c) return;
+  if (c.elevation) l["--card-shadow"] = CARD_SHADOW[c.elevation];
+  if (c.imageRatio) l["--card-image-ratio"] = CARD_RATIO[c.imageRatio];
+  if (c.overlay) l["--card-overlay"] = "1";
+}
+function applyHero(l, def) {
+  const h = def.hero;
+  if (!h || h.overlay === void 0) return;
+  const pct = Math.min(Math.max(h.overlay, 0), 90);
+  l["--hero-overlay"] = `linear-gradient(to top, color-mix(in srgb, #000 ${pct}%, transparent), transparent 62%)`;
+}
+function withDerivedHarmony(def) {
+  var _a, _b, _c, _d, _e;
+  let next = def;
+  const b = def.brand;
+  if (isHex(b.primary) && (!b.secondary || !b.accent)) {
+    const h = deriveHarmony(b.primary);
+    next = __spreadProps(__spreadValues({}, next), { brand: __spreadProps(__spreadValues({}, b), { secondary: (_a = b.secondary) != null ? _a : h.secondary, accent: (_b = b.accent) != null ? _b : h.accent }) });
+  }
+  const db = (_c = def.dark) == null ? void 0 : _c.brand;
+  const dp = db == null ? void 0 : db.primary;
+  if (db && dp && isHex(dp) && (!db.secondary || !db.accent)) {
+    const h = deriveHarmony(dp);
+    next = __spreadProps(__spreadValues({}, next), { dark: __spreadProps(__spreadValues({}, next.dark), { brand: __spreadProps(__spreadValues({}, db), { secondary: (_d = db.secondary) != null ? _d : h.secondary, accent: (_e = db.accent) != null ? _e : h.accent }) }) });
+  }
+  return next;
+}
+function generateTheme(def) {
+  def = withDerivedHarmony(def);
+  if (def.scaleMode === "mix") {
+    const l2 = mixTheme(def);
+    const dark2 = {};
+    applyPalettes(l2, def);
+    applyExtras(l2, dark2, def);
+    applyType(l2, def);
+    applyRadius(l2, def);
+    applyDisplay(l2, def);
+    applyGradient(l2, def);
+    applySurfacePattern(l2, def);
+    applyCard(l2, def);
+    applyHero(l2, def);
+    return { supported: true, light: l2, dark: dark2 };
+  }
+  const l = light(def);
+  const full = darkFull(def);
+  const dark = {};
+  for (const [k, v] of Object.entries(full)) if (l[k] !== v) dark[k] = v;
+  applyPalettes(l, def);
+  applyExtras(l, dark, def);
+  applyType(l, def);
+  applyRadius(l, def);
+  applyDisplay(l, def);
+  applyGradient(l, def);
+  applySurfacePattern(l, def);
+  applyCard(l, def);
+  applyHero(l, def);
+  return { supported: true, light: l, dark };
+}
+function resolveTheme(def, opts) {
+  const { light: light2, dark } = generateTheme(def);
+  const isDark = (opts == null ? void 0 : opts.mode) === "dark";
+  return { tokens: isDark ? __spreadValues(__spreadValues({}, light2), dark) : light2, isDark };
+}
+
+// generate/emitCss.ts
+var SECTIONS = [
+  { label: "Tipografia", test: (k) => k.startsWith("--font-") },
+  { label: "Brand", test: (k) => k.startsWith("--brand-") },
+  { label: "Surface", test: (k) => k.startsWith("--surface-") },
+  { label: "Border", test: (k) => k.startsWith("--border-") },
+  { label: "Text", test: (k) => k.startsWith("--text-") },
+  { label: "Icon", test: (k) => k.startsWith("--icon-") },
+  { label: "Radius", test: (k) => k.startsWith("--radius-") }
+];
+function block(map, indent = "  ") {
+  const keys = Object.keys(map);
+  const pad = Math.max(...keys.map((k) => k.length));
+  const lines = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const s of SECTIONS) {
+    const inSec = keys.filter(s.test);
+    if (!inSec.length) continue;
+    lines.push(`${indent}/* \u2500\u2500 ${s.label} \u2500\u2500 */`);
+    for (const k of inSec) {
+      lines.push(`${indent}${k.padEnd(pad)}: ${map[k]};`);
+      seen.add(k);
+    }
+    lines.push("");
+  }
+  const rest = keys.filter((k) => !seen.has(k));
+  if (rest.length) {
+    lines.push(`${indent}/* \u2500\u2500 Extras (decis\xF5es do tema) \u2500\u2500 */`);
+    for (const k of rest) lines.push(`${indent}${k.padEnd(pad)}: ${map[k]};`);
+    lines.push("");
+  }
+  return lines.join("\n").trimEnd();
+}
+function emitCss(def) {
+  const { supported, light: light2, dark, note } = generateTheme(def);
+  if (!supported) throw new Error(`emitCss: ${def.name} n\xE3o suportado \u2014 ${note}`);
+  const Name = def.name[0].toUpperCase() + def.name.slice(1);
+  const header = [
+    "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
+    `   ROJAO DS \u2014 ${Name} theme  \xB7  GERADO (n\xE3o editar \xE0 m\xE3o)`,
+    ...def.description ? [`   ${def.description}`] : [],
+    "",
+    `   Fonte: recipes/index.ts (${def.name}) \u2192 generate/emitCss.ts`,
+    "   Regerar: pnpm build:themes",
+    "",
+    `     <html class="theme-${def.name}">       \u2192 light`,
+    `     <html class="theme-${def.name} dark">  \u2192 dark`,
+    "",
+    // Propriedade do OUTPUT (#98). O gerador é MIT, mas o que sai dele é da marca de quem
+    // gerou — e isso precisa estar escrito NO arquivo, não só na página: quem recebe o
+    // theme.css de um colega meses depois não viu a página nenhuma.
+    "   Este arquivo \xE9 seu. Gerado a partir da sua marca, sem amarra de licen\xE7a:",
+    "   use, edite e redistribua como quiser. O gerador \xE9 MIT; o resultado \xE9 seu.",
+    "   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */"
+  ].join("\n");
+  const lightBlock = `.theme-${def.name} {
+${block(light2)}
+}`;
+  const darkBlock = Object.keys(dark).length ? `
+
+.theme-${def.name}.dark,
+:is(.dark).theme-${def.name} {
+${block(dark)}
+}` : "";
+  return `${header}
+
+${lightBlock}${darkBlock}
+`;
+}
+
+// generate/emitClaudeMd.ts
+function resolveColor(v) {
+  var _a, _b;
+  if (!v) return v;
+  if (v.startsWith("color-mix")) {
+    const mix = v.match(/var\(--color-([a-zA-Z]+)(?:-(\d+))?\)\s+(\d+)%/);
+    return mix ? `${mix[1]}${mix[2] ? "-" + mix[2] : ""} a ${mix[3]}%` : v;
+  }
+  const scale = v.match(/var\(--color-([a-zA-Z]+)-(\d+)\)/);
+  if (scale) {
+    const pal = primitives.color[scale[1]];
+    return (_a = pal == null ? void 0 : pal[scale[2]]) != null ? _a : v;
+  }
+  const flat = v.match(/var\(--color-(white|black)\)/);
+  if (flat) return (_b = primitives.color[flat[1]]) != null ? _b : v;
+  return v;
+}
+var TOKEN_DOCS = [
+  { key: "--brand-primary", use: "bot\xE3o prim\xE1rio, fills de marca" },
+  { key: "--brand-on-primary", use: "texto/\xEDcone sobre o prim\xE1rio" },
+  { key: "--brand-hover", use: "hover do prim\xE1rio" },
+  { key: "--brand-secondary", use: "2\xAA cor de marca \u2014 S\xD3 como fill (com --brand-on-secondary); nunca borda/texto sobre superf\xEDcie" },
+  { key: "--brand-on-secondary", use: "texto sobre o fill secund\xE1rio" },
+  { key: "--brand-accent", use: "destaque, links, sucesso (use com parcim\xF4nia)" },
+  { key: "--brand-accent-light", use: "fundo tingido do accent" },
+  { key: "--brand-on-accent", use: "texto sobre o accent" },
+  { key: "--surface-page", use: "fundo da p\xE1gina" },
+  { key: "--surface-default", use: "cards, pain\xE9is" },
+  { key: "--surface-raised", use: "superf\xEDcie elevada/hover" },
+  { key: "--border-subtle", use: "divis\xF3rias fracas" },
+  { key: "--border-default", use: "bordas de inputs e cards" },
+  { key: "--border-strong", use: "bordas enfatizadas" },
+  { key: "--border-focus", use: "anel de foco" },
+  { key: "--text-primary", use: "t\xEDtulos, corpo" },
+  { key: "--text-secondary", use: "texto de apoio" },
+  { key: "--text-muted", use: "legendas, metadados" },
+  { key: "--text-inverse", use: "texto sobre superf\xEDcies invertidas" },
+  { key: "--icon-default", use: "cor padr\xE3o de \xEDcone" }
+];
+function tokenTable(light2, dark) {
+  const rows = TOKEN_DOCS.filter((t) => t.key in light2).map((t) => {
+    const l = resolveColor(light2[t.key]);
+    const d = t.key in dark ? resolveColor(dark[t.key]) : "\u2014";
+    return `| \`${t.key}\` | ${t.use} | \`${l}\` | \`${d}\` |`;
+  });
+  return [
+    "| Token | Use para | Light | Dark |",
+    "|---|---|---|---|",
+    ...rows
+  ].join("\n");
+}
+function scaleLine(obj, unit = "px") {
+  return Object.entries(obj).map(([k, v]) => `\`${k}\`=${v}${v === 9999 ? "" : unit}`).join(" \xB7 ");
+}
+function fileLabel(target) {
+  return target === "cursor" ? ".cursorrules" : target === "agents" ? "AGENTS.md" : "CLAUDE.md";
+}
+function emitClaudeMd(def, opts = {}) {
+  var _a, _b, _c;
+  const { supported, light: light2, dark, note } = generateTheme(def);
+  if (!supported) throw new Error(`emitClaudeMd: ${def.name} n\xE3o suportado \u2014 ${note}`);
+  const Name = def.name[0].toUpperCase() + def.name.slice(1);
+  const cssUrl = (_a = opts.cssUrl) != null ? _a : null;
+  const bodyFont = typeof ((_b = def.fonts) == null ? void 0 : _b.body) === "string" ? def.fonts.body : "inter";
+  const displayFont = typeof ((_c = def.fonts) == null ? void 0 : _c.display) === "string" ? def.fonts.display : bodyFont;
+  const fontTitle = (s) => s.split("-").map((w) => {
+    var _a2;
+    return ((_a2 = w[0]) == null ? void 0 : _a2.toUpperCase()) + w.slice(1);
+  }).join(" ");
+  const neutral = primitives.color.neutral;
+  return `# Design System \u2014 ${Name} (brand: \`${def.name}\`)
+
+> This project uses the **${Name}** design system. When you build any UI \u2014
+> components, pages, screens \u2014 follow the rules below so every screen looks like the
+> same product. Do not invent colors, fonts, spacing, or radii.
+
+## Brand identity
+- **Name:** ${Name}
+- **Look:** ${isNeutralBrand(def) ? "neutral \u2014 black & white lead, the accent does the talking" : "chromatic \u2014 the brand color leads"}${def.description ? ` \u2014 ${def.description}` : ""}
+- **Body font:** ${fontTitle(bodyFont)} \xB7 **Display font:** ${fontTitle(displayFont)} (load from Google Fonts; never substitute)
+- **Default radius:** \`${primitives.radius.md}px\` (\`rounded-lg\`). Pills/avatars fully round.
+- **Light AND dark are first-class** \u2014 every screen must work in both.
+
+## How to apply
+1. ${cssUrl ? `Import the brand stylesheet once at the app root:
+   \`\`\`html
+   <link rel="stylesheet" href="${cssUrl}" />
+   \`\`\`` : `Put \`${def.name}.css\` (downloaded with this file) in your project and import it
+   once at the app root:
+   \`\`\`css
+   @import "./${def.name}.css";
+   \`\`\`
+   The theme is a file **you own** \u2014 commit it. Nothing here depends on an external host.`}
+2. Put the theme class on \`<html>\`:
+   \`\`\`html
+   <html class="theme-${def.name}">       <!-- light -->
+   <html class="theme-${def.name} dark">  <!-- dark -->
+   \`\`\`
+   > One sheet can hold **several themes** \u2014 each as its own \`theme-<name>\` class.
+   > Switch with the class (one product per app, or many on one page).${cssUrl ? `
+   > Edit the theme at the source and this same URL updates **all your apps at once**.` : ""}
+3. Style everything with the semantic tokens below, as CSS variables \u2014 they already
+   flip between light and dark. You never write a hex value in a component.
+   \`\`\`css
+   .card { background: var(--surface-default); color: var(--text-primary);
+           border: 1px solid var(--border-default); border-radius: ${primitives.radius.md}px; }
+   \`\`\`
+
+## Semantic color tokens \u2014 ALWAYS use these, NEVER hardcode a color
+${tokenTable(light2, dark)}
+
+## Spacing scale (px) \u2014 use ONLY these steps for padding, margin, gap
+${scaleLine(primitives.space)}
+
+## Type scale (font-size, px)
+${scaleLine(primitives.fontSize)}
+
+**Font weights:** ${scaleLine(primitives.fontWeight, "")}
+**Line heights:** ${Object.entries(primitives.lineHeight).map(([k, v]) => `\`${k}\`=${v}`).join(" \xB7 ")}
+
+## Radius (px)
+${scaleLine(primitives.radius)}
+
+## Rules (do / don't)
+- \u2705 Primary button = \`--brand-primary\` bg + \`--brand-on-primary\` text; hover \u2192 \`--brand-hover\`.
+- \u2705 Low-emphasis / secondary action = NEUTRAL outline: \`--border-default\` border + \`--text-secondary\` text (legible by rule, light AND dark). A brand color belongs to the PRIMARY (filled) action, not a secondary outline.
+- \u2705 Page wrapper uses \`--surface-page\`; cards use \`--surface-default\`.
+- \u2705 Body text is \`--text-primary\`; never pure black/white text directly.
+- \u2705 \`--brand-accent\` is the ONLY saturated color \u2014 use it sparingly (links, success, highlights).
+- \u2705 Spacing, font-size and radius come ONLY from the scales above.
+- \u274C Never write a raw hex (\`#000\`, \`bg-black\`) or a Tailwind palette color (\`bg-emerald-500\`, \`text-zinc-700\`) in a component \u2014 map it to a token above.
+- \u274C Never use a brand color (incl. \`--brand-secondary\`) as a border/ring or as text directly on a surface. The engine guarantees contrast ONLY for a fill + its \`--brand-on-*\` text. As a stroke (WCAG 1.4.11, 3:1) or label (1.4.3, 4.5:1) on the surface it can fail \u2014 and in one mode but not the other. Brand colors = fills.
+- \u274C Never introduce a second accent color. Don't hardcode dark-mode colors \u2014 tokens already flip.
+
+## Use with shadcn/ui
+You are NOT replacing shadcn. Use shadcn/ui components and apply THIS brand as the theme:
+map the tokens above onto shadcn's CSS variables (\`--background\` \u2192 \`--surface-page\`,
+\`--foreground\` \u2192 \`--text-primary\`, \`--primary\` \u2192 \`--brand-primary\`, \`--border\` \u2192
+\`--border-default\`, \`--ring\` \u2192 \`--border-focus\`, \`--radius\` \u2192 \`${primitives.radius.md}px\`).
+Build with shadcn's component shapes; paint them with these tokens. Don't restyle components from scratch.
+
+## Primitive palette (reference \u2014 prefer the semantic tokens above)
+\`\`\`
+neutral 50 ${neutral[50]} \xB7 500 ${neutral[500]} \xB7 900 ${neutral[900]}
+\`\`\`
+
+<!-- Generated by Roj\xE3o DS \u2014 file: ${fileLabel("claude")} / ${fileLabel("cursor")} / ${fileLabel("agents")}. Drop it in your project root; Claude Code & Cursor read it automatically. -->
+`;
+}
+
+export { SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, refToHex, relativeLuminance, resolveTheme };