@kgalexander/mcreate 0.0.12 → 0.0.13

package/dist/{chunk-PL5EKNN6.mjs → chunk-LAW7VVEQ.mjs}

@@ -1,5 +1,5 @@
 // src/core/index.tsx
-import { useMemo as useMemo16, useState as useState15, useEffect as useEffect19, useCallback as useCallback16, useRef as useRef11 } from "react";
+import { useMemo as useMemo16, useState as useState16, useEffect as useEffect20, useCallback as useCallback16, useRef as useRef11 } from "react";
 import { cloneDeep as cloneDeep2, isEqual, debounce } from "lodash";
 
 // src/core/utils/idx.ts
@@ -1114,7 +1114,6 @@ import lodashGet from "lodash/get";
 import lodashSet from "lodash/set";
 import cloneDeep from "lodash/cloneDeep";
 import { castDraft } from "immer";
-import { toast } from "sonner";
 
 // src/core/editor/utils/generate-id.ts
 import { nanoid } from "nanoid";
@@ -1278,6 +1277,7 @@ function createSocialElement(payload) {
       "inner-padding": "4px 4px",
       "icon-padding": "0px 6px",
       "text-padding": "4px 4px",
+      "line-height": "1.4",
       ...payload?.attributes
     },
     children: payload?.children || [
@@ -1312,6 +1312,7 @@ function createSocialItemElement(payload) {
       target: "_blank",
       src: payload?.attributes?.src || "https://cdn-images.mailchimp.com/icons/social-block-v3/block-icons-v3/facebook-icon-color-40.png",
       alt: payload?.attributes?.alt || "Facebook",
+      align: "center",
       ...payload?.attributes
     }
   };
@@ -1878,6 +1879,7 @@ var useEditorStore = create()(
       template: defaultTemplate,
       templateId: null,
       onSave: null,
+      onToast: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1902,11 +1904,12 @@ var useEditorStore = create()(
       // Subscription level (0 = free, 1-3 = paid tiers)
       isPaidLevel: 0,
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, isPaidLevel) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, isPaidLevel) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
           state.onSave = onSave ?? null;
+          state.onToast = onToast ?? null;
           state.isPaidLevel = isPaidLevel ?? 0;
           state.templateSize = calculateTemplateSize(template);
           state.isAtSizeLimit = false;
@@ -2053,7 +2056,7 @@ var useEditorStore = create()(
           }
           const elementSize = new Blob([JSON.stringify(newElement)]).size;
           if (state.templateSize + elementSize > MAX_TEMPLATE_SIZE) {
-            toast.error("Template size limit reached - element would exceed the limit");
+            state.onToast?.({ type: "error", message: "Template size limit reached - element would exceed the limit" });
             return;
           }
           const children = parent.children;
@@ -2092,7 +2095,7 @@ var useEditorStore = create()(
           }
           const sectionSize = new Blob([JSON.stringify(newSection)]).size;
           if (state.templateSize + sectionSize > MAX_TEMPLATE_SIZE) {
-            toast.error("Template size limit reached");
+            state.onToast?.({ type: "error", message: "Template size limit reached" });
             return;
           }
           const children = page.children;
@@ -2210,7 +2213,7 @@ var useEditorStore = create()(
               }
             ).length;
             if (regularSectionCount <= 1) {
-              toast.error("Cannot delete the last section");
+              state.onToast?.({ type: "error", message: "Cannot delete the last section" });
               return;
             }
           }
