@parathantl/react-email-editor 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/EmailEditor.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback35, useEffect as useEffect17, useImperativeHandle, useRef as useRef21, useState as useState20 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback37, useEffect as useEffect18, useImperativeHandle, useRef as useRef24, useState as useState24 } from "react";
 
 // src/context/EditorContext.tsx
 import {
@@ -7,7 +7,8 @@ import {
   useCallback as useCallback4,
   useEffect as useEffect3,
   useMemo as useMemo3,
-  useRef as useRef4
+  useRef as useRef4,
+  useState as useState2
 } from "react";
 
 // src/constants.ts
@@ -21,7 +22,8 @@ var DEFAULT_TEXT_PROPERTIES = {
   align: "left",
   fontWeight: "normal",
   textTransform: "none",
-  letterSpacing: "normal"
+  letterSpacing: "normal",
+  backgroundColor: "transparent"
 };
 var DEFAULT_BUTTON_PROPERTIES = {
   text: "Click me",
@@ -91,12 +93,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),
@@ -222,7 +225,7 @@ var BLOCK_DEFINITIONS = [
   {
     type: "social",
     label: "Social",
-    icon: "\u{1F517}",
+    icon: "\u{1F465}",
     description: "Social media links"
   },
   {
@@ -1127,6 +1130,10 @@ function useImageAdapter() {
   const { imageUploadAdapter } = useConfigContext();
   return { imageUploadAdapter };
 }
+function useColorPresets() {
+  const { customColorPresets, addCustomColorPreset, removeCustomColorPreset } = useConfigContext();
+  return { customColorPresets, addCustomColorPreset, removeCustomColorPreset };
+}
 
 // src/context/EditorContext.tsx
 import { jsx } from "react/jsx-runtime";
@@ -1141,6 +1148,8 @@ function EditorProvider({
   onVariablesChange,
   fontFamilies: fontFamiliesProp,
   fontSizes: fontSizesProp,
+  colorPresets: colorPresetsProp,
+  onColorPresetsChange,
   persistenceKey,
   persistenceAdapter,
   onBlockAdd,
@@ -1156,6 +1165,24 @@ function EditorProvider({
 }) {
   const fontFamilies = fontFamiliesProp ?? FONT_OPTIONS;
   const fontSizes = fontSizesProp ?? DEFAULT_FONT_SIZES;
+  const [customColorPresets, setCustomColorPresets] = useState2(colorPresetsProp ?? []);
+  const onColorPresetsChangeRef = useRef4(onColorPresetsChange);
+  onColorPresetsChangeRef.current = onColorPresetsChange;
+  const addCustomColorPreset = useCallback4((color) => {
+    setCustomColorPresets((prev) => {
+      if (prev.includes(color)) return prev;
+      const next = [...prev, color];
+      onColorPresetsChangeRef.current?.(next);
+      return next;
+    });
+  }, []);
+  const removeCustomColorPreset = useCallback4((color) => {
+    setCustomColorPresets((prev) => {
+      const next = prev.filter((c) => c !== color);
+      onColorPresetsChangeRef.current?.(next);
+      return next;
+    });
+  }, []);
   const resolvedInitial = useMemo3(() => {
     if (persistenceKey) {
       const adapter = persistenceAdapter ?? localStorageAdapter;
@@ -1370,9 +1397,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 = useMemo3(() => state.blockIndex, [state.blockIndex]);
   return /* @__PURE__ */ jsx(DispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(MethodsContext.Provider, { value: methodsValue, children: /* @__PURE__ */ jsx(HistoryContext.Provider, { value: historyValue, children: /* @__PURE__ */ jsx(TemplateContext.Provider, { value: templateValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionValue, children: /* @__PURE__ */ jsx(ConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ jsx(BlockIndexContext.Provider, { value: blockIndexValue, children }) }) }) }) }) }) });
@@ -1506,7 +1536,7 @@ function ConfirmDialog({
 }
 
 // src/components/Toolbar/Toolbar.tsx
-import React3, { useCallback as useCallback6, useRef as useRef6, useState as useState2, useEffect as useEffect5 } from "react";
+import React3, { useCallback as useCallback6, useRef as useRef6, useState as useState3, useEffect as useEffect5 } from "react";
 
 // src/utils/sanitize.ts
 var ALLOWED_TAGS = /* @__PURE__ */ new Set([
@@ -1694,8 +1724,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 = [];
@@ -1708,6 +1754,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>");
@@ -1830,7 +1893,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>`;
@@ -1857,7 +1921,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,
@@ -1899,12 +1963,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>`);
@@ -1922,7 +1988,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,
@@ -1950,6 +2016,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 || ""));
@@ -2034,10 +2101,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(
@@ -2064,6 +2138,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;
@@ -2183,7 +2261,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",
@@ -2569,6 +2647,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;
@@ -2585,6 +2673,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(),
@@ -2599,7 +2692,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"
     }
   };
 }
@@ -2625,7 +2719,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"
     }
   };
 }
@@ -2766,8 +2861,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");
@@ -2843,19 +2946,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",
@@ -2863,7 +2971,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
@@ -2892,7 +3003,7 @@ var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onTog
   const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
   const fileInputRef = useRef6(null);
