@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/utils/contrast.js

@@ -0,0 +1,158 @@
+import Color from 'color';
+/**
+ * Best-effort conversion of any CSS colour string to hex. Uses the `color`
+ * package first, then a 1×1 canvas (browser only) for formats `color` can't
+ * parse (oklch, oklab, lch, named colours in some cases).
+ */ export function cssColorToHex(cssColor) {
+    if (!cssColor || !cssColor.trim()) return null;
+    try {
+        return Color(cssColor).hex().toString();
+    } catch  {
+    /* fall through to canvas */ }
+    if (typeof document === 'undefined') return null;
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return null;
+        ctx.fillStyle = cssColor;
+        ctx.fillRect(0, 0, 1, 1);
+        const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);
+        return '#' + [
+            r,
+            g,
+            b
+        ].map((n)=>n.toString(16).padStart(2, '0')).join('');
+    } catch  {
+        return null;
+    }
+}
+/**
+ * WCAG contrast ratio (1–21) between two CSS colours, or `null` if either can't
+ * be parsed.
+ */ export function getContrastRatio(a, b) {
+    try {
+        return Number(Color(a).contrast(Color(b)).toFixed(2));
+    } catch  {
+        const ah = cssColorToHex(a);
+        const bh = cssColorToHex(b);
+        if (!ah || !bh) return null;
+        try {
+            return Number(Color(ah).contrast(Color(bh)).toFixed(2));
+        } catch  {
+            return null;
+        }
+    }
+}
+/**
+ * Map a contrast ratio to a WCAG conformance level.
+ * @param ratio Contrast ratio (1–21).
+ * @param isLargeText Use the relaxed large-text thresholds (≥18.66px bold / ≥24px).
+ */ export function getWcagLevel(ratio, isLargeText = false) {
+    if (isLargeText) {
+        if (ratio >= 4.5) return 'AAA';
+        if (ratio >= 3) return 'AA';
+        return 'fail';
+    }
+    if (ratio >= 7) return 'AAA';
+    if (ratio >= 4.5) return 'AA';
+    if (ratio >= 3) return 'AA Large';
+    return 'fail';
+}
+/**
+ * Suggest the nearest accessible variant of `foreground` (preserving hue and
+ * saturation, adjusting only lightness) that meets `target` contrast against
+ * `background`. Returns a hex string, or `null` if none is reachable / parsing
+ * failed.
+ */ export function suggestAccessibleColor(foreground, background, target = 4.5) {
+    try {
+        const bg = Color(background);
+        const fg = Color(foreground);
+        const baseLightness = fg.hsl().object().l ?? 50;
+        let best = null;
+        let bestDelta = Number.POSITIVE_INFINITY;
+        for(let l = 0; l <= 100; l++){
+            const candidate = fg.lightness(l);
+            const ratio = candidate.contrast(bg);
+            if (ratio >= target) {
+                const delta = Math.abs(l - baseLightness);
+                if (delta < bestDelta) {
+                    bestDelta = delta;
+                    best = candidate.hex().toString();
+                }
+            }
+        }
+        return best;
+    } catch  {
+        return null;
+    }
+}
+/**
+ * The foreground/background token pairs that matter for readability. Each entry
+ * is audited against the WCAG AA normal-text threshold (4.5:1).
+ */ export const CONTRAST_PAIRS = [
+    {
+        foregroundKey: 'foreground',
+        backgroundKey: 'background',
+        label: 'Body text'
+    },
+    {
+        foregroundKey: 'mutedForeground',
+        backgroundKey: 'background',
+        label: 'Muted text'
+    },
+    {
+        foregroundKey: 'primaryForeground',
+        backgroundKey: 'primary',
+        label: 'Primary button'
+    },
+    {
+        foregroundKey: 'secondaryForeground',
+        backgroundKey: 'secondary',
+        label: 'Secondary button'
+    },
+    {
+        foregroundKey: 'accentForeground',
+        backgroundKey: 'accent',
+        label: 'Accent'
+    },
+    {
+        foregroundKey: 'cardForeground',
+        backgroundKey: 'card',
+        label: 'Card text'
+    },
+    {
+        foregroundKey: 'destructiveForeground',
+        backgroundKey: 'destructive',
+        label: 'Destructive'
+    }
+];
+/**
+ * Audit a colour-mode palette against {@link CONTRAST_PAIRS}. Pairs whose colours
+ * are missing/unparseable are skipped.
+ */ export function auditThemePalette(colors, target = 4.5) {
+    const results = [];
+    for (const pair of CONTRAST_PAIRS){
+        const foreground = colors[pair.foregroundKey];
+        const background = colors[pair.backgroundKey];
+        if (!foreground || !background) continue;
+        const ratio = getContrastRatio(foreground, background);
+        if (ratio == null) continue;
+        const passes = ratio >= target;
+        results.push({
+            foregroundKey: pair.foregroundKey,
+            backgroundKey: pair.backgroundKey,
+            label: pair.label,
+            foreground,
+            background,
+            ratio,
+            level: getWcagLevel(ratio),
+            passes,
+            suggestion: passes ? null : suggestAccessibleColor(foreground, background, target)
+        });
+    }
+    return results;
+}
+
+//# sourceMappingURL=contrast.js.map

