@hewnui/themes 0.0.0-stage → 0.1.1

package/src/authoring/oklch.ts

@@ -0,0 +1,137 @@
+import type { Oklch } from "./types";
+
+const OKLCH_RE =
+  /^oklch\(\s*([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)(?:\s*\/\s*([0-9.]+)%?)?\s*\)$/i;
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+export function formatOklch(color: Oklch): string {
+  const { l, c, h, alpha } = color;
+  const base = `oklch(${round(l)} ${round(c)} ${round(h)}`;
+  if (alpha === undefined || alpha >= 1) return `${base})`;
+  return `${base} / ${Math.round(alpha * 100)}%)`;
+}
+
+export function formatHex(color: Oklch): string {
+  const [r, g, b] = oklchToSrgb(color);
+  const toByte = (channel: number) =>
+    Math.round(Math.min(1, Math.max(0, channel)) * 255);
+  return `#${[toByte(r), toByte(g), toByte(b)]
+    .map((n) => n.toString(16).padStart(2, "0"))
+    .join("")}`;
+}
+
+export function parseColor(input: string): Oklch | null {
+  const trimmed = input.trim();
+  const oklch = trimmed.match(OKLCH_RE);
+  if (oklch) {
+    return {
+      l: Number(oklch[1]),
+      c: Number(oklch[2]),
+      h: Number(oklch[3]),
+      ...(oklch[4] !== undefined
+        ? {
+            alpha:
+              Number(oklch[4]) > 1
+                ? Number(oklch[4]) / 100
+                : Number(oklch[4]),
+          }
+        : {}),
+    };
+  }
+  const hex = trimmed.match(HEX_RE);
+  if (!hex?.[1]) return null;
+  return srgbToOklch(hexToSrgb(hex[1]));
+}
+
+export function relativeLuminance(color: Oklch): number {
+  const [r, g, b] = oklchToSrgb(color);
+  const lin = (channel: number) => {
+    const c = Math.min(1, Math.max(0, channel));
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+export function contrastRatio(a: Oklch, b: Oklch): number {
+  const l1 = relativeLuminance(a);
+  const l2 = relativeLuminance(b);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+/** Pick black or white foreground that meets AA (4.5:1) against the background. */
+export function contrastForeground(
+  background: Oklch,
+  prefer: Oklch,
+  minRatio = 4.5,
+): { color: Oklch; adjusted: boolean } {
+  if (contrastRatio(prefer, background) >= minRatio) {
+    return { color: prefer, adjusted: false };
+  }
+  const white: Oklch = { l: 0.99, c: 0, h: background.h };
+  const black: Oklch = { l: 0.18, c: 0, h: background.h };
+  const whiteRatio = contrastRatio(white, background);
+  const blackRatio = contrastRatio(black, background);
+  return {
+    color: whiteRatio >= blackRatio ? white : black,
+    adjusted: true,
+  };
+}
+
+function round(value: number): number {
+  return Math.round(value * 1000) / 1000;
+}
+
+function hexToSrgb(hex: string): [number, number, number] {
+  const full =
+    hex.length === 3
+      ? hex
+          .split("")
+          .map((ch) => ch + ch)
+          .join("")
+      : hex;
+  const n = Number.parseInt(full, 16);
+  return [(n >> 16) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
+}
+
+/** Compact OKLCH ↔ sRGB (Björn Ottosson). Good enough for contrast floors. */
+function oklchToSrgb(color: Oklch): [number, number, number] {
+  const a = color.c * Math.cos((color.h * Math.PI) / 180);
+  const b = color.c * Math.sin((color.h * Math.PI) / 180);
+  const l_ = color.l + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = color.l - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = color.l - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ ** 3;
+  const m = m_ ** 3;
+  const s = s_ ** 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,
+  ];
+}
+
+function srgbToOklch([r, g, b]: [number, number, number]): Oklch {
+  const toLinear = (c: number) =>
+    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  const rl = toLinear(r);
+  const gl = toLinear(g);
+  const bl = toLinear(b);
+  const l =
+    0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl;
+  const m =
+    0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl;
+  const s =
+    0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const A = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const B = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const C = Math.sqrt(A * A + B * B);
+  let H = (Math.atan2(B, A) * 180) / Math.PI;
+  if (H < 0) H += 360;
+  return { l: L, c: C, h: H };
+}

package/src/authoring/override-map.ts

@@ -0,0 +1,191 @@
+import {
+  BASE_PACK_IDS,
+  SCHEMA_VERSION,
+  type DensityPreset,
+  type GlassOverrides,
+  type MotionCharacter,
+  type NeutralOverrides,
+  type OverrideMap,
+  type SemanticOverrides,
+  type ShapeOverrides,
+} from "./types";
+
+const KEBAB = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const RADIUS = new Set(["sharp", "soft", "rounded", "pill"]);
+const DENSITY = new Set(["compact", "default", "comfortable"]);
+const MOTION = new Set(["snappy", "balanced", "soft"]);
+
+export type NormalizeResult =
+  | { ok: true; map: OverrideMap }
+  | { ok: false; errors: string[] };
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function readNeutrals(
+  value: unknown,
+  errors: string[],
+): NeutralOverrides | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    errors.push("neutrals must be an object");
+    return undefined;
+  }
+  const record = value as Record<string, unknown>;
+  const next: NeutralOverrides = {};
+  if (record.surfaceShift !== undefined) {
+    if (typeof record.surfaceShift !== "number" || Number.isNaN(record.surfaceShift)) {
+      errors.push("neutrals.surfaceShift must be a number");
+    } else {
+      next.surfaceShift = clamp(record.surfaceShift, -0.08, 0.08);
+    }
+  }
+  if (record.chromaScale !== undefined) {
+    if (typeof record.chromaScale !== "number" || Number.isNaN(record.chromaScale)) {
+      errors.push("neutrals.chromaScale must be a number");
+    } else {
+      next.chromaScale = clamp(record.chromaScale, 0.5, 1.5);
+    }
+  }
+  return Object.keys(next).length > 0 ? next : undefined;
+}
+
+function readSemantic(
+  value: unknown,
+  errors: string[],
+): SemanticOverrides | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    errors.push("semantic must be an object");
+    return undefined;
+  }
+  const record = value as Record<string, unknown>;
+  if (record.dangerSeed === undefined) return undefined;
+  if (typeof record.dangerSeed !== "string") {
+    errors.push("semantic.dangerSeed must be a string");
+    return undefined;
+  }
+  return { dangerSeed: record.dangerSeed };
+}
+
+function readShape(
+  value: unknown,
+  errors: string[],
+): ShapeOverrides | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    errors.push("shape must be an object");
+    return undefined;
+  }
+  const record = value as Record<string, unknown>;
+  if (record.density === undefined) return undefined;
+  if (typeof record.density !== "string" || !DENSITY.has(record.density)) {
+    errors.push("shape.density must be compact | default | comfortable");
+    return undefined;
+  }
+  return { density: record.density as DensityPreset };
+}
+
+function readGlass(
+  value: unknown,
+  errors: string[],
+): GlassOverrides | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    errors.push("glass must be an object");
+    return undefined;
+  }
+  const record = value as Record<string, unknown>;
+  if (record.tintStrength === undefined) return undefined;
+  if (typeof record.tintStrength !== "number" || Number.isNaN(record.tintStrength)) {
+    errors.push("glass.tintStrength must be a number");
+    return undefined;
+  }
+  return { tintStrength: clamp(record.tintStrength, 0.5, 1.5) };
+}
+
+export function normalizeOverrideMap(value: unknown): NormalizeResult {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return { ok: false, errors: ["override map must be an object"] };
+  }
+
+  const record = value as Record<string, unknown>;
+  const errors: string[] = [];
+  let schemaVersion =
+    typeof record.schemaVersion === "number" ? record.schemaVersion : 0;
+
+  if (schemaVersion < 1) schemaVersion = SCHEMA_VERSION;
+  if (schemaVersion > SCHEMA_VERSION) {
+    errors.push(
+      `unsupported schemaVersion ${schemaVersion} (max ${SCHEMA_VERSION})`,
+    );
+  }
+
+  if (
+    typeof record.basePackId !== "string" ||
+    !BASE_PACK_IDS.includes(record.basePackId as (typeof BASE_PACK_IDS)[number])
+  ) {
+    errors.push(`basePackId must be one of: ${BASE_PACK_IDS.join(", ")}`);
+  }
+
+  if (record.packId !== undefined) {
+    if (typeof record.packId !== "string" || !KEBAB.test(record.packId)) {
+      errors.push("packId must be kebab-case");
+    } else if (
+      BASE_PACK_IDS.includes(record.packId as (typeof BASE_PACK_IDS)[number])
+    ) {
+      errors.push(`packId collides with curated pack "${record.packId}"`);
+    }
+  }
+
+  if (
+    record.accentSeed !== undefined &&
+    typeof record.accentSeed !== "string"
+  ) {
+    errors.push("accentSeed must be a string");
+  }
+
+  if (
+    record.radiusPreset !== undefined &&
+    (typeof record.radiusPreset !== "string" ||
+      !RADIUS.has(record.radiusPreset))
+  ) {
+    errors.push("radiusPreset must be sharp | soft | rounded | pill");
+  }
+
+  if (
+    record.motion !== undefined &&
+    (typeof record.motion !== "string" || !MOTION.has(record.motion))
+  ) {
+    errors.push("motion must be snappy | balanced | soft");
+  }
+
+  const neutrals = readNeutrals(record.neutrals, errors);
+  const semantic = readSemantic(record.semantic, errors);
+  const shape = readShape(record.shape, errors);
+  const glass = readGlass(record.glass, errors);
+
+  if (errors.length > 0) return { ok: false, errors };
+
+  const map: OverrideMap = {
+    schemaVersion: SCHEMA_VERSION,
+    basePackId: record.basePackId as OverrideMap["basePackId"],
+  };
+  if (typeof record.packId === "string") map.packId = record.packId;
+  if (typeof record.accentSeed === "string") map.accentSeed = record.accentSeed;
+  if (typeof record.radiusPreset === "string" && RADIUS.has(record.radiusPreset)) {
+    map.radiusPreset = record.radiusPreset as NonNullable<
+      OverrideMap["radiusPreset"]
+    >;
+  }
+  if (neutrals) map.neutrals = neutrals;
+  if (semantic) map.semantic = semantic;
+  if (shape) map.shape = shape;
+  if (glass) map.glass = glass;
+  if (typeof record.motion === "string" && MOTION.has(record.motion)) {
+    map.motion = record.motion as MotionCharacter;
+  }
+
+  return { ok: true, map };
+}

