cms-block-editor 1.0.14 → 1.0.16

package/dist/index.mjs

@@ -6568,45 +6568,88 @@ import { createContext, useContext, useEffect as useEffect18, useState as useSta
 // src/themes/lightTheme.ts
 var lightTheme = {
   name: "light",
+  mode: "light",
   colors: {
     // Primary colors
     primary: "#667eea",
     primaryHover: "#5568d3",
     primaryLight: "#e0e7ff",
     primaryDark: "#4c51bf",
+    primaryContrast: "#ffffff",
     // Secondary colors
     secondary: "#764ba2",
     secondaryHover: "#6a3f8f",
+    secondaryLight: "#f3e8ff",
+    secondaryDark: "#5b2c7d",
+    secondaryContrast: "#ffffff",
+    // Accent colors
+    accent: "#f59e0b",
+    accentHover: "#d97706",
+    accentLight: "#fef3c7",
+    accentDark: "#b45309",
     // Neutral colors
     background: "#ffffff",
+    backgroundAlt: "#fafafa",
     surface: "#f9fafb",
+    surfaceHover: "#f3f4f6",
+    surfaceActive: "#e5e7eb",
     border: "#e5e7eb",
+    borderHover: "#d1d5db",
     divider: "#d1d5db",
+    overlay: "rgba(0, 0, 0, 0.5)",
     // Text colors
     textPrimary: "#1f2937",
     textSecondary: "#6b7280",
-    textDisabled: "#9ca3af",
+    textTertiary: "#9ca3af",
+    textDisabled: "#d1d5db",
+    textInverse: "#ffffff",
     // Status colors
     success: "#10b981",
+    successLight: "#d1fae5",
+    successDark: "#065f46",
     warning: "#f59e0b",
+    warningLight: "#fef3c7",
+    warningDark: "#b45309",
     error: "#ef4444",
+    errorLight: "#fee2e2",
+    errorDark: "#991b1b",
     info: "#3b82f6",
+    infoLight: "#dbeafe",
+    infoDark: "#1e40af",
     // Editor specific
     editorBackground: "#ffffff",
     editorText: "#1f2937",
     editorPlaceholder: "#9ca3af",
+    editorCursor: "#667eea",
     toolbarBackground: "#f9fafb",
     toolbarText: "#374151",
     toolbarBorder: "#e5e7eb",
+    toolbarIconHover: "#667eea",
     // Selection and highlights
     selection: "#dbeafe",
+    selectionText: "#1f2937",
     highlight: "#fef3c7",
-    focus: "#667eea"
+    highlightText: "#1f2937",
+    focus: "#667eea",
+    focusRing: "rgba(102, 126, 234, 0.5)",
+    // Code editor colors
+    codeBackground: "#f3f4f6",
+    codeText: "#1f2937",
+    codeComment: "#6b7280",
+    codeKeyword: "#8b5cf6",
+    codeString: "#10b981",
+    codeNumber: "#f59e0b",
+    codeFunction: "#3b82f6",
+    codeOperator: "#ef4444"
   },
   typography: {
+    // Font families
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontFamilyHeading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
     fontFamilyMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
     // Font sizes
+    fontSizeXxs: "0.625rem",
+    // 10px
     fontSizeXs: "0.75rem",
     // 12px
     fontSizeSm: "0.875rem",
@@ -6617,16 +6660,34 @@ var lightTheme = {
     // 18px
     fontSizeXl: "1.25rem",
     // 20px
+    fontSizeXxl: "1.5rem",
+    // 24px
+    fontSize3xl: "1.875rem",
+    // 30px
+    fontSize4xl: "2.25rem",
+    // 36px
     // Font weights
+    fontWeightLight: 300,
     fontWeightNormal: 400,
     fontWeightMedium: 500,
-    fontWeightBold: 600,
+    fontWeightSemibold: 600,
+    fontWeightBold: 700,
+    fontWeightExtrabold: 800,
     // Line heights
     lineHeightTight: 1.25,
+    lineHeightSnug: 1.375,
     lineHeightNormal: 1.5,
-    lineHeightRelaxed: 1.75
+    lineHeightRelaxed: 1.625,
+    lineHeightLoose: 2,
+    // Letter spacing
+    letterSpacingTight: "-0.025em",
+    letterSpacingNormal: "0",
+    letterSpacingWide: "0.025em",
+    letterSpacingWider: "0.05em"
   },
   spacing: {
+    xxs: "0.125rem",
+    // 2px
     xs: "0.25rem",
     // 4px
     sm: "0.5rem",
@@ -6637,105 +6698,272 @@ var lightTheme = {
     // 24px
     xl: "2rem",
     // 32px
-    xxl: "3rem"
+    xxl: "3rem",
     // 48px
+    xxxl: "4rem"
+    // 64px
   },
   borderRadius: {
     none: "0",
+    xs: "0.125rem",
+    // 2px
     sm: "0.25rem",
     // 4px
     md: "0.5rem",
     // 8px
     lg: "0.75rem",
     // 12px
+    xl: "1rem",
+    // 16px
+    xxl: "1.5rem",
+    // 24px
     full: "9999px"
   },
   shadows: {
     none: "none",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
     md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
     lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    xxl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    outline: "0 0 0 3px rgba(102, 126, 234, 0.5)"
+  },
+  transitions: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    normal: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    slow: "500ms cubic-bezier(0.4, 0, 0.2, 1)",
+    verySlow: "700ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  breakpoints: {
+    xs: "480px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    xxl: "1536px"
+  },
+  zIndex: {
+    dropdown: 1e3,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070
+  },
+  animations: {
+    fadeIn: "fadeIn 0.3s ease-in-out",
+    fadeOut: "fadeOut 0.3s ease-in-out",
+    slideUp: "slideUp 0.3s ease-out",
+    slideDown: "slideDown 0.3s ease-out",
+    slideLeft: "slideLeft 0.3s ease-out",
+    slideRight: "slideRight 0.3s ease-out",
+    scaleUp: "scaleUp 0.2s ease-out",
+    scaleDown: "scaleDown 0.2s ease-out",
+    spin: "spin 1s linear infinite",
+    pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    bounce: "bounce 1s infinite"
+  },
+  gradients: {
+    primary: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    secondary: "linear-gradient(135deg, #764ba2 0%, #f093fb 100%)",
+    accent: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
+    sunset: "linear-gradient(135deg, #ff6b6b 0%, #feca57 100%)",
+    ocean: "linear-gradient(135deg, #0891b2 0%, #3b82f6 100%)",
+    forest: "linear-gradient(135deg, #059669 0%, #10b981 100%)",
+    fire: "linear-gradient(135deg, #ef4444 0%, #f97316 100%)",
+    ice: "linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%)",
+    purple: "linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)",
+    rainbow: "linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%)"
   }
 };
 
 // src/themes/darkTheme.ts
 var darkTheme = {
   name: "dark",
+  mode: "dark",
   colors: {
     // Primary colors
     primary: "#818cf8",
     primaryHover: "#6366f1",
     primaryLight: "#312e81",
     primaryDark: "#4f46e5",
+    primaryContrast: "#ffffff",
     // Secondary colors
     secondary: "#a78bfa",
     secondaryHover: "#8b5cf6",
+    secondaryLight: "#4c1d95",
+    secondaryDark: "#7c3aed",
+    secondaryContrast: "#ffffff",
+    // Accent colors
+    accent: "#fbbf24",
+    accentHover: "#f59e0b",
+    accentLight: "#78350f",
+    accentDark: "#d97706",
     // Neutral colors
     background: "#111827",
+    backgroundAlt: "#0f172a",
     surface: "#1f2937",
+    surfaceHover: "#374151",
+    surfaceActive: "#4b5563",
     border: "#374151",
+    borderHover: "#4b5563",
     divider: "#4b5563",
+    overlay: "rgba(0, 0, 0, 0.75)",
     // Text colors
     textPrimary: "#f9fafb",
     textSecondary: "#d1d5db",
+    textTertiary: "#9ca3af",
     textDisabled: "#6b7280",
+    textInverse: "#1f2937",
     // Status colors
     success: "#34d399",
+    successLight: "#064e3b",
+    successDark: "#10b981",
     warning: "#fbbf24",
+    warningLight: "#78350f",
+    warningDark: "#f59e0b",
     error: "#f87171",
+    errorLight: "#7f1d1d",
+    errorDark: "#ef4444",
     info: "#60a5fa",
+    infoLight: "#1e3a8a",
+    infoDark: "#3b82f6",
     // Editor specific
     editorBackground: "#1f2937",
     editorText: "#f9fafb",
     editorPlaceholder: "#6b7280",
+    editorCursor: "#818cf8",
     toolbarBackground: "#111827",
     toolbarText: "#e5e7eb",
     toolbarBorder: "#374151",
+    toolbarIconHover: "#818cf8",
     // Selection and highlights
     selection: "#1e3a8a",
+    selectionText: "#f9fafb",
     highlight: "#78350f",
-    focus: "#818cf8"
+    highlightText: "#f9fafb",
+    focus: "#818cf8",
+    focusRing: "rgba(129, 140, 248, 0.5)",
+    // Code editor colors
+    codeBackground: "#111827",
+    codeText: "#f9fafb",
+    codeComment: "#6b7280",
+    codeKeyword: "#a78bfa",
+    codeString: "#34d399",
+    codeNumber: "#fbbf24",
+    codeFunction: "#60a5fa",
+    codeOperator: "#f87171"
   },
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontFamilyHeading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
     fontFamilyMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
-    // Font sizes
+    fontSizeXxs: "0.625rem",
     fontSizeXs: "0.75rem",
     fontSizeSm: "0.875rem",
     fontSizeMd: "1rem",
     fontSizeLg: "1.125rem",
     fontSizeXl: "1.25rem",
-    // Font weights
+    fontSizeXxl: "1.5rem",
+    fontSize3xl: "1.875rem",
+    fontSize4xl: "2.25rem",
+    fontWeightLight: 300,
     fontWeightNormal: 400,
     fontWeightMedium: 500,
-    fontWeightBold: 600,
-    // Line heights
+    fontWeightSemibold: 600,
+    fontWeightBold: 700,
+    fontWeightExtrabold: 800,
     lineHeightTight: 1.25,
+    lineHeightSnug: 1.375,
     lineHeightNormal: 1.5,
-    lineHeightRelaxed: 1.75
+    lineHeightRelaxed: 1.625,
+    lineHeightLoose: 2,
+    letterSpacingTight: "-0.025em",
+    letterSpacingNormal: "0",
+    letterSpacingWide: "0.025em",
+    letterSpacingWider: "0.05em"
   },
   spacing: {
+    xxs: "0.125rem",
     xs: "0.25rem",
     sm: "0.5rem",
     md: "1rem",
     lg: "1.5rem",
     xl: "2rem",
-    xxl: "3rem"
+    xxl: "3rem",
+    xxxl: "4rem"
   },
   borderRadius: {
     none: "0",
+    xs: "0.125rem",
     sm: "0.25rem",
     md: "0.5rem",
     lg: "0.75rem",
+    xl: "1rem",
+    xxl: "1.5rem",
     full: "9999px"
   },
   shadows: {
     none: "none",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+    xs: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3)",
     md: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)",
     lg: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
-    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4)"
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4)",
+    xxl: "0 25px 50px -12px rgba(0, 0, 0, 0.6)",
+    inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.3)",
+    outline: "0 0 0 3px rgba(129, 140, 248, 0.5)"
+  },
+  transitions: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    normal: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    slow: "500ms cubic-bezier(0.4, 0, 0.2, 1)",
+    verySlow: "700ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  breakpoints: {
+    xs: "480px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    xxl: "1536px"
+  },
+  zIndex: {
+    dropdown: 1e3,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070
+  },
+  animations: {
+    fadeIn: "fadeIn 0.3s ease-in-out",
+    fadeOut: "fadeOut 0.3s ease-in-out",
+    slideUp: "slideUp 0.3s ease-out",
+    slideDown: "slideDown 0.3s ease-out",
+    slideLeft: "slideLeft 0.3s ease-out",
+    slideRight: "slideRight 0.3s ease-out",
+    scaleUp: "scaleUp 0.2s ease-out",
+    scaleDown: "scaleDown 0.2s ease-out",
+    spin: "spin 1s linear infinite",
+    pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    bounce: "bounce 1s infinite"
+  },
+  gradients: {
+    primary: "linear-gradient(135deg, #818cf8 0%, #a78bfa 100%)",
+    secondary: "linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%)",
+    accent: "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
+    sunset: "linear-gradient(135deg, #f87171 0%, #fbbf24 100%)",
+    ocean: "linear-gradient(135deg, #06b6d4 0%, #60a5fa 100%)",
+    forest: "linear-gradient(135deg, #10b981 0%, #34d399 100%)",
+    fire: "linear-gradient(135deg, #f87171 0%, #fb923c 100%)",
+    ice: "linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%)",
+    purple: "linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%)",
+    rainbow: "linear-gradient(135deg, #818cf8 0%, #a78bfa 25%, #c4b5fd 50%, #60a5fa 75%, #22d3ee 100%)"
   }
 };
 
