cms-block-editor 1.0.14 → 1.0.17

package/dist/index.mjs

@@ -6420,37 +6420,903 @@ function EmbedPlugin() {
   ] });
 }
 
+// src/plugins/SEOPlugin.tsx
+import { useState as useState16, useEffect as useEffect17 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext14 } from "@lexical/react/LexicalComposerContext";
+import { $generateHtmlFromNodes as $generateHtmlFromNodes2 } from "@lexical/html";
+
+// src/seo/seoAnalyzer.ts
+function analyzeSEO(content, metadata) {
+  const issues = [];
+  const suggestions = [];
+  const metrics = calculateMetrics(content, metadata);
+  if (!metadata.title) {
+    issues.push({
+      type: "error",
+      category: "meta",
+      message: "Missing page title",
+      impact: "high"
+    });
+  } else {
+    if (metrics.titleLength < 30) {
+      issues.push({
+        type: "warning",
+        category: "meta",
+        message: "Title is too short (recommended: 50-60 characters)",
+        impact: "medium"
+      });
+    } else if (metrics.titleLength > 60) {
+      issues.push({
+        type: "warning",
+        category: "meta",
+        message: "Title is too long (recommended: 50-60 characters)",
+        impact: "medium"
+      });
+    }
+  }
+  if (!metadata.description) {
+    issues.push({
+      type: "error",
+      category: "meta",
+      message: "Missing meta description",
+      impact: "high"
+    });
+  } else {
+    if (metrics.descriptionLength < 120) {
+      issues.push({
+        type: "warning",
+        category: "meta",
+        message: "Description is too short (recommended: 150-160 characters)",
+        impact: "medium"
+      });
+    } else if (metrics.descriptionLength > 160) {
+      issues.push({
+        type: "warning",
+        category: "meta",
+        message: "Description is too long (recommended: 150-160 characters)",
+        impact: "medium"
+      });
+    }
+  }
+  if (metrics.headingCount.h1 === 0) {
+    issues.push({
+      type: "error",
+      category: "structure",
+      message: "Missing H1 heading",
+      impact: "high"
+    });
+  } else if (metrics.headingCount.h1 > 1) {
+    issues.push({
+      type: "warning",
+      category: "structure",
+      message: "Multiple H1 headings found (recommended: 1)",
+      impact: "medium"
+    });
+  }
+  if (metrics.imageCount > 0) {
+    const altPercentage = metrics.imagesWithAlt / metrics.imageCount * 100;
+    if (altPercentage < 100) {
+      issues.push({
+        type: "warning",
+        category: "accessibility",
+        message: `${metrics.imageCount - metrics.imagesWithAlt} images missing alt text`,
+        impact: "medium"
+      });
+    }
+  }
+  if (metrics.wordCount < 300) {
+    issues.push({
+      type: "warning",
+      category: "content",
+      message: "Content is too short (recommended: 300+ words)",
+      impact: "medium"
+    });
+  }
+  if (!metadata.ogTitle && !metadata.ogDescription) {
+    suggestions.push({
+      category: "Social Media",
+      message: "Add Open Graph tags for better social media sharing",
+      priority: "medium"
+    });
+  }
+  if (!metadata.twitterCard) {
+    suggestions.push({
+      category: "Social Media",
+      message: "Add Twitter Card tags for better Twitter sharing",
+      priority: "low"
+    });
+  }
+  if (!metadata.schema || metadata.schema.length === 0) {
+    suggestions.push({
+      category: "Structured Data",
+      message: "Add Schema.org structured data for rich snippets",
+      priority: "medium"
+    });
+  }
+  if (!metadata.canonical) {
+    suggestions.push({
+      category: "Technical SEO",
+      message: "Add canonical URL to prevent duplicate content issues",
+      priority: "medium"
+    });
+  }
+  const score = calculateSEOScore(issues, metrics);
+  return {
+    score,
+    issues,
+    suggestions,
+    metrics
+  };
+}
+function calculateMetrics(content, metadata) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, "text/html");
+  const headingCount = {
+    h1: doc.querySelectorAll("h1").length,
+    h2: doc.querySelectorAll("h2").length,
+    h3: doc.querySelectorAll("h3").length,
+    h4: doc.querySelectorAll("h4").length,
+    h5: doc.querySelectorAll("h5").length,
+    h6: doc.querySelectorAll("h6").length
+  };
+  const images = doc.querySelectorAll("img");
+  const imageCount = images.length;
+  const imagesWithAlt = Array.from(images).filter((img) => img.hasAttribute("alt")).length;
+  const links = doc.querySelectorAll("a");
+  const linkCount = links.length;
+  const internalLinks = Array.from(links).filter((a) => {
+    const href = a.getAttribute("href") || "";
+    return href.startsWith("/") || href.startsWith("#");
+  }).length;
+  const externalLinks = linkCount - internalLinks;
+  const text = doc.body.textContent || "";
+  const words = text.trim().split(/\s+/).filter((word) => word.length > 0);
+  const wordCount = words.length;
+  const readingTime = Math.ceil(wordCount / 200);
+  const keywordDensity = calculateKeywordDensity(words, metadata.keywords || []);
+  return {
+    titleLength: metadata.title?.length || 0,
+    descriptionLength: metadata.description?.length || 0,
+    headingCount,
+    imageCount,
+    imagesWithAlt,
+    linkCount,
+    internalLinks,
+    externalLinks,
+    wordCount,
+    readingTime,
+    keywordDensity
+  };
+}
+function calculateKeywordDensity(words, keywords) {
+  const density = {};
+  const totalWords = words.length;
+  keywords.forEach((keyword) => {
+    const keywordLower = keyword.toLowerCase();
+    const count = words.filter((word) => word.toLowerCase() === keywordLower).length;
+    density[keyword] = totalWords > 0 ? count / totalWords * 100 : 0;
+  });
+  return density;
+}
+function calculateSEOScore(issues, metrics) {
+  let score = 100;
+  issues.forEach((issue) => {
+    if (issue.type === "error") {
+      score -= issue.impact === "high" ? 15 : issue.impact === "medium" ? 10 : 5;
+    } else if (issue.type === "warning") {
+      score -= issue.impact === "high" ? 10 : issue.impact === "medium" ? 5 : 2;
+    }
+  });
+  if (metrics.wordCount >= 300) score += 5;
+  if (metrics.headingCount.h1 === 1) score += 5;
+  if (metrics.imageCount > 0 && metrics.imagesWithAlt === metrics.imageCount) score += 5;
+  return Math.max(0, Math.min(100, score));
+}
+function generateSlug(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function extractKeywords(content, limit = 10) {
+  const text = content.toLowerCase().replace(/<[^>]*>/g, " ");
+  const words = text.split(/\s+/).filter((word) => word.length > 3);
+  const frequency = {};
+  words.forEach((word) => {
+    frequency[word] = (frequency[word] || 0) + 1;
+  });
+  return Object.entries(frequency).sort((a, b) => b[1] - a[1]).slice(0, limit).map(([word]) => word);
+}
+
+// src/seo/seoUtils.ts
+function generateMetaTags(metadata) {
+  const tags = [];
+  if (metadata.title) {
+    tags.push(`<title>${escapeHtml(metadata.title)}</title>`);
+  }
+  if (metadata.description) {
+    tags.push(`<meta name="description" content="${escapeHtml(metadata.description)}">`);
+  }
+  if (metadata.keywords && metadata.keywords.length > 0) {
+    tags.push(`<meta name="keywords" content="${escapeHtml(metadata.keywords.join(", "))}">`);
+  }
+  if (metadata.author) {
+    tags.push(`<meta name="author" content="${escapeHtml(metadata.author)}">`);
+  }
+  if (metadata.canonical) {
+    tags.push(`<link rel="canonical" href="${escapeHtml(metadata.canonical)}">`);
+  }
+  if (metadata.robots) {
+    tags.push(`<meta name="robots" content="${escapeHtml(metadata.robots)}">`);
+  }
+  if (metadata.ogTitle) {
+    tags.push(`<meta property="og:title" content="${escapeHtml(metadata.ogTitle)}">`);
+  }
+  if (metadata.ogDescription) {
+    tags.push(`<meta property="og:description" content="${escapeHtml(metadata.ogDescription)}">`);
+  }
+  if (metadata.ogImage) {
+    tags.push(`<meta property="og:image" content="${escapeHtml(metadata.ogImage)}">`);
+  }
+  if (metadata.ogImageAlt) {
+    tags.push(`<meta property="og:image:alt" content="${escapeHtml(metadata.ogImageAlt)}">`);
+  }
+  if (metadata.ogUrl) {
+    tags.push(`<meta property="og:url" content="${escapeHtml(metadata.ogUrl)}">`);
+  }
+  if (metadata.ogType) {
+    tags.push(`<meta property="og:type" content="${metadata.ogType}">`);
+  }
+  if (metadata.ogSiteName) {
+    tags.push(`<meta property="og:site_name" content="${escapeHtml(metadata.ogSiteName)}">`);
+  }
+  if (metadata.ogLocale) {
+    tags.push(`<meta property="og:locale" content="${metadata.ogLocale}">`);
+  }
+  if (metadata.twitterCard) {
+    tags.push(`<meta name="twitter:card" content="${metadata.twitterCard}">`);
+  }
+  if (metadata.twitterSite) {
+    tags.push(`<meta name="twitter:site" content="${escapeHtml(metadata.twitterSite)}">`);
+  }
+  if (metadata.twitterCreator) {
+    tags.push(`<meta name="twitter:creator" content="${escapeHtml(metadata.twitterCreator)}">`);
+  }
+  if (metadata.twitterTitle) {
+    tags.push(`<meta name="twitter:title" content="${escapeHtml(metadata.twitterTitle)}">`);
+  }
+  if (metadata.twitterDescription) {
+    tags.push(`<meta name="twitter:description" content="${escapeHtml(metadata.twitterDescription)}">`);
+  }
+  if (metadata.twitterImage) {
+    tags.push(`<meta name="twitter:image" content="${escapeHtml(metadata.twitterImage)}">`);
+  }
+  if (metadata.twitterImageAlt) {
+    tags.push(`<meta name="twitter:image:alt" content="${escapeHtml(metadata.twitterImageAlt)}">`);
+  }
+  if (metadata.articlePublishedTime) {
+    tags.push(`<meta property="article:published_time" content="${metadata.articlePublishedTime}">`);
+  }
+  if (metadata.articleModifiedTime) {
+    tags.push(`<meta property="article:modified_time" content="${metadata.articleModifiedTime}">`);
+  }
+  if (metadata.articleAuthor) {
+    tags.push(`<meta property="article:author" content="${escapeHtml(metadata.articleAuthor)}">`);
+  }
+  if (metadata.articleSection) {
+    tags.push(`<meta property="article:section" content="${escapeHtml(metadata.articleSection)}">`);
+  }
+  if (metadata.articleTags && metadata.articleTags.length > 0) {
+    metadata.articleTags.forEach((tag) => {
+      tags.push(`<meta property="article:tag" content="${escapeHtml(tag)}">`);
+    });
+  }
+  return tags.join("\n");
+}
+function generateStructuredData(schemas) {
+  if (!schemas || schemas.length === 0) return "";
+  const scripts = schemas.map((schema) => {
+    return `<script type="application/ld+json">
+${JSON.stringify(schema, null, 2)}
+</script>`;
+  });
+  return scripts.join("\n");
+}
+function escapeHtml(text) {
+  const map = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;"
+  };
+  return text.replace(/[&<>"']/g, (char) => map[char]);
+}
+function createDefaultMetadata(title, description) {
+  return {
+    title,
+    description,
+    ogTitle: title,
+    ogDescription: description,
+    ogType: "website",
+    twitterCard: "summary_large_image",
+    robots: "index, follow"
+  };
+}
+function mergeMetadata(base, override) {
+  return {
+    ...base,
+    ...override,
+    keywords: override.keywords || base.keywords,
+    schema: override.schema || base.schema,
+    articleTags: override.articleTags || base.articleTags
+  };
+}
+function validateMetadata(metadata) {
+  const errors = [];
+  if (!metadata.title) {
+    errors.push("Title is required");
+  } else if (metadata.title.length > 60) {
+    errors.push("Title should be 60 characters or less");
+  }
+  if (!metadata.description) {
+    errors.push("Description is required");
+  } else if (metadata.description.length > 160) {
+    errors.push("Description should be 160 characters or less");
+  }
+  if (metadata.ogImage && !isValidUrl(metadata.ogImage)) {
+    errors.push("Open Graph image must be a valid URL");
+  }
+  if (metadata.canonical && !isValidUrl(metadata.canonical)) {
+    errors.push("Canonical URL must be a valid URL");
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function isValidUrl(url) {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyMetadataToClipboard(metadata) {
+  const metaTags = generateMetaTags(metadata);
+  const structuredData = metadata.schema ? generateStructuredData(metadata.schema) : "";
+  const fullContent = `${metaTags}
+
+${structuredData}`;
+  await navigator.clipboard.writeText(fullContent);
+}
+function downloadMetadata(metadata, filename = "seo-metadata.html") {
+  const metaTags = generateMetaTags(metadata);
+  const structuredData = metadata.schema ? generateStructuredData(metadata.schema) : "";
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  ${metaTags}
+  ${structuredData}
+</head>
+<body>
+  <!-- Your content here -->
+</body>
+</html>`;
+  const blob = new Blob([html], { type: "text/html" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+// src/plugins/SEOPlugin.tsx
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function SEOPlugin({ metadata: initialMetadata, onMetadataChange, showAnalysis = true }) {
+  const [editor] = useLexicalComposerContext14();
+  const [showPanel, setShowPanel] = useState16(false);
+  const [metadata, setMetadata] = useState16(
+    initialMetadata || createDefaultMetadata("", "")
+  );
+  const [analysis, setAnalysis] = useState16(null);
+  const [activeTab, setActiveTab] = useState16("basic");
+  useEffect17(() => {
+    if (initialMetadata) {
+      setMetadata(initialMetadata);
+    }
+  }, [initialMetadata]);
+  const handleAnalyze = () => {
+    editor.getEditorState().read(() => {
+      const html = $generateHtmlFromNodes2(editor);
+      const result = analyzeSEO(html, metadata);
+      setAnalysis(result);
+    });
+  };
+  const handleMetadataUpdate = (updates) => {
+    const updated = { ...metadata, ...updates };
+    setMetadata(updated);
+    onMetadataChange?.(updated);
+  };
+  const handleGenerateSlug = () => {
+    if (metadata.title) {
+      const slug = generateSlug(metadata.title);
+      handleMetadataUpdate({ canonical: `https://example.com/${slug}` });
+    }
+  };
+  const handleExtractKeywords = () => {
+    editor.getEditorState().read(() => {
+      const html = $generateHtmlFromNodes2(editor);
+      const keywords = extractKeywords(html, 10);
+      handleMetadataUpdate({ keywords });
+    });
+  };
+  const handleCopy = async () => {
+    await copyMetadataToClipboard(metadata);
+    alert("Metadata copied to clipboard!");
+  };
+  const handleDownload = () => {
+    downloadMetadata(metadata);
+  };
+  if (!showPanel) {
+    return /* @__PURE__ */ jsx16(
+      "button",
+      {
+        onClick: () => setShowPanel(true),
+        className: "cms-seo-trigger",
+        title: "SEO Settings",
+        children: "\u{1F50D} SEO"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: "cms-seo-panel", children: [
+    /* @__PURE__ */ jsx16("div", { className: "cms-seo-overlay", onClick: () => setShowPanel(false) }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-content", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-header", children: [
+        /* @__PURE__ */ jsx16("h2", { children: "\u{1F50D} SEO Manager" }),
+        /* @__PURE__ */ jsx16("button", { onClick: () => setShowPanel(false), className: "cms-seo-close", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-tabs", children: [
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            className: activeTab === "basic" ? "active" : "",
+            onClick: () => setActiveTab("basic"),
+            children: "Basic"
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            className: activeTab === "social" ? "active" : "",
+            onClick: () => setActiveTab("social"),
+            children: "Social"
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            className: activeTab === "advanced" ? "active" : "",
+            onClick: () => setActiveTab("advanced"),
+            children: "Advanced"
+          }
+        ),
+        showAnalysis && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            className: activeTab === "analysis" ? "active" : "",
+            onClick: () => setActiveTab("analysis"),
+            children: "Analysis"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-body", children: [
+        activeTab === "basic" && /* @__PURE__ */ jsx16(BasicTab, { metadata, onUpdate: handleMetadataUpdate, onGenerateSlug: handleGenerateSlug, onExtractKeywords: handleExtractKeywords }),
+        activeTab === "social" && /* @__PURE__ */ jsx16(SocialTab, { metadata, onUpdate: handleMetadataUpdate }),
+        activeTab === "advanced" && /* @__PURE__ */ jsx16(AdvancedTab, { metadata, onUpdate: handleMetadataUpdate }),
+        activeTab === "analysis" && showAnalysis && /* @__PURE__ */ jsx16(AnalysisTab, { analysis, onAnalyze: handleAnalyze })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-footer", children: [
+        /* @__PURE__ */ jsx16("button", { onClick: handleCopy, className: "cms-btn-secondary", children: "\u{1F4CB} Copy Tags" }),
+        /* @__PURE__ */ jsx16("button", { onClick: handleDownload, className: "cms-btn-secondary", children: "\u2B07 Download" }),
+        /* @__PURE__ */ jsx16("button", { onClick: () => setShowPanel(false), className: "cms-btn-primary", children: "Done" })
+      ] })
+    ] })
+  ] });
+}
+function BasicTab({ metadata, onUpdate, onGenerateSlug, onExtractKeywords }) {
+  const validation = validateMetadata(metadata);
+  return /* @__PURE__ */ jsxs16("div", { className: "cms-seo-tab", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsxs16("label", { children: [
+        "Title ",
+        /* @__PURE__ */ jsxs16("span", { className: "cms-char-count", children: [
+          metadata.title?.length || 0,
+          "/60"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.title || "",
+          onChange: (e) => onUpdate({ title: e.target.value }),
+          placeholder: "Page title",
+          maxLength: 60
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsxs16("label", { children: [
+        "Description ",
+        /* @__PURE__ */ jsxs16("span", { className: "cms-char-count", children: [
+          metadata.description?.length || 0,
+          "/160"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx16(
+        "textarea",
+        {
+          value: metadata.description || "",
+          onChange: (e) => onUpdate({ description: e.target.value }),
+          placeholder: "Meta description",
+          maxLength: 160,
+          rows: 3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Keywords" }),
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field-with-action", children: [
+        /* @__PURE__ */ jsx16(
+          "input",
+          {
+            type: "text",
+            value: metadata.keywords?.join(", ") || "",
+            onChange: (e) => onUpdate({ keywords: e.target.value.split(",").map((k) => k.trim()) }),
+            placeholder: "keyword1, keyword2, keyword3"
+          }
+        ),
+        /* @__PURE__ */ jsx16("button", { onClick: onExtractKeywords, className: "cms-btn-icon", title: "Extract from content", children: "\u2728" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Canonical URL" }),
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field-with-action", children: [
+        /* @__PURE__ */ jsx16(
+          "input",
+          {
+            type: "url",
+            value: metadata.canonical || "",
+            onChange: (e) => onUpdate({ canonical: e.target.value }),
+            placeholder: "https://example.com/page"
+          }
+        ),
+        /* @__PURE__ */ jsx16("button", { onClick: onGenerateSlug, className: "cms-btn-icon", title: "Generate from title", children: "\u{1F517}" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Author" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.author || "",
+          onChange: (e) => onUpdate({ author: e.target.value }),
+          placeholder: "Author name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Robots" }),
+      /* @__PURE__ */ jsxs16(
+        "select",
+        {
+          value: metadata.robots || "index, follow",
+          onChange: (e) => onUpdate({ robots: e.target.value }),
+          children: [
+            /* @__PURE__ */ jsx16("option", { value: "index, follow", children: "Index, Follow" }),
+            /* @__PURE__ */ jsx16("option", { value: "noindex, follow", children: "No Index, Follow" }),
+            /* @__PURE__ */ jsx16("option", { value: "index, nofollow", children: "Index, No Follow" }),
+            /* @__PURE__ */ jsx16("option", { value: "noindex, nofollow", children: "No Index, No Follow" })
+          ]
+        }
+      )
+    ] }),
+    !validation.valid && /* @__PURE__ */ jsxs16("div", { className: "cms-seo-validation-errors", children: [
+      /* @__PURE__ */ jsx16("strong", { children: "\u26A0\uFE0F Validation Errors:" }),
+      /* @__PURE__ */ jsx16("ul", { children: validation.errors.map((error, i) => /* @__PURE__ */ jsx16("li", { children: error }, i)) })
+    ] })
+  ] });
+}
+function SocialTab({ metadata, onUpdate }) {
+  return /* @__PURE__ */ jsxs16("div", { className: "cms-seo-tab", children: [
+    /* @__PURE__ */ jsx16("h3", { children: "Open Graph" }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "OG Title" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.ogTitle || "",
+          onChange: (e) => onUpdate({ ogTitle: e.target.value }),
+          placeholder: "Title for social media"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "OG Description" }),
+      /* @__PURE__ */ jsx16(
+        "textarea",
+        {
+          value: metadata.ogDescription || "",
+          onChange: (e) => onUpdate({ ogDescription: e.target.value }),
+          placeholder: "Description for social media",
+          rows: 2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "OG Image URL" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "url",
+          value: metadata.ogImage || "",
+          onChange: (e) => onUpdate({ ogImage: e.target.value }),
+          placeholder: "https://example.com/image.jpg"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "OG Type" }),
+      /* @__PURE__ */ jsxs16(
+        "select",
+        {
+          value: metadata.ogType || "website",
+          onChange: (e) => onUpdate({ ogType: e.target.value }),
+          children: [
+            /* @__PURE__ */ jsx16("option", { value: "website", children: "Website" }),
+            /* @__PURE__ */ jsx16("option", { value: "article", children: "Article" }),
+            /* @__PURE__ */ jsx16("option", { value: "blog", children: "Blog" }),
+            /* @__PURE__ */ jsx16("option", { value: "product", children: "Product" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16("h3", { children: "Twitter Card" }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Card Type" }),
+      /* @__PURE__ */ jsxs16(
+        "select",
+        {
+          value: metadata.twitterCard || "summary_large_image",
+          onChange: (e) => onUpdate({ twitterCard: e.target.value }),
+          children: [
+            /* @__PURE__ */ jsx16("option", { value: "summary", children: "Summary" }),
+            /* @__PURE__ */ jsx16("option", { value: "summary_large_image", children: "Summary Large Image" }),
+            /* @__PURE__ */ jsx16("option", { value: "app", children: "App" }),
+            /* @__PURE__ */ jsx16("option", { value: "player", children: "Player" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Twitter Site" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.twitterSite || "",
+          onChange: (e) => onUpdate({ twitterSite: e.target.value }),
+          placeholder: "@username"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Twitter Creator" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.twitterCreator || "",
+          onChange: (e) => onUpdate({ twitterCreator: e.target.value }),
+          placeholder: "@username"
+        }
+      )
+    ] })
+  ] });
+}
+function AdvancedTab({ metadata, onUpdate }) {
+  return /* @__PURE__ */ jsxs16("div", { className: "cms-seo-tab", children: [
+    /* @__PURE__ */ jsx16("h3", { children: "Article Metadata" }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Published Time" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "datetime-local",
+          value: metadata.articlePublishedTime || "",
+          onChange: (e) => onUpdate({ articlePublishedTime: e.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Modified Time" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "datetime-local",
+          value: metadata.articleModifiedTime || "",
+          onChange: (e) => onUpdate({ articleModifiedTime: e.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Article Author" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.articleAuthor || "",
+          onChange: (e) => onUpdate({ articleAuthor: e.target.value }),
+          placeholder: "Author name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Section" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.articleSection || "",
+          onChange: (e) => onUpdate({ articleSection: e.target.value }),
+          placeholder: "Technology, Business, etc."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-field", children: [
+      /* @__PURE__ */ jsx16("label", { children: "Article Tags" }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "text",
+          value: metadata.articleTags?.join(", ") || "",
+          onChange: (e) => onUpdate({ articleTags: e.target.value.split(",").map((t) => t.trim()) }),
+          placeholder: "tag1, tag2, tag3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: "cms-seo-info", children: /* @__PURE__ */ jsx16("p", { children: "\u{1F4A1} Structured data (Schema.org) can be added programmatically via the API" }) })
+  ] });
+}
+function AnalysisTab({ analysis, onAnalyze }) {
+  if (!analysis) {
+    return /* @__PURE__ */ jsxs16("div", { className: "cms-seo-tab cms-seo-analysis-empty", children: [
+      /* @__PURE__ */ jsx16("p", { children: "Click the button below to analyze your content for SEO optimization." }),
+      /* @__PURE__ */ jsx16("button", { onClick: onAnalyze, className: "cms-btn-primary", children: "\u{1F50D} Analyze Content" })
+    ] });
+  }
+  const scoreColor = analysis.score >= 80 ? "#10b981" : analysis.score >= 60 ? "#f59e0b" : "#ef4444";
+  return /* @__PURE__ */ jsxs16("div", { className: "cms-seo-tab", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-score", style: { borderColor: scoreColor }, children: [
+      /* @__PURE__ */ jsx16("div", { className: "cms-seo-score-circle", style: { background: scoreColor }, children: analysis.score }),
+      /* @__PURE__ */ jsx16("div", { className: "cms-seo-score-label", children: analysis.score >= 80 ? "Excellent" : analysis.score >= 60 ? "Good" : "Needs Improvement" })
+    ] }),
+    /* @__PURE__ */ jsx16("button", { onClick: onAnalyze, className: "cms-btn-secondary", style: { marginBottom: "1rem" }, children: "\u{1F504} Re-analyze" }),
+    analysis.issues.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "cms-seo-issues", children: [
+      /* @__PURE__ */ jsx16("h3", { children: "Issues" }),
+      analysis.issues.map((issue, i) => /* @__PURE__ */ jsxs16("div", { className: `cms-seo-issue cms-seo-issue-${issue.type}`, children: [
+        /* @__PURE__ */ jsx16("span", { className: "cms-seo-issue-icon", children: issue.type === "error" ? "\u274C" : "\u26A0\uFE0F" }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-issue-message", children: issue.message }),
+          /* @__PURE__ */ jsxs16("div", { className: "cms-seo-issue-meta", children: [
+            issue.category,
+            " \u2022 ",
+            issue.impact,
+            " impact"
+          ] })
+        ] })
+      ] }, i))
+    ] }),
+    analysis.suggestions.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "cms-seo-suggestions", children: [
+      /* @__PURE__ */ jsx16("h3", { children: "Suggestions" }),
+      analysis.suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs16("div", { className: "cms-seo-suggestion", children: [
+        /* @__PURE__ */ jsx16("span", { className: "cms-seo-suggestion-icon", children: "\u{1F4A1}" }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-suggestion-message", children: suggestion.message }),
+          /* @__PURE__ */ jsxs16("div", { className: "cms-seo-suggestion-meta", children: [
+            suggestion.category,
+            " \u2022 ",
+            suggestion.priority,
+            " priority"
+          ] })
+        ] })
+      ] }, i))
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metrics", children: [
+      /* @__PURE__ */ jsx16("h3", { children: "Metrics" }),
+      /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metrics-grid", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric", children: [
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-value", children: analysis.metrics.wordCount }),
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-label", children: "Words" })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric-value", children: [
+            analysis.metrics.readingTime,
+            " min"
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-label", children: "Reading Time" })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric", children: [
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-value", children: analysis.metrics.headingCount.h1 }),
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-label", children: "H1 Tags" })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric", children: [
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-value", children: analysis.metrics.imageCount }),
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-label", children: "Images" })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric", children: [
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-value", children: analysis.metrics.linkCount }),
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-label", children: "Links" })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "cms-seo-metric-value", children: [
+            analysis.metrics.imagesWithAlt,
+            "/",
+            analysis.metrics.imageCount
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "cms-seo-metric-label", children: "Alt Text" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
 // src/core/EditorShell.tsx
-import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 function EditorShell({
   onChange,
   onImageAdded,
   onVideoAdded,
-  useBase64Url
+  useBase64Url,
+  seoMetadata,
+  onSEOMetadataChange,
+  showSEO
 }) {
-  return /* @__PURE__ */ jsxs16("div", { className: "cms-editor-shell", children: [
-    /* @__PURE__ */ jsx16(ToolbarPlugin, {}),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs17("div", { className: "cms-editor-shell", children: [
+    /* @__PURE__ */ jsx17(ToolbarPlugin, {}),
+    showSEO && /* @__PURE__ */ jsx17("div", { className: "cms-toolbar-seo", children: /* @__PURE__ */ jsx17(
+      SEOPlugin,
+      {
+        metadata: seoMetadata,
+        onMetadataChange: onSEOMetadataChange,
+        showAnalysis: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx17(
       RichTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ jsx16(ContentEditable, { className: "cms-editor-content" }),
-        placeholder: /* @__PURE__ */ jsx16("div", { className: "cms-editor-placeholder", children: "Start typing or press / for commands..." }),
+        contentEditable: /* @__PURE__ */ jsx17(ContentEditable, { className: "cms-editor-content" }),
+        placeholder: /* @__PURE__ */ jsx17("div", { className: "cms-editor-placeholder", children: "Start typing or press / for commands..." }),
         ErrorBoundary: LexicalErrorBoundary
       }
     ),
-    /* @__PURE__ */ jsx16(HistoryPlugin, {}),
-    /* @__PURE__ */ jsx16(ListPlugin, {}),
-    /* @__PURE__ */ jsx16(LexicalLinkPlugin, {}),
-    /* @__PURE__ */ jsx16(LexicalTablePlugin, {}),
-    /* @__PURE__ */ jsx16(SlashCommandPlugin, {}),
-    /* @__PURE__ */ jsx16(ImageUploadPlugin, { onImageAdded, useBase64Url }),
-    /* @__PURE__ */ jsx16(VideoUploadPlugin, { onVideoAdded, useBase64Url }),
-    /* @__PURE__ */ jsx16(ImageEditorPlugin, {}),
-    /* @__PURE__ */ jsx16(LinkPlugin, {}),
-    /* @__PURE__ */ jsx16(SectionEditorPlugin, {}),
-    /* @__PURE__ */ jsx16(EmbedPlugin, {}),
-    /* @__PURE__ */ jsx16(TablePlugin, {}),
-    onChange && /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx17(ListPlugin, {}),
+    /* @__PURE__ */ jsx17(LexicalLinkPlugin, {}),
+    /* @__PURE__ */ jsx17(LexicalTablePlugin, {}),
+    /* @__PURE__ */ jsx17(SlashCommandPlugin, {}),
+    /* @__PURE__ */ jsx17(ImageUploadPlugin, { onImageAdded, useBase64Url }),
+    /* @__PURE__ */ jsx17(VideoUploadPlugin, { onVideoAdded, useBase64Url }),
+    /* @__PURE__ */ jsx17(ImageEditorPlugin, {}),
+    /* @__PURE__ */ jsx17(LinkPlugin, {}),
+    /* @__PURE__ */ jsx17(SectionEditorPlugin, {}),
+    /* @__PURE__ */ jsx17(EmbedPlugin, {}),
+    /* @__PURE__ */ jsx17(TablePlugin, {}),
+    onChange && /* @__PURE__ */ jsx17(
       OnChangePlugin,
       {
         onChange: (editorState) => {
@@ -6510,21 +7376,27 @@ function createEditorConfig(value) {
 }
 
 // src/core/CMSBlockEditor.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function CMSBlockEditor({
   value,
   onChange,
   onImageAdded,
   onVideoAdded,
-  useBase64Url = true
+  useBase64Url = true,
+  seoMetadata,
+  onSEOMetadataChange,
+  showSEO = true
 }) {
-  return /* @__PURE__ */ jsx17(LexicalComposer, { initialConfig: createEditorConfig(value), children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(LexicalComposer, { initialConfig: createEditorConfig(value), children: /* @__PURE__ */ jsx18(
     EditorShell,
     {
       onChange,
       onImageAdded,
       onVideoAdded,
-      useBase64Url
+      useBase64Url,
+      seoMetadata,
+      onSEOMetadataChange,
+      showSEO
     }
   ) });
 }
@@ -6534,12 +7406,12 @@ import { LexicalComposer as LexicalComposer2 } from "@lexical/react/LexicalCompo
 import { RichTextPlugin as RichTextPlugin2 } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable as ContentEditable2 } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary2 from "@lexical/react/LexicalErrorBoundary";
-import { useEffect as useEffect17 } from "react";
-import { useLexicalComposerContext as useLexicalComposerContext14 } from "@lexical/react/LexicalComposerContext";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect18 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext15 } from "@lexical/react/LexicalComposerContext";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function ReadOnlyPlugin() {
-  const [editor] = useLexicalComposerContext14();
-  useEffect17(() => {
+  const [editor] = useLexicalComposerContext15();
+  useEffect18(() => {
     editor.setEditable(false);
   }, [editor]);
   return null;
@@ -6549,64 +7421,107 @@ function CMSRenderer({ content, className = "" }) {
     ...createEditorConfig(content),
     editable: false
   };
-  return /* @__PURE__ */ jsx18(LexicalComposer2, { initialConfig: config, children: /* @__PURE__ */ jsxs17("div", { className: `cms-renderer ${className}`, children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(LexicalComposer2, { initialConfig: config, children: /* @__PURE__ */ jsxs18("div", { className: `cms-renderer ${className}`, children: [
+    /* @__PURE__ */ jsx19(
       RichTextPlugin2,
       {
-        contentEditable: /* @__PURE__ */ jsx18(ContentEditable2, { className: "cms-renderer-content" }),
+        contentEditable: /* @__PURE__ */ jsx19(ContentEditable2, { className: "cms-renderer-content" }),
         placeholder: null,
         ErrorBoundary: LexicalErrorBoundary2
       }
     ),
-    /* @__PURE__ */ jsx18(ReadOnlyPlugin, {})
+    /* @__PURE__ */ jsx19(ReadOnlyPlugin, {})
   ] }) });
 }
 
 // src/themes/ThemeProvider.tsx
-import { createContext, useContext, useEffect as useEffect18, useState as useState16 } from "react";
+import { createContext, useContext, useEffect as useEffect19, useState as useState17 } from "react";
 
 // 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 +7532,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 +7570,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 +7970,12 @@ var minimalTheme = {
   },
   borderRadius: {
     none: "0",
+    xs: "0",
     sm: "0",
     md: "0",
     lg: "0",
+    xl: "0",
+    xxl: "0",
     full: "0"
   }
 };
@@ -6890,7 +7993,7 @@ var presetThemes = {
 };
 
 // src/themes/ThemeProvider.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ThemeContext = createContext(void 0);
 function ThemeProvider({
   children,
@@ -6898,13 +8001,13 @@ function ThemeProvider({
   defaultMode = "light",
   storageKey = "cms-editor-theme"
 }) {
-  const [theme, setThemeState] = useState16(() => {
+  const [theme, setThemeState] = useState17(() => {
     if (typeof defaultTheme === "string") {
       return presetThemes[defaultTheme] || lightTheme;
     }
     return defaultTheme;
   });
-  const [mode, setModeState] = useState16(() => {
+  const [mode, setModeState] = useState17(() => {
     if (typeof window !== "undefined" && storageKey) {
       const stored = localStorage.getItem(`${storageKey}-mode`);
       if (stored === "light" || stored === "dark" || stored === "auto") {
@@ -6913,7 +8016,7 @@ function ThemeProvider({
     }
     return defaultMode;
   });
-  useEffect18(() => {
+  useEffect19(() => {
     if (mode === "auto" && typeof window !== "undefined") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       const handleChange = (e) => {
@@ -6945,12 +8048,12 @@ function ThemeProvider({
       root.style.setProperty(`--cms-shadow-${key}`, value);
     });
   };
-  useEffect18(() => {
+  useEffect19(() => {
     if (mode !== "auto") {
       applyTheme(theme);
     }
   }, [theme, mode]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (typeof window !== "undefined" && storageKey) {
       localStorage.setItem(`${storageKey}-mode`, mode);
       localStorage.setItem(`${storageKey}-name`, theme.name);
@@ -6977,7 +8080,7 @@ function ThemeProvider({
     const newMode = mode === "light" ? "dark" : "light";
     setMode(newMode);
   };
-  return /* @__PURE__ */ jsx19(ThemeContext.Provider, { value: { theme, mode, setTheme, setMode, toggleMode }, children });
+  return /* @__PURE__ */ jsx20(ThemeContext.Provider, { value: { theme, mode, setTheme, setMode, toggleMode }, children });
 }
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -6991,18 +8094,18 @@ function camelToKebab(str) {
 }
 
 // src/themes/ThemeSwitcher.tsx
-import { useState as useState17 } from "react";
-import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState18 } from "react";
+import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function ThemeSwitcher({
   className = "",
   showModeToggle = true,
   showPresets = true
 }) {
   const { theme, mode, setTheme, setMode, toggleMode } = useTheme();
-  const [isOpen, setIsOpen] = useState17(false);
+  const [isOpen, setIsOpen] = useState18(false);
   const themeNames = Object.keys(presetThemes);
-  return /* @__PURE__ */ jsxs18("div", { className: `cms-theme-switcher ${className}`, children: [
-    showModeToggle && /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs19("div", { className: `cms-theme-switcher ${className}`, children: [
+    showModeToggle && /* @__PURE__ */ jsx21(
       "button",
       {
         onClick: toggleMode,
@@ -7011,8 +8114,8 @@ function ThemeSwitcher({
         children: mode === "light" ? "\u{1F319}" : "\u2600\uFE0F"
       }
     ),
-    showPresets && /* @__PURE__ */ jsxs18("div", { className: "cms-theme-selector", children: [
-      /* @__PURE__ */ jsxs18(
+    showPresets && /* @__PURE__ */ jsxs19("div", { className: "cms-theme-selector", children: [
+      /* @__PURE__ */ jsxs19(
         "button",
         {
           onClick: () => setIsOpen(!isOpen),
@@ -7023,22 +8126,22 @@ function ThemeSwitcher({
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsxs18(Fragment10, { children: [
-        /* @__PURE__ */ jsx20(
+      isOpen && /* @__PURE__ */ jsxs19(Fragment10, { children: [
+        /* @__PURE__ */ jsx21(
           "div",
           {
             className: "cms-theme-selector-overlay",
             onClick: () => setIsOpen(false)
           }
         ),
-        /* @__PURE__ */ jsxs18("div", { className: "cms-theme-selector-dropdown", children: [
-          /* @__PURE__ */ jsxs18("div", { className: "cms-theme-selector-header", children: [
-            /* @__PURE__ */ jsx20("h3", { children: "Choose Theme" }),
-            /* @__PURE__ */ jsx20("button", { onClick: () => setIsOpen(false), children: "\xD7" })
+        /* @__PURE__ */ jsxs19("div", { className: "cms-theme-selector-dropdown", children: [
+          /* @__PURE__ */ jsxs19("div", { className: "cms-theme-selector-header", children: [
+            /* @__PURE__ */ jsx21("h3", { children: "Choose Theme" }),
+            /* @__PURE__ */ jsx21("button", { onClick: () => setIsOpen(false), children: "\xD7" })
           ] }),
-          /* @__PURE__ */ jsx20("div", { className: "cms-theme-selector-grid", children: themeNames.map((themeName) => {
+          /* @__PURE__ */ jsx21("div", { className: "cms-theme-selector-grid", children: themeNames.map((themeName) => {
             const presetTheme = presetThemes[themeName];
-            return /* @__PURE__ */ jsxs18(
+            return /* @__PURE__ */ jsxs19(
               "button",
               {
                 onClick: () => {
@@ -7047,7 +8150,7 @@ function ThemeSwitcher({
                 },
                 className: `cms-theme-option ${theme.name === themeName ? "active" : ""}`,
                 children: [
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx21(
                     "div",
                     {
                       className: "cms-theme-preview",
@@ -7055,7 +8158,7 @@ function ThemeSwitcher({
                         background: presetTheme.colors.primary,
                         borderColor: presetTheme.colors.border
                       },
-                      children: /* @__PURE__ */ jsx20(
+                      children: /* @__PURE__ */ jsx21(
                         "div",
                         {
                           className: "cms-theme-preview-accent",
@@ -7064,16 +8167,16 @@ function ThemeSwitcher({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx20("span", { className: "cms-theme-name", children: themeName }),
-                  theme.name === themeName && /* @__PURE__ */ jsx20("span", { className: "cms-theme-check", children: "\u2713" })
+                  /* @__PURE__ */ jsx21("span", { className: "cms-theme-name", children: themeName }),
+                  theme.name === themeName && /* @__PURE__ */ jsx21("span", { className: "cms-theme-check", children: "\u2713" })
                 ]
               },
               themeName
             );
           }) }),
-          /* @__PURE__ */ jsxs18("div", { className: "cms-theme-selector-modes", children: [
-            /* @__PURE__ */ jsxs18("label", { children: [
-              /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs19("div", { className: "cms-theme-selector-modes", children: [
+            /* @__PURE__ */ jsxs19("label", { children: [
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   type: "radio",
@@ -7085,8 +8188,8 @@ function ThemeSwitcher({
               ),
               "Light"
             ] }),
-            /* @__PURE__ */ jsxs18("label", { children: [
-              /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsxs19("label", { children: [
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   type: "radio",
@@ -7098,8 +8201,8 @@ function ThemeSwitcher({
               ),
               "Dark"
             ] }),
-            /* @__PURE__ */ jsxs18("label", { children: [
-              /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsxs19("label", { children: [
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   type: "radio",
@@ -7117,29 +8220,804 @@ function ThemeSwitcher({
     ] })
   ] });
 }
+
+// src/themes/ThemeCustomizer.tsx
+import { useState as useState19 } 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 jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function ThemeCustomizer({ onClose }) {
+  const { theme, setTheme } = useTheme();
+  const [activeTab, setActiveTab] = useState19("colors");
+  const [customTheme, setCustomTheme] = useState19(theme);
+  const [searchQuery, setSearchQuery] = useState19("");
+  const [showColorPicker, setShowColorPicker] = useState19(null);
+  const [history, setHistory] = useState19([theme]);
+  const [historyIndex, setHistoryIndex] = useState19(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__ */ jsx22("div", { className: "cms-theme-customizer-advanced", children: /* @__PURE__ */ jsx22(
+    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__ */ jsxs20(Fragment11, { children: [
+    /* @__PURE__ */ jsx22("div", { className: "cms-theme-customizer-overlay", onClick: onClose }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-theme-customizer-panel-advanced", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "cms-theme-customizer-header-advanced", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "cms-header-left", children: [
+          /* @__PURE__ */ jsx22("h2", { children: "\u{1F3A8} Theme Studio" }),
+          /* @__PURE__ */ jsx22("span", { className: "cms-theme-name-badge", children: customTheme.name })
+        ] }),
+        /* @__PURE__ */ jsxs20("div", { className: "cms-header-actions", children: [
+          /* @__PURE__ */ jsx22(
+            "button",
+            {
+              onClick: undo,
+              disabled: !canUndo,
+              className: "cms-icon-btn",
+              title: "Undo (Cmd+Z)",
+              children: "\u21B6"
+            }
+          ),
+          /* @__PURE__ */ jsx22(
+            "button",
+            {
+              onClick: redo,
+              disabled: !canRedo,
+              className: "cms-icon-btn",
+              title: "Redo (Cmd+Shift+Z)",
+              children: "\u21B7"
+            }
+          ),
+          /* @__PURE__ */ jsx22("button", { onClick: handleExport, className: "cms-icon-btn", title: "Export", children: "\u2B07" }),
+          /* @__PURE__ */ jsxs20("label", { className: "cms-icon-btn", title: "Import", children: [
+            "\u2B06",
+            /* @__PURE__ */ jsx22(
+              "input",
+              {
+                type: "file",
+                accept: ".json",
+                onChange: handleImport,
+                style: { display: "none" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx22("button", { onClick: onClose, className: "cms-close-btn-advanced", children: "\xD7" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-search-bar", children: /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search properties...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "cms-search-input"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs20("div", { className: "cms-theme-tabs-advanced", children: [
+        /* @__PURE__ */ jsx22(TabButton, { active: activeTab === "colors", onClick: () => setActiveTab("colors"), icon: "\u{1F3A8}", children: "Colors" }),
+        /* @__PURE__ */ jsx22(TabButton, { active: activeTab === "typography", onClick: () => setActiveTab("typography"), icon: "Aa", children: "Typography" }),
+        /* @__PURE__ */ jsx22(TabButton, { active: activeTab === "spacing", onClick: () => setActiveTab("spacing"), icon: "\u{1F4CF}", children: "Spacing" }),
+        /* @__PURE__ */ jsx22(TabButton, { active: activeTab === "effects", onClick: () => setActiveTab("effects"), icon: "\u2728", children: "Effects" }),
+        /* @__PURE__ */ jsx22(TabButton, { active: activeTab === "advanced", onClick: () => setActiveTab("advanced"), icon: "\u2699\uFE0F", children: "Advanced" }),
+        /* @__PURE__ */ jsx22(TabButton, { active: activeTab === "preview", onClick: () => setActiveTab("preview"), icon: "\u{1F441}\uFE0F", children: "Preview" })
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "cms-theme-content-advanced", children: [
+        activeTab === "colors" && /* @__PURE__ */ jsx22(
+          ColorsTab,
+          {
+            theme: customTheme,
+            updateTheme,
+            searchQuery,
+            showColorPicker,
+            setShowColorPicker,
+            generateFromBrand
+          }
+        ),
+        activeTab === "typography" && /* @__PURE__ */ jsx22(TypographyTab, { theme: customTheme, updateTheme, searchQuery }),
+        activeTab === "spacing" && /* @__PURE__ */ jsx22(SpacingTab, { theme: customTheme, updateTheme, searchQuery }),
+        activeTab === "effects" && /* @__PURE__ */ jsx22(EffectsTab, { theme: customTheme, updateTheme, searchQuery }),
+        activeTab === "advanced" && /* @__PURE__ */ jsx22(AdvancedTab2, { theme: customTheme, updateTheme }),
+        activeTab === "preview" && /* @__PURE__ */ jsx22(PreviewTab, { theme: customTheme })
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "cms-theme-footer-advanced", children: [
+        /* @__PURE__ */ jsx22("button", { onClick: resetTheme, className: "cms-btn-secondary", children: "Reset All" }),
+        /* @__PURE__ */ jsxs20("div", { className: "cms-footer-actions", children: [
+          /* @__PURE__ */ jsx22("button", { onClick: onClose, className: "cms-btn-secondary", children: "Cancel" }),
+          /* @__PURE__ */ jsx22("button", { onClick: applyTheme, className: "cms-btn-primary", children: "Apply Theme" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function TabButton({ active, onClick, icon, children }) {
+  return /* @__PURE__ */ jsxs20(
+    "button",
+    {
+      className: `cms-tab-btn-advanced ${active ? "active" : ""}`,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx22("span", { className: "cms-tab-icon", children: icon }),
+        /* @__PURE__ */ jsx22("span", { className: "cms-tab-label", children })
+      ]
+    }
+  );
+}
+function ColorsTab({
+  theme,
+  updateTheme,
+  searchQuery,
+  showColorPicker,
+  setShowColorPicker,
+  generateFromBrand
+}) {
+  const [brandColor, setBrandColor] = useState19("#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__ */ jsxs20("div", { className: "cms-colors-tab", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "cms-brand-generator", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "\u{1F3A8} Generate from Brand Color" }),
+      /* @__PURE__ */ jsxs20("div", { className: "cms-brand-input-group", children: [
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            type: "color",
+            value: brandColor,
+            onChange: (e) => setBrandColor(e.target.value),
+            className: "cms-brand-color-picker"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            type: "text",
+            value: brandColor,
+            onChange: (e) => setBrandColor(e.target.value),
+            className: "cms-brand-color-input",
+            placeholder: "#667eea"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "button",
+          {
+            onClick: () => generateFromBrand(brandColor),
+            className: "cms-btn-primary",
+            children: "Generate Palette"
+          }
+        )
+      ] })
+    ] }),
+    filteredGroups.map((group) => /* @__PURE__ */ jsxs20("div", { className: "cms-color-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: group.title }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-color-grid-advanced", children: group.keys.map((key) => /* @__PURE__ */ jsx22(
+        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__ */ jsx22("div", { className: "cms-typography-tab", children: filteredGroups.map((group) => /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+    /* @__PURE__ */ jsx22("h3", { children: group.title }),
+    /* @__PURE__ */ jsx22("div", { className: "cms-property-grid", children: group.keys.map((key) => /* @__PURE__ */ jsx22(
+      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__ */ jsxs20("div", { className: "cms-spacing-tab", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Spacing Scale" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-spacing-visual", children: Object.entries(theme.spacing).map(([key, value]) => /* @__PURE__ */ jsxs20("div", { className: "cms-spacing-item", children: [
+        /* @__PURE__ */ jsx22("div", { className: "cms-spacing-label", children: key.toUpperCase() }),
+        /* @__PURE__ */ jsx22("div", { className: "cms-spacing-bar", style: { width: value }, children: /* @__PURE__ */ jsx22("span", { children: value }) }),
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => updateTheme({ spacing: { [key]: e.target.value } }),
+            className: "cms-spacing-input"
+          }
+        )
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Border Radius" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-radius-grid", children: Object.entries(theme.borderRadius).map(([key, value]) => /* @__PURE__ */ jsxs20("div", { className: "cms-radius-item", children: [
+        /* @__PURE__ */ jsx22("div", { className: "cms-radius-preview", style: { borderRadius: value } }),
+        /* @__PURE__ */ jsx22(
+          PropertyInput,
+          {
+            label: key.toUpperCase(),
+            value,
+            onChange: (newValue) => updateTheme({ borderRadius: { [key]: newValue } })
+          }
+        )
+      ] }, key)) })
+    ] })
+  ] });
+}
+function EffectsTab({ theme, updateTheme, searchQuery }) {
+  return /* @__PURE__ */ jsxs20("div", { className: "cms-effects-tab", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Shadows" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-shadow-grid", children: Object.entries(theme.shadows).map(([key, value]) => /* @__PURE__ */ jsxs20("div", { className: "cms-shadow-item", children: [
+        /* @__PURE__ */ jsx22("div", { className: "cms-shadow-preview", style: { boxShadow: value } }),
+        /* @__PURE__ */ jsx22(
+          PropertyInput,
+          {
+            label: key.toUpperCase(),
+            value,
+            onChange: (newValue) => updateTheme({ shadows: { [key]: newValue } })
+          }
+        )
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Transitions" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-property-grid", children: Object.entries(theme.transitions).map(([key, value]) => /* @__PURE__ */ jsx22(
+        PropertyInput,
+        {
+          label: formatLabel(key),
+          value,
+          onChange: (newValue) => updateTheme({ transitions: { [key]: newValue } })
+        },
+        key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Gradients" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-gradient-grid", children: Object.entries(theme.gradients).map(([key, value]) => /* @__PURE__ */ jsxs20("div", { className: "cms-gradient-item", children: [
+        /* @__PURE__ */ jsx22("div", { className: "cms-gradient-preview", style: { background: value } }),
+        /* @__PURE__ */ jsx22(
+          PropertyInput,
+          {
+            label: formatLabel(key),
+            value,
+            onChange: (newValue) => updateTheme({ gradients: { [key]: newValue } })
+          }
+        )
+      ] }, key)) })
+    ] })
+  ] });
+}
+function AdvancedTab2({ theme, updateTheme }) {
+  const validation = validateTheme(theme);
+  return /* @__PURE__ */ jsxs20("div", { className: "cms-advanced-tab", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Theme Information" }),
+      /* @__PURE__ */ jsx22(
+        PropertyInput,
+        {
+          label: "Theme Name",
+          value: theme.name,
+          onChange: (value) => updateTheme({ name: value })
+        }
+      ),
+      /* @__PURE__ */ jsxs20("div", { className: "cms-theme-mode", children: [
+        /* @__PURE__ */ jsx22("label", { children: "Mode" }),
+        /* @__PURE__ */ jsxs20(
+          "select",
+          {
+            value: theme.mode,
+            onChange: (e) => updateTheme({ mode: e.target.value }),
+            className: "cms-select",
+            children: [
+              /* @__PURE__ */ jsx22("option", { value: "light", children: "Light" }),
+              /* @__PURE__ */ jsx22("option", { value: "dark", children: "Dark" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Validation" }),
+      /* @__PURE__ */ jsx22("div", { className: `cms-validation ${validation.valid ? "valid" : "invalid"}`, children: validation.valid ? /* @__PURE__ */ jsx22("div", { className: "cms-validation-success", children: "\u2713 Theme is valid" }) : /* @__PURE__ */ jsxs20("div", { className: "cms-validation-errors", children: [
+        /* @__PURE__ */ jsx22("strong", { children: "Errors:" }),
+        /* @__PURE__ */ jsx22("ul", { children: validation.errors.map((error, i) => /* @__PURE__ */ jsx22("li", { children: error }, i)) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Breakpoints" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-property-grid", children: Object.entries(theme.breakpoints).map(([key, value]) => /* @__PURE__ */ jsx22(
+        PropertyInput,
+        {
+          label: key.toUpperCase(),
+          value,
+          onChange: (newValue) => updateTheme({ breakpoints: { [key]: newValue } })
+        },
+        key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-property-group", children: [
+      /* @__PURE__ */ jsx22("h3", { children: "Z-Index Layers" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-property-grid", children: Object.entries(theme.zIndex).map(([key, value]) => /* @__PURE__ */ jsx22(
+        PropertyInput,
+        {
+          label: formatLabel(key),
+          value: String(value),
+          onChange: (newValue) => updateTheme({ zIndex: { [key]: Number(newValue) } }),
+          type: "number"
+        },
+        key
+      )) })
+    ] })
+  ] });
+}
+function PreviewTab({ theme }) {
+  return /* @__PURE__ */ jsx22("div", { className: "cms-preview-tab", style: {
+    background: theme.colors.background,
+    color: theme.colors.textPrimary,
+    fontFamily: theme.typography.fontFamily
+  }, children: /* @__PURE__ */ jsxs20("div", { className: "cms-preview-section", children: [
+    /* @__PURE__ */ jsx22("h2", { style: { color: theme.colors.textPrimary }, children: "Theme Preview" }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-preview-colors", children: [
+      /* @__PURE__ */ jsx22("div", { className: "cms-preview-color-box", style: { background: theme.colors.primary, color: theme.colors.primaryContrast }, children: "Primary" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-preview-color-box", style: { background: theme.colors.secondary, color: theme.colors.secondaryContrast }, children: "Secondary" }),
+      /* @__PURE__ */ jsx22("div", { className: "cms-preview-color-box", style: { background: theme.colors.accent }, children: "Accent" })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-preview-card", style: {
+      background: theme.colors.surface,
+      borderRadius: theme.borderRadius.lg,
+      boxShadow: theme.shadows.md,
+      padding: theme.spacing.lg
+    }, children: [
+      /* @__PURE__ */ jsx22("h3", { style: { color: theme.colors.textPrimary }, children: "Card Component" }),
+      /* @__PURE__ */ jsx22("p", { style: { color: theme.colors.textSecondary }, children: "This is how your theme looks in a card component with surface background and shadow." }),
+      /* @__PURE__ */ jsx22("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__ */ jsxs20("div", { className: "cms-preview-typography", children: [
+      /* @__PURE__ */ jsx22("h1", { style: { fontSize: theme.typography.fontSize4xl }, children: "Heading 1" }),
+      /* @__PURE__ */ jsx22("h2", { style: { fontSize: theme.typography.fontSize3xl }, children: "Heading 2" }),
+      /* @__PURE__ */ jsx22("h3", { style: { fontSize: theme.typography.fontSizeXxl }, children: "Heading 3" }),
+      /* @__PURE__ */ jsx22("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__ */ jsxs20("div", { className: "cms-advanced-color-input", children: [
+    /* @__PURE__ */ jsx22("label", { children: label }),
+    /* @__PURE__ */ jsxs20("div", { className: "cms-color-input-wrapper-advanced", children: [
+      /* @__PURE__ */ jsx22(
+        "div",
+        {
+          className: "cms-color-swatch",
+          style: { background: value },
+          onClick: onTogglePicker
+        }
+      ),
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          className: "cms-color-text-input",
+          placeholder: "#000000"
+        }
+      ),
+      showPicker && /* @__PURE__ */ jsxs20("div", { className: "cms-color-picker-popover", children: [
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            type: "color",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            className: "cms-color-picker-native"
+          }
+        ),
+        /* @__PURE__ */ jsx22("div", { className: "cms-color-presets", children: ["#667eea", "#764ba2", "#f59e0b", "#10b981", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899"].map((preset) => /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "cms-color-preset",
+            style: { background: preset },
+            onClick: () => onChange(preset)
+          },
+          preset
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function PropertyInput({
+  label,
+  value,
+  onChange,
+  type = "text"
+}) {
+  return /* @__PURE__ */ jsxs20("div", { className: "cms-property-input", children: [
+    /* @__PURE__ */ jsx22("label", { children: label }),
+    /* @__PURE__ */ jsx22(
+      "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,
+  SEOPlugin,
+  ThemeCustomizer,
   ThemeProvider,
   ThemeSwitcher,
   VideoNode,
+  analyzeSEO,
   appendHTML,
   copyMarkdownToClipboard,
+  copyMetadataToClipboard,
+  createDefaultMetadata,
+  createGradient,
+  createTheme,
   darkTheme,
   downloadHTML,
   downloadMarkdown,
+  downloadMetadata,
   draculaTheme,
+  exportTheme,
   exportToHTML,
   exportToHTMLWithWrapper,
   exportToMarkdown,
+  extractKeywords,
   forestTheme,
+  generateColorVariations,
+  generateMetaTags,
+  generatePalette,
+  generateSlug,
+  generateStructuredData,
+  generateThemeFromBrand,
   importFromHTML,
   importFromMarkdown,
+  importTheme,
   lightTheme,
   loadHTMLFromFile,
   loadMarkdownFromFile,
+  mergeMetadata,
   midnightTheme,
   minimalTheme,
   monokaiTheme,
@@ -7148,6 +9026,9 @@ export {
   presetThemes,
   roseTheme,
   sunsetTheme,
-  useTheme
+  themeToCSSVariables,
+  useTheme,
+  validateMetadata,
+  validateTheme
 };
 //# sourceMappingURL=index.mjs.map