package/dist/utils/contrast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/contrast.ts"],"sourcesContent":["import Color from 'color'\n\n/**\n * WCAG contrast & accessibility helpers shared by the admin colour picker and\n * the palette accessibility audit. All functions are colour-format agnostic\n * (hex / rgb / hsl via the `color` package, with a canvas fallback for modern\n * formats such as oklch when running in the browser).\n */\n\nexport type WcagLevel = 'AAA' | 'AA' | 'AA Large' | 'fail'\n\n/**\n * Best-effort conversion of any CSS colour string to hex. Uses the `color`\n * package first, then a 1×1 canvas (browser only) for formats `color` can't\n * parse (oklch, oklab, lch, named colours in some cases).\n */\nexport function cssColorToHex(cssColor: string): string | null {\n  if (!cssColor || !cssColor.trim()) return null\n  try {\n    return Color(cssColor).hex().toString()\n  } catch {\n    /* fall through to canvas */\n  }\n  if (typeof document === 'undefined') return null\n  try {\n    const canvas = document.createElement('canvas')\n    canvas.width = 1\n    canvas.height = 1\n    const ctx = canvas.getContext('2d')\n    if (!ctx) return null\n    ctx.fillStyle = cssColor\n    ctx.fillRect(0, 0, 1, 1)\n    const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n    return '#' + [r, g, b].map((n) => (n as number).toString(16).padStart(2, '0')).join('')\n  } catch {\n    return null\n  }\n}\n\n/**\n * WCAG contrast ratio (1–21) between two CSS colours, or `null` if either can't\n * be parsed.\n */\nexport function getContrastRatio(a: string, b: string): number | null {\n  try {\n    return Number(Color(a).contrast(Color(b)).toFixed(2))\n  } catch {\n    const ah = cssColorToHex(a)\n    const bh = cssColorToHex(b)\n    if (!ah || !bh) return null\n    try {\n      return Number(Color(ah).contrast(Color(bh)).toFixed(2))\n    } catch {\n      return null\n    }\n  }\n}\n\n/**\n * Map a contrast ratio to a WCAG conformance level.\n * @param ratio Contrast ratio (1–21).\n * @param isLargeText Use the relaxed large-text thresholds (≥18.66px bold / ≥24px).\n */\nexport function getWcagLevel(ratio: number, isLargeText = false): WcagLevel {\n  if (isLargeText) {\n    if (ratio >= 4.5) return 'AAA'\n    if (ratio >= 3) return 'AA'\n    return 'fail'\n  }\n  if (ratio >= 7) return 'AAA'\n  if (ratio >= 4.5) return 'AA'\n  if (ratio >= 3) return 'AA Large'\n  return 'fail'\n}\n\n/**\n * Suggest the nearest accessible variant of `foreground` (preserving hue and\n * saturation, adjusting only lightness) that meets `target` contrast against\n * `background`. Returns a hex string, or `null` if none is reachable / parsing\n * failed.\n */\nexport function suggestAccessibleColor(\n  foreground: string,\n  background: string,\n  target = 4.5,\n): string | null {\n  try {\n    const bg = Color(background)\n    const fg = Color(foreground)\n    const baseLightness = fg.hsl().object().l ?? 50\n\n    let best: string | null = null\n    let bestDelta = Number.POSITIVE_INFINITY\n\n    for (let l = 0; l <= 100; l++) {\n      const candidate = fg.lightness(l)\n      const ratio = candidate.contrast(bg)\n      if (ratio >= target) {\n        const delta = Math.abs(l - baseLightness)\n        if (delta < bestDelta) {\n          bestDelta = delta\n          best = candidate.hex().toString()\n        }\n      }\n    }\n    return best\n  } catch {\n    return null\n  }\n}\n\n/** A colour-mode object keyed by token name (e.g. `background`, `primary`). */\nexport type AuditColors = Record<string, string | null | undefined>\n\nexport interface ContrastPairResult {\n  /** Token key holding the foreground colour. */\n  foregroundKey: string\n  /** Token key holding the background colour. */\n  backgroundKey: string\n  /** Human-readable description of what the pair represents. */\n  label: string\n  foreground: string\n  background: string\n  ratio: number\n  level: WcagLevel\n  passes: boolean\n  /** Nearest accessible foreground (hex) when the pair fails AA, else null. */\n  suggestion: string | null\n}\n\n/**\n * The foreground/background token pairs that matter for readability. Each entry\n * is audited against the WCAG AA normal-text threshold (4.5:1).\n */\nexport const CONTRAST_PAIRS: Array<{\n  foregroundKey: string\n  backgroundKey: string\n  label: string\n}> = [\n  { foregroundKey: 'foreground', backgroundKey: 'background', label: 'Body text' },\n  { foregroundKey: 'mutedForeground', backgroundKey: 'background', label: 'Muted text' },\n  { foregroundKey: 'primaryForeground', backgroundKey: 'primary', label: 'Primary button' },\n  { foregroundKey: 'secondaryForeground', backgroundKey: 'secondary', label: 'Secondary button' },\n  { foregroundKey: 'accentForeground', backgroundKey: 'accent', label: 'Accent' },\n  { foregroundKey: 'cardForeground', backgroundKey: 'card', label: 'Card text' },\n  { foregroundKey: 'destructiveForeground', backgroundKey: 'destructive', label: 'Destructive' },\n]\n\n/**\n * Audit a colour-mode palette against {@link CONTRAST_PAIRS}. Pairs whose colours\n * are missing/unparseable are skipped.\n */\nexport function auditThemePalette(colors: AuditColors, target = 4.5): ContrastPairResult[] {\n  const results: ContrastPairResult[] = []\n\n  for (const pair of CONTRAST_PAIRS) {\n    const foreground = colors[pair.foregroundKey]\n    const background = colors[pair.backgroundKey]\n    if (!foreground || !background) continue\n\n    const ratio = getContrastRatio(foreground, background)\n    if (ratio == null) continue\n\n    const passes = ratio >= target\n    results.push({\n      foregroundKey: pair.foregroundKey,\n      backgroundKey: pair.backgroundKey,\n      label: pair.label,\n      foreground,\n      background,\n      ratio,\n      level: getWcagLevel(ratio),\n      passes,\n      suggestion: passes ? null : suggestAccessibleColor(foreground, background, target),\n    })\n  }\n\n  return results\n}\n"],"names":["Color","cssColorToHex","cssColor","trim","hex","toString","document","canvas","createElement","width","height","ctx","getContext","fillStyle","fillRect","r","g","b","Array","from","getImageData","data","map","n","padStart","join","getContrastRatio","a","Number","contrast","toFixed","ah","bh","getWcagLevel","ratio","isLargeText","suggestAccessibleColor","foreground","background","target","bg","fg","baseLightness","hsl","object","l","best","bestDelta","POSITIVE_INFINITY","candidate","lightness","delta","Math","abs","CONTRAST_PAIRS","foregroundKey","backgroundKey","label","auditThemePalette","colors","results","pair","passes","push","level","suggestion"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AAWzB;;;;CAIC,GACD,OAAO,SAASC,cAAcC,QAAgB;IAC5C,IAAI,CAACA,YAAY,CAACA,SAASC,IAAI,IAAI,OAAO;IAC1C,IAAI;QACF,OAAOH,MAAME,UAAUE,GAAG,GAAGC,QAAQ;IACvC,EAAE,OAAM;IACN,0BAA0B,GAC5B;IACA,IAAI,OAAOC,aAAa,aAAa,OAAO;IAC5C,IAAI;QACF,MAAMC,SAASD,SAASE,aAAa,CAAC;QACtCD,OAAOE,KAAK,GAAG;QACfF,OAAOG,MAAM,GAAG;QAChB,MAAMC,MAAMJ,OAAOK,UAAU,CAAC;QAC9B,IAAI,CAACD,KAAK,OAAO;QACjBA,IAAIE,SAAS,GAAGX;QAChBS,IAAIG,QAAQ,CAAC,GAAG,GAAG,GAAG;QACtB,MAAM,CAACC,GAAGC,GAAGC,EAAE,GAAGC,MAAMC,IAAI,CAACR,IAAIS,YAAY,CAAC,GAAG,GAAG,GAAG,GAAGC,IAAI;QAC9D,OAAO,MAAM;YAACN;YAAGC;YAAGC;SAAE,CAACK,GAAG,CAAC,CAACC,IAAM,AAACA,EAAalB,QAAQ,CAAC,IAAImB,QAAQ,CAAC,GAAG,MAAMC,IAAI,CAAC;IACtF,EAAE,OAAM;QACN,OAAO;IACT;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,iBAAiBC,CAAS,EAAEV,CAAS;IACnD,IAAI;QACF,OAAOW,OAAO5B,MAAM2B,GAAGE,QAAQ,CAAC7B,MAAMiB,IAAIa,OAAO,CAAC;IACpD,EAAE,OAAM;QACN,MAAMC,KAAK9B,cAAc0B;QACzB,MAAMK,KAAK/B,cAAcgB;QACzB,IAAI,CAACc,MAAM,CAACC,IAAI,OAAO;QACvB,IAAI;YACF,OAAOJ,OAAO5B,MAAM+B,IAAIF,QAAQ,CAAC7B,MAAMgC,KAAKF,OAAO,CAAC;QACtD,EAAE,OAAM;YACN,OAAO;QACT;IACF;AACF;AAEA;;;;CAIC,GACD,OAAO,SAASG,aAAaC,KAAa,EAAEC,cAAc,KAAK;IAC7D,IAAIA,aAAa;QACf,IAAID,SAAS,KAAK,OAAO;QACzB,IAAIA,SAAS,GAAG,OAAO;QACvB,OAAO;IACT;IACA,IAAIA,SAAS,GAAG,OAAO;IACvB,IAAIA,SAAS,KAAK,OAAO;IACzB,IAAIA,SAAS,GAAG,OAAO;IACvB,OAAO;AACT;AAEA;;;;;CAKC,GACD,OAAO,SAASE,uBACdC,UAAkB,EAClBC,UAAkB,EAClBC,SAAS,GAAG;IAEZ,IAAI;QACF,MAAMC,KAAKxC,MAAMsC;QACjB,MAAMG,KAAKzC,MAAMqC;QACjB,MAAMK,gBAAgBD,GAAGE,GAAG,GAAGC,MAAM,GAAGC,CAAC,IAAI;QAE7C,IAAIC,OAAsB;QAC1B,IAAIC,YAAYnB,OAAOoB,iBAAiB;QAExC,IAAK,IAAIH,IAAI,GAAGA,KAAK,KAAKA,IAAK;YAC7B,MAAMI,YAAYR,GAAGS,SAAS,CAACL;YAC/B,MAAMX,QAAQe,UAAUpB,QAAQ,CAACW;YACjC,IAAIN,SAASK,QAAQ;gBACnB,MAAMY,QAAQC,KAAKC,GAAG,CAACR,IAAIH;gBAC3B,IAAIS,QAAQJ,WAAW;oBACrBA,YAAYI;oBACZL,OAAOG,UAAU7C,GAAG,GAAGC,QAAQ;gBACjC;YACF;QACF;QACA,OAAOyC;IACT,EAAE,OAAM;QACN,OAAO;IACT;AACF;AAqBA;;;CAGC,GACD,OAAO,MAAMQ,iBAIR;IACH;QAAEC,eAAe;QAAcC,eAAe;QAAcC,OAAO;IAAY;IAC/E;QAAEF,eAAe;QAAmBC,eAAe;QAAcC,OAAO;IAAa;IACrF;QAAEF,eAAe;QAAqBC,eAAe;QAAWC,OAAO;IAAiB;IACxF;QAAEF,eAAe;QAAuBC,eAAe;QAAaC,OAAO;IAAmB;IAC9F;QAAEF,eAAe;QAAoBC,eAAe;QAAUC,OAAO;IAAS;IAC9E;QAAEF,eAAe;QAAkBC,eAAe;QAAQC,OAAO;IAAY;IAC7E;QAAEF,eAAe;QAAyBC,eAAe;QAAeC,OAAO;IAAc;CAC9F,CAAA;AAED;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,MAAmB,EAAEpB,SAAS,GAAG;IACjE,MAAMqB,UAAgC,EAAE;IAExC,KAAK,MAAMC,QAAQP,eAAgB;QACjC,MAAMjB,aAAasB,MAAM,CAACE,KAAKN,aAAa,CAAC;QAC7C,MAAMjB,aAAaqB,MAAM,CAACE,KAAKL,aAAa,CAAC;QAC7C,IAAI,CAACnB,cAAc,CAACC,YAAY;QAEhC,MAAMJ,QAAQR,iBAAiBW,YAAYC;QAC3C,IAAIJ,SAAS,MAAM;QAEnB,MAAM4B,SAAS5B,SAASK;QACxBqB,QAAQG,IAAI,CAAC;YACXR,eAAeM,KAAKN,aAAa;YACjCC,eAAeK,KAAKL,aAAa;YACjCC,OAAOI,KAAKJ,KAAK;YACjBpB;YACAC;YACAJ;YACA8B,OAAO/B,aAAaC;YACpB4B;YACAG,YAAYH,SAAS,OAAO1B,uBAAuBC,YAAYC,YAAYC;QAC7E;IACF;IAEA,OAAOqB;AACT"}