package/src/authoring/pack-def.ts

@@ -0,0 +1,11 @@
+import type { CoreModeColors, Oklch, StructuralTokens, ThemeMode } from "./types";
+
+export function o(l: number, c: number, h: number, alpha?: number): Oklch {
+  return alpha === undefined ? { l, c, h } : { l, c, h, alpha };
+}
+
+/** Curated pack definition before status families are merged. */
+export type PackDef = {
+  modes: Partial<Record<ThemeMode, CoreModeColors>>;
+  structural: StructuralTokens;
+};

package/src/authoring/pack-meta.ts

@@ -0,0 +1,66 @@
+import type { BasePackId } from "./types";
+
+/** Curated pack identity copy — mirrors docs/design-hewn-v2.md. */
+export const PACK_IDENTITY: Record<
+  BasePackId,
+  { label: string; summary: string }
+> = {
+  forest: {
+    label: "Forest",
+    summary: "Moss and emerald; grounded organic product UI.",
+  },
+  tide: {
+    label: "Tide",
+    summary: "Mineral neutrals and desaturated teal.",
+  },
+  graphite: {
+    label: "Graphite",
+    summary: "Technical neutral and restrained steel-blue.",
+  },
+  dune: {
+    label: "Dune",
+    summary: "Sand, ochre, soft paper surfaces.",
+  },
+  clay: {
+    label: "Clay",
+    summary: "Warm stone and terracotta.",
+  },
+  ember: {
+    label: "Ember",
+    summary: "Charcoal and burnt orange.",
+  },
+};
+
+export const COLOR_ROLES: Record<string, string> = {
+  background: "Page and app canvas",
+  foreground: "Primary text and icons",
+  surface: "Cards, panels, and elevated chrome",
+  "surface-raised": "Overlays and nested elevation",
+  muted: "Subtle fills and disabled wells",
+  "muted-foreground": "Secondary text and captions",
+  accent: "Primary actions and focus accents",
+  "accent-foreground": "Text/icons on accent",
+  border: "Separators and control outlines",
+  ring: "Focus ring",
+  danger: "Destructive and error states",
+  "glass-tint": "Tinted frosted glass material",
+};
+
+/** Shared design rules for DESIGN.md and agent skills. */
+export const DESIGN_DO = [
+  "Use semantic OKLCH tokens (`--kp-*` / `--color-*`); never hard-code theme hues.",
+  "Typography: IBM Plex Sans (UI), IBM Plex Mono (code/labels), Space Grotesk only for marketing hero H1 and brand wordmark ≥18px.",
+  "Icons: Phosphor. Interactive hit targets ≥40×40px; press feedback `scale(0.96)`.",
+  "Motion: animate transform, opacity, and filter; reduced motion always wins.",
+  "Radius: concentric scale; panels use `--kp-radius-panel` (never full-pill menus/dialogs).",
+  "Glass is a global material — tint, blur, saturation, refraction edge, opaque fallback.",
+] as const;
+
+export const DESIGN_DONT = [
+  "No purple/lila defaults, neon glow, pure black, Inter, emoji, or generic centered heroes.",
+  "Never `transition: all` — list exact properties.",
+  "Never `h-screen` for full-height sections — use `min-h-[100dvh]`.",
+  "No per-component `glass` prop; material is global.",
+  "Do not invent unsupported light/dark combinations for a pack.",
+  "Do not put Space Grotesk in UI chrome, forms, or dense product copy.",
+] as const;

