@kilivi/payloadcms-theme-management 0.1.6 → 0.1.7

package/README.md

@@ -1,97 +1,97 @@
-# Theme Configuration Plugin for Payload CMS
-
-A flexible theme configuration plugin for Payload CMS v3 that allows you to manage theme settings through the admin UI.
-
-## Features
-
-- 🎨 **Theme Management** - Configure primary and secondary colors
-- 🔤 **Typography Control** - Set custom font families
-- 📐 **Layout Settings** - Adjust header height and other layout properties
-- 🌓 **Theme Switcher** - Optional theme switching capability (light/dark/auto)
-- ⚙️ **Configurable** - Exclude specific collections or globals as needed
-
-## Installation
-
-```bash
-npm install @payloadcms-plugins/theme-management
-# or
-yarn add @payloadcms-plugins/theme-management
-# or
-pnpm add @payloadcms-plugins/theme-management
-```
-
-## Usage
-
-Add the plugin to your Payload config:
-
-```typescript
-import { buildConfig } from 'payload';
-import { ThemeConfigurationPlugin } from '@payloadcms-plugins/theme-management';
-
-export default buildConfig({
-  // ... other config
-  plugins: [
-    ThemeConfigurationPlugin({
-      enableThemeSwitcher: true,
-      defaultTheme: 'auto',
-      excludedCollections: [], // Collections to exclude
-      excludedGlobals: [], // Globals to exclude
-    }),
-  ],
-});
-```
-
-## Configuration Options
-
-### `ThemeConfigurationPluginConfig`
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `excludedCollections` | `string[]` | `[]` | Array of collection slugs to exclude |
-| `excludedGlobals` | `string[]` | `[]` | Array of global slugs to exclude |
-| `enableThemeSwitcher` | `boolean` | `true` | Enable theme switcher in admin UI |
-| `defaultTheme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Default theme |
-
-## Theme Configuration Fields
-
-The plugin adds a global called `theme-management` with the following fields:
-
-- **Primary Color** - Main theme color (e.g., #3B82F6)
-- **Secondary Color** - Secondary theme color (e.g., #10B981)
-- **Font Family** - Primary font family for the site
-- **Header Height** - Height of the site header in pixels
-
-## Accessing Theme Configuration
-
-You can access the theme configuration in your application:
-
-```typescript
-const payload = await getPayloadClient();
-
-const themeConfig = await payload.findGlobal({
-  slug: 'theme-management',
-});
-
-console.log(themeConfig.primaryColor); // e.g., "#3B82F6"
-```
-
-## Development
-
-```bash
-# Install dependencies
-pnpm install
-
-# Build the plugin
-pnpm build
-
-# Watch mode for development
-pnpm dev
-```
-
-## License
-
-Apache-2.0
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
+# Theme Configuration Plugin for Payload CMS
+
+A flexible theme configuration plugin for Payload CMS v3 that allows you to manage theme settings through the admin UI.
+
+## Features
+
+- 🎨 **Theme Management** - Configure primary and secondary colors
+- 🔤 **Typography Control** - Set custom font families
+- 📐 **Layout Settings** - Adjust header height and other layout properties
+- 🌓 **Theme Switcher** - Optional theme switching capability (light/dark/auto)
+- ⚙️ **Configurable** - Exclude specific collections or globals as needed
+
+## Installation
+
+```bash
+npm install @payloadcms-plugins/theme-management
+# or
+yarn add @payloadcms-plugins/theme-management
+# or
+pnpm add @payloadcms-plugins/theme-management
+```
+
+## Usage
+
+Add the plugin to your Payload config:
+
+```typescript
+import { buildConfig } from 'payload';
+import { ThemeConfigurationPlugin } from '@payloadcms-plugins/theme-management';
+
+export default buildConfig({
+  // ... other config
+  plugins: [
+    ThemeConfigurationPlugin({
+      enableThemeSwitcher: true,
+      defaultTheme: 'auto',
+      excludedCollections: [], // Collections to exclude
+      excludedGlobals: [], // Globals to exclude
+    }),
+  ],
+});
+```
+
+## Configuration Options
+
+### `ThemeConfigurationPluginConfig`
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `excludedCollections` | `string[]` | `[]` | Array of collection slugs to exclude |
+| `excludedGlobals` | `string[]` | `[]` | Array of global slugs to exclude |
+| `enableThemeSwitcher` | `boolean` | `true` | Enable theme switcher in admin UI |
+| `defaultTheme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Default theme |
+
+## Theme Configuration Fields
+
+The plugin adds a global called `theme-management` with the following fields:
+
+- **Primary Color** - Main theme color (e.g., #3B82F6)
+- **Secondary Color** - Secondary theme color (e.g., #10B981)
+- **Font Family** - Primary font family for the site
+- **Header Height** - Height of the site header in pixels
+
+## Accessing Theme Configuration
+
+You can access the theme configuration in your application:
+
+```typescript
+const payload = await getPayloadClient();
+
+const themeConfig = await payload.findGlobal({
+  slug: 'theme-management',
+});
+
+console.log(themeConfig.primaryColor); // e.g., "#3B82F6"
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the plugin
+pnpm build
+
+# Watch mode for development
+pnpm dev
+```
+
+## License
+
+Apache-2.0
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/components/ServerThemeInjector.d.ts

@@ -1,4 +1,4 @@
-import type { SiteSetting } from '@/payload-types';
+import type { SiteSetting } from '../payload-types.js';
 interface ServerThemeInjectorProps {
     siteSettings: SiteSetting | null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ServerThemeInjector.d.ts","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAalD,UAAU,wBAAwB;IAChC,YAAY,EAAE,WAAW,GAAG,IAAI,CAAA;CACjC;AAMD;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE,QAAQ,CAAC,wBAAwB,CAAC,wCA0F7F"}
+{"version":3,"file":"ServerThemeInjector.d.ts","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAatD,UAAU,wBAAwB;IAChC,YAAY,EAAE,WAAW,GAAG,IAAI,CAAA;CACjC;AAMD;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE,QAAQ,CAAC,wBAAwB,CAAC,wCA0F7F"}

package/dist/components/{ServerThemeInjector.jsx → ServerThemeInjector.js}

@@ -1,16 +1,18 @@
-import { getBorderRadiusConfig } from '@/providers/Theme/themeConfig';
-import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration';
-import { createFallbackCriticalCSS, getThemeCriticalCSS, getThemeCSSPath, } from '../utils/themeAssets';
-import { generateThemeColorsCss } from '../utils/themeColors';
-import { generateThemeCSS } from '../utils/themeUtils';
-/**
- * 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({ siteSettings }) {
+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 { generateThemeColorsCss } from '../utils/themeColors.js';
+import { generateThemeCSS } from '../utils/themeUtils.js';
+/**
+ * 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({ siteSettings }) {
     const resolvedConfiguration = resolveThemeConfiguration(siteSettings?.themeConfiguration);
-    const { theme, borderRadius, customCSS, lightMode, darkMode, fontScale, spacing, animationLevel, allowColorModeToggle, colorMode, typography, } = resolvedConfiguration;
-    const baseThemeConfiguration = { ...(siteSettings?.themeConfiguration ?? {}) };
+    const { theme, borderRadius, customCSS, lightMode, darkMode, fontScale, spacing, animationLevel, allowColorModeToggle, colorMode, typography } = resolvedConfiguration;
+    const baseThemeConfiguration = {
+        ...siteSettings?.themeConfiguration ?? {}
+    };
     if ('typography' in baseThemeConfiguration) {
         delete baseThemeConfiguration.typography;
     }
@@ -26,7 +28,7 @@ export async function ServerThemeInjector({ siteSettings }) {
         customCSS: customCSS ?? undefined,
         lightMode,
         darkMode,
-        typography: typography ?? undefined,
+        typography: typography ?? undefined
     };
     let criticalCSS = await getThemeCriticalCSS(theme);
     criticalCSS ??= createFallbackCriticalCSS(theme);
@@ -36,40 +38,51 @@ export async function ServerThemeInjector({ siteSettings }) {
         medium: 'medium',
         large: 'large',
         xl: 'xl',
-        full: 'xl',
+        full: 'xl'
     };
     const mappedBorderRadius = borderRadiusMap[borderRadius ?? 'medium'] ?? 'medium';
     const borderRadiusConfig = getBorderRadiusConfig(mappedBorderRadius);
-    const cssRecord = typeof borderRadiusConfig?.css === 'string'
-        ? { '--radius-default': borderRadiusConfig.css }
-        : borderRadiusConfig?.css ?? {};
-    const borderRadiusCSS = Object.entries(cssRecord)
-        .map(([property, value]) => `  ${property}: ${value};`)
-        .join('\n');
-    const borderRadiusBlock = borderRadiusCSS
-        ? `:root {
+    const cssRecord = typeof borderRadiusConfig?.css === 'string' ? {
+        '--radius-default': borderRadiusConfig.css
+    } : borderRadiusConfig?.css ?? {};
+    const borderRadiusCSS = Object.entries(cssRecord).map(([property, value])=>`  ${property}: ${value};`).join('\n');
+    const borderRadiusBlock = borderRadiusCSS ? `:root {
 ${borderRadiusCSS}
-}`
-        : '';
+}` : '';
     const themeConfigurationCSS = generateThemeCSS(normalizedThemeConfiguration);
-    const colorModesCSS = generateThemeColorsCss({ themeName: theme, lightMode, darkMode });
+    const colorModesCSS = generateThemeColorsCss({
+        themeName: theme,
+        lightMode,
+        darkMode
+    });
     const customCSSBlock = typeof customCSS === 'string' ? customCSS.trim() : '';
     const combinedCSS = [
         criticalCSS,
         borderRadiusBlock,
         themeConfigurationCSS,
         colorModesCSS,
-        customCSSBlock,
-    ]
-        .filter((block) => Boolean(block?.trim?.().length))
-        .join('\n\n');
+        customCSSBlock
+    ].filter((block)=>Boolean(block?.trim?.().length)).join('\n\n');
     const themeCSSPath = getThemeCSSPath(theme);
-    return (<>
-      <style id="theme-critical-css" dangerouslySetInnerHTML={{
-            __html: combinedCSS,
-        }}/>
-      <link rel="preload" href={themeCSSPath} as="style"/>
-      <link rel="stylesheet" href={themeCSSPath}/>
-    </>);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("style", {
+                id: "theme-critical-css",
+                dangerouslySetInnerHTML: {
+                    __html: combinedCSS
+                }
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "preload",
+                href: themeCSSPath,
+                as: "style"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "stylesheet",
+                href: themeCSSPath
+            })
+        ]
+    });
 }
-//# sourceMappingURL=ServerThemeInjector.jsx.map
+
+//# sourceMappingURL=ServerThemeInjector.js.map

package/dist/components/ServerThemeInjector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ServerThemeInjector.tsx"],"sourcesContent":["import type { SiteSetting } from '../payload-types.js'\r\nimport { 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 {\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\n\r\ninterface ServerThemeInjectorProps {\r\n  siteSettings: SiteSetting | null\r\n}\r\n\r\ntype RuntimeThemeConfiguration = Omit<NonNullable<SiteSetting['themeConfiguration']>, '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({ siteSettings }: Readonly<ServerThemeInjectorProps>) {\r\n  const resolvedConfiguration = resolveThemeConfiguration(siteSettings?.themeConfiguration)\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  const baseThemeConfiguration = { ...(siteSettings?.themeConfiguration ?? {}) }\r\n  if ('typography' in baseThemeConfiguration) {\r\n    delete (baseThemeConfiguration as Record<string, unknown>).typography\r\n  }\r\n\r\n  const normalizedThemeConfiguration: RuntimeThemeConfiguration = {\r\n    ...baseThemeConfiguration,\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      <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","ServerThemeInjector","siteSettings","resolvedConfiguration","themeConfiguration","theme","borderRadius","customCSS","lightMode","darkMode","fontScale","spacing","animationLevel","allowColorModeToggle","colorMode","typography","baseThemeConfiguration","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;AAGzE,SAASC,yBAAyB,QAAQ,wCAAuC;AACjF,SACEC,yBAAyB,EACzBC,mBAAmB,EACnBC,eAAe,QACV,0BAAyB;AAChC,SAASC,sBAAsB,QAAQ,0BAAyB;AAChE,SAASC,gBAAgB,QAAQ,yBAAwB;AAUzD;;;CAGC,GACD,OAAO,eAAeC,oBAAoB,EAAEC,YAAY,EAAsC;IAC5F,MAAMC,wBAAwBR,0BAA0BO,cAAcE;IACtE,MAAM,EACJC,KAAK,EACLC,YAAY,EACZC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,EACdC,oBAAoB,EACpBC,SAAS,EACTC,UAAU,EACX,GAAGZ;IAEJ,MAAMa,yBAAyB;QAAE,GAAId,cAAcE,sBAAsB,CAAC,CAAC;IAAE;IAC7E,IAAI,gBAAgBY,wBAAwB;QAC1C,OAAO,AAACA,uBAAmDD,UAAU;IACvE;IAEA,MAAME,+BAA0D;QAC9D,GAAGD,sBAAsB;QACzBX;QACAS;QACAD;QACAP;QACAI;QACAC;QACAC;QACAL,WAAWA,aAAaW;QACxBV;QACAC;QACAM,YAAYA,cAAcG;IAC5B;IAEA,IAAIC,cAAc,MAAMtB,oBAAoBQ;IAC5Cc,gBAAgBvB,0BAA0BS;IAE1C,MAAMe,kBAAsD;QAC1DC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,OAAO;QACPC,IAAI;QACJC,MAAM;IACR;IACA,MAAMC,qBAAqBP,eAAe,CAACd,gBAAgB,SAAS,IAAI;IACxE,MAAMsB,qBAAqBlC,sBAAsBiC;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,wBAAwBvC,iBAAiBiB;IAC/C,MAAMuB,gBAAgBzC,uBAAuB;QAAE0C,WAAWpC;QAAOG;QAAWC;IAAS;IACrF,MAAMiC,iBAAiB,OAAOnC,cAAc,WAAWA,UAAUoC,IAAI,KAAK;IAE1E,MAAMC,cAAc;QAClBzB;QACAmB;QACAC;QACAC;QACAE;KACD,CACEG,MAAM,CAAC,CAACC,QAAUC,QAAQD,OAAOH,SAASK,SAC1CX,IAAI,CAAC;IAER,MAAMY,eAAenD,gBAAgBO;IACrC,qBACE;;0BACE,KAAC6C;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

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