@@ -2343,7 +2346,7 @@ var useEditorStore = create()(
           const clonedElement = cloneDeep(sourceElement);
           const elementSize = new Blob([JSON.stringify(clonedElement)]).size;
           if (state.templateSize + elementSize > MAX_TEMPLATE_SIZE) {
-            toast.error("Template size limit reached - duplicate would exceed limit");
+            state.onToast?.({ type: "error", message: "Template size limit reached - duplicate would exceed limit" });
             return;
           }
           const parent = getElementAtIdx(state.template, parentIdx);
@@ -2447,13 +2450,14 @@ var useEditorStore = create()(
             if (tempDroppedElement) {
               const elementSize = new Blob([JSON.stringify(tempDroppedElement)]).size;
               if (state.templateSize + elementSize > MAX_TEMPLATE_SIZE) {
-                toast.error("Template size limit reached - this element would exceed the limit");
+                state.onToast?.({ type: "error", message: "Template size limit reached - this element would exceed the limit" });
                 return;
               }
             }
           }
           textElement.data.value.content = beforeContent;
           let droppedElement = null;
+          let deletedSectionIndex = null;
           if (sourceIdx) {
             const sourceParentIdx = getParentIdx(sourceIdx);
             if (sourceParentIdx) {
@@ -2473,6 +2477,7 @@ var useEditorStore = create()(
                       const sectionIndex = getIndexByIdx(sourceSectionIdx);
                       const sourcePageChildren = sourcePage.children;
                       sourcePageChildren.splice(sectionIndex, 1);
+                      deletedSectionIndex = sectionIndex;
                     }
                   } else if (action === "add-text") {
                     const defaultText = createElementByType("text", { data: { value: { content: "" } } });
@@ -2498,7 +2503,20 @@ var useEditorStore = create()(
             console.error("Failed to create new text element");
             return;
           }
-          const parentIdx = getParentIdx(textElementIdx);
+          let adjustedTextElementIdx = textElementIdx;
+          if (deletedSectionIndex !== null) {
+            const textSectionMatch = SECTION_INDEX_REGEX.exec(textElementIdx);
+            if (textSectionMatch) {
+              const textSectionIndex = Number(textSectionMatch[1]);
+              if (deletedSectionIndex < textSectionIndex) {
+                adjustedTextElementIdx = textElementIdx.replace(
+                  SECTION_INDEX_REGEX,
+                  `content.children.[${textSectionIndex - 1}]`
+                );
+              }
+            }
+          }
+          const parentIdx = getParentIdx(adjustedTextElementIdx);
           if (!parentIdx) {
             console.error("Parent not found for text element");
             return;
@@ -2508,7 +2526,7 @@ var useEditorStore = create()(
             console.error("Parent is not a valid container");
             return;
           }
-          const currentIndex = getIndexByIdx(textElementIdx);
+          const currentIndex = getIndexByIdx(adjustedTextElementIdx);
           const parentChildren = parent.children;
           let adjustedIndex = currentIndex;
           if (sourceIdx) {
@@ -2595,7 +2613,7 @@ var useEditorStore = create()(
             const elementSize = new Blob([JSON.stringify(sectionColumnElement)]).size;
             const approxNewSectionSize = 200;
             if (state.templateSize + elementSize + approxNewSectionSize > MAX_TEMPLATE_SIZE) {
-              toast.error("Template size limit reached");
+              state.onToast?.({ type: "error", message: "Template size limit reached" });
               return;
             }
           }
@@ -2618,7 +2636,7 @@ var useEditorStore = create()(
           const pageChildren = page.children;
           let adjustedSectionIndex = sectionIndex;
           if (sourceIdx) {
-            const srcSectionMatch = sourceIdx.match(SECTION_INDEX_REGEX);
+            const srcSectionMatch = SECTION_INDEX_REGEX.exec(sourceIdx);
             if (srcSectionMatch) {
               const srcSectionIndex = parseInt(srcSectionMatch[1], 10);
               if (srcSectionIndex < sectionIndex) {
@@ -2694,7 +2712,7 @@ var useEditorStore = create()(
           if (!sourceIdx) {
             const columnSize = new Blob([JSON.stringify(newColumn)]).size;
             if (state.templateSize + columnSize > MAX_TEMPLATE_SIZE) {
-              toast.error("Template size limit reached");
+              state.onToast?.({ type: "error", message: "Template size limit reached" });
               return;
             }
           }
@@ -2787,7 +2805,7 @@ var useEditorStore = create()(
           if (!sourceIdx) {
             const columnSize = new Blob([JSON.stringify(newColumn)]).size;
             if (state.templateSize + columnSize > MAX_TEMPLATE_SIZE) {
-              toast.error("Template size limit reached");
+              state.onToast?.({ type: "error", message: "Template size limit reached" });
               return;
             }
           }
@@ -3149,7 +3167,6 @@ var NOT_DRAGGABLE_ELEMENTS = ["page", "social-item", "text", "property-card", "p
 var IMAGE_SELECTION_VALID_TYPES = ["section", "section-column", "image", "section-property-km", "section-property-single-two", "section-property-triple", "property-card", "property-card-single-two", "property-card-triple", "property-card-triple-item"];
 
 // src/core/editor/components/ShadowDomRenderer.tsx
-import { toast as toast2 } from "sonner";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var lastSizeLimitToastTime = 0;
 var cssCache = /* @__PURE__ */ new Map();
@@ -3918,7 +3935,7 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
             const now = Date.now();
             if (now - lastSizeLimitToastTime > 2e3) {
               lastSizeLimitToastTime = now;
-              toast2.error("Template size limit reached");
+              useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached" });
             }
             return;
           }
@@ -3980,7 +3997,7 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
         const now = Date.now();
         if (now - lastSizeLimitToastTime > 2e3) {
           lastSizeLimitToastTime = now;
-          toast2.error("Template size limit reached");
+          useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached" });
         }
       }
     };
@@ -10998,9 +11015,6 @@ function checkElementPosition(template, elementIdx) {
   return { isFirstInFirstSection, isFirstInSectionColumn };
 }
 
-// src/core/editor/components/tiptap-overlay.tsx
-import { toast as toast3 } from "sonner";
-
 // src/components/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -11666,7 +11680,7 @@ var TiptapOverlay = () => {
   if (!textEditing) return null;
   return /* @__PURE__ */ jsx21(TiptapOverlayContent, { ...textEditing }, textEditing.idx);
 };
-var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight, clickX, clickY, content, styles, cursorPosition }) => {
+var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWidth, initialHeight, clickX, clickY, content, styles, cursorPosition }) => {
   const containerRef = useRef4(null);
   const setTiptapEditor = useEditorStore((s) => s.setTiptapEditor);
   const linkColor = useEditorStore((s) => s.template?.content?.[0]?.data?.value?.linkColor) || "#0000ff";
@@ -11681,6 +11695,24 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
       }
     };
   }, []);
+  useEffect6(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(() => {
+      const shadowEl = getShadowElement();
+      if (shadowEl) {
+        shadowEl.style.height = `${container.offsetHeight}px`;
+      }
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      const shadowEl = getShadowElement();
+      if (shadowEl) {
+        shadowEl.style.height = "";
+      }
+    };
+  }, [getShadowElement]);
   const cleanedContent = useMemo3(() => {
     return content.replace(NBSP_P_CONTENT_REGEX, "<p$1></p>").replace(IS_EMPTY_P_CLASS_REGEX, "").replace(IS_EMPTY_HEADING_CLASS_REGEX, "");
   }, [content]);
@@ -11741,7 +11773,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
             const now = Date.now();
             if (now - lastSizeLimitToastRef.current > 2e3) {
               lastSizeLimitToastRef.current = now;
-              toast3.error("Template size limit reached");
+              useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached" });
             }
             return true;
           }
@@ -11798,7 +11830,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
           const now = Date.now();
           if (now - lastSizeLimitToastRef.current > 2e3) {
             lastSizeLimitToastRef.current = now;
-            toast3.error("Template size limit reached - paste would exceed the limit");
+            useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached - paste would exceed the limit" });
           }
           return true;
         }
