@kilivi/payloadcms-theme-management 0.1.13 → 0.1.16

package/dist/components/InitTheme.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Script from 'next/script';
 import React from 'react';
 import { modeLocalStorageKey } from '../providers/Theme/shared.js';
-/**
- * Client-side theme initialization script
- * Prevents FOUC by applying theme mode before React hydration
- * Handles:
- * - System preference detection
- * - User preference from localStorage
- * - Admin-controlled color mode toggle
- * - Auto mode with system preference fallback
+/**
+ * Client-side theme initialization script
+ * Prevents FOUC by applying theme mode before React hydration
+ * Handles:
+ * - System preference detection
+ * - User preference from localStorage
+ * - Admin-controlled color mode toggle
+ * - Auto mode with system preference fallback
  */ export const InitTheme = ()=>{
     return /*#__PURE__*/ _jsx(Script, {
         dangerouslySetInnerHTML: {

package/dist/components/InitTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/InitTheme.tsx"],"sourcesContent":["import Script from 'next/script'\r\nimport React from 'react'\r\nimport { modeLocalStorageKey } from '../providers/Theme/shared.js'\r\n\r\n/**\r\n * Client-side theme initialization script\r\n * Prevents FOUC by applying theme mode before React hydration\r\n * Handles:\r\n * - System preference detection\r\n * - User preference from localStorage\r\n * - Admin-controlled color mode toggle\r\n * - Auto mode with system preference fallback\r\n */\r\nexport const InitTheme: React.FC = () => {\r\n  return (\r\n    <Script\r\n      dangerouslySetInnerHTML={{\r\n        __html: `\r\n  (function () {\r\n    function getImplicitModePreference() {\r\n      var mediaQuery = '(prefers-color-scheme: dark)'\r\n      var mql = window.matchMedia(mediaQuery)\r\n      return mql.matches ? 'dark' : 'light'\r\n    }\r\n\r\n    function modeIsValid(mode) {\r\n      return mode === 'light' || mode === 'dark'\r\n    }\r\n\r\n    // Get current mode from server-set attribute\r\n    var currentMode = document.documentElement.getAttribute('data-theme-mode')\r\n    var allowToggle = document.documentElement.getAttribute('data-allow-color-mode-toggle') === 'true'\r\n    \r\n    // Only override mode if admin allows toggle and user has preference\r\n    if (allowToggle) {\r\n      var modePreference = window.localStorage.getItem('${modeLocalStorageKey}')\r\n      \r\n      if (modeIsValid(modePreference)) {\r\n        currentMode = modePreference\r\n      } else if (currentMode === 'auto') {\r\n        currentMode = getImplicitModePreference()\r\n      }\r\n    } else if (currentMode === 'auto') {\r\n      // Admin set auto mode - use system preference\r\n      currentMode = getImplicitModePreference()\r\n    }\r\n\r\n    // Apply the determined mode\r\n    if (currentMode && modeIsValid(currentMode)) {\r\n      document.documentElement.setAttribute('data-theme-mode', currentMode)\r\n    }\r\n\r\n    // Listen for system theme changes only when needed\r\n    if (allowToggle || currentMode === 'auto') {\r\n      var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n      mediaQuery.addEventListener('change', function(e) {\r\n        var shouldUpdate = allowToggle \r\n          ? !window.localStorage.getItem('${modeLocalStorageKey}')\r\n          : document.documentElement.getAttribute('data-theme-mode') === 'auto'\r\n        \r\n        if (shouldUpdate) {\r\n          document.documentElement.setAttribute('data-theme-mode', e.matches ? 'dark' : 'light')\r\n        }\r\n      })\r\n    }\r\n  })();\r\n  `,\r\n      }}\r\n      id=\"theme-script\"\r\n      strategy=\"beforeInteractive\"\r\n    />\r\n  )\r\n}\r\n"],"names":["Script","React","modeLocalStorageKey","InitTheme","dangerouslySetInnerHTML","__html","id","strategy"],"mappings":";AAAA,OAAOA,YAAY,cAAa;AAChC,OAAOC,WAAW,QAAO;AACzB,SAASC,mBAAmB,QAAQ,+BAA8B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAsB;IACjC,qBACE,KAACH;QACCI,yBAAyB;YACvBC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;wDAkBuC,EAAEH,oBAAoB;;;;;;;;;;;;;;;;;;;;;;0CAsBpC,EAAEA,oBAAoB;;;;;;;;;EAS9D,CAAC;QACG;QACAI,IAAG;QACHC,UAAS;;AAGf,EAAC"}
+{"version":3,"sources":["../../src/components/InitTheme.tsx"],"sourcesContent":["import Script from 'next/script'\nimport React from 'react'\nimport { modeLocalStorageKey } from '../providers/Theme/shared.js'\n\n/**\n * Client-side theme initialization script\n * Prevents FOUC by applying theme mode before React hydration\n * Handles:\n * - System preference detection\n * - User preference from localStorage\n * - Admin-controlled color mode toggle\n * - Auto mode with system preference fallback\n */\nexport const InitTheme: React.FC = () => {\n  return (\n    <Script\n      dangerouslySetInnerHTML={{\n        __html: `\n  (function () {\n    function getImplicitModePreference() {\n      var mediaQuery = '(prefers-color-scheme: dark)'\n      var mql = window.matchMedia(mediaQuery)\n      return mql.matches ? 'dark' : 'light'\n    }\n\n    function modeIsValid(mode) {\n      return mode === 'light' || mode === 'dark'\n    }\n\n    // Get current mode from server-set attribute\n    var currentMode = document.documentElement.getAttribute('data-theme-mode')\n    var allowToggle = document.documentElement.getAttribute('data-allow-color-mode-toggle') === 'true'\n    \n    // Only override mode if admin allows toggle and user has preference\n    if (allowToggle) {\n      var modePreference = window.localStorage.getItem('${modeLocalStorageKey}')\n      \n      if (modeIsValid(modePreference)) {\n        currentMode = modePreference\n      } else if (currentMode === 'auto') {\n        currentMode = getImplicitModePreference()\n      }\n    } else if (currentMode === 'auto') {\n      // Admin set auto mode - use system preference\n      currentMode = getImplicitModePreference()\n    }\n\n    // Apply the determined mode\n    if (currentMode && modeIsValid(currentMode)) {\n      document.documentElement.setAttribute('data-theme-mode', currentMode)\n    }\n\n    // Listen for system theme changes only when needed\n    if (allowToggle || currentMode === 'auto') {\n      var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n      mediaQuery.addEventListener('change', function(e) {\n        var shouldUpdate = allowToggle \n          ? !window.localStorage.getItem('${modeLocalStorageKey}')\n          : document.documentElement.getAttribute('data-theme-mode') === 'auto'\n        \n        if (shouldUpdate) {\n          document.documentElement.setAttribute('data-theme-mode', e.matches ? 'dark' : 'light')\n        }\n      })\n    }\n  })();\n  `,\n      }}\n      id=\"theme-script\"\n      strategy=\"beforeInteractive\"\n    />\n  )\n}\n"],"names":["Script","React","modeLocalStorageKey","InitTheme","dangerouslySetInnerHTML","__html","id","strategy"],"mappings":";AAAA,OAAOA,YAAY,cAAa;AAChC,OAAOC,WAAW,QAAO;AACzB,SAASC,mBAAmB,QAAQ,+BAA8B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAsB;IACjC,qBACE,KAACH;QACCI,yBAAyB;YACvBC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;wDAkBuC,EAAEH,oBAAoB;;;;;;;;;;;;;;;;;;;;;;0CAsBpC,EAAEA,oBAAoB;;;;;;;;;EAS9D,CAAC;QACG;QACAI,IAAG;QACHC,UAAS;;AAGf,EAAC"}

package/dist/components/ServerThemeInjector.js

@@ -5,9 +5,9 @@ import { createFallbackCriticalCSS, getThemeCriticalCSS, getThemeCSSPath } from
 import { generateThemeColorsCss } from '../utils/themeColors.js';
 import { generateThemeCSS } from '../utils/themeUtils.js';
 import { InitTheme } from './InitTheme.js';
-/**
- * Server-side theme CSS injector to prevent FOUC
- * This component injects critical theme CSS directly into the HTML head during SSR
+/**
+ * Server-side theme CSS injector to prevent FOUC
+ * This component injects critical theme CSS directly into the HTML head during SSR
  */ export async function ServerThemeInjector({ themeConfiguration }) {
     // Accept unknown type to avoid type conflicts between app's payload-types and plugin's payload-types
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/components/ServerThemeInjector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ServerThemeInjector.tsx"],"sourcesContent":["import { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\r\nimport type { BorderRadiusPreset, ThemeDefaults } from '../providers/Theme/types.js'\r\nimport type { ThemeTypographyPreset } from '../presets.js'\r\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\r\nimport type { ResolvedThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\r\nimport {\r\n  createFallbackCriticalCSS,\r\n  getThemeCriticalCSS,\r\n  getThemeCSSPath,\r\n} from '../utils/themeAssets.js'\r\nimport { generateThemeColorsCss } from '../utils/themeColors.js'\r\nimport { generateThemeCSS } from '../utils/themeUtils.js'\r\nimport { InitTheme } from './InitTheme.js'\r\n\r\ninterface ServerThemeInjectorProps {\r\n  /**\r\n   * Theme configuration object from your site settings.\r\n   * Pass the themeConfiguration field directly, not the entire site settings object.\r\n   * \r\n   * @example\r\n   * ```tsx\r\n   * const siteSettings = await payload.findGlobal({ slug: 'site-settings' })\r\n   * <ServerThemeInjector themeConfiguration={siteSettings.themeConfiguration} />\r\n   * ```\r\n   */\r\n  themeConfiguration?: unknown\r\n}\r\n\r\ntype RuntimeThemeConfiguration = Omit<ResolvedThemeConfiguration, 'typography'> & {\r\n  typography?: ThemeTypographyPreset | null\r\n}\r\n\r\n/**\r\n * Server-side theme CSS injector to prevent FOUC\r\n * This component injects critical theme CSS directly into the HTML head during SSR\r\n */\r\nexport async function ServerThemeInjector({ themeConfiguration }: Readonly<ServerThemeInjectorProps>) {\r\n  // Accept unknown type to avoid type conflicts between app's payload-types and plugin's payload-types\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const resolvedConfiguration = resolveThemeConfiguration(themeConfiguration as any)\r\n  const {\r\n    theme,\r\n    borderRadius,\r\n    customCSS,\r\n    lightMode,\r\n    darkMode,\r\n    fontScale,\r\n    spacing,\r\n    animationLevel,\r\n    allowColorModeToggle,\r\n    colorMode,\r\n    typography,\r\n  } = resolvedConfiguration\r\n\r\n  // Use resolved configuration directly\r\n  const normalizedThemeConfiguration: RuntimeThemeConfiguration = {\r\n    theme,\r\n    colorMode,\r\n    allowColorModeToggle,\r\n    borderRadius,\r\n    fontScale,\r\n    spacing,\r\n    animationLevel,\r\n    customCSS: customCSS ?? undefined,\r\n    lightMode,\r\n    darkMode,\r\n    typography: typography ?? undefined,\r\n  }\r\n\r\n  let criticalCSS = await getThemeCriticalCSS(theme as ThemeDefaults)\r\n  criticalCSS ??= createFallbackCriticalCSS(theme as ThemeDefaults)\r\n\r\n  const borderRadiusMap: Record<string, BorderRadiusPreset> = {\r\n    none: 'none',\r\n    small: 'small',\r\n    medium: 'medium',\r\n    large: 'large',\r\n    xl: 'xl',\r\n    full: 'xl',\r\n  }\r\n  const mappedBorderRadius = borderRadiusMap[borderRadius ?? 'medium'] ?? 'medium'\r\n  const borderRadiusConfig = getBorderRadiusConfig(mappedBorderRadius)\r\n  const cssRecord = typeof borderRadiusConfig?.css === 'string'\r\n    ? { '--radius-default': borderRadiusConfig.css }\r\n    : borderRadiusConfig?.css ?? {}\r\n\r\n  const borderRadiusCSS = Object.entries(cssRecord)\r\n    .map(([property, value]) => `  ${property}: ${value};`)\r\n    .join('\\n')\r\n\r\n  const borderRadiusBlock = borderRadiusCSS\r\n    ? `:root {\r\n${borderRadiusCSS}\r\n}`\r\n    : ''\r\n\r\n  const themeConfigurationCSS = generateThemeCSS(normalizedThemeConfiguration)\r\n  const colorModesCSS = generateThemeColorsCss({ themeName: theme, lightMode, darkMode })\r\n  const customCSSBlock = typeof customCSS === 'string' ? customCSS.trim() : ''\r\n\r\n  const combinedCSS = [\r\n    criticalCSS,\r\n    borderRadiusBlock,\r\n    themeConfigurationCSS,\r\n    colorModesCSS,\r\n    customCSSBlock,\r\n  ]\r\n    .filter((block) => Boolean(block?.trim?.().length))\r\n    .join('\\n\\n')\r\n\r\n  const themeCSSPath = getThemeCSSPath(theme as ThemeDefaults)\r\n  return (\r\n    <>\r\n      <InitTheme />\r\n      <style\r\n        id=\"theme-critical-css\"\r\n        dangerouslySetInnerHTML={{\r\n          __html: combinedCSS,\r\n        }}\r\n      />\r\n      <link rel=\"preload\" href={themeCSSPath} as=\"style\" />\r\n      <link rel=\"stylesheet\" href={themeCSSPath} />\r\n    </>\r\n  )\r\n}\r\n"],"names":["getBorderRadiusConfig","resolveThemeConfiguration","createFallbackCriticalCSS","getThemeCriticalCSS","getThemeCSSPath","generateThemeColorsCss","generateThemeCSS","InitTheme","ServerThemeInjector","themeConfiguration","resolvedConfiguration","theme","borderRadius","customCSS","lightMode","darkMode","fontScale","spacing","animationLevel","allowColorModeToggle","colorMode","typography","normalizedThemeConfiguration","undefined","criticalCSS","borderRadiusMap","none","small","medium","large","xl","full","mappedBorderRadius","borderRadiusConfig","cssRecord","css","borderRadiusCSS","Object","entries","map","property","value","join","borderRadiusBlock","themeConfigurationCSS","colorModesCSS","themeName","customCSSBlock","trim","combinedCSS","filter","block","Boolean","length","themeCSSPath","style","id","dangerouslySetInnerHTML","__html","link","rel","href","as"],"mappings":";AAAA,SAASA,qBAAqB,QAAQ,oCAAmC;AAGzE,SAASC,yBAAyB,QAAQ,wCAAuC;AAEjF,SACEC,yBAAyB,EACzBC,mBAAmB,EACnBC,eAAe,QACV,0BAAyB;AAChC,SAASC,sBAAsB,QAAQ,0BAAyB;AAChE,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,SAAS,QAAQ,iBAAgB;AAoB1C;;;CAGC,GACD,OAAO,eAAeC,oBAAoB,EAAEC,kBAAkB,EAAsC;IAClG,qGAAqG;IACrG,8DAA8D;IAC9D,MAAMC,wBAAwBT,0BAA0BQ;IACxD,MAAM,EACJE,KAAK,EACLC,YAAY,EACZC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,EACdC,oBAAoB,EACpBC,SAAS,EACTC,UAAU,EACX,GAAGX;IAEJ,sCAAsC;IACtC,MAAMY,+BAA0D;QAC9DX;QACAS;QACAD;QACAP;QACAI;QACAC;QACAC;QACAL,WAAWA,aAAaU;QACxBT;QACAC;QACAM,YAAYA,cAAcE;IAC5B;IAEA,IAAIC,cAAc,MAAMrB,oBAAoBQ;IAC5Ca,gBAAgBtB,0BAA0BS;IAE1C,MAAMc,kBAAsD;QAC1DC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,OAAO;QACPC,IAAI;QACJC,MAAM;IACR;IACA,MAAMC,qBAAqBP,eAAe,CAACb,gBAAgB,SAAS,IAAI;IACxE,MAAMqB,qBAAqBjC,sBAAsBgC;IACjD,MAAME,YAAY,OAAOD,oBAAoBE,QAAQ,WACjD;QAAE,oBAAoBF,mBAAmBE,GAAG;IAAC,IAC7CF,oBAAoBE,OAAO,CAAC;IAEhC,MAAMC,kBAAkBC,OAAOC,OAAO,CAACJ,WACpCK,GAAG,CAAC,CAAC,CAACC,UAAUC,MAAM,GAAK,CAAC,EAAE,EAAED,SAAS,EAAE,EAAEC,MAAM,CAAC,CAAC,EACrDC,IAAI,CAAC;IAER,MAAMC,oBAAoBP,kBACtB,CAAC;AACP,EAAEA,gBAAgB;CACjB,CAAC,GACI;IAEJ,MAAMQ,wBAAwBtC,iBAAiBgB;IAC/C,MAAMuB,gBAAgBxC,uBAAuB;QAAEyC,WAAWnC;QAAOG;QAAWC;IAAS;IACrF,MAAMgC,iBAAiB,OAAOlC,cAAc,WAAWA,UAAUmC,IAAI,KAAK;IAE1E,MAAMC,cAAc;QAClBzB;QACAmB;QACAC;QACAC;QACAE;KACD,CACEG,MAAM,CAAC,CAACC,QAAUC,QAAQD,OAAOH,SAASK,SAC1CX,IAAI,CAAC;IAER,MAAMY,eAAelD,gBAAgBO;IACrC,qBACE;;0BACE,KAACJ;0BACD,KAACgD;gBACCC,IAAG;gBACHC,yBAAyB;oBACvBC,QAAQT;gBACV;;0BAEF,KAACU;gBAAKC,KAAI;gBAAUC,MAAMP;gBAAcQ,IAAG;;0BAC3C,KAACH;gBAAKC,KAAI;gBAAaC,MAAMP;;;;AAGnC"}
+{"version":3,"sources":["../../src/components/ServerThemeInjector.tsx"],"sourcesContent":["import { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\nimport type { BorderRadiusPreset, ThemeDefaults } from '../providers/Theme/types.js'\nimport type { ThemeTypographyPreset } from '../presets.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport type { ResolvedThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport {\n  createFallbackCriticalCSS,\n  getThemeCriticalCSS,\n  getThemeCSSPath,\n} from '../utils/themeAssets.js'\nimport { generateThemeColorsCss } from '../utils/themeColors.js'\nimport { generateThemeCSS } from '../utils/themeUtils.js'\nimport { InitTheme } from './InitTheme.js'\n\ninterface ServerThemeInjectorProps {\n  /**\n   * Theme configuration object from your site settings.\n   * Pass the themeConfiguration field directly, not the entire site settings object.\n   * \n   * @example\n   * ```tsx\n   * const siteSettings = await payload.findGlobal({ slug: 'site-settings' })\n   * <ServerThemeInjector themeConfiguration={siteSettings.themeConfiguration} />\n   * ```\n   */\n  themeConfiguration?: unknown\n}\n\ntype RuntimeThemeConfiguration = Omit<ResolvedThemeConfiguration, 'typography'> & {\n  typography?: ThemeTypographyPreset | null\n}\n\n/**\n * Server-side theme CSS injector to prevent FOUC\n * This component injects critical theme CSS directly into the HTML head during SSR\n */\nexport async function ServerThemeInjector({ themeConfiguration }: Readonly<ServerThemeInjectorProps>) {\n  // Accept unknown type to avoid type conflicts between app's payload-types and plugin's payload-types\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const resolvedConfiguration = resolveThemeConfiguration(themeConfiguration as any)\n  const {\n    theme,\n    borderRadius,\n    customCSS,\n    lightMode,\n    darkMode,\n    fontScale,\n    spacing,\n    animationLevel,\n    allowColorModeToggle,\n    colorMode,\n    typography,\n  } = resolvedConfiguration\n\n  // Use resolved configuration directly\n  const normalizedThemeConfiguration: RuntimeThemeConfiguration = {\n    theme,\n    colorMode,\n    allowColorModeToggle,\n    borderRadius,\n    fontScale,\n    spacing,\n    animationLevel,\n    customCSS: customCSS ?? undefined,\n    lightMode,\n    darkMode,\n    typography: typography ?? undefined,\n  }\n\n  let criticalCSS = await getThemeCriticalCSS(theme as ThemeDefaults)\n  criticalCSS ??= createFallbackCriticalCSS(theme as ThemeDefaults)\n\n  const borderRadiusMap: Record<string, BorderRadiusPreset> = {\n    none: 'none',\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    xl: 'xl',\n    full: 'xl',\n  }\n  const mappedBorderRadius = borderRadiusMap[borderRadius ?? 'medium'] ?? 'medium'\n  const borderRadiusConfig = getBorderRadiusConfig(mappedBorderRadius)\n  const cssRecord = typeof borderRadiusConfig?.css === 'string'\n    ? { '--radius-default': borderRadiusConfig.css }\n    : borderRadiusConfig?.css ?? {}\n\n  const borderRadiusCSS = Object.entries(cssRecord)\n    .map(([property, value]) => `  ${property}: ${value};`)\n    .join('\\n')\n\n  const borderRadiusBlock = borderRadiusCSS\n    ? `:root {\n${borderRadiusCSS}\n}`\n    : ''\n\n  const themeConfigurationCSS = generateThemeCSS(normalizedThemeConfiguration)\n  const colorModesCSS = generateThemeColorsCss({ themeName: theme, lightMode, darkMode })\n  const customCSSBlock = typeof customCSS === 'string' ? customCSS.trim() : ''\n\n  const combinedCSS = [\n    criticalCSS,\n    borderRadiusBlock,\n    themeConfigurationCSS,\n    colorModesCSS,\n    customCSSBlock,\n  ]\n    .filter((block) => Boolean(block?.trim?.().length))\n    .join('\\n\\n')\n\n  const themeCSSPath = getThemeCSSPath(theme as ThemeDefaults)\n  return (\n    <>\n      <InitTheme />\n      <style\n        id=\"theme-critical-css\"\n        dangerouslySetInnerHTML={{\n          __html: combinedCSS,\n        }}\n      />\n      <link rel=\"preload\" href={themeCSSPath} as=\"style\" />\n      <link rel=\"stylesheet\" href={themeCSSPath} />\n    </>\n  )\n}\n"],"names":["getBorderRadiusConfig","resolveThemeConfiguration","createFallbackCriticalCSS","getThemeCriticalCSS","getThemeCSSPath","generateThemeColorsCss","generateThemeCSS","InitTheme","ServerThemeInjector","themeConfiguration","resolvedConfiguration","theme","borderRadius","customCSS","lightMode","darkMode","fontScale","spacing","animationLevel","allowColorModeToggle","colorMode","typography","normalizedThemeConfiguration","undefined","criticalCSS","borderRadiusMap","none","small","medium","large","xl","full","mappedBorderRadius","borderRadiusConfig","cssRecord","css","borderRadiusCSS","Object","entries","map","property","value","join","borderRadiusBlock","themeConfigurationCSS","colorModesCSS","themeName","customCSSBlock","trim","combinedCSS","filter","block","Boolean","length","themeCSSPath","style","id","dangerouslySetInnerHTML","__html","link","rel","href","as"],"mappings":";AAAA,SAASA,qBAAqB,QAAQ,oCAAmC;AAGzE,SAASC,yBAAyB,QAAQ,wCAAuC;AAEjF,SACEC,yBAAyB,EACzBC,mBAAmB,EACnBC,eAAe,QACV,0BAAyB;AAChC,SAASC,sBAAsB,QAAQ,0BAAyB;AAChE,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,SAAS,QAAQ,iBAAgB;AAoB1C;;;CAGC,GACD,OAAO,eAAeC,oBAAoB,EAAEC,kBAAkB,EAAsC;IAClG,qGAAqG;IACrG,8DAA8D;IAC9D,MAAMC,wBAAwBT,0BAA0BQ;IACxD,MAAM,EACJE,KAAK,EACLC,YAAY,EACZC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,EACdC,oBAAoB,EACpBC,SAAS,EACTC,UAAU,EACX,GAAGX;IAEJ,sCAAsC;IACtC,MAAMY,+BAA0D;QAC9DX;QACAS;QACAD;QACAP;QACAI;QACAC;QACAC;QACAL,WAAWA,aAAaU;QACxBT;QACAC;QACAM,YAAYA,cAAcE;IAC5B;IAEA,IAAIC,cAAc,MAAMrB,oBAAoBQ;IAC5Ca,gBAAgBtB,0BAA0BS;IAE1C,MAAMc,kBAAsD;QAC1DC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,OAAO;QACPC,IAAI;QACJC,MAAM;IACR;IACA,MAAMC,qBAAqBP,eAAe,CAACb,gBAAgB,SAAS,IAAI;IACxE,MAAMqB,qBAAqBjC,sBAAsBgC;IACjD,MAAME,YAAY,OAAOD,oBAAoBE,QAAQ,WACjD;QAAE,oBAAoBF,mBAAmBE,GAAG;IAAC,IAC7CF,oBAAoBE,OAAO,CAAC;IAEhC,MAAMC,kBAAkBC,OAAOC,OAAO,CAACJ,WACpCK,GAAG,CAAC,CAAC,CAACC,UAAUC,MAAM,GAAK,CAAC,EAAE,EAAED,SAAS,EAAE,EAAEC,MAAM,CAAC,CAAC,EACrDC,IAAI,CAAC;IAER,MAAMC,oBAAoBP,kBACtB,CAAC;AACP,EAAEA,gBAAgB;CACjB,CAAC,GACI;IAEJ,MAAMQ,wBAAwBtC,iBAAiBgB;IAC/C,MAAMuB,gBAAgBxC,uBAAuB;QAAEyC,WAAWnC;QAAOG;QAAWC;IAAS;IACrF,MAAMgC,iBAAiB,OAAOlC,cAAc,WAAWA,UAAUmC,IAAI,KAAK;IAE1E,MAAMC,cAAc;QAClBzB;QACAmB;QACAC;QACAC;QACAE;KACD,CACEG,MAAM,CAAC,CAACC,QAAUC,QAAQD,OAAOH,SAASK,SAC1CX,IAAI,CAAC;IAER,MAAMY,eAAelD,gBAAgBO;IACrC,qBACE;;0BACE,KAACJ;0BACD,KAACgD;gBACCC,IAAG;gBACHC,yBAAyB;oBACvBC,QAAQT;gBACV;;0BAEF,KAACU;gBAAKC,KAAI;gBAAUC,MAAMP;gBAAcQ,IAAG;;0BAC3C,KAACH;gBAAKC,KAAI;gBAAaC,MAAMP;;;;AAGnC"}

package/dist/components/ThemePreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ThemePreview.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport React, { useMemo } from 'react'\r\nimport { themeIsValid } from '../providers/Theme/types.js'\r\nimport { defaultThemePresets } from '../presets.js'\r\n\r\nconst DEFAULT_THEME_KEY = 'cool'\r\nconst basePresetMap = defaultThemePresets.reduce<\r\n  Record<string, (typeof defaultThemePresets)[number]>\r\n>((accumulator, preset) => {\r\n  accumulator[preset.name] = preset\r\n  return accumulator\r\n}, {})\r\n\r\nconst fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? defaultThemePresets[0]\r\nconst fallbackLightMode = fallbackPreset?.lightMode ?? {\r\n  primary: '#3b82f6',\r\n  accent: '#06b6d4',\r\n  background: '#ffffff',\r\n  foreground: '#1f2937',\r\n}\r\n\r\nexport default function ThemePreview() {\r\n  // Get individual field values using useField hooks\r\n  const { value: selectedTheme } = useField<string>({ path: 'themeConfiguration.theme' })\r\n  const { value: primaryColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.primaryColor',\r\n  })\r\n  const { value: accentColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.accentColor',\r\n  })\r\n  const { value: backgroundColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.backgroundColor',\r\n  })\r\n  const { value: textColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.textColor',\r\n  })\r\n\r\n  // Determine current theme and if overrides are active\r\n  const currentTheme = themeIsValid(selectedTheme)\r\n    ? selectedTheme\r\n    : (fallbackPreset?.name ?? 'cool')\r\n  const hasOverrides = Boolean(primaryColor || accentColor || backgroundColor || textColor)\r\n\r\n  const themeColors = useMemo(() => {\r\n    const preset = basePresetMap[currentTheme] ?? fallbackPreset\r\n    const lightMode = preset?.lightMode ?? fallbackLightMode\r\n\r\n    return {\r\n      primary: lightMode?.primary ?? fallbackLightMode.primary,\r\n      accent:\r\n        lightMode?.accent ??\r\n        lightMode?.secondary ??\r\n        fallbackLightMode.accent ??\r\n        fallbackLightMode.primary,\r\n      background: lightMode?.background ?? fallbackLightMode.background,\r\n      text: lightMode?.foreground ?? fallbackLightMode.foreground,\r\n    }\r\n  }, [currentTheme])\r\n\r\n  const currentColors = useMemo(\r\n    () => ({\r\n      primary: primaryColor || themeColors.primary,\r\n      accent: accentColor || themeColors.accent,\r\n      background: backgroundColor || themeColors.background,\r\n      text: textColor || themeColors.text,\r\n    }),\r\n    [primaryColor, accentColor, backgroundColor, textColor, themeColors],\r\n  )\r\n\r\n  return (\r\n    <div className=\"theme-preview\" style={{ marginTop: '20px' }}>\r\n      <div\r\n        style={{\r\n          fontSize: '16px',\r\n          fontWeight: '600',\r\n          marginBottom: '16px',\r\n          color: '#374151',\r\n        }}\r\n      >\r\n        🎨 Live Theme Preview\r\n      </div>\r\n\r\n      <div\r\n        className=\"preview-container\"\r\n        style={{\r\n          border: '2px solid #e5e7eb',\r\n          borderRadius: '12px',\r\n          overflow: 'hidden',\r\n          backgroundColor: currentColors.background,\r\n          color: currentColors.text,\r\n          minHeight: '300px',\r\n        }}\r\n      >\r\n        {/* Header */}\r\n        <div\r\n          style={{\r\n            backgroundColor: currentColors.primary,\r\n            color: currentColors.background,\r\n            padding: '16px 24px',\r\n            display: 'flex',\r\n            justifyContent: 'space-between',\r\n            alignItems: 'center',\r\n          }}\r\n        >\r\n          <div style={{ fontSize: '20px', fontWeight: '700' }}>Your Website</div>\r\n          <nav style={{ display: 'flex', gap: '24px', fontSize: '14px' }}>\r\n            <span>Home</span>\r\n            <span>About</span>\r\n            <span>Services</span>\r\n            <span>Contact</span>\r\n          </nav>\r\n        </div>\r\n\r\n        {/* Content */}\r\n        <div style={{ padding: '32px 24px' }}>\r\n          <h1\r\n            style={{\r\n              fontSize: '32px',\r\n              fontWeight: '800',\r\n              marginBottom: '16px',\r\n              color: currentColors.text,\r\n            }}\r\n          >\r\n            Welcome to Your Site\r\n          </h1>\r\n\r\n          <p\r\n            style={{\r\n              fontSize: '16px',\r\n              lineHeight: '1.6',\r\n              marginBottom: '24px',\r\n              color: currentColors.text,\r\n              opacity: 0.8,\r\n            }}\r\n          >\r\n            This is how your content will look with the selected theme. The colors and styling will\r\n            be applied across your entire website.\r\n          </p>\r\n\r\n          {/* Buttons */}\r\n          <div style={{ display: 'flex', gap: '12px', marginBottom: '32px' }}>\r\n            <button\r\n              style={{\r\n                backgroundColor: currentColors.primary,\r\n                color: currentColors.background,\r\n                border: 'none',\r\n                padding: '12px 24px',\r\n                borderRadius: '6px',\r\n                fontSize: '14px',\r\n                fontWeight: '600',\r\n                cursor: 'pointer',\r\n              }}\r\n            >\r\n              Primary Button\r\n            </button>\r\n            <button\r\n              style={{\r\n                backgroundColor: 'transparent',\r\n                color: currentColors.primary,\r\n                border: `2px solid ${currentColors.primary}`,\r\n                padding: '10px 24px',\r\n                borderRadius: '6px',\r\n                fontSize: '14px',\r\n                fontWeight: '600',\r\n                cursor: 'pointer',\r\n              }}\r\n            >\r\n              Secondary Button\r\n            </button>\r\n          </div>\r\n\r\n          {/* Card */}\r\n          <div\r\n            style={{\r\n              backgroundColor: currentColors.text,\r\n              color: currentColors.background,\r\n              padding: '24px',\r\n              borderRadius: '8px',\r\n              opacity: 0.05,\r\n              marginBottom: '16px',\r\n            }}\r\n          />\r\n          <div\r\n            style={{\r\n              border: `1px solid ${currentColors.text}`,\r\n              padding: '20px',\r\n              borderRadius: '8px',\r\n              opacity: 0.1,\r\n            }}\r\n          >\r\n            <h3\r\n              style={{\r\n                fontSize: '18px',\r\n                fontWeight: '600',\r\n                marginBottom: '12px',\r\n                color: currentColors.text,\r\n              }}\r\n            >\r\n              Sample Card\r\n            </h3>\r\n            <p\r\n              style={{\r\n                fontSize: '14px',\r\n                color: currentColors.text,\r\n                opacity: 0.7,\r\n              }}\r\n            >\r\n              This shows how cards and content blocks will appear.\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Footer */}\r\n        <div\r\n          style={{\r\n            backgroundColor: currentColors.accent,\r\n            color: currentColors.background,\r\n            padding: '16px 24px',\r\n            textAlign: 'center',\r\n            fontSize: '14px',\r\n            marginTop: 'auto',\r\n          }}\r\n        >\r\n          © 2025 Your Website. Powered by PayloadCMS.\r\n        </div>\r\n      </div>\r\n\r\n      {/* Theme info */}\r\n      <div\r\n        style={{\r\n          marginTop: '12px',\r\n          fontSize: '12px',\r\n          color: '#6b7280',\r\n          display: 'grid',\r\n          gridTemplateColumns: 'repeat(2, 1fr)',\r\n          gap: '8px',\r\n        }}\r\n      >\r\n        <div>\r\n          <strong>Active Theme:</strong> {currentTheme}\r\n        </div>\r\n        <div>\r\n          <strong>Primary:</strong> {currentColors.primary}\r\n        </div>\r\n        <div>\r\n          <strong>Accent:</strong> {currentColors.accent}\r\n        </div>\r\n        <div>\r\n          <strong>Background:</strong> {currentColors.background}\r\n        </div>\r\n      </div>\r\n\r\n      {/* Customization indicator */}\r\n      {hasOverrides && (\r\n        <div\r\n          style={{\r\n            marginTop: '8px',\r\n            padding: '8px 12px',\r\n            backgroundColor: '#fef3c7',\r\n            borderRadius: '6px',\r\n            fontSize: '11px',\r\n            color: '#92400e',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            gap: '6px',\r\n          }}\r\n        >\r\n          <span>⚡</span>\r\n          <span>\r\n            <strong>Custom colors applied</strong> - overriding theme defaults\r\n          </span>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","React","useMemo","themeIsValid","defaultThemePresets","DEFAULT_THEME_KEY","basePresetMap","reduce","accumulator","preset","name","fallbackPreset","fallbackLightMode","lightMode","primary","accent","background","foreground","ThemePreview","value","selectedTheme","path","primaryColor","accentColor","backgroundColor","textColor","currentTheme","hasOverrides","Boolean","themeColors","secondary","text","currentColors","div","className","style","marginTop","fontSize","fontWeight","marginBottom","color","border","borderRadius","overflow","minHeight","padding","display","justifyContent","alignItems","nav","gap","span","h1","p","lineHeight","opacity","button","cursor","h3","textAlign","gridTemplateColumns","strong"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/ThemePreview.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\nimport { themeIsValid } from '../providers/Theme/types.js'\nimport { defaultThemePresets } from '../presets.js'\n\nconst DEFAULT_THEME_KEY = 'cool'\nconst basePresetMap = defaultThemePresets.reduce<\n  Record<string, (typeof defaultThemePresets)[number]>\n>((accumulator, preset) => {\n  accumulator[preset.name] = preset\n  return accumulator\n}, {})\n\nconst fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? defaultThemePresets[0]\nconst fallbackLightMode = fallbackPreset?.lightMode ?? {\n  primary: '#3b82f6',\n  accent: '#06b6d4',\n  background: '#ffffff',\n  foreground: '#1f2937',\n}\n\nexport default function ThemePreview() {\n  // Get individual field values using useField hooks\n  const { value: selectedTheme } = useField<string>({ path: 'themeConfiguration.theme' })\n  const { value: primaryColor } = useField<string>({\n    path: 'themeConfiguration.customization.primaryColor',\n  })\n  const { value: accentColor } = useField<string>({\n    path: 'themeConfiguration.customization.accentColor',\n  })\n  const { value: backgroundColor } = useField<string>({\n    path: 'themeConfiguration.customization.backgroundColor',\n  })\n  const { value: textColor } = useField<string>({\n    path: 'themeConfiguration.customization.textColor',\n  })\n\n  // Determine current theme and if overrides are active\n  const currentTheme = themeIsValid(selectedTheme)\n    ? selectedTheme\n    : (fallbackPreset?.name ?? 'cool')\n  const hasOverrides = Boolean(primaryColor || accentColor || backgroundColor || textColor)\n\n  const themeColors = useMemo(() => {\n    const preset = basePresetMap[currentTheme] ?? fallbackPreset\n    const lightMode = preset?.lightMode ?? fallbackLightMode\n\n    return {\n      primary: lightMode?.primary ?? fallbackLightMode.primary,\n      accent:\n        lightMode?.accent ??\n        lightMode?.secondary ??\n        fallbackLightMode.accent ??\n        fallbackLightMode.primary,\n      background: lightMode?.background ?? fallbackLightMode.background,\n      text: lightMode?.foreground ?? fallbackLightMode.foreground,\n    }\n  }, [currentTheme])\n\n  const currentColors = useMemo(\n    () => ({\n      primary: primaryColor || themeColors.primary,\n      accent: accentColor || themeColors.accent,\n      background: backgroundColor || themeColors.background,\n      text: textColor || themeColors.text,\n    }),\n    [primaryColor, accentColor, backgroundColor, textColor, themeColors],\n  )\n\n  return (\n    <div className=\"theme-preview\" style={{ marginTop: '20px' }}>\n      <div\n        style={{\n          fontSize: '16px',\n          fontWeight: '600',\n          marginBottom: '16px',\n          color: '#374151',\n        }}\n      >\n        🎨 Live Theme Preview\n      </div>\n\n      <div\n        className=\"preview-container\"\n        style={{\n          border: '2px solid #e5e7eb',\n          borderRadius: '12px',\n          overflow: 'hidden',\n          backgroundColor: currentColors.background,\n          color: currentColors.text,\n          minHeight: '300px',\n        }}\n      >\n        {/* Header */}\n        <div\n          style={{\n            backgroundColor: currentColors.primary,\n            color: currentColors.background,\n            padding: '16px 24px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n          }}\n        >\n          <div style={{ fontSize: '20px', fontWeight: '700' }}>Your Website</div>\n          <nav style={{ display: 'flex', gap: '24px', fontSize: '14px' }}>\n            <span>Home</span>\n            <span>About</span>\n            <span>Services</span>\n            <span>Contact</span>\n          </nav>\n        </div>\n\n        {/* Content */}\n        <div style={{ padding: '32px 24px' }}>\n          <h1\n            style={{\n              fontSize: '32px',\n              fontWeight: '800',\n              marginBottom: '16px',\n              color: currentColors.text,\n            }}\n          >\n            Welcome to Your Site\n          </h1>\n\n          <p\n            style={{\n              fontSize: '16px',\n              lineHeight: '1.6',\n              marginBottom: '24px',\n              color: currentColors.text,\n              opacity: 0.8,\n            }}\n          >\n            This is how your content will look with the selected theme. The colors and styling will\n            be applied across your entire website.\n          </p>\n\n          {/* Buttons */}\n          <div style={{ display: 'flex', gap: '12px', marginBottom: '32px' }}>\n            <button\n              style={{\n                backgroundColor: currentColors.primary,\n                color: currentColors.background,\n                border: 'none',\n                padding: '12px 24px',\n                borderRadius: '6px',\n                fontSize: '14px',\n                fontWeight: '600',\n                cursor: 'pointer',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              style={{\n                backgroundColor: 'transparent',\n                color: currentColors.primary,\n                border: `2px solid ${currentColors.primary}`,\n                padding: '10px 24px',\n                borderRadius: '6px',\n                fontSize: '14px',\n                fontWeight: '600',\n                cursor: 'pointer',\n              }}\n            >\n              Secondary Button\n            </button>\n          </div>\n\n          {/* Card */}\n          <div\n            style={{\n              backgroundColor: currentColors.text,\n              color: currentColors.background,\n              padding: '24px',\n              borderRadius: '8px',\n              opacity: 0.05,\n              marginBottom: '16px',\n            }}\n          />\n          <div\n            style={{\n              border: `1px solid ${currentColors.text}`,\n              padding: '20px',\n              borderRadius: '8px',\n              opacity: 0.1,\n            }}\n          >\n            <h3\n              style={{\n                fontSize: '18px',\n                fontWeight: '600',\n                marginBottom: '12px',\n                color: currentColors.text,\n              }}\n            >\n              Sample Card\n            </h3>\n            <p\n              style={{\n                fontSize: '14px',\n                color: currentColors.text,\n                opacity: 0.7,\n              }}\n            >\n              This shows how cards and content blocks will appear.\n            </p>\n          </div>\n        </div>\n\n        {/* Footer */}\n        <div\n          style={{\n            backgroundColor: currentColors.accent,\n            color: currentColors.background,\n            padding: '16px 24px',\n            textAlign: 'center',\n            fontSize: '14px',\n            marginTop: 'auto',\n          }}\n        >\n          © 2025 Your Website. Powered by PayloadCMS.\n        </div>\n      </div>\n\n      {/* Theme info */}\n      <div\n        style={{\n          marginTop: '12px',\n          fontSize: '12px',\n          color: '#6b7280',\n          display: 'grid',\n          gridTemplateColumns: 'repeat(2, 1fr)',\n          gap: '8px',\n        }}\n      >\n        <div>\n          <strong>Active Theme:</strong> {currentTheme}\n        </div>\n        <div>\n          <strong>Primary:</strong> {currentColors.primary}\n        </div>\n        <div>\n          <strong>Accent:</strong> {currentColors.accent}\n        </div>\n        <div>\n          <strong>Background:</strong> {currentColors.background}\n        </div>\n      </div>\n\n      {/* Customization indicator */}\n      {hasOverrides && (\n        <div\n          style={{\n            marginTop: '8px',\n            padding: '8px 12px',\n            backgroundColor: '#fef3c7',\n            borderRadius: '6px',\n            fontSize: '11px',\n            color: '#92400e',\n            display: 'flex',\n            alignItems: 'center',\n            gap: '6px',\n          }}\n        >\n          <span>⚡</span>\n          <span>\n            <strong>Custom colors applied</strong> - overriding theme defaults\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useField","React","useMemo","themeIsValid","defaultThemePresets","DEFAULT_THEME_KEY","basePresetMap","reduce","accumulator","preset","name","fallbackPreset","fallbackLightMode","lightMode","primary","accent","background","foreground","ThemePreview","value","selectedTheme","path","primaryColor","accentColor","backgroundColor","textColor","currentTheme","hasOverrides","Boolean","themeColors","secondary","text","currentColors","div","className","style","marginTop","fontSize","fontWeight","marginBottom","color","border","borderRadius","overflow","minHeight","padding","display","justifyContent","alignItems","nav","gap","span","h1","p","lineHeight","opacity","button","cursor","h3","textAlign","gridTemplateColumns","strong"],"mappings":"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"}

package/dist/components/typographyPreviewUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/typographyPreviewUtils.ts"],"sourcesContent":["import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '../constants/themeFonts.js'\r\nimport { defaultThemePresets } from '../presets.js'\r\n\r\nexport interface TypographySelection {\r\n  bodyFont?: string | null\r\n  headingFont?: string | null\r\n  bodyFontCustom?: string | null\r\n  headingFontCustom?: string | null\r\n  baseFontSize?: string | null\r\n  lineHeight?: string | null\r\n}\r\n\r\nexport interface ResolvedTypographyPreview {\r\n  bodyFont: string\r\n  headingFont: string\r\n  baseFontSize: string\r\n  lineHeight: string\r\n  bodyLabel: string\r\n  headingLabel: string\r\n}\r\n\r\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\r\nconst fallbackPreset =\r\n  defaultThemePresets.find((preset) => preset.name === FALLBACK_THEME) ?? defaultThemePresets[0]\r\n\r\nconst FONT_VAR_FALLBACK: Record<string, string> = {\r\n  'var(--font-geist-sans)': '\"Geist Sans\", system-ui, sans-serif',\r\n  'var(--font-geist-mono)': '\"Geist Mono\", SFMono-Regular, ui-monospace, monospace',\r\n  'var(--font-inter)': '\"Inter\", system-ui, sans-serif',\r\n  'var(--font-outfit)': '\"Outfit\", system-ui, sans-serif',\r\n  'var(--font-playfair)': '\"Playfair Display\", \"Times New Roman\", serif',\r\n  'var(--font-lora)': '\"Lora\", \"Times New Roman\", serif',\r\n  'var(--font-manrope)': '\"Manrope\", system-ui, sans-serif',\r\n  'var(--font-urbanist)': '\"Urbanist\", system-ui, sans-serif',\r\n}\r\n\r\nfunction withFallback(fontFamily: string, fallback: string): string {\r\n  if (!fontFamily) return fallback\r\n\r\n  if (fontFamily.startsWith('var(')) {\r\n    const mappedFallback = FONT_VAR_FALLBACK[fontFamily] ?? fallback\r\n    return `${fontFamily}, ${mappedFallback}`\r\n  }\r\n\r\n  return fontFamily\r\n}\r\n\r\nfunction getPresetTypography(themeName?: string) {\r\n  const preset = defaultThemePresets.find((item) => item.name === themeName) ?? fallbackPreset\r\n  return preset?.typography\r\n}\r\n\r\nfunction resolveFontFamily(\r\n  value: string | null | undefined,\r\n  customValue: string | null | undefined,\r\n  fallback: string,\r\n): string {\r\n  if (!value || value === 'preset') {\r\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\r\n  }\r\n\r\n  if (value === 'custom') {\r\n    if (customValue && customValue.trim().length > 0) {\r\n      return customValue.trim()\r\n    }\r\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\r\n  }\r\n\r\n  const preconfigured = FONT_VALUE_TO_CSS[value]\r\n  if (preconfigured) {\r\n    return withFallback(\r\n      preconfigured,\r\n      fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif',\r\n    )\r\n  }\r\n\r\n  return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\r\n}\r\n\r\nfunction resolveOptionLabel(\r\n  options: ReadonlyArray<{ label: string | Record<string, string>; value: string }>,\r\n  value?: string | null,\r\n  locale: 'en' | 'cs' = 'en',\r\n): string {\r\n  const option = options.find((item) => item.value === value)\r\n  if (!option) return value ?? ''\r\n  if (typeof option.label === 'string') {\r\n    return option.label\r\n  }\r\n  return option.label?.[locale] ?? Object.values(option.label)[0] ?? option.value\r\n}\r\n\r\nexport function resolveTypographyPreview(\r\n  selection: TypographySelection | null | undefined,\r\n  themeName?: string,\r\n): ResolvedTypographyPreview {\r\n  const presetTypography = getPresetTypography(themeName)\r\n  const fallbackBody = presetTypography?.fontFamily ?? 'system-ui, sans-serif'\r\n  const fallbackHeading = presetTypography?.headingFamily ?? fallbackBody\r\n  const fallbackSize = presetTypography?.baseFontSize ?? '16px'\r\n  const fallbackLineHeight = presetTypography?.lineHeight ?? '1.6'\r\n\r\n  const bodyFontValue = selection?.bodyFont ?? 'preset'\r\n  const headingFontValue = selection?.headingFont ?? 'preset'\r\n  const bodyFontCustom = selection?.bodyFontCustom ?? undefined\r\n  const headingFontCustom = selection?.headingFontCustom ?? undefined\r\n  const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody)\r\n  const resolvedHeadingFont = resolveFontFamily(\r\n    headingFontValue,\r\n    headingFontCustom,\r\n    fallbackHeading,\r\n  )\r\n\r\n  const baseFontSize =\r\n    selection?.baseFontSize && selection.baseFontSize !== 'preset'\r\n      ? selection.baseFontSize\r\n      : fallbackSize\r\n  const lineHeight =\r\n    selection?.lineHeight && selection.lineHeight !== 'preset'\r\n      ? selection.lineHeight\r\n      : fallbackLineHeight\r\n\r\n  return {\r\n    bodyFont: resolvedBodyFont,\r\n    headingFont: resolvedHeadingFont,\r\n    baseFontSize,\r\n    lineHeight,\r\n    bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),\r\n    headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue),\r\n  }\r\n}\r\n"],"names":["BODY_FONT_OPTIONS","FONT_VALUE_TO_CSS","HEADING_FONT_OPTIONS","defaultThemePresets","FALLBACK_THEME","name","fallbackPreset","find","preset","FONT_VAR_FALLBACK","withFallback","fontFamily","fallback","startsWith","mappedFallback","getPresetTypography","themeName","item","typography","resolveFontFamily","value","customValue","trim","length","preconfigured","resolveOptionLabel","options","locale","option","label","Object","values","resolveTypographyPreview","selection","presetTypography","fallbackBody","fallbackHeading","headingFamily","fallbackSize","baseFontSize","fallbackLineHeight","lineHeight","bodyFontValue","bodyFont","headingFontValue","headingFont","bodyFontCustom","undefined","headingFontCustom","resolvedBodyFont","resolvedHeadingFont","bodyLabel","headingLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/typographyPreviewUtils.ts"],"sourcesContent":["import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '../constants/themeFonts.js'\nimport { defaultThemePresets } from '../presets.js'\n\nexport interface TypographySelection {\n  bodyFont?: string | null\n  headingFont?: string | null\n  bodyFontCustom?: string | null\n  headingFontCustom?: string | null\n  baseFontSize?: string | null\n  lineHeight?: string | null\n}\n\nexport interface ResolvedTypographyPreview {\n  bodyFont: string\n  headingFont: string\n  baseFontSize: string\n  lineHeight: string\n  bodyLabel: string\n  headingLabel: string\n}\n\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\nconst fallbackPreset =\n  defaultThemePresets.find((preset) => preset.name === FALLBACK_THEME) ?? defaultThemePresets[0]\n\nconst FONT_VAR_FALLBACK: Record<string, string> = {\n  'var(--font-geist-sans)': '\"Geist Sans\", system-ui, sans-serif',\n  'var(--font-geist-mono)': '\"Geist Mono\", SFMono-Regular, ui-monospace, monospace',\n  'var(--font-inter)': '\"Inter\", system-ui, sans-serif',\n  'var(--font-outfit)': '\"Outfit\", system-ui, sans-serif',\n  'var(--font-playfair)': '\"Playfair Display\", \"Times New Roman\", serif',\n  'var(--font-lora)': '\"Lora\", \"Times New Roman\", serif',\n  'var(--font-manrope)': '\"Manrope\", system-ui, sans-serif',\n  'var(--font-urbanist)': '\"Urbanist\", system-ui, sans-serif',\n}\n\nfunction withFallback(fontFamily: string, fallback: string): string {\n  if (!fontFamily) return fallback\n\n  if (fontFamily.startsWith('var(')) {\n    const mappedFallback = FONT_VAR_FALLBACK[fontFamily] ?? fallback\n    return `${fontFamily}, ${mappedFallback}`\n  }\n\n  return fontFamily\n}\n\nfunction getPresetTypography(themeName?: string) {\n  const preset = defaultThemePresets.find((item) => item.name === themeName) ?? fallbackPreset\n  return preset?.typography\n}\n\nfunction resolveFontFamily(\n  value: string | null | undefined,\n  customValue: string | null | undefined,\n  fallback: string,\n): string {\n  if (!value || value === 'preset') {\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n  }\n\n  if (value === 'custom') {\n    if (customValue && customValue.trim().length > 0) {\n      return customValue.trim()\n    }\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n  }\n\n  const preconfigured = FONT_VALUE_TO_CSS[value]\n  if (preconfigured) {\n    return withFallback(\n      preconfigured,\n      fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif',\n    )\n  }\n\n  return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\n}\n\nfunction resolveOptionLabel(\n  options: ReadonlyArray<{ label: string | Record<string, string>; value: string }>,\n  value?: string | null,\n  locale: 'en' | 'cs' = 'en',\n): string {\n  const option = options.find((item) => item.value === value)\n  if (!option) return value ?? ''\n  if (typeof option.label === 'string') {\n    return option.label\n  }\n  return option.label?.[locale] ?? Object.values(option.label)[0] ?? option.value\n}\n\nexport function resolveTypographyPreview(\n  selection: TypographySelection | null | undefined,\n  themeName?: string,\n): ResolvedTypographyPreview {\n  const presetTypography = getPresetTypography(themeName)\n  const fallbackBody = presetTypography?.fontFamily ?? 'system-ui, sans-serif'\n  const fallbackHeading = presetTypography?.headingFamily ?? fallbackBody\n  const fallbackSize = presetTypography?.baseFontSize ?? '16px'\n  const fallbackLineHeight = presetTypography?.lineHeight ?? '1.6'\n\n  const bodyFontValue = selection?.bodyFont ?? 'preset'\n  const headingFontValue = selection?.headingFont ?? 'preset'\n  const bodyFontCustom = selection?.bodyFontCustom ?? undefined\n  const headingFontCustom = selection?.headingFontCustom ?? undefined\n  const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody)\n  const resolvedHeadingFont = resolveFontFamily(\n    headingFontValue,\n    headingFontCustom,\n    fallbackHeading,\n  )\n\n  const baseFontSize =\n    selection?.baseFontSize && selection.baseFontSize !== 'preset'\n      ? selection.baseFontSize\n      : fallbackSize\n  const lineHeight =\n    selection?.lineHeight && selection.lineHeight !== 'preset'\n      ? selection.lineHeight\n      : fallbackLineHeight\n\n  return {\n    bodyFont: resolvedBodyFont,\n    headingFont: resolvedHeadingFont,\n    baseFontSize,\n    lineHeight,\n    bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),\n    headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue),\n  }\n}\n"],"names":["BODY_FONT_OPTIONS","FONT_VALUE_TO_CSS","HEADING_FONT_OPTIONS","defaultThemePresets","FALLBACK_THEME","name","fallbackPreset","find","preset","FONT_VAR_FALLBACK","withFallback","fontFamily","fallback","startsWith","mappedFallback","getPresetTypography","themeName","item","typography","resolveFontFamily","value","customValue","trim","length","preconfigured","resolveOptionLabel","options","locale","option","label","Object","values","resolveTypographyPreview","selection","presetTypography","fallbackBody","fallbackHeading","headingFamily","fallbackSize","baseFontSize","fallbackLineHeight","lineHeight","bodyFontValue","bodyFont","headingFontValue","headingFont","bodyFontCustom","undefined","headingFontCustom","resolvedBodyFont","resolvedHeadingFont","bodyLabel","headingLabel"],"mappings":"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"}

package/dist/constants/themeFonts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\r\nexport const BODY_FONT_OPTIONS = [\r\n  { label: 'System', value: 'system-ui' },\r\n  { label: 'Inter', value: 'Inter' },\r\n  { label: 'Roboto', value: 'Roboto' },\r\n  { label: 'Open Sans', value: 'Open Sans' },\r\n  { label: 'Lato', value: 'Lato' },\r\n  { label: 'Montserrat', value: 'Montserrat' },\r\n  { label: 'Poppins', value: 'Poppins' },\r\n] as const;\r\n\r\nexport const HEADING_FONT_OPTIONS = [\r\n  { label: 'System', value: 'system-ui' },\r\n  { label: 'Inter', value: 'Inter' },\r\n  { label: 'Playfair Display', value: 'Playfair Display' },\r\n  { label: 'Merriweather', value: 'Merriweather' },\r\n  { label: 'Montserrat', value: 'Montserrat' },\r\n  { label: 'Raleway', value: 'Raleway' },\r\n] as const;\r\n\r\nexport const BASE_FONT_SIZE_OPTIONS = [\r\n  { label: '14px', value: '14' },\r\n  { label: '15px', value: '15' },\r\n  { label: '16px', value: '16' },\r\n  { label: '17px', value: '17' },\r\n  { label: '18px', value: '18' },\r\n] as const;\r\n\r\nexport const LINE_HEIGHT_OPTIONS = [\r\n  { label: '1.4', value: '1.4' },\r\n  { label: '1.5', value: '1.5' },\r\n  { label: '1.6', value: '1.6' },\r\n  { label: '1.7', value: '1.7' },\r\n  { label: '1.8', value: '1.8' },\r\n] as const;\r\n\r\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\r\n  'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\r\n  'Inter': '\"Inter\", sans-serif',\r\n  'Roboto': '\"Roboto\", sans-serif',\r\n  'Open Sans': '\"Open Sans\", sans-serif',\r\n  'Lato': '\"Lato\", sans-serif',\r\n  'Montserrat': '\"Montserrat\", sans-serif',\r\n  'Poppins': '\"Poppins\", sans-serif',\r\n  'Playfair Display': '\"Playfair Display\", serif',\r\n  'Merriweather': '\"Merriweather\", serif',\r\n  'Raleway': '\"Raleway\", sans-serif',\r\n};\r\n"],"names":["BODY_FONT_OPTIONS","label","value","HEADING_FONT_OPTIONS","BASE_FONT_SIZE_OPTIONS","LINE_HEIGHT_OPTIONS","FONT_VALUE_TO_CSS"],"mappings":"AAAA,sCAAsC;AACtC,OAAO,MAAMA,oBAAoB;IAC/B;QAAEC,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAMC,uBAAuB;IAClC;QAAEF,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAoBC,OAAO;IAAmB;IACvD;QAAED,OAAO;QAAgBC,OAAO;IAAe;IAC/C;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAME,yBAAyB;IACpC;QAAEH,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;CAC9B,CAAU;AAEX,OAAO,MAAMG,sBAAsB;IACjC;QAAEJ,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;CAC9B,CAAU;AAEX,OAAO,MAAMI,oBAA4C;IACvD,aAAa;IACb,SAAS;IACT,UAAU;IACV,aAAa;IACb,QAAQ;IACR,cAAc;IACd,WAAW;IACX,oBAAoB;IACpB,gBAAgB;IAChB,WAAW;AACb,EAAE"}
+{"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\nexport const BODY_FONT_OPTIONS = [\n  { label: 'System', value: 'system-ui' },\n  { label: 'Inter', value: 'Inter' },\n  { label: 'Roboto', value: 'Roboto' },\n  { label: 'Open Sans', value: 'Open Sans' },\n  { label: 'Lato', value: 'Lato' },\n  { label: 'Montserrat', value: 'Montserrat' },\n  { label: 'Poppins', value: 'Poppins' },\n] as const;\n\nexport const HEADING_FONT_OPTIONS = [\n  { label: 'System', value: 'system-ui' },\n  { label: 'Inter', value: 'Inter' },\n  { label: 'Playfair Display', value: 'Playfair Display' },\n  { label: 'Merriweather', value: 'Merriweather' },\n  { label: 'Montserrat', value: 'Montserrat' },\n  { label: 'Raleway', value: 'Raleway' },\n] as const;\n\nexport const BASE_FONT_SIZE_OPTIONS = [\n  { label: '14px', value: '14' },\n  { label: '15px', value: '15' },\n  { label: '16px', value: '16' },\n  { label: '17px', value: '17' },\n  { label: '18px', value: '18' },\n] as const;\n\nexport const LINE_HEIGHT_OPTIONS = [\n  { label: '1.4', value: '1.4' },\n  { label: '1.5', value: '1.5' },\n  { label: '1.6', value: '1.6' },\n  { label: '1.7', value: '1.7' },\n  { label: '1.8', value: '1.8' },\n] as const;\n\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\n  'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n  'Inter': '\"Inter\", sans-serif',\n  'Roboto': '\"Roboto\", sans-serif',\n  'Open Sans': '\"Open Sans\", sans-serif',\n  'Lato': '\"Lato\", sans-serif',\n  'Montserrat': '\"Montserrat\", sans-serif',\n  'Poppins': '\"Poppins\", sans-serif',\n  'Playfair Display': '\"Playfair Display\", serif',\n  'Merriweather': '\"Merriweather\", serif',\n  'Raleway': '\"Raleway\", sans-serif',\n};\n"],"names":["BODY_FONT_OPTIONS","label","value","HEADING_FONT_OPTIONS","BASE_FONT_SIZE_OPTIONS","LINE_HEIGHT_OPTIONS","FONT_VALUE_TO_CSS"],"mappings":"AAAA,sCAAsC;AACtC,OAAO,MAAMA,oBAAoB;IAC/B;QAAEC,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAMC,uBAAuB;IAClC;QAAEF,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAoBC,OAAO;IAAmB;IACvD;QAAED,OAAO;QAAgBC,OAAO;IAAe;IAC/C;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAME,yBAAyB;IACpC;QAAEH,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;CAC9B,CAAU;AAEX,OAAO,MAAMG,sBAAsB;IACjC;QAAEJ,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;CAC9B,CAAU;AAEX,OAAO,MAAMI,oBAA4C;IACvD,aAAa;IACb,SAAS;IACT,UAAU;IACV,aAAa;IACb,QAAQ;IACR,cAAc;IACd,WAAW;IACX,oBAAoB;IACpB,gBAAgB;IAChB,WAAW;AACb,EAAE"}

package/dist/extended-presets.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Extended Shadcn-style theme presets with full color token support
+ * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme
+ *
+ * This extends the existing theme system with:
+ * - Full shadcn/ui color tokens
+ * - OKLCH color format support
+ * - Chart colors (chart-1 through chart-5)
+ * - Semantic color tokens (destructive, muted, accent, etc.)
+ * - CSS variable generation for Tailwind integration
+ */
+export interface ShadcnColorTokens {
+    background: string;
+    foreground: string;
+    card: string;
+    'card-foreground': string;
+    popover: string;
+    'popover-foreground': string;
+    primary: string;
+    'primary-foreground': string;
+    secondary: string;
+    'secondary-foreground': string;
+    muted: string;
+    'muted-foreground': string;
+    accent: string;
+    'accent-foreground': string;
+    destructive: string;
+    'destructive-foreground': string;
+    border: string;
+    input: string;
+    ring: string;
+    'chart-1': string;
+    'chart-2': string;
+    'chart-3': string;
+    'chart-4': string;
+    'chart-5': string;
+    radius?: string;
+    'font-sans'?: string;
+    'font-mono'?: string;
+}
+export interface ExtendedThemePreset {
+    label: string;
+    value: string;
+    styles: {
+        light: ShadcnColorTokens;
+        dark: ShadcnColorTokens;
+    };
+}
+/**
+ * Extended theme presets with full shadcn/ui token support
+ * These work alongside the existing default presets
+ */
+export declare const extendedThemePresets: Record<string, ExtendedThemePreset>;
+/**
+ * Convert extended theme to CSS variables
+ */
+export declare function extendedThemeToCSSVariables(theme: ExtendedThemePreset, mode?: 'light' | 'dark'): string;
+/**
+ * Generate complete CSS for an extended theme
+ */
+export declare function generateExtendedThemeCSS(theme: ExtendedThemePreset): string;
+//# sourceMappingURL=extended-presets.d.ts.map

package/dist/extended-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-presets.d.ts","sourceRoot":"","sources":["../src/extended-presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,iBAAiB;IAEhC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAGlB,IAAI,EAAE,MAAM,CAAA;IACZ,iBAAiB,EAAE,MAAM,CAAA;IAGzB,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,SAAS,EAAE,MAAM,CAAA;IACjB,sBAAsB,EAAE,MAAM,CAAA;IAG9B,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,EAAE,MAAM,CAAA;IAG1B,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,EAAE,MAAM,CAAA;IAG3B,WAAW,EAAE,MAAM,CAAA;IACnB,wBAAwB,EAAE,MAAM,CAAA;IAGhC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IAGZ,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IAGjB,MAAM,CAAC,EAAE,MAAM,CAAA;IAGf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACN,KAAK,EAAE,iBAAiB,CAAA;QACxB,IAAI,EAAE,iBAAiB,CAAA;KACxB,CAAA;CACF;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAuLpE,CAAA;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,MAAM,CASR;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAe3E"}

package/dist/extended-presets.js

@@ -0,0 +1,224 @@
+/**
+ * Extended Shadcn-style theme presets with full color token support
+ * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme
+ * 
+ * This extends the existing theme system with:
+ * - Full shadcn/ui color tokens
+ * - OKLCH color format support
+ * - Chart colors (chart-1 through chart-5)
+ * - Semantic color tokens (destructive, muted, accent, etc.)
+ * - CSS variable generation for Tailwind integration
+ */ /**
+ * Extended theme presets with full shadcn/ui token support
+ * These work alongside the existing default presets
+ */ export const extendedThemePresets = {
+    'cool-extended': {
+        label: 'Cool & Professional (Extended)',
+        value: 'cool-extended',
+        styles: {
+            light: {
+                background: 'oklch(1 0 0)',
+                foreground: 'oklch(0.145 0 0)',
+                card: 'oklch(1 0 0)',
+                'card-foreground': 'oklch(0.145 0 0)',
+                popover: 'oklch(1 0 0)',
+                'popover-foreground': 'oklch(0.145 0 0)',
+                primary: 'oklch(0.549 0.184 250.847)',
+                'primary-foreground': 'oklch(0.985 0.005 250.847)',
+                secondary: 'oklch(0.97 0 0)',
+                'secondary-foreground': 'oklch(0.205 0 0)',
+                muted: 'oklch(0.97 0 0)',
+                'muted-foreground': 'oklch(0.556 0 0)',
+                accent: 'oklch(0.97 0 0)',
+                'accent-foreground': 'oklch(0.205 0 0)',
+                destructive: 'oklch(0.577 0.245 27.325)',
+                'destructive-foreground': 'oklch(0.98 0 0)',
+                border: 'oklch(0.922 0 0)',
+                input: 'oklch(0.922 0 0)',
+                ring: 'oklch(0.549 0.184 250.847)',
+                'chart-1': 'oklch(0.549 0.184 250.847)',
+                'chart-2': 'oklch(0.645 0.168 250.847)',
+                'chart-3': 'oklch(0.445 0.204 250.847)',
+                'chart-4': 'oklch(0.349 0.184 250.847)',
+                'chart-5': 'oklch(0.749 0.124 250.847)',
+                radius: '0.5rem'
+            },
+            dark: {
+                background: 'oklch(0.145 0 0)',
+                foreground: 'oklch(0.985 0 0)',
+                card: 'oklch(0.205 0 0)',
+                'card-foreground': 'oklch(0.985 0 0)',
+                popover: 'oklch(0.269 0 0)',
+                'popover-foreground': 'oklch(0.985 0 0)',
+                primary: 'oklch(0.645 0.168 250.847)',
+                'primary-foreground': 'oklch(0.145 0.005 250.847)',
+                secondary: 'oklch(0.269 0 0)',
+                'secondary-foreground': 'oklch(0.985 0 0)',
+                muted: 'oklch(0.269 0 0)',
+                'muted-foreground': 'oklch(0.708 0 0)',
+                accent: 'oklch(0.371 0 0)',
+                'accent-foreground': 'oklch(0.985 0 0)',
+                destructive: 'oklch(0.704 0.191 22.216)',
+                'destructive-foreground': 'oklch(0.98 0 0)',
+                border: 'oklch(1 0 0 / 10%)',
+                input: 'oklch(1 0 0 / 15%)',
+                ring: 'oklch(0.645 0.168 250.847)',
+                'chart-1': 'oklch(0.645 0.168 250.847)',
+                'chart-2': 'oklch(0.549 0.184 250.847)',
+                'chart-3': 'oklch(0.445 0.204 250.847)',
+                'chart-4': 'oklch(0.749 0.124 250.847)',
+                'chart-5': 'oklch(0.849 0.084 250.847)',
+                radius: '0.5rem'
+            }
+        }
+    },
+    'neon-extended': {
+        label: 'Neon Cyberpunk (Extended)',
+        value: 'neon-extended',
+        styles: {
+            light: {
+                background: 'oklch(1 0 0)',
+                foreground: 'oklch(0.145 0 0)',
+                card: 'oklch(1 0 0)',
+                'card-foreground': 'oklch(0.145 0 0)',
+                popover: 'oklch(1 0 0)',
+                'popover-foreground': 'oklch(0.145 0 0)',
+                primary: 'oklch(0.628 0.258 328.363)',
+                'primary-foreground': 'oklch(0.985 0.015 328.363)',
+                secondary: 'oklch(0.97 0 0)',
+                'secondary-foreground': 'oklch(0.205 0 0)',
+                muted: 'oklch(0.97 0 0)',
+                'muted-foreground': 'oklch(0.556 0 0)',
+                accent: 'oklch(0.749 0.168 305.365)',
+                'accent-foreground': 'oklch(0.985 0.015 305.365)',
+                destructive: 'oklch(0.577 0.245 27.325)',
+                'destructive-foreground': 'oklch(0.98 0 0)',
+                border: 'oklch(0.922 0 0)',
+                input: 'oklch(0.922 0 0)',
+                ring: 'oklch(0.628 0.258 328.363)',
+                'chart-1': 'oklch(0.628 0.258 328.363)',
+                'chart-2': 'oklch(0.749 0.168 305.365)',
+                'chart-3': 'oklch(0.645 0.234 286.897)',
+                'chart-4': 'oklch(0.545 0.298 328.363)',
+                'chart-5': 'oklch(0.845 0.118 305.365)',
+                radius: '0.75rem'
+            },
+            dark: {
+                background: 'oklch(0.125 0.028 305.365)',
+                foreground: 'oklch(0.985 0.015 305.365)',
+                card: 'oklch(0.185 0.028 305.365)',
+                'card-foreground': 'oklch(0.985 0.015 305.365)',
+                popover: 'oklch(0.245 0.028 305.365)',
+                'popover-foreground': 'oklch(0.985 0.015 305.365)',
+                primary: 'oklch(0.749 0.168 305.365)',
+                'primary-foreground': 'oklch(0.125 0.028 305.365)',
+                secondary: 'oklch(0.245 0.028 305.365)',
+                'secondary-foreground': 'oklch(0.985 0.015 305.365)',
+                muted: 'oklch(0.245 0.028 305.365)',
+                'muted-foreground': 'oklch(0.708 0.015 305.365)',
+                accent: 'oklch(0.628 0.258 328.363)',
+                'accent-foreground': 'oklch(0.125 0.028 328.363)',
+                destructive: 'oklch(0.704 0.191 22.216)',
+                'destructive-foreground': 'oklch(0.98 0 0)',
+                border: 'oklch(1 0 0 / 15%)',
+                input: 'oklch(1 0 0 / 20%)',
+                ring: 'oklch(0.749 0.168 305.365)',
+                'chart-1': 'oklch(0.749 0.168 305.365)',
+                'chart-2': 'oklch(0.628 0.258 328.363)',
+                'chart-3': 'oklch(0.645 0.234 286.897)',
+                'chart-4': 'oklch(0.845 0.118 305.365)',
+                'chart-5': 'oklch(0.945 0.068 305.365)',
+                radius: '0.75rem'
+            }
+        }
+    },
+    'solar-extended': {
+        label: 'Solar Warmth (Extended)',
+        value: 'solar-extended',
+        styles: {
+            light: {
+                background: 'oklch(0.985 0.01 83.124)',
+                foreground: 'oklch(0.145 0 0)',
+                card: 'oklch(1 0 0)',
+                'card-foreground': 'oklch(0.145 0 0)',
+                popover: 'oklch(1 0 0)',
+                'popover-foreground': 'oklch(0.145 0 0)',
+                primary: 'oklch(0.656 0.214 53.877)',
+                'primary-foreground': 'oklch(0.985 0.015 53.877)',
+                secondary: 'oklch(0.97 0 0)',
+                'secondary-foreground': 'oklch(0.205 0 0)',
+                muted: 'oklch(0.97 0 0)',
+                'muted-foreground': 'oklch(0.556 0 0)',
+                accent: 'oklch(0.745 0.188 83.124)',
+                'accent-foreground': 'oklch(0.145 0 0)',
+                destructive: 'oklch(0.577 0.245 27.325)',
+                'destructive-foreground': 'oklch(0.98 0 0)',
+                border: 'oklch(0.922 0 0)',
+                input: 'oklch(0.922 0 0)',
+                ring: 'oklch(0.656 0.214 53.877)',
+                'chart-1': 'oklch(0.656 0.214 53.877)',
+                'chart-2': 'oklch(0.745 0.188 83.124)',
+                'chart-3': 'oklch(0.556 0.234 53.877)',
+                'chart-4': 'oklch(0.845 0.148 83.124)',
+                'chart-5': 'oklch(0.456 0.254 53.877)',
+                radius: '0.625rem'
+            },
+            dark: {
+                background: 'oklch(0.125 0.015 53.877)',
+                foreground: 'oklch(0.985 0.015 83.124)',
+                card: 'oklch(0.185 0.015 53.877)',
+                'card-foreground': 'oklch(0.985 0.015 83.124)',
+                popover: 'oklch(0.245 0.015 53.877)',
+                'popover-foreground': 'oklch(0.985 0.015 83.124)',
+                primary: 'oklch(0.745 0.188 83.124)',
+                'primary-foreground': 'oklch(0.125 0.015 83.124)',
+                secondary: 'oklch(0.245 0.015 53.877)',
+                'secondary-foreground': 'oklch(0.985 0.015 83.124)',
+                muted: 'oklch(0.245 0.015 53.877)',
+                'muted-foreground': 'oklch(0.708 0.015 83.124)',
+                accent: 'oklch(0.656 0.214 53.877)',
+                'accent-foreground': 'oklch(0.985 0.015 53.877)',
+                destructive: 'oklch(0.704 0.191 22.216)',
+                'destructive-foreground': 'oklch(0.98 0 0)',
+                border: 'oklch(1 0 0 / 12%)',
+                input: 'oklch(1 0 0 / 18%)',
+                ring: 'oklch(0.745 0.188 83.124)',
+                'chart-1': 'oklch(0.745 0.188 83.124)',
+                'chart-2': 'oklch(0.656 0.214 53.877)',
+                'chart-3': 'oklch(0.845 0.148 83.124)',
+                'chart-4': 'oklch(0.556 0.234 53.877)',
+                'chart-5': 'oklch(0.945 0.088 83.124)',
+                radius: '0.625rem'
+            }
+        }
+    }
+};
+/**
+ * Convert extended theme to CSS variables
+ */ export function extendedThemeToCSSVariables(theme, mode = 'light') {
+    const tokens = theme.styles[mode];
+    const cssVars = [];
+    Object.entries(tokens).forEach(([key, value])=>{
+        cssVars.push(`  --${key}: ${value};`);
+    });
+    return cssVars.join('\n');
+}
+/**
+ * Generate complete CSS for an extended theme
+ */ export function generateExtendedThemeCSS(theme) {
+    const lightCSS = extendedThemeToCSSVariables(theme, 'light');
+    const darkCSS = extendedThemeToCSSVariables(theme, 'dark');
+    return `:root {
+${lightCSS}
+}
+
+.dark {
+${darkCSS}
+}
+
+[data-theme-mode="dark"] {
+${darkCSS}
+}`;
+}
+
+//# sourceMappingURL=extended-presets.js.map

package/dist/extended-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/extended-presets.ts"],"sourcesContent":["/**\n * Extended Shadcn-style theme presets with full color token support\n * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme\n * \n * This extends the existing theme system with:\n * - Full shadcn/ui color tokens\n * - OKLCH color format support\n * - Chart colors (chart-1 through chart-5)\n * - Semantic color tokens (destructive, muted, accent, etc.)\n * - CSS variable generation for Tailwind integration\n */\n\nexport interface ShadcnColorTokens {\n  // Base colors\n  background: string\n  foreground: string\n  \n  // Card colors\n  card: string\n  'card-foreground': string\n  \n  // Popover colors\n  popover: string\n  'popover-foreground': string\n  \n  // Primary colors\n  primary: string\n  'primary-foreground': string\n  \n  // Secondary colors\n  secondary: string\n  'secondary-foreground': string\n  \n  // Muted colors\n  muted: string\n  'muted-foreground': string\n  \n  // Accent colors\n  accent: string\n  'accent-foreground': string\n  \n  // Destructive colors\n  destructive: string\n  'destructive-foreground': string\n  \n  // Border & Input\n  border: string\n  input: string\n  ring: string\n  \n  // Chart colors (for data visualization)\n  'chart-1': string\n  'chart-2': string\n  'chart-3': string\n  'chart-4': string\n  'chart-5': string\n  \n  // Border radius (optional)\n  radius?: string\n  \n  // Font families (optional)\n  'font-sans'?: string\n  'font-mono'?: string\n}\n\nexport interface ExtendedThemePreset {\n  label: string\n  value: string\n  styles: {\n    light: ShadcnColorTokens\n    dark: ShadcnColorTokens\n  }\n}\n\n/**\n * Extended theme presets with full shadcn/ui token support\n * These work alongside the existing default presets\n */\nexport const extendedThemePresets: Record<string, ExtendedThemePreset> = {\n  'cool-extended': {\n    label: 'Cool & Professional (Extended)',\n    value: 'cool-extended',\n    styles: {\n      light: {\n        background: 'oklch(1 0 0)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.549 0.184 250.847)',\n        'primary-foreground': 'oklch(0.985 0.005 250.847)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.97 0 0)',\n        'accent-foreground': 'oklch(0.205 0 0)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.549 0.184 250.847)',\n        'chart-1': 'oklch(0.549 0.184 250.847)',\n        'chart-2': 'oklch(0.645 0.168 250.847)',\n        'chart-3': 'oklch(0.445 0.204 250.847)',\n        'chart-4': 'oklch(0.349 0.184 250.847)',\n        'chart-5': 'oklch(0.749 0.124 250.847)',\n        radius: '0.5rem',\n      },\n      dark: {\n        background: 'oklch(0.145 0 0)',\n        foreground: 'oklch(0.985 0 0)',\n        card: 'oklch(0.205 0 0)',\n        'card-foreground': 'oklch(0.985 0 0)',\n        popover: 'oklch(0.269 0 0)',\n        'popover-foreground': 'oklch(0.985 0 0)',\n        primary: 'oklch(0.645 0.168 250.847)',\n        'primary-foreground': 'oklch(0.145 0.005 250.847)',\n        secondary: 'oklch(0.269 0 0)',\n        'secondary-foreground': 'oklch(0.985 0 0)',\n        muted: 'oklch(0.269 0 0)',\n        'muted-foreground': 'oklch(0.708 0 0)',\n        accent: 'oklch(0.371 0 0)',\n        'accent-foreground': 'oklch(0.985 0 0)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 10%)',\n        input: 'oklch(1 0 0 / 15%)',\n        ring: 'oklch(0.645 0.168 250.847)',\n        'chart-1': 'oklch(0.645 0.168 250.847)',\n        'chart-2': 'oklch(0.549 0.184 250.847)',\n        'chart-3': 'oklch(0.445 0.204 250.847)',\n        'chart-4': 'oklch(0.749 0.124 250.847)',\n        'chart-5': 'oklch(0.849 0.084 250.847)',\n        radius: '0.5rem',\n      },\n    },\n  },\n  \n  'neon-extended': {\n    label: 'Neon Cyberpunk (Extended)',\n    value: 'neon-extended',\n    styles: {\n      light: {\n        background: 'oklch(1 0 0)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.628 0.258 328.363)',\n        'primary-foreground': 'oklch(0.985 0.015 328.363)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.749 0.168 305.365)',\n        'accent-foreground': 'oklch(0.985 0.015 305.365)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.628 0.258 328.363)',\n        'chart-1': 'oklch(0.628 0.258 328.363)',\n        'chart-2': 'oklch(0.749 0.168 305.365)',\n        'chart-3': 'oklch(0.645 0.234 286.897)',\n        'chart-4': 'oklch(0.545 0.298 328.363)',\n        'chart-5': 'oklch(0.845 0.118 305.365)',\n        radius: '0.75rem',\n      },\n      dark: {\n        background: 'oklch(0.125 0.028 305.365)',\n        foreground: 'oklch(0.985 0.015 305.365)',\n        card: 'oklch(0.185 0.028 305.365)',\n        'card-foreground': 'oklch(0.985 0.015 305.365)',\n        popover: 'oklch(0.245 0.028 305.365)',\n        'popover-foreground': 'oklch(0.985 0.015 305.365)',\n        primary: 'oklch(0.749 0.168 305.365)',\n        'primary-foreground': 'oklch(0.125 0.028 305.365)',\n        secondary: 'oklch(0.245 0.028 305.365)',\n        'secondary-foreground': 'oklch(0.985 0.015 305.365)',\n        muted: 'oklch(0.245 0.028 305.365)',\n        'muted-foreground': 'oklch(0.708 0.015 305.365)',\n        accent: 'oklch(0.628 0.258 328.363)',\n        'accent-foreground': 'oklch(0.125 0.028 328.363)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 15%)',\n        input: 'oklch(1 0 0 / 20%)',\n        ring: 'oklch(0.749 0.168 305.365)',\n        'chart-1': 'oklch(0.749 0.168 305.365)',\n        'chart-2': 'oklch(0.628 0.258 328.363)',\n        'chart-3': 'oklch(0.645 0.234 286.897)',\n        'chart-4': 'oklch(0.845 0.118 305.365)',\n        'chart-5': 'oklch(0.945 0.068 305.365)',\n        radius: '0.75rem',\n      },\n    },\n  },\n  \n  'solar-extended': {\n    label: 'Solar Warmth (Extended)',\n    value: 'solar-extended',\n    styles: {\n      light: {\n        background: 'oklch(0.985 0.01 83.124)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.656 0.214 53.877)',\n        'primary-foreground': 'oklch(0.985 0.015 53.877)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.745 0.188 83.124)',\n        'accent-foreground': 'oklch(0.145 0 0)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.656 0.214 53.877)',\n        'chart-1': 'oklch(0.656 0.214 53.877)',\n        'chart-2': 'oklch(0.745 0.188 83.124)',\n        'chart-3': 'oklch(0.556 0.234 53.877)',\n        'chart-4': 'oklch(0.845 0.148 83.124)',\n        'chart-5': 'oklch(0.456 0.254 53.877)',\n        radius: '0.625rem',\n      },\n      dark: {\n        background: 'oklch(0.125 0.015 53.877)',\n        foreground: 'oklch(0.985 0.015 83.124)',\n        card: 'oklch(0.185 0.015 53.877)',\n        'card-foreground': 'oklch(0.985 0.015 83.124)',\n        popover: 'oklch(0.245 0.015 53.877)',\n        'popover-foreground': 'oklch(0.985 0.015 83.124)',\n        primary: 'oklch(0.745 0.188 83.124)',\n        'primary-foreground': 'oklch(0.125 0.015 83.124)',\n        secondary: 'oklch(0.245 0.015 53.877)',\n        'secondary-foreground': 'oklch(0.985 0.015 83.124)',\n        muted: 'oklch(0.245 0.015 53.877)',\n        'muted-foreground': 'oklch(0.708 0.015 83.124)',\n        accent: 'oklch(0.656 0.214 53.877)',\n        'accent-foreground': 'oklch(0.985 0.015 53.877)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 12%)',\n        input: 'oklch(1 0 0 / 18%)',\n        ring: 'oklch(0.745 0.188 83.124)',\n        'chart-1': 'oklch(0.745 0.188 83.124)',\n        'chart-2': 'oklch(0.656 0.214 53.877)',\n        'chart-3': 'oklch(0.845 0.148 83.124)',\n        'chart-4': 'oklch(0.556 0.234 53.877)',\n        'chart-5': 'oklch(0.945 0.088 83.124)',\n        radius: '0.625rem',\n      },\n    },\n  },\n}\n\n/**\n * Convert extended theme to CSS variables\n */\nexport function extendedThemeToCSSVariables(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark' = 'light'\n): string {\n  const tokens = theme.styles[mode]\n  const cssVars: string[] = []\n  \n  Object.entries(tokens).forEach(([key, value]) => {\n    cssVars.push(`  --${key}: ${value};`)\n  })\n  \n  return cssVars.join('\\n')\n}\n\n/**\n * Generate complete CSS for an extended theme\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n  const lightCSS = extendedThemeToCSSVariables(theme, 'light')\n  const darkCSS = extendedThemeToCSSVariables(theme, 'dark')\n  \n  return `:root {\n${lightCSS}\n}\n\n.dark {\n${darkCSS}\n}\n\n[data-theme-mode=\"dark\"] {\n${darkCSS}\n}`\n}\n"],"names":["extendedThemePresets","label","value","styles","light","background","foreground","card","popover","primary","secondary","muted","accent","destructive","border","input","ring","radius","dark","extendedThemeToCSSVariables","theme","mode","tokens","cssVars","Object","entries","forEach","key","push","join","generateExtendedThemeCSS","lightCSS","darkCSS"],"mappings":"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"}