@kgalexander/mcreate 0.0.13 → 0.0.15

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

@@ -1,5 +1,5 @@
 // src/core/index.tsx
-import { useMemo as useMemo16, useState as useState16, useEffect as useEffect20, 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
@@ -1587,8 +1587,8 @@ function createSectionPropertyTripleElement(payload) {
 
 // templates/empty.json
 var empty_default = {
-  id: "-1",
-  name: "Empty Template",
+  id: "1",
+  name: "Playground Demo",
   version: "1.0.0",
   published: true,
   creator: "Kevin Guerrero",
@@ -1633,7 +1633,7 @@ var empty_default = {
                   tagName: "mj-text",
                   data: {
                     value: {
-                      content: '<p class="paragraph" style=" padding: 4px 0; font-family: Arial, sans-serif;">&nbsp;</p>'
+                      content: '<p class="paragraph" style=" padding: 4px 0; font-family: Arial, sans-serif;">Welcome to our Open House! Please join us for a tour of this beautiful home.</p>'
                     }
                   },
                   attributes: {
@@ -1646,180 +1646,6 @@ var empty_default = {
             }
           ]
         },
-        {
-          type: "section-property-km",
-          tagName: "mj-section",
-          data: { value: { columnRows: 1, columnWidths: [] } },
-          attributes: { "background-color": "#FFFFFF", padding: "12px 12px 12px 12px" },
-          children: [
-            {
-              type: "column",
-              tagName: "mj-column",
-              data: { value: {} },
-              attributes: { "background-color": "#FFFFFF", width: "500px", padding: "0px", border: "1px solid #dddddd", "border-radius": "0px" },
-              children: [
-                {
-                  type: "property-card",
-                  tagName: "mj-colproperty",
-                  data: { value: {} },
-                  attributes: {
-                    "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-                    "image-alt": "Beautiful modern home with pool",
-                    description: "Beautiful modern home with pool",
-                    price: "1000000",
-                    address: "123 Main Street",
-                    city: "Austin, TX 78701",
-                    beds: "",
-                    baths: "2",
-                    sqft: "1,850",
-                    href: "https://www.zillow.com/homedetails/126-Cara-Mia-Ln-Galloway-NJ-08205/68297408_zpid/?rtoken=6acd62a8-1848-41ed-919b-0034083eafca~X1-ZUu7aphk9l2689_9ej1i&utm_campaign=emo-instantsearchdigest&utm_source=email&utm_term=urn%3Amsg%3A20251026011813e84b11d632bb8725&utm_medium=email&utm_content=forsaleimage&sse=X1-SSsyx4z97dhglz0000000000_1pt02&srp=H4sIAAAAAAAAAHWRwXKDIBCGn8ZjokKQeOh0YpOZ9Nihh94yRNfozAoOYFrz9FXR1h7KgVn%2B799lF8JKN2DDUpuLlQjhswVp8uqtA9MLJx08BTwLCGlkm%2BlOFXaIA3rw4idY588bvtuyNElSEpCXQQK5JpTtk4h6YnXnKo9ouiWcUco8UdqsSMIp2fOAHz00cKu1EoCQuyGYu2CZb8TT18LLSRwtt3nw3rfg0VSQzTXLGh2Yacr1VLU9IJ7HZ1mrd4ndbHNmiJbGQMkrgsgrrfG%2FhFKi%2Fc24wt9XbOp5HDZaFpeVdyjE9BknZTRiA8otEw77R7wRwvZfu0fKi%2BqGj%2BhnXeLWRWR08uM33zV%2BmeABAAA%3D",
-                    status: "Empty",
-                    "status-color": "#B8B8B8",
-                    "is-new": "",
-                    "is-open-house": "1",
-                    "open-house-date": "2026-01-29",
-                    "open-house-time": "01:00-13:07",
-                    brokerage: "Keller Williams Atlantic Shore",
-                    "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-                    "border-radius": "0px",
-                    border: "1px solid #dddddd",
-                    "font-family": "Arial, sans-serif",
-                    "text-color": "#000000",
-                    "price-text-color": "",
-                    "details-text-color": "",
-                    "address-text-color": "",
-                    "brokerage-text-color": "#535364",
-                    "description-text-color": "",
-                    "mls-logo-text-color": "",
-                    "status-text-color": "",
-                    "new-text-color": "",
-                    "open-house-text-color": ""
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "section-property-single-two",
-          tagName: "mj-section",
-          data: { value: { columnRows: 1, columnWidths: [] } },
-          attributes: { "background-color": "#FFFFFF", padding: "12px 12px 12px 12px" },
-          children: [
-            {
-              type: "column",
-              tagName: "mj-column",
-              data: { value: {} },
-              attributes: { "background-color": "#FFFFFF", width: "500px", padding: "0px", border: "1px solid #dddddd", "border-radius": "12px" },
-              children: [
-                {
-                  type: "property-card-single-two",
-                  tagName: "mj-propertysingletwo",
-                  data: { value: {} },
-                  attributes: {
-                    "image-src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXddI94MwjUVz5M4CyDxZhSkIIwWbyDF59_w&s",
-                    "image-alt": "Beautiful modern home with pool",
-                    description: "Beautiful modern home with pool",
-                    price: "324203492034",
-                    address: "123 Main Street",
-                    city: "Austin, TX 78701",
-                    beds: "",
-                    baths: "",
-                    sqft: "",
-                    href: "https://www.zillow.com/homedetails/126-Cara-Mia-Ln-Galloway-NJ-08205/68297408_zpid/?rtoken=6acd62a8-1848-41ed-919b-0034083eafca~X1-ZUu7aphk9l2689_9ej1i&utm_campaign=emo-instantsearchdigest&utm_source=email&utm_term=urn%3Amsg%3A20251026011813e84b11d632bb8725&utm_medium=email&utm_content=forsaleimage&sse=X1-SSsyx4z97dhglz0000000000_1pt02&srp=H4sIAAAAAAAAAHWRwXKDIBCGn8ZjokKQeOh0YpOZ9Nihh94yRNfozAoOYFrz9FXR1h7KgVn%2B799lF8JKN2DDUpuLlQjhswVp8uqtA9MLJx08BTwLCGlkm%2BlOFXaIA3rw4idY588bvtuyNElSEpCXQQK5JpTtk4h6YnXnKo9ouiWcUco8UdqsSMIp2fOAHz00cKu1EoCQuyGYu2CZb8TT18LLSRwtt3nw3rfg0VSQzTXLGh2Yacr1VLU9IJ7HZ1mrd4ndbHNmiJbGQMkrgsgrrfG%2FhFKi%2Fc24wt9XbOp5HDZaFpeVdyjE9BknZTRiA8otEw77R7wRwvZfu0fKi%2BqGj%2BhnXeLWRWR08uM33zV%2BmeABAAA%3D",
-                    status: "Just Listed",
-                    "status-color": "#008000",
-                    "is-new": "1",
-                    "is-open-house": "",
-                    "open-house-date": "03/25",
-                    "open-house-time": "12pm-1pm",
-                    brokerage: "Keller Williams Atlantic Shore",
-                    "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-                    "border-radius": "12px",
-                    border: "1x solid #dddddd",
-                    "font-family": "Arial, sans-serif",
-                    "text-color": "#000000"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "section-property-triple",
-          tagName: "mj-section",
-          data: { value: { columnRows: 1, columnWidths: [] } },
-          attributes: { "background-color": "#FFFFFF", padding: "12px" },
-          children: [
-            {
-              type: "column",
-              tagName: "mj-column",
-              data: { value: {} },
-              attributes: { "background-color": "transparent", padding: "0px", "css-class": "property-triple-section-column", width: "500px" },
-              children: [
-                {
-                  type: "property-card-triple",
-                  tagName: "mj-propertytriple",
-                  data: { value: {} },
-                  attributes: {
-                    width: "100%",
-                    gap: "24px",
-                    "border-radius": "8px",
-                    border: "1px solid #d1d1d5",
-                    "image-height": "102px",
-                    "font-family": "Arial, sans-serif",
-                    "text-color": "#000000",
-                    "background-color": "#FFFFFF"
-                  },
-                  children: [
-                    {
-                      type: "property-card-triple-item",
-                      tagName: "mj-propertytripleitem",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://photos.zillowstatic.com/fp/a8e605d336d0b5a94d91828aee3c0afb-p_i.jpg",
-                        href: "",
-                        price: "$320,000",
-                        beds: "3",
-                        baths: "2",
-                        sqft: "1,385",
-                        city: "Egg Harbor City"
-                      }
-                    },
-                    {
-                      type: "property-card-triple-item",
-                      tagName: "mj-propertytripleitem",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://photos.zillowstatic.com/fp/4d72133271685e778a0126b3defd9854-p_i.jpg",
-                        href: "",
-                        price: "$282,000",
-                        beds: "2",
-                        baths: "2",
-                        sqft: "1,224",
-                        city: "Egg Harbor"
-                      }
-                    },
-                    {
-                      type: "property-card-triple-item",
-                      tagName: "mj-propertytripleitem",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://photos.zillowstatic.com/fp/26e69f22548989c0e4d1ec372ce178e0-p_i.jpg",
-                        href: "",
-                        price: "$484,900",
-                        beds: "3",
-                        baths: "1",
-                        sqft: "1,417",
-                        city: "Egg Harbor"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
         {
           type: "section",
           tagName: "mj-section",
@@ -1871,7 +1697,6 @@ var defaultTemplate = {
     id: page.id || generateId()
   }))
 };
-var MAX_PAID_LEVEL = 3;
 var useEditorStore = create()(
   devtools(
     immer((set) => ({
@@ -1880,6 +1705,7 @@ var useEditorStore = create()(
       templateId: null,
       onSave: null,
       onToast: null,
+      onExit: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1903,14 +1729,22 @@ var useEditorStore = create()(
       isSaving: false,
       // Subscription level (0 = free, 1-3 = paid tiers)
       isPaidLevel: 0,
+      // User data
+      images: [],
+      userData: null,
+      // Render sync
+      renderSyncNeeded: 0,
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, onToast, isPaidLevel) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
           state.onSave = onSave ?? null;
           state.onToast = onToast ?? null;
-          state.isPaidLevel = isPaidLevel ?? 0;
+          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)];
@@ -2176,6 +2010,7 @@ var useEditorStore = create()(
             return;
           }
           Object.assign(element, updates);
+          state2.renderSyncNeeded += 1;
         });
       },
       // Update element content (for contenteditable)
@@ -3138,6 +2973,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];
@@ -3164,7 +3010,18 @@ 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -3176,6 +3033,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   if (cached) return cached;
   const hiddenSelectors = !isDragButtonHovered && HIDDEN_SELECTION_VISUAL_ELEMENTS.length > 0 ? HIDDEN_SELECTION_VISUAL_ELEMENTS.map((type) => `.node-type-${type}`).join(", ") : null;
   const css = `
+
   /* Base reset for email content */
   * {
     box-sizing: border-box;
@@ -3192,32 +3050,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) */
@@ -3237,12 +3095,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;
   }
@@ -3255,12 +3113,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;
   }
@@ -3278,7 +3136,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;
   }
@@ -3589,8 +3447,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);
@@ -3610,8 +3468,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";
@@ -4071,11 +3929,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",
@@ -4085,7 +3943,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,
@@ -12091,7 +11949,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
 };
 
 // src/core/editor/components/element-float.tsx
-import { useEffect as useEffect12, 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
@@ -12145,7 +12003,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";
@@ -12322,19 +12180,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 "";
@@ -12344,15 +12219,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);
     }
   };
@@ -12395,55 +12277,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" }),
@@ -12508,11 +12420,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);
@@ -12521,7 +12433,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) {
@@ -12558,11 +12470,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);
@@ -12571,7 +12483,7 @@ function useNoWrap() {
       noWrap: el?.data?.value?.noWrap === true
     };
   }, [focusIdx, template]);
-  const handleToggleNoWrap = useCallback5(() => {
+  const handleToggleNoWrap = useCallback6(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       data: {
@@ -12702,7 +12614,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";
@@ -12713,7 +12625,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);
@@ -12725,12 +12637,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, {
@@ -12826,11 +12738,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: "" };
     }
@@ -12841,13 +12753,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: "" }
@@ -12961,7 +12873,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();
@@ -12970,7 +12882,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);
@@ -12979,7 +12891,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) {
@@ -13338,7 +13250,7 @@ var ElementFloat = ({ getReferenceRect, focusIdx, elementType }) => {
   );
 };
 var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
-  const virtualReference = useMemo10(() => ({
+  const virtualReference = useMemo11(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13377,14 +13289,14 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
 };
 
 // src/core/editor/components/scaling/divider-scale.tsx
-import { useMemo as useMemo11, useEffect as useEffect13, useState as useState9, 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 jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var DividerScale = ({ getReferenceRect }) => {
   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;
@@ -13394,12 +13306,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();
@@ -13417,7 +13329,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;
@@ -13437,7 +13349,7 @@ var DividerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback10(() => {
+  const handlePointerUp = useCallback11(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
@@ -13450,7 +13362,7 @@ var DividerScale = ({ getReferenceRect }) => {
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo11(() => ({
+  const virtualReference = useMemo12(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13524,14 +13436,14 @@ var DividerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/button-scale.tsx
-import { useMemo as useMemo12, useEffect as useEffect14, useState as useState10, 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 jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var ButtonScale = ({ getReferenceRect }) => {
   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" };
     }
@@ -13546,12 +13458,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) {
@@ -13573,7 +13485,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();
@@ -13605,7 +13517,7 @@ var ButtonScale = ({ getReferenceRect }) => {
       });
     }
   }, []);
-  const handlePointerUp = useCallback11(() => {
+  const handlePointerUp = useCallback12(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
@@ -13618,7 +13530,7 @@ var ButtonScale = ({ getReferenceRect }) => {
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo12(() => ({
+  const virtualReference = useMemo13(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13708,14 +13620,14 @@ var ButtonScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/image-scale.tsx
-import { useMemo as useMemo13, useEffect as useEffect15, useState as useState11, 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 jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var ImageScale = ({ getReferenceRect }) => {
   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" };
     }
@@ -13730,7 +13642,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) {
@@ -13753,7 +13665,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();
@@ -13784,7 +13696,7 @@ var ImageScale = ({ getReferenceRect }) => {
       });
     }
   }, []);
-  const handlePointerUp = useCallback12(() => {
+  const handlePointerUp = useCallback13(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
@@ -13797,7 +13709,7 @@ var ImageScale = ({ getReferenceRect }) => {
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo13(() => ({
+  const virtualReference = useMemo14(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13887,14 +13799,14 @@ var ImageScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/spacer-scale.tsx
-import { useMemo as useMemo14, useEffect as useEffect16, useState as useState12, 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 jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var SpacerScale = ({ getReferenceRect }) => {
   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;
@@ -13902,7 +13814,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) {
@@ -13918,7 +13830,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();
@@ -13936,7 +13848,7 @@ var SpacerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback13(() => {
+  const handlePointerUp = useCallback14(() => {
     setActiveSide(null);
     setIsScaling(false);
     dragRef.current = null;
@@ -13949,7 +13861,7 @@ var SpacerScale = ({ getReferenceRect }) => {
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo14(() => ({
+  const virtualReference = useMemo15(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -14023,19 +13935,19 @@ var SpacerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/column-scale.tsx
-import { useMemo as useMemo15, useEffect as useEffect17, useState as useState13, useRef as useRef9, useCallback as useCallback14 } from "react";
+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] = 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 = [];
@@ -14080,7 +13992,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();
@@ -14106,7 +14018,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;
@@ -14140,7 +14052,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
       }
     });
   }, [sectionColumnIdx]);
-  const handlePointerUp = useCallback14(() => {
+  const handlePointerUp = useCallback15(() => {
     setActiveDivider(null);
     setIsScaling(false);
     dragRef.current = null;
@@ -14227,7 +14139,7 @@ function Spinner({ className, ...props }) {
 import { EyeIcon } from "lucide-react";
 
 // src/render/useMjmlCompiler.ts
-import { useState as useState14, 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", {
@@ -14392,6 +14304,8 @@ function Editor({ setEditorLoading }) {
   const dataTransfer = useEditorStore((state) => state.dataTransfer);
   const textEditing = useEditorStore((state) => state.textEditing);
   const isScaling = useEditorStore((state) => state.isScaling);
+  const canvasBackgroundColor = useEditorStore((s) => s.template?.content?.[0]?.attributes?.["background-color"]) || "#f5f5f5";
+  const renderSyncNeeded = useEditorStore((state) => state.renderSyncNeeded);
   const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
   const setHoverIdx = useEditorStore((state) => state.setHoverIdx);
   const updateElementContent = useEditorStore((state) => state.updateElementContent);
@@ -14430,12 +14344,17 @@ function Editor({ setEditorLoading }) {
   const companyFooterCacheRef = useRef11(void 0);
   const lastSyncedTemplateRef = useRef11(null);
   const prevTextEditingIdxRef = useRef11(null);
+  const lastRenderSyncNeededRef = useRef11(0);
   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)) {
+    const forceSync = renderSyncNeeded > lastRenderSyncNeededRef.current;
+    if (forceSync) {
+      lastRenderSyncNeededRef.current = renderSyncNeeded;
+    }
+    if (forceSync || !isEditing && (!textEditing || switchedTarget)) {
       if (template === lastSyncedTemplateRef.current) {
         return;
       }
@@ -14444,7 +14363,7 @@ function Editor({ setEditorLoading }) {
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing, textEditing]);
+  }, [template, renderData, isEditing, textEditing, renderSyncNeeded]);
   useEffect20(() => {
     if (renderData && setEditorLoading) {
       setEditorLoading(false);
@@ -14544,13 +14463,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;
@@ -14563,7 +14482,7 @@ function Editor({ setEditorLoading }) {
     },
     [setFocusIdx, template]
   );
-  const handleElementHover = useCallback16(
+  const handleElementHover = useCallback17(
     (idx) => {
       if (!isDragging) {
         if (idx) {
@@ -14577,19 +14496,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,
@@ -14604,10 +14523,10 @@ 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;
@@ -14622,11 +14541,11 @@ function Editor({ setEditorLoading }) {
     },
     [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;
@@ -15037,7 +14956,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;
@@ -15176,7 +15095,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;
@@ -15192,13 +15111,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)}`
@@ -15226,7 +15145,7 @@ 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]
   );
@@ -15244,43 +15163,45 @@ function Editor({ setEditorLoading }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsxs31(
           "div",
           {
-            className: `editor-container rounded-b-[12px] border-t-1 border-t-accent max-w-[626px]`,
+            className: `editor-container rounded-b-[12px] max-w-[626px] w-[626px] [@media(max-width:950px)]:max-w-[100%] [@media(max-width:950px)]:w-[100%] `,
             style: {
-              width: "626px",
               height: "100%",
-              backgroundColor: "#f5f5f5",
+              backgroundColor: canvasBackgroundColor,
               overflow: "auto"
             },
-            children: /* @__PURE__ */ jsx50(
-              ShadowDomRenderer,
-              {
-                html,
-                focusIdx,
-                hoverIdx,
-                dropIndicator,
-                dropTargetIdx,
-                isDragging,
-                isDragButtonHovered,
-                textEditingIdx: textEditing?.idx || null,
-                showCompanyFooter,
-                onElementClick: handleElementClick,
-                onElementHover: handleElementHover,
-                onContentInput: handleContentInput,
-                onEditingStart: handleEditingStart,
-                onEditingEnd: handleEditingEnd,
-                onDragOver: handleDragOver,
-                onDrop: handleDrop,
-                onDragLeave: handleDragLeave,
-                onSelectionRectChange: handleSelectionRectChange,
-                onShadowRootRef: handleShadowRootRef,
-                onSlashCommand: handleSlashCommand,
-                onSlashCommandClose: handleSlashCommandClose,
-                onTextEditStart: handleTextEditStart
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx50("div", { className: "w-full h-[4px] bg-black opacity-10" }),
+              /* @__PURE__ */ jsx50(
+                ShadowDomRenderer,
+                {
+                  html,
+                  focusIdx,
+                  hoverIdx,
+                  dropIndicator,
+                  dropTargetIdx,
+                  isDragging,
+                  isDragButtonHovered,
+                  textEditingIdx: textEditing?.idx || null,
+                  showCompanyFooter,
+                  onElementClick: handleElementClick,
+                  onElementHover: handleElementHover,
+                  onContentInput: handleContentInput,
+                  onEditingStart: handleEditingStart,
+                  onEditingEnd: handleEditingEnd,
+                  onDragOver: handleDragOver,
+                  onDrop: handleDrop,
+                  onDragLeave: handleDragLeave,
+                  onSelectionRectChange: handleSelectionRectChange,
+                  onShadowRootRef: handleShadowRootRef,
+                  onSlashCommand: handleSlashCommand,
+                  onSlashCommandClose: handleSlashCommandClose,
+                  onTextEditStart: handleTextEditStart
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx50(ElementsSuggestions, {}),
@@ -15336,7 +15257,6 @@ export {
   parsePrice,
   json2mjml,
   MAX_TEMPLATE_SIZE,
-  MAX_PAID_LEVEL,
   useEditorStore,
   BUTTON_ALIGNMENTS,
   ALIGNMENT_ICONS,
@@ -15355,7 +15275,6 @@ export {
   MIN_LINE_HEIGHT,
   MAX_LINE_HEIGHT,
   LINE_HEIGHT_STEP,
-  IMAGE_SELECTION_VALID_TYPES,
   setupDragImage,
   getElementDisplayName,
   cn,