@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/theme/presets/theme-preset-builtins.vibes.js

@@ -0,0 +1,247 @@
+import { VIBES_PALETTE } from "../theme-palette.js";
+import { createBuiltInPreset } from "./theme-preset-builtins.utils.js";
+const VIBES_PULSE_CUSTOM_CSS = [
+    'body {',
+    '  background-image:',
+    '    radial-gradient(circle at 88% 0%, color-mix(in oklch, #789cff 13%, transparent) 0 28%, transparent 56%),',
+    '    radial-gradient(circle at 14% 16%, color-mix(in oklch, #946eff 9%, transparent) 0 22%, transparent 48%),',
+    '    radial-gradient(circle at 72% 86%, color-mix(in oklch, #d946ef 8%, transparent) 0 20%, transparent 46%),',
+    '    linear-gradient(180deg, #fbfaff 0%, #ffffff 48%, #f8fbff 100%);',
+    '  background-attachment: fixed;',
+    '}',
+    '.dark body {',
+    '  background-image:',
+    '    radial-gradient(circle at 84% 0%, color-mix(in oklch, #946eff 22%, transparent) 0 28%, transparent 56%),',
+    '    radial-gradient(circle at 16% 10%, color-mix(in oklch, #789cff 14%, transparent) 0 22%, transparent 48%),',
+    '    radial-gradient(circle at 74% 88%, color-mix(in oklch, #a855f7 10%, transparent) 0 20%, transparent 46%),',
+    '    linear-gradient(180deg, #121018 0%, #181320 58%, #121018 100%);',
+    '  background-attachment: fixed;',
+    '}',
+    '.bg-card {',
+    '  background-image: linear-gradient(145deg, #ffffff 0%, color-mix(in oklch, #946eff 5%, #ffffff) 58%, color-mix(in oklch, #789cff 5%, #ffffff) 100%);',
+    '}',
+    '.dark .bg-card {',
+    '  background-image: linear-gradient(145deg, #1f1a2b 0%, color-mix(in oklch, #946eff 18%, #121018) 64%, color-mix(in oklch, #789cff 9%, #121018) 100%);',
+    '}',
+    '[data-sidebar] {',
+    '  background-image: linear-gradient(180deg, color-mix(in oklch, #ffffff 96%, #789cff) 0%, #ffffff 100%);',
+    '}',
+    '.dark [data-sidebar] {',
+    '  background-image: linear-gradient(180deg, color-mix(in oklch, #17131f 88%, #946eff) 0%, #17131f 100%);',
+    '}'
+].join('\n');
+const CORPO_VIBES_CUSTOM_CSS = [
+    'body {',
+    '  background-image:',
+    '    radial-gradient(circle at 88% 0%, color-mix(in oklch, #9cbcf2 18%, transparent) 0 28%, transparent 56%),',
+    '    radial-gradient(circle at 12% 18%, color-mix(in oklch, #60a5fa 7%, transparent) 0 18%, transparent 44%),',
+    '    linear-gradient(180deg, #f4f5f5 0%, #ffffff 54%, #f7faff 100%);',
+    '  background-attachment: fixed;',
+    '}',
+    '.dark body {',
+    '  background-image:',
+    '    radial-gradient(circle at 82% 0%, color-mix(in oklch, #3167c4 24%, transparent) 0 28%, transparent 56%),',
+    '    radial-gradient(circle at 12% 14%, color-mix(in oklch, #9cbcf2 12%, transparent) 0 20%, transparent 48%),',
+    '    linear-gradient(180deg, #090c11 0%, #111720 58%, #090c11 100%);',
+    '  background-attachment: fixed;',
+    '}',
+    '.bg-card {',
+    '  background-image: linear-gradient(145deg, #ffffff 0%, color-mix(in oklch, #9cbcf2 6%, #ffffff) 62%, color-mix(in oklch, #3167c4 4%, #ffffff) 100%);',
+    '}',
+    '.dark .bg-card {',
+    '  background-image: linear-gradient(145deg, #111720 0%, color-mix(in oklch, #3167c4 16%, #090c11) 62%, color-mix(in oklch, #9cbcf2 8%, #090c11) 100%);',
+    '}',
+    '[data-sidebar] {',
+    '  background-image: linear-gradient(180deg, color-mix(in oklch, #ffffff 96%, #9cbcf2) 0%, #ffffff 100%);',
+    '}',
+    '.dark [data-sidebar] {',
+    '  background-image: linear-gradient(180deg, color-mix(in oklch, #0d121a 88%, #3167c4) 0%, #0d121a 100%);',
+    '}'
+].join('\n');
+export const VIBES_THEME_PRESETS = [
+    createBuiltInPreset('vibes', 'Vibes', 'Neutral surfaces, luminous lime in dark mode, and deep green in light mode', VIBES_PALETTE),
+    createBuiltInPreset('vibes-pulse', 'Vibes Pulse', 'Radiant violet palette with indigo depth, soft fuchsia accents, and blue focus rings', {
+        light: {
+            '--background': '#fbfaff',
+            '--foreground': '#2f2840',
+            '--card': '#ffffff',
+            '--card-foreground': '#2f2840',
+            '--popover': '#ffffff',
+            '--popover-foreground': '#2f2840',
+            '--primary': '#6f52e5',
+            '--primary-foreground': '#fbfaff',
+            '--secondary': '#f0ecff',
+            '--secondary-foreground': '#2f2840',
+            '--muted': '#f7f5fb',
+            '--muted-foreground': '#665d78',
+            '--accent': '#f3e8ff',
+            '--accent-foreground': '#3b0764',
+            '--success': '#059669',
+            '--success-foreground': '#ffffff',
+            '--warning': '#d97706',
+            '--warning-foreground': '#ffffff',
+            '--info': '#789cff',
+            '--info-foreground': '#111018',
+            '--destructive': '#dc2626',
+            '--destructive-foreground': '#ffffff',
+            '--border': '#ddd6ee',
+            '--input': '#ddd6ee',
+            '--ring': '#6f52e5',
+            '--highlight': '#6f52e5',
+            '--highlight-foreground': '#ffffff',
+            '--chart-1': '#6f52e5',
+            '--chart-2': '#789cff',
+            '--chart-3': '#c084fc',
+            '--chart-4': '#f472b6',
+            '--chart-5': '#4f4766',
+            '--sidebar': '#ffffff',
+            '--sidebar-foreground': '#2f2840',
+            '--sidebar-primary': '#6f52e5',
+            '--sidebar-primary-foreground': '#fbfaff',
+            '--sidebar-accent': '#f0ecff',
+            '--sidebar-accent-foreground': '#2f2840',
+            '--sidebar-border': '#ddd6ee',
+            '--sidebar-ring': '#6f52e5',
+            '--brand': '#6f52e5',
+            '--brand-fill': '#6f52e5',
+            '--brand-foreground': '#fbfaff'
+        },
+        dark: {
+            '--background': '#121018',
+            '--foreground': '#f7f4ff',
+            '--card': '#1f1a2b',
+            '--popover': '#1f1a2b',
+            '--popover-foreground': '#f7f4ff',
+            '--card-foreground': '#f7f4ff',
+            '--primary': '#a98dff',
+            '--primary-foreground': '#111018',
+            '--secondary': '#2d253c',
+            '--secondary-foreground': '#f7f4ff',
+            '--muted': '#272130',
+            '--muted-foreground': '#c9c0dc',
+            '--accent': '#3b1d54',
+            '--accent-foreground': '#f3e8ff',
+            '--success': '#10b981',
+            '--success-foreground': '#111018',
+            '--warning': '#f59e0b',
+            '--warning-foreground': '#111018',
+            '--info': '#8facff',
+            '--info-foreground': '#111018',
+            '--destructive': '#ff7a8e',
+            '--destructive-foreground': '#111018',
+            '--border': 'color-mix(in oklch, #4f4766 68%, transparent)',
+            '--input': 'color-mix(in oklch, #4f4766 74%, transparent)',
+            '--ring': '#a98dff',
+            '--highlight': '#a98dff',
+            '--highlight-foreground': '#111018',
+            '--chart-1': '#a98dff',
+            '--chart-2': '#8facff',
+            '--chart-3': '#c084fc',
+            '--chart-4': '#f472b6',
+            '--chart-5': '#4f4766',
+            '--sidebar': '#17131f',
+            '--sidebar-foreground': '#f7f4ff',
+            '--sidebar-primary': '#a98dff',
+            '--sidebar-primary-foreground': '#111018',
+            '--sidebar-accent': '#272130',
+            '--sidebar-accent-foreground': '#f7f4ff',
+            '--sidebar-border': 'color-mix(in oklch, #4f4766 68%, transparent)',
+            '--sidebar-ring': '#a98dff',
+            '--brand': '#a98dff',
+            '--brand-fill': '#a98dff',
+            '--brand-foreground': '#111018'
+        }
+    }, VIBES_PULSE_CUSTOM_CSS),
+    createBuiltInPreset('corpo-vibes', 'Corpo Vibes', 'Polished engineering palette with crisp neutrals, sapphire action, and clean slate status tones', {
+        light: {
+            '--background': '#f4f5f5',
+            '--foreground': '#090c11',
+            '--card': '#ffffff',
+            '--card-foreground': '#090c11',
+            '--popover': '#ffffff',
+            '--popover-foreground': '#090c11',
+            '--primary': '#2563eb',
+            '--primary-foreground': '#ffffff',
+            '--secondary': '#e8effd',
+            '--secondary-foreground': '#090c11',
+            '--muted': '#eef2f7',
+            '--muted-foreground': '#4b5565',
+            '--accent': '#edf4ff',
+            '--accent-foreground': '#090c11',
+            '--success': '#059669',
+            '--success-foreground': '#ffffff',
+            '--warning': '#d97706',
+            '--warning-foreground': '#ffffff',
+            '--info': '#9cbcf2',
+            '--info-foreground': '#090c11',
+            '--destructive': '#dc2626',
+            '--destructive-foreground': '#ffffff',
+            '--border': '#dbe2ec',
+            '--input': '#dbe2ec',
+            '--ring': '#2563eb',
+            '--highlight': '#2563eb',
+            '--highlight-foreground': '#ffffff',
+            '--chart-1': '#2563eb',
+            '--chart-2': '#9cbcf2',
+            '--chart-3': '#059669',
+            '--chart-4': '#d97706',
+            '--chart-5': '#dc2626',
+            '--sidebar': '#ffffff',
+            '--sidebar-foreground': '#090c11',
+            '--sidebar-primary': '#2563eb',
+            '--sidebar-primary-foreground': '#ffffff',
+            '--sidebar-accent': '#edf4ff',
+            '--sidebar-accent-foreground': '#090c11',
+            '--sidebar-border': '#dbe2ec',
+            '--sidebar-ring': '#2563eb',
+            '--brand': '#2563eb',
+            '--brand-fill': '#2563eb',
+            '--brand-foreground': '#ffffff'
+        },
+        dark: {
+            '--background': '#090c11',
+            '--foreground': '#f4f5f5',
+            '--card': '#111720',
+            '--card-foreground': '#f4f5f5',
+            '--popover': '#111720',
+            '--popover-foreground': '#f4f5f5',
+            '--primary': '#9cbcf2',
+            '--primary-foreground': '#090c11',
+            '--secondary': '#1c2c47',
+            '--secondary-foreground': '#f4f5f5',
+            '--muted': '#182233',
+            '--muted-foreground': '#aab7c8',
+            '--accent': '#243d66',
+            '--accent-foreground': '#f4f5f5',
+            '--success': '#10b981',
+            '--success-foreground': '#090c11',
+            '--warning': '#f59e0b',
+            '--warning-foreground': '#090c11',
+            '--info': '#9cbcf2',
+            '--info-foreground': '#090c11',
+            '--destructive': '#f87171',
+            '--destructive-foreground': '#090c11',
+            '--border': 'color-mix(in oklch, #9cbcf2 24%, transparent)',
+            '--input': 'color-mix(in oklch, #9cbcf2 28%, transparent)',
+            '--ring': '#60a5fa',
+            '--highlight': '#60a5fa',
+            '--highlight-foreground': '#090c11',
+            '--chart-1': '#9cbcf2',
+            '--chart-2': '#3167c4',
+            '--chart-3': '#10b981',
+            '--chart-4': '#f59e0b',
+            '--chart-5': '#f87171',
+            '--sidebar': '#0d121a',
+            '--sidebar-foreground': '#f4f5f5',
+            '--sidebar-primary': '#9cbcf2',
+            '--sidebar-primary-foreground': '#090c11',
+            '--sidebar-accent': '#182233',
+            '--sidebar-accent-foreground': '#f4f5f5',
+            '--sidebar-border': 'color-mix(in oklch, #9cbcf2 24%, transparent)',
+            '--sidebar-ring': '#60a5fa',
+            '--brand': '#9cbcf2',
+            '--brand-fill': '#9cbcf2',
+            '--brand-foreground': '#090c11'
+        }
+    }, CORPO_VIBES_CUSTOM_CSS)
+];

