@parathantl/react-email-editor 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -86,7 +86,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/EmailEditor.tsx
-var import_react59 = require("react");
+var import_react61 = require("react");
 
 // src/context/EditorContext.tsx
 var import_react12 = require("react");
@@ -102,7 +102,8 @@ var DEFAULT_TEXT_PROPERTIES = {
   align: "left",
   fontWeight: "normal",
   textTransform: "none",
-  letterSpacing: "normal"
+  letterSpacing: "normal",
+  backgroundColor: "transparent"
 };
 var DEFAULT_BUTTON_PROPERTIES = {
   text: "Click me",
@@ -172,12 +173,13 @@ var DEFAULT_HEADING_PROPERTIES = {
   fontFamily: "Arial, sans-serif",
   fontSize: "28px",
   color: "#000000",
-  lineHeight: "1.3",
+  lineHeight: "1.5",
   fontWeight: "bold",
   padding: "10px 25px",
   align: "left",
   textTransform: "none",
-  letterSpacing: "normal"
+  letterSpacing: "normal",
+  backgroundColor: "transparent"
 };
 var DEFAULT_COUNTDOWN_PROPERTIES = {
   targetDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1e3).toISOString().slice(0, 16),
@@ -303,7 +305,7 @@ var BLOCK_DEFINITIONS = [
   {
     type: "social",
     label: "Social",
-    icon: "\u{1F517}",
+    icon: "\u{1F465}",
     description: "Social media links"
   },
   {
@@ -1208,6 +1210,10 @@ function useImageAdapter() {
   const { imageUploadAdapter } = useConfigContext();
   return { imageUploadAdapter };
 }
+function useColorPresets() {
+  const { customColorPresets, addCustomColorPreset, removeCustomColorPreset } = useConfigContext();
+  return { customColorPresets, addCustomColorPreset, removeCustomColorPreset };
+}
 
 // src/context/EditorContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1222,6 +1228,8 @@ function EditorProvider({
   onVariablesChange,
   fontFamilies: fontFamiliesProp,
   fontSizes: fontSizesProp,
+  colorPresets: colorPresetsProp,
+  onColorPresetsChange,
   persistenceKey,
   persistenceAdapter,
   onBlockAdd,
@@ -1237,6 +1245,24 @@ function EditorProvider({
 }) {
   const fontFamilies = fontFamiliesProp ?? FONT_OPTIONS;
   const fontSizes = fontSizesProp ?? DEFAULT_FONT_SIZES;
+  const [customColorPresets, setCustomColorPresets] = (0, import_react12.useState)(colorPresetsProp ?? []);
+  const onColorPresetsChangeRef = (0, import_react12.useRef)(onColorPresetsChange);
+  onColorPresetsChangeRef.current = onColorPresetsChange;
+  const addCustomColorPreset = (0, import_react12.useCallback)((color) => {
+    setCustomColorPresets((prev) => {
+      if (prev.includes(color)) return prev;
+      const next = [...prev, color];
+      onColorPresetsChangeRef.current?.(next);
+      return next;
+    });
+  }, []);
+  const removeCustomColorPreset = (0, import_react12.useCallback)((color) => {
+    setCustomColorPresets((prev) => {
+      const next = prev.filter((c) => c !== color);
+      onColorPresetsChangeRef.current?.(next);
+      return next;
+    });
+  }, []);
   const resolvedInitial = (0, import_react12.useMemo)(() => {
     if (persistenceKey) {
       const adapter = persistenceAdapter ?? localStorageAdapter;
@@ -1451,9 +1477,12 @@ function EditorProvider({
       updateVariableChipStyle,
       fontFamilies,
       fontSizes,
-      clearPersisted
+      clearPersisted,
+      customColorPresets,
+      addCustomColorPreset,
+      removeCustomColorPreset
     }),
-    [allVariables, predefinedVariables, customVariables, imageUploadAdapter, addCustomVariable, removeCustomVariable, variableChipStyle, updateVariableChipStyle, fontFamilies, fontSizes, clearPersisted]
+    [allVariables, predefinedVariables, customVariables, imageUploadAdapter, addCustomVariable, removeCustomVariable, variableChipStyle, updateVariableChipStyle, fontFamilies, fontSizes, clearPersisted, customColorPresets, addCustomColorPreset, removeCustomColorPreset]
   );
   const blockIndexValue = (0, import_react12.useMemo)(() => state.blockIndex, [state.blockIndex]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MethodsContext.Provider, { value: methodsValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HistoryContext.Provider, { value: historyValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TemplateContext.Provider, { value: templateValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionContext.Provider, { value: selectionValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlockIndexContext.Provider, { value: blockIndexValue, children }) }) }) }) }) }) });
@@ -1775,8 +1804,24 @@ function isSafeURL(url) {
   if (trimmed.startsWith("/") || trimmed.startsWith("#") || trimmed.startsWith("?")) return true;
   return SAFE_URL_PATTERN.test(trimmed);
 }
+function isSafeImageSrc(url) {
+  if (isSafeURL(url)) return true;
+  const trimmed = url.trim();
+  if (/^data:image\/svg/i.test(trimmed)) return false;
+  return /^data:image\//i.test(trimmed);
+}
 
 // src/mjml/generator.ts