package/src/authoring/packs-dual.ts

@@ -0,0 +1,131 @@
+import { o, type PackDef } from "./pack-def";
+
+/** Dual-mode curated packs. Keep in sync with src/packs/*.css. */
+export const DUAL_PACKS = {
+  forest: {
+    structural: {
+      radiusSm: "0.5rem",
+      radiusMd: "0.75rem",
+      radiusLg: "1rem",
+      radiusPanel: "1rem",
+      density: 1,
+      motionDuration: "260ms",
+      motionStiffness: 360,
+      motionDamping: 28,
+    },
+    modes: {
+      light: {
+        background: o(0.972, 0.012, 145),
+        foreground: o(0.225, 0.028, 145),
+        surface: o(0.995, 0.004, 145),
+        surfaceRaised: o(1, 0, 0),
+        muted: o(0.925, 0.022, 145),
+        mutedForeground: o(0.49, 0.035, 145),
+        accent: o(0.49, 0.105, 148),
+        accentForeground: o(0.985, 0.008, 145),
+        border: o(0.36, 0.035, 145, 0.14),
+        ring: o(0.55, 0.12, 148),
+        danger: o(0.56, 0.17, 27),
+        glassTint: o(0.72, 0.12, 148, 0.28),
+      },
+      dark: {
+        background: o(0.185, 0.018, 145),
+        foreground: o(0.93, 0.018, 145),
+        surface: o(0.225, 0.024, 145),
+        surfaceRaised: o(0.265, 0.028, 145),
+        muted: o(0.285, 0.026, 145),
+        mutedForeground: o(0.715, 0.03, 145),
+        accent: o(0.71, 0.12, 148),
+        accentForeground: o(0.985, 0.01, 145),
+        border: o(0.86, 0.025, 145, 0.13),
+        ring: o(0.71, 0.12, 148),
+        danger: o(0.68, 0.16, 27),
+        glassTint: o(0.63, 0.13, 148, 0.24),
+      },
+    },
+  },
+  tide: {
+    structural: {
+      radiusSm: "0.45rem",
+      radiusMd: "0.7rem",
+      radiusLg: "0.95rem",
+      radiusPanel: "0.95rem",
+      density: 1,
+      motionDuration: "240ms",
+      motionStiffness: 380,
+      motionDamping: 30,
+    },
+    modes: {
+      light: {
+        background: o(0.97, 0.01, 220),
+        foreground: o(0.24, 0.03, 230),
+        surface: o(0.995, 0.004, 220),
+        surfaceRaised: o(1, 0, 0),
+        muted: o(0.93, 0.015, 220),
+        mutedForeground: o(0.48, 0.03, 230),
+        accent: o(0.52, 0.07, 210),
+        accentForeground: o(0.98, 0.01, 210),
+        border: o(0.35, 0.03, 230, 0.14),
+        ring: o(0.58, 0.08, 210),
+        danger: o(0.56, 0.17, 27),
+        glassTint: o(0.72, 0.08, 210, 0.28),
+      },
+      dark: {
+        background: o(0.18, 0.02, 230),
+        foreground: o(0.92, 0.015, 220),
+        surface: o(0.22, 0.025, 230),
+        surfaceRaised: o(0.26, 0.028, 230),
+        muted: o(0.28, 0.025, 230),
+        mutedForeground: o(0.72, 0.025, 220),
+        accent: o(0.72, 0.08, 205),
+        accentForeground: o(0.985, 0.01, 220),
+        border: o(0.86, 0.02, 220, 0.13),
+        ring: o(0.72, 0.08, 205),
+        danger: o(0.68, 0.16, 27),
+        glassTint: o(0.6, 0.09, 205, 0.24),
+      },
+    },
+  },
+  graphite: {
+    structural: {
+      radiusSm: "0.4rem",
+      radiusMd: "0.6rem",
+      radiusLg: "0.85rem",
+      radiusPanel: "0.85rem",
+      density: 1.05,
+      motionDuration: "220ms",
+      motionStiffness: 420,
+      motionDamping: 32,
+    },
+    modes: {
+      light: {
+        background: o(0.965, 0.005, 255),
+        foreground: o(0.23, 0.02, 255),
+        surface: o(0.99, 0.003, 255),
+        surfaceRaised: o(1, 0, 0),
+        muted: o(0.925, 0.008, 255),
+        mutedForeground: o(0.47, 0.02, 255),
+        accent: o(0.48, 0.06, 250),
+        accentForeground: o(0.98, 0.01, 250),
+        border: o(0.34, 0.02, 255, 0.14),
+        ring: o(0.55, 0.07, 250),
+        danger: o(0.55, 0.17, 27),
+        glassTint: o(0.7, 0.06, 250, 0.26),
+      },
+      dark: {
+        background: o(0.17, 0.012, 255),
+        foreground: o(0.93, 0.01, 255),
+        surface: o(0.21, 0.015, 255),
+        surfaceRaised: o(0.25, 0.018, 255),
+        muted: o(0.27, 0.016, 255),
+        mutedForeground: o(0.715, 0.015, 255),
+        accent: o(0.7, 0.07, 245),
+        accentForeground: o(0.985, 0.008, 255),
+        border: o(0.85, 0.012, 255, 0.12),
+        ring: o(0.7, 0.07, 245),
+        danger: o(0.68, 0.16, 27),
+        glassTint: o(0.58, 0.07, 245, 0.22),
+      },
+    },
+  },
+} as const satisfies Record<string, PackDef>;

