@kgalexander/mcreate 0.0.16 → 0.0.17

package/dist/{chunk-L3OWFBEU.mjs → chunk-GZLWB3EZ.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
@@ -3386,7 +3386,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 +10798,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 +11200,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 +11315,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 +11358,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,
@@ -11819,7 +11820,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,7 +11828,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       }
     };
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(() => {
@@ -11872,7 +11873,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);
@@ -12056,7 +12057,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
     }
   });
   const [currentLinkHref, setCurrentLinkHref] = useState3("");
-  useEffect7(() => {
+  useEffect6(() => {
     if (!editor) return;
     setTiptapEditor(editor);
     const updateLinkHref = () => {
@@ -12071,7 +12072,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 +12101,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)) {
@@ -12224,7 +12225,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 +12280,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 +12334,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 +12461,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 +12476,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 +12527,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 +12583,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 +12752,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 +12765,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 +12802,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 +12815,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 +12943,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 +12963,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 +12989,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 +13071,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 +13086,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 +13118,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 +13149,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 +13207,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 +13225,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 +13235,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 +13250,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 +13307,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 +13332,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 +13605,7 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
       // Keep within viewport
     ]
   });
-  useEffect13(() => {
+  useEffect8(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13619,7 +13624,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 +13641,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 +13664,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 +13684,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 +13712,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 +13771,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 +13793,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 +13820,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 +13852,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 +13880,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 +13955,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 +13978,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 +14002,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 +14061,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 +14089,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 +14196,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 +14211,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 +14227,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 +14245,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 +14273,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 +14332,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 +14344,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 +14376,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     });
     setColumnRects(rects);
   }, [shadowRoot, sectionColumnIdx]);
-  useEffect18(() => {
+  useEffect13(() => {
     updateColumnRects();
     let animationId;
     const updateLoop = () => {
@@ -14384,7 +14389,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 +14415,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 +14449,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 +14495,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 +14536,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 +14553,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 +14647,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 +14952,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 +14970,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 +15027,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 +15045,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 +15078,7 @@ function Editor({ setEditorLoading }) {
     }, 200),
     [updateElementContent]
   );
-  const handleElementClick = useCallback18(
+  const handleElementClick = useCallback20(
     (idx) => {
       if (isInsideCompanyFooter(idx, template)) {
         return;
@@ -15086,7 +15091,7 @@ function Editor({ setEditorLoading }) {
     },
     [setFocusIdx, template]
   );
-  const handleElementHover = useCallback18(
+  const handleElementHover = useCallback20(
     (idx) => {
       if (!isDragging) {
         if (idx) {
@@ -15100,19 +15105,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 +15132,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 +15150,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 +15613,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 +15797,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 +15818,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)}`