@kgalexander/mcreate 0.0.16 → 1.0.0

package/dist/{chunk-L3OWFBEU.mjs → chunk-G7F7GRJC.mjs}

@@ -1,5 +1,5 @@
 // src/core/index.tsx
-import { useMemo as useMemo18, useState as useState17, useEffect as useEffect21, useCallback as useCallback18, useRef as useRef12 } from "react";
+import { useMemo as useMemo18, useState as useState17, useEffect as useEffect16, useCallback as useCallback20, useRef as useRef12 } from "react";
 import { cloneDeep as cloneDeep2, isEqual, debounce } from "lodash";
 
 // src/core/utils/idx.ts
@@ -215,6 +215,7 @@ function formatOpenHouseTime(time24) {
 // src/core/editor/constant/configuration.ts
 import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Heading1Icon, Heading2Icon, Heading3Icon, LinkIcon, ListIcon, ListOrderedIcon, MailIcon, PhoneIcon, Pilcrow } from "lucide-react";
 var MAX_TEMPLATE_SIZE = 50 * 1024;
+var SIZE_TRACKING_THRESHOLD = 40 * 1024;
 var BUTTON_ALIGNMENTS = ["left", "center", "right"];
 var ALIGNMENT_ICONS = {
   left: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-left.svg",
@@ -472,8 +473,8 @@ function propertyCardMockMjml(block, context) {
                         ${isBrokerage ? brokerageHtml : ""}
                         ${isDescription && description ? `
                         <tr>
-                          <td style="padding: 0px 0px 0px 0px; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor};">
-                            ${description}
+                          <td style="padding: 0px 0px 0px 0px; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor}; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
+                            ${description.length > 200 ? description.slice(0, 200) + "..." : description}
                           </td>
                         </tr>
                         ` : ""}
@@ -592,8 +593,8 @@ function propertyCardSingleTwoMockMjml(block, context) {
       ` : "";
   const descriptionHtml = description ? `
         <tr>
-          <td style="padding: 0px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor};">
-            ${description}
+          <td style="padding: 0px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor}; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
+            ${description.length > 200 ? description.slice(0, 200) + "..." : description}
           </td>
         </tr>
       ` : "";
@@ -727,7 +728,7 @@ function renderCard(child, childIdx, context, uniqueId, borderRadius, imageHeigh
                           <span style="color:#d1d1d5">|</span>
                           <b>${sqft}</b>&nbsp;<abbr title="square feet" style="text-decoration:none">sqft</abbr>
                         </p>
-                        <p style="font-family:${fontFamily};font-size:12px;line-height:16px;font-weight:400;color:${textColor};font-style:normal;margin:0;padding:0">${city}</p>
+                        <p class="property-triple-city-${uniqueId}" style="width: 140px; font-family:${fontFamily};font-size:12px;line-height:16px;font-weight:400;color:${textColor};font-style:normal;margin:0;padding:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${city}</p>
                       </td>
                     </tr>
                   </tbody>
@@ -803,6 +804,9 @@ function propertyCardTripleMockMjml(block, context) {
           .property-triple-section-column {
             width: 100% !important;
           }
+          .property-triple-city-${uniqueId} {
+            width: 135px !important;
+          }
         }
       </style>
     </mj-raw>
@@ -1817,6 +1821,8 @@ var useEditorStore = create()(
       onToast: null,
       onExit: null,
       onImageUpload: null,
+      onDuplicate: null,
+      onDelete: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1831,6 +1837,7 @@ var useEditorStore = create()(
       tiptapEditor: null,
       templateSize: calculateTemplateSize(defaultTemplate),
       isAtSizeLimit: false,
+      sizeTrackingMode: calculateTemplateSize(defaultTemplate) >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling",
       // Undo/Redo history
       history: [],
       historyIndex: -1,
@@ -1847,8 +1854,16 @@ var useEditorStore = create()(
       mergeFields: [],
       // Render sync
       renderSyncNeeded: 0,
+      // Unconditionally recalculate template size and update tracking mode
+      recheckTemplateSize: () => {
+        set((state) => {
+          state.templateSize = calculateTemplateSize(state.template);
+          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
+        });
+      },
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
@@ -1856,6 +1871,8 @@ var useEditorStore = create()(
           state.onToast = onToast ?? null;
           state.onExit = onExit ?? null;
           state.onImageUpload = onImageUpload ?? null;
+          state.onDuplicate = onDuplicate ?? null;
+          state.onDelete = onDelete ?? null;
           state.isPaidLevel = data?.isPaidLevel ?? 0;
           state.images = data?.images ?? [];
           state.userData = data?.userData ?? null;
@@ -1865,6 +1882,7 @@ var useEditorStore = create()(
           }));
           state.templateSize = calculateTemplateSize(template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           state.history = [cloneDeep(template)];
           state.historyIndex = 0;
           state.focusIdx = null;
@@ -2031,6 +2049,7 @@ var useEditorStore = create()(
           children.splice(positionIndex, 0, newElement);
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           if (type !== "text") {
             state.focusIdx = `${parentIdx}.children.[${positionIndex}]`;
           }
@@ -2070,6 +2089,7 @@ var useEditorStore = create()(
           children.splice(sectionPositionIndex, 0, newSection);
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           if (type !== "text") {
             state.focusIdx = `${pageIdx}.children.[${sectionPositionIndex}].children.[0].children.[0]`;
           }
@@ -2151,8 +2171,11 @@ var useEditorStore = create()(
       updateElementContent: (contentIdx, content) => {
         set((state) => {
           setValueAtPath(state.template, contentIdx, content);
-          state.templateSize = calculateTemplateSize(state.template);
-          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          if (state.sizeTrackingMode === "realtime") {
+            state.templateSize = calculateTemplateSize(state.template);
+            state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+            state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
+          }
         });
       },
       // Delete element
@@ -2298,8 +2321,11 @@ var useEditorStore = create()(
               state.focusIdx = null;
             }
           }
-          state.templateSize = calculateTemplateSize(state.template);
-          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          if (state.sizeTrackingMode === "realtime") {
+            state.templateSize = calculateTemplateSize(state.template);
+            state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+            state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
+          }
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2324,6 +2350,7 @@ var useEditorStore = create()(
           children.splice(sourceIndex + 1, 0, clonedElement);
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           state.focusIdx = `${parentIdx}.children.[${sourceIndex + 1}]`;
         });
         useEditorStore.getState().pushHistory();
@@ -2511,6 +2538,7 @@ var useEditorStore = create()(
           state.focusIdx = `${parentIdx}.children.[${adjustedIndex + 1}]`;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2617,6 +2645,7 @@ var useEditorStore = create()(
           state.focusIdx = `${pageIdx}.children.[${adjustedSectionIndex + 1}]`;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2705,6 +2734,7 @@ var useEditorStore = create()(
           }
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2793,6 +2823,7 @@ var useEditorStore = create()(
           }
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2956,6 +2987,7 @@ var useEditorStore = create()(
           state.textEditing = null;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         setTimeout(() => {
           set((state) => {
@@ -2975,6 +3007,7 @@ var useEditorStore = create()(
           state.textEditing = null;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         setTimeout(() => {
           set((state) => {
@@ -3386,7 +3419,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   
     background-color: var(--background);
     border-radius: 4px;
-    padding: 4px;
+    padding: 0px;
     border: 1px solid var(--border);
     color: #000000;
   }
@@ -10798,7 +10831,7 @@ var index_default = Link;
 
 // src/core/editor/components/tiptap-overlay.tsx
 import { useFloating as useFloating4, autoUpdate as autoUpdate2, offset as offset4 } from "@floating-ui/react";
-import { useEffect as useEffect7, useRef as useRef5, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect6, useRef as useRef5, useMemo as useMemo4, useState as useState3 } from "react";
 
 // src/core/editor/extensions/inverse-placeholder.ts
 import { Plugin as Plugin12, PluginKey as PluginKey10 } from "@tiptap/pm/state";
@@ -11200,7 +11233,7 @@ function TooltipContent({
 import { BotIcon } from "lucide-react";
 
 // src/core/editor/components/text-link-menu.tsx
-import { useState as useState2, useEffect as useEffect6 } from "react";
+import { useState as useState2, useCallback as useCallback4 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
@@ -11315,12 +11348,13 @@ var TextLinkMenu = ({ editor }) => {
   const [isLinkTypeOpen, setIsLinkTypeOpen] = useState2(false);
   const currentHref = editor.getAttributes("link").href || "";
   const hasLink = !!currentHref;
-  useEffect6(() => {
-    if (isOpen) {
+  const handleOpenChange = useCallback4((open) => {
+    setIsOpen(open);
+    if (open) {
       setLinkType(detectLinkType(currentHref));
       setInputValue(stripPrefix(currentHref));
     }
-  }, [isOpen, currentHref]);
+  }, [currentHref]);
   const handleInputChange = (e) => {
     setInputValue(e.target.value);
   };
@@ -11357,7 +11391,7 @@ var TextLinkMenu = ({ editor }) => {
     editor.chain().focus().unsetLink().run();
     setInputValue("");
   };
-  return /* @__PURE__ */ jsxs7(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+  return /* @__PURE__ */ jsxs7(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxs7(Tooltip, { children: [
       /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(PopoverTrigger, { asChild: true, children: hasLink ? /* @__PURE__ */ jsx20(
         Button,
@@ -11696,6 +11730,27 @@ function focusAdjacentElement(adjacentIdx, storeRefs) {
     storeRefs.setFocusIdx.current(adjacentIdx);
   }
 }
+var SHADOW_INNER_DIV = ":scope > div";
+function syncShadowHeight(shadowEl, heightPx) {
+  shadowEl.style.height = heightPx;
+  shadowEl.style.minHeight = heightPx;
+  shadowEl.style.overflow = "hidden";
+  const inner = shadowEl.querySelector(SHADOW_INNER_DIV);
+  if (inner) {
+    inner.style.height = heightPx;
+    inner.style.minHeight = "0";
+  }
+}
+function clearShadowHeight(shadowEl) {
+  shadowEl.style.height = "";
+  shadowEl.style.minHeight = "";
+  shadowEl.style.overflow = "";
+  const inner = shadowEl.querySelector(SHADOW_INNER_DIV);
+  if (inner) {
+    inner.style.height = "";
+    inner.style.minHeight = "";
+  }
+}
 function handleDeleteEntireElement(currentElementIdx, storeRefs, event, skipAutoFocus) {
   event.preventDefault();
   const parentIdx = getParentIdx(currentElementIdx);
@@ -11819,7 +11874,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
   const lastSizeLimitToastRef = useRef5(0);
   const hasContentChangedRef = useRef5(false);
   const storeRefs = useEditorStoreRefs();
-  useEffect7(() => {
+  useEffect6(() => {
     return () => {
       const isUndoRedoAction = useEditorStore.getState().isUndoRedoAction;
       if (hasContentChangedRef.current && !isUndoRedoAction) {
@@ -11827,24 +11882,32 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       }
     };
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(() => {
       const shadowEl = getShadowElement();
-      if (shadowEl) {
-        shadowEl.style.height = `${container.offsetHeight}px`;
-      }
+      if (shadowEl) syncShadowHeight(shadowEl, `${container.offsetHeight}px`);
     });
     observer.observe(container);
     return () => {
       observer.disconnect();
       const shadowEl = getShadowElement();
-      if (shadowEl) {
-        shadowEl.style.height = "";
-      }
+      if (shadowEl) clearShadowHeight(shadowEl);
     };
   }, [getShadowElement]);
+  const contentAtIdx = useEditorStore((s) => {
+    const el = getValueByIdx(s.template, idx);
+    return el?.data?.value?.content ?? "";
+  });
+  useEffect6(() => {
+    const raf = requestAnimationFrame(() => {
+      const container = containerRef.current;
+      const shadowEl = getShadowElement();
+      if (container && shadowEl) syncShadowHeight(shadowEl, `${container.offsetHeight}px`);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [contentAtIdx, getShadowElement]);
   const cleanedContent = useMemo4(() => {
     return content.replace(NBSP_P_CONTENT_REGEX, "<p$1></p>").replace(IS_EMPTY_P_CLASS_REGEX, "").replace(IS_EMPTY_HEADING_CLASS_REGEX, "");
   }, [content]);
@@ -11872,7 +11935,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       // Move up by reference height to overlay exactly
     ]
   });
-  useEffect7(() => {
+  useEffect6(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -12012,6 +12075,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
           }
           return true;
         }
+        requestAnimationFrame(() => useEditorStore.getState().recheckTemplateSize());
         return false;
       }
     },
@@ -12056,7 +12120,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
     }
   });
   const [currentLinkHref, setCurrentLinkHref] = useState3("");
-  useEffect7(() => {
+  useEffect6(() => {
     if (!editor) return;
     setTiptapEditor(editor);
     const updateLinkHref = () => {
@@ -12071,7 +12135,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       editor.off("transaction", updateLinkHref);
     };
   }, [editor, setTiptapEditor]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (editor) {
       const timer = setTimeout(() => {
         if (cursorPosition === "end") {
@@ -12100,7 +12164,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       return () => clearTimeout(timer);
     }
   }, [editor, clickX, clickY, cursorPosition]);
-  useEffect7(() => {
+  useEffect6(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       if (containerRef.current && containerRef.current.contains(target)) {
@@ -12132,7 +12196,9 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       style: {
         ...floatingStyles,
         width: initialWidth,
-        minHeight: initialHeight,
+        // Do not use minHeight: initialHeight — it prevents the container from shrinking when
+        // line spacing (or content) is reduced while editing; height only updated on exit otherwise.
+        minHeight: 0,
         zIndex: 50,
         // Apply all container styles for exact matching
         fontFamily: styles.fontFamily,
@@ -12224,7 +12290,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
         .tiptap-overlay .ProseMirror .merge-field-tag {
           background-color: var(--background);
           border-radius: 4px;
-          padding: 4px;
+          padding: 0px;
           border: 1px solid var(--border);
           color: #000000;
         }
@@ -12279,7 +12345,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
 };
 
 // src/core/editor/components/element-float.tsx
-import { useEffect as useEffect13, useMemo as useMemo12 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo12 } from "react";
 import { useFloating as useFloating5, offset as offset5, shift as shift4, flip as flip3, autoUpdate as autoUpdate3 } from "@floating-ui/react";
 
 // src/core/editor/components/float-ui/actions/delete-button.tsx
@@ -12333,7 +12399,7 @@ var DuplicateButton = () => {
 };
 
 // src/core/editor/components/href-menu.tsx
-import { useState as useState4, useEffect as useEffect8, useCallback as useCallback5, useMemo as useMemo6 } from "react";
+import { useState as useState4, useCallback as useCallback6, useMemo as useMemo6 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -12460,7 +12526,7 @@ function DropdownMenuSubContent({
 import { CheckIcon as CheckIcon3, CopyIcon as CopyIcon3, LinkIcon as LinkIcon3, PencilIcon as PencilIcon2, TrashIcon as TrashIcon3 } from "lucide-react";
 
 // src/core/editor/hooks/use-href.ts
-import { useMemo as useMemo5, useCallback as useCallback4 } from "react";
+import { useMemo as useMemo5, useCallback as useCallback5 } from "react";
 import { get as lodashGet2 } from "lodash";
 var useHref = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
@@ -12475,19 +12541,19 @@ var useHref = () => {
       href: el?.attributes?.href || ""
     };
   }, [focusIdx, template]);
-  const setHref = useCallback4((url) => {
+  const setHref = useCallback5((url) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, href: url }
     });
   }, [focusIdx, element, updateElement]);
-  const clearHref = useCallback4(() => {
+  const clearHref = useCallback5(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, href: "" }
     });
   }, [focusIdx, element, updateElement]);
-  const copyHref = useCallback4(async () => {
+  const copyHref = useCallback5(async () => {
     if (href) {
       try {
         await navigator.clipboard.writeText(href);
@@ -12526,17 +12592,18 @@ var HrefMenu = () => {
     const query = inputValue.toLowerCase();
     return all.filter((p) => p.value.toLowerCase().includes(query));
   }, [linkType.name, userData, inputValue]);
-  const handlePresetSelect = useCallback5((value) => {
+  const handlePresetSelect = useCallback6((value) => {
     setInputValue(value);
     setIsPresetOpen(false);
   }, []);
-  useEffect8(() => {
-    if (isOpen) {
+  const handleOpenChange = useCallback6((open) => {
+    setIsOpen(open);
+    if (open) {
       setLinkType(detectLinkType(href));
       setInputValue(stripPrefix(href));
       setIsPresetOpen(true);
     }
-  }, [isOpen, href]);
+  }, [href]);
   const handleInputChange = (e) => {
     setInputValue(e.target.value);
     setIsPresetOpen(true);
@@ -12581,7 +12648,7 @@ var HrefMenu = () => {
     setHref(buildHref(inputValue));
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs13(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+  return /* @__PURE__ */ jsxs13(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxs13(Tooltip, { children: [
       /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ jsx26(
         Button,
@@ -12750,7 +12817,7 @@ var ButtonFloat = () => {
 import { ChevronsLeftRightIcon, ChevronsRightLeftIcon, MoreHorizontalIcon } from "lucide-react";
 
 // src/core/editor/hooks/use-full-width-toggle.ts
-import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo7 } from "react";
 import { get as lodashGet3 } from "lodash";
 function useFullWidthToggle() {
   const { focusIdx, template, updateElement } = useEditorStore();
@@ -12763,7 +12830,7 @@ function useFullWidthToggle() {
       isFullWidth: el?.attributes?.["full-width"] === "full-width"
     };
   }, [focusIdx, template]);
-  const handleToggleFullWidth = useCallback6(() => {
+  const handleToggleFullWidth = useCallback7(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     if (isFullWidth) {
@@ -12800,7 +12867,7 @@ var SectionFloat = () => {
 import { CheckIcon as CheckIcon4, ChevronsLeftRightIcon as ChevronsLeftRightIcon2, ChevronsRightLeftIcon as ChevronsRightLeftIcon2, Layers2Icon, MoreHorizontalIcon as MoreHorizontalIcon2 } from "lucide-react";
 
 // src/core/editor/hooks/use-no-wrap.ts
-import { useCallback as useCallback7, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
 import { get as lodashGet4 } from "lodash";
 function useNoWrap() {
   const { focusIdx, template, updateElement } = useEditorStore();
@@ -12813,7 +12880,7 @@ function useNoWrap() {
       noWrap: el?.data?.value?.noWrap === true
     };
   }, [focusIdx, template]);
-  const handleToggleNoWrap = useCallback7(() => {
+  const handleToggleNoWrap = useCallback8(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       data: {
@@ -12941,10 +13008,10 @@ function Textarea({ className, ...props }) {
 
 // src/core/editor/components/element-gear/social-item/float.tsx
 import { Accessibility, MoreHorizontalIcon as MoreHorizontalIcon4, TrashIcon as TrashIcon4 } from "lucide-react";
-import { useState as useState7, useEffect as useEffect10 } from "react";
+import { useState as useState7, useCallback as useCallback11 } from "react";
 
 // src/core/editor/components/social-item-menu.tsx
-import { useState as useState6, useEffect as useEffect9, useMemo as useMemo9, useCallback as useCallback8 } from "react";
+import { useState as useState6, useMemo as useMemo9, useCallback as useCallback9 } from "react";
 import { PencilIcon as PencilIcon3, CheckIcon as CheckIcon5, CopyIcon as CopyIcon4 } from "lucide-react";
 import { get as lodashGet5 } from "lodash";
 import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -12961,18 +13028,19 @@ var SocialItemMenu = ({ hasHref }) => {
     return lodashGet5(template, path);
   }, [focusIdx, template]);
   const content = element?.data?.value?.content || "";
-  useEffect9(() => {
-    if (isOpen) {
+  const handleOpenChange = useCallback9((open) => {
+    setIsOpen(open);
+    if (open) {
       setHrefInputValue(href);
       setContentInputValue(content);
     }
-  }, [isOpen, href, content]);
-  const handleCopy = useCallback8(async () => {
+  }, [href, content]);
+  const handleCopy = useCallback9(async () => {
     await copyHref();
     setShowCopied(true);
     setTimeout(() => setShowCopied(false), 2e3);
   }, [copyHref]);
-  const handleDone = useCallback8(() => {
+  const handleDone = useCallback9(() => {
     setHref(normalizeWebsiteUrl(hrefInputValue));
     if (focusIdx && element) {
       updateElement(focusIdx, {
@@ -12986,7 +13054,7 @@ var SocialItemMenu = ({ hasHref }) => {
     }
     setIsOpen(false);
   }, [hrefInputValue, contentInputValue, setHref, focusIdx, element, updateElement]);
-  return /* @__PURE__ */ jsxs19(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+  return /* @__PURE__ */ jsxs19(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxs19(Tooltip, { children: [
       /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ jsx34(
         Button,
@@ -13068,7 +13136,7 @@ var SocialItemMenu = ({ hasHref }) => {
 };
 
 // src/core/editor/hooks/use-alt.ts
-import { useMemo as useMemo10, useCallback as useCallback9 } from "react";
+import { useMemo as useMemo10, useCallback as useCallback10 } from "react";
 import { get as lodashGet6 } from "lodash";
 var useAlt = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
@@ -13083,13 +13151,13 @@ var useAlt = () => {
       alt: el?.attributes?.alt || ""
     };
   }, [focusIdx, template]);
-  const setAlt = useCallback9((text2) => {
+  const setAlt = useCallback10((text2) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, alt: text2 }
     });
   }, [focusIdx, element, updateElement]);
-  const clearAlt = useCallback9(() => {
+  const clearAlt = useCallback10(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, alt: "" }
@@ -13115,11 +13183,12 @@ var SocialItemFloat = () => {
   const parentSocial = focusIdx ? getParentByIdx(template, focusIdx) : null;
   const childrenCount = parentSocial?.children?.length || 0;
   const canDelete = childrenCount > 1;
-  useEffect10(() => {
-    if (dropdownOpen) {
+  const handleDropdownOpenChange = useCallback11((open) => {
+    setDropdownOpen(open);
+    if (open) {
       setAltInputValue(alt);
     }
-  }, [dropdownOpen, alt]);
+  }, [alt]);
   const handleSaveAlt = () => {
     setAlt(altInputValue);
     setDropdownOpen(false);
@@ -13145,7 +13214,7 @@ var SocialItemFloat = () => {
       ) }),
       /* @__PURE__ */ jsx35(TooltipContent, { side: "bottom", children: canDelete ? "Delete" : "Cannot delete last item" })
     ] }),
-    /* @__PURE__ */ jsxs20(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+    /* @__PURE__ */ jsxs20(DropdownMenu, { open: dropdownOpen, onOpenChange: handleDropdownOpenChange, children: [
       /* @__PURE__ */ jsxs20(Tooltip, { children: [
         /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx35(MoreHorizontalIcon4, { className: "w-4 h-4" }) }) }) }),
         /* @__PURE__ */ jsx35(TooltipContent, { side: "bottom", children: "More" })
@@ -13203,7 +13272,7 @@ var DividerFloat = () => {
 // src/core/editor/components/element-gear/image/float.tsx
 import { Accessibility as Accessibility2, CheckIcon as CheckIcon6, MoreHorizontalIcon as MoreHorizontalIcon5, Proportions } from "lucide-react";
 import lodashGet7 from "lodash/get";
-import { useState as useState8, useEffect as useEffect11, useMemo as useMemo11, useCallback as useCallback10 } from "react";
+import { useState as useState8, useMemo as useMemo11, useCallback as useCallback12 } from "react";
 import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var ImageFloat = () => {
   const { href, hasHref } = useHref();
@@ -13221,7 +13290,7 @@ var ImageFloat = () => {
       isFluidOnMobile: el?.attributes?.["fluid-on-mobile"] === "true"
     };
   }, [focusIdx, template]);
-  const toggleFluidOnMobile = useCallback10(() => {
+  const toggleFluidOnMobile = useCallback12(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     if (isFluidOnMobile) {
@@ -13231,11 +13300,12 @@ var ImageFloat = () => {
     }
     updateElement(focusIdx, { attributes: newAttributes });
   }, [focusIdx, element, isFluidOnMobile, updateElement]);
-  useEffect11(() => {
-    if (dropdownOpen) {
+  const handleDropdownOpenChange = useCallback12((open) => {
+    setDropdownOpen(open);
+    if (open) {
       setAltInputValue(alt);
     }
-  }, [dropdownOpen, alt]);
+  }, [alt]);
   const handleSaveAlt = () => {
     setAlt(altInputValue);
     setDropdownOpen(false);
@@ -13245,7 +13315,7 @@ var ImageFloat = () => {
     /* @__PURE__ */ jsx37(HrefMenu, {}),
     /* @__PURE__ */ jsx37(DuplicateButton, {}),
     /* @__PURE__ */ jsx37(DeleteButton, {}),
-    /* @__PURE__ */ jsxs22(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+    /* @__PURE__ */ jsxs22(DropdownMenu, { open: dropdownOpen, onOpenChange: handleDropdownOpenChange, children: [
       /* @__PURE__ */ jsxs22(Tooltip, { children: [
         /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx37(MoreHorizontalIcon5, { className: "w-4 h-4" }) }) }) }),
         /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "More" })
@@ -13302,7 +13372,7 @@ var ImageFloat = () => {
 };
 
 // src/core/editor/components/mlsNumber-menu.tsx
-import { useState as useState9, useEffect as useEffect12 } from "react";
+import { useState as useState9, useEffect as useEffect7 } from "react";
 import { HousePlusIcon, TrashIcon as TrashIcon5, XIcon as XIcon2, Loader2Icon } from "lucide-react";
 
 // src/services/repliers/commands.ts
@@ -13327,7 +13397,7 @@ var MlsNumberMenu = () => {
   const [isLoading, setIsLoading] = useState9(false);
   const propertyElement = focusIdx && template ? getValueByIdx(template, focusIdx) : null;
   const currentMlsNumber = propertyElement?.data?.value?.mlsNumber || "";
-  useEffect12(() => {
+  useEffect7(() => {
     setInputValue(currentMlsNumber);
     setPropertyData(null);
   }, [focusIdx, currentMlsNumber]);
@@ -13600,7 +13670,7 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
       // Keep within viewport
     ]
   });
-  useEffect13(() => {
+  useEffect8(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13619,7 +13689,7 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
 };
 
 // src/core/editor/components/scaling/divider-scale.tsx
-import { useMemo as useMemo13, useEffect as useEffect14, useState as useState10, useRef as useRef6, useCallback as useCallback12 } from "react";
+import { useMemo as useMemo13, useEffect as useEffect9, useState as useState10, useRef as useRef6, useCallback as useCallback14 } from "react";
 import { useFloating as useFloating6, offset as offset6, autoUpdate as autoUpdate4 } from "@floating-ui/react";
 import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var DividerScale = ({ getReferenceRect }) => {
@@ -13636,12 +13706,12 @@ var DividerScale = ({ getReferenceRect }) => {
     return { currentWidth: width, currentAlign: align };
   }, [focusIdx, template]);
   const dragRef = useRef6(null);
-  const getContainerWidth = useCallback12(() => {
+  const getContainerWidth = useCallback14(() => {
     const rect = getReferenceRect();
     if (!rect || currentWidth <= 0) return null;
     return rect.width / (currentWidth / 100);
   }, [getReferenceRect, currentWidth]);
-  const handlePointerDown = useCallback12((e, side) => {
+  const handlePointerDown = useCallback14((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     const containerWidth = getContainerWidth();
@@ -13659,7 +13729,7 @@ var DividerScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getContainerWidth, currentWidth, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback12((e) => {
+  const handlePointerMove = useCallback14((e) => {
     if (!dragRef.current) return;
     const { startX, startWidth, containerWidth, side, align } = dragRef.current;
     const deltaX = e.clientX - startX;
@@ -13679,14 +13749,14 @@ var DividerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback12(() => {
+  const handlePointerUp = useCallback14(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect14(() => {
+  useEffect9(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13707,7 +13777,7 @@ var DividerScale = ({ getReferenceRect }) => {
       offset6(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect14(() => {
+  useEffect9(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13766,7 +13836,7 @@ var DividerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/button-scale.tsx
-import { useMemo as useMemo14, useEffect as useEffect15, useState as useState11, useRef as useRef7, useCallback as useCallback13 } from "react";
+import { useMemo as useMemo14, useEffect as useEffect10, useState as useState11, useRef as useRef7, useCallback as useCallback15 } from "react";
 import { useFloating as useFloating7, offset as offset7, autoUpdate as autoUpdate5 } from "@floating-ui/react";
 import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var ButtonScale = ({ getReferenceRect }) => {
@@ -13788,12 +13858,12 @@ var ButtonScale = ({ getReferenceRect }) => {
     return { currentWidth: width, currentHeight: height, currentAlign: align };
   }, [focusIdx, template]);
   const dragRef = useRef7(null);
-  const getContainerWidth = useCallback13(() => {
+  const getContainerWidth = useCallback15(() => {
     const rect = getReferenceRect();
     if (!rect || currentWidth <= 0) return null;
     return rect.width / (currentWidth / 100);
   }, [getReferenceRect, currentWidth]);
-  const handlePointerDown = useCallback13((e, side) => {
+  const handlePointerDown = useCallback15((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13815,7 +13885,7 @@ var ButtonScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getContainerWidth, currentWidth, currentHeight, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback13((e) => {
+  const handlePointerMove = useCallback15((e) => {
     if (!dragRef.current) return;
     const { startX, startY, startWidth, startHeight, containerWidth, side, align } = dragRef.current;
     const state = useEditorStore.getState();
@@ -13847,14 +13917,14 @@ var ButtonScale = ({ getReferenceRect }) => {
       });
     }
   }, []);
-  const handlePointerUp = useCallback13(() => {
+  const handlePointerUp = useCallback15(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect15(() => {
+  useEffect10(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13875,7 +13945,7 @@ var ButtonScale = ({ getReferenceRect }) => {
       offset7(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect15(() => {
+  useEffect10(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13950,7 +14020,7 @@ var ButtonScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/image-scale.tsx
-import { useMemo as useMemo15, useEffect as useEffect16, useState as useState12, useRef as useRef8, useCallback as useCallback14 } from "react";
+import { useMemo as useMemo15, useEffect as useEffect11, useState as useState12, useRef as useRef8, useCallback as useCallback16 } from "react";
 import { useFloating as useFloating8, offset as offset8, autoUpdate as autoUpdate6 } from "@floating-ui/react";
 import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var isCorner = (side) => side === "top-left" || side === "top-right" || side === "bottom-left" || side === "bottom-right";
@@ -13973,7 +14043,7 @@ var ImageScale = ({ getReferenceRect }) => {
     return { currentWidth: width, currentHeight: height, currentAlign: align };
   }, [focusIdx, template]);
   const dragRef = useRef8(null);
-  const handlePointerDown = useCallback14((e, side) => {
+  const handlePointerDown = useCallback16((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13997,7 +14067,7 @@ var ImageScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getReferenceRect, currentWidth, currentHeight, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback14((e) => {
+  const handlePointerMove = useCallback16((e) => {
     if (!dragRef.current) return;
     const { startX, startY, startWidth, startHeight, side, align } = dragRef.current;
     const state = useEditorStore.getState();
@@ -14056,14 +14126,14 @@ var ImageScale = ({ getReferenceRect }) => {
       });
     }
   }, []);
-  const handlePointerUp = useCallback14(() => {
+  const handlePointerUp = useCallback16(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect16(() => {
+  useEffect11(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -14084,7 +14154,7 @@ var ImageScale = ({ getReferenceRect }) => {
       offset8(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect16(() => {
+  useEffect11(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -14191,7 +14261,7 @@ var ImageScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/spacer-scale.tsx
-import { useMemo as useMemo16, useEffect as useEffect17, useState as useState13, useRef as useRef9, useCallback as useCallback15 } from "react";
+import { useMemo as useMemo16, useEffect as useEffect12, useState as useState13, useRef as useRef9, useCallback as useCallback17 } from "react";
 import { useFloating as useFloating9, offset as offset9, autoUpdate as autoUpdate7 } from "@floating-ui/react";
 import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var SpacerScale = ({ getReferenceRect }) => {
@@ -14206,7 +14276,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     return isNaN(parsedHeight) ? 12 : Math.max(12, Math.min(200, parsedHeight));
   }, [focusIdx, template]);
   const dragRef = useRef9(null);
-  const handlePointerDown = useCallback15((e, side) => {
+  const handlePointerDown = useCallback17((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -14222,7 +14292,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [currentHeight, setIsScaling]);
-  const handlePointerMove = useCallback15((e) => {
+  const handlePointerMove = useCallback17((e) => {
     if (!dragRef.current) return;
     const { startY, startHeight, side } = dragRef.current;
     const state = useEditorStore.getState();
@@ -14240,14 +14310,14 @@ var SpacerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback15(() => {
+  const handlePointerUp = useCallback17(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect17(() => {
+  useEffect12(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -14268,7 +14338,7 @@ var SpacerScale = ({ getReferenceRect }) => {
       offset9(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect17(() => {
+  useEffect12(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -14327,7 +14397,7 @@ var SpacerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/column-scale.tsx
-import { useMemo as useMemo17, useEffect as useEffect18, useState as useState14, useRef as useRef10, useCallback as useCallback16 } from "react";
+import { useMemo as useMemo17, useEffect as useEffect13, useState as useState14, useRef as useRef10, useCallback as useCallback18 } from "react";
 import { Fragment as Fragment17, jsx as jsx47 } from "react/jsx-runtime";
 var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   const [activeDivider, setActiveDivider] = useState14(null);
@@ -14339,7 +14409,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     return sectionColumn?.data?.value?.columnWidths || [];
   }, [template, sectionColumnIdx]);
   const dragRef = useRef10(null);
-  const updateColumnRects = useCallback16(() => {
+  const updateColumnRects = useCallback18(() => {
     if (!shadowRoot) return;
     const allColumns = shadowRoot.querySelectorAll(".node-type-column");
     const matchingColumns = [];
@@ -14371,7 +14441,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     });
     setColumnRects(rects);
   }, [shadowRoot, sectionColumnIdx]);
-  useEffect18(() => {
+  useEffect13(() => {
     updateColumnRects();
     let animationId;
     const updateLoop = () => {
@@ -14384,7 +14454,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   const parseWidth = (width) => {
     return parseFloat(width.replace("%", ""));
   };
-  const handlePointerDown = useCallback16((e, dividerIndex) => {
+  const handlePointerDown = useCallback18((e, dividerIndex) => {
     e.preventDefault();
     e.stopPropagation();
     stopTextEditing();
@@ -14410,7 +14480,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [columnRects, columnWidths, setIsScaling]);
-  const handlePointerMove = useCallback16((e) => {
+  const handlePointerMove = useCallback18((e) => {
     if (!dragRef.current) return;
     const { startX, leftColIndex, rightColIndex, startLeftWidth, startRightWidth, sectionWidth, allWidths } = dragRef.current;
     const deltaX = e.clientX - startX;
@@ -14444,14 +14514,14 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
       }
     });
   }, [sectionColumnIdx]);
-  const handlePointerUp = useCallback16(() => {
+  const handlePointerUp = useCallback18(() => {
     setActiveDivider(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect18(() => {
+  useEffect13(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -14490,9 +14560,9 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
 };
 
 // src/core/editor/hooks/use-undo-redo-keyboard.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect14 } from "react";
 function useUndoRedoKeyboard() {
-  useEffect19(() => {
+  useEffect14(() => {
     const handler = (e) => {
       const isMeta = e.metaKey || e.ctrlKey;
       if (!isMeta || e.key.toLowerCase() !== "z") return;
@@ -14531,7 +14601,7 @@ function Spinner({ className, ...props }) {
 import { EyeIcon, SendIcon, Monitor, Smartphone } from "lucide-react";
 
 // src/render/useMjmlCompiler.ts
-import { useState as useState15, useCallback as useCallback17 } from "react";
+import { useState as useState15, useCallback as useCallback19 } from "react";
 async function compileMjml(mjml) {
   console.log("Compiling MJML", mjml);
   const response = await fetch("/api/mrender", {
@@ -14548,7 +14618,7 @@ async function compileMjml(mjml) {
 }
 
 // src/core/editor/components/preview.tsx
-import { useEffect as useEffect20, useState as useState16, useRef as useRef11 } from "react";
+import { useEffect as useEffect15, useState as useState16, useRef as useRef11 } from "react";
 
 // src/validate/helpers.ts
 var MERGE_FIELD_REGEX2 = /\{\{([a-zA-Z_][a-zA-Z0-9_]*)\}\}/g;
@@ -14642,7 +14712,7 @@ function Preview() {
   const [deviceMode, setDeviceMode] = useState16("desktop");
   const [preview_validations, setPreviewValidations] = useState16({ invalid_merge_fields: [], missing_links: [], is_over_size_limit: false, placeholder_property_images: 0 });
   const [mjmlErrors, setMjmlErrors] = useState16([]);
-  useEffect20(() => {
+  useEffect15(() => {
     if (typeof window === "undefined" || !previewMode) {
       if (!previewMode) {
         setHtml("");
@@ -14947,9 +15017,10 @@ function Editor({ setEditorLoading }) {
   const lastSyncedTemplateRef = useRef12(null);
   const prevTextEditingIdxRef = useRef12(null);
   const lastRenderSyncNeededRef = useRef12(0);
+  const hasNotifiedLoadedRef = useRef12(false);
   const imageReplaceTargetRef = useRef12(null);
   const imagePreviewOriginalSrcRef = useRef12(null);
-  useEffect21(() => {
+  useEffect16(() => {
     const currentIdx = textEditing?.idx ?? null;
     const prevIdx = prevTextEditingIdxRef.current;
     const switchedTarget = currentIdx !== null && prevIdx !== null && currentIdx !== prevIdx;
@@ -14964,16 +15035,15 @@ function Editor({ setEditorLoading }) {
       }
       if (!isEqual(template, renderData)) {
         setRenderData(cloneDeep2(template));
+        if (!hasNotifiedLoadedRef.current && setEditorLoading) {
+          hasNotifiedLoadedRef.current = true;
+          setEditorLoading(false);
+        }
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing, textEditing, renderSyncNeeded]);
-  useEffect21(() => {
-    if (renderData && setEditorLoading) {
-      setEditorLoading(false);
-    }
-  }, [renderData, setEditorLoading]);
-  useEffect21(() => {
+  }, [template, renderData, isEditing, textEditing, renderSyncNeeded, setEditorLoading]);
+  useEffect16(() => {
     if (!pendingTextEditRequest || !shadowRootRef.current) return;
     const { idx, cursorPosition } = pendingTextEditRequest;
     const blockNode = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
@@ -15022,7 +15092,7 @@ function Editor({ setEditorLoading }) {
     startTextEditing({ idx, getReferenceRect: getReferenceRect2, getShadowElement, initialWidth: blockRect.width, initialHeight: blockRect.height, clickX, clickY, content, styles, cursorPosition });
     clearPendingTextEditRequest();
   }, [pendingTextEditRequest, clearPendingTextEditRequest, startTextEditing]);
-  useEffect21(() => {
+  useEffect16(() => {
     if (isDragging && dataTransfer) {
       const currentTemplate = useEditorStore.getState().template;
       templateCacheRef.current = currentTemplate;
@@ -15040,7 +15110,7 @@ function Editor({ setEditorLoading }) {
   }, [isDragging, dataTransfer]);
   const [html, setHtml] = useState17("");
   const lastRenderDataRef = useRef12("");
-  useEffect21(() => {
+  useEffect16(() => {
     if (typeof window === "undefined" || !renderData) {
       setHtml("");
       lastRenderDataRef.current = "";
@@ -15073,7 +15143,7 @@ function Editor({ setEditorLoading }) {
     }, 200),
     [updateElementContent]
   );
-  const handleElementClick = useCallback18(
+  const handleElementClick = useCallback20(
     (idx) => {
       if (isInsideCompanyFooter(idx, template)) {
         return;
@@ -15086,7 +15156,7 @@ function Editor({ setEditorLoading }) {
     },
     [setFocusIdx, template]
   );
-  const handleElementHover = useCallback18(
+  const handleElementHover = useCallback20(
     (idx) => {
       if (!isDragging) {
         if (idx) {
@@ -15100,19 +15170,19 @@ function Editor({ setEditorLoading }) {
     },
     [isDragging, setHoverIdx, template]
   );
-  const handleContentInput = useCallback18(
+  const handleContentInput = useCallback20(
     (contentIdx, content) => {
       debouncedUpdateContent(contentIdx, content);
     },
     [debouncedUpdateContent]
   );
-  const handleEditingStart = useCallback18(() => {
+  const handleEditingStart = useCallback20(() => {
     setIsEditing(true);
   }, []);
-  const handleEditingEnd = useCallback18(() => {
+  const handleEditingEnd = useCallback20(() => {
     setIsEditing(false);
   }, []);
-  const handleSlashCommand = useCallback18(
+  const handleSlashCommand = useCallback20(
     (cursorRect) => {
       setSlashCommand({
         isActive: true,
@@ -15127,10 +15197,10 @@ function Editor({ setEditorLoading }) {
     },
     [setSlashCommand]
   );
-  const handleSlashCommandClose = useCallback18(() => {
+  const handleSlashCommandClose = useCallback20(() => {
     clearSlashCommand();
   }, [clearSlashCommand]);
-  const handleTextEditStart = useCallback18(
+  const handleTextEditStart = useCallback20(
     (idx, initialWidth, initialHeight, clickX, clickY, content, styles) => {
       const getReferenceRect2 = () => {
         if (!shadowRootRef.current) return null;
@@ -15145,11 +15215,11 @@ function Editor({ setEditorLoading }) {
     },
     [startTextEditing]
   );
-  const findParentSectionIdx = useCallback18((idx) => {
+  const findParentSectionIdx = useCallback20((idx) => {
     const match = /^(content\.children\.\[\d+\])/.exec(idx);
     return match ? match[1] : null;
   }, []);
-  const handleDragOver = useCallback18(
+  const handleDragOver = useCallback20(
     (_e, dragInfo) => {
       const currentDataTransfer = useEditorStore.getState().dataTransfer;
       if (!currentDataTransfer) return;
@@ -15608,7 +15678,7 @@ function Editor({ setEditorLoading }) {
     [findParentSectionIdx]
     // Only dependency is the helper function
   );
-  const handleDrop = useCallback18(
+  const handleDrop = useCallback20(
     (_e, _dragInfo) => {
       const currentDataTransfer = useEditorStore.getState().dataTransfer;
       if (!currentDataTransfer) return;
@@ -15792,7 +15862,7 @@ function Editor({ setEditorLoading }) {
     },
     [addElement, addElementInNewSection, moveElement, moveElementToNewSection, splitTextAndInsertElement, splitSectionAndInsertElement, setIsDragging, setIsDragButtonHovered, setDataTransfer, setHoverIdx]
   );
-  const handleDragLeave = useCallback18(() => {
+  const handleDragLeave = useCallback20(() => {
     setDropIndicator(null);
     setDropTargetIdx(null);
     dragParentIdxRef.current = null;
@@ -15813,13 +15883,13 @@ function Editor({ setEditorLoading }) {
     sectionElementCacheRef.current.clear();
     sectionRectCacheRef.current.clear();
   }, []);
-  const handleShadowRootRef = useCallback18((shadowRoot) => {
+  const handleShadowRootRef = useCallback20((shadowRoot) => {
     shadowRootRef.current = shadowRoot;
   }, []);
-  const handleSelectionRectChange = useCallback18((rect) => {
+  const handleSelectionRectChange = useCallback20((rect) => {
     setHasSelectedElement(rect !== null);
   }, []);
-  const getReferenceRect = useCallback18(() => {
+  const getReferenceRect = useCallback20(() => {
     if (!shadowRootRef.current || !focusIdx) return null;
     const selectedEl = shadowRootRef.current.querySelector(
       `.node-idx-${CSS.escape(focusIdx)}`