-  const [exportOpen, setExportOpen] = useState2(false);
+  const [exportOpen, setExportOpen] = useState3(false);
   const templateRef = useRef6(template);
   templateRef.current = template;
   useEffect5(() => {
@@ -3226,11 +3337,11 @@ var BlockPalette = React4.memo(function BlockPalette2({ blockDefinitions }) {
 });
 
 // src/components/Sidebar/VariableList.tsx
-import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef7, useState as useState3 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef7, useState as useState4 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function VariableList() {
   const { variables, customVariables, insertVariable, removeCustomVariable } = useEditorVariables();
-  const [flashKey, setFlashKey] = useState3(null);
+  const [flashKey, setFlashKey] = useState4(null);
   const flashTimerRef = useRef7(null);
   useEffect6(() => {
     return () => {
@@ -3299,15 +3410,15 @@ function VariableList() {
 }
 
 // src/components/Sidebar/AddVariableForm.tsx
-import { useState as useState4, useCallback as useCallback9 } from "react";
+import { useState as useState5, useCallback as useCallback9 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function AddVariableForm() {
   const { variables, addCustomVariable } = useEditorVariables();
-  const [isOpen, setIsOpen] = useState4(false);
-  const [key, setKey] = useState4("");
-  const [label, setLabel] = useState4("");
-  const [group, setGroup] = useState4("Custom");
-  const [error, setError] = useState4(null);
+  const [isOpen, setIsOpen] = useState5(false);
+  const [key, setKey] = useState5("");
+  const [label, setLabel] = useState5("");
+  const [group, setGroup] = useState5("Custom");
+  const [error, setError] = useState5(null);
   const resetForm = useCallback9(() => {
     setKey("");
     setLabel("");
@@ -3439,19 +3550,19 @@ function Sidebar({ blockDefinitions }) {
 }
 
 // src/components/Canvas/Canvas.tsx
-import React28, { useCallback as useCallback20, useState as useState15 } from "react";
+import React30, { useCallback as useCallback22, useState as useState18 } from "react";
 
 // src/components/Canvas/Section.tsx
-import React26, { useCallback as useCallback18, useState as useState13 } from "react";
+import React28, { useCallback as useCallback20, useState as useState16 } from "react";
 
 // src/components/Canvas/Column.tsx
-import React25, { useCallback as useCallback17, useState as useState12 } from "react";
+import React27, { useCallback as useCallback19, useState as useState15 } from "react";
 
 // src/components/Canvas/BlockRenderer.tsx
-import React23 from "react";
+import React25 from "react";
 
 // src/components/Canvas/blocks/TextBlock.tsx
-import React11, { useCallback as useCallback12, useRef as useRef11, useState as useState7, useEffect as useEffect10, useReducer as useReducer2, useMemo as useMemo5 } from "react";
+import React13, { useCallback as useCallback14, useRef as useRef13, useState as useState10, useEffect as useEffect11, useReducer as useReducer2, useMemo as useMemo5 } from "react";
 
 // src/tiptap/TipTapEditor.tsx
 import { useMemo as useMemo4, useEffect as useEffect8, useRef as useRef9 } from "react";
@@ -19762,7 +19873,7 @@ function canInsertNode(state, nodeType) {
 }
 
 // node_modules/@tiptap/react/dist/index.js
-import React8, { forwardRef, useState as useState5, useDebugValue, useLayoutEffect, useEffect as useEffect7, useRef as useRef8, createContext as createContext8, useContext as useContext8, version, createRef, memo, createElement } from "react";
+import React8, { forwardRef, useState as useState6, useDebugValue, useLayoutEffect, useEffect as useEffect7, useRef as useRef8, createContext as createContext8, useContext as useContext8, version, createRef, memo, createElement } from "react";
 import ReactDOM, { flushSync } from "react-dom";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -20136,7 +20247,7 @@ var EditorStateManager = class {
 };
 function useEditorState2(options) {
   var _a;
-  const [editorStateManager] = useState5(() => new EditorStateManager(options.editor));
+  const [editorStateManager] = useState6(() => new EditorStateManager(options.editor));
   const selectedState = withSelectorExports.useSyncExternalStoreWithSelector(editorStateManager.subscribe, editorStateManager.getSnapshot, editorStateManager.getServerSnapshot, options.selector, (_a = options.equalityFn) !== null && _a !== void 0 ? _a : deepEqual);
   useIsomorphicLayoutEffect(() => {
     return editorStateManager.watch(options.editor);
@@ -20360,7 +20471,7 @@ var EditorInstanceManager = class _EditorInstanceManager {
 function useEditor(options = {}, deps = []) {
   const mostRecentOptions = useRef8(options);
   mostRecentOptions.current = options;
-  const [instanceManager] = useState5(() => new EditorInstanceManager(mostRecentOptions));
+  const [instanceManager] = useState6(() => new EditorInstanceManager(mostRecentOptions));
   const editor = shimExports.useSyncExternalStore(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
   useDebugValue(editor);
   useEffect7(instanceManager.onRender(deps));
@@ -24330,6 +24441,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 [
@@ -24345,9 +24534,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: {
@@ -24358,6 +24561,7 @@ function getExtensions(placeholder) {
     Placeholder.configure({
       placeholder: placeholder ?? "Type something..."
     }),
+    Indent,
     VariableNode
   ];
 }
@@ -24374,6 +24578,7 @@ var ALLOWED_TAGS2 = /* @__PURE__ */ new Set([
   "s",
   "a",
   "span",
+  "mark",
   "h1",
   "h2",
   "h3",
@@ -24577,240 +24782,591 @@ function TipTapEditor({
 }
 
 // src/components/Toolbar/RichTextToolbar.tsx
-import { useState as useState6, useCallback as useCallback11, useRef as useRef10, useEffect as useEffect9 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "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();
+import { useState as useState9, useCallback as useCallback13, useRef as useRef12, useEffect as useEffect10 } from "react";
+
+// src/components/shared/HslColorArea.tsx
+import { useRef as useRef10, useCallback as useCallback11, useEffect as useEffect9, useState as useState7 } from "react";
+
+// 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__ */ jsxs8("div", { className: `ee-richtext-toolbar ${toolbar_default.richTextToolbar}`, onMouseDown: preventBlur, children: [
-    /* @__PURE__ */ jsx10(FontFamilySelect, { editor }),
-    /* @__PURE__ */ jsx10("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ jsx10(FontSizeSelect, { editor }),
-    /* @__PURE__ */ jsx10("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ jsx10(
-      "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__ */ jsx10("strong", { children: "B" })
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      "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__ */ jsx10("em", { children: "I" })
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      "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__ */ jsx10("u", { children: "U" })
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      "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__ */ jsx10("s", { children: "S" })
-      }
-    ),
-    /* @__PURE__ */ jsx10("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ jsx10(
-      InlineColorPicker,
-      {
-        editor,
-        type: "color",
-        title: "Text Color",
-        label: "A"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      InlineColorPicker,
-      {
-        editor,
-        type: "highlight",
-        title: "Highlight",
-        label: "H"
-      }
-    ),
-    /* @__PURE__ */ jsx10("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ jsx10(
-      "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__ */ jsx10(
-      "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__ */ jsx10(
-      "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__ */ jsx10("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ jsx10(
-      "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
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function HslColorArea({ value, onChange, onChangeEnd }) {
+  const [hsl, setHsl] = useState7(() => hexToHsl(value));
+  const areaRef = useRef10(null);
+  const hueRef = useRef10(null);
+  const draggingArea = useRef10(false);
+  const draggingHue = useRef10(false);
+  const latestHex = useRef10(value);
+  useEffect9(() => {
+    const parsed = hexToHsl(value);
+    setHsl(parsed);
+  }, [value]);
+  const emitColor = useCallback11(
+    (h, s, l) => {
+      setHsl({ h, s, l });
+      const hex = hslToHex(h, s, l);
+      latestHex.current = hex;
+      onChange(hex);
+    },
+    [onChange]
+  );
+  const handleAreaPointer = useCallback11(
+    (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 = useCallback11(
+    (e) => {
+      e.preventDefault();
+      draggingArea.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      handleAreaPointer(e);
+    },
+    [handleAreaPointer]
+  );
+  const onAreaPointerMove = useCallback11(
+    (e) => {
+      if (!draggingArea.current) return;
+      handleAreaPointer(e);
+    },
+    [handleAreaPointer]
+  );
+  const onAreaPointerUp = useCallback11(() => {
+    draggingArea.current = false;
+    onChangeEnd?.(latestHex.current);
+  }, [onChangeEnd]);
+  const handleHuePointer = useCallback11(
+    (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 = useCallback11(
+    (e) => {
+      e.preventDefault();
+      draggingHue.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      handleHuePointer(e);
+    },
+    [handleHuePointer]
+  );
+  const onHuePointerMove = useCallback11(
+    (e) => {
+      if (!draggingHue.current) return;
+      handleHuePointer(e);
+    },
+    [handleHuePointer]
+  );
+  const onHuePointerUp = useCallback11(() => {
+    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__ */ jsxs8("div", { className: colorArea_default.hslPicker, children: [
     /* @__PURE__ */ jsx10(
-      "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__ */ jsx10(
+          "div",
+          {
+            className: colorArea_default.hslAreaThumb,
+            style: {
+              left: `${hsl.s}%`,
+              top: `${100 - hsl.l}%`,
+              backgroundColor: value
+            }
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsx10("div", { className: `ee-richtext-separator ${toolbar_default.richTextSeparator}` }),
-    /* @__PURE__ */ jsx10(InlineLinkEditor, { editor }),
     /* @__PURE__ */ jsx10(
-      "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__ */ jsx10(
+          "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__ */ jsxs8(
-    "select",
+
+// src/components/Toolbar/toolbar-icons.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var BoldIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+  /* @__PURE__ */ jsx11("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+] });
+var ItalicIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
+  /* @__PURE__ */ jsx11("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
+  /* @__PURE__ */ jsx11("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
+] });
+var UnderlineIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("path", { d: "M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" }),
+  /* @__PURE__ */ jsx11("line", { x1: "4", y1: "21", x2: "20", y2: "21" })
+] });
+var StrikethroughIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("path", { d: "M16 4H9a3 3 0 0 0-3 3c0 2 1.5 3 3 3" }),
+  /* @__PURE__ */ jsx11("path", { d: "M12 15c1.5 0 3 1 3 3a3 3 0 0 1-3 3H8" }),
+  /* @__PURE__ */ jsx11("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
+] });
+var AlignLeftIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "17", y1: "10", x2: "3", y2: "10" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ jsx11("line", { x1: "17", y1: "18", x2: "3", y2: "18" })
+] });
+var AlignCenterIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "18", y1: "10", x2: "6", y2: "10" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ jsx11("line", { x1: "18", y1: "18", x2: "6", y2: "18" })
+] });
+var AlignRightIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "21", y1: "10", x2: "7", y2: "10" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "18", x2: "7", y2: "18" })
+] });
+var BulletListIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx11("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ jsx11("circle", { cx: "4", cy: "6", r: "1", fill: color }),
+  /* @__PURE__ */ jsx11("circle", { cx: "4", cy: "12", r: "1", fill: color }),
+  /* @__PURE__ */ jsx11("circle", { cx: "4", cy: "18", r: "1", fill: color })
+] });
+var OrderedListIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "10", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "10", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx11("line", { x1: "10", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ jsx11("text", { x: "2", y: "8", fontSize: "8", fill: color, stroke: "none", fontFamily: "sans-serif", fontWeight: "bold", children: "1" }),
+  /* @__PURE__ */ jsx11("text", { x: "2", y: "14", fontSize: "8", fill: color, stroke: "none", fontFamily: "sans-serif", fontWeight: "bold", children: "2" }),
+  /* @__PURE__ */ jsx11("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__ */ jsxs9("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__ */ jsx11("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "10", x2: "11", y2: "10" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "18", x2: "11", y2: "18" }),
+  /* @__PURE__ */ jsx11("polyline", { points: "3 8 7 10 3 12" })
+] });
+var OutdentIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "10", x2: "11", y2: "10" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "18", x2: "11", y2: "18" }),
+  /* @__PURE__ */ jsx11("polyline", { points: "7 8 3 10 7 12" })
+] });
+var TextColorIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("path", { d: "M5 18h14", stroke: "none" }),
+  /* @__PURE__ */ jsx11("path", { d: "M9 3L5 15h2l1-3h8l1 3h2L15 3H9z", fill: "none", stroke: color, strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx11("path", { d: "M9.5 10l2.5-6 2.5 6h-5z", fill: "none" })
+] });
+var HighlightIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("path", { d: "M12 20h9" }),
+  /* @__PURE__ */ jsx11("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__ */ jsxs9("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__ */ jsx11("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__ */ jsx11("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__ */ jsxs9("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__ */ jsx11("path", { d: "M6 4h12l-6 16" }),
+  /* @__PURE__ */ jsx11("line", { x1: "2", y1: "2", x2: "22", y2: "22" })
+] });
+var AlignJustifyIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsxs9("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__ */ jsx11("line", { x1: "21", y1: "10", x2: "3", y2: "10" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "14", x2: "3", y2: "14" }),
+  /* @__PURE__ */ jsx11("line", { x1: "21", y1: "18", x2: "3", y2: "18" })
+] });
+var HorizontalRuleIcon = ({ size = 14, color = "currentColor" }) => /* @__PURE__ */ jsx11("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__ */ jsx11("line", { x1: "3", y1: "12", x2: "21", y2: "12" }) });
+
+// src/components/Toolbar/Tooltip.tsx
+import { useState as useState8, useRef as useRef11, useCallback as useCallback12 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function Tooltip({ label, shortcut, children }) {
+  const [visible, setVisible] = useState8(false);
+  const timerRef = useRef11(null);
+  const show = useCallback12(() => {
+    timerRef.current = setTimeout(() => setVisible(true), 400);
+  }, []);
+  const hide = useCallback12(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+    setVisible(false);
+  }, []);
+  return /* @__PURE__ */ jsxs10(
+    "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__ */ jsx10("option", { value: "", children: "Default" }),
-        fonts.map((font) => /* @__PURE__ */ jsx10("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
+        children,
+        visible && /* @__PURE__ */ jsxs10("span", { className: toolbar_default.richTextTooltip, role: "tooltip", children: [
+          /* @__PURE__ */ jsx12("span", { children: label }),
+          shortcut && /* @__PURE__ */ jsx12("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
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "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__ */ jsxs8(
-    "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__ */ jsx10("option", { value: "", children: "Size" }),
-        sizes.map((size) => /* @__PURE__ */ jsx10("option", { value: size, children: parseInt(size, 10) }, size))
-      ]
-    }
-  );
+  e.preventDefault();
 }
-function InlineLinkEditor({ editor }) {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [url, setUrl] = useState6("");
-  const wrapperRef = useRef10(null);
-  const inputRef = useRef10(null);
-  const isActive2 = editor.isActive("link");
-  const currentHref = editor.getAttributes("link").href || "";
-  useEffect9(() => {
-    function handleClickOutside(e) {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    }
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
+function RichTextToolbar({ editor }) {
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-toolbar ${toolbar_default.richTextToolbar}`, onMouseDown: preventBlur, children: [
+    /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ jsx13(FontFamilySelect, { editor }),
+      /* @__PURE__ */ jsx13(FontSizeSelect, { editor })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Bold", shortcut: "Ctrl+B", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(BoldIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Italic", shortcut: "Ctrl+I", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(ItalicIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Underline", shortcut: "Ctrl+U", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(UnderlineIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Strikethrough", shortcut: "Ctrl+Shift+X", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(StrikethroughIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ jsx13(
+        InlineColorPicker,
+        {
+          editor,
+          type: "color",
+          title: "Text Color",
+          icon: /* @__PURE__ */ jsx13(TextColorIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        InlineColorPicker,
+        {
+          editor,
+          type: "highlight",
+          title: "Highlight",
+          icon: /* @__PURE__ */ jsx13(HighlightIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Align Left", shortcut: "Ctrl+Shift+L", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(AlignLeftIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Align Center", shortcut: "Ctrl+Shift+E", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(AlignCenterIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Align Right", shortcut: "Ctrl+Shift+R", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(AlignRightIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Justify", shortcut: "Ctrl+Shift+J", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(AlignJustifyIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Bullet List", shortcut: "Ctrl+Shift+8", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(BulletListIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Ordered List", shortcut: "Ctrl+Shift+7", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(OrderedListIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Outdent", shortcut: "Shift+Tab", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(OutdentIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Indent", shortcut: "Tab", children: /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(IndentIcon, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
+      /* @__PURE__ */ jsx13(InlineLinkEditor, { editor }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Horizontal Rule", children: /* @__PURE__ */ jsx13(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-hr ${toolbar_default.richTextBtn}`,
+          onClick: () => editor.chain().focus().setHorizontalRule().run(),
+          "aria-label": "Horizontal Rule",
+          children: /* @__PURE__ */ jsx13(HorizontalRuleIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx13(Tooltip, { label: "Clear Formatting", children: /* @__PURE__ */ jsx13(
+        "button",
+        {
+          className: `ee-richtext-btn ee-richtext-clear ${toolbar_default.richTextBtn}`,
+          onClick: () => editor.chain().focus().unsetAllMarks().run(),
+          "aria-label": "Clear Formatting",
+          children: /* @__PURE__ */ jsx13(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__ */ jsxs11(
+    "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__ */ jsx13("option", { value: "", children: "Default" }),
+        fonts.map((font) => /* @__PURE__ */ jsx13("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__ */ jsxs11(
+    "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__ */ jsx13("option", { value: "", children: "Size" }),
+        sizes.map((size) => /* @__PURE__ */ jsx13("option", { value: size, children: parseInt(size, 10) }, size))
+      ]
+    }
+  );
+}
+function InlineLinkEditor({ editor }) {
+  const [isOpen, setIsOpen] = useState9(false);
+  const [url, setUrl] = useState9("");
+  const wrapperRef = useRef12(null);
+  const inputRef = useRef12(null);
+  const isActive2 = editor.isActive("link");
+  const currentHref = editor.getAttributes("link").href || "";
+  useEffect10(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  const handleOpen = useCallback11(() => {
+  const handleOpen = useCallback13(() => {
     setUrl(currentHref);
     setUrlError("");
     setIsOpen(true);
     setTimeout(() => inputRef.current?.focus(), 50);
   }, [currentHref]);
-  const [urlError, setUrlError] = useState6("");
-  const handleApply = useCallback11(() => {
+  const [urlError, setUrlError] = useState9("");
+  const handleApply = useCallback13(() => {
     const trimmed = url.trim();
     if (trimmed) {
       if (!isSafeURL(trimmed)) {
@@ -24822,12 +25378,12 @@ function InlineLinkEditor({ editor }) {
     }
     setIsOpen(false);
   }, [editor, url]);
-  const handleRemove = useCallback11(() => {
+  const handleRemove = useCallback13(() => {
     editor.chain().focus().unsetLink().run();
     setIsOpen(false);
     setUrl("");
   }, [editor]);
-  const handleKeyDown2 = useCallback11(
+  const handleKeyDown2 = useCallback13(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -24838,8 +25394,8 @@ function InlineLinkEditor({ editor }) {
     },
     [handleApply]
   );
-  return /* @__PURE__ */ jsxs8("div", { className: `ee-richtext-link ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-link ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx13(
       "button",
       {
         className: `ee-richtext-btn ee-richtext-link-btn ${toolbar_default.richTextBtn} ${isActive2 ? toolbar_default.richTextBtnActive : ""}`,
@@ -24847,12 +25403,12 @@ function InlineLinkEditor({ editor }) {
         title: "Link",
         "aria-label": "Link",
         "aria-pressed": isActive2,
-        children: "\u{1F517}"
+        children: /* @__PURE__ */ jsx13(LinkIcon, {})
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs8("div", { className: `ee-richtext-link-dropdown ${toolbar_default.richTextLinkDropdown}`, children: [
-      /* @__PURE__ */ jsx10("label", { className: `ee-richtext-link-label ${toolbar_default.richTextLinkLabel}`, children: "URL" }),
-      /* @__PURE__ */ jsx10(
+    isOpen && /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-link-dropdown ${toolbar_default.richTextLinkDropdown}`, children: [
+      /* @__PURE__ */ jsx13("label", { className: `ee-richtext-link-label ${toolbar_default.richTextLinkLabel}`, children: "URL" }),
+      /* @__PURE__ */ jsx13(
         "input",
         {
           ref: inputRef,
@@ -24863,19 +25419,26 @@ function InlineLinkEditor({ editor }) {
           placeholder: "https://, mailto:, or tel:"
         }
       ),
-      urlError && /* @__PURE__ */ jsx10("div", { className: `ee-richtext-link-error ${toolbar_default.richTextLinkError}`, children: urlError }),
-      /* @__PURE__ */ jsxs8("div", { className: `ee-richtext-link-actions ${toolbar_default.richTextLinkActions}`, children: [
-        /* @__PURE__ */ jsx10("button", { className: `ee-richtext-link-apply ${toolbar_default.richTextLinkApply}`, onClick: handleApply, children: "Apply" }),
-        isActive2 && /* @__PURE__ */ jsx10("button", { className: `ee-richtext-link-remove ${toolbar_default.richTextLinkRemove}`, onClick: handleRemove, children: "Remove" })
+      urlError && /* @__PURE__ */ jsx13("div", { className: `ee-richtext-link-error ${toolbar_default.richTextLinkError}`, children: urlError }),
+      /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-link-actions ${toolbar_default.richTextLinkActions}`, children: [
+        /* @__PURE__ */ jsx13("button", { className: `ee-richtext-link-apply ${toolbar_default.richTextLinkApply}`, onClick: handleApply, children: "Apply" }),
+        isActive2 && /* @__PURE__ */ jsx13("button", { className: `ee-richtext-link-remove ${toolbar_default.richTextLinkRemove}`, onClick: handleRemove, children: "Remove" })
       ] })
     ] })
   ] });
 }
-function InlineColorPicker({ editor, type, title, label }) {
-  const [isOpen, setIsOpen] = useState6(false);
-  const wrapperRef = useRef10(null);
+function InlineColorPicker({ editor, type, title, icon }) {
+  const [isOpen, setIsOpen] = useState9(false);
+  const [hexInput, setHexInput] = useState9("");
+  const wrapperRef = useRef12(null);
+  const { customColorPresets, addCustomColorPreset, removeCustomColorPreset } = useColorPresets();
   const currentColor = type === "color" ? editor.getAttributes("textStyle").color || "#000000" : editor.getAttributes("highlight").color || "";
-  useEffect9(() => {
+  useEffect10(() => {
+    if (isOpen) {
+      setHexInput(currentColor || "#000000");
+    }
+  }, [isOpen, currentColor]);
+  useEffect10(() => {
     function handleClickOutside(e) {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -24886,18 +25449,19 @@ function InlineColorPicker({ editor, type, title, label }) {
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  const applyColor = useCallback11(
-    (color) => {
+  const applyColor = useCallback13(
+    (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 = useCallback11(() => {
+  const clearColor = useCallback13(() => {
     if (type === "color") {
       editor.chain().focus().unsetColor().run();
     } else {
@@ -24905,19 +25469,41 @@ function InlineColorPicker({ editor, type, title, label }) {
     }
     setIsOpen(false);
   }, [editor, type]);
+  const handleHexApply = useCallback13(() => {
+    const trimmed = hexInput.trim();
+    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed)) {
+      applyColor(trimmed, true);
+    }
+  }, [hexInput, applyColor]);
+  const handleHexKeyDown = useCallback13(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleHexApply();
+      }
+    },
+    [handleHexApply]
+  );
+  const handleSaveCustom = useCallback13(() => {
+    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__ */ jsxs8("div", { className: `ee-richtext-color ee-richtext-color--${type} ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-color ee-richtext-color--${type} ${toolbar_default.richTextColorWrapper}`, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsxs11(
       "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__ */ jsx10("span", { className: `ee-richtext-color-label ${toolbar_default.richTextColorLabel}`, children: label }),
-          /* @__PURE__ */ jsx10(
+          icon,
+          /* @__PURE__ */ jsx13(
             "span",
             {
               className: `ee-richtext-color-indicator ${toolbar_default.richTextColorIndicator}`,
@@ -24927,29 +25513,91 @@ function InlineColorPicker({ editor, type, title, label }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs8("div", { className: `ee-richtext-color-dropdown ${toolbar_default.richTextColorDropdown}`, children: [
-      /* @__PURE__ */ jsx10("div", { className: `ee-richtext-color-grid ${toolbar_default.richTextColorGrid}`, children: COLOR_PRESETS.map((color) => /* @__PURE__ */ jsx10(
+    isOpen && /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-color-dropdown ${toolbar_default.richTextColorDropdown}`, children: [
+      /* @__PURE__ */ jsx13("div", { className: `ee-richtext-color-section-label ${toolbar_default.richTextColorSectionLabel}`, children: "Presets" }),
+      /* @__PURE__ */ jsx13("div", { className: `ee-richtext-color-grid ${toolbar_default.richTextColorGrid}`, children: COLOR_PRESETS.map((color) => /* @__PURE__ */ jsx13(
         "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__ */ jsxs8("div", { className: `ee-richtext-color-actions ${toolbar_default.richTextColorActions}`, children: [
-        /* @__PURE__ */ jsx10(
+      customColorPresets.length > 0 && /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        /* @__PURE__ */ jsx13("div", { className: `ee-richtext-color-section-label ${toolbar_default.richTextColorSectionLabel}`, children: "Custom" }),
+        /* @__PURE__ */ jsx13("div", { className: `ee-richtext-color-grid ${toolbar_default.richTextColorGrid}`, children: customColorPresets.map((color) => /* @__PURE__ */ jsx13(
+          "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__ */ jsx13(
+              "span",
+              {
+                className: `ee-richtext-color-swatch-remove ${toolbar_default.richTextColorSwatchRemove}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeCustomColorPreset(color);
+                },
+                title: "Remove",
+                children: "\xD7"
+              }
+            )
+          },
+          `custom-${color}`
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx13("div", { style: { borderTop: "1px solid var(--ee-border-color)", paddingTop: "var(--ee-space-sm)" }, children: /* @__PURE__ */ jsx13(
+        HslColorArea,
+        {
+          value: isValidHex ? hexInput.trim() : currentColor || "#000000",
+          onChange: (hex) => {
+            setHexInput(hex);
+          },
+          onChangeEnd: (hex) => {
+            applyColor(hex);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-color-custom-row ${toolbar_default.richTextColorCustomRow}`, children: [
+        /* @__PURE__ */ jsx13(
           "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__ */ jsx13(
+          "button",
+          {
+            className: `ee-richtext-color-apply ${toolbar_default.richTextColorApplyBtn}`,
+            onClick: handleHexApply,
+            disabled: !isValidHex,
+            title: "Apply color",
+            children: "Apply"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-color-bottom ${toolbar_default.richTextColorBottomActions}`, children: [
+        /* @__PURE__ */ jsx13(
+          "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__ */ jsx10(
+        /* @__PURE__ */ jsx13(
           "button",
           {
             className: `ee-richtext-color-clear ${toolbar_default.richTextColorClearBtn}`,
@@ -24991,6 +25639,8 @@ var blocks_default = {
   "socialLabel": "socialLabel",
   "socialElementsContainer": "socialElementsContainer",
   "socialElementItem": "socialElementItem",
+  "socialIconImage": "socialIconImage",
+  "socialIconPreview": "socialIconPreview",
   "htmlBlock": "htmlBlock",
   "htmlPlaceholder": "htmlPlaceholder",
   "videoBlock": "videoBlock",
@@ -25024,17 +25674,17 @@ var tiptap_default = {
 };
 
 // src/components/Canvas/blocks/TextBlock.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextBlockInner = function TextBlock({ block }) {
   const dispatch = useEditorDispatch();
   const { setActiveEditor } = useMethodsContext();
-  const editorRef = useRef11(null);
-  const wrapperRef = useRef11(null);
-  const blurTimerRef = useRef11(null);
-  const [isFocused, setIsFocused] = useState7(false);
-  const [editorInstance, setEditorInstance] = useState7(null);
+  const editorRef = useRef13(null);
+  const wrapperRef = useRef13(null);
+  const blurTimerRef = useRef13(null);
+  const [isFocused, setIsFocused] = useState10(false);
+  const [editorInstance, setEditorInstance] = useState10(null);
   const [, forceToolbarUpdate] = useReducer2((c) => c + 1, 0);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!editorInstance) return;
     const onStateChange = () => forceToolbarUpdate();
     editorInstance.on("selectionUpdate", onStateChange);
@@ -25044,7 +25694,7 @@ var TextBlockInner = function TextBlock({ block }) {
       editorInstance.off("transaction", onStateChange);
     };
   }, [editorInstance]);
-  const handleUpdate = useCallback12(
+  const handleUpdate = useCallback14(
     (html2) => {
       dispatch({
         type: "UPDATE_BLOCK",
@@ -25053,16 +25703,16 @@ var TextBlockInner = function TextBlock({ block }) {
     },
     [dispatch, block.id]
   );
-  const handleFocus = useCallback12(() => {
+  const handleFocus = useCallback14(() => {
     setActiveEditor(editorRef.current);
     setIsFocused(true);
   }, [setActiveEditor]);
-  useEffect10(() => {
+  useEffect11(() => {
     return () => {
       if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     };
   }, []);
-  const handleBlur = useCallback12(() => {
+  const handleBlur = useCallback14(() => {
     if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     blurTimerRef.current = setTimeout(() => {
       blurTimerRef.current = null;
@@ -25076,7 +25726,7 @@ var TextBlockInner = function TextBlock({ block }) {
       }
     }, 200);
   }, [setActiveEditor]);
-  const handleEditorRef = useCallback12((editor) => {
+  const handleEditorRef = useCallback14((editor) => {
     editorRef.current = editor;
     setEditorInstance(editor);
   }, []);
@@ -25089,11 +25739,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__ */ jsxs9("div", { className: `ee-block-text ${blocks_default.textBlock}`, ref: wrapperRef, children: [
-    isFocused && editorInstance && /* @__PURE__ */ jsx11("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ jsx11(RichTextToolbar, { editor: editorInstance }) }),
-    /* @__PURE__ */ jsx11("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx11(
+    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__ */ jsxs12("div", { className: `ee-block-text ${blocks_default.textBlock}`, ref: wrapperRef, children: [
+    isFocused && editorInstance && /* @__PURE__ */ jsx14("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ jsx14(RichTextToolbar, { editor: editorInstance }) }),
+    /* @__PURE__ */ jsx14("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx14(
       TipTapEditor,
       {
         content: block.properties.content,
@@ -25107,12 +25758,12 @@ var TextBlockInner = function TextBlock({ block }) {
     ) })
   ] });
 };
-var TextBlock2 = React11.memo(TextBlockInner);
+var TextBlock2 = React13.memo(TextBlockInner);
 
 // src/components/Canvas/blocks/ButtonBlock.tsx
-import React12, { useMemo as useMemo6 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ButtonBlock = React12.memo(function ButtonBlock2({ block }) {
+import React14, { useMemo as useMemo6 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ButtonBlock = React14.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 = useMemo6(() => ({ padding: p.padding }), [p.padding]);
@@ -25128,7 +25779,7 @@ var ButtonBlock = React12.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__ */ jsx12("div", { className: `ee-block-button ${blocks_default.buttonBlock} ${alignClass}`, style: outerStyle, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15("div", { className: `ee-block-button ${blocks_default.buttonBlock} ${alignClass}`, style: outerStyle, children: /* @__PURE__ */ jsx15(
     "span",
     {
       className: blocks_default.buttonPreview,
@@ -25139,21 +25790,21 @@ var ButtonBlock = React12.memo(function ButtonBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/ImageBlock.tsx
-import React13, { useCallback as useCallback14, useRef as useRef13 } from "react";
+import React15, { useCallback as useCallback16, useRef as useRef15 } from "react";
 
 // src/components/ImageUpload/useImageUpload.ts
-import { useState as useState8, useCallback as useCallback13, useRef as useRef12 } from "react";
+import { useState as useState11, useCallback as useCallback15, useRef as useRef14 } from "react";
 function useImageUpload({
   adapter,
   blockId,
   onSuccess,
   onError
 }) {
-  const [status, setStatus] = useState8("idle");
-  const [progress, setProgress] = useState8(0);
-  const [error, setError] = useState8(null);
-  const controllerRef = useRef12(null);
-  const upload = useCallback13(
+  const [status, setStatus] = useState11("idle");
+  const [progress, setProgress] = useState11(0);
+  const [error, setError] = useState11(null);
+  const controllerRef = useRef14(null);
+  const upload = useCallback15(
     async (file) => {
       if (!adapter) {
         setError("No upload adapter configured");
@@ -25198,12 +25849,12 @@ function useImageUpload({
     },
     [adapter, blockId, onSuccess, onError]
   );
-  const cancel = useCallback13(() => {
+  const cancel = useCallback15(() => {
     controllerRef.current?.abort();
     setStatus("idle");
     setProgress(0);
   }, []);
-  const browse = useCallback13(async () => {
+  const browse = useCallback15(async () => {
     if (!adapter?.browse) return null;
     try {
       const result = await adapter.browse();
@@ -25215,7 +25866,7 @@ function useImageUpload({
       return null;
     }
   }, [adapter, onSuccess]);
-  const reset2 = useCallback13(() => {
+  const reset2 = useCallback15(() => {
     setStatus("idle");
     setProgress(0);
     setError(null);
@@ -25224,11 +25875,11 @@ function useImageUpload({
 }
 
 // src/components/Canvas/blocks/ImageBlock.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var ImageBlockInner = function ImageBlock({ block }) {
   const dispatch = useEditorDispatch();
   const { imageUploadAdapter } = useConfigContext();
-  const fileInputRef = useRef13(null);
+  const fileInputRef = useRef15(null);
   const p = block.properties;
   const { upload, status } = useImageUpload({
     adapter: imageUploadAdapter,
@@ -25248,7 +25899,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 = useCallback14(
+  const handleFileSelect = useCallback16(
     async (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -25256,11 +25907,11 @@ var ImageBlockInner = function ImageBlock({ block }) {
     },
     [upload]
   );
-  const handlePlaceholderClick = useCallback14(() => {
+  const handlePlaceholderClick = useCallback16(() => {
     fileInputRef.current?.click();
   }, []);
-  return /* @__PURE__ */ jsxs10("div", { className: `ee-block-image ${blocks_default.imageBlock} ${alignClass}`, style: { padding: p.padding }, children: [
-    p.src ? /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("div", { className: `ee-block-image ${blocks_default.imageBlock} ${alignClass}`, style: { padding: p.padding }, children: [
+    p.src ? /* @__PURE__ */ jsx16(
       "img",
       {
         src: p.src,
@@ -25271,11 +25922,11 @@ var ImageBlockInner = function ImageBlock({ block }) {
           height: p.height !== "auto" ? p.height : void 0
         }
       }
-    ) : /* @__PURE__ */ jsxs10("div", { className: blocks_default.imagePlaceholder, onClick: handlePlaceholderClick, children: [
-      /* @__PURE__ */ jsx13("span", { className: blocks_default.imagePlaceholderIcon, children: "+" }),
-      /* @__PURE__ */ jsx13("span", { children: status === "uploading" ? "Uploading..." : "Click to upload image" })
+    ) : /* @__PURE__ */ jsxs13("div", { className: blocks_default.imagePlaceholder, onClick: handlePlaceholderClick, children: [
+      /* @__PURE__ */ jsx16("span", { className: blocks_default.imagePlaceholderIcon, children: "+" }),
+      /* @__PURE__ */ jsx16("span", { children: status === "uploading" ? "Uploading..." : "Click to upload image" })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx16(
       "input",
       {
         ref: fileInputRef,
@@ -25287,19 +25938,19 @@ var ImageBlockInner = function ImageBlock({ block }) {
     )
   ] });
 };
-var ImageBlock2 = React13.memo(ImageBlockInner);
+var ImageBlock2 = React15.memo(ImageBlockInner);
 
 // src/components/Canvas/blocks/DividerBlock.tsx
-import React14, { useMemo as useMemo7 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var DividerBlock = React14.memo(function DividerBlock2({ block }) {
+import React16, { useMemo as useMemo7 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var DividerBlock = React16.memo(function DividerBlock2({ block }) {
   const p = block.properties;
   const outerStyle = useMemo7(() => ({ padding: p.padding }), [p.padding]);
   const hrStyle = useMemo7(() => ({
     width: p.width,
     borderTop: `${p.borderWidth} ${p.borderStyle} ${p.borderColor}`
   }), [p.width, p.borderWidth, p.borderStyle, p.borderColor]);
-  return /* @__PURE__ */ jsx14("div", { className: `ee-block-divider ${blocks_default.dividerBlock}`, style: outerStyle, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17("div", { className: `ee-block-divider ${blocks_default.dividerBlock}`, style: outerStyle, children: /* @__PURE__ */ jsx17(
     "hr",
     {
       className: blocks_default.dividerLine,
@@ -25309,16 +25960,46 @@ var DividerBlock = React14.memo(function DividerBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/SpacerBlock.tsx
-import React15 from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var SpacerBlock = React15.memo(function SpacerBlock2({ block }) {
+import React17 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SpacerBlock = React17.memo(function SpacerBlock2({ block }) {
   const p = block.properties;
-  return /* @__PURE__ */ jsx15("div", { className: `ee-block-spacer ${blocks_default.spacerBlock}`, style: { height: p.height }, children: /* @__PURE__ */ jsx15("span", { className: blocks_default.spacerLabel, children: p.height }) });
+  return /* @__PURE__ */ jsx18("div", { className: `ee-block-spacer ${blocks_default.spacerBlock}`, style: { height: p.height }, children: /* @__PURE__ */ jsx18("span", { className: blocks_default.spacerLabel, children: p.height }) });
 });
 
 // src/components/Canvas/blocks/SocialBlock.tsx
-import React16, { useMemo as useMemo8 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import React18, { useMemo as useMemo8 } from "react";
+
+// src/components/Canvas/blocks/social-icons.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Facebook = ({ size = 20, color = "#ffffff" }) => /* @__PURE__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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__ */ jsx19("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("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
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var PLATFORM_COLORS = {
   facebook: "#3b5998",
   twitter: "#1da1f2",
@@ -25331,7 +26012,25 @@ var PLATFORM_COLORS = {
   tiktok: "#000000",
   web: "#4caf50"
 };
-var SocialBlock = React16.memo(function SocialBlock2({ block }) {
+function SocialIconImage({ src, name, iconSizeNum, iconColor, SvgIcon }) {
+  const [errored, setErrored] = React18.useState(false);
+  if (errored) {
+    if (SvgIcon) return /* @__PURE__ */ jsx20(SvgIcon, { size: Math.round(iconSizeNum * 0.6), color: iconColor });
+    return /* @__PURE__ */ jsx20("span", { style: { color: iconColor, fontSize: Math.max(10, iconSizeNum * 0.5), fontWeight: "bold" }, children: name.charAt(0).toUpperCase() });
+  }
+  return /* @__PURE__ */ jsx20(
+    "img",
+    {
+      src,
+      alt: name,
+      className: blocks_default.socialIconImage,
+      width: iconSizeNum,
+      height: iconSizeNum,
+      onError: () => setErrored(true)
+    }
+  );
+}
+var SocialBlock = React18.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";
@@ -25349,21 +26048,39 @@ var SocialBlock = React16.memo(function SocialBlock2({ block }) {
     fontSize: p.fontSize,
     color: p.color
   }), [p.fontSize, p.color]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx20(
     "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__ */ jsxs11(
+        const iconColor = element.color || "#ffffff";
+        const SvgIcon = getSocialIcon(element.name);
+        let iconContent;
+        if (element.src) {
+          iconContent = /* @__PURE__ */ jsx20(
+            SocialIconImage,
+            {
+              src: element.src,
+              name: element.name,
+              iconSizeNum,
+              iconColor,
+              SvgIcon
+            }
+          );
+        } else if (SvgIcon) {
+          iconContent = /* @__PURE__ */ jsx20(SvgIcon, { size: Math.round(iconSizeNum * 0.6), color: iconColor });
+        } else {
+          iconContent = element.name.charAt(0).toUpperCase();
+        }
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             className: blocks_default.socialElement,
             style: elementPaddingStyle,
             children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx20(
                 "span",
                 {
                   className: blocks_default.socialIcon,
@@ -25372,13 +26089,13 @@ var SocialBlock = React16.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__ */ jsx16(
+              element.content && /* @__PURE__ */ jsx20(
                 "span",
                 {
                   className: blocks_default.socialLabel,
@@ -25396,7 +26113,7 @@ var SocialBlock = React16.memo(function SocialBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/HtmlBlock.tsx
-import React17, { useMemo as useMemo9 } from "react";
+import React19, { useMemo as useMemo9 } from "react";
 
 // node_modules/dompurify/dist/purify.es.mjs
 var {
@@ -26418,8 +27135,8 @@ function createDOMPurify() {
 var purify = createDOMPurify();
 
 // src/components/Canvas/blocks/HtmlBlock.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-var HtmlBlock = React17.memo(function HtmlBlock2({ block }) {
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var HtmlBlock = React19.memo(function HtmlBlock2({ block }) {
   const p = block.properties;
   const sanitizedContent = useMemo9(() => {
     if (!p.content) return "";
@@ -26429,12 +27146,12 @@ var HtmlBlock = React17.memo(function HtmlBlock2({ block }) {
     });
   }, [p.content]);
   if (!p.content) {
-    return /* @__PURE__ */ jsx17("div", { className: `ee-block-html ${blocks_default.htmlBlock}`, style: { padding: p.padding }, children: /* @__PURE__ */ jsxs12("div", { className: blocks_default.htmlPlaceholder, children: [
-      /* @__PURE__ */ jsx17("span", { children: "</>" }),
-      /* @__PURE__ */ jsx17("span", { children: "Raw HTML Block" })
+    return /* @__PURE__ */ jsx21("div", { className: `ee-block-html ${blocks_default.htmlBlock}`, style: { padding: p.padding }, children: /* @__PURE__ */ jsxs15("div", { className: blocks_default.htmlPlaceholder, children: [
+      /* @__PURE__ */ jsx21("span", { children: "</>" }),
+      /* @__PURE__ */ jsx21("span", { children: "Raw HTML Block" })
     ] }) });
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: `ee-block-html ${blocks_default.htmlBlock}`,
@@ -26445,24 +27162,24 @@ var HtmlBlock = React17.memo(function HtmlBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/VideoBlock.tsx
-import React18 from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var VideoBlock = React18.memo(function VideoBlock2({ block }) {
+import React20 from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var VideoBlock = React20.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__ */ jsx18("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ jsxs13("div", { className: blocks_default.videoPlaceholder, children: [
-      /* @__PURE__ */ jsx18("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
-      /* @__PURE__ */ jsx18("span", { children: "Video Block" })
+    return /* @__PURE__ */ jsx22("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ jsxs16("div", { className: blocks_default.videoPlaceholder, children: [
+      /* @__PURE__ */ jsx22("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
+      /* @__PURE__ */ jsx22("span", { children: "Video Block" })
     ] }) });
   }
-  return /* @__PURE__ */ jsx18("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ jsxs13("div", { className: blocks_default.videoPreview, children: [
-    thumbnailUrl ? /* @__PURE__ */ jsx18("img", { src: thumbnailUrl, alt: p.alt, style: { maxWidth: "100%", display: "block" } }) : /* @__PURE__ */ jsxs13("div", { className: blocks_default.videoPlaceholder, children: [
-      /* @__PURE__ */ jsx18("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
-      /* @__PURE__ */ jsx18("span", { children: "No thumbnail" })
+  return /* @__PURE__ */ jsx22("div", { className: `ee-block-video ${blocks_default.videoBlock} ${alignClass}`, style: { padding: p.padding }, children: /* @__PURE__ */ jsxs16("div", { className: blocks_default.videoPreview, children: [
+    thumbnailUrl ? /* @__PURE__ */ jsx22("img", { src: thumbnailUrl, alt: p.alt, style: { maxWidth: "100%", display: "block" } }) : /* @__PURE__ */ jsxs16("div", { className: blocks_default.videoPlaceholder, children: [
+      /* @__PURE__ */ jsx22("span", { style: { fontSize: "32px" }, children: "\u25B6" }),
+      /* @__PURE__ */ jsx22("span", { children: "No thumbnail" })
     ] }),
-    /* @__PURE__ */ jsx18("div", { className: blocks_default.playOverlay, children: "\u25B6" })
+    /* @__PURE__ */ jsx22("div", { className: blocks_default.playOverlay, children: "\u25B6" })
   ] }) });
 });
 function getAutoThumbnail2(url) {
@@ -26473,8 +27190,8 @@ function getAutoThumbnail2(url) {
 }
 
 // src/components/Canvas/blocks/HeadingBlock.tsx
-import React19, { useCallback as useCallback15, useRef as useRef14, useState as useState9, useEffect as useEffect11, useReducer as useReducer3, useMemo as useMemo10 } from "react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import React21, { useCallback as useCallback17, useRef as useRef16, useState as useState12, useEffect as useEffect12, useReducer as useReducer3, useMemo as useMemo10 } from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var HEADING_FONT_SIZES = {
   h1: "36px",
   h2: "28px",
@@ -26484,13 +27201,13 @@ var HEADING_FONT_SIZES = {
 var HeadingBlockInner = function HeadingBlock({ block }) {
   const dispatch = useEditorDispatch();
   const { setActiveEditor } = useMethodsContext();
-  const editorRef = useRef14(null);
-  const wrapperRef = useRef14(null);
-  const blurTimerRef = useRef14(null);
-  const [isFocused, setIsFocused] = useState9(false);
-  const [editorInstance, setEditorInstance] = useState9(null);
+  const editorRef = useRef16(null);
+  const wrapperRef = useRef16(null);
+  const blurTimerRef = useRef16(null);
+  const [isFocused, setIsFocused] = useState12(false);
+  const [editorInstance, setEditorInstance] = useState12(null);
   const [, forceToolbarUpdate] = useReducer3((c) => c + 1, 0);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!editorInstance) return;
     const onStateChange = () => forceToolbarUpdate();
     editorInstance.on("selectionUpdate", onStateChange);
@@ -26500,7 +27217,7 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
       editorInstance.off("transaction", onStateChange);
     };
   }, [editorInstance]);
-  const handleUpdate = useCallback15(
+  const handleUpdate = useCallback17(
     (html2) => {
       dispatch({
         type: "UPDATE_BLOCK",
@@ -26509,16 +27226,16 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
     },
     [dispatch, block.id]
   );
-  const handleFocus = useCallback15(() => {
+  const handleFocus = useCallback17(() => {
     setActiveEditor(editorRef.current);
     setIsFocused(true);
   }, [setActiveEditor]);
-  useEffect11(() => {
+  useEffect12(() => {
     return () => {
       if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     };
   }, []);
-  const handleBlur = useCallback15(() => {
+  const handleBlur = useCallback17(() => {
     if (blurTimerRef.current !== null) clearTimeout(blurTimerRef.current);
     blurTimerRef.current = setTimeout(() => {
       blurTimerRef.current = null;
@@ -26532,7 +27249,7 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
       }
     }, 200);
   }, [setActiveEditor]);
-  const handleEditorRef = useCallback15((editor) => {
+  const handleEditorRef = useCallback17((editor) => {
     editorRef.current = editor;
     setEditorInstance(editor);
   }, []);
@@ -26546,11 +27263,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__ */ jsxs14("div", { className: `ee-block-heading ${blocks_default.headingBlock}`, ref: wrapperRef, children: [
-    isFocused && editorInstance && /* @__PURE__ */ jsx19("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ jsx19(RichTextToolbar, { editor: editorInstance }) }),
-    /* @__PURE__ */ jsx19("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx19(
+    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__ */ jsxs17("div", { className: `ee-block-heading ${blocks_default.headingBlock}`, ref: wrapperRef, children: [
+    isFocused && editorInstance && /* @__PURE__ */ jsx23("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ jsx23(RichTextToolbar, { editor: editorInstance }) }),
+    /* @__PURE__ */ jsx23("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx23(
       TipTapEditor,
       {
         content: p.content,
@@ -26564,11 +27282,11 @@ var HeadingBlockInner = function HeadingBlock({ block }) {
     ) })
   ] });
 };
-var HeadingBlock2 = React19.memo(HeadingBlockInner);
+var HeadingBlock2 = React21.memo(HeadingBlockInner);
 
 // src/components/Canvas/blocks/CountdownBlock.tsx
-import React20, { useState as useState10, useEffect as useEffect12, useMemo as useMemo11 } from "react";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import React22, { useState as useState13, useEffect as useEffect13, useMemo as useMemo11 } from "react";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function getTimeRemaining(targetDate) {
   const total = Math.max(0, new Date(targetDate).getTime() - Date.now());
   return {
@@ -26578,10 +27296,10 @@ function getTimeRemaining(targetDate) {
     seconds: Math.floor(total / 1e3 % 60)
   };
 }
-var CountdownBlock = React20.memo(function CountdownBlock2({ block }) {
+var CountdownBlock = React22.memo(function CountdownBlock2({ block }) {
   const p = block.properties;
-  const [time, setTime] = useState10(() => getTimeRemaining(p.targetDate));
-  useEffect12(() => {
+  const [time, setTime] = useState13(() => getTimeRemaining(p.targetDate));
+  useEffect13(() => {
     setTime(getTimeRemaining(p.targetDate));
     const interval = setInterval(() => {
       setTime(getTimeRemaining(p.targetDate));
@@ -26614,10 +27332,10 @@ var CountdownBlock = React20.memo(function CountdownBlock2({ block }) {
   const unitLabelStyle = useMemo11(() => ({
     color: p.labelColor
   }), [p.labelColor]);
-  return /* @__PURE__ */ jsxs15("div", { className: `ee-block-countdown ${blocks_default.countdownBlock}`, style: wrapperStyle, children: [
-    p.label && /* @__PURE__ */ jsx20("div", { className: blocks_default.countdownLabel, style: labelStyle, children: p.label }),
-    /* @__PURE__ */ jsx20("div", { className: blocks_default.countdownDigits, style: digitsContainerStyle, children: units.map((unit) => /* @__PURE__ */ jsxs15("div", { className: blocks_default.countdownUnit, children: [
-      /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs18("div", { className: `ee-block-countdown ${blocks_default.countdownBlock}`, style: wrapperStyle, children: [
+    p.label && /* @__PURE__ */ jsx24("div", { className: blocks_default.countdownLabel, style: labelStyle, children: p.label }),
+    /* @__PURE__ */ jsx24("div", { className: blocks_default.countdownDigits, style: digitsContainerStyle, children: units.map((unit) => /* @__PURE__ */ jsxs18("div", { className: blocks_default.countdownUnit, children: [
+      /* @__PURE__ */ jsx24(
         "div",
         {
           className: blocks_default.countdownDigitBox,
@@ -26625,15 +27343,15 @@ var CountdownBlock = React20.memo(function CountdownBlock2({ block }) {
           children: String(unit.value).padStart(2, "0")
         }
       ),
-      /* @__PURE__ */ jsx20("div", { className: blocks_default.countdownUnitLabel, style: unitLabelStyle, children: unit.label })
+      /* @__PURE__ */ jsx24("div", { className: blocks_default.countdownUnitLabel, style: unitLabelStyle, children: unit.label })
     ] }, unit.label)) })
   ] });
 });
 
 // src/components/Canvas/blocks/MenuBlock.tsx
-import React21, { useMemo as useMemo12 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var MenuBlock = React21.memo(function MenuBlock2({ block }) {
+import React23, { useMemo as useMemo12 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var MenuBlock = React23.memo(function MenuBlock2({ block }) {
   const p = block.properties;
   const alignStyle = p.align === "left" ? "flex-start" : p.align === "right" ? "flex-end" : "center";
   const wrapperStyle = useMemo12(() => ({
@@ -26648,7 +27366,7 @@ var MenuBlock = React21.memo(function MenuBlock2({ block }) {
     fontSize: p.fontSize,
     color: p.color
   }), [p.fontFamily, p.fontSize, p.color]);
-  return /* @__PURE__ */ jsx21("div", { className: `ee-block-menu ${blocks_default.menuBlock}`, style: wrapperStyle, children: /* @__PURE__ */ jsx21("div", { className: blocks_default.menuItems, style: itemsStyle, children: p.items.map((item) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx25("div", { className: `ee-block-menu ${blocks_default.menuBlock}`, style: wrapperStyle, children: /* @__PURE__ */ jsx25("div", { className: blocks_default.menuItems, style: itemsStyle, children: p.items.map((item) => /* @__PURE__ */ jsx25(
     "span",
     {
       className: blocks_default.menuItem,
@@ -26660,9 +27378,9 @@ var MenuBlock = React21.memo(function MenuBlock2({ block }) {
 });
 
 // src/components/Canvas/blocks/HeroBlock.tsx
-import React22, { useMemo as useMemo13 } from "react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-var HeroBlock = React22.memo(function HeroBlock2({ block }) {
+import React24, { useMemo as useMemo13 } from "react";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var HeroBlock = React24.memo(function HeroBlock2({ block }) {
   const p = block.properties;
   const containerStyle = useMemo13(() => ({
     padding: p.padding,
@@ -26686,8 +27404,8 @@ var HeroBlock = React22.memo(function HeroBlock2({ block }) {
     color: p.buttonColor,
     borderRadius: p.buttonBorderRadius
   }), [p.buttonBackgroundColor, p.buttonColor, p.buttonBorderRadius]);
-  return /* @__PURE__ */ jsxs16("div", { className: `ee-block-hero ${blocks_default.heroBlock}`, style: containerStyle, children: [
-    p.heading && /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs19("div", { className: `ee-block-hero ${blocks_default.heroBlock}`, style: containerStyle, children: [
+    p.heading && /* @__PURE__ */ jsx26(
       "h2",
       {
         className: blocks_default.heroHeading,
@@ -26695,7 +27413,7 @@ var HeroBlock = React22.memo(function HeroBlock2({ block }) {
         children: p.heading
       }
     ),
-    p.subtext && /* @__PURE__ */ jsx22(
+    p.subtext && /* @__PURE__ */ jsx26(
       "p",
       {
         className: blocks_default.heroSubtext,
@@ -26703,7 +27421,7 @@ var HeroBlock = React22.memo(function HeroBlock2({ block }) {
         children: p.subtext
       }
     ),
-    p.buttonText && /* @__PURE__ */ jsx22(
+    p.buttonText && /* @__PURE__ */ jsx26(
       "span",
       {
         className: blocks_default.heroButton,
@@ -26715,7 +27433,7 @@ var HeroBlock = React22.memo(function HeroBlock2({ block }) {
 });
 
 // src/components/Canvas/BlockRenderer.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 registerBlockRenderer("text", TextBlock2);
 registerBlockRenderer("button", ButtonBlock);
 registerBlockRenderer("image", ImageBlock2);
@@ -26728,14 +27446,14 @@ registerBlockRenderer("heading", HeadingBlock2);
 registerBlockRenderer("countdown", CountdownBlock);
 registerBlockRenderer("menu", MenuBlock);
 registerBlockRenderer("hero", HeroBlock);
-var BlockRenderer = React23.memo(function BlockRenderer2({ block }) {
+var BlockRenderer = React25.memo(function BlockRenderer2({ block }) {
   const Component2 = blockRendererRegistry[block.type];
   if (!Component2) return null;
-  return /* @__PURE__ */ jsx23(ErrorBoundary, { children: /* @__PURE__ */ jsx23(Component2, { block }) });
+  return /* @__PURE__ */ jsx27(ErrorBoundary, { children: /* @__PURE__ */ jsx27(Component2, { block }) });
 });
 
 // src/components/Canvas/DropZone.tsx
-import React24, { useState as useState11, useCallback as useCallback16, useRef as useRef15 } from "react";
+import React26, { useState as useState14, useCallback as useCallback18, useRef as useRef17 } from "react";
 
 // src/styles/canvas.module.css
 var canvas_default = {
@@ -26770,12 +27488,12 @@ var canvas_default = {
 };
 
 // src/components/Canvas/DropZone.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-var DropZone = React24.memo(function DropZone2({ sectionId, columnId, index, emptyPlaceholder }) {
+import { jsx as jsx28 } from "react/jsx-runtime";
+var DropZone = React26.memo(function DropZone2({ sectionId, columnId, index, emptyPlaceholder }) {
   const dispatch = useEditorDispatch();
-  const [isOver, setIsOver] = useState11(false);
-  const isOverRef = useRef15(false);
-  const handleDragOver = useCallback16(
+  const [isOver, setIsOver] = useState14(false);
+  const isOverRef = useRef17(false);
+  const handleDragOver = useCallback18(
     (e) => {
       if (!isDropAllowed(e)) return;
       e.preventDefault();
@@ -26788,7 +27506,7 @@ var DropZone = React24.memo(function DropZone2({ sectionId, columnId, index, emp
     },
     []
   );
-  const handleDragLeave = useCallback16((e) => {
+  const handleDragLeave = useCallback18((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -26797,7 +27515,7 @@ var DropZone = React24.memo(function DropZone2({ sectionId, columnId, index, emp
     isOverRef.current = false;
     setIsOver(false);
   }, []);
-  const handleDrop2 = useCallback16(
+  const handleDrop2 = useCallback18(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -26834,7 +27552,7 @@ var DropZone = React24.memo(function DropZone2({ sectionId, columnId, index, emp
     [dispatch, sectionId, columnId, index]
   );
   if (emptyPlaceholder) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         className: `ee-drop-zone ee-drop-zone--empty ${canvas_default.emptyColumn} ${isOver ? canvas_default.emptyColumnActive : ""}`,
@@ -26845,20 +27563,20 @@ var DropZone = React24.memo(function DropZone2({ sectionId, columnId, index, emp
       }
     );
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: `ee-drop-zone ${canvas_default.dropZone} ${isOver ? canvas_default.dropZoneActive : ""}`,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop2,
-      children: isOver && /* @__PURE__ */ jsx24("div", { className: canvas_default.dropZoneLabel, children: "Drop here" })
+      children: isOver && /* @__PURE__ */ jsx28("div", { className: canvas_default.dropZoneLabel, children: "Drop here" })
     }
   );
 });
 
 // src/components/Canvas/Column.tsx
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function getBlockData(e) {
   const el = e.currentTarget;
   const blockId = el.dataset.blockId;
@@ -26866,17 +27584,17 @@ function getBlockData(e) {
   if (!blockId || index === void 0) return null;
   return { blockId, index: Number(index) };
 }
-var Column = React25.memo(function Column2({ column, sectionId }) {
+var Column = React27.memo(function Column2({ column, sectionId }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
-  const [blockToRemove, setBlockToRemove] = useState12(null);
-  const confirmRemoveBlock = useCallback17(
+  const [blockToRemove, setBlockToRemove] = useState15(null);
+  const confirmRemoveBlock = useCallback19(
     (blockId) => {
       setBlockToRemove(blockId);
     },
     []
   );
-  const handleConfirmRemove = useCallback17(() => {
+  const handleConfirmRemove = useCallback19(() => {
     if (blockToRemove) {
       dispatch({
         type: "REMOVE_BLOCK",
@@ -26885,7 +27603,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
       setBlockToRemove(null);
     }
   }, [dispatch, sectionId, column.id, blockToRemove]);
-  const handleBlockClick = useCallback17(
+  const handleBlockClick = useCallback19(
     (e) => {
       e.stopPropagation();
       const data = getBlockData(e);
@@ -26897,7 +27615,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     },
     [dispatch, sectionId, column.id]
   );
-  const handleRemoveClick = useCallback17(
+  const handleRemoveClick = useCallback19(
     (e) => {
       e.stopPropagation();
       const wrapper = e.currentTarget.closest("[data-block-id]");
@@ -26905,7 +27623,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     },
     [confirmRemoveBlock]
   );
-  const handleDuplicateClick = useCallback17(
+  const handleDuplicateClick = useCallback19(
     (e) => {
       e.stopPropagation();
       const wrapper = e.currentTarget.closest("[data-block-id]");
@@ -26918,7 +27636,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     },
     [dispatch, sectionId, column.id]
   );
-  const handleBlockDragStart = useCallback17(
+  const handleBlockDragStart = useCallback19(
     (e) => {
       const data = getBlockData(e);
       if (!data) return;
@@ -26926,8 +27644,8 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     },
     [sectionId, column.id]
   );
-  const [dropTarget, setDropTarget] = useState12(null);
-  const handleBlockDragOver = useCallback17(
+  const [dropTarget, setDropTarget] = useState15(null);
+  const handleBlockDragOver = useCallback19(
     (e) => {
       if (!isDropAllowed(e)) return;
       e.preventDefault();
@@ -26945,7 +27663,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     },
     []
   );
-  const handleBlockDragLeave = useCallback17((e) => {
+  const handleBlockDragLeave = useCallback19((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -26953,7 +27671,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     }
     setDropTarget(null);
   }, []);
-  const handleBlockDrop = useCallback17(
+  const handleBlockDrop = useCallback19(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -26993,7 +27711,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     },
     [dispatch, sectionId, column.id]
   );
-  const handleBlockKeyDown = useCallback17(
+  const handleBlockKeyDown = useCallback19(
     (e) => {
       const target = e.target;
       if (target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
@@ -27017,7 +27735,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
     [dispatch, sectionId, column.id, confirmRemoveBlock]
   );
   if (column.blocks.length === 0) {
-    return /* @__PURE__ */ jsx25("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx29("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: /* @__PURE__ */ jsx29(
       DropZone,
       {
         sectionId,
@@ -27027,10 +27745,10 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: [
-    column.blocks.map((block, index) => /* @__PURE__ */ jsxs17(React25.Fragment, { children: [
-      /* @__PURE__ */ jsx25(DropZone, { sectionId, columnId: column.id, index }),
-      /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs20("div", { className: `ee-column ${canvas_default.column}`, style: { width: column.width }, children: [
+    column.blocks.map((block, index) => /* @__PURE__ */ jsxs20(React27.Fragment, { children: [
+      /* @__PURE__ */ jsx29(DropZone, { sectionId, columnId: column.id, index }),
+      /* @__PURE__ */ jsxs20(
         "div",
         {
           "data-block-type": block.type,
@@ -27057,8 +27775,8 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
           "aria-selected": selection.blockId === block.id,
           tabIndex: 0,
           children: [
-            /* @__PURE__ */ jsxs17("div", { className: `ee-block-actions ${canvas_default.blockOverlay}`, role: "group", "aria-label": "Block actions", children: [
-              /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsxs20("div", { className: `ee-block-actions ${canvas_default.blockOverlay}`, role: "group", "aria-label": "Block actions", children: [
+              /* @__PURE__ */ jsx29(
                 "button",
                 {
                   className: `ee-block-duplicate ${canvas_default.blockBtn} ${canvas_default.blockBtnDuplicate}`,
@@ -27068,7 +27786,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
                   children: "\u29C9"
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx29(
                 "button",
                 {
                   className: `ee-block-remove ${canvas_default.blockBtn}`,
@@ -27079,12 +27797,12 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx25(BlockRenderer, { block })
+            /* @__PURE__ */ jsx29(BlockRenderer, { block })
           ]
         }
       )
     ] }, block.id)),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx29(
       DropZone,
       {
         sectionId,
@@ -27092,7 +27810,7 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
         index: column.blocks.length
       }
     ),
-    blockToRemove && /* @__PURE__ */ jsx25(
+    blockToRemove && /* @__PURE__ */ jsx29(
       ConfirmDialog,
       {
         title: "Remove Block",
@@ -27105,45 +27823,45 @@ var Column = React25.memo(function Column2({ column, sectionId }) {
 });
 
 // src/components/Canvas/Section.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
-var Section = React26.memo(function Section2({ section }) {
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+var Section = React28.memo(function Section2({ section }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
   const { template } = useTemplateContext();
   const isSelected = selection.sectionId === section.id && !selection.blockId;
-  const [showRemoveConfirm, setShowRemoveConfirm] = useState13(false);
-  const handleClick2 = useCallback18(
+  const [showRemoveConfirm, setShowRemoveConfirm] = useState16(false);
+  const handleClick2 = useCallback20(
     (e) => {
       e.stopPropagation();
       dispatch({ type: "SELECT_SECTION", payload: { sectionId: section.id } });
     },
     [dispatch, section.id]
   );
-  const handleRemove = useCallback18(
+  const handleRemove = useCallback20(
     (e) => {
       e.stopPropagation();
       setShowRemoveConfirm(true);
     },
     []
   );
-  const handleConfirmRemove = useCallback18(() => {
+  const handleConfirmRemove = useCallback20(() => {
     dispatch({ type: "REMOVE_SECTION", payload: { sectionId: section.id } });
     setShowRemoveConfirm(false);
   }, [dispatch, section.id]);
-  const handleDuplicate = useCallback18(
+  const handleDuplicate = useCallback20(
     (e) => {
       e.stopPropagation();
       dispatch({ type: "DUPLICATE_SECTION", payload: { sectionId: section.id } });
     },
     [dispatch, section.id]
   );
-  const handleDragStart = useCallback18(
+  const handleDragStart = useCallback20(
     (e) => {
       setSectionMoveDragData(e, section.id);
     },
     [section.id]
   );
-  const handleDragKeyDown = useCallback18(
+  const handleDragKeyDown = useCallback20(
     (e) => {
       if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
       e.preventDefault();
@@ -27157,7 +27875,7 @@ var Section = React26.memo(function Section2({ section }) {
     },
     [dispatch, section.id, template.sections]
   );
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21(
     "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 : ""}`,
@@ -27174,8 +27892,8 @@ var Section = React26.memo(function Section2({ section }) {
       "aria-label": `Email section${isSelected ? " (selected)" : ""}`,
       "aria-selected": isSelected,
       children: [
-        /* @__PURE__ */ jsxs18("div", { className: `ee-section-actions ${canvas_default.sectionOverlay}`, role: "group", "aria-label": "Section actions", children: [
-          /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs21("div", { className: `ee-section-actions ${canvas_default.sectionOverlay}`, role: "group", "aria-label": "Section actions", children: [
+          /* @__PURE__ */ jsx30(
             "span",
             {
               className: `ee-section-drag ${canvas_default.sectionDragHandle}`,
@@ -27189,7 +27907,7 @@ var Section = React26.memo(function Section2({ section }) {
               children: "\u283F"
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               className: `ee-section-duplicate ${canvas_default.sectionBtn} ${canvas_default.sectionBtnDuplicate}`,
@@ -27199,7 +27917,7 @@ var Section = React26.memo(function Section2({ section }) {
               children: "\u29C9"
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               className: `ee-section-remove ${canvas_default.sectionBtn}`,
@@ -27210,8 +27928,8 @@ var Section = React26.memo(function Section2({ section }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ jsx26(Column, { column, sectionId: section.id }, column.id)) }),
-        showRemoveConfirm && /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx30("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ jsx30(Column, { column, sectionId: section.id }, column.id)) }),
+        showRemoveConfirm && /* @__PURE__ */ jsx30(
           ConfirmDialog,
           {
             title: "Remove Section",
@@ -27226,13 +27944,13 @@ var Section = React26.memo(function Section2({ section }) {
 });
 
 // src/components/Canvas/SectionDropZone.tsx
-import React27, { useState as useState14, useCallback as useCallback19, useRef as useRef16 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var SectionDropZone = React27.memo(function SectionDropZone2({ index }) {
+import React29, { useState as useState17, useCallback as useCallback21, useRef as useRef18 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var SectionDropZone = React29.memo(function SectionDropZone2({ index }) {
   const dispatch = useEditorDispatch();
-  const [isOver, setIsOver] = useState14(false);
-  const isOverRef = useRef16(false);
-  const handleDragOver = useCallback19((e) => {
+  const [isOver, setIsOver] = useState17(false);
+  const isOverRef = useRef18(false);
+  const handleDragOver = useCallback21((e) => {
     if (!isSectionDrop(e)) return;
     e.preventDefault();
     e.stopPropagation();
@@ -27242,7 +27960,7 @@ var SectionDropZone = React27.memo(function SectionDropZone2({ index }) {
       setIsOver(true);
     }
   }, []);
-  const handleDragLeave = useCallback19((e) => {
+  const handleDragLeave = useCallback21((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -27251,7 +27969,7 @@ var SectionDropZone = React27.memo(function SectionDropZone2({ index }) {
     isOverRef.current = false;
     setIsOver(false);
   }, []);
-  const handleDrop2 = useCallback19(
+  const handleDrop2 = useCallback21(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -27266,37 +27984,37 @@ var SectionDropZone = React27.memo(function SectionDropZone2({ index }) {
     },
     [dispatch, index]
   );
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       className: `ee-section-drop-zone ${canvas_default.sectionDropZone} ${isOver ? canvas_default.sectionDropZoneActive : ""}`,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop2,
-      children: isOver && /* @__PURE__ */ jsx27("div", { className: canvas_default.sectionDropZoneLabel, children: "Move section here" })
+      children: isOver && /* @__PURE__ */ jsx31("div", { className: canvas_default.sectionDropZoneLabel, children: "Move section here" })
     }
   );
 });
 
 // src/components/Canvas/Canvas.tsx
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
-var Canvas = React28.memo(function Canvas2() {
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+var Canvas = React30.memo(function Canvas2() {
   const { template } = useTemplateContext();
   const dispatch = useEditorDispatch();
-  const [isDragOver, setIsDragOver] = useState15(false);
-  const handleAddSection = useCallback20(() => {
+  const [isDragOver, setIsDragOver] = useState18(false);
+  const handleAddSection = useCallback22(() => {
     dispatch({ type: "ADD_SECTION", payload: { section: createSection() } });
   }, [dispatch]);
-  const handleCanvasClick = useCallback20(() => {
+  const handleCanvasClick = useCallback22(() => {
     dispatch({ type: "DESELECT_ALL" });
   }, [dispatch]);
-  const handleBodyDragOver = useCallback20((e) => {
+  const handleBodyDragOver = useCallback22((e) => {
     if (!isDropAllowed(e)) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
     setIsDragOver(true);
   }, []);
-  const handleBodyDragLeave = useCallback20((e) => {
+  const handleBodyDragLeave = useCallback22((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const { clientX, clientY } = e;
     if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
@@ -27304,7 +28022,7 @@ var Canvas = React28.memo(function Canvas2() {
     }
     setIsDragOver(false);
   }, []);
-  const handleBodyDrop = useCallback20(
+  const handleBodyDrop = useCallback22(
     (e) => {
       e.preventDefault();
       setIsDragOver(false);
@@ -27321,7 +28039,7 @@ var Canvas = React28.memo(function Canvas2() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ jsx28("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx32("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ jsxs22(
     "div",
     {
       className: `ee-canvas-body ${canvas_default.canvasBody} ${isDragOver ? canvas_default.canvasBodyDragOver : ""}`,
@@ -27336,25 +28054,25 @@ var Canvas = React28.memo(function Canvas2() {
       onDrop: handleBodyDrop,
       "aria-label": "Email content area",
       children: [
-        template.sections.map((section, index) => /* @__PURE__ */ jsxs19(React28.Fragment, { children: [
-          /* @__PURE__ */ jsx28(SectionDropZone, { index }),
-          /* @__PURE__ */ jsx28(Section, { section })
+        template.sections.map((section, index) => /* @__PURE__ */ jsxs22(React30.Fragment, { children: [
+          /* @__PURE__ */ jsx32(SectionDropZone, { index }),
+          /* @__PURE__ */ jsx32(Section, { section })
         ] }, section.id)),
-        template.sections.length > 0 && /* @__PURE__ */ jsx28(SectionDropZone, { index: template.sections.length }),
-        /* @__PURE__ */ jsx28("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
+        template.sections.length > 0 && /* @__PURE__ */ jsx32(SectionDropZone, { index: template.sections.length }),
+        /* @__PURE__ */ jsx32("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
       ]
     }
   ) });
 });
 
 // src/components/Properties/SectionProperties.tsx
-import { useCallback as useCallback25 } from "react";
+import { useCallback as useCallback27 } from "react";
 
 // src/components/Properties/PropertyField.tsx
-import React33 from "react";
+import React35 from "react";
 
 // src/components/Properties/controls/ColorPicker.tsx
-import { useState as useState16, useCallback as useCallback21, useRef as useRef17, useEffect as useEffect13 } from "react";
+import { useState as useState19, useCallback as useCallback23, useRef as useRef19, useEffect as useEffect14 } from "react";
 
 // src/styles/properties.module.css
 var properties_default = {
@@ -27402,16 +28120,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
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function ColorPicker({ label, value, onChange }) {
-  const [isOpen, setIsOpen] = useState16(false);
-  const wrapperRef = useRef17(null);
-  useEffect13(() => {
+  const [isOpen, setIsOpen] = useState19(false);
+  const wrapperRef = useRef19(null);
+  const { customColorPresets, addCustomColorPreset, removeCustomColorPreset } = useColorPresets();
+  useEffect14(() => {
     function handleClickOutside(e) {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -27422,36 +28142,48 @@ function ColorPicker({ label, value, onChange }) {
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  const handlePresetClick = useCallback21(
+  const handlePresetClick = useCallback23(
     (color) => {
       onChange(color);
       setIsOpen(false);
     },
     [onChange]
   );
+  const handleSavePreset = useCallback23(() => {
+    if (value && value !== "transparent" && !customColorPresets.includes(value)) {
+      addCustomColorPreset(value);
+    }
+  }, [value, customColorPresets, addCustomColorPreset]);
+  const handlePresetContextMenu = useCallback23(
+    (e, color) => {
+      e.preventDefault();
+      removeCustomColorPreset(color);
+    },
+    [removeCustomColorPreset]
+  );
   const isHex = /^#[0-9a-fA-F]{6}$/.test(value);
-  return /* @__PURE__ */ jsxs20("div", { className: `ee-field-group ee-color-picker ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ jsx29("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ jsxs20("div", { className: properties_default.colorPickerWrapper, ref: wrapperRef, children: [
-      /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs23("div", { className: `ee-field-group ee-color-picker ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ jsx33("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ jsxs23("div", { className: properties_default.colorPickerWrapper, ref: wrapperRef, children: [
+      /* @__PURE__ */ jsxs23(
         "div",
         {
           className: properties_default.colorPickerTrigger,
           onClick: () => setIsOpen(!isOpen),
           children: [
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx33(
               "div",
               {
                 className: `${properties_default.colorSwatch} ${value === "transparent" ? properties_default.colorSwatchTransparent : ""}`,
                 style: value !== "transparent" ? { backgroundColor: value || "transparent" } : void 0
               }
             ),
-            /* @__PURE__ */ jsx29("span", { className: properties_default.colorValue, children: value || "transparent" })
+            /* @__PURE__ */ jsx33("span", { className: properties_default.colorValue, children: value || "transparent" })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsxs20("div", { className: properties_default.colorPresets, children: [
-        /* @__PURE__ */ jsx29(
+      isOpen && /* @__PURE__ */ jsxs23("div", { className: properties_default.colorPresets, children: [
+        /* @__PURE__ */ jsx33(
           "button",
           {
             className: `ee-color-preset-transparent ${properties_default.colorPresetBtn} ${properties_default.colorPresetBtnTransparent} ${properties_default.colorPresetBtnFull} ${value === "transparent" ? properties_default.colorPresetBtnActive : ""}`,
@@ -27460,7 +28192,7 @@ function ColorPicker({ label, value, onChange }) {
             children: "Transparent"
           }
         ),
-        COLOR_PRESETS.map((color) => /* @__PURE__ */ jsx29(
+        COLOR_PRESETS.map((color) => /* @__PURE__ */ jsx33(
           "button",
           {
             className: `${properties_default.colorPresetBtn} ${color === value ? properties_default.colorPresetBtnActive : ""}`,
@@ -27470,23 +28202,47 @@ function ColorPicker({ label, value, onChange }) {
           },
           color
         )),
-        /* @__PURE__ */ jsx29(
-          "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__ */ jsxs23(Fragment3, { children: [
+          /* @__PURE__ */ jsx33("div", { className: `${properties_default.colorPresetBtnFull} ${properties_default.colorPresetSectionLabel}`, children: "Custom" }),
+          customColorPresets.map((color) => /* @__PURE__ */ jsx33(
+            "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__ */ jsxs23("div", { className: `${properties_default.colorPresetBtnFull}`, style: { display: "flex", flexDirection: "column", gap: "8px", alignItems: "stretch" }, children: [
+          /* @__PURE__ */ jsx33(
+            HslColorArea,
+            {
+              value: isHex ? value : "#ffffff",
+              onChange
+            }
+          ),
+          /* @__PURE__ */ jsx33(
+            "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
-import { useCallback as useCallback22, useMemo as useMemo14 } from "react";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useCallback as useCallback24, useMemo as useMemo14 } from "react";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function parsePadding(value) {
   const parts = value.split(/\s+/).map((p) => p.trim()).filter(Boolean);
   switch (parts.length) {
@@ -27504,7 +28260,7 @@ function parsePadding(value) {
 }
 function PaddingInput({ label, value, onChange }) {
   const [top, right, bottom, left] = useMemo14(() => parsePadding(value), [value]);
-  const handleChange = useCallback22(
+  const handleChange = useCallback24(
     (position, newVal) => {
       const parts = parsePadding(value);
       const idx = { top: 0, right: 1, bottom: 2, left: 3 }[position];
@@ -27513,12 +28269,12 @@ function PaddingInput({ label, value, onChange }) {
     },
     [value, onChange]
   );
-  return /* @__PURE__ */ jsxs21("div", { className: `ee-field-group ee-padding ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ jsx30("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ jsxs21("div", { className: properties_default.paddingGrid, children: [
-      /* @__PURE__ */ jsxs21("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ jsx30("span", { className: properties_default.paddingLabel, children: "Top" }),
-        /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs24("div", { className: `ee-field-group ee-padding ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ jsx34("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ jsxs24("div", { className: properties_default.paddingGrid, children: [
+      /* @__PURE__ */ jsxs24("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ jsx34("span", { className: properties_default.paddingLabel, children: "Top" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27527,9 +28283,9 @@ function PaddingInput({ label, value, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ jsx30("span", { className: properties_default.paddingLabel, children: "Right" }),
-        /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsxs24("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ jsx34("span", { className: properties_default.paddingLabel, children: "Right" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27538,9 +28294,9 @@ function PaddingInput({ label, value, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ jsx30("span", { className: properties_default.paddingLabel, children: "Bottom" }),
-        /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsxs24("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ jsx34("span", { className: properties_default.paddingLabel, children: "Bottom" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27549,9 +28305,9 @@ function PaddingInput({ label, value, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: properties_default.paddingField, children: [
-        /* @__PURE__ */ jsx30("span", { className: properties_default.paddingLabel, children: "Left" }),
-        /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsxs24("div", { className: properties_default.paddingField, children: [
+        /* @__PURE__ */ jsx34("span", { className: properties_default.paddingLabel, children: "Left" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             className: properties_default.paddingInput,
@@ -27565,16 +28321,16 @@ function PaddingInput({ label, value, onChange }) {
 }
 
 // src/components/Properties/controls/AlignmentPicker.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function AlignmentPicker({
   label,
   value,
   onChange,
   options = ["left", "center", "right"]
 }) {
-  return /* @__PURE__ */ jsxs22("div", { className: `ee-field-group ee-alignment ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ jsx31("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ jsx31("div", { className: properties_default.alignmentPicker, children: options.map((option) => /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs25("div", { className: `ee-field-group ee-alignment ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ jsx35("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ jsx35("div", { className: properties_default.alignmentPicker, children: options.map((option) => /* @__PURE__ */ jsx35(
       "button",
       {
         className: `${properties_default.alignmentBtn} ${value === option ? properties_default.alignmentBtnActive : ""}`,
@@ -27588,25 +28344,25 @@ function AlignmentPicker({
 }
 
 // src/components/Properties/controls/FontPicker.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function FontPicker({ label, value, onChange }) {
-  return /* @__PURE__ */ jsxs23("div", { className: `ee-field-group ee-font-picker ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ jsx32("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs26("div", { className: `ee-field-group ee-font-picker ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ jsx36("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ jsx36(
       "select",
       {
         className: properties_default.fieldSelect,
         value,
         onChange: (e) => onChange(e.target.value),
-        children: FONT_OPTIONS.map((font) => /* @__PURE__ */ jsx32("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
+        children: FONT_OPTIONS.map((font) => /* @__PURE__ */ jsx36("option", { value: font, style: { fontFamily: font }, children: font.split(",")[0].trim() }, font))
       }
     )
   ] });
 }
 
 // src/components/Properties/controls/SliderInput.tsx
-import { useCallback as useCallback23 } from "react";
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useCallback as useCallback25 } from "react";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function SliderInput({
   label,
   value,
@@ -27616,16 +28372,16 @@ function SliderInput({
   unit = "px",
   onChange
 }) {
-  const handleChange = useCallback23(
+  const handleChange = useCallback25(
     (e) => {
       onChange(Number(e.target.value));
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsxs24("div", { className: `ee-field-group ee-slider ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ jsx33("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ jsxs24("div", { className: properties_default.sliderWrapper, children: [
-      /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs27("div", { className: `ee-field-group ee-slider ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ jsx37("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ jsxs27("div", { className: properties_default.sliderWrapper, children: [
+      /* @__PURE__ */ jsx37(
         "input",
         {
           type: "range",
@@ -27637,7 +28393,7 @@ function SliderInput({
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ jsxs24("span", { className: properties_default.sliderValue, children: [
+      /* @__PURE__ */ jsxs27("span", { className: properties_default.sliderValue, children: [
         value,
         unit
       ] })
@@ -27646,8 +28402,8 @@ function SliderInput({
 }
 
 // src/components/Properties/controls/LinkInput.tsx
-import { useState as useState17, useCallback as useCallback24, useEffect as useEffect14, useMemo as useMemo15 } from "react";
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useState as useState20, useCallback as useCallback26, useEffect as useEffect15, useMemo as useMemo15 } from "react";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function validateLink(value, type) {
   if (!value) return null;
   if (type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
@@ -27677,22 +28433,22 @@ function addPrefix(value, type) {
   return value;
 }
 function LinkInput({ label, value, onChange }) {
-  const [type, setType] = useState17(() => detectType(value));
-  const [rawValue, setRawValue] = useState17(() => stripPrefix(value, detectType(value)));
+  const [type, setType] = useState20(() => detectType(value));
+  const [rawValue, setRawValue] = useState20(() => stripPrefix(value, detectType(value)));
   const validationError = useMemo15(() => validateLink(rawValue, type), [rawValue, type]);
-  useEffect14(() => {
+  useEffect15(() => {
     const detected = detectType(value);
     setType(detected);
     setRawValue(stripPrefix(value, detected));
   }, [value]);
-  const handleTypeChange = useCallback24(
+  const handleTypeChange = useCallback26(
     (newType) => {
       setType(newType);
       onChange(addPrefix(rawValue, newType));
     },
     [rawValue, onChange]
   );
-  const handleValueChange = useCallback24(
+  const handleValueChange = useCallback26(
     (newValue) => {
       setRawValue(newValue);
       onChange(addPrefix(newValue, type));
@@ -27700,23 +28456,23 @@ function LinkInput({ label, value, onChange }) {
     [type, onChange]
   );
   const placeholder = type === "email" ? "user@example.com" : type === "phone" ? "+1234567890" : "https://";
-  return /* @__PURE__ */ jsxs25("div", { className: `ee-field-group ee-link-input ${properties_default.fieldGroup}`, children: [
-    /* @__PURE__ */ jsx34("label", { className: properties_default.fieldLabel, children: label }),
-    /* @__PURE__ */ jsxs25("div", { className: properties_default.fieldRowCompact, children: [
-      /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28("div", { className: `ee-field-group ee-link-input ${properties_default.fieldGroup}`, children: [
+    /* @__PURE__ */ jsx38("label", { className: properties_default.fieldLabel, children: label }),
+    /* @__PURE__ */ jsxs28("div", { className: properties_default.fieldRowCompact, children: [
+      /* @__PURE__ */ jsxs28(
         "select",
         {
           className: properties_default.fieldSelectNarrow,
           value: type,
           onChange: (e) => handleTypeChange(e.target.value),
           children: [
-            /* @__PURE__ */ jsx34("option", { value: "url", children: "URL" }),
-            /* @__PURE__ */ jsx34("option", { value: "email", children: "Email" }),
-            /* @__PURE__ */ jsx34("option", { value: "phone", children: "Phone" })
+            /* @__PURE__ */ jsx38("option", { value: "url", children: "URL" }),
+            /* @__PURE__ */ jsx38("option", { value: "email", children: "Email" }),
+            /* @__PURE__ */ jsx38("option", { value: "phone", children: "Phone" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx38(
         "input",
         {
           className: properties_default.fieldInputFlex,
@@ -27728,26 +28484,26 @@ function LinkInput({ label, value, onChange }) {
         }
       )
     ] }),
-    validationError && /* @__PURE__ */ jsx34("span", { className: `ee-validation-error ${properties_default.validationError}`, role: "alert", children: validationError })
+    validationError && /* @__PURE__ */ jsx38("span", { className: `ee-validation-error ${properties_default.validationError}`, role: "alert", children: validationError })
   ] });
 }
 
 // src/components/Properties/PropertyField.tsx
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
-var PropertyField = React33.memo(function PropertyField2(props) {
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var PropertyField = React35.memo(function PropertyField2(props) {
   switch (props.type) {
     case "color":
-      return /* @__PURE__ */ jsx35(ColorPicker, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ jsx39(ColorPicker, { label: props.label, value: props.value, onChange: props.onChange });
     case "padding":
-      return /* @__PURE__ */ jsx35(PaddingInput, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ jsx39(PaddingInput, { label: props.label, value: props.value, onChange: props.onChange });
     case "alignment":
-      return /* @__PURE__ */ jsx35(AlignmentPicker, { label: props.label, value: props.value, onChange: props.onChange, options: props.options });
+      return /* @__PURE__ */ jsx39(AlignmentPicker, { label: props.label, value: props.value, onChange: props.onChange, options: props.options });
     case "font":
-      return /* @__PURE__ */ jsx35(FontPicker, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ jsx39(FontPicker, { label: props.label, value: props.value, onChange: props.onChange });
     case "link":
-      return /* @__PURE__ */ jsx35(LinkInput, { label: props.label, value: props.value, onChange: props.onChange });
+      return /* @__PURE__ */ jsx39(LinkInput, { label: props.label, value: props.value, onChange: props.onChange });
     case "slider":
-      return /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx39(
         SliderInput,
         {
           label: props.label,
@@ -27760,8 +28516,8 @@ var PropertyField = React33.memo(function PropertyField2(props) {
         }
       );
     case "toggle":
-      return /* @__PURE__ */ jsx35("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ jsxs26("label", { className: `ee-checkbox-label ${properties_default.checkboxLabel}`, children: [
-        /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx39("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ jsxs29("label", { className: `ee-checkbox-label ${properties_default.checkboxLabel}`, children: [
+        /* @__PURE__ */ jsx39(
           "input",
           {
             type: "checkbox",
@@ -27772,22 +28528,22 @@ var PropertyField = React33.memo(function PropertyField2(props) {
         props.label
       ] }) });
     case "select":
-      return /* @__PURE__ */ jsxs26("div", { className: properties_default.fieldGroup, children: [
-        /* @__PURE__ */ jsx35("label", { className: properties_default.fieldLabel, children: props.label }),
-        /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsxs29("div", { className: properties_default.fieldGroup, children: [
+        /* @__PURE__ */ jsx39("label", { className: properties_default.fieldLabel, children: props.label }),
+        /* @__PURE__ */ jsx39(
           "select",
           {
             className: properties_default.fieldSelect,
             value: props.value,
             onChange: (e) => props.onChange(e.target.value),
-            children: props.options.map((opt) => /* @__PURE__ */ jsx35("option", { value: opt.value, children: opt.label }, opt.value))
+            children: props.options.map((opt) => /* @__PURE__ */ jsx39("option", { value: opt.value, children: opt.label }, opt.value))
           }
         )
       ] });
     case "textarea":
-      return /* @__PURE__ */ jsxs26("div", { className: properties_default.fieldGroup, children: [
-        /* @__PURE__ */ jsx35("label", { className: properties_default.fieldLabel, children: props.label }),
-        /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsxs29("div", { className: properties_default.fieldGroup, children: [
+        /* @__PURE__ */ jsx39("label", { className: properties_default.fieldLabel, children: props.label }),
+        /* @__PURE__ */ jsx39(
           "textarea",
           {
             className: props.code ? `ee-code-textarea ${properties_default.fieldTextareaCode}` : properties_default.fieldTextarea,
@@ -27800,9 +28556,9 @@ var PropertyField = React33.memo(function PropertyField2(props) {
       ] });
     case "text":
     default:
-      return /* @__PURE__ */ jsxs26("div", { className: properties_default.fieldGroup, children: [
-        /* @__PURE__ */ jsx35("label", { className: properties_default.fieldLabel, children: props.label }),
-        /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsxs29("div", { className: properties_default.fieldGroup, children: [
+        /* @__PURE__ */ jsx39("label", { className: properties_default.fieldLabel, children: props.label }),
+        /* @__PURE__ */ jsx39(
           "input",
           {
             className: properties_default.fieldInput,
@@ -27815,11 +28571,11 @@ var PropertyField = React33.memo(function PropertyField2(props) {
   }
 });
 function FieldSeparator() {
-  return /* @__PURE__ */ jsx35("div", { className: properties_default.separator });
+  return /* @__PURE__ */ jsx39("div", { className: properties_default.separator });
 }
 
 // src/components/Properties/SectionProperties.tsx
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var BG_SIZE_OPTIONS = [
   { value: "cover", label: "Cover" },
   { value: "contain", label: "Contain" },
@@ -27834,41 +28590,41 @@ var BG_REPEAT_OPTIONS = [
 function SectionProperties({ section }) {
   const dispatch = useEditorDispatch();
   const { properties } = section;
-  const update = useCallback25(
+  const update = useCallback27(
     (props) => {
       dispatch({ type: "UPDATE_SECTION", payload: { sectionId: section.id, properties: props } });
     },
     [dispatch, section.id]
   );
-  return /* @__PURE__ */ jsxs27("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx36(PropertyField, { type: "color", label: "Background Color", value: properties.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
-    /* @__PURE__ */ jsx36(PropertyField, { type: "padding", label: "Padding", value: properties.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ jsx36(PropertyField, { type: "text", label: "Border Radius", value: properties.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
-    /* @__PURE__ */ jsx36(PropertyField, { type: "toggle", label: "Full Width", value: properties.fullWidth || false, onChange: (v) => update({ fullWidth: v }) }),
-    /* @__PURE__ */ jsx36(FieldSeparator, {}),
-    /* @__PURE__ */ jsx36(PropertyField, { type: "text", label: "Background Image URL", value: properties.backgroundImage || "", onChange: (v) => update({ backgroundImage: v }), placeholder: "https://..." }),
-    /* @__PURE__ */ jsx36(PropertyField, { type: "select", label: "Background Size", value: properties.backgroundSize || "cover", onChange: (v) => update({ backgroundSize: v }), options: BG_SIZE_OPTIONS }),
-    /* @__PURE__ */ jsx36(PropertyField, { type: "select", label: "Background Repeat", value: properties.backgroundRepeat || "no-repeat", onChange: (v) => update({ backgroundRepeat: v }), options: BG_REPEAT_OPTIONS })
+  return /* @__PURE__ */ jsxs30("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx40(PropertyField, { type: "color", label: "Background Color", value: properties.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ jsx40(PropertyField, { type: "padding", label: "Padding", value: properties.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ jsx40(PropertyField, { type: "text", label: "Border Radius", value: properties.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
+    /* @__PURE__ */ jsx40(PropertyField, { type: "toggle", label: "Full Width", value: properties.fullWidth || false, onChange: (v) => update({ fullWidth: v }) }),
+    /* @__PURE__ */ jsx40(FieldSeparator, {}),
+    /* @__PURE__ */ jsx40(PropertyField, { type: "text", label: "Background Image URL", value: properties.backgroundImage || "", onChange: (v) => update({ backgroundImage: v }), placeholder: "https://..." }),
+    /* @__PURE__ */ jsx40(PropertyField, { type: "select", label: "Background Size", value: properties.backgroundSize || "cover", onChange: (v) => update({ backgroundSize: v }), options: BG_SIZE_OPTIONS }),
+    /* @__PURE__ */ jsx40(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
-import { useCallback as useCallback26 } from "react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useCallback as useCallback28 } from "react";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function HeadMetadataProperties() {
   const { template } = useTemplateContext();
   const dispatch = useEditorDispatch();
   const metadata = template.headMetadata ?? { title: "", previewText: "", headStyles: [] };
-  const update = useCallback26(
+  const update = useCallback28(
     (props) => {
       dispatch({ type: "UPDATE_HEAD_METADATA", payload: props });
     },
     [dispatch]
   );
-  return /* @__PURE__ */ jsxs28("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx37(PropertyField, { type: "text", label: "Email Title", value: metadata.title, onChange: (v) => update({ title: v }), placeholder: "Email title (mj-title)" }),
-    /* @__PURE__ */ jsx37(PropertyField, { type: "text", label: "Preview Text", value: metadata.previewText, onChange: (v) => update({ previewText: v }), placeholder: "Preview text shown in inbox (mj-preview)" }),
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs31("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx41(PropertyField, { type: "text", label: "Email Title", value: metadata.title, onChange: (v) => update({ title: v }), placeholder: "Email title (mj-title)" }),
+    /* @__PURE__ */ jsx41(PropertyField, { type: "text", label: "Preview Text", value: metadata.previewText, onChange: (v) => update({ previewText: v }), placeholder: "Preview text shown in inbox (mj-preview)" }),
+    /* @__PURE__ */ jsx41(
       PropertyField,
       {
         type: "textarea",
@@ -27887,10 +28643,10 @@ function HeadMetadataProperties() {
 }
 
 // src/hooks/useBlockUpdate.ts
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback29 } from "react";
 function useBlockUpdate(blockId) {
   const dispatch = useEditorDispatch();
-  const update = useCallback27(
+  const update = useCallback29(
     (properties) => {
       dispatch({
         type: "UPDATE_BLOCK",
@@ -27903,19 +28659,20 @@ function useBlockUpdate(blockId) {
 }
 
 // src/components/Properties/TextProperties.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 function TextProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ jsxs29("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx38("p", { className: properties_default.fieldHint, children: "Use the inline toolbar above the text block to format font, size, color, and alignment." }),
-    /* @__PURE__ */ jsx38(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
-    /* @__PURE__ */ jsx38(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ jsxs32("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx42("p", { className: properties_default.fieldHint, children: "Use the inline toolbar above the text block to format font, size, color, and alignment." }),
+    /* @__PURE__ */ jsx42(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor || "transparent", onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ jsx42(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
+    /* @__PURE__ */ jsx42(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/ButtonProperties.tsx
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var FONT_WEIGHT_OPTIONS = [
   { value: "normal", label: "Normal" },
   { value: "bold", label: "Bold" },
@@ -27938,32 +28695,32 @@ var TEXT_TRANSFORM_OPTIONS = [
 function ButtonProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ jsxs30("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx39(PropertyField, { type: "text", label: "Button Text", value: p.text, onChange: (v) => update({ text: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
-    /* @__PURE__ */ jsx39(FieldSeparator, {}),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }), placeholder: "auto" }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "normal", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "padding", label: "Outer Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ jsx39(PropertyField, { type: "padding", label: "Inner Padding", value: p.innerPadding, onChange: (v) => update({ innerPadding: v }) })
+  return /* @__PURE__ */ jsxs33("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Button Text", value: p.text, onChange: (v) => update({ text: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
+    /* @__PURE__ */ jsx43(FieldSeparator, {}),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }), placeholder: "auto" }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "normal", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "padding", label: "Outer Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ jsx43(PropertyField, { type: "padding", label: "Inner Padding", value: p.innerPadding, onChange: (v) => update({ innerPadding: v }) })
   ] });
 }
 
 // src/components/Properties/ImageProperties.tsx
-import { useCallback as useCallback28, useRef as useRef18 } from "react";
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useCallback as useCallback30, useRef as useRef20 } from "react";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 function ImageProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const { imageUploadAdapter } = useImageAdapter();
-  const fileInputRef = useRef18(null);
+  const fileInputRef = useRef20(null);
   const p = block.properties;
   const { upload, status, error } = useImageUpload({
     adapter: imageUploadAdapter,
@@ -27976,7 +28733,7 @@ function ImageProperties({ block }) {
       });
     }
   });
-  const handleFileSelect = useCallback28(
+  const handleFileSelect = useCallback30(
     async (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -27984,10 +28741,10 @@ function ImageProperties({ block }) {
     },
     [upload]
   );
-  return /* @__PURE__ */ jsxs31("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx40(PropertyField, { type: "text", label: "Image URL", value: p.src, onChange: (v) => update({ src: v }), placeholder: "https://..." }),
-    imageUploadAdapter && /* @__PURE__ */ jsxs31("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs34("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx44(PropertyField, { type: "text", label: "Image URL", value: p.src, onChange: (v) => update({ src: v }), placeholder: "https://..." }),
+    imageUploadAdapter && /* @__PURE__ */ jsxs34("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ jsx44(
         "button",
         {
           className: `ee-upload-btn ${status === "uploading" ? properties_default.fieldBtnUploadDisabled : properties_default.fieldBtnUpload}`,
@@ -27996,8 +28753,8 @@ function ImageProperties({ block }) {
           children: status === "uploading" ? "Uploading..." : "Upload Image"
         }
       ),
-      error && /* @__PURE__ */ jsx40("span", { className: `ee-upload-error ${properties_default.validationError}`, children: error }),
-      /* @__PURE__ */ jsx40(
+      error && /* @__PURE__ */ jsx44("span", { className: `ee-upload-error ${properties_default.validationError}`, children: error }),
+      /* @__PURE__ */ jsx44(
         "input",
         {
           ref: fileInputRef,
@@ -28008,21 +28765,21 @@ function ImageProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx40(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Image description" }),
-    /* @__PURE__ */ jsx40(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
-    /* @__PURE__ */ jsx40(FieldSeparator, {}),
-    /* @__PURE__ */ jsxs31("div", { className: properties_default.fieldRow, children: [
-      /* @__PURE__ */ jsx40("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ jsx40(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }) }),
-      /* @__PURE__ */ jsx40("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ jsx40(PropertyField, { type: "text", label: "Height", value: p.height, onChange: (v) => update({ height: v }) }) })
+    /* @__PURE__ */ jsx44(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Image description" }),
+    /* @__PURE__ */ jsx44(PropertyField, { type: "link", label: "Link URL", value: p.href, onChange: (v) => update({ href: v }) }),
+    /* @__PURE__ */ jsx44(FieldSeparator, {}),
+    /* @__PURE__ */ jsxs34("div", { className: properties_default.fieldRow, children: [
+      /* @__PURE__ */ jsx44("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ jsx44(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }) }),
+      /* @__PURE__ */ jsx44("div", { className: properties_default.fieldHalf, children: /* @__PURE__ */ jsx44(PropertyField, { type: "text", label: "Height", value: p.height, onChange: (v) => update({ height: v }) }) })
     ] }),
-    /* @__PURE__ */ jsx40(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx40(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ jsx40(PropertyField, { type: "toggle", label: "Fluid on Mobile", value: p.fluidOnMobile, onChange: (v) => update({ fluidOnMobile: v }) })
+    /* @__PURE__ */ jsx44(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx44(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ jsx44(PropertyField, { type: "toggle", label: "Fluid on Mobile", value: p.fluidOnMobile, onChange: (v) => update({ fluidOnMobile: v }) })
   ] });
 }
 
 // src/components/Properties/DividerProperties.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var BORDER_STYLE_OPTIONS = [
   { value: "solid", label: "Solid" },
   { value: "dashed", label: "Dashed" },
@@ -28031,26 +28788,26 @@ var BORDER_STYLE_OPTIONS = [
 function DividerProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ jsxs32("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx41(PropertyField, { type: "color", label: "Border Color", value: p.borderColor, onChange: (v) => update({ borderColor: v }) }),
-    /* @__PURE__ */ jsx41(PropertyField, { type: "text", label: "Border Width", value: p.borderWidth, onChange: (v) => update({ borderWidth: v }) }),
-    /* @__PURE__ */ jsx41(PropertyField, { type: "select", label: "Border Style", value: p.borderStyle, onChange: (v) => update({ borderStyle: v }), options: BORDER_STYLE_OPTIONS }),
-    /* @__PURE__ */ jsx41(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }),
-    /* @__PURE__ */ jsx41(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ jsxs35("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx45(PropertyField, { type: "color", label: "Border Color", value: p.borderColor, onChange: (v) => update({ borderColor: v }) }),
+    /* @__PURE__ */ jsx45(PropertyField, { type: "text", label: "Border Width", value: p.borderWidth, onChange: (v) => update({ borderWidth: v }) }),
+    /* @__PURE__ */ jsx45(PropertyField, { type: "select", label: "Border Style", value: p.borderStyle, onChange: (v) => update({ borderStyle: v }), options: BORDER_STYLE_OPTIONS }),
+    /* @__PURE__ */ jsx45(PropertyField, { type: "text", label: "Width", value: p.width, onChange: (v) => update({ width: v }) }),
+    /* @__PURE__ */ jsx45(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/SpacerProperties.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function SpacerProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
   const heightNum = parseInt(p.height, 10) || 20;
-  return /* @__PURE__ */ jsx42("div", { className: properties_default.propertiesBody, children: /* @__PURE__ */ jsx42(PropertyField, { type: "slider", label: "Height", value: heightNum, min: 5, max: 200, step: 5, unit: "px", onChange: (v) => update({ height: `${v}px` }) }) });
+  return /* @__PURE__ */ jsx46("div", { className: properties_default.propertiesBody, children: /* @__PURE__ */ jsx46(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
-import { useCallback as useCallback29 } from "react";
+import { useCallback as useCallback31, useRef as useRef21, useState as useState21 } from "react";
 
 // src/types.ts
 function narrowBlock(block, type) {
@@ -28058,14 +28815,105 @@ function narrowBlock(block, type) {
 }
 
 // src/components/Properties/SocialProperties.tsx
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx47, jsxs as jsxs36 } from "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 = useRef21(null);
+  const [localError, setLocalError] = useState21(null);
+  const { upload, status, error } = useImageUpload({
+    adapter: imageUploadAdapter,
+    blockId,
+    onSuccess: (result) => {
+      onUpdate({ src: result.url });
+    }
+  });
+  const handleFileSelect = useCallback31(
+    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__ */ jsxs36("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "4px" }, children: [
+    /* @__PURE__ */ jsx47(
+      "div",
+      {
+        className: blocks_default.socialIconPreview,
+        style: { backgroundColor: bgColor },
+        children: element.src ? /* @__PURE__ */ jsx47("img", { src: element.src, alt: element.name }) : SvgIcon ? /* @__PURE__ */ jsx47(SvgIcon, { size: 16, color: element.color || "#ffffff" }) : /* @__PURE__ */ jsx47("span", { style: { color: element.color || "#ffffff", fontSize: "12px", fontWeight: "bold" }, children: element.name.charAt(0).toUpperCase() })
+      }
+    ),
+    imageUploadAdapter && /* @__PURE__ */ jsxs36(Fragment4, { children: [
+      /* @__PURE__ */ jsx47(
+        "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__ */ jsx47(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: ".png,.jpg,.jpeg,.gif,.svg,.webp",
+          onChange: handleFileSelect,
+          style: { display: "none" }
+        }
+      )
+    ] }),
+    element.src && /* @__PURE__ */ jsx47(
+      "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__ */ jsx47("span", { className: properties_default.validationError, style: { fontSize: "10px" }, children: localError || error })
+  ] });
+}
 function SocialProperties({ block }) {
   const update = useBlockUpdate(block.id);
-  const updateElement = useCallback29(
+  const updateElement = useCallback31(
     (index, changes) => {
       const elements = [...block.properties.elements];
       elements[index] = { ...elements[index], ...changes };
@@ -28073,18 +28921,18 @@ function SocialProperties({ block }) {
     },
     [block.properties.elements, update]
   );
-  const addElement = useCallback29(() => {
+  const addElement = useCallback31(() => {
     const elements = [...block.properties.elements, { id: generateId("se"), name: "web", href: "#" }];
     update({ elements });
   }, [block.properties.elements, update]);
-  const removeElement = useCallback29(
+  const removeElement = useCallback31(
     (index) => {
       const elements = block.properties.elements.filter((_, i) => i !== index);
       update({ elements });
     },
     [block.properties.elements, update]
   );
-  const moveElement = useCallback29(
+  const moveElement = useCallback31(
     (index, direction) => {
       const elements = [...block.properties.elements];
       const newIndex = index + direction;
@@ -28096,45 +28944,45 @@ function SocialProperties({ block }) {
   );
   if (!narrowBlock(block, "social")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ jsxs33("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx43(PropertyField, { type: "select", label: "Mode", value: p.mode, onChange: (v) => update({ mode: v }), options: MODE_OPTIONS }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Icon Size", value: p.iconSize, onChange: (v) => update({ iconSize: v }) }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Icon Padding", value: p.iconPadding, onChange: (v) => update({ iconPadding: v }) }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ jsx43(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ jsx43(FieldSeparator, {}),
-    /* @__PURE__ */ jsxs33("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ jsx43("label", { className: properties_default.fieldLabel, children: "Social Elements" }),
-      /* @__PURE__ */ jsx43("div", { className: blocks_default.socialElementsContainer, children: p.elements.map((element, index) => /* @__PURE__ */ jsxs33("div", { className: blocks_default.socialElementItem, children: [
-        /* @__PURE__ */ jsxs33("div", { className: properties_default.fieldRow, children: [
-          /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs36("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx47(PropertyField, { type: "select", label: "Mode", value: p.mode, onChange: (v) => update({ mode: v }), options: MODE_OPTIONS }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "text", label: "Icon Size", value: p.iconSize, onChange: (v) => update({ iconSize: v }) }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "text", label: "Icon Padding", value: p.iconPadding, onChange: (v) => update({ iconPadding: v }) }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "text", label: "Border Radius", value: p.borderRadius, onChange: (v) => update({ borderRadius: v }) }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ jsx47(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ jsx47(FieldSeparator, {}),
+    /* @__PURE__ */ jsxs36("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ jsx47("label", { className: properties_default.fieldLabel, children: "Social Elements" }),
+      /* @__PURE__ */ jsx47("div", { className: blocks_default.socialElementsContainer, children: p.elements.map((element, index) => /* @__PURE__ */ jsxs36("div", { className: blocks_default.socialElementItem, children: [
+        /* @__PURE__ */ jsxs36("div", { className: properties_default.fieldRow, children: [
+          /* @__PURE__ */ jsxs36(
             "select",
             {
               className: `${properties_default.fieldSelect} ${properties_default.fieldInputFlex}`,
               value: element.name,
               onChange: (e) => updateElement(index, { name: e.target.value }),
               children: [
-                /* @__PURE__ */ jsx43("option", { value: "facebook", children: "Facebook" }),
-                /* @__PURE__ */ jsx43("option", { value: "twitter", children: "Twitter" }),
-                /* @__PURE__ */ jsx43("option", { value: "instagram", children: "Instagram" }),
-                /* @__PURE__ */ jsx43("option", { value: "linkedin", children: "LinkedIn" }),
-                /* @__PURE__ */ jsx43("option", { value: "youtube", children: "YouTube" }),
-                /* @__PURE__ */ jsx43("option", { value: "github", children: "GitHub" }),
-                /* @__PURE__ */ jsx43("option", { value: "pinterest", children: "Pinterest" }),
-                /* @__PURE__ */ jsx43("option", { value: "snapchat", children: "Snapchat" }),
-                /* @__PURE__ */ jsx43("option", { value: "tiktok", children: "TikTok" }),
-                /* @__PURE__ */ jsx43("option", { value: "web", children: "Web" })
+                /* @__PURE__ */ jsx47("option", { value: "facebook", children: "Facebook" }),
+                /* @__PURE__ */ jsx47("option", { value: "twitter", children: "Twitter" }),
+                /* @__PURE__ */ jsx47("option", { value: "instagram", children: "Instagram" }),
+                /* @__PURE__ */ jsx47("option", { value: "linkedin", children: "LinkedIn" }),
+                /* @__PURE__ */ jsx47("option", { value: "youtube", children: "YouTube" }),
+                /* @__PURE__ */ jsx47("option", { value: "github", children: "GitHub" }),
+                /* @__PURE__ */ jsx47("option", { value: "pinterest", children: "Pinterest" }),
+                /* @__PURE__ */ jsx47("option", { value: "snapchat", children: "Snapchat" }),
+                /* @__PURE__ */ jsx47("option", { value: "tiktok", children: "TikTok" }),
+                /* @__PURE__ */ jsx47("option", { value: "web", children: "Web" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx43("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveElement(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
-          /* @__PURE__ */ jsx43("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__ */ jsx43("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeElement(index), title: "Remove", children: "\xD7" })
+          /* @__PURE__ */ jsx47("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveElement(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
+          /* @__PURE__ */ jsx47("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__ */ jsx47("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeElement(index), title: "Remove", children: "\xD7" })
         ] }),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx47(
           "input",
           {
             className: properties_default.fieldInputStacked,
@@ -28143,7 +28991,7 @@ function SocialProperties({ block }) {
             placeholder: "URL"
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx47(
           "input",
           {
             className: properties_default.fieldInputStacked,
@@ -28151,27 +28999,35 @@ function SocialProperties({ block }) {
             onChange: (e) => updateElement(index, { content: e.target.value }),
             placeholder: "Label (optional)"
           }
+        ),
+        /* @__PURE__ */ jsx47(
+          SocialElementIconUpload,
+          {
+            element,
+            blockId: block.id,
+            onUpdate: (changes) => updateElement(index, changes)
+          }
         )
       ] }, element.id ?? `se-${index}`)) }),
-      /* @__PURE__ */ jsx43("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addElement, children: "+ Add Element" })
+      /* @__PURE__ */ jsx47("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addElement, children: "+ Add Element" })
     ] })
   ] });
 }
 
 // src/components/Properties/HtmlProperties.tsx
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 function HtmlProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  return /* @__PURE__ */ jsxs34("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx44(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__ */ jsx44(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ jsxs37("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx48(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__ */ jsx48(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/VideoProperties.tsx
-import { useCallback as useCallback30 } from "react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useCallback as useCallback32 } from "react";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 function getAutoThumbnail3(url) {
   if (!url) return "";
   const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
@@ -28181,7 +29037,7 @@ function getAutoThumbnail3(url) {
 function VideoProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  const handleVideoUrlChange = useCallback30(
+  const handleVideoUrlChange = useCallback32(
     (src) => {
       const updates = { src };
       if (!p.thumbnailUrl) {
@@ -28192,14 +29048,14 @@ function VideoProperties({ block }) {
     },
     [update, p.thumbnailUrl]
   );
-  const handleAutoThumbnail = useCallback30(() => {
+  const handleAutoThumbnail = useCallback32(() => {
     const auto = getAutoThumbnail3(p.src);
     if (auto) update({ thumbnailUrl: auto });
   }, [update, p.src]);
-  return /* @__PURE__ */ jsxs35("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsxs35("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ jsx45("label", { className: properties_default.fieldLabel, children: "Video URL" }),
-      /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs38("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsxs38("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ jsx49("label", { className: properties_default.fieldLabel, children: "Video URL" }),
+      /* @__PURE__ */ jsx49(
         "input",
         {
           className: properties_default.fieldInput,
@@ -28209,9 +29065,9 @@ function VideoProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs35("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ jsx45("label", { className: properties_default.fieldLabel, children: "Thumbnail URL" }),
-      /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsxs38("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ jsx49("label", { className: properties_default.fieldLabel, children: "Thumbnail URL" }),
+      /* @__PURE__ */ jsx49(
         "input",
         {
           className: properties_default.fieldInput,
@@ -28220,7 +29076,7 @@ function VideoProperties({ block }) {
           placeholder: "https://..."
         }
       ),
-      p.src && /* @__PURE__ */ jsx45(
+      p.src && /* @__PURE__ */ jsx49(
         "button",
         {
           className: `ee-auto-thumbnail ${properties_default.fieldBtnUpload} ${properties_default.fieldInputStacked}`,
@@ -28229,15 +29085,15 @@ function VideoProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Video description" }),
-    /* @__PURE__ */ jsx45(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx45(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+    /* @__PURE__ */ jsx49(PropertyField, { type: "text", label: "Alt Text", value: p.alt, onChange: (v) => update({ alt: v }), placeholder: "Video description" }),
+    /* @__PURE__ */ jsx49(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx49(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/HeadingProperties.tsx
-import { useCallback as useCallback31 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useCallback as useCallback33 } from "react";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var LEVEL_OPTIONS = [
   { value: "h1", label: "H1" },
   { value: "h2", label: "H2" },
@@ -28272,38 +29128,39 @@ var LEVEL_DEFAULTS = {
 function HeadingProperties({ block }) {
   const update = useBlockUpdate(block.id);
   const p = block.properties;
-  const handleLevelChange = useCallback31(
+  const handleLevelChange = useCallback33(
     (level) => {
       const defaults2 = LEVEL_DEFAULTS[level] || LEVEL_DEFAULTS.h2;
       update({ level, fontSize: defaults2.fontSize, lineHeight: defaults2.lineHeight });
     },
     [update]
   );
-  return /* @__PURE__ */ jsxs36("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx46(PropertyField, { type: "select", label: "Heading Level", value: p.level, onChange: handleLevelChange, options: LEVEL_OPTIONS }),
-    /* @__PURE__ */ jsx46(FieldSeparator, {}),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "color", label: "Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "bold", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS2 }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS2 }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx46(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+  return /* @__PURE__ */ jsxs39("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx50(PropertyField, { type: "select", label: "Heading Level", value: p.level, onChange: handleLevelChange, options: LEVEL_OPTIONS }),
+    /* @__PURE__ */ jsx50(FieldSeparator, {}),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor || "transparent", onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Line Height", value: p.lineHeight, onChange: (v) => update({ lineHeight: v }) }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "select", label: "Font Weight", value: p.fontWeight || "bold", onChange: (v) => update({ fontWeight: v }), options: FONT_WEIGHT_OPTIONS2 }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "select", label: "Text Transform", value: p.textTransform || "none", onChange: (v) => update({ textTransform: v }), options: TEXT_TRANSFORM_OPTIONS2 }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Letter Spacing", value: p.letterSpacing || "normal", onChange: (v) => update({ letterSpacing: v }), placeholder: "normal" }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx50(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/CountdownProperties.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 function CountdownProperties({ block }) {
   const update = useBlockUpdate(block.id);
   if (!narrowBlock(block, "countdown")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ jsxs37("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsxs37("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ jsx47("label", { className: properties_default.fieldLabel, children: "Target Date" }),
-      /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs40("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsxs40("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ jsx51("label", { className: properties_default.fieldLabel, children: "Target Date" }),
+      /* @__PURE__ */ jsx51(
         "input",
         {
           className: properties_default.fieldInput,
@@ -28313,27 +29170,27 @@ function CountdownProperties({ block }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "text", label: "Label", value: p.label, onChange: (v) => update({ label: v }) }),
-    /* @__PURE__ */ jsx47(FieldSeparator, {}),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "color", label: "Digit Background", value: p.digitBackgroundColor, onChange: (v) => update({ digitBackgroundColor: v }) }),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "color", label: "Digit Color", value: p.digitColor, onChange: (v) => update({ digitColor: v }) }),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "color", label: "Label Color", value: p.labelColor, onChange: (v) => update({ labelColor: v }) }),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx47(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
+    /* @__PURE__ */ jsx51(PropertyField, { type: "text", label: "Label", value: p.label, onChange: (v) => update({ label: v }) }),
+    /* @__PURE__ */ jsx51(FieldSeparator, {}),
+    /* @__PURE__ */ jsx51(PropertyField, { type: "color", label: "Digit Background", value: p.digitBackgroundColor, onChange: (v) => update({ digitBackgroundColor: v }) }),
+    /* @__PURE__ */ jsx51(PropertyField, { type: "color", label: "Digit Color", value: p.digitColor, onChange: (v) => update({ digitColor: v }) }),
+    /* @__PURE__ */ jsx51(PropertyField, { type: "color", label: "Label Color", value: p.labelColor, onChange: (v) => update({ labelColor: v }) }),
+    /* @__PURE__ */ jsx51(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ jsx51(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx51(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) })
   ] });
 }
 
 // src/components/Properties/MenuProperties.tsx
-import { useCallback as useCallback32 } from "react";
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useCallback as useCallback34 } from "react";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var HAMBURGER_OPTIONS = [
   { value: "false", label: "Off" },
   { value: "true", label: "On" }
 ];
 function MenuProperties({ block }) {
   const update = useBlockUpdate(block.id);
-  const updateItem = useCallback32(
+  const updateItem = useCallback34(
     (index, changes) => {
       const items = [...block.properties.items];
       items[index] = { ...items[index], ...changes };
@@ -28341,18 +29198,18 @@ function MenuProperties({ block }) {
     },
     [block.properties.items, update]
   );
-  const addItem = useCallback32(() => {
+  const addItem = useCallback34(() => {
     const items = [...block.properties.items, { id: generateId("mi"), text: "Link", href: "#" }];
     update({ items });
   }, [block.properties.items, update]);
-  const removeItem = useCallback32(
+  const removeItem = useCallback34(
     (index) => {
       const items = block.properties.items.filter((_, i) => i !== index);
       update({ items });
     },
     [block.properties.items, update]
   );
-  const moveItem = useCallback32(
+  const moveItem = useCallback34(
     (index, direction) => {
       const items = [...block.properties.items];
       const newIndex = index + direction;
@@ -28364,20 +29221,20 @@ function MenuProperties({ block }) {
   );
   if (!narrowBlock(block, "menu")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ jsxs38("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx48(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
-    /* @__PURE__ */ jsx48(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
-    /* @__PURE__ */ jsx48(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
-    /* @__PURE__ */ jsx48(PropertyField, { type: "select", label: "Hamburger Mode", value: p.hamburger ? "true" : "false", onChange: (v) => update({ hamburger: v === "true" }), options: HAMBURGER_OPTIONS }),
-    p.hamburger && /* @__PURE__ */ jsx48(PropertyField, { type: "color", label: "Icon Color", value: p.iconColor, onChange: (v) => update({ iconColor: v }) }),
-    /* @__PURE__ */ jsx48(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx48(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ jsx48(FieldSeparator, {}),
-    /* @__PURE__ */ jsxs38("div", { className: properties_default.fieldGroup, children: [
-      /* @__PURE__ */ jsx48("label", { className: properties_default.fieldLabel, children: "Menu Items" }),
-      /* @__PURE__ */ jsx48("div", { className: blocks_default.menuItemsContainer, children: p.items.map((item, index) => /* @__PURE__ */ jsxs38("div", { className: blocks_default.menuItemEntry, children: [
-        /* @__PURE__ */ jsxs38("div", { className: properties_default.fieldRow, children: [
-          /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs41("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx52(PropertyField, { type: "font", label: "Font Family", value: p.fontFamily, onChange: (v) => update({ fontFamily: v }) }),
+    /* @__PURE__ */ jsx52(PropertyField, { type: "text", label: "Font Size", value: p.fontSize, onChange: (v) => update({ fontSize: v }) }),
+    /* @__PURE__ */ jsx52(PropertyField, { type: "color", label: "Text Color", value: p.color, onChange: (v) => update({ color: v }) }),
+    /* @__PURE__ */ jsx52(PropertyField, { type: "select", label: "Hamburger Mode", value: p.hamburger ? "true" : "false", onChange: (v) => update({ hamburger: v === "true" }), options: HAMBURGER_OPTIONS }),
+    p.hamburger && /* @__PURE__ */ jsx52(PropertyField, { type: "color", label: "Icon Color", value: p.iconColor, onChange: (v) => update({ iconColor: v }) }),
+    /* @__PURE__ */ jsx52(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx52(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ jsx52(FieldSeparator, {}),
+    /* @__PURE__ */ jsxs41("div", { className: properties_default.fieldGroup, children: [
+      /* @__PURE__ */ jsx52("label", { className: properties_default.fieldLabel, children: "Menu Items" }),
+      /* @__PURE__ */ jsx52("div", { className: blocks_default.menuItemsContainer, children: p.items.map((item, index) => /* @__PURE__ */ jsxs41("div", { className: blocks_default.menuItemEntry, children: [
+        /* @__PURE__ */ jsxs41("div", { className: properties_default.fieldRow, children: [
+          /* @__PURE__ */ jsx52(
             "input",
             {
               className: properties_default.fieldInputFlex,
@@ -28386,11 +29243,11 @@ function MenuProperties({ block }) {
               placeholder: "Label"
             }
           ),
-          /* @__PURE__ */ jsx48("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveItem(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
-          /* @__PURE__ */ jsx48("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__ */ jsx48("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeItem(index), title: "Remove", children: "\xD7" })
+          /* @__PURE__ */ jsx52("button", { className: `ee-item-move-up ${properties_default.itemActionBtn}`, onClick: () => moveItem(index, -1), disabled: index === 0, title: "Move up", children: "\u2191" }),
+          /* @__PURE__ */ jsx52("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__ */ jsx52("button", { className: `ee-item-remove ${properties_default.itemActionBtnDanger}`, onClick: () => removeItem(index), title: "Remove", children: "\xD7" })
         ] }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx52(
           "input",
           {
             className: properties_default.fieldInputStacked,
@@ -28400,17 +29257,17 @@ function MenuProperties({ block }) {
           }
         )
       ] }, item.id ?? `mi-${index}`)) }),
-      /* @__PURE__ */ jsx48("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addItem, children: "+ Add Item" })
+      /* @__PURE__ */ jsx52("button", { className: `ee-add-item ${properties_default.addItemBtn}`, onClick: addItem, children: "+ Add Item" })
     ] })
   ] });
 }
 
 // src/components/ImageUpload/ImageUploader.tsx
-import { useCallback as useCallback33, useRef as useRef19 } from "react";
-import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useCallback as useCallback35, useRef as useRef22 } from "react";
+import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 function ImageUploader({ blockId, onUploadComplete }) {
   const { imageUploadAdapter } = useImageAdapter();
-  const fileInputRef = useRef19(null);
+  const fileInputRef = useRef22(null);
   const { status, progress, error, upload, cancel } = useImageUpload({
     adapter: imageUploadAdapter,
     blockId,
@@ -28418,7 +29275,7 @@ function ImageUploader({ blockId, onUploadComplete }) {
       onUploadComplete(result.url, result.alt);
     }
   });
-  const handleFileChange = useCallback33(
+  const handleFileChange = useCallback35(
     async (e) => {
       const file = e.target.files?.[0];
       if (file) {
@@ -28427,26 +29284,26 @@ function ImageUploader({ blockId, onUploadComplete }) {
     },
     [upload]
   );
-  const handleClick2 = useCallback33(() => {
+  const handleClick2 = useCallback35(() => {
     fileInputRef.current?.click();
   }, []);
-  return /* @__PURE__ */ jsxs39("div", { children: [
-    status === "uploading" ? /* @__PURE__ */ jsxs39("div", { className: `ee-image-uploading ${blocks_default.imageUploading}`, children: [
-      /* @__PURE__ */ jsxs39("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, children: [
-        /* @__PURE__ */ jsxs39("span", { children: [
+  return /* @__PURE__ */ jsxs42("div", { children: [
+    status === "uploading" ? /* @__PURE__ */ jsxs42("div", { className: `ee-image-uploading ${blocks_default.imageUploading}`, children: [
+      /* @__PURE__ */ jsxs42("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, children: [
+        /* @__PURE__ */ jsxs42("span", { children: [
           "Uploading... ",
           Math.round(progress),
           "%"
         ] }),
-        /* @__PURE__ */ jsx49("button", { className: "ee-upload-cancel", onClick: cancel, children: "Cancel" })
+        /* @__PURE__ */ jsx53("button", { className: "ee-upload-cancel", onClick: cancel, children: "Cancel" })
       ] }),
-      /* @__PURE__ */ jsx49("div", { className: `ee-image-progress ${blocks_default.imageProgress}`, style: { width: `${progress}%` } })
-    ] }) : /* @__PURE__ */ jsxs39("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, onClick: handleClick2, children: [
-      /* @__PURE__ */ jsx49("span", { className: `ee-image-placeholder-icon ${blocks_default.imagePlaceholderIcon}`, children: "+" }),
-      /* @__PURE__ */ jsx49("span", { children: "Click to upload image" })
+      /* @__PURE__ */ jsx53("div", { className: `ee-image-progress ${blocks_default.imageProgress}`, style: { width: `${progress}%` } })
+    ] }) : /* @__PURE__ */ jsxs42("div", { className: `ee-image-placeholder ${blocks_default.imagePlaceholder}`, onClick: handleClick2, children: [
+      /* @__PURE__ */ jsx53("span", { className: `ee-image-placeholder-icon ${blocks_default.imagePlaceholderIcon}`, children: "+" }),
+      /* @__PURE__ */ jsx53("span", { children: "Click to upload image" })
     ] }),
-    error && /* @__PURE__ */ jsx49("div", { className: `ee-image-error ${blocks_default.imageError}`, children: error }),
-    /* @__PURE__ */ jsx49(
+    error && /* @__PURE__ */ jsx53("div", { className: `ee-image-error ${blocks_default.imageError}`, children: error }),
+    /* @__PURE__ */ jsx53(
       "input",
       {
         ref: fileInputRef,
@@ -28460,39 +29317,39 @@ function ImageUploader({ blockId, onUploadComplete }) {
 }
 
 // src/components/Properties/HeroProperties.tsx
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 function HeroProperties({ block }) {
   const update = useBlockUpdate(block.id);
   if (!narrowBlock(block, "hero")) return null;
   const p = block.properties;
-  return /* @__PURE__ */ jsxs40("div", { className: properties_default.propertiesBody, children: [
-    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Heading", value: p.heading, onChange: (v) => update({ heading: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "textarea", label: "Subtext", value: p.subtext, onChange: (v) => update({ subtext: v }), rows: 3 }),
-    /* @__PURE__ */ jsx50(FieldSeparator, {}),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Button Text", value: p.buttonText, onChange: (v) => update({ buttonText: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "link", label: "Button Link", value: p.buttonHref, onChange: (v) => update({ buttonHref: v }) }),
-    /* @__PURE__ */ jsx50(FieldSeparator, {}),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Heading Color", value: p.headingColor, onChange: (v) => update({ headingColor: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Heading Font Size", value: p.headingFontSize, onChange: (v) => update({ headingFontSize: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Subtext Color", value: p.subtextColor, onChange: (v) => update({ subtextColor: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Subtext Font Size", value: p.subtextFontSize, onChange: (v) => update({ subtextFontSize: v }) }),
-    /* @__PURE__ */ jsx50(FieldSeparator, {}),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Button Background", value: p.buttonBackgroundColor, onChange: (v) => update({ buttonBackgroundColor: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Button Text Color", value: p.buttonColor, onChange: (v) => update({ buttonColor: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Button Border Radius", value: p.buttonBorderRadius, onChange: (v) => update({ buttonBorderRadius: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
-    /* @__PURE__ */ jsx50(FieldSeparator, {}),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
-    /* @__PURE__ */ jsx50(PropertyField, { type: "text", label: "Background Image URL", value: p.backgroundImage, onChange: (v) => update({ backgroundImage: v }), placeholder: "https://example.com/image.jpg" }),
-    !p.backgroundImage && /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs43("div", { className: properties_default.propertiesBody, children: [
+    /* @__PURE__ */ jsx54(PropertyField, { type: "text", label: "Heading", value: p.heading, onChange: (v) => update({ heading: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "textarea", label: "Subtext", value: p.subtext, onChange: (v) => update({ subtext: v }), rows: 3 }),
+    /* @__PURE__ */ jsx54(FieldSeparator, {}),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "text", label: "Button Text", value: p.buttonText, onChange: (v) => update({ buttonText: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "link", label: "Button Link", value: p.buttonHref, onChange: (v) => update({ buttonHref: v }) }),
+    /* @__PURE__ */ jsx54(FieldSeparator, {}),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "color", label: "Heading Color", value: p.headingColor, onChange: (v) => update({ headingColor: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "text", label: "Heading Font Size", value: p.headingFontSize, onChange: (v) => update({ headingFontSize: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "color", label: "Subtext Color", value: p.subtextColor, onChange: (v) => update({ subtextColor: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "text", label: "Subtext Font Size", value: p.subtextFontSize, onChange: (v) => update({ subtextFontSize: v }) }),
+    /* @__PURE__ */ jsx54(FieldSeparator, {}),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "color", label: "Button Background", value: p.buttonBackgroundColor, onChange: (v) => update({ buttonBackgroundColor: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "color", label: "Button Text Color", value: p.buttonColor, onChange: (v) => update({ buttonColor: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "text", label: "Button Border Radius", value: p.buttonBorderRadius, onChange: (v) => update({ buttonBorderRadius: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "alignment", label: "Alignment", value: p.align, onChange: (v) => update({ align: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "padding", label: "Padding", value: p.padding, onChange: (v) => update({ padding: v }) }),
+    /* @__PURE__ */ jsx54(FieldSeparator, {}),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "color", label: "Background Color", value: p.backgroundColor, onChange: (v) => update({ backgroundColor: v }) }),
+    /* @__PURE__ */ jsx54(PropertyField, { type: "text", label: "Background Image URL", value: p.backgroundImage, onChange: (v) => update({ backgroundImage: v }), placeholder: "https://example.com/image.jpg" }),
+    !p.backgroundImage && /* @__PURE__ */ jsx54(
       ImageUploader,
       {
         blockId: block.id,
         onUploadComplete: (url) => update({ backgroundImage: url })
       }
     ),
-    p.backgroundImage && /* @__PURE__ */ jsx50("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ jsx50(
+    p.backgroundImage && /* @__PURE__ */ jsx54("div", { className: properties_default.fieldGroup, children: /* @__PURE__ */ jsx54(
       "button",
       {
         className: `ee-remove-bg ${properties_default.fieldBtnUpload}`,
@@ -28504,7 +29361,7 @@ function HeroProperties({ block }) {
 }
 
 // src/components/Properties/PropertiesPanel.tsx
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var BUILT_IN_PANELS = {
   text: TextProperties,
   button: ButtonProperties,
@@ -28528,28 +29385,28 @@ function PropertiesPanel() {
   if (selectedBlock) {
     const title = selectedBlock.type.charAt(0).toUpperCase() + selectedBlock.type.slice(1);
     const Component2 = getBlockPanel(selectedBlock.type);
-    return /* @__PURE__ */ jsxs41("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
-      /* @__PURE__ */ jsxs41("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: [
+    return /* @__PURE__ */ jsxs44("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
+      /* @__PURE__ */ jsxs44("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: [
         title,
         " Properties"
       ] }),
-      Component2 ? /* @__PURE__ */ jsx51(Component2, { block: selectedBlock }) : null
+      Component2 ? /* @__PURE__ */ jsx55(Component2, { block: selectedBlock }) : null
     ] });
   }
   if (selectedSection) {
-    return /* @__PURE__ */ jsxs41("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
-      /* @__PURE__ */ jsx51("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Section Properties" }),
-      /* @__PURE__ */ jsx51(SectionProperties, { section: selectedSection })
+    return /* @__PURE__ */ jsxs44("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
+      /* @__PURE__ */ jsx55("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Section Properties" }),
+      /* @__PURE__ */ jsx55(SectionProperties, { section: selectedSection })
     ] });
   }
-  return /* @__PURE__ */ jsxs41("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
-    /* @__PURE__ */ jsx51("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Email Settings" }),
-    /* @__PURE__ */ jsx51(HeadMetadataProperties, {})
+  return /* @__PURE__ */ jsxs44("div", { className: `ee-properties-panel ${properties_default.propertiesInner}`, children: [
+    /* @__PURE__ */ jsx55("div", { className: `ee-properties-header ${properties_default.propertiesHeader}`, children: "Email Settings" }),
+    /* @__PURE__ */ jsx55(HeadMetadataProperties, {})
   ] });
 }
 
 // src/components/Preview/PreviewPanel.tsx
-import { useEffect as useEffect15, useState as useState18, useRef as useRef20 } from "react";
+import { useEffect as useEffect16, useState as useState22, useRef as useRef23 } from "react";
 
 // src/styles/preview.module.css
 var preview_default = {
@@ -28564,17 +29421,17 @@ var preview_default = {
 };
 
 // src/components/Preview/PreviewPanel.tsx
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var PREVIEW_WIDTHS = {
   desktop: 600,
   mobile: 375
 };
 function PreviewPanel() {
   const { template } = useTemplateContext();
-  const [html2, setHtml] = useState18("");
-  const [previewMode, setPreviewMode] = useState18("desktop");
-  const iframeRef = useRef20(null);
-  useEffect15(() => {
+  const [html2, setHtml] = useState22("");
+  const [previewMode, setPreviewMode] = useState22("desktop");
+  const iframeRef = useRef23(null);
+  useEffect16(() => {
     let cancelled = false;
     const timer = setTimeout(() => {
       async function compile() {
@@ -28591,7 +29448,7 @@ function PreviewPanel() {
       clearTimeout(timer);
     };
   }, [template]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (iframeRef.current && html2) {
       const doc3 = iframeRef.current.contentDocument;
       if (doc3) {
@@ -28601,9 +29458,9 @@ function PreviewPanel() {
       }
     }
   }, [html2]);
-  return /* @__PURE__ */ jsxs42("div", { className: `ee-preview ${preview_default.preview}`, children: [
-    /* @__PURE__ */ jsxs42("div", { className: `ee-preview-toggles ${preview_default.previewToggles}`, role: "group", "aria-label": "Preview size", children: [
-      /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs45("div", { className: `ee-preview ${preview_default.preview}`, children: [
+    /* @__PURE__ */ jsxs45("div", { className: `ee-preview-toggles ${preview_default.previewToggles}`, role: "group", "aria-label": "Preview size", children: [
+      /* @__PURE__ */ jsx56(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--desktop ${preview_default.previewToggle} ${preview_default.previewToggleDesktop} ${previewMode === "desktop" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
@@ -28613,7 +29470,7 @@ function PreviewPanel() {
           children: "Desktop"
         }
       ),
-      /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsx56(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--mobile ${preview_default.previewToggle} ${preview_default.previewToggleMobile} ${previewMode === "mobile" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
@@ -28624,7 +29481,7 @@ function PreviewPanel() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx52("div", { className: `ee-preview-container ${preview_default.previewContainer}`, children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx56("div", { className: `ee-preview-container ${preview_default.previewContainer}`, children: /* @__PURE__ */ jsx56(
       "iframe",
       {
         className: `ee-preview-iframe ${preview_default.previewIframe}`,
@@ -28638,7 +29495,7 @@ function PreviewPanel() {
 }
 
 // src/components/SourceEditor/SourceEditor.tsx
-import { useState as useState19, useCallback as useCallback34, useEffect as useEffect16 } from "react";
+import { useState as useState23, useCallback as useCallback36, useEffect as useEffect17 } from "react";
 
 // src/styles/source-editor.module.css
 var source_editor_default = {
@@ -28651,16 +29508,16 @@ var source_editor_default = {
 };
 
 // src/components/SourceEditor/SourceEditor.tsx
-import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 function SourceEditor() {
   const { template } = useTemplateContext();
   const dispatch = useEditorDispatch();
-  const [source, setSource] = useState19("");
-  const [error, setError] = useState19(null);
-  useEffect16(() => {
+  const [source, setSource] = useState23("");
+  const [error, setError] = useState23(null);
+  useEffect17(() => {
     setSource(generateMJML(template));
   }, [template]);
-  const handleApply = useCallback34(() => {
+  const handleApply = useCallback36(() => {
     try {
       const template2 = parseMJML(source);
       dispatch({ type: "SET_TEMPLATE", payload: template2 });
@@ -28669,10 +29526,10 @@ function SourceEditor() {
       setError(err.message);
     }
   }, [source, dispatch]);
-  return /* @__PURE__ */ jsxs43("div", { className: `ee-source-editor ${source_editor_default.sourceEditor}`, children: [
-    /* @__PURE__ */ jsxs43("div", { className: `ee-source-header ${source_editor_default.sourceHeader}`, children: [
-      /* @__PURE__ */ jsx53("span", { className: `ee-source-label ${source_editor_default.sourceLabel}`, children: "MJML Source" }),
-      /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs46("div", { className: `ee-source-editor ${source_editor_default.sourceEditor}`, children: [
+    /* @__PURE__ */ jsxs46("div", { className: `ee-source-header ${source_editor_default.sourceHeader}`, children: [
+      /* @__PURE__ */ jsx57("span", { className: `ee-source-label ${source_editor_default.sourceLabel}`, children: "MJML Source" }),
+      /* @__PURE__ */ jsx57(
         "button",
         {
           className: `ee-source-apply ${source_editor_default.sourceApply}`,
@@ -28681,8 +29538,8 @@ function SourceEditor() {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx53("div", { className: `ee-source-error ${source_editor_default.sourceError}`, children: error }),
-    /* @__PURE__ */ jsx53(
+    error && /* @__PURE__ */ jsx57("div", { className: `ee-source-error ${source_editor_default.sourceError}`, children: error }),
+    /* @__PURE__ */ jsx57(
       "textarea",
       {
         className: `ee-source-textarea ${source_editor_default.sourceTextarea}`,
@@ -28695,30 +29552,30 @@ function SourceEditor() {
 }
 
 // src/components/EmailEditor.tsx
-import { Fragment as Fragment2, jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var EditorInner = forwardRef2(function EditorInner2(props, ref) {
   const dispatch = useEditorDispatch();
   const { template, activeTab } = useTemplateContext();
   const selection = useSelectionContext();
   const { clearPersisted } = useConfigContext();
-  const containerRef = useRef21(null);
+  const containerRef = useRef24(null);
   const { onReady, onSave } = props;
-  const [sidebarOpen, setSidebarOpen] = useState20(false);
-  const [propertiesOpen, setPropertiesOpen] = useState20(false);
-  const [pendingRemoval, setPendingRemoval] = useState20(null);
-  const toggleSidebar = useCallback35(() => {
+  const [sidebarOpen, setSidebarOpen] = useState24(false);
+  const [propertiesOpen, setPropertiesOpen] = useState24(false);
+  const [pendingRemoval, setPendingRemoval] = useState24(null);
+  const toggleSidebar = useCallback37(() => {
     setSidebarOpen((prev) => !prev);
     setPropertiesOpen(false);
   }, []);
-  const toggleProperties = useCallback35(() => {
+  const toggleProperties = useCallback37(() => {
     setPropertiesOpen((prev) => !prev);
     setSidebarOpen(false);
   }, []);
-  const closeOverlays = useCallback35(() => {
+  const closeOverlays = useCallback37(() => {
     setSidebarOpen(false);
     setPropertiesOpen(false);
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (selection.blockId) {
       if (typeof window !== "undefined" && window.innerWidth < 1024) {
         setPropertiesOpen(true);
@@ -28726,16 +29583,16 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
       }
     }
   }, [selection.blockId]);
-  useEffect17(() => {
+  useEffect18(() => {
     onReady?.();
   }, []);
-  const templateRef = useRef21(template);
+  const templateRef = useRef24(template);
   templateRef.current = template;
-  const selectionRef = useRef21(selection);
+  const selectionRef = useRef24(selection);
   selectionRef.current = selection;
-  const onSaveRef = useRef21(onSave);
+  const onSaveRef = useRef24(onSave);
   onSaveRef.current = onSave;
-  useEffect17(() => {
+  useEffect18(() => {
     const el = containerRef.current;
     if (!el) return;
     const handler = (e) => {
@@ -28780,7 +29637,7 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
     el.addEventListener("keydown", handler);
     return () => el.removeEventListener("keydown", handler);
   }, [dispatch]);
-  const handleConfirmRemoval = useCallback35(() => {
+  const handleConfirmRemoval = useCallback37(() => {
     if (!pendingRemoval) return;
     if (pendingRemoval.type === "block") {
       dispatch({ type: "REMOVE_BLOCK", payload: pendingRemoval });
@@ -28873,8 +29730,8 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
     editor_default.panelOverlay,
     sidebarOpen || propertiesOpen ? editor_default.panelOverlayVisible : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs44("div", { ref: containerRef, className: `ee-editor ${editor_default.editorContainer}`, tabIndex: -1, children: [
-    pendingRemoval && /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs47("div", { ref: containerRef, className: `ee-editor ${editor_default.editorContainer}`, tabIndex: -1, children: [
+    pendingRemoval && /* @__PURE__ */ jsx58(
       ConfirmDialog,
       {
         title: pendingRemoval.type === "block" ? "Remove Block" : "Remove Section",
@@ -28883,7 +29740,7 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
         onCancel: () => setPendingRemoval(null)
       }
     ),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx58(
       Toolbar,
       {
         sidebarOpen,
@@ -28892,18 +29749,18 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
         onToggleProperties: toggleProperties
       }
     ),
-    /* @__PURE__ */ jsxs44("div", { className: editor_default.editorBody, children: [
-      activeTab === "visual" && /* @__PURE__ */ jsxs44(Fragment2, { children: [
-        /* @__PURE__ */ jsx54("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ jsx54(ErrorBoundary, { children: /* @__PURE__ */ jsx54(Sidebar, { blockDefinitions: props.blockDefinitions }) }) }),
-        /* @__PURE__ */ jsx54("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ jsx54(ErrorBoundary, { children: /* @__PURE__ */ jsx54(Canvas, {}) }) }),
-        /* @__PURE__ */ jsx54("div", { className: `ee-properties ${propertiesClasses}`, children: /* @__PURE__ */ jsx54(ErrorBoundary, { children: /* @__PURE__ */ jsx54(PropertiesPanel, {}) }) }),
-        /* @__PURE__ */ jsx54("div", { className: overlayClasses, onClick: closeOverlays })
+    /* @__PURE__ */ jsxs47("div", { className: editor_default.editorBody, children: [
+      activeTab === "visual" && /* @__PURE__ */ jsxs47(Fragment5, { children: [
+        /* @__PURE__ */ jsx58("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(Sidebar, { blockDefinitions: props.blockDefinitions }) }) }),
+        /* @__PURE__ */ jsx58("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(Canvas, {}) }) }),
+        /* @__PURE__ */ jsx58("div", { className: `ee-properties ${propertiesClasses}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PropertiesPanel, {}) }) }),
+        /* @__PURE__ */ jsx58("div", { className: overlayClasses, onClick: closeOverlays })
       ] }),
-      activeTab === "source" && /* @__PURE__ */ jsxs44("div", { className: `ee-source-layout ${editor_default.sourceLayout}`, children: [
-        /* @__PURE__ */ jsx54("div", { className: `ee-source-pane ${editor_default.sourcePane}`, children: /* @__PURE__ */ jsx54(ErrorBoundary, { children: /* @__PURE__ */ jsx54(SourceEditor, {}) }) }),
-        /* @__PURE__ */ jsx54("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ jsx54(ErrorBoundary, { children: /* @__PURE__ */ jsx54(PreviewPanel, {}) }) })
+      activeTab === "source" && /* @__PURE__ */ jsxs47("div", { className: `ee-source-layout ${editor_default.sourceLayout}`, children: [
+        /* @__PURE__ */ jsx58("div", { className: `ee-source-pane ${editor_default.sourcePane}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(SourceEditor, {}) }) }),
+        /* @__PURE__ */ jsx58("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PreviewPanel, {}) }) })
       ] }),
-      activeTab === "preview" && /* @__PURE__ */ jsx54(ErrorBoundary, { children: /* @__PURE__ */ jsx54(PreviewPanel, {}) })
+      activeTab === "preview" && /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PreviewPanel, {}) })
     ] })
   ] });
 });
@@ -28919,6 +29776,8 @@ var EmailEditor = forwardRef2(
       onVariablesChange,
       fontFamilies,
       fontSizes,
+      colorPresets,
+      onColorPresetsChange,
       persistenceKey,
       persistenceAdapter,
       className,
@@ -28940,7 +29799,7 @@ var EmailEditor = forwardRef2(
         template = void 0;
       }
     }
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx58(
       EditorProvider,
       {
         initialTemplate: template,
@@ -28951,6 +29810,8 @@ var EmailEditor = forwardRef2(
         onVariablesChange,
         fontFamilies,
         fontSizes,
+        colorPresets,
+        onColorPresetsChange,
         persistenceKey,
         persistenceAdapter,
         onBlockAdd,
@@ -28961,7 +29822,7 @@ var EmailEditor = forwardRef2(
         onSelectionChange,
         onTemplateLoad,
         onHistoryChange,
-        children: /* @__PURE__ */ jsx54("div", { className: `ee-editor-wrapper ${editor_default.editorWrapper} ${className || ""}`, style: style2, children: /* @__PURE__ */ jsx54(EditorInner, { ref, ...props }) })
+        children: /* @__PURE__ */ jsx58("div", { className: `ee-editor-wrapper ${editor_default.editorWrapper} ${className || ""}`, style: style2, children: /* @__PURE__ */ jsx58(EditorInner, { ref, ...props }) })
       }
     );
   }