cms-block-editor 1.0.16 → 1.0.17

package/dist/index.mjs

@@ -6420,37 +6420,903 @@ function EmbedPlugin() {
   ] });
 }
 
-// src/core/EditorShell.tsx
+// 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 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,21 +7421,21 @@ 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 = {
@@ -7121,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,
@@ -7129,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") {
@@ -7144,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) => {
@@ -7176,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);
@@ -7208,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);
@@ -7222,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,
@@ -7242,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),
@@ -7254,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: () => {
@@ -7278,7 +8150,7 @@ function ThemeSwitcher({
                 },
                 className: `cms-theme-option ${theme.name === themeName ? "active" : ""}`,
                 children: [
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx21(
                     "div",
                     {
                       className: "cms-theme-preview",
@@ -7286,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",
@@ -7295,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",
@@ -7316,8 +8188,8 @@ function ThemeSwitcher({
               ),
               "Light"
             ] }),
-            /* @__PURE__ */ jsxs18("label", { children: [
-              /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsxs19("label", { children: [
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   type: "radio",
@@ -7329,8 +8201,8 @@ function ThemeSwitcher({
               ),
               "Dark"
             ] }),
-            /* @__PURE__ */ jsxs18("label", { children: [
-              /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsxs19("label", { children: [
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   type: "radio",
@@ -7350,7 +8222,7 @@ function ThemeSwitcher({
 }
 
 // src/themes/ThemeCustomizer.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 
 // src/themes/themeBuilder.ts
 function deepMerge(target, source) {
@@ -7530,15 +8402,15 @@ function generateThemeFromBrand(brandColor, themeName, mode = "light") {
 }
 
 // src/themes/ThemeCustomizer.tsx
-import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function ThemeCustomizer({ onClose }) {
   const { theme, setTheme } = useTheme();
-  const [activeTab, setActiveTab] = useState18("colors");
-  const [customTheme, setCustomTheme] = useState18(theme);
-  const [searchQuery, setSearchQuery] = useState18("");
-  const [showColorPicker, setShowColorPicker] = useState18(null);
-  const [history, setHistory] = useState18([theme]);
-  const [historyIndex, setHistoryIndex] = useState18(0);
+  const [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);
@@ -7568,7 +8440,7 @@ function ThemeCustomizer({ onClose }) {
     setHistory([theme]);
     setHistoryIndex(0);
   };
-  return /* @__PURE__ */ jsx21("div", { className: "cms-theme-customizer-advanced", children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("div", { className: "cms-theme-customizer-advanced", children: /* @__PURE__ */ jsx22(
     ThemeCustomizerContent,
     {
       activeTab,
@@ -7646,16 +8518,16 @@ function ThemeCustomizerContent(props) {
       }
     });
   };
-  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
-    /* @__PURE__ */ jsx21("div", { className: "cms-theme-customizer-overlay", onClick: onClose }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-theme-customizer-panel-advanced", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-customizer-header-advanced", children: [
-        /* @__PURE__ */ jsxs19("div", { className: "cms-header-left", children: [
-          /* @__PURE__ */ jsx21("h2", { children: "\u{1F3A8} Theme Studio" }),
-          /* @__PURE__ */ jsx21("span", { className: "cms-theme-name-badge", children: customTheme.name })
+  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__ */ jsxs19("div", { className: "cms-header-actions", children: [
-          /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs20("div", { className: "cms-header-actions", children: [
+          /* @__PURE__ */ jsx22(
             "button",
             {
               onClick: undo,
@@ -7665,7 +8537,7 @@ function ThemeCustomizerContent(props) {
               children: "\u21B6"
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "button",
             {
               onClick: redo,
@@ -7675,10 +8547,10 @@ function ThemeCustomizerContent(props) {
               children: "\u21B7"
             }
           ),
-          /* @__PURE__ */ jsx21("button", { onClick: handleExport, className: "cms-icon-btn", title: "Export", children: "\u2B07" }),
-          /* @__PURE__ */ jsxs19("label", { className: "cms-icon-btn", title: "Import", children: [
+          /* @__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__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               "input",
               {
                 type: "file",
@@ -7688,10 +8560,10 @@ function ThemeCustomizerContent(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx21("button", { onClick: onClose, className: "cms-close-btn-advanced", children: "\xD7" })
+          /* @__PURE__ */ jsx22("button", { onClick: onClose, className: "cms-close-btn-advanced", children: "\xD7" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-search-bar", children: /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22("div", { className: "cms-search-bar", children: /* @__PURE__ */ jsx22(
         "input",
         {
           type: "text",
@@ -7701,16 +8573,16 @@ function ThemeCustomizerContent(props) {
           className: "cms-search-input"
         }
       ) }),
-      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-tabs-advanced", children: [
-        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "colors", onClick: () => setActiveTab("colors"), icon: "\u{1F3A8}", children: "Colors" }),
-        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "typography", onClick: () => setActiveTab("typography"), icon: "Aa", children: "Typography" }),
-        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "spacing", onClick: () => setActiveTab("spacing"), icon: "\u{1F4CF}", children: "Spacing" }),
-        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "effects", onClick: () => setActiveTab("effects"), icon: "\u2728", children: "Effects" }),
-        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "advanced", onClick: () => setActiveTab("advanced"), icon: "\u2699\uFE0F", children: "Advanced" }),
-        /* @__PURE__ */ jsx21(TabButton, { active: activeTab === "preview", onClick: () => setActiveTab("preview"), icon: "\u{1F441}\uFE0F", children: "Preview" })
+      /* @__PURE__ */ 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__ */ jsxs19("div", { className: "cms-theme-content-advanced", children: [
-        activeTab === "colors" && /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs20("div", { className: "cms-theme-content-advanced", children: [
+        activeTab === "colors" && /* @__PURE__ */ jsx22(
           ColorsTab,
           {
             theme: customTheme,
@@ -7721,31 +8593,31 @@ function ThemeCustomizerContent(props) {
             generateFromBrand
           }
         ),
-        activeTab === "typography" && /* @__PURE__ */ jsx21(TypographyTab, { theme: customTheme, updateTheme, searchQuery }),
-        activeTab === "spacing" && /* @__PURE__ */ jsx21(SpacingTab, { theme: customTheme, updateTheme, searchQuery }),
-        activeTab === "effects" && /* @__PURE__ */ jsx21(EffectsTab, { theme: customTheme, updateTheme, searchQuery }),
-        activeTab === "advanced" && /* @__PURE__ */ jsx21(AdvancedTab, { theme: customTheme, updateTheme }),
-        activeTab === "preview" && /* @__PURE__ */ jsx21(PreviewTab, { theme: customTheme })
+        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__ */ jsxs19("div", { className: "cms-theme-footer-advanced", children: [
-        /* @__PURE__ */ jsx21("button", { onClick: resetTheme, className: "cms-btn-secondary", children: "Reset All" }),
-        /* @__PURE__ */ jsxs19("div", { className: "cms-footer-actions", children: [
-          /* @__PURE__ */ jsx21("button", { onClick: onClose, className: "cms-btn-secondary", children: "Cancel" }),
-          /* @__PURE__ */ jsx21("button", { onClick: applyTheme, className: "cms-btn-primary", children: "Apply Theme" })
+      /* @__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__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "button",
     {
       className: `cms-tab-btn-advanced ${active ? "active" : ""}`,
       onClick,
       children: [
-        /* @__PURE__ */ jsx21("span", { className: "cms-tab-icon", children: icon }),
-        /* @__PURE__ */ jsx21("span", { className: "cms-tab-label", children })
+        /* @__PURE__ */ jsx22("span", { className: "cms-tab-icon", children: icon }),
+        /* @__PURE__ */ jsx22("span", { className: "cms-tab-label", children })
       ]
     }
   );
@@ -7758,7 +8630,7 @@ function ColorsTab({
   setShowColorPicker,
   generateFromBrand
 }) {
-  const [brandColor, setBrandColor] = useState18("#667eea");
+  const [brandColor, setBrandColor] = useState19("#667eea");
   const colorGroups = [
     { title: "Primary", keys: ["primary", "primaryHover", "primaryLight", "primaryDark", "primaryContrast"] },
     { title: "Secondary", keys: ["secondary", "secondaryHover", "secondaryLight", "secondaryDark", "secondaryContrast"] },
@@ -7777,11 +8649,11 @@ function ColorsTab({
       (key) => key.toLowerCase().includes(searchQuery.toLowerCase()) || group.title.toLowerCase().includes(searchQuery.toLowerCase())
     )
   })).filter((group) => group.keys.length > 0);
-  return /* @__PURE__ */ jsxs19("div", { className: "cms-colors-tab", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "cms-brand-generator", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "\u{1F3A8} Generate from Brand Color" }),
-      /* @__PURE__ */ jsxs19("div", { className: "cms-brand-input-group", children: [
-        /* @__PURE__ */ jsx21(
+  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",
@@ -7790,7 +8662,7 @@ function ColorsTab({
             className: "cms-brand-color-picker"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "text",
@@ -7800,7 +8672,7 @@ function ColorsTab({
             placeholder: "#667eea"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           "button",
           {
             onClick: () => generateFromBrand(brandColor),
@@ -7810,9 +8682,9 @@ function ColorsTab({
         )
       ] })
     ] }),
-    filteredGroups.map((group) => /* @__PURE__ */ jsxs19("div", { className: "cms-color-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: group.title }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-color-grid-advanced", children: group.keys.map((key) => /* @__PURE__ */ jsx21(
+    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),
@@ -7840,9 +8712,9 @@ function TypographyTab({ theme, updateTheme, searchQuery }) {
       (key) => key.toLowerCase().includes(searchQuery.toLowerCase()) || group.title.toLowerCase().includes(searchQuery.toLowerCase())
     )
   })).filter((group) => group.keys.length > 0) : typographyGroups;
-  return /* @__PURE__ */ jsx21("div", { className: "cms-typography-tab", children: filteredGroups.map((group) => /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-    /* @__PURE__ */ jsx21("h3", { children: group.title }),
-    /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: group.keys.map((key) => /* @__PURE__ */ jsx21(
+  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),
@@ -7855,13 +8727,13 @@ function TypographyTab({ theme, updateTheme, searchQuery }) {
   ] }, group.title)) });
 }
 function SpacingTab({ theme, updateTheme, searchQuery }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "cms-spacing-tab", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Spacing Scale" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-spacing-visual", children: Object.entries(theme.spacing).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-spacing-item", children: [
-        /* @__PURE__ */ jsx21("div", { className: "cms-spacing-label", children: key.toUpperCase() }),
-        /* @__PURE__ */ jsx21("div", { className: "cms-spacing-bar", style: { width: value }, children: /* @__PURE__ */ jsx21("span", { children: value }) }),
-        /* @__PURE__ */ jsx21(
+  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",
@@ -7872,11 +8744,11 @@ function SpacingTab({ theme, updateTheme, searchQuery }) {
         )
       ] }, key)) })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Border Radius" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-radius-grid", children: Object.entries(theme.borderRadius).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-radius-item", children: [
-        /* @__PURE__ */ jsx21("div", { className: "cms-radius-preview", style: { borderRadius: value } }),
-        /* @__PURE__ */ jsx21(
+    /* @__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(),
@@ -7889,12 +8761,12 @@ function SpacingTab({ theme, updateTheme, searchQuery }) {
   ] });
 }
 function EffectsTab({ theme, updateTheme, searchQuery }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "cms-effects-tab", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Shadows" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-shadow-grid", children: Object.entries(theme.shadows).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-shadow-item", children: [
-        /* @__PURE__ */ jsx21("div", { className: "cms-shadow-preview", style: { boxShadow: value } }),
-        /* @__PURE__ */ jsx21(
+  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(),
@@ -7904,9 +8776,9 @@ function EffectsTab({ theme, updateTheme, searchQuery }) {
         )
       ] }, key)) })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Transitions" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: Object.entries(theme.transitions).map(([key, value]) => /* @__PURE__ */ jsx21(
+    /* @__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),
@@ -7916,11 +8788,11 @@ function EffectsTab({ theme, updateTheme, searchQuery }) {
         key
       )) })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Gradients" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-gradient-grid", children: Object.entries(theme.gradients).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { className: "cms-gradient-item", children: [
-        /* @__PURE__ */ jsx21("div", { className: "cms-gradient-preview", style: { background: value } }),
-        /* @__PURE__ */ jsx21(
+    /* @__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),
@@ -7932,12 +8804,12 @@ function EffectsTab({ theme, updateTheme, searchQuery }) {
     ] })
   ] });
 }
-function AdvancedTab({ theme, updateTheme }) {
+function AdvancedTab2({ theme, updateTheme }) {
   const validation = validateTheme(theme);
-  return /* @__PURE__ */ jsxs19("div", { className: "cms-advanced-tab", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Theme Information" }),
-      /* @__PURE__ */ jsx21(
+  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",
@@ -7945,32 +8817,32 @@ function AdvancedTab({ theme, updateTheme }) {
           onChange: (value) => updateTheme({ name: value })
         }
       ),
-      /* @__PURE__ */ jsxs19("div", { className: "cms-theme-mode", children: [
-        /* @__PURE__ */ jsx21("label", { children: "Mode" }),
-        /* @__PURE__ */ jsxs19(
+      /* @__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__ */ jsx21("option", { value: "light", children: "Light" }),
-              /* @__PURE__ */ jsx21("option", { value: "dark", children: "Dark" })
+              /* @__PURE__ */ jsx22("option", { value: "light", children: "Light" }),
+              /* @__PURE__ */ jsx22("option", { value: "dark", children: "Dark" })
             ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Validation" }),
-      /* @__PURE__ */ jsx21("div", { className: `cms-validation ${validation.valid ? "valid" : "invalid"}`, children: validation.valid ? /* @__PURE__ */ jsx21("div", { className: "cms-validation-success", children: "\u2713 Theme is valid" }) : /* @__PURE__ */ jsxs19("div", { className: "cms-validation-errors", children: [
-        /* @__PURE__ */ jsx21("strong", { children: "Errors:" }),
-        /* @__PURE__ */ jsx21("ul", { children: validation.errors.map((error, i) => /* @__PURE__ */ jsx21("li", { children: error }, i)) })
+    /* @__PURE__ */ 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__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Breakpoints" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: Object.entries(theme.breakpoints).map(([key, value]) => /* @__PURE__ */ jsx21(
+    /* @__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(),
@@ -7980,9 +8852,9 @@ function AdvancedTab({ theme, updateTheme }) {
         key
       )) })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-property-group", children: [
-      /* @__PURE__ */ jsx21("h3", { children: "Z-Index Layers" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-property-grid", children: Object.entries(theme.zIndex).map(([key, value]) => /* @__PURE__ */ jsx21(
+    /* @__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),
@@ -7996,26 +8868,26 @@ function AdvancedTab({ theme, updateTheme }) {
   ] });
 }
 function PreviewTab({ theme }) {
-  return /* @__PURE__ */ jsx21("div", { className: "cms-preview-tab", style: {
+  return /* @__PURE__ */ jsx22("div", { className: "cms-preview-tab", style: {
     background: theme.colors.background,
     color: theme.colors.textPrimary,
     fontFamily: theme.typography.fontFamily
-  }, children: /* @__PURE__ */ jsxs19("div", { className: "cms-preview-section", children: [
-    /* @__PURE__ */ jsx21("h2", { style: { color: theme.colors.textPrimary }, children: "Theme Preview" }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-preview-colors", children: [
-      /* @__PURE__ */ jsx21("div", { className: "cms-preview-color-box", style: { background: theme.colors.primary, color: theme.colors.primaryContrast }, children: "Primary" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-preview-color-box", style: { background: theme.colors.secondary, color: theme.colors.secondaryContrast }, children: "Secondary" }),
-      /* @__PURE__ */ jsx21("div", { className: "cms-preview-color-box", style: { background: theme.colors.accent }, children: "Accent" })
+  }, 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__ */ jsxs19("div", { className: "cms-preview-card", style: {
+    /* @__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__ */ jsx21("h3", { style: { color: theme.colors.textPrimary }, children: "Card Component" }),
-      /* @__PURE__ */ jsx21("p", { style: { color: theme.colors.textSecondary }, children: "This is how your theme looks in a card component with surface background and shadow." }),
-      /* @__PURE__ */ jsx21("button", { style: {
+      /* @__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}`,
@@ -8024,11 +8896,11 @@ function PreviewTab({ theme }) {
         cursor: "pointer"
       }, children: "Primary Button" })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-preview-typography", children: [
-      /* @__PURE__ */ jsx21("h1", { style: { fontSize: theme.typography.fontSize4xl }, children: "Heading 1" }),
-      /* @__PURE__ */ jsx21("h2", { style: { fontSize: theme.typography.fontSize3xl }, children: "Heading 2" }),
-      /* @__PURE__ */ jsx21("h3", { style: { fontSize: theme.typography.fontSizeXxl }, children: "Heading 3" }),
-      /* @__PURE__ */ jsx21("p", { style: { fontSize: theme.typography.fontSizeMd, lineHeight: theme.typography.lineHeightNormal }, children: "Body text with normal line height and medium font size." })
+    /* @__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." })
     ] })
   ] }) });
 }
@@ -8039,10 +8911,10 @@ function AdvancedColorInput({
   showPicker,
   onTogglePicker
 }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "cms-advanced-color-input", children: [
-    /* @__PURE__ */ jsx21("label", { children: label }),
-    /* @__PURE__ */ jsxs19("div", { className: "cms-color-input-wrapper-advanced", children: [
-      /* @__PURE__ */ jsx21(
+  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",
@@ -8050,7 +8922,7 @@ function AdvancedColorInput({
           onClick: onTogglePicker
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         "input",
         {
           type: "text",
@@ -8060,8 +8932,8 @@ function AdvancedColorInput({
           placeholder: "#000000"
         }
       ),
-      showPicker && /* @__PURE__ */ jsxs19("div", { className: "cms-color-picker-popover", children: [
-        /* @__PURE__ */ jsx21(
+      showPicker && /* @__PURE__ */ jsxs20("div", { className: "cms-color-picker-popover", children: [
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "color",
@@ -8070,7 +8942,7 @@ function AdvancedColorInput({
             className: "cms-color-picker-native"
           }
         ),
-        /* @__PURE__ */ jsx21("div", { className: "cms-color-presets", children: ["#667eea", "#764ba2", "#f59e0b", "#10b981", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899"].map((preset) => /* @__PURE__ */ jsx21(
+        /* @__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",
@@ -8089,9 +8961,9 @@ function PropertyInput({
   onChange,
   type = "text"
 }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "cms-property-input", children: [
-    /* @__PURE__ */ jsx21("label", { children: label }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs20("div", { className: "cms-property-input", children: [
+    /* @__PURE__ */ jsx22("label", { children: label }),
+    /* @__PURE__ */ jsx22(
       "input",
       {
         type,
@@ -8110,25 +8982,34 @@ export {
   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,
@@ -8136,6 +9017,7 @@ export {
   lightTheme,
   loadHTMLFromFile,
   loadMarkdownFromFile,
+  mergeMetadata,
   midnightTheme,
   minimalTheme,
   monokaiTheme,
@@ -8146,6 +9028,7 @@ export {
   sunsetTheme,
   themeToCSSVariables,
   useTheme,
+  validateMetadata,
   validateTheme
 };
 //# sourceMappingURL=index.mjs.map