package/src/authoring/packs-single.ts

@@ -0,0 +1,89 @@
+import { o, type PackDef } from "./pack-def";
+
+/** Single-mode curated packs. Keep in sync with src/packs/*.css. */
+export const SINGLE_PACKS = {
+  dune: {
+    structural: {
+      radiusSm: "0.55rem",
+      radiusMd: "0.85rem",
+      radiusLg: "1.15rem",
+      radiusPanel: "1.15rem",
+      density: 0.95,
+      motionDuration: "280ms",
+      motionStiffness: 300,
+      motionDamping: 26,
+    },
+    modes: {
+      light: {
+        background: o(0.96, 0.02, 85),
+        foreground: o(0.28, 0.04, 65),
+        surface: o(0.985, 0.012, 90),
+        surfaceRaised: o(0.995, 0.006, 95),
+        muted: o(0.92, 0.025, 85),
+        mutedForeground: o(0.5, 0.04, 70),
+        accent: o(0.58, 0.11, 70),
+        accentForeground: o(0.98, 0.01, 90),
+        border: o(0.4, 0.04, 70, 0.16),
+        ring: o(0.62, 0.12, 70),
+        danger: o(0.55, 0.16, 30),
+        glassTint: o(0.78, 0.09, 80, 0.3),
+      },
+    },
+  },
+  clay: {
+    structural: {
+      radiusSm: "0.5rem",
+      radiusMd: "0.8rem",
+      radiusLg: "1.05rem",
+      radiusPanel: "1.05rem",
+      density: 1,
+      motionDuration: "270ms",
+      motionStiffness: 320,
+      motionDamping: 27,
+    },
+    modes: {
+      light: {
+        background: o(0.955, 0.02, 55),
+        foreground: o(0.27, 0.045, 40),
+        surface: o(0.98, 0.012, 50),
+        surfaceRaised: o(0.995, 0.006, 45),
+        muted: o(0.915, 0.025, 50),
+        mutedForeground: o(0.5, 0.045, 40),
+        accent: o(0.55, 0.12, 40),
+        accentForeground: o(0.98, 0.01, 50),
+        border: o(0.4, 0.05, 40, 0.16),
+        ring: o(0.6, 0.13, 40),
+        danger: o(0.54, 0.17, 28),
+        glassTint: o(0.74, 0.1, 45, 0.28),
+      },
+    },
+  },
+  ember: {
+    structural: {
+      radiusSm: "0.45rem",
+      radiusMd: "0.7rem",
+      radiusLg: "0.95rem",
+      radiusPanel: "0.95rem",
+      density: 1.05,
+      motionDuration: "230ms",
+      motionStiffness: 400,
+      motionDamping: 28,
+    },
+    modes: {
+      dark: {
+        background: o(0.17, 0.02, 40),
+        foreground: o(0.93, 0.02, 70),
+        surface: o(0.21, 0.025, 40),
+        surfaceRaised: o(0.255, 0.03, 42),
+        muted: o(0.275, 0.028, 40),
+        mutedForeground: o(0.72, 0.03, 60),
+        accent: o(0.7, 0.15, 50),
+        accentForeground: o(0.985, 0.015, 50),
+        border: o(0.84, 0.03, 60, 0.14),
+        ring: o(0.7, 0.15, 50),
+        danger: o(0.66, 0.17, 28),
+        glassTint: o(0.58, 0.15, 50, 0.28),
+      },
+    },
+  },
+} as const satisfies Record<string, PackDef>;

