@kgalexander/mcreate 0.0.12 → 0.0.14

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

@@ -1,5 +1,5 @@
 // src/core/index.tsx
-import { useMemo as useMemo16, useState as useState15, useEffect as useEffect19, useCallback as useCallback16, useRef as useRef11 } from "react";
+import { useMemo as useMemo17, useState as useState16, useEffect as useEffect20, useCallback as useCallback17, useRef as useRef11 } from "react";
 import { cloneDeep as cloneDeep2, isEqual, debounce } from "lodash";
 
 // src/core/utils/idx.ts
@@ -1114,7 +1114,6 @@ import lodashGet from "lodash/get";
 import lodashSet from "lodash/set";
 import cloneDeep from "lodash/cloneDeep";
 import { castDraft } from "immer";
-import { toast } from "sonner";
 
 // src/core/editor/utils/generate-id.ts
 import { nanoid } from "nanoid";
@@ -1278,6 +1277,7 @@ function createSocialElement(payload) {
       "inner-padding": "4px 4px",
       "icon-padding": "0px 6px",
       "text-padding": "4px 4px",
+      "line-height": "1.4",
       ...payload?.attributes
     },
     children: payload?.children || [
@@ -1312,6 +1312,7 @@ function createSocialItemElement(payload) {
       target: "_blank",
       src: payload?.attributes?.src || "https://cdn-images.mailchimp.com/icons/social-block-v3/block-icons-v3/facebook-icon-color-40.png",
       alt: payload?.attributes?.alt || "Facebook",
+      align: "center",
       ...payload?.attributes
     }
   };
@@ -1870,7 +1871,6 @@ var defaultTemplate = {
     id: page.id || generateId()
   }))
 };