+var GOOGLE_FONTS = {
+  "Roboto": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700",
+  "Open Sans": "https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700",
+  "Lato": "https://fonts.googleapis.com/css?family=Lato:300,400,700",
+  "Montserrat": "https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700",
+  "Source Sans Pro": "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700",
+  "Oswald": "https://fonts.googleapis.com/css?family=Oswald:300,400,700",
+  "Raleway": "https://fonts.googleapis.com/css?family=Raleway:300,400,500,700",
+  "Merriweather": "https://fonts.googleapis.com/css?family=Merriweather:300,400,700"
+};
 function generateMJML(template) {
   const { globalStyles, sections } = template;
   const lines = [];
@@ -1789,6 +1834,23 @@ function generateMJML(template) {
   if (headMetadata?.previewText) {
     lines.push(`    <mj-preview>${escapeHTML(headMetadata.previewText)}</mj-preview>`);
   }
+  const usedFonts = /* @__PURE__ */ new Set();
+  if (globalStyles.fontFamily) usedFonts.add(globalStyles.fontFamily);
+  for (const section of sections) {
+    for (const column of section.columns) {
+      for (const block of column.blocks) {
+        if (block.properties.fontFamily) {
+          usedFonts.add(block.properties.fontFamily);
+        }
+      }
+    }
+  }
+  for (const font of usedFonts) {
+    const family = font.split(",")[0].trim().replace(/['"]/g, "");
+    if (GOOGLE_FONTS[family]) {
+      lines.push(`    <mj-font name="${escapeAttr(family)}" href="${escapeAttr(GOOGLE_FONTS[family])}" />`);
+    }
+  }
   lines.push("    <mj-attributes>");
   lines.push(`      <mj-all font-family="${escapeAttr(globalStyles.fontFamily)}" />`);
   lines.push("    </mj-attributes>");
@@ -1911,7 +1973,8 @@ function generateTextBlock(block, indent) {
     align: p.align,
     "font-weight": p.fontWeight && p.fontWeight !== "normal" ? p.fontWeight : void 0,
     "text-transform": p.textTransform && p.textTransform !== "none" ? p.textTransform : void 0,
-    "letter-spacing": p.letterSpacing && p.letterSpacing !== "normal" ? p.letterSpacing : void 0
+    "letter-spacing": p.letterSpacing && p.letterSpacing !== "normal" ? p.letterSpacing : void 0,
+    "container-background-color": p.backgroundColor && p.backgroundColor !== "transparent" ? p.backgroundColor : void 0
   });
   const content = resetBlockMargins(stripVariableChips(p.content || ""));
   return `${indent}<mj-text${attrs}>${content}</mj-text>`;
@@ -1938,7 +2001,7 @@ function generateButtonBlock(block, indent) {
 function generateImageBlock(block, indent) {
   const p = block.properties;
   const attrs = buildAttrs({
-    src: safeHref(p.src),
+    src: safeSrc(p.src),
     alt: p.alt,
     href: p.href ? safeHref(p.href) : void 0,
     width: p.width,
@@ -1980,12 +2043,14 @@ function generateSocialBlock(block, indent) {
   const lines = [];
   lines.push(`${indent}<mj-social${attrs}>`);
   for (const element of p.elements) {
+    const hasCustomSrc = !!element.src;
     const elAttrs = buildAttrs({
-      name: element.name,
+      name: hasCustomSrc ? `custom-${element.name}` : element.name,
       href: safeHref(element.href),
-      src: element.src ? safeHref(element.src) : void 0,
-      "background-color": element.backgroundColor,
-      color: element.color
+      src: hasCustomSrc ? safeSrc(element.src) : void 0,
+      "background-color": element.backgroundColor || (hasCustomSrc ? "transparent" : void 0),
+      color: element.color,
+      "css-class": hasCustomSrc ? `ee-social-${element.name}` : void 0
     });
     const content = element.content ? escapeHTML(element.content) : "";
     lines.push(`${indent}  <mj-social-element${elAttrs}>${content}</mj-social-element>`);
@@ -2003,7 +2068,7 @@ function generateVideoBlock(block, indent) {
   const p = block.properties;
   const thumbnailUrl = p.thumbnailUrl || getAutoThumbnail(p.src);
   const attrs = buildAttrs({
-    src: safeHref(thumbnailUrl),
+    src: safeSrc(thumbnailUrl),
     href: safeHref(p.src),
     alt: p.alt,
     padding: p.padding,
@@ -2031,6 +2096,7 @@ function generateHeadingBlock(block, indent) {
     "font-weight": p.fontWeight && p.fontWeight !== "normal" ? p.fontWeight : void 0,
     "text-transform": p.textTransform && p.textTransform !== "none" ? p.textTransform : void 0,
     "letter-spacing": p.letterSpacing && p.letterSpacing !== "normal" ? p.letterSpacing : void 0,
+    "container-background-color": p.backgroundColor && p.backgroundColor !== "transparent" ? p.backgroundColor : void 0,
     "css-class": `ee-block-heading ee-heading-${level}`
   });
   const content = resetBlockMargins(stripVariableChips(p.content || ""));
@@ -2115,10 +2181,17 @@ function generateHeroBlock(block, indent) {
   return `${indent}<mj-text${attrs}>${html2}</mj-text>`;
 }
 function stripVariableChips(html2) {
-  return html2.replace(
-    /<span[^>]*data-variable-key="([^"]*)"[^>]*>[\s\S]*?<\/span>/g,
-    (_match, key) => `{{ ${key} }}`
-  );
+  if (!html2.includes("ee-variable-chip")) return html2;
+  const div = document.createElement("div");
+  div.innerHTML = html2;
+  const chips = div.querySelectorAll(".ee-variable-chip");
+  chips.forEach((chip) => {
+    const key = chip.getAttribute("data-variable-key");
+    if (key) {
+      chip.replaceWith(`{{ ${key} }}`);
+    }
+  });
+  return div.innerHTML;
 }
 function resetBlockMargins(html2) {
   return html2.replace(
@@ -2145,6 +2218,10 @@ function safeHref(url) {
   if (!url) return "#";
   return isSafeURL(url) ? url : "#";
 }
+function safeSrc(url) {
+  if (!url) return "#";
+  return isSafeImageSrc(url) ? url : "#";
+}
 
 // src/mjml/compiler.ts
 var mjmlBrowser = null;
@@ -2264,7 +2341,7 @@ var MJML_DEFAULTS = {
     fontFamily: "Ubuntu, Helvetica, Arial, sans-serif",
     fontSize: "13px",
     color: "#000000",
-    lineHeight: "1",
+    lineHeight: "1.5",
     padding: "10px 25px",
     align: "left",
     fontWeight: "normal",
@@ -2650,6 +2727,16 @@ function parseBlockElements(parent) {
     const parser = blockParserRegistry[tagName];
     if (parser) {
       blocks.push(parser(child));
+    } else {
+      const serializer = new XMLSerializer();
+      blocks.push({
+        id: generateBlockId(),
+        type: "html",
+        properties: {
+          content: serializer.serializeToString(child),
+          padding: child.getAttribute("padding") ?? DEFAULT_BLOCK_PROPERTIES.html.padding
+        }
+      });
     }
   }
   return blocks;
@@ -2666,6 +2753,11 @@ function parseTextBlock(el) {
     return parseHtmlFromMjText(el);
   }
   const innerHTML = el.innerHTML?.trim() ?? "";
+  const headingMatch = innerHTML.match(/^<(h[1-4])\b[^>]*>([\s\S]*)<\/\1>\s*$/i);
+  if (headingMatch) {
+    const syntheticCssClass = `ee-block-heading ee-heading-${headingMatch[1].toLowerCase()}`;
+    return parseHeadingFromMjText(el, syntheticCssClass);
+  }
   const d = MJML_DEFAULTS.text;
   return {
     id: generateBlockId(),
@@ -2680,7 +2772,8 @@ function parseTextBlock(el) {
       align: el.getAttribute("align") ?? d.align,
       fontWeight: el.getAttribute("font-weight") ?? d.fontWeight,
       textTransform: el.getAttribute("text-transform") ?? d.textTransform,
-      letterSpacing: el.getAttribute("letter-spacing") ?? d.letterSpacing
+      letterSpacing: el.getAttribute("letter-spacing") ?? d.letterSpacing,
+      backgroundColor: el.getAttribute("container-background-color") ?? "transparent"
     }
   };
 }
@@ -2706,7 +2799,8 @@ function parseHeadingFromMjText(el, cssClass) {
       padding: resolvePadding(el, defaults2.padding),
       align: el.getAttribute("align") ?? d.align,
       textTransform: el.getAttribute("text-transform") ?? defaults2.textTransform,
-      letterSpacing: el.getAttribute("letter-spacing") ?? defaults2.letterSpacing
+      letterSpacing: el.getAttribute("letter-spacing") ?? defaults2.letterSpacing,
+      backgroundColor: el.getAttribute("container-background-color") ?? "transparent"
     }
   };
 }
@@ -2847,8 +2941,16 @@ function parseSocialBlock(el) {
   const childEls = el.querySelectorAll("mj-social-element");
   for (let i = 0; i < childEls.length; i++) {
     const child = childEls[i];
+    let name = child.getAttribute("name") ?? "";
+    if (name.startsWith("custom-")) {
+      name = name.slice(7);
+    } else if (!name) {
+      const cssClass = child.getAttribute("css-class") ?? "";
+      const nameMatch = cssClass.match(/ee-social-(\w+)/);
+      name = nameMatch ? nameMatch[1] : "web";
+    }
     const element = {
-      name: child.getAttribute("name") ?? "web",
+      name,
       href: child.getAttribute("href") ?? "#"
     };
     const src = child.getAttribute("src");
@@ -2924,19 +3026,24 @@ var toolbar_default = {
   "exportDropdown": "exportDropdown",
   "exportDropdownItem": "exportDropdownItem",
   "richTextToolbar": "richTextToolbar",
+  "richTextGroup": "richTextGroup",
   "richTextBtn": "richTextBtn",
   "richTextBtnActive": "richTextBtnActive",
-  "richTextSeparator": "richTextSeparator",
+  "richTextBtnWithIndicator": "richTextBtnWithIndicator richTextBtn",
   "richTextSelect": "richTextSelect",
   "richTextSelectSmall": "richTextSelectSmall richTextSelect",
   "richTextColorWrapper": "richTextColorWrapper",
-  "richTextColorLabel": "richTextColorLabel",
   "richTextColorIndicator": "richTextColorIndicator",
   "richTextColorDropdown": "richTextColorDropdown",
+  "richTextColorSectionLabel": "richTextColorSectionLabel",
   "richTextColorGrid": "richTextColorGrid",
   "richTextColorSwatch": "richTextColorSwatch",
-  "richTextColorActions": "richTextColorActions",
-  "richTextColorInput": "richTextColorInput",
+  "richTextColorSwatchActive": "richTextColorSwatchActive",
+  "richTextColorSwatchRemove": "richTextColorSwatchRemove",
+  "richTextColorCustomRow": "richTextColorCustomRow",
+  "richTextColorHexInput": "richTextColorHexInput",
+  "richTextColorApplyBtn": "richTextColorApplyBtn",
+  "richTextColorBottomActions": "richTextColorBottomActions",
   "richTextColorClearBtn": "richTextColorClearBtn",
   "richTextLinkDropdown": "richTextLinkDropdown",
   "richTextLinkLabel": "richTextLinkLabel",
@@ -2944,7 +3051,10 @@ var toolbar_default = {
   "richTextLinkError": "richTextLinkError",
   "richTextLinkActions": "richTextLinkActions",
   "richTextLinkApply": "richTextLinkApply",
-  "richTextLinkRemove": "richTextLinkRemove"
+  "richTextLinkRemove": "richTextLinkRemove",
+  "richTextTooltipWrapper": "richTextTooltipWrapper",
+  "richTextTooltip": "richTextTooltip",
+  "richTextTooltipShortcut": "richTextTooltipShortcut"
 };
 
 // src/styles/editor.module.css
@@ -3520,19 +3630,19 @@ function Sidebar({ blockDefinitions }) {
 }
 
 // src/components/Canvas/Canvas.tsx
-var import_react42 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 
 // src/components/Canvas/Section.tsx
-var import_react40 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/components/Canvas/Column.tsx
-var import_react39 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 
 // src/components/Canvas/BlockRenderer.tsx
-var import_react37 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // src/components/Canvas/blocks/TextBlock.tsx
-var import_react24 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 
 // src/tiptap/TipTapEditor.tsx
 var import_react21 = require("react");
@@ -24411,6 +24521,84 @@ var FontFamily = Extension.create({
   }
 });
 
+// src/tiptap/Indent.ts
+var INDENT_STEP = 24;
+var MAX_INDENT = 240;
+function applyIndent(editor) {
+  const { state, view } = editor;
+  const { tr: tr2 } = state;
+  const { from: from2, to } = state.selection;
+  let changed = false;
+  state.doc.nodesBetween(from2, to, (node, pos) => {
+    if (node.type.name === "paragraph" || node.type.name === "heading") {
+      const current = node.attrs.indent || 0;
+      if (current < MAX_INDENT) {
+        tr2.setNodeMarkup(pos, void 0, { ...node.attrs, indent: current + INDENT_STEP });
+        changed = true;
+      }
+    }
+  });
+  if (changed) view.dispatch(tr2);
+  return changed;
+}
+function applyOutdent(editor) {
+  const { state, view } = editor;
+  const { tr: tr2 } = state;
+  const { from: from2, to } = state.selection;
+  let changed = false;
+  state.doc.nodesBetween(from2, to, (node, pos) => {
+    if (node.type.name === "paragraph" || node.type.name === "heading") {
+      const current = node.attrs.indent || 0;
+      if (current > 0) {
+        tr2.setNodeMarkup(pos, void 0, { ...node.attrs, indent: Math.max(0, current - INDENT_STEP) });
+        changed = true;
+      }
+    }
+  });
+  if (changed) view.dispatch(tr2);
+  return changed;
+}
+var Indent = Extension.create({
+  name: "indent",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["paragraph", "heading"],
+        attributes: {
+          indent: {
+            default: 0,
+            parseHTML: (element) => parseInt(element.style.marginLeft, 10) || 0,
+            renderHTML: (attributes) => {
+              if (!attributes.indent) return {};
+              return { style: `margin-left: ${attributes.indent}px` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        if (editor.isActive("listItem")) {
+          editor.commands.sinkListItem("listItem");
+          return true;
+        }
+        applyIndent(editor);
+        return true;
+      },
+      "Shift-Tab": ({ editor }) => {
+        if (editor.isActive("listItem")) {
+          editor.commands.liftListItem("listItem");
+          return true;
+        }
+        applyOutdent(editor);
+        return true;
+      }
+    };
+  }
+});
+
 // src/tiptap/extensions.ts
 function getExtensions(placeholder) {
   return [
@@ -24426,9 +24614,23 @@ function getExtensions(placeholder) {
     Color,
     FontSize,
     FontFamily,
-    Highlight.configure({
-      multicolor: true
-    }),
+    Highlight.extend({
+      renderHTML({ HTMLAttributes }) {
+        return ["span", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+      },
+      parseHTML() {
+        return [
+          { tag: "mark" },
+          {
+            tag: "span[style]",
+            getAttrs: (el) => {
+              if (!el.style.backgroundColor) return false;
+              return {};
+            }
+          }
+        ];
+      }
+    }).configure({ multicolor: true }),
     Link.configure({
       openOnClick: false,
       HTMLAttributes: {
@@ -24439,6 +24641,7 @@ function getExtensions(placeholder) {
     Placeholder.configure({
       placeholder: placeholder ?? "Type something..."
     }),
+    Indent,
     VariableNode
   ];
 }
@@ -24455,6 +24658,7 @@ var ALLOWED_TAGS2 = /* @__PURE__ */ new Set([
   "s",
   "a",
   "span",
+  "mark",
   "h1",
   "h2",
   "h3",
@@ -24658,222 +24862,573 @@ function TipTapEditor({
 }
 
 // src/components/Toolbar/RichTextToolbar.tsx
+var import_react25 = require("react");
+
+// src/components/shared/HslColorArea.tsx
 var import_react23 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function preventBlur(e) {
-  const target = e.target;
-  const tag = target.tagName.toLowerCase();
-  if (tag === "select" || tag === "option" || tag === "input" && target.type === "color") {
-    return;
-  }
-  e.preventDefault();
+
+// src/utils/colorConvert.ts
+function hexToHsl(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return { h: 0, s: 0, l: 0 };
+  const r = parseInt(result[1], 16) / 255;
+  const g = parseInt(result[2], 16) / 255;
+  const b = parseInt(result[3], 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hslToHex(h, s, l) {
+  const sN = s / 100;
+  const lN = l / 100;
+  const a = sN * Math.min(lN, 1 - lN);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = lN - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
 }
-function RichTextToolbar({ editor }) {
-  if (!editor) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-toolbar ${toolbar_default.richTextToolbar}`, onMouseDown: preventBlur, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FontFamilySelect, { editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FontSizeSelect, { editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-bold ${toolbar_default.richTextBtn} ${editor.isActive("bold") ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().toggleBold().run(),
-        title: "Bold (Ctrl+B)",
-        "aria-label": "Bold (Ctrl+B)",
-        "aria-pressed": editor.isActive("bold"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "B" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-italic ${toolbar_default.richTextBtn} ${editor.isActive("italic") ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().toggleItalic().run(),
-        title: "Italic (Ctrl+I)",
-        "aria-label": "Italic (Ctrl+I)",
-        "aria-pressed": editor.isActive("italic"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("em", { children: "I" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-underline ${toolbar_default.richTextBtn} ${editor.isActive("underline") ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().toggleUnderline().run(),
-        title: "Underline (Ctrl+U)",
-        "aria-label": "Underline (Ctrl+U)",
-        "aria-pressed": editor.isActive("underline"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("u", { children: "U" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-strike ${toolbar_default.richTextBtn} ${editor.isActive("strike") ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().toggleStrike().run(),
-        title: "Strikethrough (Ctrl+Shift+X)",
-        "aria-label": "Strikethrough (Ctrl+Shift+X)",
-        "aria-pressed": editor.isActive("strike"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("s", { children: "S" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      InlineColorPicker,
-      {
-        editor,
-        type: "color",
-        title: "Text Color",
-        label: "A"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      InlineColorPicker,
-      {
-        editor,
-        type: "highlight",
-        title: "Highlight",
-        label: "H"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-align-left ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "left" }) ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().setTextAlign("left").run(),
-        title: "Align Left",
-        "aria-label": "Align Left",
-        "aria-pressed": editor.isActive({ textAlign: "left" }),
-        children: "L"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-align-center ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "center" }) ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().setTextAlign("center").run(),
-        title: "Align Center",
-        "aria-label": "Align Center",
-        "aria-pressed": editor.isActive({ textAlign: "center" }),
-        children: "C"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-align-right ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "right" }) ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().setTextAlign("right").run(),
-        title: "Align Right",
-        "aria-label": "Align Right",
-        "aria-pressed": editor.isActive({ textAlign: "right" }),
-        children: "R"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        className: `ee-richtext-btn ee-richtext-bullet-list ${toolbar_default.richTextBtn} ${editor.isActive("bulletList") ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().toggleBulletList().run(),
-        title: "Bullet List",
-        "aria-label": "Bullet List",
-        "aria-pressed": editor.isActive("bulletList"),
-        children: "\u2022"
-      }
-    ),
+
+// src/styles/colorArea.module.css
+var colorArea_default = {
+  "hslPicker": "hslPicker",
+  "hslArea": "hslArea",
+  "hslAreaThumb": "hslAreaThumb",
+  "hslHueBar": "hslHueBar",
+  "hslHueThumb": "hslHueThumb"
+};
+
+// src/components/shared/HslColorArea.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function HslColorArea({ value, onChange, onChangeEnd }) {
+  const [hsl, setHsl] = (0, import_react23.useState)(() => hexToHsl(value));
+  const areaRef = (0, import_react23.useRef)(null);
+  const hueRef = (0, import_react23.useRef)(null);
+  const draggingArea = (0, import_react23.useRef)(false);
+  const draggingHue = (0, import_react23.useRef)(false);
+  const latestHex = (0, import_react23.useRef)(value);
+  (0, import_react23.useEffect)(() => {
+    const parsed = hexToHsl(value);
+    setHsl(parsed);
+  }, [value]);
+  const emitColor = (0, import_react23.useCallback)(
+    (h, s, l) => {
+      setHsl({ h, s, l });
+      const hex = hslToHex(h, s, l);
+      latestHex.current = hex;
+      onChange(hex);
+    },
+    [onChange]
+  );
+  const handleAreaPointer = (0, import_react23.useCallback)(
+    (e) => {
+      const rect = areaRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+      const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+      const s = Math.round(x / rect.width * 100);
+      const l = Math.round(100 - y / rect.height * 100);
+      emitColor(hsl.h, s, l);
+    },
+    [hsl.h, emitColor]
+  );
+  const onAreaPointerDown = (0, import_react23.useCallback)(
+    (e) => {
+      e.preventDefault();
+      draggingArea.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      handleAreaPointer(e);
+    },
+    [handleAreaPointer]
+  );
+  const onAreaPointerMove = (0, import_react23.useCallback)(
+    (e) => {
+      if (!draggingArea.current) return;
+      handleAreaPointer(e);
+    },
+    [handleAreaPointer]
+  );
+  const onAreaPointerUp = (0, import_react23.useCallback)(() => {
+    draggingArea.current = false;
+    onChangeEnd?.(latestHex.current);
+  }, [onChangeEnd]);
+  const handleHuePointer = (0, import_react23.useCallback)(
+    (e) => {
+      const rect = hueRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+      const h = Math.round(x / rect.width * 360);
+      emitColor(h, hsl.s, hsl.l);
+    },
+    [hsl.s, hsl.l, emitColor]
+  );
+  const onHuePointerDown = (0, import_react23.useCallback)(
+    (e) => {
+      e.preventDefault();
+      draggingHue.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      handleHuePointer(e);
+    },
+    [handleHuePointer]
+  );
+  const onHuePointerMove = (0, import_react23.useCallback)(
+    (e) => {
+      if (!draggingHue.current) return;
+      handleHuePointer(e);
+    },
+    [handleHuePointer]
+  );
+  const onHuePointerUp = (0, import_react23.useCallback)(() => {
+    draggingHue.current = false;
+    onChangeEnd?.(latestHex.current);
+  }, [onChangeEnd]);
+  const areaBackground = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsl.h}, 100%, 50%))`;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: colorArea_default.hslPicker, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
+      "div",
       {
-        className: `ee-richtext-btn ee-richtext-ordered-list ${toolbar_default.richTextBtn} ${editor.isActive("orderedList") ? toolbar_default.richTextBtnActive : ""}`,
-        onClick: () => editor.chain().focus().toggleOrderedList().run(),
-        title: "Ordered List",
-        "aria-label": "Ordered List",
-        "aria-pressed": editor.isActive("orderedList"),
-        children: "1."
+        ref: areaRef,
+        className: colorArea_default.hslArea,
+        style: { background: areaBackground },
+        onPointerDown: onAreaPointerDown,
+        onPointerMove: onAreaPointerMove,
+        onPointerUp: onAreaPointerUp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: colorArea_default.hslAreaThumb,
+            style: {
+              left: `${hsl.s}%`,
+              top: `${100 - hsl.l}%`,
+              backgroundColor: value
+            }
+          }
+        )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InlineLinkEditor, { editor }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
+      "div",
       {
-        className: `ee-richtext-btn ee-richtext-clear ${toolbar_default.richTextBtn}`,
-        onClick: () => editor.chain().focus().unsetAllMarks().run(),
-        title: "Clear Formatting",
-        "aria-label": "Clear Formatting",
-        children: "\u2716"
+        ref: hueRef,
+        className: colorArea_default.hslHueBar,
+        onPointerDown: onHuePointerDown,
+        onPointerMove: onHuePointerMove,
+        onPointerUp: onHuePointerUp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: colorArea_default.hslHueThumb,
+            style: {
+              left: `${hsl.h / 360 * 100}%`,
+              backgroundColor: `hsl(${hsl.h}, 100%, 50%)`
+            }
+          }
+        )
       }
     )
   ] });
 }
-function FontFamilySelect({ editor }) {
-  const { fontFamilies } = useEditorFonts();
-  const currentFont = editor.getAttributes("textStyle").fontFamily || "";
-  const fonts = fontFamilies.slice();
-  if (currentFont && !fonts.some((f) => f.toLowerCase() === currentFont.toLowerCase())) {
-    fonts.push(currentFont);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "select",
+
+// src/components/Toolbar/toolbar-icons.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BoldIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+] });
+var ItalicIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
+] });
+var UnderlineIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "4", y1: "21", x2: "20", y2: "21" })
+] });
+var StrikethroughIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M16 4H9a3 3 0 0 0-3 3c0 2 1.5 3 3 3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M12 15c1.5 0 3 1 3 3a3 3 0 0 1-3 3H8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
+] });
+var AlignLeftIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "17", y1: "10", x2: "3", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "17", y1: "18", x2: "3", y2: "18" })
+] });
+var AlignCenterIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "18", y1: "10", x2: "6", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "18", y1: "18", x2: "6", y2: "18" })
+] });
+var AlignRightIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "10", x2: "7", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "18", x2: "7", y2: "18" })
+] });
+var BulletListIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "6", r: "1", fill: color }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "12", r: "1", fill: color }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "18", r: "1", fill: color })
+] });
+var OrderedListIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "10", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "10", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "10", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: "2", y: "8", fontSize: "8", fill: color, stroke: "none", fontFamily: "sans-serif", fontWeight: "bold", children: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: "2", y: "14", fontSize: "8", fill: color, stroke: "none", fontFamily: "sans-serif", fontWeight: "bold", children: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: "2", y: "20", fontSize: "8", fill: color, stroke: "none", fontFamily: "sans-serif", fontWeight: "bold", children: "3" })
+] });
+var IndentIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "10", x2: "11", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "18", x2: "11", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "3 8 7 10 3 12" })
+] });
+var OutdentIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "10", x2: "11", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "18", x2: "11", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "7 8 3 10 7 12" })
+] });
+var TextColorIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M5 18h14", stroke: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M9 3L5 15h2l1-3h8l1 3h2L15 3H9z", fill: "none", stroke: color, strokeWidth: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M9.5 10l2.5-6 2.5 6h-5z", fill: "none" })
+] });
+var HighlightIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M12 20h9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+] });
+var LinkIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+var ClearFormattingIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6 4h12l-6 16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "2", y1: "2", x2: "22", y2: "22" })
+] });
+var AlignJustifyIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "10", x2: "3", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "21", y1: "18", x2: "3", y2: "18" })
+] });
+var HorizontalRuleIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }) });
+
+// src/components/Toolbar/Tooltip.tsx
+var import_react24 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Tooltip({ label, shortcut, children }) {
+  const [visible, setVisible] = (0, import_react24.useState)(false);
+  const timerRef = (0, import_react24.useRef)(null);
+  const show = (0, import_react24.useCallback)(() => {
+    timerRef.current = setTimeout(() => setVisible(true), 400);
+  }, []);
+  const hide = (0, import_react24.useCallback)(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+    setVisible(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "span",
     {
-      className: `ee-richtext-font-select ${toolbar_default.richTextSelect}`,
-      value: currentFont,
-      onChange: (e) => {
-        const value = e.target.value;
-        if (value) {
-          editor.chain().focus().setFontFamily(value).run();
-        } else {
-          editor.chain().focus().unsetFontFamily().run();
-        }
-      },
-      title: "Font Family",
+      className: toolbar_default.richTextTooltipWrapper,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Default" }),
-        fonts.map((font) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
+        children,
+        visible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: toolbar_default.richTextTooltip, role: "tooltip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: label }),
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { className: toolbar_default.richTextTooltipShortcut, children: shortcut })
+        ] })
       ]
     }
   );
 }
-function FontSizeSelect({ editor }) {
-  const { fontSizes } = useEditorFonts();
-  const currentSize = editor.getAttributes("textStyle").fontSize || "";
-  const sizes = fontSizes.slice();
-  if (currentSize && !sizes.includes(currentSize)) {
-    sizes.push(currentSize);
-    sizes.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
+
+// src/components/Toolbar/RichTextToolbar.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function preventBlur(e) {
+  const target = e.target;
+  const tag = target.tagName.toLowerCase();
+  if (tag === "select" || tag === "option" || tag === "input") {
+    return;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "select",
-    {
-      className: `ee-richtext-size-select ${toolbar_default.richTextSelectSmall}`,
-      value: currentSize,
-      onChange: (e) => {
-        const value = e.target.value;
-        if (value) {
-          editor.chain().focus().setFontSize(value).run();
-        } else {
-          editor.chain().focus().unsetFontSize().run();
-        }
-      },
-      title: "Font Size",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Size" }),
-        sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: size, children: parseInt(size, 10) }, size))
-      ]
-    }
-  );
+  e.preventDefault();
 }
-function InlineLinkEditor({ editor }) {
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
-  const [url, setUrl] = (0, import_react23.useState)("");
-  const wrapperRef = (0, import_react23.useRef)(null);
-  const inputRef = (0, import_react23.useRef)(null);
+function RichTextToolbar({ editor }) {
+  if (!editor) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-toolbar ${toolbar_default.richTextToolbar}`, onMouseDown: preventBlur, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FontFamilySelect, { editor }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FontSizeSelect, { editor })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Bold", shortcut: "Ctrl+B", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-bold ${toolbar_default.richTextBtn} ${editor.isActive("bold") ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().toggleBold().run(),
+          "aria-label": "Bold",
+          "aria-pressed": editor.isActive("bold"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BoldIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Italic", shortcut: "Ctrl+I", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-italic ${toolbar_default.richTextBtn} ${editor.isActive("italic") ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().toggleItalic().run(),
+          "aria-label": "Italic",
+          "aria-pressed": editor.isActive("italic"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItalicIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Underline", shortcut: "Ctrl+U", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-underline ${toolbar_default.richTextBtn} ${editor.isActive("underline") ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().toggleUnderline().run(),
+          "aria-label": "Underline",
+          "aria-pressed": editor.isActive("underline"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(UnderlineIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Strikethrough", shortcut: "Ctrl+Shift+X", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-strike ${toolbar_default.richTextBtn} ${editor.isActive("strike") ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().toggleStrike().run(),
+          "aria-label": "Strikethrough",
+          "aria-pressed": editor.isActive("strike"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StrikethroughIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        InlineColorPicker,
+        {
+          editor,
+          type: "color",
+          title: "Text Color",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TextColorIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        InlineColorPicker,
+        {
+          editor,
+          type: "highlight",
+          title: "Highlight",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HighlightIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Align Left", shortcut: "Ctrl+Shift+L", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-align-left ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "left" }) ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().setTextAlign("left").run(),
+          "aria-label": "Align Left",
+          "aria-pressed": editor.isActive({ textAlign: "left" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlignLeftIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Align Center", shortcut: "Ctrl+Shift+E", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-align-center ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "center" }) ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().setTextAlign("center").run(),
+          "aria-label": "Align Center",
+          "aria-pressed": editor.isActive({ textAlign: "center" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlignCenterIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Align Right", shortcut: "Ctrl+Shift+R", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-align-right ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "right" }) ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().setTextAlign("right").run(),
+          "aria-label": "Align Right",
+          "aria-pressed": editor.isActive({ textAlign: "right" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlignRightIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Justify", shortcut: "Ctrl+Shift+J", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-align-justify ${toolbar_default.richTextBtn} ${editor.isActive({ textAlign: "justify" }) ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+          "aria-label": "Justify",
+          "aria-pressed": editor.isActive({ textAlign: "justify" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlignJustifyIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Bullet List", shortcut: "Ctrl+Shift+8", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-bullet-list ${toolbar_default.richTextBtn} ${editor.isActive("bulletList") ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          "aria-label": "Bullet List",
+          "aria-pressed": editor.isActive("bulletList"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BulletListIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Ordered List", shortcut: "Ctrl+Shift+7", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-ordered-list ${toolbar_default.richTextBtn} ${editor.isActive("orderedList") ? toolbar_default.richTextBtnActive : ""}`,
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+          "aria-label": "Ordered List",
+          "aria-pressed": editor.isActive("orderedList"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OrderedListIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Outdent", shortcut: "Shift+Tab", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-outdent ${toolbar_default.richTextBtn}`,
+          onClick: () => {
+            if (editor.isActive("listItem")) {
+              editor.chain().focus().liftListItem("listItem").run();
+            } else {
+              editor.commands.focus();
+              applyOutdent(editor);
+            }
+          },
+          "aria-label": "Outdent",
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OutdentIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Indent", shortcut: "Tab", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-indent ${toolbar_default.richTextBtn}`,
+          onClick: () => {
+            if (editor.isActive("listItem")) {
+              editor.chain().focus().sinkListItem("listItem").run();
+            } else {
+              editor.commands.focus();
+              applyIndent(editor);
+            }
+          },
+          "aria-label": "Indent",
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IndentIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InlineLinkEditor, { editor }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Horizontal Rule", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-hr ${toolbar_default.richTextBtn}`,
+          onClick: () => editor.chain().focus().setHorizontalRule().run(),
+          "aria-label": "Horizontal Rule",
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HorizontalRuleIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Clear Formatting", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-clear ${toolbar_default.richTextBtn}`,
+          onClick: () => editor.chain().focus().unsetAllMarks().run(),
+          "aria-label": "Clear Formatting",
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClearFormattingIcon, {})
+        }
+      ) })
+    ] })
+  ] });
+}
+function FontFamilySelect({ editor }) {
+  const { fontFamilies } = useEditorFonts();
+  const currentFont = editor.getAttributes("textStyle").fontFamily || "";
+  const fonts = fontFamilies.slice();
+  if (currentFont && !fonts.some((f) => f.toLowerCase() === currentFont.toLowerCase())) {
+    fonts.push(currentFont);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "select",
+    {
+      className: `ee-richtext-font-select ${toolbar_default.richTextSelect}`,
+      value: currentFont,
+      onChange: (e) => {
+        const value = e.target.value;
+        if (value) {
+          editor.chain().focus().setFontFamily(value).run();
+        } else {
+          editor.chain().focus().unsetFontFamily().run();
+        }
+      },
+      title: "Font Family",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Default" }),
+        fonts.map((font) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
+      ]
+    }
+  );
+}
+function FontSizeSelect({ editor }) {
+  const { fontSizes } = useEditorFonts();
+  const currentSize = editor.getAttributes("textStyle").fontSize || "";
+  const sizes = fontSizes.slice();
+  if (currentSize && !sizes.includes(currentSize)) {
+    sizes.push(currentSize);
+    sizes.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "select",
+    {
+      className: `ee-richtext-size-select ${toolbar_default.richTextSelectSmall}`,
+      value: currentSize,
+      onChange: (e) => {
+        const value = e.target.value;
+        if (value) {
+          editor.chain().focus().setFontSize(value).run();
+        } else {
+          editor.chain().focus().unsetFontSize().run();
+        }
+      },
+      title: "Font Size",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Size" }),
+        sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: size, children: parseInt(size, 10) }, size))
+      ]
+    }
+  );
+}
+function InlineLinkEditor({ editor }) {
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [url, setUrl] = (0, import_react25.useState)("");
+  const wrapperRef = (0, import_react25.useRef)(null);
+  const inputRef = (0, import_react25.useRef)(null);
   const isActive2 = editor.isActive("link");
   const currentHref = editor.getAttributes("link").href || "";
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     function handleClickOutside(e) {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -24884,14 +25439,14 @@ function InlineLinkEditor({ editor }) {
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  const handleOpen = (0, import_react23.useCallback)(() => {
+  const handleOpen = (0, import_react25.useCallback)(() => {
     setUrl(currentHref);
     setUrlError("");
     setIsOpen(true);
     setTimeout(() => inputRef.current?.focus(), 50);
   }, [currentHref]);
-  const [urlError, setUrlError] = (0, import_react23.useState)("");
-  const handleApply = (0, import_react23.useCallback)(() => {
+  const [urlError, setUrlError] = (0, import_react25.useState)("");
+  const handleApply = (0, import_react25.useCallback)(() => {
     const trimmed = url.trim();
     if (trimmed) {
       if (!isSafeURL(trimmed)) {
@@ -24903,12 +25458,12 @@ function InlineLinkEditor({ editor }) {
     }
     setIsOpen(false);
   }, [editor, url]);
-  const handleRemove = (0, import_react23.useCallback)(() => {
+  const handleRemove = (0, import_react25.useCallback)(() => {
     editor.chain().focus().unsetLink().run();
     setIsOpen(false);
     setUrl("");
   }, [editor]);
-  const handleKeyDown2 = (0, import_react23.useCallback)(
+  const handleKeyDown2 = (0, import_react25.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -24919,8 +25474,8 @@ function InlineLinkEditor({ editor }) {
     },
     [handleApply]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-link ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-link ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         className: `ee-richtext-btn ee-richtext-link-btn ${toolbar_default.richTextBtn} ${isActive2 ? toolbar_default.richTextBtnActive : ""}`,
@@ -24928,12 +25483,12 @@ function InlineLinkEditor({ editor }) {
         title: "Link",
         "aria-label": "Link",
         "aria-pressed": isActive2,
-        children: "\u{1F517}"
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LinkIcon, {})
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-link-dropdown ${toolbar_default.richTextLinkDropdown}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: `ee-richtext-link-label ${toolbar_default.richTextLinkLabel}`, children: "URL" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-link-dropdown ${toolbar_default.richTextLinkDropdown}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: `ee-richtext-link-label ${toolbar_default.richTextLinkLabel}`, children: "URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           ref: inputRef,
@@ -24944,19 +25499,26 @@ function InlineLinkEditor({ editor }) {
           placeholder: "https://, mailto:, or tel:"
         }
       ),
-      urlError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-link-error ${toolbar_default.richTextLinkError}`, children: urlError }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-link-actions ${toolbar_default.richTextLinkActions}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: `ee-richtext-link-apply ${toolbar_default.richTextLinkApply}`, onClick: handleApply, children: "Apply" }),
-        isActive2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: `ee-richtext-link-remove ${toolbar_default.richTextLinkRemove}`, onClick: handleRemove, children: "Remove" })
+      urlError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `ee-richtext-link-error ${toolbar_default.richTextLinkError}`, children: urlError }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-link-actions ${toolbar_default.richTextLinkActions}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: `ee-richtext-link-apply ${toolbar_default.richTextLinkApply}`, onClick: handleApply, children: "Apply" }),
+        isActive2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: `ee-richtext-link-remove ${toolbar_default.richTextLinkRemove}`, onClick: handleRemove, children: "Remove" })
       ] })
     ] })
   ] });
 }
-function InlineColorPicker({ editor, type, title, label }) {
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
-  const wrapperRef = (0, import_react23.useRef)(null);
+function InlineColorPicker({ editor, type, title, icon }) {
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [hexInput, setHexInput] = (0, import_react25.useState)("");
+  const wrapperRef = (0, import_react25.useRef)(null);
+  const { customColorPresets, addCustomColorPreset, removeCustomColorPreset } = useColorPresets();
   const currentColor = type === "color" ? editor.getAttributes("textStyle").color || "#000000" : editor.getAttributes("highlight").color || "";
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
+    if (isOpen) {
+      setHexInput(currentColor || "#000000");
+    }
+  }, [isOpen, currentColor]);
+  (0, import_react25.useEffect)(() => {
     function handleClickOutside(e) {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -24967,18 +25529,19 @@ function InlineColorPicker({ editor, type, title, label }) {
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  const applyColor = (0, import_react23.useCallback)(
-    (color) => {
+  const applyColor = (0, import_react25.useCallback)(
+    (color, close2 = false) => {
       if (type === "color") {
         editor.chain().focus().setColor(color).run();
       } else {
         editor.chain().focus().toggleHighlight({ color }).run();
       }
-      setIsOpen(false);
+      setHexInput(color);
+      if (close2) setIsOpen(false);
     },
     [editor, type]
   );
-  const clearColor = (0, import_react23.useCallback)(() => {
+  const clearColor = (0, import_react25.useCallback)(() => {
     if (type === "color") {
       editor.chain().focus().unsetColor().run();
     } else {
@@ -24986,19 +25549,41 @@ function InlineColorPicker({ editor, type, title, label }) {
     }
     setIsOpen(false);
   }, [editor, type]);
+  const handleHexApply = (0, import_react25.useCallback)(() => {
+    const trimmed = hexInput.trim();
+    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed)) {
+      applyColor(trimmed, true);
+    }
+  }, [hexInput, applyColor]);
+  const handleHexKeyDown = (0, import_react25.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleHexApply();
+      }
+    },
+    [handleHexApply]
+  );
+  const handleSaveCustom = (0, import_react25.useCallback)(() => {
+    const trimmed = hexInput.trim();
+    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed) && !customColorPresets.includes(trimmed)) {
+      addCustomColorPreset(trimmed);
+    }
+  }, [hexInput, customColorPresets, addCustomColorPreset]);
+  const isValidHex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hexInput.trim());
   const indicatorColor = type === "color" ? currentColor : currentColor || "transparent";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-color ee-richtext-color--${type} ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-color ee-richtext-color--${type} ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
-        className: `ee-richtext-btn ee-richtext-color-btn ${toolbar_default.richTextBtn}`,
+        className: `ee-richtext-btn ee-richtext-color-btn ${toolbar_default.richTextBtnWithIndicator}`,
         onClick: () => setIsOpen(!isOpen),
         title,
         "aria-label": title,
         "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `ee-richtext-color-label ${toolbar_default.richTextColorLabel}`, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          icon,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "span",
             {
               className: `ee-richtext-color-indicator ${toolbar_default.richTextColorIndicator}`,
@@ -25008,29 +25593,91 @@ function InlineColorPicker({ editor, type, title, label }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-color-dropdown ${toolbar_default.richTextColorDropdown}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `ee-richtext-color-grid ${toolbar_default.richTextColorGrid}`, children: COLOR_PRESETS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-color-dropdown ${toolbar_default.richTextColorDropdown}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `ee-richtext-color-section-label ${toolbar_default.richTextColorSectionLabel}`, children: "Presets" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `ee-richtext-color-grid ${toolbar_default.richTextColorGrid}`, children: COLOR_PRESETS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
-          className: `ee-richtext-color-swatch ${toolbar_default.richTextColorSwatch}`,
+          className: `ee-richtext-color-swatch ${toolbar_default.richTextColorSwatch} ${currentColor.toLowerCase() === color.toLowerCase() ? toolbar_default.richTextColorSwatchActive : ""}`,
           style: { backgroundColor: color },
-          onClick: () => applyColor(color),
+          onClick: () => applyColor(color, true),
           title: color
         },
         color
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `ee-richtext-color-actions ${toolbar_default.richTextColorActions}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      customColorPresets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `ee-richtext-color-section-label ${toolbar_default.richTextColorSectionLabel}`, children: "Custom" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `ee-richtext-color-grid ${toolbar_default.richTextColorGrid}`, children: customColorPresets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: `ee-richtext-color-swatch ${toolbar_default.richTextColorSwatch} ${currentColor.toLowerCase() === color.toLowerCase() ? toolbar_default.richTextColorSwatchActive : ""}`,
+            style: { backgroundColor: color },
+            onClick: () => applyColor(color, true),
+            title: color,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "span",
+              {
+                className: `ee-richtext-color-swatch-remove ${toolbar_default.richTextColorSwatchRemove}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeCustomColorPreset(color);
+                },
+                title: "Remove",
+                children: "\xD7"
+              }
+            )
+          },
+          `custom-${color}`
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { borderTop: "1px solid var(--ee-border-color)", paddingTop: "var(--ee-space-sm)" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        HslColorArea,
+        {
+          value: isValidHex ? hexInput.trim() : currentColor || "#000000",
+          onChange: (hex) => {
+            setHexInput(hex);
+          },
+          onChangeEnd: (hex) => {
+            applyColor(hex);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-color-custom-row ${toolbar_default.richTextColorCustomRow}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
-            type: "color",
-            value: currentColor || "#000000",
-            onChange: (e) => applyColor(e.target.value),
-            className: `ee-richtext-color-input ${toolbar_default.richTextColorInput}`,
-            title: "Custom color"
+            className: `ee-richtext-color-hex-input ${toolbar_default.richTextColorHexInput}`,
+            value: hexInput,
+            onChange: (e) => setHexInput(e.target.value),
+            onKeyDown: handleHexKeyDown,
+            placeholder: "#000000",
+            maxLength: 7,
+            spellCheck: false
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: `ee-richtext-color-apply ${toolbar_default.richTextColorApplyBtn}`,
+            onClick: handleHexApply,
+            disabled: !isValidHex,
+            title: "Apply color",
+            children: "Apply"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-color-bottom ${toolbar_default.richTextColorBottomActions}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: `ee-richtext-color-save ${toolbar_default.richTextColorClearBtn}`,
+            onClick: handleSaveCustom,
+            title: "Save this color to your custom presets",
+            disabled: !isValidHex || customColorPresets.includes(hexInput.trim()),
+            children: "+ Save preset"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             className: `ee-richtext-color-clear ${toolbar_default.richTextColorClearBtn}`,
@@ -25072,6 +25719,8 @@ var blocks_default = {
   "socialLabel": "socialLabel",
   "socialElementsContainer": "socialElementsContainer",
   "socialElementItem": "socialElementItem",
+  "socialIconImage": "socialIconImage",
+  "socialIconPreview": "socialIconPreview",
   "htmlBlock": "htmlBlock",
   "htmlPlaceholder": "htmlPlaceholder",
   "videoBlock": "videoBlock",
@@ -25105,17 +25754,17 @@ var tiptap_default = {
 };
 
 // src/components/Canvas/blocks/TextBlock.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var TextBlockInner = function TextBlock({ block }) {
   const dispatch = useEditorDispatch();
   const { setActiveEditor } = useMethodsContext();
-  const editorRef = (0, import_react24.useRef)(null);
-  const wrapperRef = (0, import_react24.useRef)(null);
-  const blurTimerRef = (0, import_react24.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react24.useState)(false);
-  const [editorInstance, setEditorInstance] = (0, import_react24.useState)(null);
-  const [, forceToolbarUpdate] = (0, import_react24.useReducer)((c) => c + 1, 0);
-  (0, import_react24.useEffect)(() => {
+  const editorRef = (0, import_react26.useRef)(null);
+  const wrapperRef = (0, import_react26.useRef)(null);
+  const blurTimerRef = (0, import_react26.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react26.useState)(false);
+  const [editorInstance, setEditorInstance] = (0, import_react26.useState)(null);
+  const [, forceToolbarUpdate] = (0, import_react26.useReducer)((c) => c + 1, 0);
+  (0, import_react26.useEffect)(() => {
     if (!editorInstance) return;
     const onStateChange = () => forceToolbarUpdate();
     editorInstance.on("selectionUpdate", onStateChange);
@@ -25125,7 +25774,7 @@ var TextBlockInner = function TextBlock({ block }) {
       editorInstance.off("transaction", onStateChange);
     };
   }, [editorInstance]);
-  const handleUpdate = (0, import_react24.useCallback)(
+  const handleUpdate = (0, import_react26.useCallback)(
     (html2) => {
       dispatch({
         type: "UPDATE_BLOCK",
@@ -25134,16 +25783,16 @@ var TextBlockInner = function TextBlock({ block }) {
     },
     [dispatch, block.id]
   );
-  const handleFocus = (0, import_react24.useCallback)(() => {
+  const handleFocus = (0, import_react26.useCallback)(() => {
     setActiveEditor(editorRef.current);
     setIsFocused(true);
   }, [setActiveEditor]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     return () => {
       if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     };
   }, []);
-  const handleBlur = (0, import_react24.useCallback)(() => {
+  const handleBlur = (0, import_react26.useCallback)(() => {
     if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     blurTimerRef.current = setTimeout(() => {
       blurTimerRef.current = null;
@@ -25157,12 +25806,12 @@ var TextBlockInner = function TextBlock({ block }) {
       }
     }, 200);
   }, [setActiveEditor]);
-  const handleEditorRef = (0, import_react24.useCallback)((editor) => {
+  const handleEditorRef = (0, import_react26.useCallback)((editor) => {
     editorRef.current = editor;
     setEditorInstance(editor);
   }, []);
   const p = block.properties;
-  const wrapperStyle = (0, import_react24.useMemo)(() => ({
+  const wrapperStyle = (0, import_react26.useMemo)(() => ({
     fontFamily: p.fontFamily,
     fontSize: p.fontSize,
     color: p.color,
@@ -25170,11 +25819,12 @@ var TextBlockInner = function TextBlock({ block }) {
     padding: p.padding,
     fontWeight: p.fontWeight,
     textTransform: p.textTransform,
-    letterSpacing: p.letterSpacing
-  }), [p.fontFamily, p.fontSize, p.color, p.lineHeight, p.padding, p.fontWeight, p.textTransform, p.letterSpacing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `ee-block-text ${blocks_default.textBlock}`, ref: wrapperRef, children: [
-    isFocused && editorInstance && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RichTextToolbar, { editor: editorInstance }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    letterSpacing: p.letterSpacing,
+    backgroundColor: p.backgroundColor && p.backgroundColor !== "transparent" ? p.backgroundColor : void 0
+  }), [p.fontFamily, p.fontSize, p.color, p.lineHeight, p.padding, p.fontWeight, p.textTransform, p.letterSpacing, p.backgroundColor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `ee-block-text ${blocks_default.textBlock}`, ref: wrapperRef, children: [
+    isFocused && editorInstance && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RichTextToolbar, { editor: editorInstance }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TipTapEditor,
       {
         content: block.properties.content,
@@ -25188,16 +25838,16 @@ var TextBlockInner = function TextBlock({ block }) {
     ) })
   ] });
 };
-var TextBlock2 = import_react24.default.memo(TextBlockInner);
+var TextBlock2 = import_react26.default.memo(TextBlockInner);
 
 // src/components/Canvas/blocks/ButtonBlock.tsx
-var import_react25 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ButtonBlock = import_react25.default.memo(function ButtonBlock2({ block }) {
+var import_react27 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ButtonBlock = import_react27.default.memo(function ButtonBlock2({ block }) {
   const p = block.properties;
   const alignClass = p.align === "left" ? blocks_default.buttonBlockLeft : p.align === "right" ? blocks_default.buttonBlockRight : blocks_default.buttonBlockCenter;
-  const outerStyle = (0, import_react25.useMemo)(() => ({ padding: p.padding }), [p.padding]);
-  const buttonStyle = (0, import_react25.useMemo)(() => ({
+  const outerStyle = (0, import_react27.useMemo)(() => ({ padding: p.padding }), [p.padding]);
+  const buttonStyle = (0, import_react27.useMemo)(() => ({
     backgroundColor: p.backgroundColor,
     color: p.color,
     fontFamily: p.fontFamily,
@@ -25209,7 +25859,7 @@ var ButtonBlock = import_react25.default.memo(function ButtonBlock2({ block }) {
     textTransform: p.textTransform,
     letterSpacing: p.letterSpacing
   }), [p.backgroundColor, p.color, p.fontFamily, p.fontSize, p.borderRadius, p.innerPadding, p.width, p.fontWeight, p.textTransform, p.letterSpacing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `ee-block-button ${blocks_default.buttonBlock} ${alignClass}`, style: outerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `ee-block-button ${blocks_default.buttonBlock} ${alignClass}`, style: outerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "span",
     {
       className: blocks_default.buttonPreview,
@@ -25220,21 +25870,21 @@ var ButtonBlock = import_react25.default.memo(function ButtonBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/ImageBlock.tsx
-var import_react27 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/components/ImageUpload/useImageUpload.ts
-var import_react26 = require("react");
+var import_react28 = require("react");
 function useImageUpload({
   adapter,
   blockId,
   onSuccess,
   onError
 }) {
-  const [status, setStatus] = (0, import_react26.useState)("idle");
-  const [progress, setProgress] = (0, import_react26.useState)(0);
-  const [error, setError] = (0, import_react26.useState)(null);
-  const controllerRef = (0, import_react26.useRef)(null);
-  const upload = (0, import_react26.useCallback)(
+  const [status, setStatus] = (0, import_react28.useState)("idle");
+  const [progress, setProgress] = (0, import_react28.useState)(0);
+  const [error, setError] = (0, import_react28.useState)(null);
+  const controllerRef = (0, import_react28.useRef)(null);
+  const upload = (0, import_react28.useCallback)(
     async (file) => {
       if (!adapter) {
         setError("No upload adapter configured");
@@ -25279,12 +25929,12 @@ function useImageUpload({
     },
     [adapter, blockId, onSuccess, onError]
   );
-  const cancel = (0, import_react26.useCallback)(() => {
+  const cancel = (0, import_react28.useCallback)(() => {
     controllerRef.current?.abort();
     setStatus("idle");
     setProgress(0);
   }, []);
-  const browse = (0, import_react26.useCallback)(async () => {
+  const browse = (0, import_react28.useCallback)(async () => {
     if (!adapter?.browse) return null;
     try {
       const result = await adapter.browse();
@@ -25296,7 +25946,7 @@ function useImageUpload({
       return null;
     }
   }, [adapter, onSuccess]);
-  const reset2 = (0, import_react26.useCallback)(() => {
+  const reset2 = (0, import_react28.useCallback)(() => {
     setStatus("idle");
     setProgress(0);
     setError(null);
@@ -25305,11 +25955,11 @@ function useImageUpload({
 }
 
 // src/components/Canvas/blocks/ImageBlock.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ImageBlockInner = function ImageBlock({ block }) {
   const dispatch = useEditorDispatch();
   const { imageUploadAdapter } = useConfigContext();
-  const fileInputRef = (0, import_react27.useRef)(null);
+  const fileInputRef = (0, import_react29.useRef)(null);
   const p = block.properties;
   const { upload, status } = useImageUpload({
     adapter: imageUploadAdapter,
@@ -25329,7 +25979,7 @@ var ImageBlockInner = function ImageBlock({ block }) {
     }
   });
   const alignClass = p.align === "left" ? blocks_default.imageBlockLeft : p.align === "right" ? blocks_default.imageBlockRight : blocks_default.imageBlockCenter;
-  const handleFileSelect = (0, import_react27.useCallback)(
+  const handleFileSelect = (0, import_react29.useCallback)(
     async (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -25337,11 +25987,11 @@ var ImageBlockInner = function ImageBlock({ block }) {
     },
     [upload]
   );
-  const handlePlaceholderClick = (0, import_react27.useCallback)(() => {
+  const handlePlaceholderClick = (0, import_react29.useCallback)(() => {
     fileInputRef.current?.click();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-block-image ${blocks_default.imageBlock} ${alignClass}`, style: { padding: p.padding }, children: [
-    p.src ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `ee-block-image ${blocks_default.imageBlock} ${alignClass}`, style: { padding: p.padding }, children: [
+    p.src ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "img",
       {
         src: p.src,
@@ -25352,11 +26002,11 @@ var ImageBlockInner = function ImageBlock({ block }) {
           height: p.height !== "auto" ? p.height : void 0
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: blocks_default.imagePlaceholder, onClick: handlePlaceholderClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: blocks_default.imagePlaceholderIcon, children: "+" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: status === "uploading" ? "Uploading..." : "Click to upload image" })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: blocks_default.imagePlaceholder, onClick: handlePlaceholderClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: blocks_default.imagePlaceholderIcon, children: "+" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: status === "uploading" ? "Uploading..." : "Click to upload image" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -25368,19 +26018,19 @@ var ImageBlockInner = function ImageBlock({ block }) {
     )
   ] });
 };
-var ImageBlock2 = import_react27.default.memo(ImageBlockInner);
+var ImageBlock2 = import_react29.default.memo(ImageBlockInner);
 
 // src/components/Canvas/blocks/DividerBlock.tsx
-var import_react28 = __toESM(require("react"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var DividerBlock = import_react28.default.memo(function DividerBlock2({ block }) {
+var import_react30 = __toESM(require("react"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DividerBlock = import_react30.default.memo(function DividerBlock2({ block }) {
   const p = block.properties;
-  const outerStyle = (0, import_react28.useMemo)(() => ({ padding: p.padding }), [p.padding]);
-  const hrStyle = (0, import_react28.useMemo)(() => ({
+  const outerStyle = (0, import_react30.useMemo)(() => ({ padding: p.padding }), [p.padding]);
+  const hrStyle = (0, import_react30.useMemo)(() => ({
     width: p.width,
     borderTop: `${p.borderWidth} ${p.borderStyle} ${p.borderColor}`
   }), [p.width, p.borderWidth, p.borderStyle, p.borderColor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `ee-block-divider ${blocks_default.dividerBlock}`, style: outerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `ee-block-divider ${blocks_default.dividerBlock}`, style: outerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "hr",
     {
       className: blocks_default.dividerLine,
@@ -25390,16 +26040,46 @@ var DividerBlock = import_react28.default.memo(function DividerBlock2({ block })
 });
 
 // src/components/Canvas/blocks/SpacerBlock.tsx
-var import_react29 = __toESM(require("react"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var SpacerBlock = import_react29.default.memo(function SpacerBlock2({ block }) {
+var import_react31 = __toESM(require("react"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SpacerBlock = import_react31.default.memo(function SpacerBlock2({ block }) {
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `ee-block-spacer ${blocks_default.spacerBlock}`, style: { height: p.height }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: blocks_default.spacerLabel, children: p.height }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `ee-block-spacer ${blocks_default.spacerBlock}`, style: { height: p.height }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: blocks_default.spacerLabel, children: p.height }) });
 });
 
 // src/components/Canvas/blocks/SocialBlock.tsx
-var import_react30 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react32 = __toESM(require("react"));
+
+// src/components/Canvas/blocks/social-icons.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Facebook = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396v8.01Z" }) });
+var Twitter = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M13.808 10.469 20.88 2h-1.676l-6.142 7.353L8.158 2H2.5l7.418 11.12L2.5 22h1.676l6.486-7.765L15.842 22H21.5l-7.693-11.531Zm-2.296 2.748-.752-1.107L4.78 3.3h2.575l4.826 7.11.751 1.107 6.273 9.242h-2.574l-5.12-7.541Z" }) });
+var Instagram = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6Zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z" }) });
+var LinkedIn = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6.94 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM7 8.48H3V21h4V8.48Zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68Z" }) });
+var YouTube = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z" }) });
+var GitHub = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10Z" }) });
+var Pinterest = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 2C6.477 2 2 6.477 2 12c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.598-.299-1.482c0-1.388.806-2.425 1.808-2.425.853 0 1.265.64 1.265 1.408 0 .858-.546 2.14-.828 3.33-.236.995.499 1.806 1.48 1.806 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.134-4.515 4.34 0 .859.331 1.781.745 2.282a.3.3 0 0 1 .069.288l-.278 1.133c-.044.183-.145.222-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.472 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.527-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S17.523 2 12 2Z" }) });
+var Snapchat = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12.166 3c1.672 0 3.036.676 3.95 1.956.662.925.826 1.862.826 2.607 0 .478-.045.913-.098 1.3l-.018.122c.106.048.238.076.387.076.27 0 .496-.1.677-.186a.78.78 0 0 1 .335-.08c.132 0 .352.037.521.201.212.207.233.48.233.588 0 .403-.332.694-.988.866-.094.024-.206.048-.328.074-.338.072-.802.17-.927.441-.074.162-.035.369.115.617l.017.027c.039.063 3.786 6.185-1.135 7.318-.047.01-.08.056-.07.1.059.268.322.41.548.534.11.06.213.117.292.179.303.237.35.488.321.655-.04.224-.236.44-.598.514a3.15 3.15 0 0 1-.638.067c-.258 0-.539-.034-.879-.088a5.106 5.106 0 0 0-.85-.073 3.474 3.474 0 0 0-.534.043c-.254.04-.544.143-.877.261-.535.19-1.199.427-2.089.427-.034 0-.069 0-.107-.002h-.037c-.89 0-1.551-.237-2.087-.427a4.36 4.36 0 0 0-.877-.261 3.494 3.494 0 0 0-.534-.043c-.321 0-.6.03-.85.073-.339.054-.62.088-.879.088a3.15 3.15 0 0 1-.638-.067c-.362-.074-.558-.29-.598-.514-.028-.167.018-.418.321-.655.079-.062.182-.118.292-.18.226-.123.49-.265.548-.533a.086.086 0 0 0-.07-.1c-3.07-.706-1.79-4.432-1.235-5.637l.003-.007c.06-.126.14-.293.169-.363.005-.012.012-.028.017-.04.133-.265.172-.46.115-.597-.125-.271-.59-.37-.928-.441a3.72 3.72 0 0 1-.327-.074c-.709-.186-.99-.496-.99-.866 0-.363.302-.638.594-.714a.808.808 0 0 1 .217-.026c.114 0 .23.028.336.08.24.11.481.186.676.186.149 0 .28-.028.386-.076a10.78 10.78 0 0 1-.116-1.422c0-.745.164-1.682.826-2.607C9.13 3.676 10.494 3 12.166 3Z" }) });
+var TikTok = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M16.6 5.82A4.278 4.278 0 0 1 15.54 3h-3.09v12.4a2.592 2.592 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6 0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64 0 3.33 2.76 5.7 5.69 5.7 3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.86-1.48h-.02Z" }) });
+var Web = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm6.918 6h-3.215a15.876 15.876 0 0 0-1.403-3.846A8.028 8.028 0 0 1 18.918 8ZM12 4.04c.793 1.02 1.44 2.18 1.89 3.46h-3.78c.45-1.28 1.097-2.44 1.89-3.46ZM4.26 14a7.93 7.93 0 0 1 0-4h3.38a16.516 16.516 0 0 0 0 4H4.26Zm.822 2h3.215a15.876 15.876 0 0 0 1.403 3.846A8.028 8.028 0 0 1 5.082 16ZM8.297 8H5.082A8.028 8.028 0 0 1 9.7 4.154 15.876 15.876 0 0 0 8.297 8ZM12 19.96c-.793-1.02-1.44-2.18-1.89-3.46h3.78c-.45 1.28-1.097 2.44-1.89 3.46ZM14.34 14H9.66a14.556 14.556 0 0 1 0-4h4.68a14.556 14.556 0 0 1 0 4Zm.36 5.846A15.876 15.876 0 0 0 16.103 16h3.215a8.029 8.029 0 0 1-4.618 3.846ZM16.36 14a16.516 16.516 0 0 0 0-4h3.38a7.93 7.93 0 0 1 0 4h-3.38Z" }) });
+var SOCIAL_ICONS = {
+  facebook: Facebook,
+  twitter: Twitter,
+  instagram: Instagram,
+  linkedin: LinkedIn,
+  youtube: YouTube,
+  github: GitHub,
+  pinterest: Pinterest,
+  snapchat: Snapchat,
+  tiktok: TikTok,
+  web: Web
+};
+function getSocialIcon(name) {
+  return SOCIAL_ICONS[name.toLowerCase()];
+}
+
+// src/components/Canvas/blocks/SocialBlock.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var PLATFORM_COLORS = {
   facebook: "#3b5998",
   twitter: "#1da1f2",
@@ -25412,39 +26092,75 @@ var PLATFORM_COLORS = {
   tiktok: "#000000",
   web: "#4caf50"
 };
-var SocialBlock = import_react30.default.memo(function SocialBlock2({ block }) {
+function SocialIconImage({ src, name, iconSizeNum, iconColor, SvgIcon }) {
+  const [errored, setErrored] = import_react32.default.useState(false);
+  if (errored) {
+    if (SvgIcon) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SvgIcon, { size: Math.round(iconSizeNum * 0.6), color: iconColor });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { color: iconColor, fontSize: Math.max(10, iconSizeNum * 0.5), fontWeight: "bold" }, children: name.charAt(0).toUpperCase() });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "img",
+    {
+      src,
+      alt: name,
+      className: blocks_default.socialIconImage,
+      width: iconSizeNum,
+      height: iconSizeNum,
+      onError: () => setErrored(true)
+    }
+  );
+}
+var SocialBlock = import_react32.default.memo(function SocialBlock2({ block }) {
   const p = block.properties;
   const isVertical = p.mode === "vertical";
   const alignStyle = p.align === "left" ? "flex-start" : p.align === "right" ? "flex-end" : "center";
   const iconSizeNum = parseInt(p.iconSize, 10) || 20;
-  const wrapperStyle = (0, import_react30.useMemo)(() => ({
+  const wrapperStyle = (0, import_react32.useMemo)(() => ({
     padding: p.padding,
     justifyContent: alignStyle,
     flexDirection: isVertical ? "column" : "row",
     alignItems: isVertical ? alignStyle : "center"
   }), [p.padding, alignStyle, isVertical]);
-  const elementPaddingStyle = (0, import_react30.useMemo)(() => ({
+  const elementPaddingStyle = (0, import_react32.useMemo)(() => ({
     padding: p.iconPadding
   }), [p.iconPadding]);
-  const labelStyle = (0, import_react30.useMemo)(() => ({
+  const labelStyle = (0, import_react32.useMemo)(() => ({
     fontSize: p.fontSize,
     color: p.color
   }), [p.fontSize, p.color]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: `ee-block-social ${blocks_default.socialBlock}`,
       style: wrapperStyle,
       children: p.elements.map((element) => {
         const bgColor = element.backgroundColor || PLATFORM_COLORS[element.name] || "#999999";
-        const initial = element.name.charAt(0).toUpperCase();
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        const iconColor = element.color || "#ffffff";
+        const SvgIcon = getSocialIcon(element.name);
+        let iconContent;
+        if (element.src) {
+          iconContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            SocialIconImage,
+            {
+              src: element.src,
+              name: element.name,
+              iconSizeNum,
+              iconColor,
+              SvgIcon
+            }
+          );
+        } else if (SvgIcon) {
+          iconContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SvgIcon, { size: Math.round(iconSizeNum * 0.6), color: iconColor });
+        } else {
+          iconContent = element.name.charAt(0).toUpperCase();
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             className: blocks_default.socialElement,
             style: elementPaddingStyle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   className: blocks_default.socialIcon,
@@ -25453,13 +26169,13 @@ var SocialBlock = import_react30.default.memo(function SocialBlock2({ block }) {
                     height: iconSizeNum,
                     backgroundColor: bgColor,
                     borderRadius: p.borderRadius,
-                    color: element.color || "#ffffff",
+                    color: iconColor,
                     fontSize: Math.max(10, iconSizeNum * 0.5)
                   },
-                  children: initial
+                  children: iconContent
                 }
               ),
-              element.content && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              element.content && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   className: blocks_default.socialLabel,
@@ -25477,7 +26193,7 @@ var SocialBlock = import_react30.default.memo(function SocialBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/HtmlBlock.tsx
-var import_react31 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // node_modules/dompurify/dist/purify.es.mjs
 var {
@@ -26499,10 +27215,10 @@ function createDOMPurify() {
 var purify = createDOMPurify();
 
 // src/components/Canvas/blocks/HtmlBlock.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var HtmlBlock = import_react31.default.memo(function HtmlBlock2({ block }) {
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var HtmlBlock = import_react33.default.memo(function HtmlBlock2({ block }) {
   const p = block.properties;
-  const sanitizedContent = (0, import_react31.useMemo)(() => {
+  const sanitizedContent = (0, import_react33.useMemo)(() => {
     if (!p.content) return "";
     return purify.sanitize(p.content, {
       ADD_TAGS: ["table", "thead", "tbody", "tr", "td", "th"],
@@ -26510,12 +27226,12 @@ var HtmlBlock = import_react31.default.memo(function HtmlBlock2({ block }) {
     });
   }, [p.content]);
   if (!p.content) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `ee-block-html ${blocks_default.htmlBlock}`, style: { padding: p.padding }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: blocks_default.htmlPlaceholder, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "</>" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Raw HTML Block" })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `ee-block-html ${blocks_default.htmlBlock}`, style: { padding: p.padding }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: blocks_default.htmlPlaceholder, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "</>" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Raw HTML Block" })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       className: `ee-block-html ${blocks_default.htmlBlock}`,
@@ -26526,24 +27242,24 @@ var HtmlBlock = import_react31.default.memo(function HtmlBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/VideoBlock.tsx
-var import_react32 = __toESM(require("react"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var VideoBlock = import_react32.default.memo(function VideoBlock2({ block }) {
+var import_react34 = __toESM(require("react"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var VideoBlock = import_react34.default.memo(function VideoBlock2({ block }) {
   const p = block.properties;
   const alignClass = p.align === "left" ? blocks_default.videoBlockLeft : p.align === "right" ? blocks_default.videoBlockRight : blocks_default.videoBlockCenter;
   const thumbnailUrl = p.thumbnailUrl || getAutoThumbnail2(p.src);
   if (!thumbnailUrl && !p.src) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: blocks_default.videoPlaceholder, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Video Block" })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: blocks_default.videoPlaceholder, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Video Block" })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: blocks_default.videoPreview, children: [
-    thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: thumbnailUrl, alt: p.alt, style: { maxWidth: "100%", display: "block" } }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: blocks_default.videoPlaceholder, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "No thumbnail" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: blocks_default.videoPreview, children: [
+    thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: thumbnailUrl, alt: p.alt, style: { maxWidth: "100%", display: "block" } }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: blocks_default.videoPlaceholder, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "No thumbnail" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: blocks_default.playOverlay, children: "\u25B6" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: blocks_default.playOverlay, children: "\u25B6" })
   ] }) });
 });
 function getAutoThumbnail2(url) {
@@ -26554,8 +27270,8 @@ function getAutoThumbnail2(url) {
 }
 
 // src/components/Canvas/blocks/HeadingBlock.tsx
-var import_react33 = __toESM(require("react"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react35 = __toESM(require("react"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var HEADING_FONT_SIZES = {
   h1: "36px",
   h2: "28px",
@@ -26565,13 +27281,13 @@ var HEADING_FONT_SIZES = {
 var HeadingBlockInner = function HeadingBlock({ block }) {
   const dispatch = useEditorDispatch();
   const { setActiveEditor } = useMethodsContext();
-  const editorRef = (0, import_react33.useRef)(null);
-  const wrapperRef = (0, import_react33.useRef)(null);
-  const blurTimerRef = (0, import_react33.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react33.useState)(false);
-  const [editorInstance, setEditorInstance] = (0, import_react33.useState)(null);
-  const [, forceToolbarUpdate] = (0, import_react33.useReducer)((c) => c + 1, 0);
-  (0, import_react33.useEffect)(() => {
+  const editorRef = (0, import_react35.useRef)(null);
+  const wrapperRef = (0, import_react35.useRef)(null);
+  const blurTimerRef = (0, import_react35.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react35.useState)(false);
+  const [editorInstance, setEditorInstance] = (0, import_react35.useState)(null);
+  const [, forceToolbarUpdate] = (0, import_react35.useReducer)((c) => c + 1, 0);
+  (0, import_react35.useEffect)(() => {
     if (!editorInstance) return;
     const onStateChange = () => forceToolbarUpdate();
     editorInstance.on("selectionUpdate", onStateChange);
@@ -26581,7 +27297,7 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
       editorInstance.off("transaction", onStateChange);
     };
   }, [editorInstance]);
-  const handleUpdate = (0, import_react33.useCallback)(
+  const handleUpdate = (0, import_react35.useCallback)(
     (html2) => {
       dispatch({
         type: "UPDATE_BLOCK",
@@ -26590,16 +27306,16 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
     },
     [dispatch, block.id]
   );
-  const handleFocus = (0, import_react33.useCallback)(() => {
+  const handleFocus = (0, import_react35.useCallback)(() => {
     setActiveEditor(editorRef.current);
     setIsFocused(true);
   }, [setActiveEditor]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     return () => {
       if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     };
   }, []);
-  const handleBlur = (0, import_react33.useCallback)(() => {
+  const handleBlur = (0, import_react35.useCallback)(() => {
     if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     blurTimerRef.current = setTimeout(() => {
       blurTimerRef.current = null;
@@ -26613,13 +27329,13 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
       }
     }, 200);
   }, [setActiveEditor]);
-  const handleEditorRef = (0, import_react33.useCallback)((editor) => {
+  const handleEditorRef = (0, import_react35.useCallback)((editor) => {
     editorRef.current = editor;
     setEditorInstance(editor);
   }, []);
   const p = block.properties;
   const fontSize = p.fontSize || HEADING_FONT_SIZES[p.level] || "28px";
-  const wrapperStyle = (0, import_react33.useMemo)(() => ({
+  const wrapperStyle = (0, import_react35.useMemo)(() => ({
     fontFamily: p.fontFamily,
     fontSize,
     color: p.color,
@@ -26627,11 +27343,12 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
     padding: p.padding,
     fontWeight: p.fontWeight,
     textTransform: p.textTransform,
-    letterSpacing: p.letterSpacing
-  }), [p.fontFamily, fontSize, p.color, p.lineHeight, p.padding, p.fontWeight, p.textTransform, p.letterSpacing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `ee-block-heading ${blocks_default.headingBlock}`, ref: wrapperRef, children: [
-    isFocused && editorInstance && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RichTextToolbar, { editor: editorInstance }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    letterSpacing: p.letterSpacing,
+    backgroundColor: p.backgroundColor && p.backgroundColor !== "transparent" ? p.backgroundColor : void 0
+  }), [p.fontFamily, fontSize, p.color, p.lineHeight, p.padding, p.fontWeight, p.textTransform, p.letterSpacing, p.backgroundColor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `ee-block-heading ${blocks_default.headingBlock}`, ref: wrapperRef, children: [
+    isFocused && editorInstance && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RichTextToolbar, { editor: editorInstance }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TipTapEditor,
       {
         content: p.content,
@@ -26645,11 +27362,11 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
     ) })
   ] });
 };
-var HeadingBlock2 = import_react33.default.memo(HeadingBlockInner);
+var HeadingBlock2 = import_react35.default.memo(HeadingBlockInner);
 
 // src/components/Canvas/blocks/CountdownBlock.tsx
-var import_react34 = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react36 = __toESM(require("react"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function getTimeRemaining(targetDate) {
   const total = Math.max(0, new Date(targetDate).getTime() - Date.now());
   return {
@@ -26659,10 +27376,10 @@ function getTimeRemaining(targetDate) {
     seconds: Math.floor(total / 1e3 % 60)
   };
 }
-var CountdownBlock = import_react34.default.memo(function CountdownBlock2({ block }) {
+var CountdownBlock = import_react36.default.memo(function CountdownBlock2({ block }) {
   const p = block.properties;
-  const [time, setTime] = (0, import_react34.useState)(() => getTimeRemaining(p.targetDate));
-  (0, import_react34.useEffect)(() => {
+  const [time, setTime] = (0, import_react36.useState)(() => getTimeRemaining(p.targetDate));
+  (0, import_react36.useEffect)(() => {
     setTime(getTimeRemaining(p.targetDate));
     const interval = setInterval(() => {
       setTime(getTimeRemaining(p.targetDate));
@@ -26676,29 +27393,29 @@ var CountdownBlock = import_react34.default.memo(function CountdownBlock2({ bloc
     { value: time.seconds, label: "Seconds" }
   ];
   const alignStyle = p.align === "left" ? "flex-start" : p.align === "right" ? "flex-end" : "center";
-  const wrapperStyle = (0, import_react34.useMemo)(() => ({
+  const wrapperStyle = (0, import_react36.useMemo)(() => ({
     padding: p.padding,
     justifyContent: alignStyle
   }), [p.padding, alignStyle]);
-  const labelStyle = (0, import_react34.useMemo)(() => ({
+  const labelStyle = (0, import_react36.useMemo)(() => ({
     color: p.labelColor,
     textAlign: p.align
   }), [p.labelColor, p.align]);
-  const digitsContainerStyle = (0, import_react34.useMemo)(() => ({
+  const digitsContainerStyle = (0, import_react36.useMemo)(() => ({
     justifyContent: alignStyle
   }), [alignStyle]);
-  const digitBoxStyle = (0, import_react34.useMemo)(() => ({
+  const digitBoxStyle = (0, import_react36.useMemo)(() => ({
     backgroundColor: p.digitBackgroundColor,
     color: p.digitColor,
     fontSize: p.fontSize
   }), [p.digitBackgroundColor, p.digitColor, p.fontSize]);
-  const unitLabelStyle = (0, import_react34.useMemo)(() => ({
+  const unitLabelStyle = (0, import_react36.useMemo)(() => ({
     color: p.labelColor
   }), [p.labelColor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `ee-block-countdown ${blocks_default.countdownBlock}`, style: wrapperStyle, children: [
-    p.label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: blocks_default.countdownLabel, style: labelStyle, children: p.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: blocks_default.countdownDigits, style: digitsContainerStyle, children: units.map((unit) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: blocks_default.countdownUnit, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `ee-block-countdown ${blocks_default.countdownBlock}`, style: wrapperStyle, children: [
+    p.label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: blocks_default.countdownLabel, style: labelStyle, children: p.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: blocks_default.countdownDigits, style: digitsContainerStyle, children: units.map((unit) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: blocks_default.countdownUnit, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           className: blocks_default.countdownDigitBox,
@@ -26706,30 +27423,30 @@ var CountdownBlock = import_react34.default.memo(function CountdownBlock2({ bloc
           children: String(unit.value).padStart(2, "0")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: blocks_default.countdownUnitLabel, style: unitLabelStyle, children: unit.label })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: blocks_default.countdownUnitLabel, style: unitLabelStyle, children: unit.label })
     ] }, unit.label)) })
   ] });
 });
 
 // src/components/Canvas/blocks/MenuBlock.tsx
-var import_react35 = __toESM(require("react"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var MenuBlock = import_react35.default.memo(function MenuBlock2({ block }) {
+var import_react37 = __toESM(require("react"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var MenuBlock = import_react37.default.memo(function MenuBlock2({ block }) {
   const p = block.properties;
   const alignStyle = p.align === "left" ? "flex-start" : p.align === "right" ? "flex-end" : "center";
-  const wrapperStyle = (0, import_react35.useMemo)(() => ({
+  const wrapperStyle = (0, import_react37.useMemo)(() => ({
     padding: p.padding,
     justifyContent: alignStyle
   }), [p.padding, alignStyle]);
-  const itemsStyle = (0, import_react35.useMemo)(() => ({
+  const itemsStyle = (0, import_react37.useMemo)(() => ({
     justifyContent: alignStyle
   }), [alignStyle]);
-  const itemStyle = (0, import_react35.useMemo)(() => ({
+  const itemStyle = (0, import_react37.useMemo)(() => ({
     fontFamily: p.fontFamily,
     fontSize: p.fontSize,
     color: p.color
   }), [p.fontFamily, p.fontSize, p.color]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `ee-block-menu ${blocks_default.menuBlock}`, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: blocks_default.menuItems, style: itemsStyle, children: p.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `ee-block-menu ${blocks_default.menuBlock}`, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: blocks_default.menuItems, style: itemsStyle, children: p.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "span",
     {
       className: blocks_default.menuItem,
@@ -26741,11 +27458,11 @@ var MenuBlock = import_react35.default.memo(function MenuBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/HeroBlock.tsx
-var import_react36 = __toESM(require("react"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var HeroBlock = import_react36.default.memo(function HeroBlock2({ block }) {
+var import_react38 = __toESM(require("react"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var HeroBlock = import_react38.default.memo(function HeroBlock2({ block }) {
   const p = block.properties;
-  const containerStyle = (0, import_react36.useMemo)(() => ({
+  const containerStyle = (0, import_react38.useMemo)(() => ({
     padding: p.padding,
     textAlign: p.align,
     backgroundColor: p.backgroundColor || void 0,
@@ -26754,21 +27471,21 @@ var HeroBlock = import_react36.default.memo(function HeroBlock2({ block }) {
     backgroundPosition: p.backgroundImage ? "center" : void 0,
     backgroundRepeat: p.backgroundImage ? "no-repeat" : void 0
   }), [p.padding, p.align, p.backgroundColor, p.backgroundImage]);
-  const headingStyle = (0, import_react36.useMemo)(() => ({
+  const headingStyle = (0, import_react38.useMemo)(() => ({
     color: p.headingColor,
     fontSize: p.headingFontSize
   }), [p.headingColor, p.headingFontSize]);
-  const subtextStyle = (0, import_react36.useMemo)(() => ({
+  const subtextStyle = (0, import_react38.useMemo)(() => ({
     color: p.subtextColor,
     fontSize: p.subtextFontSize
   }), [p.subtextColor, p.subtextFontSize]);
-  const buttonStyle = (0, import_react36.useMemo)(() => ({
+  const buttonStyle = (0, import_react38.useMemo)(() => ({
     backgroundColor: p.buttonBackgroundColor,
     color: p.buttonColor,
     borderRadius: p.buttonBorderRadius
   }), [p.buttonBackgroundColor, p.buttonColor, p.buttonBorderRadius]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `ee-block-hero ${blocks_default.heroBlock}`, style: containerStyle, children: [
-    p.heading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `ee-block-hero ${blocks_default.heroBlock}`, style: containerStyle, children: [
+    p.heading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "h2",
       {
         className: blocks_default.heroHeading,
@@ -26776,7 +27493,7 @@ var HeroBlock = import_react36.default.memo(function HeroBlock2({ block }) {
         children: p.heading
       }
     ),
-    p.subtext && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    p.subtext && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "p",
       {
         className: blocks_default.heroSubtext,
@@ -26784,7 +27501,7 @@ var HeroBlock = import_react36.default.memo(function HeroBlock2({ block }) {
         children: p.subtext
       }
     ),
-    p.buttonText && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    p.buttonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "span",
       {
         className: blocks_default.heroButton,
@@ -26796,7 +27513,7 @@ var HeroBlock = import_react36.default.memo(function HeroBlock2({ block }) {
 });
 
 // src/components/Canvas/BlockRenderer.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 registerBlockRenderer("text", TextBlock2);
 registerBlockRenderer("button", ButtonBlock);
 registerBlockRenderer("image", ImageBlock2);
@@ -26809,14 +27526,14 @@ registerBlockRenderer("heading", HeadingBlock2);
 registerBlockRenderer("countdown", CountdownBlock);
 registerBlockRenderer("menu", MenuBlock);
 registerBlockRenderer("hero", HeroBlock);
-var BlockRenderer = import_react37.default.memo(function BlockRenderer2({ block }) {
+var BlockRenderer = import_react39.default.memo(function BlockRenderer2({ block }) {
   const Component2 = blockRendererRegistry[block.type];
   if (!Component2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component2, { block }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Component2, { block }) });
 });
 
 // src/components/Canvas/DropZone.tsx
-var import_react38 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 
 // src/styles/canvas.module.css
 var canvas_default = {
@@ -26851,12 +27568,12 @@ var canvas_default = {
 };
 
 // src/components/Canvas/DropZone.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var DropZone = import_react38.default.memo(function DropZone2({ sectionId, columnId, index, emptyPlaceholder }) {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var DropZone = import_react40.default.memo(function DropZone2({ sectionId, columnId, index, emptyPlaceholder }) {
   const dispatch = useEditorDispatch();
-  const [isOver, setIsOver] = (0, import_react38.useState)(false);
-  const isOverRef = (0, import_react38.useRef)(false);
-  const handleDragOver = (0, import_react38.useCallback)(
+  const [isOver, setIsOver] = (0, import_react40.useState)(false);
+  const isOverRef = (0, import_react40.useRef)(false);
+  const handleDragOver = (0, import_react40.useCallback)(
     (e) => {
       if (!isDropAllowed(e)) return;
       e.preventDefault();
@@ -26869,7 +27586,7 @@ var DropZone = import_react38.default.memo(function DropZone2({ sectionId, colum
     },
     []
   );
-  const handleDragLeave = (0, import_react38.useCallback)((e) => {
+  const handleDragLeave = (0, import_react40.useCallback)((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -26878,7 +27595,7 @@ var DropZone = import_react38.default.memo(function DropZone2({ sectionId, colum
     isOverRef.current = false;
     setIsOver(false);
   }, []);
-  const handleDrop2 = (0, import_react38.useCallback)(
+  const handleDrop2 = (0, import_react40.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -26915,7 +27632,7 @@ var DropZone = import_react38.default.memo(function DropZone2({ sectionId, colum
     [dispatch, sectionId, columnId, index]
   );
   if (emptyPlaceholder) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: `ee-drop-zone ee-drop-zone--empty ${canvas_default.emptyColumn} ${isOver ? canvas_default.emptyColumnActive : ""}`,
@@ -26926,20 +27643,20 @@ var DropZone = import_react38.default.memo(function DropZone2({ sectionId, colum
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       className: `ee-drop-zone ${canvas_default.dropZone} ${isOver ? canvas_default.dropZoneActive : ""}`,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop2,
-      children: isOver && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: canvas_default.dropZoneLabel, children: "Drop here" })
+      children: isOver && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: canvas_default.dropZoneLabel, children: "Drop here" })
     }
   );
 });
 
 // src/components/Canvas/Column.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function getBlockData(e) {
   const el = e.currentTarget;
   const blockId = el.dataset.blockId;
@@ -26947,17 +27664,17 @@ function getBlockData(e) {
   if (!blockId || index === void 0) return null;
   return { blockId, index: Number(index) };
 }
-var Column = import_react39.default.memo(function Column2({ column, sectionId }) {
+var Column = import_react41.default.memo(function Column2({ column, sectionId }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
-  const [blockToRemove, setBlockToRemove] = (0, import_react39.useState)(null);
-  const confirmRemoveBlock = (0, import_react39.useCallback)(
+  const [blockToRemove, setBlockToRemove] = (0, import_react41.useState)(null);
+  const confirmRemoveBlock = (0, import_react41.useCallback)(
     (blockId) => {
       setBlockToRemove(blockId);
     },
     []
   );
-  const handleConfirmRemove = (0, import_react39.useCallback)(() => {
+  const handleConfirmRemove = (0, import_react41.useCallback)(() => {
     if (blockToRemove) {
       dispatch({
         type: "REMOVE_BLOCK",
@@ -26966,7 +27683,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
       setBlockToRemove(null);
     }
   }, [dispatch, sectionId, column.id, blockToRemove]);
-  const handleBlockClick = (0, import_react39.useCallback)(
+  const handleBlockClick = (0, import_react41.useCallback)(
     (e) => {
       e.stopPropagation();
       const data = getBlockData(e);
@@ -26978,7 +27695,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     },
     [dispatch, sectionId, column.id]
   );
-  const handleRemoveClick = (0, import_react39.useCallback)(
+  const handleRemoveClick = (0, import_react41.useCallback)(
     (e) => {
       e.stopPropagation();
       const wrapper = e.currentTarget.closest("[data-block-id]");
@@ -26986,7 +27703,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     },
     [confirmRemoveBlock]
   );
-  const handleDuplicateClick = (0, import_react39.useCallback)(
+  const handleDuplicateClick = (0, import_react41.useCallback)(
     (e) => {
       e.stopPropagation();
       const wrapper = e.currentTarget.closest("[data-block-id]");
@@ -26999,7 +27716,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     },
     [dispatch, sectionId, column.id]
   );
-  const handleBlockDragStart = (0, import_react39.useCallback)(
+  const handleBlockDragStart = (0, import_react41.useCallback)(
     (e) => {
       const data = getBlockData(e);
       if (!data) return;
@@ -27007,8 +27724,8 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     },
     [sectionId, column.id]
   );
-  const [dropTarget, setDropTarget] = (0, import_react39.useState)(null);
-  const handleBlockDragOver = (0, import_react39.useCallback)(
+  const [dropTarget, setDropTarget] = (0, import_react41.useState)(null);
+  const handleBlockDragOver = (0, import_react41.useCallback)(
     (e) => {
       if (!isDropAllowed(e)) return;
       e.preventDefault();
@@ -27026,7 +27743,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     },
     []
   );
-  const handleBlockDragLeave = (0, import_react39.useCallback)((e) => {
+  const handleBlockDragLeave = (0, import_react41.useCallback)((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -27034,7 +27751,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     }
     setDropTarget(null);
   }, []);
-  const handleBlockDrop = (0, import_react39.useCallback)(
+  const handleBlockDrop = (0, import_react41.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -27074,7 +27791,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     },
     [dispatch, sectionId, column.id]
   );
-  const handleBlockKeyDown = (0, import_react39.useCallback)(
+  const handleBlockKeyDown = (0, import_react41.useCallback)(
     (e) => {
       const target = e.target;
       if (target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
@@ -27098,7 +27815,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
     [dispatch, sectionId, column.id, confirmRemoveBlock]
   );
   if (column.blocks.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       DropZone,
       {
         sectionId,
@@ -27108,10 +27825,10 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: [
-    column.blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react39.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, { sectionId, columnId: column.id, index }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: [
+    column.blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react41.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { sectionId, columnId: column.id, index }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "div",
         {
           "data-block-type": block.type,
@@ -27138,8 +27855,8 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
           "aria-selected": selection.blockId === block.id,
           tabIndex: 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `ee-block-actions ${canvas_default.blockOverlay}`, role: "group", "aria-label": "Block actions", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: `ee-block-actions ${canvas_default.blockOverlay}`, role: "group", "aria-label": "Block actions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "button",
                 {
                   className: `ee-block-duplicate ${canvas_default.blockBtn} ${canvas_default.blockBtnDuplicate}`,
@@ -27149,7 +27866,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
                   children: "\u29C9"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "button",
                 {
                   className: `ee-block-remove ${canvas_default.blockBtn}`,
@@ -27160,12 +27877,12 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BlockRenderer, { block })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BlockRenderer, { block })
           ]
         }
       )
     ] }, block.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       DropZone,
       {
         sectionId,
@@ -27173,7 +27890,7 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
         index: column.blocks.length
       }
     ),
-    blockToRemove && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    blockToRemove && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       ConfirmDialog,
       {
         title: "Remove Block",
@@ -27186,45 +27903,45 @@ var Column = import_react39.default.memo(function Column2({ column, sectionId })
 });
 
 // src/components/Canvas/Section.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Section = import_react40.default.memo(function Section2({ section }) {
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Section = import_react42.default.memo(function Section2({ section }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
   const { template } = useTemplateContext();
   const isSelected = selection.sectionId === section.id && !selection.blockId;
-  const [showRemoveConfirm, setShowRemoveConfirm] = (0, import_react40.useState)(false);
-  const handleClick2 = (0, import_react40.useCallback)(
+  const [showRemoveConfirm, setShowRemoveConfirm] = (0, import_react42.useState)(false);
+  const handleClick2 = (0, import_react42.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({ type: "SELECT_SECTION", payload: { sectionId: section.id } });
     },
     [dispatch, section.id]
   );
-  const handleRemove = (0, import_react40.useCallback)(
+  const handleRemove = (0, import_react42.useCallback)(
     (e) => {
       e.stopPropagation();
       setShowRemoveConfirm(true);
     },
     []
   );
-  const handleConfirmRemove = (0, import_react40.useCallback)(() => {
+  const handleConfirmRemove = (0, import_react42.useCallback)(() => {
     dispatch({ type: "REMOVE_SECTION", payload: { sectionId: section.id } });
     setShowRemoveConfirm(false);
   }, [dispatch, section.id]);
-  const handleDuplicate = (0, import_react40.useCallback)(
+  const handleDuplicate = (0, import_react42.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({ type: "DUPLICATE_SECTION", payload: { sectionId: section.id } });
     },
     [dispatch, section.id]
   );
-  const handleDragStart = (0, import_react40.useCallback)(
+  const handleDragStart = (0, import_react42.useCallback)(
     (e) => {
       setSectionMoveDragData(e, section.id);
     },
     [section.id]
   );
-  const handleDragKeyDown = (0, import_react40.useCallback)(
+  const handleDragKeyDown = (0, import_react42.useCallback)(
     (e) => {
       if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
       e.preventDefault();
@@ -27238,7 +27955,7 @@ var Section = import_react40.default.memo(function Section2({ section }) {
     },
     [dispatch, section.id, template.sections]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: `ee-section ${isSelected ? "ee-section--selected" : ""} ${section.properties.fullWidth ? "ee-section--full-width" : ""} ${canvas_default.section} ${isSelected ? canvas_default.sectionSelected : ""} ${section.properties.fullWidth ? canvas_default.sectionFullWidth : ""}`,
@@ -27255,8 +27972,8 @@ var Section = import_react40.default.memo(function Section2({ section }) {
       "aria-label": `Email section${isSelected ? " (selected)" : ""}`,
       "aria-selected": isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `ee-section-actions ${canvas_default.sectionOverlay}`, role: "group", "aria-label": "Section actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `ee-section-actions ${canvas_default.sectionOverlay}`, role: "group", "aria-label": "Section actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
               className: `ee-section-drag ${canvas_default.sectionDragHandle}`,
@@ -27270,7 +27987,7 @@ var Section = import_react40.default.memo(function Section2({ section }) {
               children: "\u283F"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               className: `ee-section-duplicate ${canvas_default.sectionBtn} ${canvas_default.sectionBtnDuplicate}`,
@@ -27280,7 +27997,7 @@ var Section = import_react40.default.memo(function Section2({ section }) {
               children: "\u29C9"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               className: `ee-section-remove ${canvas_default.sectionBtn}`,
@@ -27291,8 +28008,8 @@ var Section = import_react40.default.memo(function Section2({ section }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Column, { column, sectionId: section.id }, column.id)) }),
-        showRemoveConfirm && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Column, { column, sectionId: section.id }, column.id)) }),
+        showRemoveConfirm && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           ConfirmDialog,
           {
             title: "Remove Section",
@@ -27307,13 +28024,13 @@ var Section = import_react40.default.memo(function Section2({ section }) {
 });
 
 // src/components/Canvas/SectionDropZone.tsx
-var import_react41 = __toESM(require("react"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var SectionDropZone = import_react41.default.memo(function SectionDropZone2({ index }) {
+var import_react43 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var SectionDropZone = import_react43.default.memo(function SectionDropZone2({ index }) {
   const dispatch = useEditorDispatch();
-  const [isOver, setIsOver] = (0, import_react41.useState)(false);
-  const isOverRef = (0, import_react41.useRef)(false);
-  const handleDragOver = (0, import_react41.useCallback)((e) => {
+  const [isOver, setIsOver] = (0, import_react43.useState)(false);
+  const isOverRef = (0, import_react43.useRef)(false);
+  const handleDragOver = (0, import_react43.useCallback)((e) => {
     if (!isSectionDrop(e)) return;
     e.preventDefault();
     e.stopPropagation();
@@ -27323,7 +28040,7 @@ var SectionDropZone = import_react41.default.memo(function SectionDropZone2({ in
       setIsOver(true);
     }
   }, []);
-  const handleDragLeave = (0, import_react41.useCallback)((e) => {
+  const handleDragLeave = (0, import_react43.useCallback)((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -27332,7 +28049,7 @@ var SectionDropZone = import_react41.default.memo(function SectionDropZone2({ in
     isOverRef.current = false;
     setIsOver(false);
   }, []);
-  const handleDrop2 = (0, import_react41.useCallback)(
+  const handleDrop2 = (0, import_react43.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -27347,37 +28064,37 @@ var SectionDropZone = import_react41.default.memo(function SectionDropZone2({ in
     },
     [dispatch, index]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: `ee-section-drop-zone ${canvas_default.sectionDropZone} ${isOver ? canvas_default.sectionDropZoneActive : ""}`,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop2,
-      children: isOver && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: canvas_default.sectionDropZoneLabel, children: "Move section here" })
+      children: isOver && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: canvas_default.sectionDropZoneLabel, children: "Move section here" })
     }
   );
 });
 
 // src/components/Canvas/Canvas.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Canvas = import_react42.default.memo(function Canvas2() {
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Canvas = import_react44.default.memo(function Canvas2() {
   const { template } = useTemplateContext();
   const dispatch = useEditorDispatch();
-  const [isDragOver, setIsDragOver] = (0, import_react42.useState)(false);
-  const handleAddSection = (0, import_react42.useCallback)(() => {
+  const [isDragOver, setIsDragOver] = (0, import_react44.useState)(false);
+  const handleAddSection = (0, import_react44.useCallback)(() => {
     dispatch({ type: "ADD_SECTION", payload: { section: createSection() } });
   }, [dispatch]);
-  const handleCanvasClick = (0, import_react42.useCallback)(() => {
+  const handleCanvasClick = (0, import_react44.useCallback)(() => {
     dispatch({ type: "DESELECT_ALL" });
   }, [dispatch]);
-  const handleBodyDragOver = (0, import_react42.useCallback)((e) => {
+  const handleBodyDragOver = (0, import_react44.useCallback)((e) => {
     if (!isDropAllowed(e)) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
     setIsDragOver(true);
   }, []);
-  const handleBodyDragLeave = (0, import_react42.useCallback)((e) => {
+  const handleBodyDragLeave = (0, import_react44.useCallback)((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -27385,7 +28102,7 @@ var Canvas = import_react42.default.memo(function Canvas2() {
     }
     setIsDragOver(false);
   }, []);
-  const handleBodyDrop = (0, import_react42.useCallback)(
+  const handleBodyDrop = (0, import_react44.useCallback)(
     (e) => {
       e.preventDefault();
       setIsDragOver(false);
@@ -27402,7 +28119,7 @@ var Canvas = import_react42.default.memo(function Canvas2() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: `ee-canvas-body ${canvas_default.canvasBody} ${isDragOver ? canvas_default.canvasBodyDragOver : ""}`,
@@ -27417,25 +28134,25 @@ var Canvas = import_react42.default.memo(function Canvas2() {
       onDrop: handleBodyDrop,
       "aria-label": "Email content area",
       children: [
-        template.sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react42.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SectionDropZone, { index }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Section, { section })
+        template.sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react44.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { section })
         ] }, section.id)),
-        template.sections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SectionDropZone, { index: template.sections.length }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
+        template.sections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index: template.sections.length }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
       ]
     }
   ) });
 });
 
 // src/components/Properties/SectionProperties.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 
 // src/components/Properties/PropertyField.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/components/Properties/controls/ColorPicker.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 
 // src/styles/properties.module.css
 var properties_default = {
@@ -27483,16 +28200,18 @@ var properties_default = {
   "fieldInputStacked": "fieldInputStacked fieldInput",
   "checkboxLabel": "checkboxLabel fieldLabel",
   "colorPresetBtnFull": "colorPresetBtnFull",
-  "colorNativeInput": "colorNativeInput",
+  "colorPresetSectionLabel": "colorPresetSectionLabel",
+  "colorSavePresetBtn": "colorSavePresetBtn",
   "separator": "separator"
 };
 
 // src/components/Properties/controls/ColorPicker.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ColorPicker({ label, value, onChange }) {
-  const [isOpen, setIsOpen] = (0, import_react43.useState)(false);
-  const wrapperRef = (0, import_react43.useRef)(null);
-  (0, import_react43.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
+  const wrapperRef = (0, import_react45.useRef)(null);
+  const { customColorPresets, addCustomColorPreset, removeCustomColorPreset } = useColorPresets();
+  (0, import_react45.useEffect)(() => {
     function handleClickOutside(e) {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -27503,36 +28222,48 @@ function ColorPicker({ label, value, onChange }) {
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  const handlePresetClick = (0, import_react43.useCallback)(
+  const handlePresetClick = (0, import_react45.useCallback)(
     (color) => {
       onChange(color);
       setIsOpen(false);
     },
     [onChange]
   );
+  const handleSavePreset = (0, import_react45.useCallback)(() => {
+    if (value && value !== "transparent" && !customColorPresets.includes(value)) {
+      addCustomColorPreset(value);
+    }
+  }, [value, customColorPresets, addCustomColorPreset]);
+  const handlePresetContextMenu = (0, import_react45.useCallback)(
+    (e, color) => {
+      e.preventDefault();
+      removeCustomColorPreset(color);
+    },
+    [removeCustomColorPreset]
+  );
   const isHex = /^#[0-9a-fA-F]{6}$/.test(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: `ee-field-group ee-color-picker ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: properties_default.colorPickerWrapper, ref: wrapperRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `ee-field-group ee-color-picker ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: properties_default.colorPickerWrapper, ref: wrapperRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           className: properties_default.colorPickerTrigger,
           onClick: () => setIsOpen(!isOpen),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "div",
               {
                 className: `${properties_default.colorSwatch} ${value === "transparent" ? properties_default.colorSwatchTransparent : ""}`,
                 style: value !== "transparent" ? { backgroundColor: value || "transparent" } : void 0
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: properties_default.colorValue, children: value || "transparent" })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: properties_default.colorValue, children: value || "transparent" })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: properties_default.colorPresets, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: properties_default.colorPresets, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             className: `ee-color-preset-transparent ${properties_default.colorPresetBtn} ${properties_default.colorPresetBtnTransparent} ${properties_default.colorPresetBtnFull} ${value === "transparent" ? properties_default.colorPresetBtnActive : ""}`,
@@ -27541,7 +28272,7 @@ function ColorPicker({ label, value, onChange }) {
             children: "Transparent"
           }
         ),
-        COLOR_PRESETS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        COLOR_PRESETS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             className: `${properties_default.colorPresetBtn} ${color === value ? properties_default.colorPresetBtnActive : ""}`,
@@ -27551,23 +28282,47 @@ function ColorPicker({ label, value, onChange }) {
           },
           color
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "input",
-          {
-            type: "color",
-            className: `ee-color-native-input ${properties_default.colorNativeInput}`,
-            value: isHex ? value : "#ffffff",
-            onChange: (e) => onChange(e.target.value)
-          }
-        )
+        customColorPresets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${properties_default.colorPresetBtnFull} ${properties_default.colorPresetSectionLabel}`, children: "Custom" }),
+          customColorPresets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "button",
+            {
+              className: `${properties_default.colorPresetBtn} ${color === value ? properties_default.colorPresetBtnActive : ""}`,
+              style: { backgroundColor: color },
+              onClick: () => handlePresetClick(color),
+              onContextMenu: (e) => handlePresetContextMenu(e, color),
+              title: `${color} (right-click to remove)`
+            },
+            `custom-${color}`
+          ))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `${properties_default.colorPresetBtnFull}`, style: { display: "flex", flexDirection: "column", gap: "8px", alignItems: "stretch" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            HslColorArea,
+            {
+              value: isHex ? value : "#ffffff",
+              onChange
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "button",
+            {
+              className: `ee-color-save-preset ${properties_default.colorSavePresetBtn}`,
+              onClick: handleSavePreset,
+              title: "Save current color as preset",
+              disabled: !value || value === "transparent" || customColorPresets.includes(value),
+              children: "+ Save"
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
 }
 
 // src/components/Properties/controls/PaddingInput.tsx
-var import_react44 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react46 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function parsePadding(value) {
   const parts = value.split(/\s+/).map((p) => p.trim()).filter(Boolean);
   switch (parts.length) {
@@ -27584,8 +28339,8 @@ function parsePadding(value) {
   }
 }
 function PaddingInput({ label, value, onChange }) {
-  const [top, right, bottom, left] = (0, import_react44.useMemo)(() => parsePadding(value), [value]);
-  const handleChange = (0, import_react44.useCallback)(
+  const [top, right, bottom, left] = (0, import_react46.useMemo)(() => parsePadding(value), [value]);
+  const handleChange = (0, import_react46.useCallback)(
     (position, newVal) => {
       const parts = parsePadding(value);
       const idx = { top: 0, right: 1, bottom: 2, left: 3 }[position];
@@ -27594,12 +28349,12 @@ function PaddingInput({ label, value, onChange }) {
     },
     [value, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `ee-field-group ee-padding ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: properties_default.paddingGrid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: properties_default.paddingLabel, children: "Top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `ee-field-group ee-padding ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: properties_default.paddingGrid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: properties_default.paddingLabel, children: "Top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27608,9 +28363,9 @@ function PaddingInput({ label, value, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: properties_default.paddingLabel, children: "Right" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: properties_default.paddingLabel, children: "Right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27619,9 +28374,9 @@ function PaddingInput({ label, value, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: properties_default.paddingLabel, children: "Bottom" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: properties_default.paddingLabel, children: "Bottom" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27630,9 +28385,9 @@ function PaddingInput({ label, value, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: properties_default.paddingLabel, children: "Left" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: properties_default.paddingLabel, children: "Left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27646,16 +28401,16 @@ function PaddingInput({ label, value, onChange }) {
 }
 
 // src/components/Properties/controls/AlignmentPicker.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function AlignmentPicker({
   label,
   value,
   onChange,
   options = ["left", "center", "right"]
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `ee-field-group ee-alignment ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: properties_default.alignmentPicker, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `ee-field-group ee-alignment ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: properties_default.alignmentPicker, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "button",
       {
         className: `${properties_default.alignmentBtn} ${value === option ? properties_default.alignmentBtnActive : ""}`,
@@ -27669,25 +28424,25 @@ function AlignmentPicker({
 }
 
 // src/components/Properties/controls/FontPicker.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FontPicker({ label, value, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-field-group ee-font-picker ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `ee-field-group ee-font-picker ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "select",
       {
         className: properties_default.fieldSelect,
         value,
         onChange: (e) => onChange(e.target.value),
-        children: FONT_OPTIONS.map((font) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
+        children: FONT_OPTIONS.map((font) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
       }
     )
   ] });
 }
 
 // src/components/Properties/controls/SliderInput.tsx
-var import_react45 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react47 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function SliderInput({
   label,
   value,
@@ -27697,16 +28452,16 @@ function SliderInput({
   unit = "px",
   onChange
 }) {
-  const handleChange = (0, import_react45.useCallback)(
+  const handleChange = (0, import_react47.useCallback)(
     (e) => {
       onChange(Number(e.target.value));
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `ee-field-group ee-slider ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: properties_default.sliderWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `ee-field-group ee-slider ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: properties_default.sliderWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "input",
         {
           type: "range",
@@ -27718,7 +28473,7 @@ function SliderInput({
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: properties_default.sliderValue, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: properties_default.sliderValue, children: [
         value,
         unit
       ] })
@@ -27727,8 +28482,8 @@ function SliderInput({
 }
 
 // src/components/Properties/controls/LinkInput.tsx
-var import_react46 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react48 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function validateLink(value, type) {
   if (!value) return null;
   if (type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
@@ -27758,22 +28513,22 @@ function addPrefix(value, type) {
   return value;
 }
 function LinkInput({ label, value, onChange }) {
-  const [type, setType] = (0, import_react46.useState)(() => detectType(value));
-  const [rawValue, setRawValue] = (0, import_react46.useState)(() => stripPrefix(value, detectType(value)));
-  const validationError = (0, import_react46.useMemo)(() => validateLink(rawValue, type), [rawValue, type]);
-  (0, import_react46.useEffect)(() => {
+  const [type, setType] = (0, import_react48.useState)(() => detectType(value));
+  const [rawValue, setRawValue] = (0, import_react48.useState)(() => stripPrefix(value, detectType(value)));
+  const validationError = (0, import_react48.useMemo)(() => validateLink(rawValue, type), [rawValue, type]);
+  (0, import_react48.useEffect)(() => {
     const detected = detectType(value);
     setType(detected);
     setRawValue(stripPrefix(value, detected));
   }, [value]);
-  const handleTypeChange = (0, import_react46.useCallback)(
+  const handleTypeChange = (0, import_react48.useCallback)(
     (newType) => {
       setType(newType);
       onChange(addPrefix(rawValue, newType));
     },
     [rawValue, onChange]
   );
-  const handleValueChange = (0, import_react46.useCallback)(
+  const handleValueChange = (0, import_react48.useCallback)(
     (newValue) => {
       setRawValue(newValue);
       onChange(addPrefix(newValue, type));
@@ -27781,23 +28536,23 @@ function LinkInput({ label, value, onChange }) {
     [type, onChange]
   );
   const placeholder = type === "email" ? "user@example.com" : type === "phone" ? "+1234567890" : "https://";
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `ee-field-group ee-link-input ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: properties_default.fieldRowCompact, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `ee-field-group ee-link-input ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: properties_default.fieldRowCompact, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "select",
         {
           className: properties_default.fieldSelectNarrow,
           value: type,
           onChange: (e) => handleTypeChange(e.target.value),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { value: "url", children: "URL" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { value: "email", children: "Email" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { value: "phone", children: "Phone" })
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: "url", children: "URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: "email", children: "Email" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: "phone", children: "Phone" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "input",
         {
           className: properties_default.fieldInputFlex,
@@ -27809,26 +28564,26 @@ function LinkInput({ label, value, onChange }) {
         }
       )
     ] }),
-    validationError && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `ee-validation-error ${properties_default.validationError}`, role: "alert", children: validationError })
+    validationError && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: `ee-validation-error ${properties_default.validationError}`, role: "alert", children: validationError })
   ] });
 }
 
 // src/components/Properties/PropertyField.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var PropertyField = import_react47.default.memo(function PropertyField2(props) {
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var PropertyField = import_react49.default.memo(function PropertyField2(props) {
   switch (props.type) {
     case "color":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColorPicker, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ColorPicker, { label: props.label, value: props.value, onChange: props.onChange });
     case "padding":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PaddingInput, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaddingInput, { label: props.label, value: props.value, onChange: props.onChange });
     case "alignment":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AlignmentPicker, { label: props.label, value: props.value, onChange: props.onChange, options: props.options });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AlignmentPicker, { label: props.label, value: props.value, onChange: props.onChange, options: props.options });
     case "font":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FontPicker, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FontPicker, { label: props.label, value: props.value, onChange: props.onChange });
     case "link":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LinkInput, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LinkInput, { label: props.label, value: props.value, onChange: props.onChange });
     case "slider":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         SliderInput,
         {
           label: props.label,
@@ -27841,8 +28596,8 @@ var PropertyField = import_react47.default.memo(function PropertyField2(props) {
         }
       );
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: `ee-checkbox-label ${properties_default.checkboxLabel}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: `ee-checkbox-label ${properties_default.checkboxLabel}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "input",
           {
             type: "checkbox",
@@ -27853,22 +28608,22 @@ var PropertyField = import_react47.default.memo(function PropertyField2(props) {
         props.label
       ] }) });
     case "select":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: properties_default.fieldGroup, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: properties_default.fieldLabel, children: props.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: properties_default.fieldGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: properties_default.fieldLabel, children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "select",
           {
             className: properties_default.fieldSelect,
             value: props.value,
             onChange: (e) => props.onChange(e.target.value),
-            children: props.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+            children: props.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
           }
         )
       ] });
     case "textarea":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: properties_default.fieldGroup, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: properties_default.fieldLabel, children: props.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: properties_default.fieldGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: properties_default.fieldLabel, children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "textarea",
           {
             className: props.code ? `ee-code-textarea ${properties_default.fieldTextareaCode}` : properties_default.fieldTextarea,
@@ -27881,9 +28636,9 @@ var PropertyField = import_react47.default.memo(function PropertyField2(props) {
       ] });
     case "text":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: properties_default.fieldGroup, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: properties_default.fieldLabel, children: props.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: properties_default.fieldGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: properties_default.fieldLabel, children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "input",
           {
             className: properties_default.fieldInput,
@@ -27896,11 +28651,11 @@ var PropertyField = import_react47.default.memo(function PropertyField2(props) {
   }
 });
 function FieldSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: properties_default.separator });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: properties_default.separator });
 }
 
 // src/components/Properties/SectionProperties.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var BG_SIZE_OPTIONS = [
   { value: "cover", label: "Cover" },
   { value: "contain", label: "Contain" },
@@ -27915,41 +28670,41 @@ var BG_REPEAT_OPTIONS = [
 function SectionProperties({ section }) {
   const dispatch = useEditorDispatch();
   const { properties } = section;
-  const update = (0, import_react48.useCallback)(
+  const update = (0, import_react50.useCallback)(
     (props) => {
       dispatch({ type: "UPDATE_SECTION", payload: { sectionId: section.id, properties: props } });
     },
     [dispatch, section.id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "color", label: "Background Color", value: properties.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "padding", label: "Padding", value: properties.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "text", label: "Border Radius", value: properties.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "toggle", label: "Full Width", value: properties.fullWidth || false, onChange: (v) => update({ fullWidth: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "text", label: "Background Image URL", value: properties.backgroundImage || "", onChange: (v) => update({ backgroundImage: v }), placeholder: "https://..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "select", label: "Background Size", value: properties.backgroundSize || "cover", onChange: (v) => update({ backgroundSize: v }), options: BG_SIZE_OPTIONS }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PropertyField, { type: "select", label: "Background Repeat", value: properties.backgroundRepeat || "no-repeat", onChange: (v) => update({ backgroundRepeat: v }), options: BG_REPEAT_OPTIONS })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "color", label: "Background Color", value: properties.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "padding", label: "Padding", value: properties.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "text", label: "Border Radius", value: properties.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "toggle", label: "Full Width", value: properties.fullWidth || false, onChange: (v) => update({ fullWidth: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "text", label: "Background Image URL", value: properties.backgroundImage || "", onChange: (v) => update({ backgroundImage: v }), placeholder: "https://..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "select", label: "Background Size", value: properties.backgroundSize || "cover", onChange: (v) => update({ backgroundSize: v }), options: BG_SIZE_OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "select", label: "Background Repeat", value: properties.backgroundRepeat || "no-repeat", onChange: (v) => update({ backgroundRepeat: v }), options: BG_REPEAT_OPTIONS })
   ] });
 }
 
 // src/components/Properties/HeadMetadataProperties.tsx
-var import_react49 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react51 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function HeadMetadataProperties() {
   const { template } = useTemplateContext();
   const dispatch = useEditorDispatch();
   const metadata = template.headMetadata ?? { title: "", previewText: "", headStyles: [] };
-  const update = (0, import_react49.useCallback)(
+  const update = (0, import_react51.useCallback)(
     (props) => {
       dispatch({ type: "UPDATE_HEAD_METADATA", payload: props });
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PropertyField, { type: "text", label: "Email Title", value: metadata.title, onChange: (v) => update({ title: v }), placeholder: "Email title (mj-title)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PropertyField, { type: "text", label: "Preview Text", value: metadata.previewText, onChange: (v) => update({ previewText: v }), placeholder: "Preview text shown in inbox (mj-preview)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "text", label: "Email Title", value: metadata.title, onChange: (v) => update({ title: v }), placeholder: "Email title (mj-title)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "text", label: "Preview Text", value: metadata.previewText, onChange: (v) => update({ previewText: v }), placeholder: "Preview text shown in inbox (mj-preview)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       PropertyField,
       {
         type: "textarea",
@@ -27968,10 +28723,10 @@ function HeadMetadataProperties() {
 }
 
 // src/hooks/useBlockUpdate.ts
-var import_react50 = require("react");
+var import_react52 = require("react");
 function useBlockUpdate(blockId) {
   const dispatch = useEditorDispatch();
-  const update = (0, import_react50.useCallback)(
+  const update = (0, import_react52.useCallback)(
     (properties) => {
       dispatch({
         type: "UPDATE_BLOCK",
@@ -27984,19 +28739,20 @@ function useBlockUpdate(blockId) {
 }
 
 // src/components/Properties/TextProperties.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function TextProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: properties_default.fieldHint, children: "Use the inline toolbar above the text block to format font, size, color, and alignment." }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: properties_default.fieldHint, children: "Use the inline toolbar above the text block to format font, size, color, and alignment." }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor || "transparent", onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/ButtonProperties.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var FONT_WEIGHT_OPTIONS = [
   { value: "normal", label: "Normal" },
   { value: "bold", label: "Bold" },
@@ -28019,32 +28775,32 @@ var TEXT_TRANSFORM_OPTIONS = [
 function ButtonProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "text", label: "Button Text", value: p.text, onChange: (v) => update({ text: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }), placeholder: "auto" }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "normal", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "padding", label: "Outer Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PropertyField, { type: "padding", label: "Inner Padding", value: p.innerPadding, onChange: (v) => update({ innerPadding: v }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Button Text", value: p.text, onChange: (v) => update({ text: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }), placeholder: "auto" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "normal", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "padding", label: "Outer Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "padding", label: "Inner Padding", value: p.innerPadding, onChange: (v) => update({ innerPadding: v }) })
   ] });
 }
 
 // src/components/Properties/ImageProperties.tsx
-var import_react51 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react53 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ImageProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const { imageUploadAdapter } = useImageAdapter();
-  const fileInputRef = (0, import_react51.useRef)(null);
+  const fileInputRef = (0, import_react53.useRef)(null);
   const p = block.properties;
   const { upload, status, error } = useImageUpload({
     adapter: imageUploadAdapter,
@@ -28057,7 +28813,7 @@ function ImageProperties({ block }) {
       });
     }
   });
-  const handleFileSelect = (0, import_react51.useCallback)(
+  const handleFileSelect = (0, import_react53.useCallback)(
     async (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -28065,10 +28821,10 @@ function ImageProperties({ block }) {
     },
     [upload]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "text", label: "Image URL", value: p.src, onChange: (v) => update({ src: v }), placeholder: "https://..." }),
-    imageUploadAdapter && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "text", label: "Image URL", value: p.src, onChange: (v) => update({ src: v }), placeholder: "https://..." }),
+    imageUploadAdapter && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           className: `ee-upload-btn ${status === "uploading" ? properties_default.fieldBtnUploadDisabled : properties_default.fieldBtnUpload}`,
@@ -28077,8 +28833,8 @@ function ImageProperties({ block }) {
           children: status === "uploading" ? "Uploading..." : "Upload Image"
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: `ee-upload-error ${properties_default.validationError}`, children: error }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      error && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: `ee-upload-error ${properties_default.validationError}`, children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
         {
           ref: fileInputRef,
@@ -28089,21 +28845,21 @@ function ImageProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Image description" }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: properties_default.fieldRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "text", label: "Height", value: p.height, onChange: (v) => update({ height: v }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Image description" }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: properties_default.fieldRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "text", label: "Height", value: p.height, onChange: (v) => update({ height: v }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PropertyField, { type: "toggle", label: "Fluid on Mobile", value: p.fluidOnMobile, onChange: (v) => update({ fluidOnMobile: v }) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "toggle", label: "Fluid on Mobile", value: p.fluidOnMobile, onChange: (v) => update({ fluidOnMobile: v }) })
   ] });
 }
 
 // src/components/Properties/DividerProperties.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var BORDER_STYLE_OPTIONS = [
   { value: "solid", label: "Solid" },
   { value: "dashed", label: "Dashed" },
@@ -28112,26 +28868,26 @@ var BORDER_STYLE_OPTIONS = [
 function DividerProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "color", label: "Border Color", value: p.borderColor, onChange: (v) => update({ borderColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "text", label: "Border Width", value: p.borderWidth, onChange: (v) => update({ borderWidth: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "select", label: "Border Style", value: p.borderStyle, onChange: (v) => update({ borderStyle: v }), options: BORDER_STYLE_OPTIONS }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "color", label: "Border Color", value: p.borderColor, onChange: (v) => update({ borderColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "text", label: "Border Width", value: p.borderWidth, onChange: (v) => update({ borderWidth: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "select", label: "Border Style", value: p.borderStyle, onChange: (v) => update({ borderStyle: v }), options: BORDER_STYLE_OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/SpacerProperties.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function SpacerProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
   const heightNum = parseInt(p.height, 10) || 20;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: properties_default.propertiesBody, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PropertyField, { type: "slider", label: "Height", value: heightNum, min: 5, max: 200, step: 5, unit: "px", onChange: (v) => update({ height: `${v}px` }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: properties_default.propertiesBody, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "slider", label: "Height", value: heightNum, min: 5, max: 200, step: 5, unit: "px", onChange: (v) => update({ height: `${v}px` }) }) });
 }
 
 // src/components/Properties/SocialProperties.tsx
-var import_react52 = require("react");
+var import_react54 = require("react");
 
 // src/types.ts
 function narrowBlock(block, type) {
@@ -28139,14 +28895,105 @@ function narrowBlock(block, type) {
 }
 
 // src/components/Properties/SocialProperties.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var ALLOWED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/svg+xml", "image/webp"];
+var MAX_ICON_SIZE_BYTES = 2 * 1024 * 1024;
 var MODE_OPTIONS = [
   { value: "horizontal", label: "Horizontal" },
   { value: "vertical", label: "Vertical" }
 ];
+var PLATFORM_COLORS2 = {
+  facebook: "#3b5998",
+  twitter: "#1da1f2",
+  instagram: "#e1306c",
+  linkedin: "#0077b5",
+  youtube: "#ff0000",
+  github: "#333333",
+  pinterest: "#bd081c",
+  snapchat: "#fffc00",
+  tiktok: "#000000",
+  web: "#4caf50"
+};
+function SocialElementIconUpload({ element, blockId, onUpdate }) {
+  const { imageUploadAdapter } = useImageAdapter();
+  const fileInputRef = (0, import_react54.useRef)(null);
+  const [localError, setLocalError] = (0, import_react54.useState)(null);
+  const { upload, status, error } = useImageUpload({
+    adapter: imageUploadAdapter,
+    blockId,
+    onSuccess: (result) => {
+      onUpdate({ src: result.url });
+    }
+  });
+  const handleFileSelect = (0, import_react54.useCallback)(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      setLocalError(null);
+      if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+        setLocalError("Only PNG, JPG, GIF, SVG, and WebP files are allowed");
+        if (fileInputRef.current) fileInputRef.current.value = "";
+        return;
+      }
+      if (file.size > MAX_ICON_SIZE_BYTES) {
+        setLocalError("File size must be under 2MB");
+        if (fileInputRef.current) fileInputRef.current.value = "";
+        return;
+      }
+      await upload(file);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    },
+    [upload]
+  );
+  const bgColor = PLATFORM_COLORS2[element.name] || "#999999";
+  const SvgIcon = getSocialIcon(element.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "4px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "div",
+      {
+        className: blocks_default.socialIconPreview,
+        style: { backgroundColor: bgColor },
+        children: element.src ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("img", { src: element.src, alt: element.name }) : SvgIcon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SvgIcon, { size: 16, color: element.color || "#ffffff" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { style: { color: element.color || "#ffffff", fontSize: "12px", fontWeight: "bold" }, children: element.name.charAt(0).toUpperCase() })
+      }
+    ),
+    imageUploadAdapter && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "button",
+        {
+          className: `ee-upload-btn ${status === "uploading" ? properties_default.fieldBtnUploadDisabled : properties_default.fieldBtnUpload}`,
+          onClick: () => fileInputRef.current?.click(),
+          disabled: status === "uploading",
+          style: { flex: 1, fontSize: "11px", padding: "3px 6px" },
+          children: status === "uploading" ? "Uploading..." : "Upload Icon"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: ".png,.jpg,.jpeg,.gif,.svg,.webp",
+          onChange: handleFileSelect,
+          style: { display: "none" }
+        }
+      )
+    ] }),
+    element.src && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "button",
+      {
+        className: properties_default.itemActionBtnDanger,
+        onClick: () => onUpdate({ src: void 0 }),
+        title: "Reset to default icon",
+        style: { fontSize: "11px", padding: "3px 6px" },
+        children: "Reset"
+      }
+    ),
+    (localError || error) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: properties_default.validationError, style: { fontSize: "10px" }, children: localError || error })
+  ] });
+}
 function SocialProperties({ block }) {
   const update = useBlockUpdate(block.id);
-  const updateElement = (0, import_react52.useCallback)(
+  const updateElement = (0, import_react54.useCallback)(
     (index, changes) => {
       const elements = [...block.properties.elements];
       elements[index] = { ...elements[index], ...changes };
@@ -28154,18 +29001,18 @@ function SocialProperties({ block }) {
     },
     [block.properties.elements, update]
   );
-  const addElement = (0, import_react52.useCallback)(() => {
+  const addElement = (0, import_react54.useCallback)(() => {
     const elements = [...block.properties.elements, { id: generateId("se"), name: "web", href: "#" }];
     update({ elements });
   }, [block.properties.elements, update]);
-  const removeElement = (0, import_react52.useCallback)(
+  const removeElement = (0, import_react54.useCallback)(
     (index) => {
       const elements = block.properties.elements.filter((_, i) => i !== index);
       update({ elements });
     },
     [block.properties.elements, update]
   );
-  const moveElement = (0, import_react52.useCallback)(
+  const moveElement = (0, import_react54.useCallback)(
     (index, direction) => {
       const elements = [...block.properties.elements];
       const newIndex = index + direction;
@@ -28177,45 +29024,45 @@ function SocialProperties({ block }) {
   );
   if (!narrowBlock(block, "social")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "select", label: "Mode", value: p.mode, onChange: (v) => update({ mode: v }), options: MODE_OPTIONS }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Icon Size", value: p.iconSize, onChange: (v) => update({ iconSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Icon Padding", value: p.iconPadding, onChange: (v) => update({ iconPadding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { className: properties_default.fieldLabel, children: "Social Elements" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: blocks_default.socialElementsContainer, children: p.elements.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: blocks_default.socialElementItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: properties_default.fieldRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "select", label: "Mode", value: p.mode, onChange: (v) => update({ mode: v }), options: MODE_OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "text", label: "Icon Size", value: p.iconSize, onChange: (v) => update({ iconSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "text", label: "Icon Padding", value: p.iconPadding, onChange: (v) => update({ iconPadding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { className: properties_default.fieldLabel, children: "Social Elements" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: blocks_default.socialElementsContainer, children: p.elements.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: blocks_default.socialElementItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: properties_default.fieldRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             "select",
             {
               className: `${properties_default.fieldSelect} ${properties_default.fieldInputFlex}`,
               value: element.name,
               onChange: (e) => updateElement(index, { name: e.target.value }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "facebook", children: "Facebook" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "twitter", children: "Twitter" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "instagram", children: "Instagram" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "linkedin", children: "LinkedIn" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "youtube", children: "YouTube" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "github", children: "GitHub" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "pinterest", children: "Pinterest" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "snapchat", children: "Snapchat" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "tiktok", children: "TikTok" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "web", children: "Web" })
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "facebook", children: "Facebook" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "twitter", children: "Twitter" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "instagram", children: "Instagram" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "linkedin", children: "LinkedIn" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "youtube", children: "YouTube" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "github", children: "GitHub" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "pinterest", children: "Pinterest" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "snapchat", children: "Snapchat" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "tiktok", children: "TikTok" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "web", children: "Web" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveElement(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: `ee-item-move-down ${properties_default.itemActionBtn}`, onClick: () => moveElement(index, 1), disabled: index === p.elements.length - 1, title: "Move down", children: "\u2193" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeElement(index), title: "Remove", children: "\xD7" })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveElement(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { className: `ee-item-move-down ${properties_default.itemActionBtn}`, onClick: () => moveElement(index, 1), disabled: index === p.elements.length - 1, title: "Move down", children: "\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeElement(index), title: "Remove", children: "\xD7" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "input",
           {
             className: properties_default.fieldInputStacked,
@@ -28224,7 +29071,7 @@ function SocialProperties({ block }) {
             placeholder: "URL"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "input",
           {
             className: properties_default.fieldInputStacked,
@@ -28232,27 +29079,35 @@ function SocialProperties({ block }) {
             onChange: (e) => updateElement(index, { content: e.target.value }),
             placeholder: "Label (optional)"
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          SocialElementIconUpload,
+          {
+            element,
+            blockId: block.id,
+            onUpdate: (changes) => updateElement(index, changes)
+          }
         )
       ] }, element.id ?? `se-${index}`)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addElement, children: "+ Add Element" })
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addElement, children: "+ Add Element" })
     ] })
   ] });
 }
 
 // src/components/Properties/HtmlProperties.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function HtmlProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "textarea", label: "HTML Content", value: p.content, onChange: (v) => update({ content: v }), placeholder: "<p>Enter raw HTML here...</p>", rows: 10, code: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "textarea", label: "HTML Content", value: p.content, onChange: (v) => update({ content: v }), placeholder: "<p>Enter raw HTML here...</p>", rows: 10, code: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/VideoProperties.tsx
-var import_react53 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react55 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function getAutoThumbnail3(url) {
   if (!url) return "";
   const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
@@ -28262,7 +29117,7 @@ function getAutoThumbnail3(url) {
 function VideoProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  const handleVideoUrlChange = (0, import_react53.useCallback)(
+  const handleVideoUrlChange = (0, import_react55.useCallback)(
     (src) => {
       const updates = { src };
       if (!p.thumbnailUrl) {
@@ -28273,14 +29128,14 @@ function VideoProperties({ block }) {
     },
     [update, p.thumbnailUrl]
   );
-  const handleAutoThumbnail = (0, import_react53.useCallback)(() => {
+  const handleAutoThumbnail = (0, import_react55.useCallback)(() => {
     const auto = getAutoThumbnail3(p.src);
     if (auto) update({ thumbnailUrl: auto });
   }, [update, p.src]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { className: properties_default.fieldLabel, children: "Video URL" }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: properties_default.fieldLabel, children: "Video URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "input",
         {
           className: properties_default.fieldInput,
@@ -28290,9 +29145,9 @@ function VideoProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { className: properties_default.fieldLabel, children: "Thumbnail URL" }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: properties_default.fieldLabel, children: "Thumbnail URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "input",
         {
           className: properties_default.fieldInput,
@@ -28301,7 +29156,7 @@ function VideoProperties({ block }) {
           placeholder: "https://..."
         }
       ),
-      p.src && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      p.src && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "button",
         {
           className: `ee-auto-thumbnail ${properties_default.fieldBtnUpload} ${properties_default.fieldInputStacked}`,
@@ -28310,15 +29165,15 @@ function VideoProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Video description" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Video description" }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/HeadingProperties.tsx
-var import_react54 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react56 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var LEVEL_OPTIONS = [
   { value: "h1", label: "H1" },
   { value: "h2", label: "H2" },
@@ -28353,38 +29208,39 @@ var LEVEL_DEFAULTS = {
 function HeadingProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  const handleLevelChange = (0, import_react54.useCallback)(
+  const handleLevelChange = (0, import_react56.useCallback)(
     (level) => {
       const defaults2 = LEVEL_DEFAULTS[level] || LEVEL_DEFAULTS.h2;
       update({ level, fontSize: defaults2.fontSize, lineHeight: defaults2.lineHeight });
     },
     [update]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "select", label: "Heading Level", value: p.level, onChange: handleLevelChange, options: LEVEL_OPTIONS }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "color", label: "Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "bold", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "select", label: "Heading Level", value: p.level, onChange: handleLevelChange, options: LEVEL_OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor || "transparent", onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "bold", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/CountdownProperties.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function CountdownProperties({ block }) {
   const update = useBlockUpdate(block.id);
   if (!narrowBlock(block, "countdown")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { className: properties_default.fieldLabel, children: "Target Date" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { className: properties_default.fieldLabel, children: "Target Date" }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "input",
         {
           className: properties_default.fieldInput,
@@ -28394,27 +29250,27 @@ function CountdownProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "text", label: "Label", value: p.label, onChange: (v) => update({ label: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "color", label: "Digit Background", value: p.digitBackgroundColor, onChange: (v) => update({ digitBackgroundColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "color", label: "Digit Color", value: p.digitColor, onChange: (v) => update({ digitColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "color", label: "Label Color", value: p.labelColor, onChange: (v) => update({ labelColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "text", label: "Label", value: p.label, onChange: (v) => update({ label: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "color", label: "Digit Background", value: p.digitBackgroundColor, onChange: (v) => update({ digitBackgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "color", label: "Digit Color", value: p.digitColor, onChange: (v) => update({ digitColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "color", label: "Label Color", value: p.labelColor, onChange: (v) => update({ labelColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/MenuProperties.tsx
-var import_react55 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react57 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var HAMBURGER_OPTIONS = [
   { value: "false", label: "Off" },
   { value: "true", label: "On" }
 ];
 function MenuProperties({ block }) {
   const update = useBlockUpdate(block.id);
-  const updateItem = (0, import_react55.useCallback)(
+  const updateItem = (0, import_react57.useCallback)(
     (index, changes) => {
       const items = [...block.properties.items];
       items[index] = { ...items[index], ...changes };
@@ -28422,18 +29278,18 @@ function MenuProperties({ block }) {
     },
     [block.properties.items, update]
   );
-  const addItem = (0, import_react55.useCallback)(() => {
+  const addItem = (0, import_react57.useCallback)(() => {
     const items = [...block.properties.items, { id: generateId("mi"), text: "Link", href: "#" }];
     update({ items });
   }, [block.properties.items, update]);
-  const removeItem = (0, import_react55.useCallback)(
+  const removeItem = (0, import_react57.useCallback)(
     (index) => {
       const items = block.properties.items.filter((_, i) => i !== index);
       update({ items });
     },
     [block.properties.items, update]
   );
-  const moveItem = (0, import_react55.useCallback)(
+  const moveItem = (0, import_react57.useCallback)(
     (index, direction) => {
       const items = [...block.properties.items];
       const newIndex = index + direction;
@@ -28445,20 +29301,20 @@ function MenuProperties({ block }) {
   );
   if (!narrowBlock(block, "menu")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "select", label: "Hamburger Mode", value: p.hamburger ? "true" : "false", onChange: (v) => update({ hamburger: v === "true" }), options: HAMBURGER_OPTIONS }),
-    p.hamburger && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "color", label: "Icon Color", value: p.iconColor, onChange: (v) => update({ iconColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: properties_default.fieldLabel, children: "Menu Items" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: blocks_default.menuItemsContainer, children: p.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: blocks_default.menuItemEntry, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: properties_default.fieldRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "select", label: "Hamburger Mode", value: p.hamburger ? "true" : "false", onChange: (v) => update({ hamburger: v === "true" }), options: HAMBURGER_OPTIONS }),
+    p.hamburger && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "color", label: "Icon Color", value: p.iconColor, onChange: (v) => update({ iconColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { className: properties_default.fieldLabel, children: "Menu Items" }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: blocks_default.menuItemsContainer, children: p.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: blocks_default.menuItemEntry, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: properties_default.fieldRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "input",
             {
               className: properties_default.fieldInputFlex,
@@ -28467,11 +29323,11 @@ function MenuProperties({ block }) {
               placeholder: "Label"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveItem(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { className: `ee-item-move-down ${properties_default.itemActionBtn}`, onClick: () => moveItem(index, 1), disabled: index === p.items.length - 1, title: "Move down", children: "\u2193" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeItem(index), title: "Remove", children: "\xD7" })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveItem(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: `ee-item-move-down ${properties_default.itemActionBtn}`, onClick: () => moveItem(index, 1), disabled: index === p.items.length - 1, title: "Move down", children: "\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeItem(index), title: "Remove", children: "\xD7" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "input",
           {
             className: properties_default.fieldInputStacked,
@@ -28481,17 +29337,17 @@ function MenuProperties({ block }) {
           }
         )
       ] }, item.id ?? `mi-${index}`)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addItem, children: "+ Add Item" })
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addItem, children: "+ Add Item" })
     ] })
   ] });
 }
 
 // src/components/ImageUpload/ImageUploader.tsx
-var import_react56 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react58 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function ImageUploader({ blockId, onUploadComplete }) {
   const { imageUploadAdapter } = useImageAdapter();
-  const fileInputRef = (0, import_react56.useRef)(null);
+  const fileInputRef = (0, import_react58.useRef)(null);
   const { status, progress, error, upload, cancel } = useImageUpload({
     adapter: imageUploadAdapter,
     blockId,
@@ -28499,7 +29355,7 @@ function ImageUploader({ blockId, onUploadComplete }) {
       onUploadComplete(result.url, result.alt);
     }
   });
-  const handleFileChange = (0, import_react56.useCallback)(
+  const handleFileChange = (0, import_react58.useCallback)(
     async (e) => {
       const file = e.target.files?.[0];
       if (file) {
@@ -28508,26 +29364,26 @@ function ImageUploader({ blockId, onUploadComplete }) {
     },
     [upload]
   );
-  const handleClick2 = (0, import_react56.useCallback)(() => {
+  const handleClick2 = (0, import_react58.useCallback)(() => {
     fileInputRef.current?.click();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
-    status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `ee-image-uploading ${blocks_default.imageUploading}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
+    status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `ee-image-uploading ${blocks_default.imageUploading}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { children: [
           "Uploading... ",
           Math.round(progress),
           "%"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { className: "ee-upload-cancel", onClick: cancel, children: "Cancel" })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { className: "ee-upload-cancel", onClick: cancel, children: "Cancel" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `ee-image-progress ${blocks_default.imageProgress}`, style: { width: `${progress}%` } })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, onClick: handleClick2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: `ee-image-placeholder-icon ${blocks_default.imagePlaceholderIcon}`, children: "+" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: "Click to upload image" })
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `ee-image-progress ${blocks_default.imageProgress}`, style: { width: `${progress}%` } })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, onClick: handleClick2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: `ee-image-placeholder-icon ${blocks_default.imagePlaceholderIcon}`, children: "+" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: "Click to upload image" })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `ee-image-error ${blocks_default.imageError}`, children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `ee-image-error ${blocks_default.imageError}`, children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -28541,39 +29397,39 @@ function ImageUploader({ blockId, onUploadComplete }) {
 }
 
 // src/components/Properties/HeroProperties.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function HeroProperties({ block }) {
   const update = useBlockUpdate(block.id);
   if (!narrowBlock(block, "hero")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Heading", value: p.heading, onChange: (v) => update({ heading: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "textarea", label: "Subtext", value: p.subtext, onChange: (v) => update({ subtext: v }), rows: 3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Button Text", value: p.buttonText, onChange: (v) => update({ buttonText: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "link", label: "Button Link", value: p.buttonHref, onChange: (v) => update({ buttonHref: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Heading Color", value: p.headingColor, onChange: (v) => update({ headingColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Heading Font Size", value: p.headingFontSize, onChange: (v) => update({ headingFontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Subtext Color", value: p.subtextColor, onChange: (v) => update({ subtextColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Subtext Font Size", value: p.subtextFontSize, onChange: (v) => update({ subtextFontSize: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Button Background", value: p.buttonBackgroundColor, onChange: (v) => update({ buttonBackgroundColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Button Text Color", value: p.buttonColor, onChange: (v) => update({ buttonColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Button Border Radius", value: p.buttonBorderRadius, onChange: (v) => update({ buttonBorderRadius: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FieldSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertyField, { type: "text", label: "Background Image URL", value: p.backgroundImage, onChange: (v) => update({ backgroundImage: v }), placeholder: "https://example.com/image.jpg" }),
-    !p.backgroundImage && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "text", label: "Heading", value: p.heading, onChange: (v) => update({ heading: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "textarea", label: "Subtext", value: p.subtext, onChange: (v) => update({ subtext: v }), rows: 3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "text", label: "Button Text", value: p.buttonText, onChange: (v) => update({ buttonText: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "link", label: "Button Link", value: p.buttonHref, onChange: (v) => update({ buttonHref: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "color", label: "Heading Color", value: p.headingColor, onChange: (v) => update({ headingColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "text", label: "Heading Font Size", value: p.headingFontSize, onChange: (v) => update({ headingFontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "color", label: "Subtext Color", value: p.subtextColor, onChange: (v) => update({ subtextColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "text", label: "Subtext Font Size", value: p.subtextFontSize, onChange: (v) => update({ subtextFontSize: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "color", label: "Button Background", value: p.buttonBackgroundColor, onChange: (v) => update({ buttonBackgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "color", label: "Button Text Color", value: p.buttonColor, onChange: (v) => update({ buttonColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "text", label: "Button Border Radius", value: p.buttonBorderRadius, onChange: (v) => update({ buttonBorderRadius: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertyField, { type: "text", label: "Background Image URL", value: p.backgroundImage, onChange: (v) => update({ backgroundImage: v }), placeholder: "https://example.com/image.jpg" }),
+    !p.backgroundImage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       ImageUploader,
       {
         blockId: block.id,
         onUploadComplete: (url) => update({ backgroundImage: url })
       }
     ),
-    p.backgroundImage && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    p.backgroundImage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "button",
       {
         className: `ee-remove-bg ${properties_default.fieldBtnUpload}`,
@@ -28585,7 +29441,7 @@ function HeroProperties({ block }) {
 }
 
 // src/components/Properties/PropertiesPanel.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var BUILT_IN_PANELS = {
   text: TextProperties,
   button: ButtonProperties,
@@ -28609,28 +29465,28 @@ function PropertiesPanel() {
   if (selectedBlock) {
     const title = selectedBlock.type.charAt(0).toUpperCase() + selectedBlock.type.slice(1);
     const Component2 = getBlockPanel(selectedBlock.type);
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: [
         title,
         " Properties"
       ] }),
-      Component2 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Component2, { block: selectedBlock }) : null
+      Component2 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Component2, { block: selectedBlock }) : null
     ] });
   }
   if (selectedSection) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Section Properties" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SectionProperties, { section: selectedSection })
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Section Properties" }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SectionProperties, { section: selectedSection })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Email Settings" }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(HeadMetadataProperties, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Email Settings" }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HeadMetadataProperties, {})
   ] });
 }
 
 // src/components/Preview/PreviewPanel.tsx
-var import_react57 = require("react");
+var import_react59 = require("react");
 
 // src/styles/preview.module.css
 var preview_default = {
@@ -28645,17 +29501,17 @@ var preview_default = {
 };
 
 // src/components/Preview/PreviewPanel.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var PREVIEW_WIDTHS = {
   desktop: 600,
   mobile: 375
 };
 function PreviewPanel() {
   const { template } = useTemplateContext();
-  const [html2, setHtml] = (0, import_react57.useState)("");
-  const [previewMode, setPreviewMode] = (0, import_react57.useState)("desktop");
-  const iframeRef = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const [html2, setHtml] = (0, import_react59.useState)("");
+  const [previewMode, setPreviewMode] = (0, import_react59.useState)("desktop");
+  const iframeRef = (0, import_react59.useRef)(null);
+  (0, import_react59.useEffect)(() => {
     let cancelled = false;
     const timer = setTimeout(() => {
       async function compile() {
@@ -28672,7 +29528,7 @@ function PreviewPanel() {
       clearTimeout(timer);
     };
   }, [template]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (iframeRef.current && html2) {
       const doc3 = iframeRef.current.contentDocument;
       if (doc3) {
@@ -28682,9 +29538,9 @@ function PreviewPanel() {
       }
     }
   }, [html2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `ee-preview ${preview_default.preview}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `ee-preview-toggles ${preview_default.previewToggles}`, role: "group", "aria-label": "Preview size", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: `ee-preview ${preview_default.preview}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: `ee-preview-toggles ${preview_default.previewToggles}`, role: "group", "aria-label": "Preview size", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--desktop ${preview_default.previewToggle} ${preview_default.previewToggleDesktop} ${previewMode === "desktop" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
@@ -28694,7 +29550,7 @@ function PreviewPanel() {
           children: "Desktop"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--mobile ${preview_default.previewToggle} ${preview_default.previewToggleMobile} ${previewMode === "mobile" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
@@ -28705,7 +29561,7 @@ function PreviewPanel() {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `ee-preview-container ${preview_default.previewContainer}`, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `ee-preview-container ${preview_default.previewContainer}`, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "iframe",
       {
         className: `ee-preview-iframe ${preview_default.previewIframe}`,
@@ -28719,7 +29575,7 @@ function PreviewPanel() {
 }
 
 // src/components/SourceEditor/SourceEditor.tsx
-var import_react58 = require("react");
+var import_react60 = require("react");
 
 // src/styles/source-editor.module.css
 var source_editor_default = {
@@ -28732,16 +29588,16 @@ var source_editor_default = {
 };
 
 // src/components/SourceEditor/SourceEditor.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function SourceEditor() {
   const { template } = useTemplateContext();
   const dispatch = useEditorDispatch();
-  const [source, setSource] = (0, import_react58.useState)("");
-  const [error, setError] = (0, import_react58.useState)(null);
-  (0, import_react58.useEffect)(() => {
+  const [source, setSource] = (0, import_react60.useState)("");
+  const [error, setError] = (0, import_react60.useState)(null);
+  (0, import_react60.useEffect)(() => {
     setSource(generateMJML(template));
   }, [template]);
-  const handleApply = (0, import_react58.useCallback)(() => {
+  const handleApply = (0, import_react60.useCallback)(() => {
     try {
       const template2 = parseMJML(source);
       dispatch({ type: "SET_TEMPLATE", payload: template2 });
@@ -28750,10 +29606,10 @@ function SourceEditor() {
       setError(err.message);
     }
   }, [source, dispatch]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `ee-source-editor ${source_editor_default.sourceEditor}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `ee-source-header ${source_editor_default.sourceHeader}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: `ee-source-label ${source_editor_default.sourceLabel}`, children: "MJML Source" }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ee-source-editor ${source_editor_default.sourceEditor}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ee-source-header ${source_editor_default.sourceHeader}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: `ee-source-label ${source_editor_default.sourceLabel}`, children: "MJML Source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         "button",
         {
           className: `ee-source-apply ${source_editor_default.sourceApply}`,
@@ -28762,8 +29618,8 @@ function SourceEditor() {
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `ee-source-error ${source_editor_default.sourceError}`, children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `ee-source-error ${source_editor_default.sourceError}`, children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "textarea",
       {
         className: `ee-source-textarea ${source_editor_default.sourceTextarea}`,
@@ -28776,30 +29632,30 @@ function SourceEditor() {
 }
 
 // src/components/EmailEditor.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, ref) {
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var EditorInner = (0, import_react61.forwardRef)(function EditorInner2(props, ref) {
   const dispatch = useEditorDispatch();
   const { template, activeTab } = useTemplateContext();
   const selection = useSelectionContext();
   const { clearPersisted } = useConfigContext();
-  const containerRef = (0, import_react59.useRef)(null);
+  const containerRef = (0, import_react61.useRef)(null);
   const { onReady, onSave } = props;
-  const [sidebarOpen, setSidebarOpen] = (0, import_react59.useState)(false);
-  const [propertiesOpen, setPropertiesOpen] = (0, import_react59.useState)(false);
-  const [pendingRemoval, setPendingRemoval] = (0, import_react59.useState)(null);
-  const toggleSidebar = (0, import_react59.useCallback)(() => {
+  const [sidebarOpen, setSidebarOpen] = (0, import_react61.useState)(false);
+  const [propertiesOpen, setPropertiesOpen] = (0, import_react61.useState)(false);
+  const [pendingRemoval, setPendingRemoval] = (0, import_react61.useState)(null);
+  const toggleSidebar = (0, import_react61.useCallback)(() => {
     setSidebarOpen((prev) => !prev);
     setPropertiesOpen(false);
   }, []);
-  const toggleProperties = (0, import_react59.useCallback)(() => {
+  const toggleProperties = (0, import_react61.useCallback)(() => {
     setPropertiesOpen((prev) => !prev);
     setSidebarOpen(false);
   }, []);
-  const closeOverlays = (0, import_react59.useCallback)(() => {
+  const closeOverlays = (0, import_react61.useCallback)(() => {
     setSidebarOpen(false);
     setPropertiesOpen(false);
   }, []);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (selection.blockId) {
       if (typeof window !== "undefined" && window.innerWidth < 1024) {
         setPropertiesOpen(true);
@@ -28807,16 +29663,16 @@ var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, re
       }
     }
   }, [selection.blockId]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     onReady?.();
   }, []);
-  const templateRef = (0, import_react59.useRef)(template);
+  const templateRef = (0, import_react61.useRef)(template);
   templateRef.current = template;
-  const selectionRef = (0, import_react59.useRef)(selection);
+  const selectionRef = (0, import_react61.useRef)(selection);
   selectionRef.current = selection;
-  const onSaveRef = (0, import_react59.useRef)(onSave);
+  const onSaveRef = (0, import_react61.useRef)(onSave);
   onSaveRef.current = onSave;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const handler = (e) => {
@@ -28861,7 +29717,7 @@ var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, re
     el.addEventListener("keydown", handler);
     return () => el.removeEventListener("keydown", handler);
   }, [dispatch]);
-  const handleConfirmRemoval = (0, import_react59.useCallback)(() => {
+  const handleConfirmRemoval = (0, import_react61.useCallback)(() => {
     if (!pendingRemoval) return;
     if (pendingRemoval.type === "block") {
       dispatch({ type: "REMOVE_BLOCK", payload: pendingRemoval });
@@ -28870,7 +29726,7 @@ var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, re
     }
     setPendingRemoval(null);
   }, [dispatch, pendingRemoval]);
-  (0, import_react59.useImperativeHandle)(ref, () => ({
+  (0, import_react61.useImperativeHandle)(ref, () => ({
     getMJML: () => generateMJML(templateRef.current),
     getHTML: async () => {
       const mjml = generateMJML(templateRef.current);
@@ -28954,8 +29810,8 @@ var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, re
     editor_default.panelOverlay,
     sidebarOpen || propertiesOpen ? editor_default.panelOverlayVisible : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ref: containerRef, className: `ee-editor ${editor_default.editorContainer}`, tabIndex: -1, children: [
-    pendingRemoval && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ref: containerRef, className: `ee-editor ${editor_default.editorContainer}`, tabIndex: -1, children: [
+    pendingRemoval && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       ConfirmDialog,
       {
         title: pendingRemoval.type === "block" ? "Remove Block" : "Remove Section",
@@ -28964,7 +29820,7 @@ var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, re
         onCancel: () => setPendingRemoval(null)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       Toolbar,
       {
         sidebarOpen,
@@ -28973,22 +29829,22 @@ var EditorInner = (0, import_react59.forwardRef)(function EditorInner2(props, re
         onToggleProperties: toggleProperties
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: editor_default.editorBody, children: [
-      activeTab === "visual" && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Sidebar, { blockDefinitions: props.blockDefinitions }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Canvas, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `ee-properties ${propertiesClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PropertiesPanel, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: overlayClasses, onClick: closeOverlays })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: editor_default.editorBody, children: [
+      activeTab === "visual" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Sidebar, { blockDefinitions: props.blockDefinitions }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Canvas, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-properties ${propertiesClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PropertiesPanel, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: overlayClasses, onClick: closeOverlays })
       ] }),
-      activeTab === "source" && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `ee-source-layout ${editor_default.sourceLayout}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `ee-source-pane ${editor_default.sourcePane}`, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SourceEditor, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PreviewPanel, {}) }) })
+      activeTab === "source" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: `ee-source-layout ${editor_default.sourceLayout}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-source-pane ${editor_default.sourcePane}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SourceEditor, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PreviewPanel, {}) }) })
       ] }),
-      activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PreviewPanel, {}) })
+      activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PreviewPanel, {}) })
     ] })
   ] });
 });
-var EmailEditor = (0, import_react59.forwardRef)(
+var EmailEditor = (0, import_react61.forwardRef)(
   function EmailEditor2(props, ref) {
     const {
       initialTemplate,
@@ -29000,6 +29856,8 @@ var EmailEditor = (0, import_react59.forwardRef)(
       onVariablesChange,
       fontFamilies,
       fontSizes,
+      colorPresets,
+      onColorPresetsChange,
       persistenceKey,
       persistenceAdapter,
       className,
@@ -29021,7 +29879,7 @@ var EmailEditor = (0, import_react59.forwardRef)(
         template = void 0;
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       EditorProvider,
       {
         initialTemplate: template,
@@ -29032,6 +29890,8 @@ var EmailEditor = (0, import_react59.forwardRef)(
         onVariablesChange,
         fontFamilies,
         fontSizes,
+        colorPresets,
+        onColorPresetsChange,
         persistenceKey,
         persistenceAdapter,
         onBlockAdd,
@@ -29042,7 +29902,7 @@ var EmailEditor = (0, import_react59.forwardRef)(
         onSelectionChange,
         onTemplateLoad,
         onHistoryChange,
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `ee-editor-wrapper ${editor_default.editorWrapper} ${className || ""}`, style: style2, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(EditorInner, { ref, ...props }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-editor-wrapper ${editor_default.editorWrapper} ${className || ""}`, style: style2, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(EditorInner, { ref, ...props }) })
       }
     );
   }