package/dist/lib/components/theme/theme-colors.d.ts

@@ -0,0 +1,29 @@
+import * as z from 'zod/v4';
+export type ThemeColorMap = Record<string, string>;
+export type ThemeColors = {
+    light: ThemeColorMap;
+    dark: ThemeColorMap;
+};
+export declare const DEFAULT_LIGHT_COLORS: ThemeColorMap;
+export declare const DEFAULT_DARK_COLORS: ThemeColorMap;
+export type ColorGroupVar = {
+    key: string;
+    label: string;
+    isColor: boolean;
+};
+export type ColorGroup = {
+    name: string;
+    lightOnly?: boolean;
+    vars: ColorGroupVar[];
+};
+export declare const COLOR_GROUPS: ColorGroup[];
+/** A stored theme setting as a settings record holds it: any JSON value (a JSON document string included), or absent. */
+export type StoredThemeValue = z.infer<ReturnType<typeof z.json>> | undefined;
+/** Stored theme colors: the saved JSON document, already-decoded colors, or any other stored value (which decodes to the defaults). */
+export type ThemeColorsSource = StoredThemeValue;
+/** The JSON a saved document holds, or undefined when the text is not JSON. */
+export declare function decodeJsonText(text: string): StoredThemeValue;
+export declare function parseThemeColors(value: ThemeColorsSource): ThemeColors;
+export declare function generateThemeCSS(colors: ThemeColors, customCss?: string): string;
+/** Strip </style> to prevent CSS context escape when injecting into <head> */
+export declare function sanitizeInjectedCSS(css: string): string;