package/dist/utils/exportTokens.d.ts

@@ -0,0 +1,30 @@
+/** A minimal W3C design-tokens group node. */
+type TokenLeaf = {
+    $value: string;
+    $type: 'color' | 'dimension';
+};
+type TokenGroup = {
+    [key: string]: TokenLeaf | TokenGroup;
+};
+/**
+ * Build a W3C Design Tokens document from a theme configuration. Colours are
+ * grouped under `color.light` / `color.dark`; border radius under `radius`.
+ */
+export declare function generateDesignTokens(themeConfiguration: unknown): TokenGroup;
+/** Pretty-printed JSON string of {@link generateDesignTokens}. */
+export declare function generateDesignTokensJson(themeConfiguration: unknown): string;
+/**
+ * Generate a Tailwind v4 `@theme inline { … }` block. The utilities reference the
+ * runtime CSS variables (`var(--primary)` …) so colours follow the active theme,
+ * light/dark mode and live preview without rebuilding Tailwind.
+ *
+ * Drop the output into your global stylesheet (after `@import "tailwindcss";`).
+ */
+export declare function generateTailwindV4Theme(themeConfiguration: unknown): string;
+/**
+ * Generate a Tailwind v3 `theme.extend` config fragment (as a JS string) mapping
+ * colours to the runtime CSS variables. For projects still on Tailwind v3.
+ */
+export declare function generateTailwindV3Theme(themeConfiguration: unknown): string;
+export {};
+//# sourceMappingURL=exportTokens.d.ts.map

package/dist/utils/exportTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exportTokens.d.ts","sourceRoot":"","sources":["../../src/utils/exportTokens.ts"],"names":[],"mappings":"AAyDA,8CAA8C;AAC9C,KAAK,SAAS,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,GAAG,WAAW,CAAA;CAAE,CAAA;AACjE,KAAK,UAAU,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;CAAE,CAAA;AAE3D;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAsB5E;AAED,kEAAkE;AAClE,wBAAgB,wBAAwB,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAE5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAK3E;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAiB3E"}

package/dist/utils/exportTokens.js