-var MAX_PAID_LEVEL = 3;
 var useEditorStore = create()(
   devtools(
     immer((set) => ({
@@ -1878,6 +1878,8 @@ var useEditorStore = create()(
       template: defaultTemplate,
       templateId: null,
       onSave: null,
+      onToast: null,
+      onExit: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1901,13 +1903,20 @@ var useEditorStore = create()(
       isSaving: false,
       // Subscription level (0 = free, 1-3 = paid tiers)
       isPaidLevel: 0,
+      // User data
+      images: [],
+      userData: null,
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, isPaidLevel) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
           state.onSave = onSave ?? null;
-          state.isPaidLevel = isPaidLevel ?? 0;
+          state.onToast = onToast ?? null;
+          state.onExit = onExit ?? null;
+          state.isPaidLevel = data?.isPaidLevel ?? 0;
+          state.images = data?.images ?? [];
+          state.userData = data?.userData ?? null;
           state.templateSize = calculateTemplateSize(template);
           state.isAtSizeLimit = false;
           state.history = [cloneDeep(template)];
@@ -2053,7 +2062,7 @@ var useEditorStore = create()(
           }
           const elementSize = new Blob([JSON.stringify(newElement)]).size;
           if (state.templateSize + elementSize > MAX_TEMPLATE_SIZE) {
-            toast.error("Template size limit reached - element would exceed the limit");
+            state.onToast?.({ type: "error", message: "Template size limit reached - element would exceed the limit" });
             return;
           }
           const children = parent.children;
@@ -2092,7 +2101,7 @@ var useEditorStore = create()(
           }
           const sectionSize = new Blob([JSON.stringify(newSection)]).size;
           if (state.templateSize + sectionSize > MAX_TEMPLATE_SIZE) {
-            toast.error("Template size limit reached");
+            state.onToast?.({ type: "error", message: "Template size limit reached" });
             return;
           }
           const children = page.children;
@@ -2210,7 +2219,7 @@ var useEditorStore = create()(
               }
             ).length;
             if (regularSectionCount <= 1) {
-              toast.error("Cannot delete the last section");
+              state.onToast?.({ type: "error", message: "Cannot delete the last section" });
               return;
             }
           }
@@ -2343,7 +2352,7 @@ var useEditorStore = create()(
           const clonedElement = cloneDeep(sourceElement);
           const elementSize = new Blob([JSON.stringify(clonedElement)]).size;
           if (state.templateSize + elementSize > MAX_TEMPLATE_SIZE) {
-            toast.error("Template size limit reached - duplicate would exceed limit");
+            state.onToast?.({ type: "error", message: "Template size limit reached - duplicate would exceed limit" });
             return;
           }
           const parent = getElementAtIdx(state.template, parentIdx);
@@ -2447,13 +2456,14 @@ var useEditorStore = create()(
             if (tempDroppedElement) {
               const elementSize = new Blob([JSON.stringify(tempDroppedElement)]).size;
               if (state.templateSize + elementSize > MAX_TEMPLATE_SIZE) {
-                toast.error("Template size limit reached - this element would exceed the limit");
+                state.onToast?.({ type: "error", message: "Template size limit reached - this element would exceed the limit" });
                 return;
               }
             }
           }
           textElement.data.value.content = beforeContent;
           let droppedElement = null;
+          let deletedSectionIndex = null;
           if (sourceIdx) {
             const sourceParentIdx = getParentIdx(sourceIdx);
             if (sourceParentIdx) {
@@ -2473,6 +2483,7 @@ var useEditorStore = create()(
                       const sectionIndex = getIndexByIdx(sourceSectionIdx);
                       const sourcePageChildren = sourcePage.children;
                       sourcePageChildren.splice(sectionIndex, 1);
+                      deletedSectionIndex = sectionIndex;
                     }
                   } else if (action === "add-text") {
                     const defaultText = createElementByType("text", { data: { value: { content: "" } } });
@@ -2498,7 +2509,20 @@ var useEditorStore = create()(
             console.error("Failed to create new text element");
             return;
           }
-          const parentIdx = getParentIdx(textElementIdx);
+          let adjustedTextElementIdx = textElementIdx;
+          if (deletedSectionIndex !== null) {
+            const textSectionMatch = SECTION_INDEX_REGEX.exec(textElementIdx);
+            if (textSectionMatch) {
+              const textSectionIndex = Number(textSectionMatch[1]);
+              if (deletedSectionIndex < textSectionIndex) {
+                adjustedTextElementIdx = textElementIdx.replace(
+                  SECTION_INDEX_REGEX,
+                  `content.children.[${textSectionIndex - 1}]`
+                );
+              }
+            }
+          }
+          const parentIdx = getParentIdx(adjustedTextElementIdx);
           if (!parentIdx) {
             console.error("Parent not found for text element");
             return;
@@ -2508,7 +2532,7 @@ var useEditorStore = create()(
             console.error("Parent is not a valid container");
             return;
           }
-          const currentIndex = getIndexByIdx(textElementIdx);
+          const currentIndex = getIndexByIdx(adjustedTextElementIdx);
           const parentChildren = parent.children;
           let adjustedIndex = currentIndex;
           if (sourceIdx) {
@@ -2595,7 +2619,7 @@ var useEditorStore = create()(
             const elementSize = new Blob([JSON.stringify(sectionColumnElement)]).size;
             const approxNewSectionSize = 200;
             if (state.templateSize + elementSize + approxNewSectionSize > MAX_TEMPLATE_SIZE) {
-              toast.error("Template size limit reached");
+              state.onToast?.({ type: "error", message: "Template size limit reached" });
               return;
             }
           }
@@ -2618,7 +2642,7 @@ var useEditorStore = create()(
           const pageChildren = page.children;
           let adjustedSectionIndex = sectionIndex;
           if (sourceIdx) {
-            const srcSectionMatch = sourceIdx.match(SECTION_INDEX_REGEX);
+            const srcSectionMatch = SECTION_INDEX_REGEX.exec(sourceIdx);
             if (srcSectionMatch) {
               const srcSectionIndex = parseInt(srcSectionMatch[1], 10);
               if (srcSectionIndex < sectionIndex) {
@@ -2694,7 +2718,7 @@ var useEditorStore = create()(
           if (!sourceIdx) {
             const columnSize = new Blob([JSON.stringify(newColumn)]).size;
             if (state.templateSize + columnSize > MAX_TEMPLATE_SIZE) {
-              toast.error("Template size limit reached");
+              state.onToast?.({ type: "error", message: "Template size limit reached" });
               return;
             }
           }
@@ -2787,7 +2811,7 @@ var useEditorStore = create()(
           if (!sourceIdx) {
             const columnSize = new Blob([JSON.stringify(newColumn)]).size;
             if (state.templateSize + columnSize > MAX_TEMPLATE_SIZE) {
-              toast.error("Template size limit reached");
+              state.onToast?.({ type: "error", message: "Template size limit reached" });
               return;
             }
           }
@@ -3120,6 +3144,17 @@ var LINK_TYPES = [
     prefix: "tel:"
   }
 ];
+var LINK_PRESETS = {
+  Phone: [
+    { label: "Personal Phone", key: "personal_phone_number" },
+    { label: "Office Phone", key: "office_phone_number" },
+    { label: "Business Phone", key: "business_phone_number" }
+  ],
+  Website: [
+    { label: "Team Website", key: "team_website" },
+    { label: "Brokerage Website", key: "brokerage_website" }
+  ]
+};
 var detectLinkType = (href) => {
   if (href.startsWith("mailto:")) return LINK_TYPES[0];
   if (href.startsWith("tel:")) return LINK_TYPES[2];
@@ -3146,10 +3181,20 @@ var MAX_LINE_HEIGHT = 3;
 var LINE_HEIGHT_STEP = 0.1;
 var HIDDEN_SELECTION_VISUAL_ELEMENTS = ["text", "divider", "column"];
 var NOT_DRAGGABLE_ELEMENTS = ["page", "social-item", "text", "property-card", "property-card-single-two", "property-card-triple", "property-card-triple-item"];
-var IMAGE_SELECTION_VALID_TYPES = ["section", "section-column", "image", "section-property-km", "section-property-single-two", "section-property-triple", "property-card", "property-card-single-two", "property-card-triple", "property-card-triple-item"];
+var EDITOR_COLORS = {
+  /** Purple — drag/drop state */
+  drag: {
+    solid: "rgb(59, 130, 246)",
+    half: "rgba(59, 130, 246, 0.5)"
+  },
+  /** Blue — hover/selection state */
+  hover: {
+    solid: "rgb(59, 130, 246)",
+    half: "rgba(59, 130, 246, 0.5)"
+  }
+};
 
 // src/core/editor/components/ShadowDomRenderer.tsx
-import { toast as toast2 } from "sonner";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var lastSizeLimitToastTime = 0;
 var cssCache = /* @__PURE__ */ new Map();
@@ -3175,32 +3220,32 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
 
   /* Hover state - uses CSS variable for dynamic color */
   .${EMAIL_BLOCK_CLASS_NAME}.is-hovered {
-    outline-color: var(--outline-color-hover, rgba(59, 130, 246, 0.5));
+    outline-color: var(--outline-color-hover, ${EDITOR_COLORS.hover.half});
   }
 
   /* Selected state - uses CSS variable for dynamic color */
   .${EMAIL_BLOCK_CLASS_NAME}.is-selected {
-    outline-color: var(--outline-color, rgb(59, 130, 246));
+    outline-color: var(--outline-color, ${EDITOR_COLORS.hover.solid});
   }
 
   /* Drop target state - highlight section being dropped into */
   .${EMAIL_BLOCK_CLASS_NAME}.is-drop-target {
-    outline-color: rgb(147, 51, 234) !important;
+    outline-color: ${EDITOR_COLORS.drag.solid} !important;
   }
 
   /* Column selection in section-column - 50% opacity blue */
   .${EMAIL_BLOCK_CLASS_NAME}.is-column-selected {
-    outline-color: rgba(59, 130, 246, 0.5);
+    outline-color: ${EDITOR_COLORS.hover.half};
   }
 
   /* Column hover when child element is hovered - 50% opacity blue */
   .${EMAIL_BLOCK_CLASS_NAME}.is-column-hover-parent {
-    outline-color: rgba(59, 130, 246, 0.5);
+    outline-color: ${EDITOR_COLORS.hover.half};
   }
 
   /* Card selection in property-card-triple - 50% opacity blue */
   .${EMAIL_BLOCK_CLASS_NAME}.is-card-selected {
-    outline-color: rgba(59, 130, 246, 0.5);
+    outline-color: ${EDITOR_COLORS.hover.half};
   }
 
   /* Hide selection visual for configured elements (unless drag button hovered) */
@@ -3220,12 +3265,12 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
     outline-color: transparent !important;
   }
   .node-type-button.is-selected > table {
-    outline: 2px solid var(--outline-color, rgb(59, 130, 246));
+    outline: 2px solid var(--outline-color, ${EDITOR_COLORS.hover.solid});
     outline-offset: -2px;
     border-radius: 2px;
   }
   .node-type-button.is-hovered:not(.is-selected) > table {
-    outline: 2px solid var(--outline-color-hover, rgba(59, 130, 246, 0.5));
+    outline: 2px solid var(--outline-color-hover, ${EDITOR_COLORS.hover.half});
     outline-offset: -2px;
     border-radius: 2px;
   }
@@ -3238,12 +3283,12 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
     outline-color: transparent !important;
   }
   .node-type-image.is-selected table td {
-    outline: 2px solid var(--outline-color, rgb(59, 130, 246));
+    outline: 2px solid var(--outline-color, ${EDITOR_COLORS.hover.solid});
     outline-offset: -2px;
     border-radius: 2px;
   }
   .node-type-image.is-hovered:not(.is-selected) table td {
-    outline: 2px solid var(--outline-color-hover, rgba(59, 130, 246, 0.5));
+    outline: 2px solid var(--outline-color-hover, ${EDITOR_COLORS.hover.half});
     outline-offset: -2px;
     border-radius: 2px;
   }
@@ -3261,7 +3306,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   /* Drop indicator - uses CSS variable for dynamic color */
   .drop-indicator {
     position: absolute;
-    background-color: var(--outline-color, rgb(59, 130, 246));
+    background-color: var(--outline-color, ${EDITOR_COLORS.hover.solid});
     pointer-events: none;
     z-index: 1000;
   }
@@ -3572,8 +3617,8 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
     contentWrapper.className = "shadow-content";
     contentWrapper.innerHTML = html;
     contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
-    contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
-    contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
+    contentWrapper.style.setProperty("--outline-color", isDragging ? EDITOR_COLORS.drag.solid : EDITOR_COLORS.hover.solid);
+    contentWrapper.style.setProperty("--outline-color-hover", isDragging ? EDITOR_COLORS.drag.half : EDITOR_COLORS.hover.half);
     const template = useEditorStore.getState().template;
     const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
     contentWrapper.style.setProperty("--link-color", linkColor2);
@@ -3593,8 +3638,8 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
     if (!shadowRootRef.current) return;
     const contentWrapper = shadowRootRef.current.querySelector(".shadow-content");
     if (contentWrapper) {
-      contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
-      contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
+      contentWrapper.style.setProperty("--outline-color", isDragging ? EDITOR_COLORS.drag.solid : EDITOR_COLORS.hover.solid);
+      contentWrapper.style.setProperty("--outline-color-hover", isDragging ? EDITOR_COLORS.drag.half : EDITOR_COLORS.hover.half);
       contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
       const template = useEditorStore.getState().template;
       const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
@@ -3918,7 +3963,7 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
             const now = Date.now();
             if (now - lastSizeLimitToastTime > 2e3) {
               lastSizeLimitToastTime = now;
-              toast2.error("Template size limit reached");
+              useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached" });
             }
             return;
           }
@@ -3980,7 +4025,7 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
         const now = Date.now();
         if (now - lastSizeLimitToastTime > 2e3) {
           lastSizeLimitToastTime = now;
-          toast2.error("Template size limit reached");
+          useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached" });
         }
       }
     };
@@ -4054,11 +4099,11 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
             width: 3,
             height: dropIndicator.height
           },
-          backgroundColor: isDragging ? "rgb(147, 51, 234)" : "#3b82f6",
+          backgroundColor: isDragging ? EDITOR_COLORS.drag.solid : EDITOR_COLORS.hover.solid,
           borderRadius: 2,
           pointerEvents: "none",
           zIndex: 9999,
-          boxShadow: isDragging ? "0 0 4px rgba(147, 51, 234, 0.5)" : "0 0 4px rgba(59, 130, 246, 0.5)"
+          boxShadow: isDragging ? `0 0 4px ${EDITOR_COLORS.drag.half}` : `0 0 4px ${EDITOR_COLORS.hover.half}`
         },
         children: (dropIndicator.isNewSection || dropIndicator.isSplitSection) && /* @__PURE__ */ jsx(
           "div",
@@ -4068,7 +4113,7 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
               top: "50%",
               left: "50%",
               transform: "translate(-50%, -50%)",
-              backgroundColor: "rgb(147, 51, 234)",
+              backgroundColor: EDITOR_COLORS.drag.solid,
               color: "white",
               fontSize: 12,
               fontWeight: 600,
@@ -10998,9 +11043,6 @@ function checkElementPosition(template, elementIdx) {
   return { isFirstInFirstSection, isFirstInSectionColumn };
 }
 
-// src/core/editor/components/tiptap-overlay.tsx
-import { toast as toast3 } from "sonner";
-
 // src/components/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -11666,7 +11708,7 @@ var TiptapOverlay = () => {
   if (!textEditing) return null;
   return /* @__PURE__ */ jsx21(TiptapOverlayContent, { ...textEditing }, textEditing.idx);
 };
-var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight, clickX, clickY, content, styles, cursorPosition }) => {
+var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWidth, initialHeight, clickX, clickY, content, styles, cursorPosition }) => {
   const containerRef = useRef4(null);
   const setTiptapEditor = useEditorStore((s) => s.setTiptapEditor);
   const linkColor = useEditorStore((s) => s.template?.content?.[0]?.data?.value?.linkColor) || "#0000ff";
@@ -11681,6 +11723,24 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
       }
     };
   }, []);
+  useEffect6(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(() => {
+      const shadowEl = getShadowElement();
+      if (shadowEl) {
+        shadowEl.style.height = `${container.offsetHeight}px`;
+      }
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      const shadowEl = getShadowElement();
+      if (shadowEl) {
+        shadowEl.style.height = "";
+      }
+    };
+  }, [getShadowElement]);
   const cleanedContent = useMemo3(() => {
     return content.replace(NBSP_P_CONTENT_REGEX, "<p$1></p>").replace(IS_EMPTY_P_CLASS_REGEX, "").replace(IS_EMPTY_HEADING_CLASS_REGEX, "");
   }, [content]);
@@ -11741,7 +11801,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
             const now = Date.now();
             if (now - lastSizeLimitToastRef.current > 2e3) {
               lastSizeLimitToastRef.current = now;
-              toast3.error("Template size limit reached");
+              useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached" });
             }
             return true;
           }
@@ -11798,7 +11858,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
           const now = Date.now();
           if (now - lastSizeLimitToastRef.current > 2e3) {
             lastSizeLimitToastRef.current = now;
-            toast3.error("Template size limit reached - paste would exceed the limit");
+            useEditorStore.getState().onToast?.({ type: "error", message: "Template size limit reached - paste would exceed the limit" });
           }
           return true;
         }
@@ -12059,7 +12119,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, initialWidth, initialHeight
 };
 
 // src/core/editor/components/element-float.tsx