package/dist/lib/components/theme/theme-colors.js

@@ -0,0 +1,158 @@
+import * as z from 'zod/v4';
+import { settleNow } from "../../attempt.js";
+import { VIBES_PALETTE } from "./theme-palette.js";
+import { appendSystemModeDarkFallback } from "../../styles/system-mode-css.js";
+export const DEFAULT_LIGHT_COLORS = VIBES_PALETTE.light;
+export const DEFAULT_DARK_COLORS = VIBES_PALETTE.dark;
+export const COLOR_GROUPS = [
+    {
+        name: 'Base',
+        vars: [
+            { key: '--background', label: 'Background', isColor: true },
+            { key: '--foreground', label: 'Foreground', isColor: true },
+            { key: '--border', label: 'Border', isColor: true },
+            { key: '--input', label: 'Input', isColor: true }
+        ]
+    },
+    {
+        name: 'Highlight',
+        vars: [
+            { key: '--highlight', label: 'Highlight', isColor: true },
+            { key: '--highlight-foreground', label: 'Highlight Foreground', isColor: true },
+            { key: '--ring', label: 'Focus Ring', isColor: true }
+        ]
+    },
+    {
+        name: 'Brand',
+        vars: [
+            { key: '--brand', label: 'Brand', isColor: true },
+            { key: '--brand-fill', label: 'Brand Fill', isColor: true },
+            { key: '--brand-foreground', label: 'Brand Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Primary',
+        vars: [
+            { key: '--primary', label: 'Primary', isColor: true },
+            { key: '--primary-foreground', label: 'Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Secondary',
+        vars: [
+            { key: '--secondary', label: 'Secondary', isColor: true },
+            { key: '--secondary-foreground', label: 'Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Muted',
+        vars: [
+            { key: '--muted', label: 'Muted', isColor: true },
+            { key: '--muted-foreground', label: 'Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Accent',
+        vars: [
+            { key: '--accent', label: 'Accent', isColor: true },
+            { key: '--accent-foreground', label: 'Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Card',
+        vars: [
+            { key: '--card', label: 'Card', isColor: true },
+            { key: '--card-foreground', label: 'Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Popover',
+        vars: [
+            { key: '--popover', label: 'Popover', isColor: true },
+            { key: '--popover-foreground', label: 'Foreground', isColor: true }
+        ]
+    },
+    {
+        name: 'Destructive',
+        vars: [{ key: '--destructive', label: 'Destructive', isColor: true }]
+    },
+    {
+        name: 'Sidebar',
+        vars: [
+            { key: '--sidebar', label: 'Sidebar', isColor: true },
+            { key: '--sidebar-foreground', label: 'Foreground', isColor: true },
+            { key: '--sidebar-primary', label: 'Primary', isColor: true },
+            { key: '--sidebar-primary-foreground', label: 'Primary Foreground', isColor: true },
+            { key: '--sidebar-accent', label: 'Accent', isColor: true },
+            { key: '--sidebar-accent-foreground', label: 'Accent Foreground', isColor: true },
+            { key: '--sidebar-border', label: 'Border', isColor: true },
+            { key: '--sidebar-ring', label: 'Ring', isColor: true }
+        ]
+    },
+    {
+        name: 'Charts',
+        vars: [
+            { key: '--chart-1', label: 'Chart 1', isColor: true },
+            { key: '--chart-2', label: 'Chart 2', isColor: true },
+            { key: '--chart-3', label: 'Chart 3', isColor: true },
+            { key: '--chart-4', label: 'Chart 4', isColor: true },
+            { key: '--chart-5', label: 'Chart 5', isColor: true }
+        ]
+    },
+    {
+        name: 'Radius',
+        lightOnly: true,
+        vars: [{ key: '--radius', label: 'Border Radius', isColor: false }]
+    }
+];
+/** A decoded colors document. Each mode decodes on its own, so one malformed mode never discards the other. */
+const ThemeColorsDocumentSchema = z.object({
+    light: z.record(z.string(), z.json()).optional().catch(undefined),
+    dark: z.record(z.string(), z.json()).optional().catch(undefined)
+});
+/** The string-valued entries of one decoded mode; a non-string entry is dropped, not the whole mode. */
+function stringEntries(mode) {
+    return Object.fromEntries(Object.entries(mode ?? {}).flatMap(([key, entry]) => {
+        const color = z.string().safeParse(entry);
+        return color.success ? [[key, color.data]] : [];
+    }));
+}
+/** The JSON a saved document holds, or undefined when the text is not JSON. */
+export function decodeJsonText(text) {
+    const decoded = settleNow(() => z.json().parse(JSON.parse(text)));
+    // Invalid or non-JSON text names no stored theme document. The parse failure
+    // remains inside the settled value and the public fallback is value-free.
+    return decoded.ok ? decoded.value : undefined;
+}
+export function parseThemeColors(value) {
+    const text = z.string().safeParse(value);
+    const decoded = ThemeColorsDocumentSchema.safeParse(text.success ? decodeJsonText(text.data) : value);
+    if (!decoded.success) {
+        return { light: { ...DEFAULT_LIGHT_COLORS }, dark: { ...DEFAULT_DARK_COLORS } };
+    }
+    return {
+        light: { ...DEFAULT_LIGHT_COLORS, ...stringEntries(decoded.data.light) },
+        dark: { ...DEFAULT_DARK_COLORS, ...stringEntries(decoded.data.dark) }
+    };
+}
+export function generateThemeCSS(colors, customCss = '') {
+    const lightEntries = Object.entries(colors.light);
+    const darkEntries = Object.entries(colors.dark);
+    const parts = [];
+    if (lightEntries.length > 0) {
+        const lightVars = lightEntries.map(([k, v]) => `  ${k}: ${v};`).join('\n');
+        parts.push(`:root {\n${lightVars}\n}`);
+    }
+    if (darkEntries.length > 0) {
+        const darkVars = darkEntries.map(([k, v]) => `  ${k}: ${v};`).join('\n');
+        parts.push(`.dark {\n${darkVars}\n}`);
+    }
+    if (customCss.trim()) {
+        parts.push(customCss.trim());
+    }
+    return appendSystemModeDarkFallback(parts.join('\n\n'));
+}
+/** Strip </style> to prevent CSS context escape when injecting into <head> */
+export function sanitizeInjectedCSS(css) {
+    return css.replace(/<\/style>/gi, '');
+}

package/dist/lib/components/theme/theme-contrast.d.ts

@@ -0,0 +1,51 @@
+/**
+ * WCAG contrast validation for theme presets — the gate every generated (or
+ * hand-authored) theme passes before it can be saved. The repo previously had
+ * no reusable, correct implementation: the only accurate WCAG math lived in an
+ * app-local test helper, and the kit's oklch parser discarded chroma/hue.
+ * This is the ONE home (appshell-apple-design #76).
+ *
+ * Handles the color formats presets actually use: oklch(), #hex (3/6/8),
+ * rgb()/rgba(). Values it cannot parse (color-mix(), var()) are reported as
+ * `skipped`, never silently passed.
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+    alpha: number;
+}
+/** Parse a CSS color literal into gamma-encoded sRGB. Returns null when unsupported. */
+export declare function parseThemeColor(value: string): RGB | null;
+/** WCAG 2.x relative luminance from gamma sRGB. */
+export declare function relativeLuminance(rgb: RGB): number;
+/** WCAG contrast ratio between two color literals; null if either is unparsable. */
+export declare function contrastRatio(foreground: string, background: string): number | null;
+/** The fg/bg pairs a theme must keep legible, with WCAG AA minimums. */
+export declare const THEME_CONTRAST_PAIRS: {
+    foreground: string;
+    background: string;
+    minimum: number;
+}[];
+export interface ThemeContrastFinding {
+    mode: 'light' | 'dark';
+    foreground: string;
+    background: string;
+    ratio: number | null;
+    minimum: number;
+    status: 'pass' | 'fail' | 'skipped';
+}
+export interface ThemeContrastReport {
+    ok: boolean;
+    findings: ThemeContrastFinding[];
+}
+/**
+ * Validate both theme maps of a preset. `colors` may be sparse — pass the
+ * fully-merged maps (defaults + overrides), the same shape the stylesheet
+ * builder consumes. Pairs whose tokens are missing from the merged map are
+ * skipped; unparsable values are skipped but flagged (status 'skipped').
+ */
+export declare function validateThemeContrast(colors: {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+}): ThemeContrastReport;

package/dist/lib/components/theme/theme-contrast.js

@@ -0,0 +1,144 @@
+/**
+ * WCAG contrast validation for theme presets — the gate every generated (or
+ * hand-authored) theme passes before it can be saved. The repo previously had
+ * no reusable, correct implementation: the only accurate WCAG math lived in an
+ * app-local test helper, and the kit's oklch parser discarded chroma/hue.
+ * This is the ONE home (appshell-apple-design #76).
+ *
+ * Handles the color formats presets actually use: oklch(), #hex (3/6/8),
+ * rgb()/rgba(). Values it cannot parse (color-mix(), var()) are reported as
+ * `skipped`, never silently passed.
+ */
+/** oklch(L C H [/ A]) → gamma sRGB via OKLab → LMS → linear sRGB. */
+function oklchToRgb(l, c, hDeg) {
+    const h = (hDeg * Math.PI) / 180;
+    const a = c * Math.cos(h);
+    const b = c * Math.sin(h);
+    const l_ = l + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = l - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = l - 0.0894841775 * a - 1.291485548 * b;
+    const l3 = l_ * l_ * l_;
+    const m3 = m_ * m_ * m_;
+    const s3 = s_ * s_ * s_;
+    const lr = 4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3;
+    const lg = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3;
+    const lb = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3;
+    const gamma = (x) => x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(Math.max(x, 0), 1 / 2.4) - 0.055;
+    return {
+        r: clamp01(gamma(lr)),
+        g: clamp01(gamma(lg)),
+        b: clamp01(gamma(lb))
+    };
+}
+function clamp01(x) {
+    return Math.min(1, Math.max(0, x));
+}
+/** Parse a CSS color literal into gamma-encoded sRGB. Returns null when unsupported. */
+export function parseThemeColor(value) {
+    const input = value.trim();
+    const oklch = input.match(/^oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)(?:deg)?\s*(?:\/\s*([\d.]+%?))?\s*\)$/i);
+    if (oklch) {
+        const num = (raw, pctScale) => raw.endsWith('%') ? (parseFloat(raw) / 100) * pctScale : parseFloat(raw);
+        const l = num(oklch[1], 1);
+        const c = num(oklch[2], 0.4);
+        const h = parseFloat(oklch[3]);
+        const alpha = oklch[4] ? num(oklch[4], 1) : 1;
+        const rgb = oklchToRgb(l, c, h);
+        return { ...rgb, alpha };
+    }
+    const hex = input.match(/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);
+    if (hex) {
+        let raw = hex[1];
+        if (raw.length === 3)
+            raw = raw.replace(/./g, (ch) => ch + ch);
+        const r = parseInt(raw.slice(0, 2), 16) / 255;
+        const g = parseInt(raw.slice(2, 4), 16) / 255;
+        const b = parseInt(raw.slice(4, 6), 16) / 255;
+        const alpha = raw.length === 8 ? parseInt(raw.slice(6, 8), 16) / 255 : 1;
+        return { r, g, b, alpha };
+    }
+    const rgbMatch = input.match(/^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/i);
+    if (rgbMatch) {
+        const alphaRaw = rgbMatch[4];
+        const alpha = alphaRaw
+            ? alphaRaw.endsWith('%')
+                ? parseFloat(alphaRaw) / 100
+                : parseFloat(alphaRaw)
+            : 1;
+        return {
+            r: Number(rgbMatch[1]) / 255,
+            g: Number(rgbMatch[2]) / 255,
+            b: Number(rgbMatch[3]) / 255,
+            alpha
+        };
+    }
+    return null;
+}
+/** WCAG 2.x relative luminance from gamma sRGB. */
+export function relativeLuminance(rgb) {
+    const lin = (ch) => (ch <= 0.04045 ? ch / 12.92 : Math.pow((ch + 0.055) / 1.055, 2.4));
+    return 0.2126 * lin(rgb.r) + 0.7152 * lin(rgb.g) + 0.0722 * lin(rgb.b);
+}
+/** WCAG contrast ratio between two color literals; null if either is unparsable. */
+export function contrastRatio(foreground, background) {
+    const fg = parseThemeColor(foreground);
+    const bg = parseThemeColor(background);
+    if (!fg || !bg)
+        return null;
+    // Composite translucent foregrounds over the background before measuring.
+    const composite = fg.alpha >= 1
+        ? fg
+        : {
+            r: fg.r * fg.alpha + bg.r * (1 - fg.alpha),
+            g: fg.g * fg.alpha + bg.g * (1 - fg.alpha),
+            b: fg.b * fg.alpha + bg.b * (1 - fg.alpha),
+            alpha: 1
+        };
+    const l1 = relativeLuminance(composite);
+    const l2 = relativeLuminance(bg);
+    const [hi, lo] = l1 >= l2 ? [l1, l2] : [l2, l1];
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** The fg/bg pairs a theme must keep legible, with WCAG AA minimums. */
+export const THEME_CONTRAST_PAIRS = [
+    { foreground: '--foreground', background: '--background', minimum: 4.5 },
+    { foreground: '--card-foreground', background: '--card', minimum: 4.5 },
+    { foreground: '--popover-foreground', background: '--popover', minimum: 4.5 },
+    { foreground: '--primary-foreground', background: '--primary', minimum: 4.5 },
+    { foreground: '--secondary-foreground', background: '--secondary', minimum: 4.5 },
+    { foreground: '--muted-foreground', background: '--muted', minimum: 3 },
+    { foreground: '--muted-foreground', background: '--background', minimum: 3 },
+    { foreground: '--accent-foreground', background: '--accent', minimum: 4.5 },
+    { foreground: '--sidebar-foreground', background: '--sidebar', minimum: 4.5 },
+    { foreground: '--sidebar-accent-foreground', background: '--sidebar-accent', minimum: 4.5 },
+    { foreground: '--brand-foreground', background: '--brand-fill', minimum: 4.5 },
+    { foreground: '--highlight-foreground', background: '--highlight', minimum: 4.5 }
+];
+/**
+ * Validate both theme maps of a preset. `colors` may be sparse — pass the
+ * fully-merged maps (defaults + overrides), the same shape the stylesheet
+ * builder consumes. Pairs whose tokens are missing from the merged map are
+ * skipped; unparsable values are skipped but flagged (status 'skipped').
+ */
+export function validateThemeContrast(colors) {
+    const findings = [];
+    for (const mode of ['light', 'dark']) {
+        const map = colors[mode];
+        for (const pair of THEME_CONTRAST_PAIRS) {
+            const fg = map[pair.foreground];
+            const bg = map[pair.background];
+            if (!fg || !bg)
+                continue;
+            const ratio = contrastRatio(fg, bg);
+            findings.push({
+                mode,
+                foreground: pair.foreground,
+                background: pair.background,
+                ratio,
+                minimum: pair.minimum,
+                status: ratio === null ? 'skipped' : ratio >= pair.minimum ? 'pass' : 'fail'
+            });
+        }
+    }
+    return { ok: findings.every((f) => f.status !== 'fail'), findings };
+}