@@ -12059,7 +12091,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
 };
 
 // src/core/editor/components/element-float.tsx
-import { useEffect as useEffect11, useMemo as useMemo10 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo10 } from "react";
 import { useFloating as useFloating4, offset as offset4, shift as shift3, flip as flip2, autoUpdate as autoUpdate3 } from "@floating-ui/react";
 
 // src/core/editor/components/float-ui/actions/delete-button.tsx
@@ -13027,34 +13059,253 @@ var ImageFloat = () => {
   ] });
 };
 
-// src/core/editor/components/element-gear/property/float.tsx
+// src/core/editor/components/mlsNumber-menu.tsx
+import { useState as useState8, useEffect as useEffect11 } from "react";
+import { HousePlusIcon, TrashIcon as TrashIcon5, XIcon as XIcon2, Loader2Icon } from "lucide-react";
+
+// src/services/repliers/commands.ts
+async function getListingByMlsNumber(mlsNumber) {
+  const response = await fetch(`/api/mcommends/repliers/getListingByMlsNumber/${mlsNumber}`, {
+    method: "GET",
+    headers: {
+      "accept": "application/json"
+    }
+  });
+  const data = await response.json();
+  return data;
+}
+
+// src/core/editor/components/mlsNumber-menu.tsx
 import { Fragment as Fragment14, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var MlsNumberMenu = () => {
+  const { focusIdx, template, updateElement, onToast } = useEditorStore();
+  const [isOpen, setIsOpen] = useState8(false);
+  const [inputValue, setInputValue] = useState8("");
+  const [propertyData, setPropertyData] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const propertyElement = focusIdx && template ? getValueByIdx(template, focusIdx) : null;
+  const currentMlsNumber = propertyElement?.data?.value?.mlsNumber || "";
+  useEffect11(() => {
+    setInputValue(currentMlsNumber);
+    setPropertyData(null);
+  }, [focusIdx, currentMlsNumber]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleDone();
+    }
+    if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  const handleClear = () => {
+    setInputValue("");
+    setPropertyData(null);
+  };
+  const handleClearPreview = () => {
+    setPropertyData(null);
+  };
+  const handleApplyToCard = () => {
+    if (!focusIdx || !propertyElement || !propertyData) return;
+    console.log(propertyData);
+    const imageUrl = propertyData.images?.[0] ? `https://cdn.repliers.io/${propertyData.images[0]}` : propertyElement.attributes?.["image-src"];
+    updateElement(focusIdx, {
+      data: {
+        value: {
+          ...propertyElement.data?.value,
+          mlsNumber: propertyData.mlsNumber
+        }
+      },
+      attributes: {
+        ...propertyElement.attributes,
+        "image-src": imageUrl,
+        "price": String(propertyData.listPrice || 0),
+        "address": `${propertyData.address?.streetNumber || ""} ${propertyData.address?.streetName || ""}`.trim(),
+        "city": `${propertyData.address?.city || ""}, ${propertyData.address?.state || ""} ${propertyData.address?.zip || ""}`.trim(),
+        "beds": String(propertyData.details?.numBedrooms || "--"),
+        "baths": String(propertyData.details?.numBathrooms || "--"),
+        "sqft": String(propertyData.details?.sqft || "--"),
+        "status": propertyData.standardStatus || propertyData.status || "Active",
+        "brokerage": propertyData.office?.brokerageName || ""
+      }
+    });
+    setPropertyData(null);
+    setIsOpen(false);
+  };
+  const handleDone = async () => {
+    if (inputValue.trim()) {
+      setIsLoading(true);
+      try {
+        const data = await getListingByMlsNumber(inputValue.trim());
+        if (data.error) {
+          onToast?.({ type: "error", message: data.error });
+          return;
+        }
+        setPropertyData(data);
+      } catch (error) {
+        console.warn("Failed to fetch listing:", error);
+        const message = error instanceof Error ? error.message : "Failed to fetch listing";
+        onToast?.({ type: "error", message });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs22(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs22(Tooltip, { children: [
+      /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
+        Button,
+        {
+          variant: "ghost",
+          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+          children: [
+            /* @__PURE__ */ jsx37(HousePlusIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx37("p", { children: "MLS" })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "Enter MLS Number" })
+    ] }),
+    /* @__PURE__ */ jsxs22(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx37(Label, { children: "Enter MLS Number" }),
+        /* @__PURE__ */ jsx37(
+          Input,
+          {
+            type: "text",
+            placeholder: "e.g., W1234567",
+            className: "w-full rounded-[12px] shadow-none h-[44px]",
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx37(Separator, { className: "my-2" }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx37("div", { className: "flex flex-row", children: /* @__PURE__ */ jsxs22(Tooltip, { children: [
+          /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
+              onClick: handleClear,
+              disabled: !inputValue,
+              children: /* @__PURE__ */ jsx37(TrashIcon5, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", className: "z-50001", children: "Clear" })
+        ] }) }),
+        /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(
+          Button,
+          {
+            variant: "default",
+            className: "shadow-none transition-none cursor-pointer rounded-[12px] outline-none",
+            onClick: handleDone,
+            disabled: isLoading || !inputValue.trim(),
+            children: isLoading ? /* @__PURE__ */ jsx37(Loader2Icon, { className: "size-4 animate-spin" }) : "Done"
+          }
+        ) })
+      ] }),
+      propertyData && /* @__PURE__ */ jsxs22(Fragment14, { children: [
+        /* @__PURE__ */ jsx37(Separator, { className: "my-2" }),
+        /* @__PURE__ */ jsxs22("div", { className: "rounded-[12px] border overflow-hidden bg-card", children: [
+          /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx37(
+              "img",
+              {
+                src: `https://cdn.repliers.io/${propertyData.images?.[0]}`,
+                alt: "Property",
+                className: "w-full h-[120px] object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx37(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "absolute top-1 right-1 h-6 w-6 bg-black/50 hover:bg-black/70 rounded-full",
+                onClick: handleClearPreview,
+                children: /* @__PURE__ */ jsx37(XIcon2, { className: "size-3 text-white" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs22("div", { className: "p-2 flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx37("span", { className: "font-semibold text-sm", children: formatPrice(String(propertyData.listPrice || 0)) }),
+              /* @__PURE__ */ jsx37("span", { className: "text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700", children: propertyData.standardStatus || propertyData.status })
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "text-sm", children: [
+              propertyData.address?.streetNumber,
+              " ",
+              propertyData.address?.streetName
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground", children: [
+              propertyData.address?.city,
+              ", ",
+              propertyData.address?.state,
+              " ",
+              propertyData.address?.zip
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground", children: [
+              propertyData.details?.numBedrooms,
+              " bd | ",
+              propertyData.details?.numBathrooms,
+              " ba | ",
+              formatNumber(String(propertyData.details?.sqft || "--")),
+              " sf"
+            ] }),
+            propertyData.office?.brokerageName && /* @__PURE__ */ jsx37("div", { className: "text-xs text-muted-foreground truncate", children: propertyData.office.brokerageName }),
+            /* @__PURE__ */ jsx37(
+              Button,
+              {
+                variant: "default",
+                size: "sm",
+                className: "w-full mt-2 rounded-[12px]",
+                onClick: handleApplyToCard,
+                children: "Apply to Card"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/core/editor/components/element-gear/property/float.tsx
+import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 function PropertyFloat() {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs22(Fragment14, { children: [
-    hasHref && /* @__PURE__ */ jsx37(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx37(HrefMenu, {})
+  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
+    hasHref && /* @__PURE__ */ jsx38(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx38(HrefMenu, {}),
+    /* @__PURE__ */ jsx38(MlsNumberMenu, {})
   ] });
 }
 
 // src/core/editor/components/element-gear/property/triple/float.tsx
-import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var PropertyTripleItemFloat = () => {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
-    hasHref && /* @__PURE__ */ jsx38(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx38(HrefMenu, {})
+  return /* @__PURE__ */ jsxs24(Fragment16, { children: [
+    hasHref && /* @__PURE__ */ jsx39(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx39(HrefMenu, {})
   ] });
 };
 
 // src/core/editor/components/float-ui/container.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var FloatUIContainer = ({ ref, style, className, children }) => {
-  return /* @__PURE__ */ jsx39("div", { ref, style, className, children });
+  return /* @__PURE__ */ jsx40("div", { ref, style, className, children });
 };
 
 // src/core/editor/components/element-float.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FLOAT_COMPONENTS = {
   "button": ButtonFloat,
   "section": SectionFloat,
@@ -13078,7 +13329,7 @@ var ElementFloat = ({ getReferenceRect, focusIdx, elementType }) => {
   if (!focusIdx || isDragging || textEditing) return null;
   const FloatComponent = FLOAT_COMPONENTS[elementType];
   if (!FloatComponent) return null;
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     ElementFloatContent,
     {
       getReferenceRect,
@@ -13107,7 +13358,7 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
       // Keep within viewport
     ]
   });
-  useEffect11(() => {
+  useEffect12(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13122,16 +13373,16 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
     );
     return cleanup;
   }, [getReferenceRect, refs, update, virtualReference]);
-  return /* @__PURE__ */ jsx40(FloatUIContainer, { ref: refs.setFloating, style: floatingStyles, className: "bg-white flex items-center justify-center border border-1 h-[36px] w-fit shadow-md rounded-full  z-50", children: /* @__PURE__ */ jsx40(FloatComponent, {}) });
+  return /* @__PURE__ */ jsx41(FloatUIContainer, { ref: refs.setFloating, style: floatingStyles, className: "bg-white flex items-center justify-center border border-1 h-[36px] w-fit shadow-md rounded-full  z-50", children: /* @__PURE__ */ jsx41(FloatComponent, {}) });
 };
 
 // src/core/editor/components/scaling/divider-scale.tsx
-import { useMemo as useMemo11, useEffect as useEffect12, useState as useState8, useRef as useRef5, useCallback as useCallback10 } from "react";
+import { useMemo as useMemo11, useEffect as useEffect13, useState as useState9, useRef as useRef5, useCallback as useCallback10 } from "react";
 import { useFloating as useFloating5, offset as offset5, autoUpdate as autoUpdate4 } from "@floating-ui/react";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var DividerScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState8({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState8(null);
+  const [dimensions, setDimensions] = useState9({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState9(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
   const { currentWidth, currentAlign } = useMemo11(() => {
     if (!focusIdx || !template) return { currentWidth: 100, currentAlign: "center" };
@@ -13193,7 +13444,7 @@ var DividerScale = ({ getReferenceRect }) => {
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect12(() => {
+  useEffect13(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13214,7 +13465,7 @@ var DividerScale = ({ getReferenceRect }) => {
       offset5(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect12(() => {
+  useEffect13(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13241,7 +13492,7 @@ var DividerScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const showLeftHandle = currentAlign !== "left";
   const showRightHandle = currentAlign !== "right";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ref: refs.setFloating,
@@ -13253,14 +13504,14 @@ var DividerScale = ({ getReferenceRect }) => {
       },
       className: "relative flex flex-row items-center justify-between",
       children: [
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx41(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx42(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
             className: `w-[18px] h-[18px] cursor-ew-resize bg-background shadow-md border rounded-full absolute -left-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "left" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx41(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx42(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
@@ -13273,12 +13524,12 @@ var DividerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/button-scale.tsx
-import { useMemo as useMemo12, useEffect as useEffect13, useState as useState9, useRef as useRef6, useCallback as useCallback11 } from "react";
+import { useMemo as useMemo12, useEffect as useEffect14, useState as useState10, useRef as useRef6, useCallback as useCallback11 } from "react";
 import { useFloating as useFloating6, offset as offset6, autoUpdate as autoUpdate5 } from "@floating-ui/react";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var ButtonScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState9({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState9(null);
+  const [dimensions, setDimensions] = useState10({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState10(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
   const { currentWidth, currentHeight, currentAlign } = useMemo12(() => {
     if (!focusIdx || !template) {
@@ -13361,7 +13612,7 @@ var ButtonScale = ({ getReferenceRect }) => {
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13382,7 +13633,7 @@ var ButtonScale = ({ getReferenceRect }) => {
       offset6(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect13(() => {
+  useEffect14(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13411,7 +13662,7 @@ var ButtonScale = ({ getReferenceRect }) => {
   const showRightHandle = currentAlign !== "right";
   const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: refs.setFloating,
@@ -13423,28 +13674,28 @@ var ButtonScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx42(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "top"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -top-[4px] ${getHandleActiveClass("top")}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx42(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
             className: `w-[8px] h-[18px] cursor-ew-resize ${handleBaseClass} top-1/2 -translate-y-1/2 -right-[4px] ${getHandleActiveClass("right")}`
           }
         ),
-        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx42(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -bottom-[4px] ${getHandleActiveClass("bottom")}`
           }
         ),
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx42(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
@@ -13457,12 +13708,12 @@ var ButtonScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/image-scale.tsx
-import { useMemo as useMemo13, useEffect as useEffect14, useState as useState10, useRef as useRef7, useCallback as useCallback12 } from "react";
+import { useMemo as useMemo13, useEffect as useEffect15, useState as useState11, useRef as useRef7, useCallback as useCallback12 } from "react";
 import { useFloating as useFloating7, offset as offset7, autoUpdate as autoUpdate6 } from "@floating-ui/react";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var ImageScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState10({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState10(null);
+  const [dimensions, setDimensions] = useState11({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState11(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
   const { currentWidth, currentHeight, currentAlign } = useMemo13(() => {
     if (!focusIdx || !template) {
@@ -13540,7 +13791,7 @@ var ImageScale = ({ getReferenceRect }) => {
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13561,7 +13812,7 @@ var ImageScale = ({ getReferenceRect }) => {
       offset7(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect14(() => {
+  useEffect15(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13590,7 +13841,7 @@ var ImageScale = ({ getReferenceRect }) => {
   const showRightHandle = currentAlign !== "right";
   const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: refs.setFloating,
@@ -13602,28 +13853,28 @@ var ImageScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx43(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "top"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -top-[4px] ${getHandleActiveClass("top")}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx43(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
             className: `w-[8px] h-[18px] cursor-ew-resize ${handleBaseClass} top-1/2 -translate-y-1/2 -right-[4px] ${getHandleActiveClass("right")}`
           }
         ),
-        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx43(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -bottom-[4px] ${getHandleActiveClass("bottom")}`
           }
         ),
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx43(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
@@ -13636,12 +13887,12 @@ var ImageScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/spacer-scale.tsx
-import { useMemo as useMemo14, useEffect as useEffect15, useState as useState11, useRef as useRef8, useCallback as useCallback13 } from "react";
+import { useMemo as useMemo14, useEffect as useEffect16, useState as useState12, useRef as useRef8, useCallback as useCallback13 } from "react";
 import { useFloating as useFloating8, offset as offset8, autoUpdate as autoUpdate7 } from "@floating-ui/react";
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var SpacerScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState11({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState11(null);
+  const [dimensions, setDimensions] = useState12({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState12(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
   const currentHeight = useMemo14(() => {
     if (!focusIdx || !template) return 12;
@@ -13692,7 +13943,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect15(() => {
+  useEffect16(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13713,7 +13964,7 @@ var SpacerScale = ({ getReferenceRect }) => {
       offset8(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect15(() => {
+  useEffect16(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13740,7 +13991,7 @@ var SpacerScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ref: refs.setFloating,
@@ -13752,14 +14003,14 @@ var SpacerScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx44(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx45(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "top"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -top-[4px] ${getHandleActiveClass("top")}`
           }
         ),
-        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx44(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx45(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
@@ -13772,11 +14023,11 @@ var SpacerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/column-scale.tsx
-import { useMemo as useMemo15, useEffect as useEffect16, useState as useState12, useRef as useRef9, useCallback as useCallback14 } from "react";
-import { Fragment as Fragment16, jsx as jsx45 } from "react/jsx-runtime";
+import { useMemo as useMemo15, useEffect as useEffect17, useState as useState13, useRef as useRef9, useCallback as useCallback14 } from "react";
+import { Fragment as Fragment17, jsx as jsx46 } from "react/jsx-runtime";
 var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
-  const [activeDivider, setActiveDivider] = useState12(null);
-  const [columnRects, setColumnRects] = useState12([]);
+  const [activeDivider, setActiveDivider] = useState13(null);
+  const [columnRects, setColumnRects] = useState13([]);
   const { template, setIsScaling, setFocusIdx, stopTextEditing } = useEditorStore();
   const columnWidths = useMemo15(() => {
     if (!template) return [];
@@ -13816,7 +14067,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     });
     setColumnRects(rects);
   }, [shadowRoot, sectionColumnIdx]);
-  useEffect16(() => {
+  useEffect17(() => {
     updateColumnRects();
     let animationId;
     const updateLoop = () => {
@@ -13896,7 +14147,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect16(() => {
+  useEffect17(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13907,7 +14158,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   }
   const handleBaseClass = "bg-background shadow-md border rounded-full touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (index) => activeDivider === index ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsx45(Fragment16, { children: columnRects.slice(0, -1).map((rect, index) => {
+  return /* @__PURE__ */ jsx46(Fragment17, { children: columnRects.slice(0, -1).map((rect, index) => {
     const nextRect = columnRects[index + 1];
     const handleLeft = rect.right;
     const handleTop = Math.min(rect.top, nextRect.top);
@@ -13915,7 +14166,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     if (activeDivider !== null && activeDivider !== index) {
       return null;
     }
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         onPointerDown: (e) => handlePointerDown(e, index),
@@ -13935,9 +14186,9 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
 };
 
 // src/core/editor/hooks/use-undo-redo-keyboard.ts
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 function useUndoRedoKeyboard() {
-  useEffect17(() => {
+  useEffect18(() => {
     const handler = (e) => {
       const isMeta = e.metaKey || e.ctrlKey;
       if (!isMeta || e.key.toLowerCase() !== "z") return;
@@ -13958,11 +14209,11 @@ function useUndoRedoKeyboard() {
 }
 
 // src/components/ui/spinner.tsx
-import { Loader2Icon } from "lucide-react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { Loader2Icon as Loader2Icon2 } from "lucide-react";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx46(
-    Loader2Icon,
+  return /* @__PURE__ */ jsx47(
+    Loader2Icon2,
     {
       role: "status",
       "aria-label": "Loading",
@@ -13976,7 +14227,7 @@ function Spinner({ className, ...props }) {
 import { EyeIcon } from "lucide-react";
 
 // src/render/useMjmlCompiler.ts
-import { useState as useState13, useCallback as useCallback15 } from "react";
+import { useState as useState14, useCallback as useCallback15 } from "react";
 async function compileMjml(mjml) {
   console.log("Compiling MJML", mjml);
   const response = await fetch("/api/mrender", {
@@ -13993,14 +14244,14 @@ async function compileMjml(mjml) {
 }
 
 // src/core/editor/components/preview.tsx
-import { useEffect as useEffect18, useState as useState14, useRef as useRef10 } from "react";
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useState as useState15, useRef as useRef10 } from "react";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 function Preview() {
   const { template, setPreviewMode, previewMode, isPaidLevel } = useEditorStore();
-  const [html, setHtml] = useState14("");
-  const [isLoading, setIsLoading] = useState14(false);
+  const [html, setHtml] = useState15("");
+  const [isLoading, setIsLoading] = useState15(false);
   const lastTemplateRef = useRef10("");
-  useEffect18(() => {
+  useEffect19(() => {
     if (typeof window === "undefined" || !previewMode) {
       if (!previewMode) {
         setHtml("");
@@ -14033,37 +14284,37 @@ function Preview() {
     };
     convertMjml();
   }, [template, previewMode]);
-  return /* @__PURE__ */ jsxs28(Dialog, { open: previewMode, onOpenChange: setPreviewMode, children: [
-    /* @__PURE__ */ jsxs28(Tooltip, { children: [
-      /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs29(Dialog, { open: previewMode, onOpenChange: setPreviewMode, children: [
+    /* @__PURE__ */ jsxs29(Tooltip, { children: [
+      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: () => setPreviewMode(true),
-          children: /* @__PURE__ */ jsx47(EyeIcon, {})
+          children: /* @__PURE__ */ jsx48(EyeIcon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", className: "z-51", children: "Preview" })
+      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", className: "z-51", children: "Preview" })
     ] }),
-    /* @__PURE__ */ jsxs28(DialogContent, { className: "max-w-[1200px] sm:max-w-[1200px]", children: [
-      /* @__PURE__ */ jsx47(DialogTitle, { children: "Preview" }),
-      /* @__PURE__ */ jsx47("div", { className: "w-full h-full max-h-[600px]", children: isLoading ? /* @__PURE__ */ jsx47("div", { className: "flex items-center justify-center h-[600px]", children: /* @__PURE__ */ jsx47("p", { children: "Generating preview..." }) }) : /* @__PURE__ */ jsx47("iframe", { srcDoc: html, className: "w-full h-[600px]" }) })
+    /* @__PURE__ */ jsxs29(DialogContent, { className: "max-w-[1200px] sm:max-w-[1200px]", children: [
+      /* @__PURE__ */ jsx48(DialogTitle, { children: "Preview" }),
+      /* @__PURE__ */ jsx48("div", { className: "w-full h-full max-h-[600px]", children: isLoading ? /* @__PURE__ */ jsx48("div", { className: "flex items-center justify-center h-[600px]", children: /* @__PURE__ */ jsx48("p", { children: "Generating preview..." }) }) : /* @__PURE__ */ jsx48("iframe", { srcDoc: html, className: "w-full h-[600px]" }) })
     ] })
   ] });
 }
 
 // src/core/editor/components/history.tsx
 import { Redo2Icon, Undo2Icon } from "lucide-react";
-import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
 var History = () => {
   const { undo, redo } = useEditorStore();
   const canUndo = useEditorStore((s) => s.historyIndex > 0);
   const canRedo = useEditorStore((s) => s.historyIndex < s.history.length - 1);
-  return /* @__PURE__ */ jsxs29(Fragment17, { children: [
-    /* @__PURE__ */ jsxs29(Tooltip, { children: [
-      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs30(Fragment18, { children: [
+    /* @__PURE__ */ jsxs30(Tooltip, { children: [
+      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "ghost",
@@ -14071,13 +14322,13 @@ var History = () => {
           size: "icon",
           disabled: !canUndo,
           onClick: undo,
-          children: /* @__PURE__ */ jsx48(Undo2Icon, {})
+          children: /* @__PURE__ */ jsx49(Undo2Icon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: "Undo (Ctrl+Z)" })
+      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", children: "Undo (Ctrl+Z)" })
     ] }),
-    /* @__PURE__ */ jsxs29(Tooltip, { children: [
-      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsxs30(Tooltip, { children: [
+      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "ghost",
@@ -14085,16 +14336,16 @@ var History = () => {
           size: "icon",
           disabled: !canRedo,
           onClick: redo,
-          children: /* @__PURE__ */ jsx48(Redo2Icon, {})
+          children: /* @__PURE__ */ jsx49(Redo2Icon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: "Redo (Ctrl+Shift+Z)" })
+      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", children: "Redo (Ctrl+Shift+Z)" })
     ] })
   ] });
 };
 
 // src/core/index.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 var MAILLOW_EMAIL_EDITOR_VERSION = "0.0.1";
 function getSectionColumnIdx(idx, template) {
   let current = idx;
@@ -14158,12 +14409,12 @@ function Editor({ setEditorLoading }) {
   const startTextEditing = useEditorStore((state) => state.startTextEditing);
   const pendingTextEditRequest = useEditorStore((state) => state.pendingTextEditRequest);
   const clearPendingTextEditRequest = useEditorStore((state) => state.clearPendingTextEditRequest);
-  const [renderData, setRenderData] = useState15(null);
-  const [isEditing, setIsEditing] = useState15(false);
-  const [dropIndicator, setDropIndicator] = useState15(null);
-  const [dropTargetIdx, setDropTargetIdx] = useState15(null);
+  const [renderData, setRenderData] = useState16(null);
+  const [isEditing, setIsEditing] = useState16(false);
+  const [dropIndicator, setDropIndicator] = useState16(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState16(null);
   const shadowRootRef = useRef11(null);
-  const [hasSelectedElement, setHasSelectedElement] = useState15(false);
+  const [hasSelectedElement, setHasSelectedElement] = useState16(false);
   const dragParentIdxRef = useRef11(null);
   const dragPositionIndexRef = useRef11(0);
   const createNewSectionRef = useRef11(false);
@@ -14178,8 +14429,13 @@ function Editor({ setEditorLoading }) {
   const sectionRectCacheRef = useRef11(/* @__PURE__ */ new Map());
   const companyFooterCacheRef = useRef11(void 0);
   const lastSyncedTemplateRef = useRef11(null);
-  useEffect19(() => {
-    if (!isEditing) {
+  const prevTextEditingIdxRef = useRef11(null);
+  useEffect20(() => {
+    const currentIdx = textEditing?.idx ?? null;
+    const prevIdx = prevTextEditingIdxRef.current;
+    const switchedTarget = currentIdx !== null && prevIdx !== null && currentIdx !== prevIdx;
+    prevTextEditingIdxRef.current = currentIdx;
+    if (!isEditing && (!textEditing || switchedTarget)) {
       if (template === lastSyncedTemplateRef.current) {
         return;
       }
@@ -14188,13 +14444,13 @@ function Editor({ setEditorLoading }) {
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing]);
-  useEffect19(() => {
+  }, [template, renderData, isEditing, textEditing]);
+  useEffect20(() => {
     if (renderData && setEditorLoading) {
       setEditorLoading(false);
     }
   }, [renderData, setEditorLoading]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!pendingTextEditRequest || !shadowRootRef.current) return;
     const { idx, cursorPosition } = pendingTextEditRequest;
     const blockNode = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
@@ -14236,10 +14492,14 @@ function Editor({ setEditorLoading }) {
       const element = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
       return element ? element.getBoundingClientRect() : null;
     };
-    startTextEditing({ idx, getReferenceRect: getReferenceRect2, initialWidth: blockRect.width, initialHeight: blockRect.height, clickX, clickY, content, styles, cursorPosition });
+    const getShadowElement = () => {
+      if (!shadowRootRef.current) return null;
+      return shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
+    };
+    startTextEditing({ idx, getReferenceRect: getReferenceRect2, getShadowElement, initialWidth: blockRect.width, initialHeight: blockRect.height, clickX, clickY, content, styles, cursorPosition });
     clearPendingTextEditRequest();
   }, [pendingTextEditRequest, clearPendingTextEditRequest, startTextEditing]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (isDragging && dataTransfer) {
       const currentTemplate = useEditorStore.getState().template;
       templateCacheRef.current = currentTemplate;
@@ -14255,9 +14515,9 @@ function Editor({ setEditorLoading }) {
       sectionRectCacheRef.current.clear();
     }
   }, [isDragging, dataTransfer]);
-  const [html, setHtml] = useState15("");
+  const [html, setHtml] = useState16("");
   const lastRenderDataRef = useRef11("");
-  useEffect19(() => {
+  useEffect20(() => {
     if (typeof window === "undefined" || !renderData) {
       setHtml("");
       lastRenderDataRef.current = "";
@@ -14354,7 +14614,11 @@ function Editor({ setEditorLoading }) {
         const element = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
         return element ? element.getBoundingClientRect() : null;
       };
-      startTextEditing({ idx, getReferenceRect: getReferenceRect2, initialWidth, initialHeight, clickX, clickY, content, styles });
+      const getShadowElement = () => {
+        if (!shadowRootRef.current) return null;
+        return shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
+      };
+      startTextEditing({ idx, getReferenceRect: getReferenceRect2, getShadowElement, initialWidth, initialHeight, clickX, clickY, content, styles });
     },
     [startTextEditing]
   );
@@ -14967,9 +15231,9 @@ function Editor({ setEditorLoading }) {
     [template.content[0]?.data?.value?.showCompanyFooter]
   );
   if (!html) {
-    return /* @__PURE__ */ jsx49("div", { className: "maillow-editor flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx49(Spinner, {}) });
+    return /* @__PURE__ */ jsx50("div", { className: "maillow-editor flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx50(Spinner, {}) });
   }
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: "maillow-editor relative ",
@@ -14980,7 +15244,7 @@ function Editor({ setEditorLoading }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           "div",
           {
             className: `editor-container rounded-b-[12px] border-t-1 border-t-accent max-w-[626px]`,
@@ -14990,7 +15254,7 @@ function Editor({ setEditorLoading }) {
               backgroundColor: "#f5f5f5",
               overflow: "auto"
             },
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx50(
               ShadowDomRenderer,
               {
                 html,
@@ -15019,9 +15283,9 @@ function Editor({ setEditorLoading }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx49(ElementsSuggestions, {}),
-        /* @__PURE__ */ jsx49(TiptapOverlay, {}),
-        !isDragging && !isScaling && hasSelectedElement && focusIdx && selectedElement?.type && /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(ElementsSuggestions, {}),
+        /* @__PURE__ */ jsx50(TiptapOverlay, {}),
+        !isDragging && !isScaling && hasSelectedElement && focusIdx && selectedElement?.type && /* @__PURE__ */ jsx50(
           ElementFloat,
           {
             getReferenceRect,
@@ -15029,7 +15293,7 @@ function Editor({ setEditorLoading }) {
             elementType: selectedElement.type
           }
         ),
-        !isScaling && hasSelectedElement && focusIdx && canDragSelectedElement && !NOT_DRAGGABLE_ELEMENTS.includes(selectedElement.type) && /* @__PURE__ */ jsx49(
+        !isScaling && hasSelectedElement && focusIdx && canDragSelectedElement && !NOT_DRAGGABLE_ELEMENTS.includes(selectedElement.type) && /* @__PURE__ */ jsx50(
           DragButton,
           {
             getReferenceRect,
@@ -15038,17 +15302,17 @@ function Editor({ setEditorLoading }) {
             isDragging
           }
         ),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "divider" && /* @__PURE__ */ jsx49(DividerScale, { getReferenceRect }),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "button" && /* @__PURE__ */ jsx49(ButtonScale, { getReferenceRect }),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "image" && /* @__PURE__ */ jsx49(ImageScale, { getReferenceRect }),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "space" && /* @__PURE__ */ jsx49(SpacerScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "divider" && /* @__PURE__ */ jsx50(DividerScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "button" && /* @__PURE__ */ jsx50(ButtonScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "image" && /* @__PURE__ */ jsx50(ImageScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "space" && /* @__PURE__ */ jsx50(SpacerScale, { getReferenceRect }),
         !isDragging && hasSelectedElement && focusIdx && renderData && (() => {
           const sectionColumnIdx = getSectionColumnIdx(focusIdx, renderData);
           if (!sectionColumnIdx) return null;
           const sectionColumn = getValueByIdx(renderData, sectionColumnIdx);
           if (!sectionColumn || sectionColumn.type !== "section-column") return null;
           if (!sectionColumn.children || sectionColumn.children.length < 2) return null;
-          return /* @__PURE__ */ jsx49(
+          return /* @__PURE__ */ jsx50(
             ColumnScale,
             {
               sectionColumnIdx,