-import { useEffect as useEffect11, useMemo as useMemo10 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo11 } from "react";
 import { useFloating as useFloating4, offset as offset4, shift as shift3, flip as flip2, autoUpdate as autoUpdate3 } from "@floating-ui/react";
 
 // src/core/editor/components/float-ui/actions/delete-button.tsx
@@ -12113,7 +12173,7 @@ var DuplicateButton = () => {
 };
 
 // src/core/editor/components/href-menu.tsx
-import { useState as useState3, useEffect as useEffect7 } from "react";
+import { useState as useState3, useEffect as useEffect7, useCallback as useCallback4, useMemo as useMemo5 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -12290,19 +12350,36 @@ var useHref = () => {
 import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var HrefMenu = () => {
   const { href, setHref, clearHref, copyHref, hasHref } = useHref();
+  const userData = useEditorStore((s) => s.userData);
   const [isOpen, setIsOpen] = useState3(false);
   const [inputValue, setInputValue] = useState3("");
   const [showCopied, setShowCopied] = useState3(false);
   const [linkType, setLinkType] = useState3(LINK_TYPES[1]);
   const [isLinkTypeOpen, setIsLinkTypeOpen] = useState3(false);
+  const [isPresetOpen, setIsPresetOpen] = useState3(false);
+  console.log("userData", userData);
+  const availablePresets = useMemo5(() => {
+    const presetDefs = LINK_PRESETS[linkType.name] ?? [];
+    if (!userData) return [];
+    const all = presetDefs.filter((p) => userData[p.key]).map((p) => ({ ...p, value: String(userData[p.key]) }));
+    if (!inputValue) return all;
+    const query = inputValue.toLowerCase();
+    return all.filter((p) => p.value.toLowerCase().includes(query));
+  }, [linkType.name, userData, inputValue]);
+  const handlePresetSelect = useCallback4((value) => {
+    setInputValue(value);
+    setIsPresetOpen(false);
+  }, []);
   useEffect7(() => {
     if (isOpen) {
       setLinkType(detectLinkType(href));
       setInputValue(stripPrefix(href));
+      setIsPresetOpen(true);
     }
   }, [isOpen, href]);
   const handleInputChange = (e) => {
     setInputValue(e.target.value);
+    setIsPresetOpen(true);
   };
   const buildHref = (value) => {
     if (!value) return "";
@@ -12312,15 +12389,22 @@ var HrefMenu = () => {
     if (value.startsWith(linkType.prefix)) return value;
     return linkType.prefix + value;
   };
+  const handleInputClick = () => {
+    if (availablePresets.length > 0) {
+      setIsPresetOpen(true);
+    }
+  };
   const handleInputBlur = () => {
     setHref(buildHref(inputValue));
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       setHref(buildHref(inputValue));
+      setIsPresetOpen(false);
       setIsOpen(false);
     }
     if (e.key === "Escape") {
+      setIsPresetOpen(false);
       setIsOpen(false);
     }
   };
@@ -12363,55 +12447,85 @@ var HrefMenu = () => {
     /* @__PURE__ */ jsxs12(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
       /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx25(Label, { children: "Enter a link" }),
-        /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx25(
-            Input,
-            {
-              type: linkType.inputType,
-              placeholder: linkType.placeholder,
-              className: "w-full rounded-[12px] shadow-none pl-12 h-[44px]",
-              value: inputValue,
-              onChange: handleInputChange,
-              onBlur: handleInputBlur,
-              onKeyDown: handleKeyDown,
-              autoFocus: true
-            }
-          ),
-          /* @__PURE__ */ jsxs12(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
-            /* @__PURE__ */ jsxs12(Tooltip, { children: [
-              /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { size: "icon", variant: "ghost", className: "absolute shadow-none rounded-[12px] left-1.5 top-1/2 -translate-y-1/2 h-[34px] w-[34px] cursor-pointer", children: /* @__PURE__ */ jsx25(linkType.icon, {}) }) }) }),
-              /* @__PURE__ */ jsx25(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
-            ] }),
+        /* @__PURE__ */ jsxs12(Popover, { open: isPresetOpen && availablePresets.length > 0, onOpenChange: setIsPresetOpen, children: [
+          /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
             /* @__PURE__ */ jsx25(
-              PopoverContent,
+              Input,
               {
-                side: "bottom",
-                align: "start",
-                className: "w-[160px] p-1 z-50001",
-                onPointerDownOutside: (e) => e.preventDefault(),
-                children: LINK_TYPES.map((type) => /* @__PURE__ */ jsxs12(
-                  Button,
-                  {
-                    variant: "ghost",
-                    className: "w-full justify-between shadow-none cursor-pointer",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      setLinkType(type);
-                      setIsLinkTypeOpen(false);
+                type: linkType.inputType,
+                placeholder: linkType.placeholder,
+                className: "w-full rounded-[12px] shadow-none pl-12 h-[44px]",
+                value: inputValue,
+                onChange: handleInputChange,
+                onClick: handleInputClick,
+                onBlur: handleInputBlur,
+                onKeyDown: handleKeyDown,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsxs12(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
+              /* @__PURE__ */ jsxs12(Tooltip, { children: [
+                /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { size: "icon", variant: "ghost", className: "absolute shadow-none rounded-[12px] left-1.5 top-1/2 -translate-y-1/2 h-[34px] w-[34px] cursor-pointer", children: /* @__PURE__ */ jsx25(linkType.icon, {}) }) }) }),
+                /* @__PURE__ */ jsx25(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
+              ] }),
+              /* @__PURE__ */ jsx25(
+                PopoverContent,
+                {
+                  side: "bottom",
+                  align: "start",
+                  className: "w-[160px] p-1 z-50001",
+                  onPointerDownOutside: (e) => e.preventDefault(),
+                  children: LINK_TYPES.map((type) => /* @__PURE__ */ jsxs12(
+                    Button,
+                    {
+                      variant: "ghost",
+                      className: "w-full justify-between shadow-none cursor-pointer",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setLinkType(type);
+                        setIsLinkTypeOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx25(type.icon, { className: "size-4" }),
+                          type.name
+                        ] }),
+                        linkType.name === type.name && /* @__PURE__ */ jsx25(CheckIcon3, { className: "size-4" })
+                      ]
                     },
-                    children: [
-                      /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsx25(type.icon, { className: "size-4" }),
-                        type.name
-                      ] }),
-                      linkType.name === type.name && /* @__PURE__ */ jsx25(CheckIcon3, { className: "size-4" })
-                    ]
+                    type.name
+                  ))
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx25(
+            PopoverContent,
+            {
+              side: "bottom",
+              align: "start",
+              className: "w-[var(--radix-popover-trigger-width)] p-0 overflow-hidden z-50001",
+              onOpenAutoFocus: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx25("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: availablePresets.map((preset) => /* @__PURE__ */ jsxs12(
+                "button",
+                {
+                  className: `flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer ${inputValue === preset.value ? "bg-accent font-medium" : ""}`,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    handlePresetSelect(preset.value);
                   },
-                  type.name
-                ))
-              }
-            )
-          ] })
+                  children: [
+                    /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-start gap-0.5", children: [
+                      /* @__PURE__ */ jsx25("span", { className: "text-xs text-muted-foreground", children: preset.label }),
+                      /* @__PURE__ */ jsx25("span", { className: "text-sm", children: preset.value })
+                    ] }),
+                    inputValue === preset.value && /* @__PURE__ */ jsx25(CheckIcon3, { className: "w-4 h-4 shrink-0" })
+                  ]
+                },
+                preset.key
+              )) })
+            }
+          )
         ] })
       ] }),
       /* @__PURE__ */ jsx25(Separator, { className: "my-2" }),