package/src/authoring/packs.ts

@@ -0,0 +1,43 @@
+import type { PackDef } from "./pack-def";
+import { DUAL_PACKS } from "./packs-dual";
+import { SINGLE_PACKS } from "./packs-single";
+import { PACK_STATUS_HUES, statusColors } from "./status-ramps";
+import type {
+  BasePackId,
+  ModeColorTokens,
+  StructuralTokens,
+  ThemeMode,
+} from "./types";
+
+export type ResolvedPackDef = {
+  modes: Partial<Record<ThemeMode, ModeColorTokens>>;
+  structural: StructuralTokens;
+};
+
+function withStatus(id: BasePackId, def: PackDef): ResolvedPackDef {
+  const hues = PACK_STATUS_HUES[id];
+  const modes: Partial<Record<ThemeMode, ModeColorTokens>> = {};
+  for (const [mode, colors] of Object.entries(def.modes) as Array<
+    [ThemeMode, NonNullable<PackDef["modes"][ThemeMode]>]
+  >) {
+    modes[mode] = {
+      ...colors,
+      ...statusColors(mode, colors.danger, hues),
+    };
+  }
+  return { structural: def.structural, modes };
+}
+
+/** Curated pack color bases (mirrors CSS packs), including status families. */
+export const BASE_PACKS: Record<BasePackId, ResolvedPackDef> = {
+  forest: withStatus("forest", DUAL_PACKS.forest),
+  tide: withStatus("tide", DUAL_PACKS.tide),
+  graphite: withStatus("graphite", DUAL_PACKS.graphite),
+  dune: withStatus("dune", SINGLE_PACKS.dune),
+  clay: withStatus("clay", SINGLE_PACKS.clay),
+  ember: withStatus("ember", SINGLE_PACKS.ember),
+};
+
+export function supportedModes(packId: BasePackId): ThemeMode[] {
+  return Object.keys(BASE_PACKS[packId].modes) as ThemeMode[];
+}