@@ -0,0 +1,183 @@
+import { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js';
+import { resolveThemeConfiguration } from './resolveThemeConfiguration.js';
+/** Colour token key → CSS variable → Tailwind utility name. */ const COLOR_TOKENS = [
+    {
+        key: 'background',
+        cssVar: '--background',
+        tw: 'background'
+    },
+    {
+        key: 'foreground',
+        cssVar: '--foreground',
+        tw: 'foreground'
+    },
+    {
+        key: 'card',
+        cssVar: '--card',
+        tw: 'card'
+    },
+    {
+        key: 'cardForeground',
+        cssVar: '--card-foreground',
+        tw: 'card-foreground'
+    },
+    {
+        key: 'popover',
+        cssVar: '--popover',
+        tw: 'popover'
+    },
+    {
+        key: 'popoverForeground',
+        cssVar: '--popover-foreground',
+        tw: 'popover-foreground'
+    },
+    {
+        key: 'primary',
+        cssVar: '--primary',
+        tw: 'primary'
+    },
+    {
+        key: 'primaryForeground',
+        cssVar: '--primary-foreground',
+        tw: 'primary-foreground'
+    },
+    {
+        key: 'secondary',
+        cssVar: '--secondary',
+        tw: 'secondary'
+    },
+    {
+        key: 'secondaryForeground',
+        cssVar: '--secondary-foreground',
+        tw: 'secondary-foreground'
+    },
+    {
+        key: 'muted',
+        cssVar: '--muted',
+        tw: 'muted'
+    },
+    {
+        key: 'mutedForeground',
+        cssVar: '--muted-foreground',
+        tw: 'muted-foreground'
+    },
+    {
+        key: 'accent',
+        cssVar: '--accent',
+        tw: 'accent'
+    },
+    {
+        key: 'accentForeground',
+        cssVar: '--accent-foreground',
+        tw: 'accent-foreground'
+    },
+    {
+        key: 'destructive',
+        cssVar: '--destructive',
+        tw: 'destructive'
+    },
+    {
+        key: 'destructiveForeground',
+        cssVar: '--destructive-foreground',
+        tw: 'destructive-foreground'
+    },
+    {
+        key: 'border',
+        cssVar: '--border',
+        tw: 'border'
+    },
+    {
+        key: 'input',
+        cssVar: '--input',
+        tw: 'input'
+    },
+    {
+        key: 'ring',
+        cssVar: '--ring',
+        tw: 'ring'
+    }
+];
+const asColorRecord = (mode)=>{
+    const out = {};
+    if (mode && typeof mode === 'object') {
+        for (const { key } of COLOR_TOKENS){
+            const value = mode[key];
+            if (typeof value === 'string' && value.trim()) out[key] = value.trim();
+        }
+    }
+    return out;
+};
+const resolveRadiusValue = (borderRadius)=>{
+    const config = getBorderRadiusConfig(borderRadius ?? 'medium');
+    if (typeof config?.css === 'string') return config.css;
+    const record = config?.css ?? {};
+    return record['--radius-default'] ?? record['--radius-large'] ?? '0.5rem';
+};
+/**
+ * Build a W3C Design Tokens document from a theme configuration. Colours are
+ * grouped under `color.light` / `color.dark`; border radius under `radius`.
+ */ export function generateDesignTokens(themeConfiguration) {
+    const resolved = resolveThemeConfiguration(themeConfiguration);
+    const light = asColorRecord(resolved.lightMode);
+    const dark = asColorRecord(resolved.darkMode);
+    const toGroup = (colors)=>{
+        const group = {};
+        for (const { key } of COLOR_TOKENS){
+            if (colors[key]) group[key] = {
+                $value: colors[key],
+                $type: 'color'
+            };
+        }
+        return group;
+    };
+    return {
+        color: {
+            light: toGroup(light),
+            dark: toGroup(dark)
+        },
+        radius: {
+            base: {
+                $value: resolveRadiusValue(resolved.borderRadius),
+                $type: 'dimension'
+            }
+        }
+    };
+}
+/** Pretty-printed JSON string of {@link generateDesignTokens}. */ export function generateDesignTokensJson(themeConfiguration) {
+    return JSON.stringify(generateDesignTokens(themeConfiguration), null, 2);
+}
+/**
+ * Generate a Tailwind v4 `@theme inline { … }` block. The utilities reference the
+ * runtime CSS variables (`var(--primary)` …) so colours follow the active theme,
+ * light/dark mode and live preview without rebuilding Tailwind.
+ *
+ * Drop the output into your global stylesheet (after `@import "tailwindcss";`).
+ */ export function generateTailwindV4Theme(themeConfiguration) {
+    const resolved = resolveThemeConfiguration(themeConfiguration);
+    const lines = COLOR_TOKENS.map(({ cssVar, tw })=>`  --color-${tw}: var(${cssVar});`);
+    lines.push(`  --radius: ${resolveRadiusValue(resolved.borderRadius)};`);
+    return `@theme inline {\n${lines.join('\n')}\n}`;
+}
+/**
+ * Generate a Tailwind v3 `theme.extend` config fragment (as a JS string) mapping
+ * colours to the runtime CSS variables. For projects still on Tailwind v3.
+ */ export function generateTailwindV3Theme(themeConfiguration) {
+    const resolved = resolveThemeConfiguration(themeConfiguration);
+    const colorEntries = COLOR_TOKENS.map(({ cssVar, tw })=>`        '${tw}': 'var(${cssVar})',`);
+    return [
+        'module.exports = {',
+        '  theme: {',
+        '    extend: {',
+        '      colors: {',
+        colorEntries.join('\n'),
+        '      },',
+        '      borderRadius: {',
+        `        DEFAULT: '${resolveRadiusValue(resolved.borderRadius)}',`,
+        '      },',
+        '    },',
+        '  },',
+        '}'
+    ].join('\n');
+}
+
+//# sourceMappingURL=exportTokens.js.map

package/dist/utils/exportTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/exportTokens.ts"],"sourcesContent":["import type { BorderRadiusPreset } from '../providers/Theme/types.js'\nimport { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\nimport { resolveThemeConfiguration } from './resolveThemeConfiguration.js'\n\n/**\n * Export the resolved theme as portable design tokens.\n *\n * - {@link generateDesignTokens} → W3C Design Tokens JSON (Figma Tokens /\n *   Style Dictionary interop).\n * - {@link generateTailwindV4Theme} → a Tailwind v4 `@theme inline { … }` block\n *   that maps utilities (`bg-primary`, `text-foreground`, …) to the CSS variables\n *   the plugin injects at runtime, so colours stay theme-driven.\n */\n\ntype TokenColumn = { key: string; cssVar: string; tw: string }\n\n/** Colour token key → CSS variable → Tailwind utility name. */\nconst COLOR_TOKENS: TokenColumn[] = [\n  { key: 'background', cssVar: '--background', tw: 'background' },\n  { key: 'foreground', cssVar: '--foreground', tw: 'foreground' },\n  { key: 'card', cssVar: '--card', tw: 'card' },\n  { key: 'cardForeground', cssVar: '--card-foreground', tw: 'card-foreground' },\n  { key: 'popover', cssVar: '--popover', tw: 'popover' },\n  { key: 'popoverForeground', cssVar: '--popover-foreground', tw: 'popover-foreground' },\n  { key: 'primary', cssVar: '--primary', tw: 'primary' },\n  { key: 'primaryForeground', cssVar: '--primary-foreground', tw: 'primary-foreground' },\n  { key: 'secondary', cssVar: '--secondary', tw: 'secondary' },\n  { key: 'secondaryForeground', cssVar: '--secondary-foreground', tw: 'secondary-foreground' },\n  { key: 'muted', cssVar: '--muted', tw: 'muted' },\n  { key: 'mutedForeground', cssVar: '--muted-foreground', tw: 'muted-foreground' },\n  { key: 'accent', cssVar: '--accent', tw: 'accent' },\n  { key: 'accentForeground', cssVar: '--accent-foreground', tw: 'accent-foreground' },\n  { key: 'destructive', cssVar: '--destructive', tw: 'destructive' },\n  { key: 'destructiveForeground', cssVar: '--destructive-foreground', tw: 'destructive-foreground' },\n  { key: 'border', cssVar: '--border', tw: 'border' },\n  { key: 'input', cssVar: '--input', tw: 'input' },\n  { key: 'ring', cssVar: '--ring', tw: 'ring' },\n]\n\nconst asColorRecord = (mode: unknown): Record<string, string> => {\n  const out: Record<string, string> = {}\n  if (mode && typeof mode === 'object') {\n    for (const { key } of COLOR_TOKENS) {\n      const value = (mode as Record<string, unknown>)[key]\n      if (typeof value === 'string' && value.trim()) out[key] = value.trim()\n    }\n  }\n  return out\n}\n\nconst resolveRadiusValue = (borderRadius: string | undefined): string => {\n  const config = getBorderRadiusConfig((borderRadius ?? 'medium') as BorderRadiusPreset)\n  if (typeof config?.css === 'string') return config.css\n  const record = (config?.css ?? {}) as Record<string, string>\n  return record['--radius-default'] ?? record['--radius-large'] ?? '0.5rem'\n}\n\n/** A minimal W3C design-tokens group node. */\ntype TokenLeaf = { $value: string; $type: 'color' | 'dimension' }\ntype TokenGroup = { [key: string]: TokenLeaf | TokenGroup }\n\n/**\n * Build a W3C Design Tokens document from a theme configuration. Colours are\n * grouped under `color.light` / `color.dark`; border radius under `radius`.\n */\nexport function generateDesignTokens(themeConfiguration: unknown): TokenGroup {\n  const resolved = resolveThemeConfiguration(themeConfiguration)\n  const light = asColorRecord(resolved.lightMode)\n  const dark = asColorRecord(resolved.darkMode)\n\n  const toGroup = (colors: Record<string, string>): TokenGroup => {\n    const group: TokenGroup = {}\n    for (const { key } of COLOR_TOKENS) {\n      if (colors[key]) group[key] = { $value: colors[key], $type: 'color' }\n    }\n    return group\n  }\n\n  return {\n    color: {\n      light: toGroup(light),\n      dark: toGroup(dark),\n    },\n    radius: {\n      base: { $value: resolveRadiusValue(resolved.borderRadius), $type: 'dimension' },\n    },\n  }\n}\n\n/** Pretty-printed JSON string of {@link generateDesignTokens}. */\nexport function generateDesignTokensJson(themeConfiguration: unknown): string {\n  return JSON.stringify(generateDesignTokens(themeConfiguration), null, 2)\n}\n\n/**\n * Generate a Tailwind v4 `@theme inline { … }` block. The utilities reference the\n * runtime CSS variables (`var(--primary)` …) so colours follow the active theme,\n * light/dark mode and live preview without rebuilding Tailwind.\n *\n * Drop the output into your global stylesheet (after `@import \"tailwindcss\";`).\n */\nexport function generateTailwindV4Theme(themeConfiguration: unknown): string {\n  const resolved = resolveThemeConfiguration(themeConfiguration)\n  const lines = COLOR_TOKENS.map(({ cssVar, tw }) => `  --color-${tw}: var(${cssVar});`)\n  lines.push(`  --radius: ${resolveRadiusValue(resolved.borderRadius)};`)\n  return `@theme inline {\\n${lines.join('\\n')}\\n}`\n}\n\n/**\n * Generate a Tailwind v3 `theme.extend` config fragment (as a JS string) mapping\n * colours to the runtime CSS variables. For projects still on Tailwind v3.\n */\nexport function generateTailwindV3Theme(themeConfiguration: unknown): string {\n  const resolved = resolveThemeConfiguration(themeConfiguration)\n  const colorEntries = COLOR_TOKENS.map(({ cssVar, tw }) => `        '${tw}': 'var(${cssVar})',`)\n  return [\n    'module.exports = {',\n    '  theme: {',\n    '    extend: {',\n    '      colors: {',\n    colorEntries.join('\\n'),\n    '      },',\n    '      borderRadius: {',\n    `        DEFAULT: '${resolveRadiusValue(resolved.borderRadius)}',`,\n    '      },',\n    '    },',\n    '  },',\n    '}',\n  ].join('\\n')\n}\n"],"names":["getBorderRadiusConfig","resolveThemeConfiguration","COLOR_TOKENS","key","cssVar","tw","asColorRecord","mode","out","value","trim","resolveRadiusValue","borderRadius","config","css","record","generateDesignTokens","themeConfiguration","resolved","light","lightMode","dark","darkMode","toGroup","colors","group","$value","$type","color","radius","base","generateDesignTokensJson","JSON","stringify","generateTailwindV4Theme","lines","map","push","join","generateTailwindV3Theme","colorEntries"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,oCAAmC;AACzE,SAASC,yBAAyB,QAAQ,iCAAgC;AAc1E,6DAA6D,GAC7D,MAAMC,eAA8B;IAClC;QAAEC,KAAK;QAAcC,QAAQ;QAAgBC,IAAI;IAAa;IAC9D;QAAEF,KAAK;QAAcC,QAAQ;QAAgBC,IAAI;IAAa;IAC9D;QAAEF,KAAK;QAAQC,QAAQ;QAAUC,IAAI;IAAO;IAC5C;QAAEF,KAAK;QAAkBC,QAAQ;QAAqBC,IAAI;IAAkB;IAC5E;QAAEF,KAAK;QAAWC,QAAQ;QAAaC,IAAI;IAAU;IACrD;QAAEF,KAAK;QAAqBC,QAAQ;QAAwBC,IAAI;IAAqB;IACrF;QAAEF,KAAK;QAAWC,QAAQ;QAAaC,IAAI;IAAU;IACrD;QAAEF,KAAK;QAAqBC,QAAQ;QAAwBC,IAAI;IAAqB;IACrF;QAAEF,KAAK;QAAaC,QAAQ;QAAeC,IAAI;IAAY;IAC3D;QAAEF,KAAK;QAAuBC,QAAQ;QAA0BC,IAAI;IAAuB;IAC3F;QAAEF,KAAK;QAASC,QAAQ;QAAWC,IAAI;IAAQ;IAC/C;QAAEF,KAAK;QAAmBC,QAAQ;QAAsBC,IAAI;IAAmB;IAC/E;QAAEF,KAAK;QAAUC,QAAQ;QAAYC,IAAI;IAAS;IAClD;QAAEF,KAAK;QAAoBC,QAAQ;QAAuBC,IAAI;IAAoB;IAClF;QAAEF,KAAK;QAAeC,QAAQ;QAAiBC,IAAI;IAAc;IACjE;QAAEF,KAAK;QAAyBC,QAAQ;QAA4BC,IAAI;IAAyB;IACjG;QAAEF,KAAK;QAAUC,QAAQ;QAAYC,IAAI;IAAS;IAClD;QAAEF,KAAK;QAASC,QAAQ;QAAWC,IAAI;IAAQ;IAC/C;QAAEF,KAAK;QAAQC,QAAQ;QAAUC,IAAI;IAAO;CAC7C;AAED,MAAMC,gBAAgB,CAACC;IACrB,MAAMC,MAA8B,CAAC;IACrC,IAAID,QAAQ,OAAOA,SAAS,UAAU;QACpC,KAAK,MAAM,EAAEJ,GAAG,EAAE,IAAID,aAAc;YAClC,MAAMO,QAAQ,AAACF,IAAgC,CAACJ,IAAI;YACpD,IAAI,OAAOM,UAAU,YAAYA,MAAMC,IAAI,IAAIF,GAAG,CAACL,IAAI,GAAGM,MAAMC,IAAI;QACtE;IACF;IACA,OAAOF;AACT;AAEA,MAAMG,qBAAqB,CAACC;IAC1B,MAAMC,SAASb,sBAAuBY,gBAAgB;IACtD,IAAI,OAAOC,QAAQC,QAAQ,UAAU,OAAOD,OAAOC,GAAG;IACtD,MAAMC,SAAUF,QAAQC,OAAO,CAAC;IAChC,OAAOC,MAAM,CAAC,mBAAmB,IAAIA,MAAM,CAAC,iBAAiB,IAAI;AACnE;AAMA;;;CAGC,GACD,OAAO,SAASC,qBAAqBC,kBAA2B;IAC9D,MAAMC,WAAWjB,0BAA0BgB;IAC3C,MAAME,QAAQb,cAAcY,SAASE,SAAS;IAC9C,MAAMC,OAAOf,cAAcY,SAASI,QAAQ;IAE5C,MAAMC,UAAU,CAACC;QACf,MAAMC,QAAoB,CAAC;QAC3B,KAAK,MAAM,EAAEtB,GAAG,EAAE,IAAID,aAAc;YAClC,IAAIsB,MAAM,CAACrB,IAAI,EAAEsB,KAAK,CAACtB,IAAI,GAAG;gBAAEuB,QAAQF,MAAM,CAACrB,IAAI;gBAAEwB,OAAO;YAAQ;QACtE;QACA,OAAOF;IACT;IAEA,OAAO;QACLG,OAAO;YACLT,OAAOI,QAAQJ;YACfE,MAAME,QAAQF;QAChB;QACAQ,QAAQ;YACNC,MAAM;gBAAEJ,QAAQf,mBAAmBO,SAASN,YAAY;gBAAGe,OAAO;YAAY;QAChF;IACF;AACF;AAEA,gEAAgE,GAChE,OAAO,SAASI,yBAAyBd,kBAA2B;IAClE,OAAOe,KAAKC,SAAS,CAACjB,qBAAqBC,qBAAqB,MAAM;AACxE;AAEA;;;;;;CAMC,GACD,OAAO,SAASiB,wBAAwBjB,kBAA2B;IACjE,MAAMC,WAAWjB,0BAA0BgB;IAC3C,MAAMkB,QAAQjC,aAAakC,GAAG,CAAC,CAAC,EAAEhC,MAAM,EAAEC,EAAE,EAAE,GAAK,CAAC,UAAU,EAAEA,GAAG,MAAM,EAAED,OAAO,EAAE,CAAC;IACrF+B,MAAME,IAAI,CAAC,CAAC,YAAY,EAAE1B,mBAAmBO,SAASN,YAAY,EAAE,CAAC,CAAC;IACtE,OAAO,CAAC,iBAAiB,EAAEuB,MAAMG,IAAI,CAAC,MAAM,GAAG,CAAC;AAClD;AAEA;;;CAGC,GACD,OAAO,SAASC,wBAAwBtB,kBAA2B;IACjE,MAAMC,WAAWjB,0BAA0BgB;IAC3C,MAAMuB,eAAetC,aAAakC,GAAG,CAAC,CAAC,EAAEhC,MAAM,EAAEC,EAAE,EAAE,GAAK,CAAC,SAAS,EAAEA,GAAG,QAAQ,EAAED,OAAO,GAAG,CAAC;IAC9F,OAAO;QACL;QACA;QACA;QACA;QACAoC,aAAaF,IAAI,CAAC;QAClB;QACA;QACA,CAAC,kBAAkB,EAAE3B,mBAAmBO,SAASN,YAAY,EAAE,EAAE,CAAC;QAClE;QACA;QACA;QACA;KACD,CAAC0B,IAAI,CAAC;AACT"}

package/dist/utils/generatePalette.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Generate a complete, harmonious light + dark colour palette from a single
+ * brand colour using colour theory (hue preserved, lightness/saturation derived).
+ * Foreground colours are nudged to meet WCAG AA where needed.
+ *
+ * Output keys match the plugin's colour-mode tokens, so the result can be
+ * dispatched straight into `themeConfiguration.lightMode` / `.darkMode`.
+ */
+export type GeneratedColorMode = {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+};
+export type GeneratedPalette = {
+    lightMode: GeneratedColorMode;
+    darkMode: GeneratedColorMode;
+};
+export interface GeneratePaletteOptions {
+    /** Fixed destructive/danger colour. Defaults to a balanced red. */
+    destructive?: string;
+}
+export declare function generatePaletteFromColor(seed: string, options?: GeneratePaletteOptions): GeneratedPalette;
+/**
+ * Extract a few dominant colours from an image element (browser only) via a
+ * downsampled canvas and coarse colour bucketing. Returns hex strings ordered by
+ * a saturation-weighted frequency score (so brand colours rank above greys),
+ * suitable as seeds for {@link generatePaletteFromColor}.
+ */
+export declare function extractDominantColors(image: HTMLImageElement, count?: number): string[];
+//# sourceMappingURL=generatePalette.d.ts.map

package/dist/utils/generatePalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generatePalette.d.ts","sourceRoot":"","sources":["../../src/utils/generatePalette.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,iBAAiB,EAAE,MAAM,CAAA;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,MAAM,CAAA;IACjB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB,EAAE,MAAM,CAAA;IACxB,WAAW,EAAE,MAAM,CAAA;IACnB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,kBAAkB,CAAA;IAC7B,QAAQ,EAAE,kBAAkB,CAAA;CAC7B,CAAA;AAoBD,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,gBAAgB,CA+DlB;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE,CAmDlF"}

package/dist/utils/generatePalette.js

@@ -0,0 +1,127 @@
+import Color from 'color';
+import { getContrastRatio, suggestAccessibleColor } from './contrast.js';
+const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+/** Build a hex colour from HSL channels. */ const hsl = (h, s, l)=>Color(`hsl(${Math.round(h)}, ${clamp(s, 0, 100)}%, ${clamp(l, 0, 100)}%)`).hex().toString();
+/** Pick black or white (whichever has higher contrast), then nudge to AA. */ const readableOn = (background)=>{
+    const white = getContrastRatio('#ffffff', background) ?? 0;
+    const black = getContrastRatio('#000000', background) ?? 0;
+    const base = white >= black ? '#ffffff' : '#000000';
+    if ((base === '#ffffff' ? white : black) >= 4.5) return base;
+    return suggestAccessibleColor(base, background, 4.5) ?? base;
+};
+export function generatePaletteFromColor(seed, options = {}) {
+    let h = 220;
+    let s = 70;
+    try {
+        const obj = Color(seed).hsl().object();
+        h = obj.h ?? h;
+        s = obj.s ?? s;
+    } catch  {
+    /* keep defaults if the seed can't be parsed */ }
+    const destructive = options.destructive ?? hsl(0, 72, 51);
+    const tint = (sat)=>clamp(sat, 0, 100);
+    // ── Light mode ──────────────────────────────────────────────
+    const lightPrimary = hsl(h, tint(s), 50);
+    const lightMode = {
+        background: hsl(h, tint(s * 0.18), 99),
+        foreground: hsl(h, tint(s * 0.25), 12),
+        card: hsl(h, tint(s * 0.12), 100),
+        cardForeground: hsl(h, tint(s * 0.25), 12),
+        popover: hsl(h, tint(s * 0.12), 100),
+        popoverForeground: hsl(h, tint(s * 0.25), 12),
+        primary: lightPrimary,
+        primaryForeground: readableOn(lightPrimary),
+        secondary: hsl(h, tint(s * 0.35), 94),
+        secondaryForeground: hsl(h, tint(s), 22),
+        muted: hsl(h, tint(s * 0.22), 95),
+        mutedForeground: hsl(h, tint(s * 0.2), 38),
+        accent: hsl(h, tint(s * 0.5), 92),
+        accentForeground: hsl(h, tint(s), 22),
+        destructive,
+        destructiveForeground: '#ffffff',
+        border: hsl(h, tint(s * 0.2), 88),
+        input: hsl(h, tint(s * 0.2), 88),
+        ring: lightPrimary
+    };
+    // ── Dark mode (inverted lightness, slightly desaturated surfaces) ──
+    const darkPrimary = hsl(h, tint(s), 58);
+    const darkMode = {
+        background: hsl(h, tint(s * 0.25), 8),
+        foreground: hsl(h, tint(s * 0.1), 96),
+        card: hsl(h, tint(s * 0.22), 11),
+        cardForeground: hsl(h, tint(s * 0.1), 96),
+        popover: hsl(h, tint(s * 0.22), 11),
+        popoverForeground: hsl(h, tint(s * 0.1), 96),
+        primary: darkPrimary,
+        primaryForeground: readableOn(darkPrimary),
+        secondary: hsl(h, tint(s * 0.25), 18),
+        secondaryForeground: hsl(h, tint(s * 0.1), 94),
+        muted: hsl(h, tint(s * 0.2), 17),
+        mutedForeground: hsl(h, tint(s * 0.15), 64),
+        accent: hsl(h, tint(s * 0.3), 22),
+        accentForeground: hsl(h, tint(s * 0.1), 94),
+        destructive: hsl(0, 62, 50),
+        destructiveForeground: '#ffffff',
+        border: hsl(h, tint(s * 0.2), 22),
+        input: hsl(h, tint(s * 0.2), 22),
+        ring: darkPrimary
+    };
+    return {
+        lightMode,
+        darkMode
+    };
+}
+/**
+ * Extract a few dominant colours from an image element (browser only) via a
+ * downsampled canvas and coarse colour bucketing. Returns hex strings ordered by
+ * a saturation-weighted frequency score (so brand colours rank above greys),
+ * suitable as seeds for {@link generatePaletteFromColor}.
+ */ export function extractDominantColors(image, count = 5) {
+    if (typeof document === 'undefined') return [];
+    try {
+        const size = 64;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return [];
+        ctx.drawImage(image, 0, 0, size, size);
+        const { data } = ctx.getImageData(0, 0, size, size);
+        const buckets = new Map();
+        for(let i = 0; i < data.length; i += 4){
+            const a = data[i + 3];
+            if (a < 125) continue; // skip transparent
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            // Quantise to 5 bits per channel to group similar colours.
+            const key = `${r >> 5}-${g >> 5}-${b >> 5}`;
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            const saturation = max === 0 ? 0 : (max - min) / max;
+            const entry = buckets.get(key) ?? {
+                r: 0,
+                g: 0,
+                b: 0,
+                n: 0,
+                score: 0
+            };
+            entry.r += r;
+            entry.g += g;
+            entry.b += b;
+            entry.n += 1;
+            // Weight by saturation so vivid brand colours outrank near-greys.
+            entry.score += 1 + saturation * 4;
+            buckets.set(key, entry);
+        }
+        return Array.from(buckets.values()).sort((a, b)=>b.score - a.score).slice(0, count).map((e)=>Color({
+                r: Math.round(e.r / e.n),
+                g: Math.round(e.g / e.n),
+                b: Math.round(e.b / e.n)
+            }).hex().toString());
+    } catch  {
+        return [];
+    }
+}
+
+//# sourceMappingURL=generatePalette.js.map

package/dist/utils/generatePalette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/generatePalette.ts"],"sourcesContent":["import Color from 'color'\nimport { getContrastRatio, suggestAccessibleColor } from './contrast.js'\n\n/**\n * Generate a complete, harmonious light + dark colour palette from a single\n * brand colour using colour theory (hue preserved, lightness/saturation derived).\n * Foreground colours are nudged to meet WCAG AA where needed.\n *\n * Output keys match the plugin's colour-mode tokens, so the result can be\n * dispatched straight into `themeConfiguration.lightMode` / `.darkMode`.\n */\n\nexport type GeneratedColorMode = {\n  background: string\n  foreground: string\n  card: string\n  cardForeground: string\n  popover: string\n  popoverForeground: string\n  primary: string\n  primaryForeground: string\n  secondary: string\n  secondaryForeground: string\n  muted: string\n  mutedForeground: string\n  accent: string\n  accentForeground: string\n  destructive: string\n  destructiveForeground: string\n  border: string\n  input: string\n  ring: string\n}\n\nexport type GeneratedPalette = {\n  lightMode: GeneratedColorMode\n  darkMode: GeneratedColorMode\n}\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(max, Math.max(min, value))\n\n/** Build a hex colour from HSL channels. */\nconst hsl = (h: number, s: number, l: number): string =>\n  Color(`hsl(${Math.round(h)}, ${clamp(s, 0, 100)}%, ${clamp(l, 0, 100)}%)`)\n    .hex()\n    .toString()\n\n/** Pick black or white (whichever has higher contrast), then nudge to AA. */\nconst readableOn = (background: string): string => {\n  const white = getContrastRatio('#ffffff', background) ?? 0\n  const black = getContrastRatio('#000000', background) ?? 0\n  const base = white >= black ? '#ffffff' : '#000000'\n  if ((base === '#ffffff' ? white : black) >= 4.5) return base\n  return suggestAccessibleColor(base, background, 4.5) ?? base\n}\n\nexport interface GeneratePaletteOptions {\n  /** Fixed destructive/danger colour. Defaults to a balanced red. */\n  destructive?: string\n}\n\nexport function generatePaletteFromColor(\n  seed: string,\n  options: GeneratePaletteOptions = {},\n): GeneratedPalette {\n  let h = 220\n  let s = 70\n  try {\n    const obj = Color(seed).hsl().object()\n    h = obj.h ?? h\n    s = obj.s ?? s\n  } catch {\n    /* keep defaults if the seed can't be parsed */\n  }\n\n  const destructive = options.destructive ?? hsl(0, 72, 51)\n  const tint = (sat: number) => clamp(sat, 0, 100)\n\n  // ── Light mode ──────────────────────────────────────────────\n  const lightPrimary = hsl(h, tint(s), 50)\n  const lightMode: GeneratedColorMode = {\n    background: hsl(h, tint(s * 0.18), 99),\n    foreground: hsl(h, tint(s * 0.25), 12),\n    card: hsl(h, tint(s * 0.12), 100),\n    cardForeground: hsl(h, tint(s * 0.25), 12),\n    popover: hsl(h, tint(s * 0.12), 100),\n    popoverForeground: hsl(h, tint(s * 0.25), 12),\n    primary: lightPrimary,\n    primaryForeground: readableOn(lightPrimary),\n    secondary: hsl(h, tint(s * 0.35), 94),\n    secondaryForeground: hsl(h, tint(s), 22),\n    muted: hsl(h, tint(s * 0.22), 95),\n    mutedForeground: hsl(h, tint(s * 0.2), 38),\n    accent: hsl(h, tint(s * 0.5), 92),\n    accentForeground: hsl(h, tint(s), 22),\n    destructive,\n    destructiveForeground: '#ffffff',\n    border: hsl(h, tint(s * 0.2), 88),\n    input: hsl(h, tint(s * 0.2), 88),\n    ring: lightPrimary,\n  }\n\n  // ── Dark mode (inverted lightness, slightly desaturated surfaces) ──\n  const darkPrimary = hsl(h, tint(s), 58)\n  const darkMode: GeneratedColorMode = {\n    background: hsl(h, tint(s * 0.25), 8),\n    foreground: hsl(h, tint(s * 0.1), 96),\n    card: hsl(h, tint(s * 0.22), 11),\n    cardForeground: hsl(h, tint(s * 0.1), 96),\n    popover: hsl(h, tint(s * 0.22), 11),\n    popoverForeground: hsl(h, tint(s * 0.1), 96),\n    primary: darkPrimary,\n    primaryForeground: readableOn(darkPrimary),\n    secondary: hsl(h, tint(s * 0.25), 18),\n    secondaryForeground: hsl(h, tint(s * 0.1), 94),\n    muted: hsl(h, tint(s * 0.2), 17),\n    mutedForeground: hsl(h, tint(s * 0.15), 64),\n    accent: hsl(h, tint(s * 0.3), 22),\n    accentForeground: hsl(h, tint(s * 0.1), 94),\n    destructive: hsl(0, 62, 50),\n    destructiveForeground: '#ffffff',\n    border: hsl(h, tint(s * 0.2), 22),\n    input: hsl(h, tint(s * 0.2), 22),\n    ring: darkPrimary,\n  }\n\n  return { lightMode, darkMode }\n}\n\n/**\n * Extract a few dominant colours from an image element (browser only) via a\n * downsampled canvas and coarse colour bucketing. Returns hex strings ordered by\n * a saturation-weighted frequency score (so brand colours rank above greys),\n * suitable as seeds for {@link generatePaletteFromColor}.\n */\nexport function extractDominantColors(image: HTMLImageElement, count = 5): string[] {\n  if (typeof document === 'undefined') return []\n  try {\n    const size = 64\n    const canvas = document.createElement('canvas')\n    canvas.width = size\n    canvas.height = size\n    const ctx = canvas.getContext('2d')\n    if (!ctx) return []\n    ctx.drawImage(image, 0, 0, size, size)\n    const { data } = ctx.getImageData(0, 0, size, size)\n\n    const buckets = new Map<string, { r: number; g: number; b: number; n: number; score: number }>()\n\n    for (let i = 0; i < data.length; i += 4) {\n      const a = data[i + 3]\n      if (a < 125) continue // skip transparent\n      const r = data[i]\n      const g = data[i + 1]\n      const b = data[i + 2]\n\n      // Quantise to 5 bits per channel to group similar colours.\n      const key = `${r >> 5}-${g >> 5}-${b >> 5}`\n      const max = Math.max(r, g, b)\n      const min = Math.min(r, g, b)\n      const saturation = max === 0 ? 0 : (max - min) / max\n      const entry = buckets.get(key) ?? { r: 0, g: 0, b: 0, n: 0, score: 0 }\n      entry.r += r\n      entry.g += g\n      entry.b += b\n      entry.n += 1\n      // Weight by saturation so vivid brand colours outrank near-greys.\n      entry.score += 1 + saturation * 4\n      buckets.set(key, entry)\n    }\n\n    return Array.from(buckets.values())\n      .sort((a, b) => b.score - a.score)\n      .slice(0, count)\n      .map((e) =>\n        Color({\n          r: Math.round(e.r / e.n),\n          g: Math.round(e.g / e.n),\n          b: Math.round(e.b / e.n),\n        })\n          .hex()\n          .toString(),\n      )\n  } catch {\n    return []\n  }\n}\n"],"names":["Color","getContrastRatio","suggestAccessibleColor","clamp","value","min","max","Math","hsl","h","s","l","round","hex","toString","readableOn","background","white","black","base","generatePaletteFromColor","seed","options","obj","object","destructive","tint","sat","lightPrimary","lightMode","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructiveForeground","border","input","ring","darkPrimary","darkMode","extractDominantColors","image","count","document","size","canvas","createElement","width","height","ctx","getContext","drawImage","data","getImageData","buckets","Map","i","length","a","r","g","b","key","saturation","entry","get","n","score","set","Array","from","values","sort","slice","map","e"],"mappings":"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"}

package/dist/utils/generateThemeCSS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateThemeCSS.d.ts","sourceRoot":"","sources":["../../src/utils/generateThemeCSS.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAGhD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAuC5D;AAuSD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,MAAM,CAEnE"}
+{"version":3,"file":"generateThemeCSS.d.ts","sourceRoot":"","sources":["../../src/utils/generateThemeCSS.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAuC5D;AAuPD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,MAAM,CAEnE"}