@@ -12476,11 +12590,11 @@ var ButtonFloat = () => {
 import { ChevronsLeftRightIcon, ChevronsRightLeftIcon, MoreHorizontalIcon } from "lucide-react";
 
 // src/core/editor/hooks/use-full-width-toggle.ts
-import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
 import { get as lodashGet3 } from "lodash";
 function useFullWidthToggle() {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const { element, isFullWidth } = useMemo5(() => {
+  const { element, isFullWidth } = useMemo6(() => {
     if (!focusIdx || !template) return { element: null, isFullWidth: false };
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const el = lodashGet3(template, path);
@@ -12489,7 +12603,7 @@ function useFullWidthToggle() {
       isFullWidth: el?.attributes?.["full-width"] === "full-width"
     };
   }, [focusIdx, template]);
-  const handleToggleFullWidth = useCallback4(() => {
+  const handleToggleFullWidth = useCallback5(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     if (isFullWidth) {
@@ -12526,11 +12640,11 @@ 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 useCallback5, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
 import { get as lodashGet4 } from "lodash";
 function useNoWrap() {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const { element, noWrap } = useMemo6(() => {
+  const { element, noWrap } = useMemo7(() => {
     if (!focusIdx || !template) return { element: null, noWrap: false };
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const el = lodashGet4(template, path);
@@ -12539,7 +12653,7 @@ function useNoWrap() {
       noWrap: el?.data?.value?.noWrap === true
     };
   }, [focusIdx, template]);
-  const handleToggleNoWrap = useCallback5(() => {
+  const handleToggleNoWrap = useCallback6(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       data: {
@@ -12670,7 +12784,7 @@ import { Accessibility, MoreHorizontalIcon as MoreHorizontalIcon4, TrashIcon as
 import { useState as useState6, useEffect as useEffect9 } from "react";
 
 // src/core/editor/components/social-item-menu.tsx
-import { useState as useState5, useEffect as useEffect8, useMemo as useMemo7, useCallback as useCallback6 } from "react";
+import { useState as useState5, useEffect as useEffect8, useMemo as useMemo8, useCallback as useCallback7 } from "react";
 import { PencilIcon as PencilIcon3, CheckIcon as CheckIcon5, CopyIcon as CopyIcon4 } from "lucide-react";
 import { get as lodashGet5 } from "lodash";
 import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -12681,7 +12795,7 @@ var SocialItemMenu = ({ hasHref }) => {
   const [contentInputValue, setContentInputValue] = useState5("");
   const { href, setHref, copyHref } = useHref();
   const { focusIdx, template, updateElement } = useEditorStore();
-  const element = useMemo7(() => {
+  const element = useMemo8(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.?\[(\d+)\]/g, "[$1]") : focusIdx;
     return lodashGet5(template, path);
@@ -12693,12 +12807,12 @@ var SocialItemMenu = ({ hasHref }) => {
       setContentInputValue(content);
     }
   }, [isOpen, href, content]);
-  const handleCopy = useCallback6(async () => {
+  const handleCopy = useCallback7(async () => {
     await copyHref();
     setShowCopied(true);
     setTimeout(() => setShowCopied(false), 2e3);
   }, [copyHref]);
-  const handleDone = useCallback6(() => {
+  const handleDone = useCallback7(() => {
     setHref(normalizeWebsiteUrl(hrefInputValue));
     if (focusIdx && element) {
       updateElement(focusIdx, {
@@ -12794,11 +12908,11 @@ var SocialItemMenu = ({ hasHref }) => {
 };
 
 // src/core/editor/hooks/use-alt.ts
-import { useMemo as useMemo8, useCallback as useCallback7 } from "react";
+import { useMemo as useMemo9, useCallback as useCallback8 } from "react";
 import { get as lodashGet6 } from "lodash";
 var useAlt = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const { element, alt } = useMemo8(() => {
+  const { element, alt } = useMemo9(() => {
     if (!focusIdx || !template) {
       return { element: null, alt: "" };
     }
@@ -12809,13 +12923,13 @@ var useAlt = () => {
       alt: el?.attributes?.alt || ""
     };
   }, [focusIdx, template]);
-  const setAlt = useCallback7((text2) => {
+  const setAlt = useCallback8((text2) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, alt: text2 }
     });
   }, [focusIdx, element, updateElement]);
-  const clearAlt = useCallback7(() => {
+  const clearAlt = useCallback8(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, alt: "" }
@@ -12929,7 +13043,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 useState7, useEffect as useEffect10, useMemo as useMemo9, useCallback as useCallback8 } from "react";
+import { useState as useState7, useEffect as useEffect10, useMemo as useMemo10, useCallback as useCallback9 } from "react";
 import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var ImageFloat = () => {
   const { href, hasHref } = useHref();
@@ -12938,7 +13052,7 @@ var ImageFloat = () => {
   const [showMoreView, setShowMoreView] = useState7(null);
   const [dropdownOpen, setDropdownOpen] = useState7(false);
   const [altInputValue, setAltInputValue] = useState7("");
-  const { element, isFluidOnMobile } = useMemo9(() => {
+  const { element, isFluidOnMobile } = useMemo10(() => {
     if (!focusIdx || !template) return { element: null, isFluidOnMobile: false };
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const el = lodashGet7(template, path);
@@ -12947,7 +13061,7 @@ var ImageFloat = () => {
       isFluidOnMobile: el?.attributes?.["fluid-on-mobile"] === "true"
     };
   }, [focusIdx, template]);
-  const toggleFluidOnMobile = useCallback8(() => {
+  const toggleFluidOnMobile = useCallback9(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     if (isFluidOnMobile) {
@@ -13027,34 +13141,253 @@ var ImageFloat = () => {
   ] });
 };
 
-// src/core/editor/components/element-gear/property/float.tsx
+// src/core/editor/components/mlsNumber-menu.tsx
+import { useState as useState8, useEffect as useEffect11 } from "react";
+import { HousePlusIcon, TrashIcon as TrashIcon5, XIcon as XIcon2, Loader2Icon } from "lucide-react";
+
+// src/services/repliers/commands.ts
+async function getListingByMlsNumber(mlsNumber) {
+  const response = await fetch(`/api/mcommends/repliers/getListingByMlsNumber/${mlsNumber}`, {
+    method: "GET",
+    headers: {
+      "accept": "application/json"
+    }
+  });
+  const data = await response.json();
+  return data;
+}
+
+// src/core/editor/components/mlsNumber-menu.tsx
 import { Fragment as Fragment14, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var MlsNumberMenu = () => {
+  const { focusIdx, template, updateElement, onToast } = useEditorStore();
+  const [isOpen, setIsOpen] = useState8(false);
+  const [inputValue, setInputValue] = useState8("");
+  const [propertyData, setPropertyData] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const propertyElement = focusIdx && template ? getValueByIdx(template, focusIdx) : null;
+  const currentMlsNumber = propertyElement?.data?.value?.mlsNumber || "";
+  useEffect11(() => {
+    setInputValue(currentMlsNumber);
+    setPropertyData(null);
+  }, [focusIdx, currentMlsNumber]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleDone();
+    }
+    if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  const handleClear = () => {
+    setInputValue("");
+    setPropertyData(null);
+  };
+  const handleClearPreview = () => {
+    setPropertyData(null);
+  };
+  const handleApplyToCard = () => {
+    if (!focusIdx || !propertyElement || !propertyData) return;
+    console.log(propertyData);
+    const imageUrl = propertyData.images?.[0] ? `https://cdn.repliers.io/${propertyData.images[0]}` : propertyElement.attributes?.["image-src"];
+    updateElement(focusIdx, {
+      data: {
+        value: {
+          ...propertyElement.data?.value,
+          mlsNumber: propertyData.mlsNumber
+        }
+      },
+      attributes: {
+        ...propertyElement.attributes,
+        "image-src": imageUrl,
+        "price": String(propertyData.listPrice || 0),
+        "address": `${propertyData.address?.streetNumber || ""} ${propertyData.address?.streetName || ""}`.trim(),
+        "city": `${propertyData.address?.city || ""}, ${propertyData.address?.state || ""} ${propertyData.address?.zip || ""}`.trim(),
+        "beds": String(propertyData.details?.numBedrooms || "--"),
+        "baths": String(propertyData.details?.numBathrooms || "--"),
+        "sqft": String(propertyData.details?.sqft || "--"),
+        "status": propertyData.standardStatus || propertyData.status || "Active",
+        "brokerage": propertyData.office?.brokerageName || ""
+      }
+    });
+    setPropertyData(null);
+    setIsOpen(false);
+  };
+  const handleDone = async () => {
+    if (inputValue.trim()) {
+      setIsLoading(true);
+      try {
+        const data = await getListingByMlsNumber(inputValue.trim());
+        if (data.error) {
+          onToast?.({ type: "error", message: data.error });
+          return;
+        }
+        setPropertyData(data);
+      } catch (error) {
+        console.warn("Failed to fetch listing:", error);
+        const message = error instanceof Error ? error.message : "Failed to fetch listing";
+        onToast?.({ type: "error", message });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs22(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs22(Tooltip, { children: [
+      /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
+        Button,
+        {
+          variant: "ghost",
+          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+          children: [
+            /* @__PURE__ */ jsx37(HousePlusIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx37("p", { children: "MLS" })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "Enter MLS Number" })
+    ] }),
+    /* @__PURE__ */ jsxs22(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx37(Label, { children: "Enter MLS Number" }),
+        /* @__PURE__ */ jsx37(
+          Input,
+          {
+            type: "text",
+            placeholder: "e.g., W1234567",
+            className: "w-full rounded-[12px] shadow-none h-[44px]",
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx37(Separator, { className: "my-2" }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx37("div", { className: "flex flex-row", children: /* @__PURE__ */ jsxs22(Tooltip, { children: [
+          /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
+              onClick: handleClear,
+              disabled: !inputValue,
+              children: /* @__PURE__ */ jsx37(TrashIcon5, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", className: "z-50001", children: "Clear" })
+        ] }) }),
+        /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(
+          Button,
+          {
+            variant: "default",
+            className: "shadow-none transition-none cursor-pointer rounded-[12px] outline-none",
+            onClick: handleDone,
+            disabled: isLoading || !inputValue.trim(),
+            children: isLoading ? /* @__PURE__ */ jsx37(Loader2Icon, { className: "size-4 animate-spin" }) : "Done"
+          }
+        ) })
+      ] }),
+      propertyData && /* @__PURE__ */ jsxs22(Fragment14, { children: [
+        /* @__PURE__ */ jsx37(Separator, { className: "my-2" }),
+        /* @__PURE__ */ jsxs22("div", { className: "rounded-[12px] border overflow-hidden bg-card", children: [
+          /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx37(
+              "img",
+              {
+                src: `https://cdn.repliers.io/${propertyData.images?.[0]}`,
+                alt: "Property",
+                className: "w-full h-[120px] object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx37(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "absolute top-1 right-1 h-6 w-6 bg-black/50 hover:bg-black/70 rounded-full",
+                onClick: handleClearPreview,
+                children: /* @__PURE__ */ jsx37(XIcon2, { className: "size-3 text-white" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs22("div", { className: "p-2 flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx37("span", { className: "font-semibold text-sm", children: formatPrice(String(propertyData.listPrice || 0)) }),
+              /* @__PURE__ */ jsx37("span", { className: "text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700", children: propertyData.standardStatus || propertyData.status })
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "text-sm", children: [
+              propertyData.address?.streetNumber,
+              " ",
+              propertyData.address?.streetName
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground", children: [
+              propertyData.address?.city,
+              ", ",
+              propertyData.address?.state,
+              " ",
+              propertyData.address?.zip
+            ] }),
+            /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground", children: [
+              propertyData.details?.numBedrooms,
+              " bd | ",
+              propertyData.details?.numBathrooms,
+              " ba | ",
+              formatNumber(String(propertyData.details?.sqft || "--")),
+              " sf"
+            ] }),
+            propertyData.office?.brokerageName && /* @__PURE__ */ jsx37("div", { className: "text-xs text-muted-foreground truncate", children: propertyData.office.brokerageName }),
+            /* @__PURE__ */ jsx37(
+              Button,
+              {
+                variant: "default",
+                size: "sm",
+                className: "w-full mt-2 rounded-[12px]",
+                onClick: handleApplyToCard,
+                children: "Apply to Card"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/core/editor/components/element-gear/property/float.tsx
+import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 function PropertyFloat() {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs22(Fragment14, { children: [
-    hasHref && /* @__PURE__ */ jsx37(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx37(HrefMenu, {})
+  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
+    hasHref && /* @__PURE__ */ jsx38(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx38(HrefMenu, {}),
+    /* @__PURE__ */ jsx38(MlsNumberMenu, {})
   ] });
 }
 
 // src/core/editor/components/element-gear/property/triple/float.tsx
-import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var PropertyTripleItemFloat = () => {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
-    hasHref && /* @__PURE__ */ jsx38(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx38(HrefMenu, {})
+  return /* @__PURE__ */ jsxs24(Fragment16, { children: [
+    hasHref && /* @__PURE__ */ jsx39(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx39(HrefMenu, {})
   ] });
 };
 
 // src/core/editor/components/float-ui/container.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var FloatUIContainer = ({ ref, style, className, children }) => {
-  return /* @__PURE__ */ jsx39("div", { ref, style, className, children });
+  return /* @__PURE__ */ jsx40("div", { ref, style, className, children });
 };
 
 // src/core/editor/components/element-float.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FLOAT_COMPONENTS = {
   "button": ButtonFloat,
   "section": SectionFloat,
@@ -13078,7 +13411,7 @@ var ElementFloat = ({ getReferenceRect, focusIdx, elementType }) => {
   if (!focusIdx || isDragging || textEditing) return null;
   const FloatComponent = FLOAT_COMPONENTS[elementType];
   if (!FloatComponent) return null;
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     ElementFloatContent,
     {
       getReferenceRect,
@@ -13087,7 +13420,7 @@ var ElementFloat = ({ getReferenceRect, focusIdx, elementType }) => {
   );
 };
 var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
-  const virtualReference = useMemo10(() => ({
+  const virtualReference = useMemo11(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13107,7 +13440,7 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
       // Keep within viewport
     ]
   });
-  useEffect11(() => {
+  useEffect12(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13122,18 +13455,18 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
     );
     return cleanup;
   }, [getReferenceRect, refs, update, virtualReference]);
-  return /* @__PURE__ */ jsx40(FloatUIContainer, { ref: refs.setFloating, style: floatingStyles, className: "bg-white flex items-center justify-center border border-1 h-[36px] w-fit shadow-md rounded-full  z-50", children: /* @__PURE__ */ jsx40(FloatComponent, {}) });
+  return /* @__PURE__ */ jsx41(FloatUIContainer, { ref: refs.setFloating, style: floatingStyles, className: "bg-white flex items-center justify-center border border-1 h-[36px] w-fit shadow-md rounded-full  z-50", children: /* @__PURE__ */ jsx41(FloatComponent, {}) });
 };
 
 // src/core/editor/components/scaling/divider-scale.tsx
-import { useMemo as useMemo11, useEffect as useEffect12, useState as useState8, useRef as useRef5, useCallback as useCallback10 } from "react";
+import { useMemo as useMemo12, useEffect as useEffect13, useState as useState9, useRef as useRef5, useCallback as useCallback11 } from "react";
 import { useFloating as useFloating5, offset as offset5, autoUpdate as autoUpdate4 } from "@floating-ui/react";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var DividerScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState8({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState8(null);
+  const [dimensions, setDimensions] = useState9({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState9(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
-  const { currentWidth, currentAlign } = useMemo11(() => {
+  const { currentWidth, currentAlign } = useMemo12(() => {
     if (!focusIdx || !template) return { currentWidth: 100, currentAlign: "center" };
     const element = getValueByIdx(template, focusIdx);
     const rawWidth = element?.attributes?.width;
@@ -13143,12 +13476,12 @@ var DividerScale = ({ getReferenceRect }) => {
     return { currentWidth: width, currentAlign: align };
   }, [focusIdx, template]);
   const dragRef = useRef5(null);
-  const getContainerWidth = useCallback10(() => {
+  const getContainerWidth = useCallback11(() => {
     const rect = getReferenceRect();
     if (!rect || currentWidth <= 0) return null;
     return rect.width / (currentWidth / 100);
   }, [getReferenceRect, currentWidth]);
-  const handlePointerDown = useCallback10((e, side) => {
+  const handlePointerDown = useCallback11((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     const containerWidth = getContainerWidth();
@@ -13166,7 +13499,7 @@ var DividerScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getContainerWidth, currentWidth, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback10((e) => {
+  const handlePointerMove = useCallback11((e) => {
     if (!dragRef.current) return;
     const { startX, startWidth, containerWidth, side, align } = dragRef.current;
     const deltaX = e.clientX - startX;
@@ -13186,20 +13519,20 @@ var DividerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback10(() => {
+  const handlePointerUp = useCallback11(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect12(() => {
+  useEffect13(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo11(() => ({
+  const virtualReference = useMemo12(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13214,7 +13547,7 @@ var DividerScale = ({ getReferenceRect }) => {
       offset5(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect12(() => {
+  useEffect13(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13241,7 +13574,7 @@ var DividerScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const showLeftHandle = currentAlign !== "left";
   const showRightHandle = currentAlign !== "right";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ref: refs.setFloating,
@@ -13253,14 +13586,14 @@ var DividerScale = ({ getReferenceRect }) => {
       },
       className: "relative flex flex-row items-center justify-between",
       children: [
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx41(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx42(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
             className: `w-[18px] h-[18px] cursor-ew-resize bg-background shadow-md border rounded-full absolute -left-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "left" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx41(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx42(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
@@ -13273,14 +13606,14 @@ var DividerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/button-scale.tsx
-import { useMemo as useMemo12, useEffect as useEffect13, useState as useState9, useRef as useRef6, useCallback as useCallback11 } from "react";
+import { useMemo as useMemo13, useEffect as useEffect14, useState as useState10, useRef as useRef6, useCallback as useCallback12 } from "react";
 import { useFloating as useFloating6, offset as offset6, autoUpdate as autoUpdate5 } from "@floating-ui/react";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var ButtonScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState9({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState9(null);
+  const [dimensions, setDimensions] = useState10({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState10(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
-  const { currentWidth, currentHeight, currentAlign } = useMemo12(() => {
+  const { currentWidth, currentHeight, currentAlign } = useMemo13(() => {
     if (!focusIdx || !template) {
       return { currentWidth: 24, currentHeight: 44, currentAlign: "center" };
     }
@@ -13295,12 +13628,12 @@ var ButtonScale = ({ getReferenceRect }) => {
     return { currentWidth: width, currentHeight: height, currentAlign: align };
   }, [focusIdx, template]);
   const dragRef = useRef6(null);
-  const getContainerWidth = useCallback11(() => {
+  const getContainerWidth = useCallback12(() => {
     const rect = getReferenceRect();
     if (!rect || currentWidth <= 0) return null;
     return rect.width / (currentWidth / 100);
   }, [getReferenceRect, currentWidth]);
-  const handlePointerDown = useCallback11((e, side) => {
+  const handlePointerDown = useCallback12((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13322,7 +13655,7 @@ var ButtonScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getContainerWidth, currentWidth, currentHeight, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback11((e) => {
+  const handlePointerMove = useCallback12((e) => {
     if (!dragRef.current) return;
     const { startX, startY, startWidth, startHeight, containerWidth, side, align } = dragRef.current;
     const state = useEditorStore.getState();
@@ -13354,20 +13687,20 @@ var ButtonScale = ({ getReferenceRect }) => {
       });
     }
   }, []);
-  const handlePointerUp = useCallback11(() => {
+  const handlePointerUp = useCallback12(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo12(() => ({
+  const virtualReference = useMemo13(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13382,7 +13715,7 @@ var ButtonScale = ({ getReferenceRect }) => {
       offset6(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect13(() => {
+  useEffect14(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13411,7 +13744,7 @@ var ButtonScale = ({ getReferenceRect }) => {
   const showRightHandle = currentAlign !== "right";
   const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: refs.setFloating,
@@ -13423,28 +13756,28 @@ var ButtonScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx42(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "top"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -top-[4px] ${getHandleActiveClass("top")}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx42(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
             className: `w-[8px] h-[18px] cursor-ew-resize ${handleBaseClass} top-1/2 -translate-y-1/2 -right-[4px] ${getHandleActiveClass("right")}`
           }
         ),
-        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx42(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -bottom-[4px] ${getHandleActiveClass("bottom")}`
           }
         ),
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx42(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
@@ -13457,14 +13790,14 @@ var ButtonScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/image-scale.tsx
-import { useMemo as useMemo13, useEffect as useEffect14, useState as useState10, useRef as useRef7, useCallback as useCallback12 } from "react";
+import { useMemo as useMemo14, useEffect as useEffect15, useState as useState11, useRef as useRef7, useCallback as useCallback13 } from "react";
 import { useFloating as useFloating7, offset as offset7, autoUpdate as autoUpdate6 } from "@floating-ui/react";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var ImageScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState10({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState10(null);
+  const [dimensions, setDimensions] = useState11({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState11(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
-  const { currentWidth, currentHeight, currentAlign } = useMemo13(() => {
+  const { currentWidth, currentHeight, currentAlign } = useMemo14(() => {
     if (!focusIdx || !template) {
       return { currentWidth: 0, currentHeight: 0, currentAlign: "center" };
     }
@@ -13479,7 +13812,7 @@ var ImageScale = ({ getReferenceRect }) => {
     return { currentWidth: width, currentHeight: height, currentAlign: align };
   }, [focusIdx, template]);
   const dragRef = useRef7(null);
-  const handlePointerDown = useCallback12((e, side) => {
+  const handlePointerDown = useCallback13((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13502,7 +13835,7 @@ var ImageScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getReferenceRect, currentWidth, currentHeight, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback12((e) => {
+  const handlePointerMove = useCallback13((e) => {
     if (!dragRef.current) return;
     const { startX, startY, startWidth, startHeight, side, align } = dragRef.current;
     const state = useEditorStore.getState();
@@ -13533,20 +13866,20 @@ var ImageScale = ({ getReferenceRect }) => {
       });
     }
   }, []);
-  const handlePointerUp = useCallback12(() => {
+  const handlePointerUp = useCallback13(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo13(() => ({
+  const virtualReference = useMemo14(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13561,7 +13894,7 @@ var ImageScale = ({ getReferenceRect }) => {
       offset7(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect14(() => {
+  useEffect15(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13590,7 +13923,7 @@ var ImageScale = ({ getReferenceRect }) => {
   const showRightHandle = currentAlign !== "right";
   const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: refs.setFloating,
@@ -13602,28 +13935,28 @@ var ImageScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx43(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "top"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -top-[4px] ${getHandleActiveClass("top")}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx43(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
             className: `w-[8px] h-[18px] cursor-ew-resize ${handleBaseClass} top-1/2 -translate-y-1/2 -right-[4px] ${getHandleActiveClass("right")}`
           }
         ),
-        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx43(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -bottom-[4px] ${getHandleActiveClass("bottom")}`
           }
         ),
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx43(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx44(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
@@ -13636,14 +13969,14 @@ var ImageScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/spacer-scale.tsx
-import { useMemo as useMemo14, useEffect as useEffect15, useState as useState11, useRef as useRef8, useCallback as useCallback13 } from "react";
+import { useMemo as useMemo15, useEffect as useEffect16, useState as useState12, useRef as useRef8, useCallback as useCallback14 } from "react";
 import { useFloating as useFloating8, offset as offset8, autoUpdate as autoUpdate7 } from "@floating-ui/react";
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var SpacerScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState11({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState11(null);
+  const [dimensions, setDimensions] = useState12({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState12(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
-  const currentHeight = useMemo14(() => {
+  const currentHeight = useMemo15(() => {
     if (!focusIdx || !template) return 12;
     const element = getValueByIdx(template, focusIdx);
     const rawHeight = element?.attributes?.height;
@@ -13651,7 +13984,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     return isNaN(parsedHeight) ? 12 : Math.max(12, Math.min(200, parsedHeight));
   }, [focusIdx, template]);
   const dragRef = useRef8(null);
-  const handlePointerDown = useCallback13((e, side) => {
+  const handlePointerDown = useCallback14((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13667,7 +14000,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [currentHeight, setIsScaling]);
-  const handlePointerMove = useCallback13((e) => {
+  const handlePointerMove = useCallback14((e) => {
     if (!dragRef.current) return;
     const { startY, startHeight, side } = dragRef.current;
     const state = useEditorStore.getState();
@@ -13685,20 +14018,20 @@ var SpacerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback13(() => {
+  const handlePointerUp = useCallback14(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect15(() => {
+  useEffect16(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo14(() => ({
+  const virtualReference = useMemo15(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13713,7 +14046,7 @@ var SpacerScale = ({ getReferenceRect }) => {
       offset8(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect15(() => {
+  useEffect16(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13740,7 +14073,7 @@ var SpacerScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ref: refs.setFloating,
@@ -13752,14 +14085,14 @@ var SpacerScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx44(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx45(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "top"),
             className: `w-[18px] h-[8px] cursor-ns-resize ${handleBaseClass} left-1/2 -translate-x-1/2 -top-[4px] ${getHandleActiveClass("top")}`
           }
         ),
-        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx44(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx45(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
@@ -13772,19 +14105,19 @@ var SpacerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/column-scale.tsx
-import { useMemo as useMemo15, useEffect as useEffect16, useState as useState12, useRef as useRef9, useCallback as useCallback14 } from "react";
-import { Fragment as Fragment16, jsx as jsx45 } from "react/jsx-runtime";
+import { useMemo as useMemo16, useEffect as useEffect17, useState as useState13, useRef as useRef9, useCallback as useCallback15 } from "react";
+import { Fragment as Fragment17, jsx as jsx46 } from "react/jsx-runtime";
 var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
-  const [activeDivider, setActiveDivider] = useState12(null);
-  const [columnRects, setColumnRects] = useState12([]);
+  const [activeDivider, setActiveDivider] = useState13(null);
+  const [columnRects, setColumnRects] = useState13([]);
   const { template, setIsScaling, setFocusIdx, stopTextEditing } = useEditorStore();
-  const columnWidths = useMemo15(() => {
+  const columnWidths = useMemo16(() => {
     if (!template) return [];
     const sectionColumn = getValueByIdx(template, sectionColumnIdx);
     return sectionColumn?.data?.value?.columnWidths || [];
   }, [template, sectionColumnIdx]);
   const dragRef = useRef9(null);
-  const updateColumnRects = useCallback14(() => {
+  const updateColumnRects = useCallback15(() => {
     if (!shadowRoot) return;
     const allColumns = shadowRoot.querySelectorAll(".node-type-column");
     const matchingColumns = [];
@@ -13816,7 +14149,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     });
     setColumnRects(rects);
   }, [shadowRoot, sectionColumnIdx]);
-  useEffect16(() => {
+  useEffect17(() => {
     updateColumnRects();
     let animationId;
     const updateLoop = () => {
@@ -13829,7 +14162,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   const parseWidth = (width) => {
     return parseFloat(width.replace("%", ""));
   };
-  const handlePointerDown = useCallback14((e, dividerIndex) => {
+  const handlePointerDown = useCallback15((e, dividerIndex) => {
     e.preventDefault();
     e.stopPropagation();
     stopTextEditing();
@@ -13855,7 +14188,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [columnRects, columnWidths, setIsScaling]);
-  const handlePointerMove = useCallback14((e) => {
+  const handlePointerMove = useCallback15((e) => {
     if (!dragRef.current) return;
     const { startX, leftColIndex, rightColIndex, startLeftWidth, startRightWidth, sectionWidth, allWidths } = dragRef.current;
     const deltaX = e.clientX - startX;
@@ -13889,14 +14222,14 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
       }
     });
   }, [sectionColumnIdx]);
-  const handlePointerUp = useCallback14(() => {
+  const handlePointerUp = useCallback15(() => {
     setActiveDivider(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect16(() => {
+  useEffect17(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -13907,7 +14240,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   }
   const handleBaseClass = "bg-background shadow-md border rounded-full touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (index) => activeDivider === index ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
-  return /* @__PURE__ */ jsx45(Fragment16, { children: columnRects.slice(0, -1).map((rect, index) => {
+  return /* @__PURE__ */ jsx46(Fragment17, { children: columnRects.slice(0, -1).map((rect, index) => {
     const nextRect = columnRects[index + 1];
     const handleLeft = rect.right;
     const handleTop = Math.min(rect.top, nextRect.top);
@@ -13915,7 +14248,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     if (activeDivider !== null && activeDivider !== index) {
       return null;
     }
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         onPointerDown: (e) => handlePointerDown(e, index),
@@ -13935,9 +14268,9 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
 };
 
 // src/core/editor/hooks/use-undo-redo-keyboard.ts
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 function useUndoRedoKeyboard() {
-  useEffect17(() => {
+  useEffect18(() => {
     const handler = (e) => {
       const isMeta = e.metaKey || e.ctrlKey;
       if (!isMeta || e.key.toLowerCase() !== "z") return;
@@ -13958,11 +14291,11 @@ function useUndoRedoKeyboard() {
 }
 
 // src/components/ui/spinner.tsx
-import { Loader2Icon } from "lucide-react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { Loader2Icon as Loader2Icon2 } from "lucide-react";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx46(
-    Loader2Icon,
+  return /* @__PURE__ */ jsx47(
+    Loader2Icon2,
     {
       role: "status",
       "aria-label": "Loading",
@@ -13976,7 +14309,7 @@ function Spinner({ className, ...props }) {
 import { EyeIcon } from "lucide-react";
 
 // src/render/useMjmlCompiler.ts
-import { useState as useState13, useCallback as useCallback15 } from "react";
+import { useState as useState14, useCallback as useCallback16 } from "react";
 async function compileMjml(mjml) {
   console.log("Compiling MJML", mjml);
   const response = await fetch("/api/mrender", {
@@ -13993,14 +14326,14 @@ async function compileMjml(mjml) {
 }
 
 // src/core/editor/components/preview.tsx
-import { useEffect as useEffect18, useState as useState14, useRef as useRef10 } from "react";
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useState as useState15, useRef as useRef10 } from "react";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 function Preview() {
   const { template, setPreviewMode, previewMode, isPaidLevel } = useEditorStore();
-  const [html, setHtml] = useState14("");
-  const [isLoading, setIsLoading] = useState14(false);
+  const [html, setHtml] = useState15("");
+  const [isLoading, setIsLoading] = useState15(false);
   const lastTemplateRef = useRef10("");
-  useEffect18(() => {
+  useEffect19(() => {
     if (typeof window === "undefined" || !previewMode) {
       if (!previewMode) {
         setHtml("");
@@ -14033,37 +14366,37 @@ function Preview() {
     };
     convertMjml();
   }, [template, previewMode]);
-  return /* @__PURE__ */ jsxs28(Dialog, { open: previewMode, onOpenChange: setPreviewMode, children: [
-    /* @__PURE__ */ jsxs28(Tooltip, { children: [
-      /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs29(Dialog, { open: previewMode, onOpenChange: setPreviewMode, children: [
+    /* @__PURE__ */ jsxs29(Tooltip, { children: [
+      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: () => setPreviewMode(true),
-          children: /* @__PURE__ */ jsx47(EyeIcon, {})
+          children: /* @__PURE__ */ jsx48(EyeIcon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", className: "z-51", children: "Preview" })
+      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", className: "z-51", children: "Preview" })
     ] }),
-    /* @__PURE__ */ jsxs28(DialogContent, { className: "max-w-[1200px] sm:max-w-[1200px]", children: [
-      /* @__PURE__ */ jsx47(DialogTitle, { children: "Preview" }),
-      /* @__PURE__ */ jsx47("div", { className: "w-full h-full max-h-[600px]", children: isLoading ? /* @__PURE__ */ jsx47("div", { className: "flex items-center justify-center h-[600px]", children: /* @__PURE__ */ jsx47("p", { children: "Generating preview..." }) }) : /* @__PURE__ */ jsx47("iframe", { srcDoc: html, className: "w-full h-[600px]" }) })
+    /* @__PURE__ */ jsxs29(DialogContent, { className: "max-w-[1200px] sm:max-w-[1200px]", children: [
+      /* @__PURE__ */ jsx48(DialogTitle, { children: "Preview" }),
+      /* @__PURE__ */ jsx48("div", { className: "w-full h-full max-h-[600px]", children: isLoading ? /* @__PURE__ */ jsx48("div", { className: "flex items-center justify-center h-[600px]", children: /* @__PURE__ */ jsx48("p", { children: "Generating preview..." }) }) : /* @__PURE__ */ jsx48("iframe", { srcDoc: html, className: "w-full h-[600px]" }) })
     ] })
   ] });
 }
 
 // src/core/editor/components/history.tsx
 import { Redo2Icon, Undo2Icon } from "lucide-react";
-import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
 var History = () => {
   const { undo, redo } = useEditorStore();
   const canUndo = useEditorStore((s) => s.historyIndex > 0);
   const canRedo = useEditorStore((s) => s.historyIndex < s.history.length - 1);
-  return /* @__PURE__ */ jsxs29(Fragment17, { children: [
-    /* @__PURE__ */ jsxs29(Tooltip, { children: [
-      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs30(Fragment18, { children: [
+    /* @__PURE__ */ jsxs30(Tooltip, { children: [
+      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "ghost",
@@ -14071,13 +14404,13 @@ var History = () => {
           size: "icon",
           disabled: !canUndo,
           onClick: undo,
-          children: /* @__PURE__ */ jsx48(Undo2Icon, {})
+          children: /* @__PURE__ */ jsx49(Undo2Icon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: "Undo (Ctrl+Z)" })
+      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", children: "Undo (Ctrl+Z)" })
     ] }),
-    /* @__PURE__ */ jsxs29(Tooltip, { children: [
-      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsxs30(Tooltip, { children: [
+      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "ghost",
@@ -14085,16 +14418,16 @@ var History = () => {
           size: "icon",
           disabled: !canRedo,
           onClick: redo,
-          children: /* @__PURE__ */ jsx48(Redo2Icon, {})
+          children: /* @__PURE__ */ jsx49(Redo2Icon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: "Redo (Ctrl+Shift+Z)" })
+      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", children: "Redo (Ctrl+Shift+Z)" })
     ] })
   ] });
 };
 
 // src/core/index.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 var MAILLOW_EMAIL_EDITOR_VERSION = "0.0.1";
 function getSectionColumnIdx(idx, template) {
   let current = idx;
@@ -14158,12 +14491,12 @@ function Editor({ setEditorLoading }) {
   const startTextEditing = useEditorStore((state) => state.startTextEditing);
   const pendingTextEditRequest = useEditorStore((state) => state.pendingTextEditRequest);
   const clearPendingTextEditRequest = useEditorStore((state) => state.clearPendingTextEditRequest);
-  const [renderData, setRenderData] = useState15(null);
-  const [isEditing, setIsEditing] = useState15(false);
-  const [dropIndicator, setDropIndicator] = useState15(null);
-  const [dropTargetIdx, setDropTargetIdx] = useState15(null);
+  const [renderData, setRenderData] = useState16(null);
+  const [isEditing, setIsEditing] = useState16(false);
+  const [dropIndicator, setDropIndicator] = useState16(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState16(null);
   const shadowRootRef = useRef11(null);
-  const [hasSelectedElement, setHasSelectedElement] = useState15(false);
+  const [hasSelectedElement, setHasSelectedElement] = useState16(false);
   const dragParentIdxRef = useRef11(null);
   const dragPositionIndexRef = useRef11(0);
   const createNewSectionRef = useRef11(false);
@@ -14178,8 +14511,13 @@ function Editor({ setEditorLoading }) {
   const sectionRectCacheRef = useRef11(/* @__PURE__ */ new Map());
   const companyFooterCacheRef = useRef11(void 0);
   const lastSyncedTemplateRef = useRef11(null);
-  useEffect19(() => {
-    if (!isEditing) {
+  const prevTextEditingIdxRef = useRef11(null);
+  useEffect20(() => {
+    const currentIdx = textEditing?.idx ?? null;
+    const prevIdx = prevTextEditingIdxRef.current;
+    const switchedTarget = currentIdx !== null && prevIdx !== null && currentIdx !== prevIdx;
+    prevTextEditingIdxRef.current = currentIdx;
+    if (!isEditing && (!textEditing || switchedTarget)) {
       if (template === lastSyncedTemplateRef.current) {
         return;
       }
@@ -14188,13 +14526,13 @@ function Editor({ setEditorLoading }) {
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing]);
-  useEffect19(() => {
+  }, [template, renderData, isEditing, textEditing]);
+  useEffect20(() => {
     if (renderData && setEditorLoading) {
       setEditorLoading(false);
     }
   }, [renderData, setEditorLoading]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!pendingTextEditRequest || !shadowRootRef.current) return;
     const { idx, cursorPosition } = pendingTextEditRequest;
     const blockNode = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
@@ -14236,10 +14574,14 @@ function Editor({ setEditorLoading }) {
       const element = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
       return element ? element.getBoundingClientRect() : null;
     };
-    startTextEditing({ idx, getReferenceRect: getReferenceRect2, initialWidth: blockRect.width, initialHeight: blockRect.height, clickX, clickY, content, styles, cursorPosition });
+    const getShadowElement = () => {
+      if (!shadowRootRef.current) return null;
+      return shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
+    };
+    startTextEditing({ idx, getReferenceRect: getReferenceRect2, getShadowElement, initialWidth: blockRect.width, initialHeight: blockRect.height, clickX, clickY, content, styles, cursorPosition });
     clearPendingTextEditRequest();
   }, [pendingTextEditRequest, clearPendingTextEditRequest, startTextEditing]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (isDragging && dataTransfer) {
       const currentTemplate = useEditorStore.getState().template;
       templateCacheRef.current = currentTemplate;
@@ -14255,9 +14597,9 @@ function Editor({ setEditorLoading }) {
       sectionRectCacheRef.current.clear();
     }
   }, [isDragging, dataTransfer]);
-  const [html, setHtml] = useState15("");
+  const [html, setHtml] = useState16("");
   const lastRenderDataRef = useRef11("");
-  useEffect19(() => {
+  useEffect20(() => {
     if (typeof window === "undefined" || !renderData) {
       setHtml("");
       lastRenderDataRef.current = "";
@@ -14284,13 +14626,13 @@ function Editor({ setEditorLoading }) {
     };
     convertMjml();
   }, [renderData]);
-  const debouncedUpdateContent = useMemo16(
+  const debouncedUpdateContent = useMemo17(
     () => debounce((contentIdx, content) => {
       updateElementContent(contentIdx, content);
     }, 200),
     [updateElementContent]
   );
-  const handleElementClick = useCallback16(
+  const handleElementClick = useCallback17(
     (idx) => {
       if (isInsideCompanyFooter(idx, template)) {
         return;
@@ -14303,7 +14645,7 @@ function Editor({ setEditorLoading }) {
     },
     [setFocusIdx, template]
   );
-  const handleElementHover = useCallback16(
+  const handleElementHover = useCallback17(
     (idx) => {
       if (!isDragging) {
         if (idx) {
@@ -14317,19 +14659,19 @@ function Editor({ setEditorLoading }) {
     },
     [isDragging, setHoverIdx, template]
   );
-  const handleContentInput = useCallback16(
+  const handleContentInput = useCallback17(
     (contentIdx, content) => {
       debouncedUpdateContent(contentIdx, content);
     },
     [debouncedUpdateContent]
   );
-  const handleEditingStart = useCallback16(() => {
+  const handleEditingStart = useCallback17(() => {
     setIsEditing(true);
   }, []);
-  const handleEditingEnd = useCallback16(() => {
+  const handleEditingEnd = useCallback17(() => {
     setIsEditing(false);
   }, []);
-  const handleSlashCommand = useCallback16(
+  const handleSlashCommand = useCallback17(
     (cursorRect) => {
       setSlashCommand({
         isActive: true,
@@ -14344,25 +14686,29 @@ function Editor({ setEditorLoading }) {
     },
     [setSlashCommand]
   );
-  const handleSlashCommandClose = useCallback16(() => {
+  const handleSlashCommandClose = useCallback17(() => {
     clearSlashCommand();
   }, [clearSlashCommand]);
-  const handleTextEditStart = useCallback16(
+  const handleTextEditStart = useCallback17(
     (idx, initialWidth, initialHeight, clickX, clickY, content, styles) => {
       const getReferenceRect2 = () => {
         if (!shadowRootRef.current) return null;
         const element = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
         return element ? element.getBoundingClientRect() : null;
       };
-      startTextEditing({ idx, getReferenceRect: getReferenceRect2, initialWidth, initialHeight, clickX, clickY, content, styles });
+      const getShadowElement = () => {
+        if (!shadowRootRef.current) return null;
+        return shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
+      };
+      startTextEditing({ idx, getReferenceRect: getReferenceRect2, getShadowElement, initialWidth, initialHeight, clickX, clickY, content, styles });
     },
     [startTextEditing]
   );
-  const findParentSectionIdx = useCallback16((idx) => {
+  const findParentSectionIdx = useCallback17((idx) => {
     const match = /^(content\.children\.\[\d+\])/.exec(idx);
     return match ? match[1] : null;
   }, []);
-  const handleDragOver = useCallback16(
+  const handleDragOver = useCallback17(
     (_e, dragInfo) => {
       const currentDataTransfer = useEditorStore.getState().dataTransfer;
       if (!currentDataTransfer) return;
@@ -14773,7 +15119,7 @@ function Editor({ setEditorLoading }) {
     [findParentSectionIdx]
     // Only dependency is the helper function
   );
-  const handleDrop = useCallback16(
+  const handleDrop = useCallback17(
     (_e, _dragInfo) => {
       const currentDataTransfer = useEditorStore.getState().dataTransfer;
       if (!currentDataTransfer) return;
@@ -14912,7 +15258,7 @@ function Editor({ setEditorLoading }) {
     },
     [addElement, addElementInNewSection, moveElement, moveElementToNewSection, splitTextAndInsertElement, splitSectionAndInsertElement, setIsDragging, setIsDragButtonHovered, setDataTransfer, setHoverIdx]
   );
-  const handleDragLeave = useCallback16(() => {
+  const handleDragLeave = useCallback17(() => {
     setDropIndicator(null);
     setDropTargetIdx(null);
     dragParentIdxRef.current = null;
@@ -14928,13 +15274,13 @@ function Editor({ setEditorLoading }) {
     sectionElementCacheRef.current.clear();
     sectionRectCacheRef.current.clear();
   }, []);
-  const handleShadowRootRef = useCallback16((shadowRoot) => {
+  const handleShadowRootRef = useCallback17((shadowRoot) => {
     shadowRootRef.current = shadowRoot;
   }, []);
-  const handleSelectionRectChange = useCallback16((rect) => {
+  const handleSelectionRectChange = useCallback17((rect) => {
     setHasSelectedElement(rect !== null);
   }, []);
-  const getReferenceRect = useCallback16(() => {
+  const getReferenceRect = useCallback17(() => {
     if (!shadowRootRef.current || !focusIdx) return null;
     const selectedEl = shadowRootRef.current.querySelector(
       `.node-idx-${CSS.escape(focusIdx)}`
@@ -14962,14 +15308,14 @@ function Editor({ setEditorLoading }) {
   }, [focusIdx]);
   const selectedElement = focusIdx && renderData ? getValueByIdx(renderData, focusIdx) : null;
   const canDragSelectedElement = selectedElement && selectedElement.type !== "column" && !(focusIdx && renderData && isInsideCompanyFooter(focusIdx, renderData));
-  const showCompanyFooter = useMemo16(
+  const showCompanyFooter = useMemo17(
     () => template.content[0]?.data?.value?.showCompanyFooter ?? true,
     [template.content[0]?.data?.value?.showCompanyFooter]
   );
   if (!html) {
-    return /* @__PURE__ */ jsx49("div", { className: "maillow-editor flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx49(Spinner, {}) });
+    return /* @__PURE__ */ jsx50("div", { className: "maillow-editor flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx50(Spinner, {}) });
   }
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: "maillow-editor relative ",
@@ -14980,7 +15326,7 @@ function Editor({ setEditorLoading }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           "div",
           {
             className: `editor-container rounded-b-[12px] border-t-1 border-t-accent max-w-[626px]`,
@@ -14990,7 +15336,7 @@ function Editor({ setEditorLoading }) {
               backgroundColor: "#f5f5f5",
               overflow: "auto"
             },
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx50(
               ShadowDomRenderer,
               {
                 html,
@@ -15019,9 +15365,9 @@ function Editor({ setEditorLoading }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx49(ElementsSuggestions, {}),
-        /* @__PURE__ */ jsx49(TiptapOverlay, {}),
-        !isDragging && !isScaling && hasSelectedElement && focusIdx && selectedElement?.type && /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(ElementsSuggestions, {}),
+        /* @__PURE__ */ jsx50(TiptapOverlay, {}),
+        !isDragging && !isScaling && hasSelectedElement && focusIdx && selectedElement?.type && /* @__PURE__ */ jsx50(
           ElementFloat,
           {
             getReferenceRect,
@@ -15029,7 +15375,7 @@ function Editor({ setEditorLoading }) {
             elementType: selectedElement.type
           }
         ),
-        !isScaling && hasSelectedElement && focusIdx && canDragSelectedElement && !NOT_DRAGGABLE_ELEMENTS.includes(selectedElement.type) && /* @__PURE__ */ jsx49(
+        !isScaling && hasSelectedElement && focusIdx && canDragSelectedElement && !NOT_DRAGGABLE_ELEMENTS.includes(selectedElement.type) && /* @__PURE__ */ jsx50(
           DragButton,
           {
             getReferenceRect,
@@ -15038,17 +15384,17 @@ function Editor({ setEditorLoading }) {
             isDragging
           }
         ),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "divider" && /* @__PURE__ */ jsx49(DividerScale, { getReferenceRect }),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "button" && /* @__PURE__ */ jsx49(ButtonScale, { getReferenceRect }),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "image" && /* @__PURE__ */ jsx49(ImageScale, { getReferenceRect }),
-        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "space" && /* @__PURE__ */ jsx49(SpacerScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "divider" && /* @__PURE__ */ jsx50(DividerScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "button" && /* @__PURE__ */ jsx50(ButtonScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "image" && /* @__PURE__ */ jsx50(ImageScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "space" && /* @__PURE__ */ jsx50(SpacerScale, { getReferenceRect }),
         !isDragging && hasSelectedElement && focusIdx && renderData && (() => {
           const sectionColumnIdx = getSectionColumnIdx(focusIdx, renderData);
           if (!sectionColumnIdx) return null;
           const sectionColumn = getValueByIdx(renderData, sectionColumnIdx);
           if (!sectionColumn || sectionColumn.type !== "section-column") return null;
           if (!sectionColumn.children || sectionColumn.children.length < 2) return null;
-          return /* @__PURE__ */ jsx49(
+          return /* @__PURE__ */ jsx50(
             ColumnScale,
             {
               sectionColumnIdx,
@@ -15072,7 +15418,6 @@ export {
   parsePrice,
   json2mjml,
   MAX_TEMPLATE_SIZE,
-  MAX_PAID_LEVEL,
   useEditorStore,
   BUTTON_ALIGNMENTS,
   ALIGNMENT_ICONS,
@@ -15091,7 +15436,6 @@ export {
   MIN_LINE_HEIGHT,
   MAX_LINE_HEIGHT,
   LINE_HEIGHT_STEP,
-  IMAGE_SELECTION_VALID_TYPES,
   setupDragImage,
   getElementDisplayName,
   cn,