@@ -6870,9 +7098,12 @@ var minimalTheme = {
   },
   borderRadius: {
     none: "0",
+    xs: "0",
     sm: "0",
     md: "0",
     lg: "0",
+    xl: "0",
+    xxl: "0",
     full: "0"
   }
 };
@@ -7117,26 +7348,791 @@ function ThemeSwitcher({
     ] })
   ] });
 }
+
+// src/themes/ThemeCustomizer.tsx
+import { useState as useState18 } from "react";
+
+// src/themes/themeBuilder.ts
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+      result[key] = deepMerge(result[key] || {}, source[key]);
+    } else if (source[key] !== void 0) {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+function createTheme(baseTheme, override) {
+  return deepMerge(baseTheme, override);
+}
+function generateColorVariations(baseColor) {
+  return {
+    base: baseColor,
+    light: adjustBrightness(baseColor, 20),
+    lighter: adjustBrightness(baseColor, 40),
+    dark: adjustBrightness(baseColor, -20),
+    darker: adjustBrightness(baseColor, -40),
+    contrast: getContrastColor(baseColor)
+  };
+}
+function adjustBrightness(color, percent) {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const adjust = (value) => {
+    const adjusted = value + value * percent / 100;
+    return Math.max(0, Math.min(255, Math.round(adjusted)));
+  };
+  const newR = adjust(r);
+  const newG = adjust(g);
+  const newB = adjust(b);
+  return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+}
+function getContrastColor(color) {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function createGradient(color1, color2, angle = 135) {
+  return `linear-gradient(${angle}deg, ${color1} 0%, ${color2} 100%)`;
+}
+function generatePalette(primaryColor) {
+  const primary = generateColorVariations(primaryColor);
+  const secondaryColor = rotateHue(primaryColor, 180);
+  const accentColor = rotateHue(primaryColor, 60);
+  return {
+    primary,
+    secondary: generateColorVariations(secondaryColor),
+    accent: generateColorVariations(accentColor)
+  };
+}
+function rotateHue(color, degrees) {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return color;
+}
+function validateTheme(theme) {
+  const errors = [];
+  if (!theme.name) {
+    errors.push("Theme name is required");
+  }
+  if (!theme.colors) {
+    errors.push("Theme colors are required");
+  }
+  if (!theme.typography) {
+    errors.push("Theme typography is required");
+  }
+  const colorKeys = Object.keys(theme.colors || {});
+  for (const key of colorKeys) {
+    const color = theme.colors[key];
+    if (typeof color === "string" && !isValidColor(color)) {
+      errors.push(`Invalid color format for ${key}: ${color}`);
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function isValidColor(color) {
+  if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
+    return true;
+  }
+  if (/^rgba?\(/.test(color)) {
+    return true;
+  }
+  if (/^hsla?\(/.test(color)) {
+    return true;
+  }
+  const cssColors = ["transparent", "currentColor", "inherit"];
+  if (cssColors.includes(color)) {
+    return true;
+  }
+  return false;
+}
+function exportTheme(theme) {
+  return JSON.stringify(theme, null, 2);
+}
+function importTheme(json) {
+  try {
+    const theme = JSON.parse(json);
+    const validation = validateTheme(theme);
+    if (!validation.valid) {
+      throw new Error(`Invalid theme: ${validation.errors.join(", ")}`);
+    }
+    return theme;
+  } catch (error) {
+    throw new Error(`Failed to import theme: ${error}`);
+  }
+}
+function themeToCSSVariables(theme, prefix = "cms") {
+  const variables = {};
+  Object.entries(theme.colors).forEach(([key, value]) => {
+    variables[`--${prefix}-color-${camelToKebab2(key)}`] = value;
+  });
+  Object.entries(theme.typography).forEach(([key, value]) => {
+    variables[`--${prefix}-typography-${camelToKebab2(key)}`] = String(value);
+  });
+  Object.entries(theme.spacing).forEach(([key, value]) => {
+    variables[`--${prefix}-spacing-${key}`] = value;
+  });
+  Object.entries(theme.borderRadius).forEach(([key, value]) => {
+    variables[`--${prefix}-radius-${key}`] = value;
+  });
+  Object.entries(theme.shadows).forEach(([key, value]) => {
+    variables[`--${prefix}-shadow-${key}`] = value;
+  });
+  Object.entries(theme.transitions).forEach(([key, value]) => {
+    variables[`--${prefix}-transition-${key}`] = value;
+  });
+  Object.entries(theme.zIndex).forEach(([key, value]) => {
+    variables[`--${prefix}-z-${key}`] = String(value);
+  });
+  Object.entries(theme.gradients).forEach(([key, value]) => {
+    variables[`--${prefix}-gradient-${key}`] = value;
+  });
+  return variables;
+}
+function camelToKebab2(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function generateThemeFromBrand(brandColor, themeName, mode = "light") {
+  const palette = generatePalette(brandColor);
+  return {
+    name: themeName,
+    mode,
+    colors: {
+      primary: palette.primary.base,
+      primaryHover: palette.primary.dark,
+      primaryLight: palette.primary.light,
+      primaryDark: palette.primary.darker,
+      primaryContrast: palette.primary.contrast,
+      secondary: palette.secondary.base,
+      secondaryHover: palette.secondary.dark,
+      secondaryLight: palette.secondary.light,
+      secondaryDark: palette.secondary.darker,
+      secondaryContrast: palette.secondary.contrast,
+      accent: palette.accent.base,
+      accentHover: palette.accent.dark,
+      accentLight: palette.accent.light,
+      accentDark: palette.accent.darker
+      // Other colors will be filled by the base theme
+    }
+  };
+}
+
+// src/themes/ThemeCustomizer.tsx
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function ThemeCustomizer({ onClose }) {
+  const { theme, setTheme } = useTheme();
+  const [activeTab, setActiveTab] = useState18("colors");
+  const [customTheme, setCustomTheme] = useState18(theme);
+  const [searchQuery, setSearchQuery] = useState18("");
+  const [showColorPicker, setShowColorPicker] = useState18(null);
+  const [history, setHistory] = useState18([theme]);
+  const [historyIndex, setHistoryIndex] = useState18(0);
+  const updateTheme = (override) => {
+    const updated = createTheme(customTheme, override);
+    setCustomTheme(updated);
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(updated);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  };
+  const undo = () => {
+    if (historyIndex > 0) {
+      setHistoryIndex(historyIndex - 1);
+      setCustomTheme(history[historyIndex - 1]);
+    }
+  };
+  const redo = () => {
+    if (historyIndex < history.length - 1) {
+      setHistoryIndex(historyIndex + 1);
+      setCustomTheme(history[historyIndex + 1]);
+    }
+  };
+  const applyTheme = () => {
+    setTheme(customTheme);
+    onClose?.();
+  };
+  const resetTheme = () => {
+    setCustomTheme(theme);
+    setHistory([theme]);
+    setHistoryIndex(0);
+  };
+  return /* @__PURE__ */ jsx21("div", { className: "cms-theme-customizer-advanced", children: /* @__PURE__ */ jsx21(
+    ThemeCustomizerContent,
+    {
+      activeTab,
+      setActiveTab,
+      customTheme,
+      updateTheme,
+      searchQuery,
+      setSearchQuery,
+      showColorPicker,
+      setShowColorPicker,
+      onClose,
+      applyTheme,
+      resetTheme,
+      undo,
+      redo,
+      canUndo: historyIndex > 0,
+      canRedo: historyIndex < history.length - 1
+    }
+  ) });
+}
+function ThemeCustomizerContent(props) {
+  const {
+    activeTab,
+    setActiveTab,
+    customTheme,
+    updateTheme,
+    searchQuery,
+    setSearchQuery,
+    showColorPicker,
+    setShowColorPicker,
+    onClose,
+    applyTheme,
+    resetTheme,
+    undo,
+    redo,
+    canUndo,
+    canRedo
+  } = props;
+  const handleExport = () => {
+    const json = exportTheme(customTheme);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${customTheme.name}-theme.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const handleImport = (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const json = e.target?.result;
+        const imported = importTheme(json);
+        updateTheme(imported);
+      } catch (error) {
+        alert(`Failed to import theme: ${error}`);
+      }
+    };
+    reader.readAsText(file);
+  };
+  const generateFromBrand = (brandColor) => {
+    const palette = generatePalette(brandColor);
+    updateTheme({
+      colors: {
+        primary: palette.primary.base,
+        primaryHover: palette.primary.dark,
+        primaryLight: palette.primary.light,
+        primaryDark: palette.primary.darker,
+        secondary: palette.secondary.base,
+        secondaryHover: palette.secondary.dark,
+        accent: palette.accent.base
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
+    /* @__PURE__ */ jsx21("div", { className: "cms-theme-customizer-overlay", onClick: onClose }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-theme-customizer-panel-advanced", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-customizer-header-advanced", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "cms-header-left", children: [
+          /* @__PURE__ */ jsx21("h2", { children: "\u{1F3A8} Theme Studio" }),
+          /* @__PURE__ */ jsx21("span", { className: "cms-theme-name-badge", children: customTheme.name })
+        ] }),
+        /* @__PURE__ */ jsxs19("div", { className: "cms-header-actions", children: [
+          /* @__PURE__ */ jsx21(
+            "button",
+            {
+              onClick: undo,
+              disabled: !canUndo,
+              className: "cms-icon-btn",
+              title: "Undo (Cmd+Z)",
+              children: "\u21B6"
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            "button",
+            {
+              onClick: redo,
+              disabled: !canRedo,
+              className: "cms-icon-btn",
+              title: "Redo (Cmd+Shift+Z)",
+              children: "\u21B7"
+            }
+          ),
+          /* @__PURE__ */ jsx21("button", { onClick: handleExport, className: "cms-icon-btn", title: "Export", children: "\u2B07" }),
+          /* @__PURE__ */ jsxs19("label", { className: "cms-icon-btn", title: "Import", children: [
+            "\u2B06",
+            /* @__PURE__ */ jsx21(
+              "input",
+              {
+                type: "file",
+                accept: ".json",
+                onChange: handleImport,
+                style: { display: "none" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx21("button", { onClick: onClose, className: "cms-close-btn-advanced", children: "\xD7" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-search-bar", children: /* @__PURE__ */ jsx21(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search properties...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "cms-search-input"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-tabs-advanced", children: [
+        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "colors", onClick: () => setActiveTab("colors"), icon: "\u{1F3A8}", children: "Colors" }),
+        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "typography", onClick: () => setActiveTab("typography"), icon: "Aa", children: "Typography" }),
+        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "spacing", onClick: () => setActiveTab("spacing"), icon: "\u{1F4CF}", children: "Spacing" }),
+        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "effects", onClick: () => setActiveTab("effects"), icon: "\u2728", children: "Effects" }),
+        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "advanced", onClick: () => setActiveTab("advanced"), icon: "\u2699\uFE0F", children: "Advanced" }),
+        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "preview", onClick: () => setActiveTab("preview"), icon: "\u{1F441}\uFE0F", children: "Preview" })
+      ] }),
+      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-content-advanced", children: [
+        activeTab === "colors" && /* @__PURE__ */ jsx21(
+          ColorsTab,
+          {
+            theme: customTheme,
+            updateTheme,
+            searchQuery,
+            showColorPicker,
+            setShowColorPicker,
+            generateFromBrand
+          }
+        ),
+        activeTab === "typography" && /* @__PURE__ */ jsx21(TypographyTab, { theme: customTheme, updateTheme, searchQuery }),
+        activeTab === "spacing" && /* @__PURE__ */ jsx21(SpacingTab, { theme: customTheme, updateTheme, searchQuery }),
+        activeTab === "effects" && /* @__PURE__ */ jsx21(EffectsTab, { theme: customTheme, updateTheme, searchQuery }),
+        activeTab === "advanced" && /* @__PURE__ */ jsx21(AdvancedTab, { theme: customTheme, updateTheme }),
+        activeTab === "preview" && /* @__PURE__ */ jsx21(PreviewTab, { theme: customTheme })
+      ] }),
+      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-footer-advanced", children: [
+        /* @__PURE__ */ jsx21("button", { onClick: resetTheme, className: "cms-btn-secondary", children: "Reset All" }),
+        /* @__PURE__ */ jsxs19("div", { className: "cms-footer-actions", children: [
+          /* @__PURE__ */ jsx21("button", { onClick: onClose, className: "cms-btn-secondary", children: "Cancel" }),
+          /* @__PURE__ */ jsx21("button", { onClick: applyTheme, className: "cms-btn-primary", children: "Apply Theme" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function TabButton({ active, onClick, icon, children }) {
+  return /* @__PURE__ */ jsxs19(
+    "button",
+    {
+      className: `cms-tab-btn-advanced ${active ? "active" : ""}`,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx21("span", { className: "cms-tab-icon", children: icon }),
+        /* @__PURE__ */ jsx21("span", { className: "cms-tab-label", children })
+      ]
+    }
+  );
+}
+function ColorsTab({
+  theme,
+  updateTheme,
+  searchQuery,
+  showColorPicker,
+  setShowColorPicker,
+  generateFromBrand
+}) {
+  const [brandColor, setBrandColor] = useState18("#667eea");
+  const colorGroups = [
+    { title: "Primary", keys: ["primary", "primaryHover", "primaryLight", "primaryDark", "primaryContrast"] },
+    { title: "Secondary", keys: ["secondary", "secondaryHover", "secondaryLight", "secondaryDark", "secondaryContrast"] },
+    { title: "Accent", keys: ["accent", "accentHover", "accentLight", "accentDark"] },
+    { title: "Background", keys: ["background", "backgroundAlt", "surface", "surfaceHover", "surfaceActive"] },
+    { title: "Border", keys: ["border", "borderHover", "divider", "overlay"] },
+    { title: "Text", keys: ["textPrimary", "textSecondary", "textTertiary", "textDisabled", "textInverse"] },
+    { title: "Status", keys: ["success", "successLight", "successDark", "warning", "warningLight", "warningDark", "error", "errorLight", "errorDark", "info", "infoLight", "infoDark"] },
+    { title: "Editor", keys: ["editorBackground", "editorText", "editorPlaceholder", "editorCursor", "toolbarBackground", "toolbarText", "toolbarBorder", "toolbarIconHover"] },
+    { title: "Selection", keys: ["selection", "selectionText", "highlight", "highlightText", "focus", "focusRing"] },
+    { title: "Code", keys: ["codeBackground", "codeText", "codeComment", "codeKeyword", "codeString", "codeNumber", "codeFunction", "codeOperator"] }
+  ];
+  const filteredGroups = colorGroups.map((group) => ({
+    ...group,
+    keys: group.keys.filter(
+      (key) => key.toLowerCase().includes(searchQuery.toLowerCase()) || group.title.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  })).filter((group) => group.keys.length > 0);
+  return /* @__PURE__ */ jsxs19("div", { className: "cms-colors-tab", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "cms-brand-generator", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "\u{1F3A8} Generate from Brand Color" }),
+      /* @__PURE__ */ jsxs19("div", { className: "cms-brand-input-group", children: [
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "color",
+            value: brandColor,
+            onChange: (e) => setBrandColor(e.target.value),
+            className: "cms-brand-color-picker"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "text",
+            value: brandColor,
+            onChange: (e) => setBrandColor(e.target.value),
+            className: "cms-brand-color-input",
+            placeholder: "#667eea"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "button",
+          {
+            onClick: () => generateFromBrand(brandColor),
+            className: "cms-btn-primary",
+            children: "Generate Palette"
+          }
+        )
+      ] })
+    ] }),
+    filteredGroups.map((group) => /* @__PURE__ */ jsxs19("div", { className: "cms-color-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: group.title }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-color-grid-advanced", children: group.keys.map((key) => /* @__PURE__ */ jsx21(
+        AdvancedColorInput,
+        {
+          label: formatLabel(key),
+          value: theme.colors[key],
+          onChange: (value) => updateTheme({ colors: { [key]: value } }),
+          showPicker: showColorPicker === key,
+          onTogglePicker: () => setShowColorPicker(showColorPicker === key ? null : key)
+        },
+        key
+      )) })
+    ] }, group.title))
+  ] });
+}
+function TypographyTab({ theme, updateTheme, searchQuery }) {
+  const typographyGroups = [
+    { title: "Font Families", keys: ["fontFamily", "fontFamilyHeading", "fontFamilyMono"] },
+    { title: "Font Sizes", keys: ["fontSizeXxs", "fontSizeXs", "fontSizeSm", "fontSizeMd", "fontSizeLg", "fontSizeXl", "fontSizeXxl", "fontSize3xl", "fontSize4xl"] },
+    { title: "Font Weights", keys: ["fontWeightLight", "fontWeightNormal", "fontWeightMedium", "fontWeightSemibold", "fontWeightBold", "fontWeightExtrabold"] },
+    { title: "Line Heights", keys: ["lineHeightTight", "lineHeightSnug", "lineHeightNormal", "lineHeightRelaxed", "lineHeightLoose"] },
+    { title: "Letter Spacing", keys: ["letterSpacingTight", "letterSpacingNormal", "letterSpacingWide", "letterSpacingWider"] }
+  ];
+  const filteredGroups = searchQuery ? typographyGroups.map((group) => ({
+    ...group,
+    keys: group.keys.filter(
+      (key) => key.toLowerCase().includes(searchQuery.toLowerCase()) || group.title.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  })).filter((group) => group.keys.length > 0) : typographyGroups;
+  return /* @__PURE__ */ jsx21("div", { className: "cms-typography-tab", children: filteredGroups.map((group) => /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+    /* @__PURE__ */ jsx21("h3", { children: group.title }),
+    /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: group.keys.map((key) => /* @__PURE__ */ jsx21(
+      PropertyInput,
+      {
+        label: formatLabel(key),
+        value: theme.typography[key],
+        onChange: (value) => updateTheme({ typography: { [key]: value } }),
+        type: group.title === "Font Weights" ? "number" : "text"
+      },
+      key
+    )) })
+  ] }, group.title)) });
+}
+function SpacingTab({ theme, updateTheme, searchQuery }) {
+  return /* @__PURE__ */ jsxs19("div", { className: "cms-spacing-tab", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Spacing Scale" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-spacing-visual", children: Object.entries(theme.spacing).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-spacing-item", children: [
+        /* @__PURE__ */ jsx21("div", { className: "cms-spacing-label", children: key.toUpperCase() }),
+        /* @__PURE__ */ jsx21("div", { className: "cms-spacing-bar", style: { width: value }, children: /* @__PURE__ */ jsx21("span", { children: value }) }),
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => updateTheme({ spacing: { [key]: e.target.value } }),
+            className: "cms-spacing-input"
+          }
+        )
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Border Radius" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-radius-grid", children: Object.entries(theme.borderRadius).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-radius-item", children: [
+        /* @__PURE__ */ jsx21("div", { className: "cms-radius-preview", style: { borderRadius: value } }),
+        /* @__PURE__ */ jsx21(
+          PropertyInput,
+          {
+            label: key.toUpperCase(),
+            value,
+            onChange: (newValue) => updateTheme({ borderRadius: { [key]: newValue } })
+          }
+        )
+      ] }, key)) })
+    ] })
+  ] });
+}
+function EffectsTab({ theme, updateTheme, searchQuery }) {
+  return /* @__PURE__ */ jsxs19("div", { className: "cms-effects-tab", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Shadows" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-shadow-grid", children: Object.entries(theme.shadows).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-shadow-item", children: [
+        /* @__PURE__ */ jsx21("div", { className: "cms-shadow-preview", style: { boxShadow: value } }),
+        /* @__PURE__ */ jsx21(
+          PropertyInput,
+          {
+            label: key.toUpperCase(),
+            value,
+            onChange: (newValue) => updateTheme({ shadows: { [key]: newValue } })
+          }
+        )
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Transitions" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: Object.entries(theme.transitions).map(([key, value]) => /* @__PURE__ */ jsx21(
+        PropertyInput,
+        {
+          label: formatLabel(key),
+          value,
+          onChange: (newValue) => updateTheme({ transitions: { [key]: newValue } })
+        },
+        key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Gradients" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-gradient-grid", children: Object.entries(theme.gradients).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-gradient-item", children: [
+        /* @__PURE__ */ jsx21("div", { className: "cms-gradient-preview", style: { background: value } }),
+        /* @__PURE__ */ jsx21(
+          PropertyInput,
+          {
+            label: formatLabel(key),
+            value,
+            onChange: (newValue) => updateTheme({ gradients: { [key]: newValue } })
+          }
+        )
+      ] }, key)) })
+    ] })
+  ] });
+}
+function AdvancedTab({ theme, updateTheme }) {
+  const validation = validateTheme(theme);
+  return /* @__PURE__ */ jsxs19("div", { className: "cms-advanced-tab", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Theme Information" }),
+      /* @__PURE__ */ jsx21(
+        PropertyInput,
+        {
+          label: "Theme Name",
+          value: theme.name,
+          onChange: (value) => updateTheme({ name: value })
+        }
+      ),
+      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-mode", children: [
+        /* @__PURE__ */ jsx21("label", { children: "Mode" }),
+        /* @__PURE__ */ jsxs19(
+          "select",
+          {
+            value: theme.mode,
+            onChange: (e) => updateTheme({ mode: e.target.value }),
+            className: "cms-select",
+            children: [
+              /* @__PURE__ */ jsx21("option", { value: "light", children: "Light" }),
+              /* @__PURE__ */ jsx21("option", { value: "dark", children: "Dark" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Validation" }),
+      /* @__PURE__ */ jsx21("div", { className: `cms-validation ${validation.valid ? "valid" : "invalid"}`, children: validation.valid ? /* @__PURE__ */ jsx21("div", { className: "cms-validation-success", children: "\u2713 Theme is valid" }) : /* @__PURE__ */ jsxs19("div", { className: "cms-validation-errors", children: [
+        /* @__PURE__ */ jsx21("strong", { children: "Errors:" }),
+        /* @__PURE__ */ jsx21("ul", { children: validation.errors.map((error, i) => /* @__PURE__ */ jsx21("li", { children: error }, i)) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Breakpoints" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: Object.entries(theme.breakpoints).map(([key, value]) => /* @__PURE__ */ jsx21(
+        PropertyInput,
+        {
+          label: key.toUpperCase(),
+          value,
+          onChange: (newValue) => updateTheme({ breakpoints: { [key]: newValue } })
+        },
+        key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx21("h3", { children: "Z-Index Layers" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: Object.entries(theme.zIndex).map(([key, value]) => /* @__PURE__ */ jsx21(
+        PropertyInput,
+        {
+          label: formatLabel(key),
+          value: String(value),
+          onChange: (newValue) => updateTheme({ zIndex: { [key]: Number(newValue) } }),
+          type: "number"
+        },
+        key
+      )) })
+    ] })
+  ] });
+}
+function PreviewTab({ theme }) {
+  return /* @__PURE__ */ jsx21("div", { className: "cms-preview-tab", style: {
+    background: theme.colors.background,
+    color: theme.colors.textPrimary,
+    fontFamily: theme.typography.fontFamily
+  }, children: /* @__PURE__ */ jsxs19("div", { className: "cms-preview-section", children: [
+    /* @__PURE__ */ jsx21("h2", { style: { color: theme.colors.textPrimary }, children: "Theme Preview" }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-preview-colors", children: [
+      /* @__PURE__ */ jsx21("div", { className: "cms-preview-color-box", style: { background: theme.colors.primary, color: theme.colors.primaryContrast }, children: "Primary" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-preview-color-box", style: { background: theme.colors.secondary, color: theme.colors.secondaryContrast }, children: "Secondary" }),
+      /* @__PURE__ */ jsx21("div", { className: "cms-preview-color-box", style: { background: theme.colors.accent }, children: "Accent" })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-preview-card", style: {
+      background: theme.colors.surface,
+      borderRadius: theme.borderRadius.lg,
+      boxShadow: theme.shadows.md,
+      padding: theme.spacing.lg
+    }, children: [
+      /* @__PURE__ */ jsx21("h3", { style: { color: theme.colors.textPrimary }, children: "Card Component" }),
+      /* @__PURE__ */ jsx21("p", { style: { color: theme.colors.textSecondary }, children: "This is how your theme looks in a card component with surface background and shadow." }),
+      /* @__PURE__ */ jsx21("button", { style: {
+        background: theme.colors.primary,
+        color: theme.colors.primaryContrast,
+        padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+        borderRadius: theme.borderRadius.md,
+        border: "none",
+        cursor: "pointer"
+      }, children: "Primary Button" })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-preview-typography", children: [
+      /* @__PURE__ */ jsx21("h1", { style: { fontSize: theme.typography.fontSize4xl }, children: "Heading 1" }),
+      /* @__PURE__ */ jsx21("h2", { style: { fontSize: theme.typography.fontSize3xl }, children: "Heading 2" }),
+      /* @__PURE__ */ jsx21("h3", { style: { fontSize: theme.typography.fontSizeXxl }, children: "Heading 3" }),
+      /* @__PURE__ */ jsx21("p", { style: { fontSize: theme.typography.fontSizeMd, lineHeight: theme.typography.lineHeightNormal }, children: "Body text with normal line height and medium font size." })
+    ] })
+  ] }) });
+}
+function AdvancedColorInput({
+  label,
+  value,
+  onChange,
+  showPicker,
+  onTogglePicker
+}) {
+  return /* @__PURE__ */ jsxs19("div", { className: "cms-advanced-color-input", children: [
+    /* @__PURE__ */ jsx21("label", { children: label }),
+    /* @__PURE__ */ jsxs19("div", { className: "cms-color-input-wrapper-advanced", children: [
+      /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: "cms-color-swatch",
+          style: { background: value },
+          onClick: onTogglePicker
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          className: "cms-color-text-input",
+          placeholder: "#000000"
+        }
+      ),
+      showPicker && /* @__PURE__ */ jsxs19("div", { className: "cms-color-picker-popover", children: [
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "color",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            className: "cms-color-picker-native"
+          }
+        ),
+        /* @__PURE__ */ jsx21("div", { className: "cms-color-presets", children: ["#667eea", "#764ba2", "#f59e0b", "#10b981", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899"].map((preset) => /* @__PURE__ */ jsx21(
+          "div",
+          {
+            className: "cms-color-preset",
+            style: { background: preset },
+            onClick: () => onChange(preset)
+          },
+          preset
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function PropertyInput({
+  label,
+  value,
+  onChange,
+  type = "text"
+}) {
+  return /* @__PURE__ */ jsxs19("div", { className: "cms-property-input", children: [
+    /* @__PURE__ */ jsx21("label", { children: label }),
+    /* @__PURE__ */ jsx21(
+      "input",
+      {
+        type,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "cms-property-input-field"
+      }
+    )
+  ] });
+}
+function formatLabel(key) {
+  return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+}
 export {
   CMSBlockEditor,
   CMSRenderer,
   ImageNode,
   OPEN_IMAGE_EDITOR_COMMAND,
+  ThemeCustomizer,
   ThemeProvider,
   ThemeSwitcher,
   VideoNode,
   appendHTML,
   copyMarkdownToClipboard,
+  createGradient,
+  createTheme,
   darkTheme,
   downloadHTML,
   downloadMarkdown,
   draculaTheme,
+  exportTheme,
   exportToHTML,
   exportToHTMLWithWrapper,
   exportToMarkdown,
   forestTheme,
+  generateColorVariations,
+  generatePalette,
+  generateThemeFromBrand,
   importFromHTML,
   importFromMarkdown,
+  importTheme,
   lightTheme,
   loadHTMLFromFile,
   loadMarkdownFromFile,
@@ -7148,6 +8144,8 @@ export {
   presetThemes,
   roseTheme,
   sunsetTheme,
-  useTheme
+  themeToCSSVariables,
+  useTheme,
+  validateTheme
 };
 //# sourceMappingURL=index.mjs.map