@kilivi/payloadcms-theme-management 0.5.5 → 0.5.7

package/README.md

@@ -43,12 +43,12 @@ yarn add @kilivi/payloadcms-theme-management
 ### 1. Add Plugin to Payload Config
 
 ```typescript
-import { buildConfig } from 'payload'
 import { themeManagementPlugin } from '@kilivi/payloadcms-theme-management'
+import { buildConfig } from 'payload'
 
 export default buildConfig({
   // ... other config
-  
+
   globals: [
     {
       slug: 'site-settings',
@@ -61,7 +61,7 @@ export default buildConfig({
       ],
     },
   ],
-  
+
   plugins: [
     themeManagementPlugin({
       enabled: true,
@@ -84,13 +84,9 @@ import { ServerThemeInjector } from '@kilivi/payloadcms-theme-management/server'
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
 
-export default async function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const payload = await getPayload({ config: configPromise })
-  
+
   const { docs } = await payload.find({
     collection: 'site-settings',
     limit: 1,
@@ -123,25 +119,22 @@ The plugin injects CSS custom properties you can use:
 Or with Tailwind CSS:
 
 ```tsx
-<div className="bg-primary text-primary-foreground rounded-lg">
-  Themed Content
-</div>
+<div className="bg-primary text-primary-foreground rounded-lg">Themed Content</div>
 ```
 
-
 ## Plugin Configuration Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `enabled` | `boolean` | `true` | Enable/disable the plugin |
-| `targetCollection` | `string` | `'site-settings'` | Global or collection slug to add theme field to |
-| `themePresets` | `ThemePreset[]` | Built-in presets | Custom theme presets |
-| `defaultTheme` | `string` | `'cool'` | Default theme preset name |
-| `includeColorModeToggle` | `boolean` | `true` | Show light/dark mode toggle |
-| `includeCustomCSS` | `boolean` | `true` | Allow custom CSS injection |
-| `includeBrandIdentity` | `boolean` | `false` | Show brand identity fields |
-| `enableAdvancedFeatures` | `boolean` | `true` | Enable advanced customization |
-| `enableLogging` | `boolean` | `false` | Log plugin actions to console |
+| Option                   | Type            | Default           | Description                                     |
+| ------------------------ | --------------- | ----------------- | ----------------------------------------------- |
+| `enabled`                | `boolean`       | `true`            | Enable/disable the plugin                       |
+| `targetCollection`       | `string`        | `'site-settings'` | Global or collection slug to add theme field to |
+| `themePresets`           | `ThemePreset[]` | Built-in presets  | Custom theme presets                            |
+| `defaultTheme`           | `string`        | `'cool'`          | Default theme preset name                       |
+| `includeColorModeToggle` | `boolean`       | `true`            | Show light/dark mode toggle                     |
+| `includeCustomCSS`       | `boolean`       | `true`            | Allow custom CSS injection                      |
+| `includeBrandIdentity`   | `boolean`       | `false`           | Show brand identity fields                      |
+| `enableAdvancedFeatures` | `boolean`       | `true`            | Enable advanced customization                   |
+| `enableLogging`          | `boolean`       | `false`           | Log plugin actions to console                   |
 
 ## Available Theme Presets
 
@@ -157,6 +150,7 @@ Or with Tailwind CSS:
 The plugin automatically adds a **Live Preview** page to your admin panel at `/admin/theme-preview`.
 
 ### Features:
+
 - ✅ **Zero Configuration** - Works automatically when plugin is installed
 - ✅ **Real-time Updates** - See changes instantly as you edit theme settings
 - ✅ **Light/Dark Toggle** - Preview both modes side-by-side
@@ -164,6 +158,7 @@ The plugin automatically adds a **Live Preview** page to your admin panel at `/a
 - ✅ **Professional UI** - Clean, modern preview interface
 
 ### How to Access:
+
 1. Install the plugin (see Quick Start above)
 2. Navigate to `/admin/theme-preview` in your Payload admin panel
 3. Open theme settings in another tab and see changes update live!
@@ -178,25 +173,23 @@ Import from `@kilivi/payloadcms-theme-management` for client-safe code:
 
 ```typescript
 // Plugin
-import { themeManagementPlugin } from '@kilivi/payloadcms-theme-management'
-
 // Client Components
-import { ThemeProvider } from '@kilivi/payloadcms-theme-management'
 
 // Utilities
-import { 
+import {
+  fetchThemeConfiguration,
   generateThemeColorsCss,
   generateThemeCSS,
   getThemeStyles,
   resolveThemeConfiguration,
-  fetchThemeConfiguration,
+  themeManagementPlugin,
+  ThemeProvider,
 } from '@kilivi/payloadcms-theme-management'
-
 // Types
 import type {
-  ThemePreset,
   ThemeDefaults,
   ThemeManagementPluginOptions,
+  ThemePreset,
 } from '@kilivi/payloadcms-theme-management'
 ```
 
@@ -206,22 +199,23 @@ import type {
 
 ```typescript
 import {
-  ServerThemeInjector,
   getThemeCriticalCSS,
-  getThemeCSSPath,
-  generateThemePreloadLinks,
+  getThemeCSS,
+  ServerThemeInjector,
 } from '@kilivi/payloadcms-theme-management/server'
 ```
 
+> **Heads up:** Legacy helpers `getThemeCSSPath` and `generateThemePreloadLinks` are still exported for backwards compatibility but now return empty strings and emit console warnings. Prefer the inline CSS utilities above.
+
 ### Subpath Exports
 
 ```typescript
 // Direct field imports
-import { ThemeColorPickerField } from '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField'
-import { ThemeTokenSelectField } from '@kilivi/payloadcms-theme-management/fields/ThemeTokenSelectField'
 
 // Direct component imports
 import { ThemePreview } from '@kilivi/payloadcms-theme-management/components/ThemePreview'
+import { ThemeColorPickerField } from '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField'
+import { ThemeTokenSelectField } from '@kilivi/payloadcms-theme-management/fields/ThemeTokenSelectField'
 ```
 
 ## Integration Examples
@@ -317,7 +311,6 @@ See [MIGRATION_GUIDE.md](./docs/MIGRATION_GUIDE.md) for detailed migration instr
 + import { ServerThemeInjector } from '@kilivi/payloadcms-theme-management/server'
 ```
 
-
 ## Testing
 
 See [TEST_APP_GUIDE.md](./docs/TEST_APP_GUIDE.md) for instructions on creating a test application.
@@ -347,6 +340,7 @@ import { ServerThemeInjector } from '@kilivi/payloadcms-theme-management/server'
 ```
 
 Then clear your cache:
+
 ```bash
 rm -rf .next node_modules/.cache
 pnpm install
@@ -430,15 +424,17 @@ Created for Payload CMS v3 applications.
 ## Changelog
 
 ### v0.1.9 (Latest)
+
 - ✅ **Fixed:** Server/client component separation
 - ✅ **Added:** `server-only` package to prevent bundling errors
 - ✅ **Changed:** `ServerThemeInjector` now exported from `/server` entry
 - ✅ **Added:** Comprehensive documentation
 
 ### v0.1.7
+
 - ✅ **Fixed:** ESM import resolution with `.js` extensions
 - ✅ **Added:** SWC + TypeScript build pipeline
 
 ### v0.1.5
-- Initial release with theme management features
 
+- Initial release with theme management features

package/dist/components/ServerThemeInjector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerThemeInjector.d.ts","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"AAcA,UAAU,wBAAwB;IAChC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAMD;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,EACxC,kBAAkB,GACnB,EAAE,QAAQ,CAAC,wBAAwB,CAAC,wCAyFpC"}
+{"version":3,"file":"ServerThemeInjector.d.ts","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"AAUA,UAAU,wBAAwB;IAChC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAMD;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,EACxC,kBAAkB,GACnB,EAAE,QAAQ,CAAC,wBAAwB,CAAC,wCAsFpC"}

package/dist/components/ServerThemeInjector.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js';
 import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js';
-import { createFallbackCriticalCSS, getThemeCriticalCSS, getThemeCSSPath } from '../utils/themeAssets.js';
+import { createFallbackCriticalCSS, getThemeCriticalCSS } from '../utils/themeAssets.js';
 import { generateThemeColorsCss } from '../utils/themeColors.js';
 import { generateThemeCSS } from '../utils/themeUtils.js';
 import { InitTheme } from './InitTheme.js';
@@ -60,7 +60,6 @@ ${borderRadiusCSS}
         colorModesCSS,
         customCSSBlock
     ].filter((block)=>Boolean(block?.trim?.().length)).join('\n\n');
-    const themeCSSPath = getThemeCSSPath(theme);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(InitTheme, {}),
@@ -69,15 +68,6 @@ ${borderRadiusCSS}
                 dangerouslySetInnerHTML: {
                     __html: combinedCSS
                 }
-            }),
-            /*#__PURE__*/ _jsx("link", {
-                rel: "preload",
-                href: themeCSSPath,
-                as: "style"
-            }),
-            /*#__PURE__*/ _jsx("link", {
-                rel: "stylesheet",
-                href: themeCSSPath
             })
         ]
     });

package/dist/components/ServerThemeInjector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ServerThemeInjector.tsx"],"sourcesContent":["import type { ThemeTypographyPreset } from '../presets.js'\nimport { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\nimport type { BorderRadiusPreset, ThemeDefaults } from '../providers/Theme/types.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({\n  themeConfiguration,\n}: 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 ?? null,\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 =\n    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":";AACA,SAASA,qBAAqB,QAAQ,oCAAmC;AAEzE,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,EACxCC,kBAAkB,EACiB;IACnC,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,aAAa;QACxBC;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,YACJ,OAAOD,oBAAoBE,QAAQ,WAC/B;QAAE,oBAAoBF,mBAAmBE,GAAG;IAAC,IAC5CF,oBAAoBE,OAAO,CAAC;IAEnC,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 type { ThemeTypographyPreset } from '../presets.js'\nimport { getBorderRadiusConfig } from '../providers/Theme/themeConfig.js'\nimport type { BorderRadiusPreset, ThemeDefaults } from '../providers/Theme/types.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport type { ResolvedThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\nimport { createFallbackCriticalCSS, getThemeCriticalCSS } 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({\n  themeConfiguration,\n}: 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 ?? null,\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 =\n    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  return (\n    <>\n      <InitTheme />\n      <style\n        id=\"theme-critical-css\"\n        dangerouslySetInnerHTML={{\n          __html: combinedCSS,\n        }}\n      />\n    </>\n  )\n}\n"],"names":["getBorderRadiusConfig","resolveThemeConfiguration","createFallbackCriticalCSS","getThemeCriticalCSS","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","style","id","dangerouslySetInnerHTML","__html"],"mappings":";AACA,SAASA,qBAAqB,QAAQ,oCAAmC;AAEzE,SAASC,yBAAyB,QAAQ,wCAAuC;AAEjF,SAASC,yBAAyB,EAAEC,mBAAmB,QAAQ,0BAAyB;AACxF,SAASC,sBAAsB,QAAQ,0BAAyB;AAChE,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,SAAS,QAAQ,iBAAgB;AAoB1C;;;CAGC,GACD,OAAO,eAAeC,oBAAoB,EACxCC,kBAAkB,EACiB;IACnC,qGAAqG;IACrG,8DAA8D;IAC9D,MAAMC,wBAAwBR,0BAA0BO;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,aAAa;QACxBC;QACAC;QACAM,YAAYA,cAAcE;IAC5B;IAEA,IAAIC,cAAc,MAAMpB,oBAAoBO;IAC5Ca,gBAAgBrB,0BAA0BQ;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,qBAAqBhC,sBAAsB+B;IACjD,MAAME,YACJ,OAAOD,oBAAoBE,QAAQ,WAC/B;QAAE,oBAAoBF,mBAAmBE,GAAG;IAAC,IAC5CF,oBAAoBE,OAAO,CAAC;IAEnC,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,qBACE;;0BACE,KAACnC;0BACD,KAAC+C;gBACCC,IAAG;gBACHC,yBAAyB;oBACvBC,QAAQR;gBACV;;;;AAIR"}

package/dist/components/ThemePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePreview.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAoBtC,MAAM,CAAC,OAAO,UAAU,YAAY,sBA8PnC"}
+{"version":3,"file":"ThemePreview.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAqBtC,MAAM,CAAC,OAAO,UAAU,YAAY,sBA8PnC"}

package/dist/components/ThemePreview.js

@@ -2,14 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from '@payloadcms/ui';
 import React, { useMemo } from 'react';
+import { allThemePresets } from '../presets.js';
 import { themeIsValid } from '../providers/Theme/types.js';
-import { defaultThemePresets } from '../presets.js';
 const DEFAULT_THEME_KEY = 'cool';
-const basePresetMap = defaultThemePresets.reduce((accumulator, preset)=>{
+const basePresetMap = allThemePresets.reduce((accumulator, preset)=>{
     accumulator[preset.name] = preset;
     return accumulator;
 }, {});
-const fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? defaultThemePresets[0];
+const fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? allThemePresets[0];
 const fallbackLightMode = fallbackPreset?.lightMode ?? {
     primary: '#3b82f6',
     accent: '#06b6d4',

package/dist/components/ThemePreview.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"sources":["../../src/components/ThemePreview.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\nimport { allThemePresets } from '../presets.js'\nimport { themeIsValid } from '../providers/Theme/types.js'\n\nconst DEFAULT_THEME_KEY = 'cool'\nconst basePresetMap = allThemePresets.reduce<Record<string, (typeof allThemePresets)[number]>>(\n  (accumulator, preset) => {\n    accumulator[preset.name] = preset\n    return accumulator\n  },\n  {},\n)\n\nconst fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? allThemePresets[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","allThemePresets","themeIsValid","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/index.d.ts

@@ -19,6 +19,8 @@ export type { ResolvedThemeConfiguration } from './utils/resolveThemeConfigurati
 export { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js';
 export { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js';
 export { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js';
+export { generateThemeCSS as generatePresetCSS, generateAllThemesCSS, } from './utils/generateThemeCSS.js';
+export { getThemeDynamicCSS, getAllDynamicThemesCSS } from './utils/themeCSS.js';
 export type { Mode, ThemeDefaults } from './providers/Theme/types.js';
 export { ThemeProvider } from './providers/Theme/index.js';
 export { getFontLoaderCode, getThemeFontFamilies, ThemeFontProvider, useThemeFonts, FONT_IMPORT_MAP, } from './providers/font-loader.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmC,MAAM,EAAa,MAAM,SAAS,CAAA;AAGjF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAA;AA6F9F,eAAO,MAAM,qBAAqB,GAAI,UAAS,4BAAiC,KAAG,MAmElF,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,GAAG,8BAA8B,CAAA;AAEhE,eAAO,MAAM,uBAAuB,GAClC,UAAU,iBAAiB,KAC1B,OAAO,CAAC,sBAAsB,GAAG,IAAI,CA2CvC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,KAAG,WAAW,GAAG,IAEhE,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAO,WAAW,EAEtD,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnE,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACtE,YAAY,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,uBAAuB,CAAA;AAC9B,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACnF,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,iCAAiC,CAAA;AACxC,YAAY,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAA;AAC9F,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,YAAY,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG1D,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,eAAe,GAChB,MAAM,4BAA4B,CAAA;AAMnC,eAAO,MAAM,qBAAqB,aAzKa,4BAA4B,KAAQ,MAyKzB,CAAA;AAC1D,oDAAoD;AACpD,eAAO,MAAM,wBAAwB,aA3KU,4BAA4B,KAAQ,MA2KtB,CAAA;AAE7D,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmC,MAAM,EAAa,MAAM,SAAS,CAAA;AAGjF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAA;AA6F9F,eAAO,MAAM,qBAAqB,GAAI,UAAS,4BAAiC,KAAG,MAmElF,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,GAAG,8BAA8B,CAAA;AAEhE,eAAO,MAAM,uBAAuB,GAClC,UAAU,iBAAiB,KAC1B,OAAO,CAAC,sBAAsB,GAAG,IAAI,CA2CvC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,KAAG,WAAW,GAAG,IAEhE,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAO,WAAW,EAEtD,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnE,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACtE,YAAY,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,uBAAuB,CAAA;AAC9B,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACnF,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,iCAAiC,CAAA;AACxC,YAAY,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAA;AAC9F,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,YAAY,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAGvE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,oBAAoB,GACrB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEhF,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG1D,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,eAAe,GAChB,MAAM,4BAA4B,CAAA;AAMnC,eAAO,MAAM,qBAAqB,aAhLa,4BAA4B,KAAQ,MAgLzB,CAAA;AAC1D,oDAAoD;AACpD,eAAO,MAAM,wBAAwB,aAlLU,4BAA4B,KAAQ,MAkLtB,CAAA;AAE7D,eAAe,qBAAqB,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createThemeConfigurationField } from './fields/themeConfigurationField.js';
-import { defaultThemePresets } from './presets.js';
+import { allThemePresets } from './presets.js';
 const THEME_FIELD_NAME = 'themeConfiguration';
 /**
  * Removes existing theme configuration from a group field (legacy)
@@ -69,7 +69,7 @@ const THEME_FIELD_NAME = 'themeConfiguration';
 const ensureCollectionsArray = (collections)=>Array.isArray(collections) ? collections : [];
 export const themeManagementPlugin = (options = {})=>{
     return (config)=>{
-        const { enabled = true, targetCollection = 'site-settings', themePresets = defaultThemePresets, defaultTheme = 'cool', includeColorModeToggle = true, includeCustomCSS = true, includeBrandIdentity = false, enableAdvancedFeatures = true, enableLogging = false } = options;
+        const { enabled = true, targetCollection = 'site-settings', themePresets = allThemePresets, defaultTheme = 'cool', includeColorModeToggle = true, includeCustomCSS = true, includeBrandIdentity = false, enableAdvancedFeatures = true, enableLogging = false } = options;
         if (!enabled) {
             if (enableLogging) {
                 console.log('🎨 Theme Management Plugin: disabled via options, skipping.');
@@ -143,10 +143,10 @@ export const fetchThemeConfiguration = async (options)=>{
     }
 };
 export const getThemePreset = (themeName)=>{
-    return defaultThemePresets.find((preset)=>preset.name === themeName) || null;
+    return allThemePresets.find((preset)=>preset.name === themeName) || null;
 };
 export const getAvailableThemePresets = ()=>{
-    return defaultThemePresets;
+    return allThemePresets;
 };
 export { defaultThemePresets, allThemePresets } from './presets.js';
 export { extendedThemePresets, allExtendedThemePresets, extendedThemeToCSSVariables } from './extended-presets.js';
@@ -155,6 +155,9 @@ export { DEFAULT_THEME_CONFIGURATION, resolveThemeConfiguration } from './utils/
 export { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js';
 export { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js';
 export { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js';
+// Dynamic theme CSS generation
+export { generateThemeCSS as generatePresetCSS, generateAllThemesCSS } from './utils/generateThemeCSS.js';
+export { getThemeDynamicCSS, getAllDynamicThemesCSS } from './utils/themeCSS.js';
 export { ThemeProvider } from './providers/Theme/index.js';
 // Font loading utilities for Next.js integration
 export { getFontLoaderCode, getThemeFontFamilies, ThemeFontProvider, useThemeFonts, FONT_IMPORT_MAP } from './providers/font-loader.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, Plugin, TabsField } from 'payload'\nimport { createThemeConfigurationField } from './fields/themeConfigurationField.js'\nimport type { ThemeTab } from './fields/themeConfigurationField.js'\nimport type { SiteThemeConfiguration } from './payload-types.js'\nimport type { ThemePreset } from './presets.js'\nimport { defaultThemePresets } from './presets.js'\nimport type { FetchThemeConfigurationOptions, ThemeManagementPluginOptions } from './types.js'\n\nconst THEME_FIELD_NAME = 'themeConfiguration'\n\n/**\n * Removes existing theme configuration from a group field (legacy)\n */\nconst removeExistingThemeField = (fields: Field[] = []): Field[] =>\n  fields.filter((field) => {\n    const candidate = field as { name?: unknown }\n    return candidate?.name !== THEME_FIELD_NAME\n  })\n\n/**\n * Finds the tabs field in the collection fields array\n */\nconst findTabsField = (fields: Field[] = []): TabsField | null => {\n  for (const field of fields) {\n    if (field.type === 'tabs') {\n      return field as TabsField\n    }\n  }\n  return null\n}\n\n/**\n * Removes existing Appearance Settings tab if it exists\n */\nconst removeExistingThemeTab = (\n  tabs: NonNullable<TabsField['tabs']>,\n): NonNullable<TabsField['tabs']> => {\n  return tabs.filter((tab) => {\n    const labelEn =\n      typeof tab.label === 'object' && tab.label !== null\n        ? (tab.label as { en?: string }).en\n        : tab.label\n    return labelEn !== '🎨 Appearance Settings' && labelEn !== 'Appearance Settings'\n  })\n}\n\n/**\n * Injects theme tab into existing tabs field\n */\nconst injectThemeTab = (\n  fields: Field[] | undefined,\n  themeTab: ThemeTab,\n  enableLogging: boolean,\n): Field[] => {\n  // First, remove any legacy theme field (group-based)\n  const sanitizedFields = removeExistingThemeField(fields ?? [])\n\n  // Find the tabs field\n  const tabsField = findTabsField(sanitizedFields)\n\n  if (!tabsField || !tabsField.tabs) {\n    if (enableLogging) {\n      console.warn(\n        '🎨 Theme Management Plugin: No tabs field found. Creating a new tabs structure.',\n      )\n    }\n\n    // If no tabs exist, create a basic tabs structure with just the theme tab\n    const newTabsField: TabsField = {\n      type: 'tabs',\n      tabs: [themeTab],\n    }\n\n    return [...sanitizedFields, newTabsField]\n  }\n\n  // Remove existing theme tab if present\n  const sanitizedTabs = removeExistingThemeTab(tabsField.tabs)\n\n  // Add theme tab to the end\n  const updatedTabs = [...sanitizedTabs, themeTab]\n\n  if (enableLogging) {\n    console.log('🎨 Theme Management Plugin: injecting Appearance Settings tab')\n  }\n\n  // Update the tabs field\n  const updatedTabsField: TabsField = {\n    ...tabsField,\n    tabs: updatedTabs,\n  }\n\n  // Replace the old tabs field with the updated one\n  return sanitizedFields.map((field) => (field.type === 'tabs' ? updatedTabsField : field))\n}\n\nconst ensureCollectionsArray = (collections: Config['collections']): CollectionConfig[] =>\n  Array.isArray(collections) ? collections : []\n\nexport const themeManagementPlugin = (options: ThemeManagementPluginOptions = {}): Plugin => {\n  return (config: Config): Config => {\n    const {\n      enabled = true,\n      targetCollection = 'site-settings',\n      themePresets = defaultThemePresets,\n      defaultTheme = 'cool',\n      includeColorModeToggle = true,\n      includeCustomCSS = true,\n      includeBrandIdentity = false,\n      enableAdvancedFeatures = true,\n      enableLogging = false,\n    } = options\n\n    if (!enabled) {\n      if (enableLogging) {\n        console.log('🎨 Theme Management Plugin: disabled via options, skipping.')\n      }\n      return config\n    }\n\n    const themeTab = createThemeConfigurationField({\n      themePresets,\n      defaultTheme,\n      includeColorModeToggle,\n      includeCustomCSS,\n      includeBrandIdentity: includeBrandIdentity ?? false,\n      enableAdvancedFeatures,\n    })\n\n    let collectionTouched = false\n\n    const collections = ensureCollectionsArray(config.collections).map((collection) => {\n      if (collection.slug !== targetCollection) {\n        return collection\n      }\n\n      collectionTouched = true\n\n      if (enableLogging) {\n        console.log(`🎨 Theme Management Plugin: enhancing collection \"${collection.slug}\"`)\n      }\n\n      const existingFields = Array.isArray(collection.fields) ? collection.fields : []\n\n      const fields = injectThemeTab(existingFields, themeTab, enableLogging)\n\n      return {\n        ...collection,\n        fields,\n      }\n    })\n\n    if (!collectionTouched) {\n      if (enableLogging) {\n        console.warn(\n          `🎨 Theme Management Plugin: collection \"${targetCollection}\" was not found, leaving config untouched.`,\n        )\n      }\n      return config\n    }\n\n    return {\n      ...config,\n      collections,\n    }\n  }\n}\n\ntype FetchOptionsInput = string | FetchThemeConfigurationOptions\n\nexport const fetchThemeConfiguration = async (\n  options?: FetchOptionsInput,\n): Promise<SiteThemeConfiguration | null> => {\n  const normalizedOptions = typeof options === 'string' ? { tenantSlug: options } : (options ?? {})\n\n  const {\n    tenantSlug,\n    collectionSlug = 'site-settings',\n    depth,\n    locale,\n    draft,\n    queryParams = {},\n  } = normalizedOptions\n\n  const params = new URLSearchParams({ limit: '1' })\n\n  if (typeof depth === 'number') params.set('depth', String(depth))\n  if (tenantSlug) params.set('tenant', tenantSlug)\n  if (locale) params.set('locale', locale)\n  if (draft) params.set('draft', 'true')\n\n  Object.entries(queryParams).forEach(([key, value]) => {\n    if (value === undefined) return\n    params.set(key, String(value))\n  })\n\n  const url = `/api/${collectionSlug}?${params.toString()}`\n\n  try {\n    const response = await fetch(url)\n    if (!response.ok) {\n      throw new Error(`Failed to fetch theme configuration (status ${response.status})`)\n    }\n\n    const data = (await response.json()) as {\n      docs?: Array<{ themeConfiguration?: SiteThemeConfiguration }>\n    }\n\n    const doc = data.docs?.[0]\n\n    return doc?.themeConfiguration ?? null\n  } catch (error) {\n    console.warn('Failed to fetch theme configuration:', error)\n    return null\n  }\n}\n\nexport const getThemePreset = (themeName: string): ThemePreset | null => {\n  return defaultThemePresets.find((preset) => preset.name === themeName) || null\n}\n\nexport const getAvailableThemePresets = (): ThemePreset[] => {\n  return defaultThemePresets\n}\n\nexport { defaultThemePresets, allThemePresets } from './presets.js'\nexport type { ThemePreset, ThemeTypographyPreset } from './presets.js'\nexport type { ThemeTab } from './fields/themeConfigurationField.js'\nexport {\n  extendedThemePresets,\n  allExtendedThemePresets,\n  extendedThemeToCSSVariables,\n} from './extended-presets.js'\nexport type { ExtendedThemePreset, ShadcnColorTokens } from './extended-presets.js'\nexport {\n  applyExtendedTheme,\n  generateExtendedThemeCSS,\n  resetExtendedTheme,\n  getExtendedThemeTokens,\n  createUseExtendedTheme,\n  getTailwindVarReferences,\n} from './utils/extendedThemeHelpers.js'\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\nexport {\n  DEFAULT_THEME_CONFIGURATION,\n  resolveThemeConfiguration,\n} from './utils/resolveThemeConfiguration.js'\nexport type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\nexport { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js'\n\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\nexport { ThemeProvider } from './providers/Theme/index.js'\n\n// Font loading utilities for Next.js integration\nexport {\n  getFontLoaderCode,\n  getThemeFontFamilies,\n  ThemeFontProvider,\n  useThemeFonts,\n  FONT_IMPORT_MAP,\n} from './providers/font-loader.js'\n\n// Note: Do NOT re-export client components from the root entry to avoid\n// server-side evaluation during `payload generate:importmap`.\n// If needed, import directly from subpath: `@kilivi/payloadcms-theme-management/fields/ThemeLivePreview`\n\nexport const ThemeManagementPlugin = themeManagementPlugin\n/** @deprecated use {@link themeManagementPlugin} */\nexport const themeConfigurationPlugin = themeManagementPlugin\n\nexport default themeManagementPlugin\n"],"names":["createThemeConfigurationField","defaultThemePresets","THEME_FIELD_NAME","removeExistingThemeField","fields","filter","field","candidate","name","findTabsField","type","removeExistingThemeTab","tabs","tab","labelEn","label","en","injectThemeTab","themeTab","enableLogging","sanitizedFields","tabsField","console","warn","newTabsField","sanitizedTabs","updatedTabs","log","updatedTabsField","map","ensureCollectionsArray","collections","Array","isArray","themeManagementPlugin","options","config","enabled","targetCollection","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","includeBrandIdentity","enableAdvancedFeatures","collectionTouched","collection","slug","existingFields","fetchThemeConfiguration","normalizedOptions","tenantSlug","collectionSlug","depth","locale","draft","queryParams","params","URLSearchParams","limit","set","String","Object","entries","forEach","key","value","undefined","url","toString","response","fetch","ok","Error","status","data","json","doc","docs","themeConfiguration","error","getThemePreset","themeName","find","preset","getAvailableThemePresets","allThemePresets","extendedThemePresets","allExtendedThemePresets","extendedThemeToCSSVariables","applyExtendedTheme","generateExtendedThemeCSS","resetExtendedTheme","getExtendedThemeTokens","createUseExtendedTheme","getTailwindVarReferences","DEFAULT_THEME_CONFIGURATION","resolveThemeConfiguration","generateThemeColorsCss","hexToHsl","generateThemeCSS","getThemeStyles","getThemeHtmlAttributes","ThemeProvider","getFontLoaderCode","getThemeFontFamilies","ThemeFontProvider","useThemeFonts","FONT_IMPORT_MAP","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"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"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, Plugin, TabsField } from 'payload'\nimport { createThemeConfigurationField } from './fields/themeConfigurationField.js'\nimport type { ThemeTab } from './fields/themeConfigurationField.js'\nimport type { SiteThemeConfiguration } from './payload-types.js'\nimport type { ThemePreset } from './presets.js'\nimport { allThemePresets } from './presets.js'\nimport type { FetchThemeConfigurationOptions, ThemeManagementPluginOptions } from './types.js'\n\nconst THEME_FIELD_NAME = 'themeConfiguration'\n\n/**\n * Removes existing theme configuration from a group field (legacy)\n */\nconst removeExistingThemeField = (fields: Field[] = []): Field[] =>\n  fields.filter((field) => {\n    const candidate = field as { name?: unknown }\n    return candidate?.name !== THEME_FIELD_NAME\n  })\n\n/**\n * Finds the tabs field in the collection fields array\n */\nconst findTabsField = (fields: Field[] = []): TabsField | null => {\n  for (const field of fields) {\n    if (field.type === 'tabs') {\n      return field as TabsField\n    }\n  }\n  return null\n}\n\n/**\n * Removes existing Appearance Settings tab if it exists\n */\nconst removeExistingThemeTab = (\n  tabs: NonNullable<TabsField['tabs']>,\n): NonNullable<TabsField['tabs']> => {\n  return tabs.filter((tab) => {\n    const labelEn =\n      typeof tab.label === 'object' && tab.label !== null\n        ? (tab.label as { en?: string }).en\n        : tab.label\n    return labelEn !== '🎨 Appearance Settings' && labelEn !== 'Appearance Settings'\n  })\n}\n\n/**\n * Injects theme tab into existing tabs field\n */\nconst injectThemeTab = (\n  fields: Field[] | undefined,\n  themeTab: ThemeTab,\n  enableLogging: boolean,\n): Field[] => {\n  // First, remove any legacy theme field (group-based)\n  const sanitizedFields = removeExistingThemeField(fields ?? [])\n\n  // Find the tabs field\n  const tabsField = findTabsField(sanitizedFields)\n\n  if (!tabsField || !tabsField.tabs) {\n    if (enableLogging) {\n      console.warn(\n        '🎨 Theme Management Plugin: No tabs field found. Creating a new tabs structure.',\n      )\n    }\n\n    // If no tabs exist, create a basic tabs structure with just the theme tab\n    const newTabsField: TabsField = {\n      type: 'tabs',\n      tabs: [themeTab],\n    }\n\n    return [...sanitizedFields, newTabsField]\n  }\n\n  // Remove existing theme tab if present\n  const sanitizedTabs = removeExistingThemeTab(tabsField.tabs)\n\n  // Add theme tab to the end\n  const updatedTabs = [...sanitizedTabs, themeTab]\n\n  if (enableLogging) {\n    console.log('🎨 Theme Management Plugin: injecting Appearance Settings tab')\n  }\n\n  // Update the tabs field\n  const updatedTabsField: TabsField = {\n    ...tabsField,\n    tabs: updatedTabs,\n  }\n\n  // Replace the old tabs field with the updated one\n  return sanitizedFields.map((field) => (field.type === 'tabs' ? updatedTabsField : field))\n}\n\nconst ensureCollectionsArray = (collections: Config['collections']): CollectionConfig[] =>\n  Array.isArray(collections) ? collections : []\n\nexport const themeManagementPlugin = (options: ThemeManagementPluginOptions = {}): Plugin => {\n  return (config: Config): Config => {\n    const {\n      enabled = true,\n      targetCollection = 'site-settings',\n      themePresets = allThemePresets,\n      defaultTheme = 'cool',\n      includeColorModeToggle = true,\n      includeCustomCSS = true,\n      includeBrandIdentity = false,\n      enableAdvancedFeatures = true,\n      enableLogging = false,\n    } = options\n\n    if (!enabled) {\n      if (enableLogging) {\n        console.log('🎨 Theme Management Plugin: disabled via options, skipping.')\n      }\n      return config\n    }\n\n    const themeTab = createThemeConfigurationField({\n      themePresets,\n      defaultTheme,\n      includeColorModeToggle,\n      includeCustomCSS,\n      includeBrandIdentity: includeBrandIdentity ?? false,\n      enableAdvancedFeatures,\n    })\n\n    let collectionTouched = false\n\n    const collections = ensureCollectionsArray(config.collections).map((collection) => {\n      if (collection.slug !== targetCollection) {\n        return collection\n      }\n\n      collectionTouched = true\n\n      if (enableLogging) {\n        console.log(`🎨 Theme Management Plugin: enhancing collection \"${collection.slug}\"`)\n      }\n\n      const existingFields = Array.isArray(collection.fields) ? collection.fields : []\n\n      const fields = injectThemeTab(existingFields, themeTab, enableLogging)\n\n      return {\n        ...collection,\n        fields,\n      }\n    })\n\n    if (!collectionTouched) {\n      if (enableLogging) {\n        console.warn(\n          `🎨 Theme Management Plugin: collection \"${targetCollection}\" was not found, leaving config untouched.`,\n        )\n      }\n      return config\n    }\n\n    return {\n      ...config,\n      collections,\n    }\n  }\n}\n\ntype FetchOptionsInput = string | FetchThemeConfigurationOptions\n\nexport const fetchThemeConfiguration = async (\n  options?: FetchOptionsInput,\n): Promise<SiteThemeConfiguration | null> => {\n  const normalizedOptions = typeof options === 'string' ? { tenantSlug: options } : (options ?? {})\n\n  const {\n    tenantSlug,\n    collectionSlug = 'site-settings',\n    depth,\n    locale,\n    draft,\n    queryParams = {},\n  } = normalizedOptions\n\n  const params = new URLSearchParams({ limit: '1' })\n\n  if (typeof depth === 'number') params.set('depth', String(depth))\n  if (tenantSlug) params.set('tenant', tenantSlug)\n  if (locale) params.set('locale', locale)\n  if (draft) params.set('draft', 'true')\n\n  Object.entries(queryParams).forEach(([key, value]) => {\n    if (value === undefined) return\n    params.set(key, String(value))\n  })\n\n  const url = `/api/${collectionSlug}?${params.toString()}`\n\n  try {\n    const response = await fetch(url)\n    if (!response.ok) {\n      throw new Error(`Failed to fetch theme configuration (status ${response.status})`)\n    }\n\n    const data = (await response.json()) as {\n      docs?: Array<{ themeConfiguration?: SiteThemeConfiguration }>\n    }\n\n    const doc = data.docs?.[0]\n\n    return doc?.themeConfiguration ?? null\n  } catch (error) {\n    console.warn('Failed to fetch theme configuration:', error)\n    return null\n  }\n}\n\nexport const getThemePreset = (themeName: string): ThemePreset | null => {\n  return allThemePresets.find((preset) => preset.name === themeName) || null\n}\n\nexport const getAvailableThemePresets = (): ThemePreset[] => {\n  return allThemePresets\n}\n\nexport { defaultThemePresets, allThemePresets } from './presets.js'\nexport type { ThemePreset, ThemeTypographyPreset } from './presets.js'\nexport type { ThemeTab } from './fields/themeConfigurationField.js'\nexport {\n  extendedThemePresets,\n  allExtendedThemePresets,\n  extendedThemeToCSSVariables,\n} from './extended-presets.js'\nexport type { ExtendedThemePreset, ShadcnColorTokens } from './extended-presets.js'\nexport {\n  applyExtendedTheme,\n  generateExtendedThemeCSS,\n  resetExtendedTheme,\n  getExtendedThemeTokens,\n  createUseExtendedTheme,\n  getTailwindVarReferences,\n} from './utils/extendedThemeHelpers.js'\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\nexport {\n  DEFAULT_THEME_CONFIGURATION,\n  resolveThemeConfiguration,\n} from './utils/resolveThemeConfiguration.js'\nexport type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\nexport { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js'\n\n// Dynamic theme CSS generation\nexport {\n  generateThemeCSS as generatePresetCSS,\n  generateAllThemesCSS,\n} from './utils/generateThemeCSS.js'\nexport { getThemeDynamicCSS, getAllDynamicThemesCSS } from './utils/themeCSS.js'\n\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\nexport { ThemeProvider } from './providers/Theme/index.js'\n\n// Font loading utilities for Next.js integration\nexport {\n  getFontLoaderCode,\n  getThemeFontFamilies,\n  ThemeFontProvider,\n  useThemeFonts,\n  FONT_IMPORT_MAP,\n} from './providers/font-loader.js'\n\n// Note: Do NOT re-export client components from the root entry to avoid\n// server-side evaluation during `payload generate:importmap`.\n// If needed, import directly from subpath: `@kilivi/payloadcms-theme-management/fields/ThemeLivePreview`\n\nexport const ThemeManagementPlugin = themeManagementPlugin\n/** @deprecated use {@link themeManagementPlugin} */\nexport const themeConfigurationPlugin = themeManagementPlugin\n\nexport default themeManagementPlugin\n"],"names":["createThemeConfigurationField","allThemePresets","THEME_FIELD_NAME","removeExistingThemeField","fields","filter","field","candidate","name","findTabsField","type","removeExistingThemeTab","tabs","tab","labelEn","label","en","injectThemeTab","themeTab","enableLogging","sanitizedFields","tabsField","console","warn","newTabsField","sanitizedTabs","updatedTabs","log","updatedTabsField","map","ensureCollectionsArray","collections","Array","isArray","themeManagementPlugin","options","config","enabled","targetCollection","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","includeBrandIdentity","enableAdvancedFeatures","collectionTouched","collection","slug","existingFields","fetchThemeConfiguration","normalizedOptions","tenantSlug","collectionSlug","depth","locale","draft","queryParams","params","URLSearchParams","limit","set","String","Object","entries","forEach","key","value","undefined","url","toString","response","fetch","ok","Error","status","data","json","doc","docs","themeConfiguration","error","getThemePreset","themeName","find","preset","getAvailableThemePresets","defaultThemePresets","extendedThemePresets","allExtendedThemePresets","extendedThemeToCSSVariables","applyExtendedTheme","generateExtendedThemeCSS","resetExtendedTheme","getExtendedThemeTokens","createUseExtendedTheme","getTailwindVarReferences","DEFAULT_THEME_CONFIGURATION","resolveThemeConfiguration","generateThemeColorsCss","hexToHsl","generateThemeCSS","getThemeStyles","getThemeHtmlAttributes","generatePresetCSS","generateAllThemesCSS","getThemeDynamicCSS","getAllDynamicThemesCSS","ThemeProvider","getFontLoaderCode","getThemeFontFamilies","ThemeFontProvider","useThemeFonts","FONT_IMPORT_MAP","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"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"}

package/dist/providers/Theme/themeConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeConfig.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/themeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,aAAa,EAAE,WAAW,CAyG3D,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DtB,CAAA;AAEV,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,WAAW,CAEhE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7E"}
+{"version":3,"file":"themeConfig.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/themeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,aAAa,EAAE,WAAW,CAiW3D,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DtB,CAAA;AAEV,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,WAAW,CAEhE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7E"}