@kgalexander/mcreate 0.0.14 → 0.0.16

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

@@ -1,5 +1,5 @@
 // src/core/index.tsx
-import { useMemo as useMemo17, useState as useState16, useEffect as useEffect20, useCallback as useCallback17, useRef as useRef11 } from "react";
+import { useMemo as useMemo18, useState as useState17, useEffect as useEffect21, useCallback as useCallback18, useRef as useRef12 } from "react";
 import { cloneDeep as cloneDeep2, isEqual, debounce } from "lodash";
 
 // src/core/utils/idx.ts
@@ -212,6 +212,117 @@ function formatOpenHouseTime(time24) {
   return `${hour12}${period}`;
 }
 
+// src/core/editor/constant/configuration.ts
+import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Heading1Icon, Heading2Icon, Heading3Icon, LinkIcon, ListIcon, ListOrderedIcon, MailIcon, PhoneIcon, Pilcrow } from "lucide-react";
+var MAX_TEMPLATE_SIZE = 50 * 1024;
+var BUTTON_ALIGNMENTS = ["left", "center", "right"];
+var ALIGNMENT_ICONS = {
+  left: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-left.svg",
+  center: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-center.svg",
+  right: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-right.svg"
+};
+var FONTS = [
+  "Arial",
+  "Helvetica",
+  "Times New Roman",
+  "Courier New",
+  "Verdana",
+  "Tahoma",
+  "Trebuchet MS",
+  "Georgia"
+];
+var TEXT_ALIGNMENT_ICONS = {
+  left: AlignLeftIcon,
+  center: AlignCenterIcon,
+  right: AlignRightIcon,
+  justify: AlignJustifyIcon
+};
+var TEXT_TYPE_OPTIONS = [
+  { type: "paragraph", label: "Paragraph", Icon: Pilcrow, disabled: false },
+  { type: "h1", label: "Heading 1", Icon: Heading1Icon, disabled: false },
+  { type: "h2", label: "Heading 2", Icon: Heading2Icon, disabled: false },
+  { type: "h3", label: "Heading 3", Icon: Heading3Icon, disabled: false },
+  { type: "list", label: "Bulleted", Icon: ListIcon, disabled: true },
+  { type: "ordered", label: "Numbered", Icon: ListOrderedIcon, disabled: true }
+];
+var DEFAULT_FONT_SIZE = 14;
+var MIN_FONT_SIZE = 6;
+var MAX_FONT_SIZE = 72;
+var FONT_SIZE_STEP = 1;
+var LINK_TYPES = [
+  {
+    name: "Email",
+    placeholder: "email@example.com",
+    icon: MailIcon,
+    inputType: "email",
+    prefix: "mailto:"
+  },
+  {
+    name: "Website",
+    placeholder: "https://example.com",
+    icon: LinkIcon,
+    inputType: "url",
+    prefix: ""
+  },
+  {
+    name: "Phone",
+    placeholder: "+1234567890",
+    icon: PhoneIcon,
+    inputType: "tel",
+    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];
+  return LINK_TYPES[1];
+};
+var stripPrefix = (href) => {
+  if (href.startsWith("mailto:")) return href.slice(7);
+  if (href.startsWith("tel:")) return href.slice(4);
+  return href;
+};
+var normalizeWebsiteUrl = (url) => {
+  if (!url) return "";
+  if (url.match(/^https?:\/\//i)) return url;
+  if (url.startsWith("mailto:") || url.startsWith("tel:")) return url;
+  return "https://" + url;
+};
+var DEFAULT_LETTER_SPACING = 0;
+var MIN_LETTER_SPACING = -2;
+var MAX_LETTER_SPACING = 10;
+var LETTER_SPACING_STEP = 0.1;
+var DEFAULT_LINE_HEIGHT = 1.4;
+var MIN_LINE_HEIGHT = 0.8;
+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 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)"
+  }
+};
+var DEFAULT_PROPERTY_PLACEHOLDER_IMAGE = "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg";
+
 // src/render/Mockup/mock-property-better.ts
 function propertyCardMockMjml(block, context) {
   const a = block.attributes;
@@ -225,7 +336,7 @@ function propertyCardMockMjml(block, context) {
   const baths = formatNumber(a["baths"] || "");
   const sqft = formatNumber(a["sqft"] || "");
   const description = a["description"] || "";
-  const imageSrc = a["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg";
+  const imageSrc = a["image-src"] || DEFAULT_PROPERTY_PLACEHOLDER_IMAGE;
   const imageAlt = a["image-alt"] || "Photo of a Property";
   const status = a["status"] || "Empty";
   const statusColor = a["status-color"] || "#B8B8B8";
@@ -393,7 +504,7 @@ function propertyCardSingleTwoMockMjml(block, context) {
   const baths = formatNumber(a["baths"] || "");
   const sqft = formatNumber(a["sqft"] || "");
   const description = a["description"] || "";
-  const imageSrc = a["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg";
+  const imageSrc = a["image-src"] || DEFAULT_PROPERTY_PLACEHOLDER_IMAGE;
   const imageAlt = a["image-alt"] || "Photo of a Property";
   const status = a["status"] || "Empty";
   const statusColor = a["status-color"] || "#B8B8B8";
@@ -583,7 +694,7 @@ function renderCard(child, childIdx, context, uniqueId, borderRadius, imageHeigh
   const baths = formatNumber(attrs["baths"] || "--");
   const sqft = formatNumber(attrs["sqft"] || "--");
   const city = attrs["city"] || "City";
-  const imageSrc = attrs["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg";
+  const imageSrc = attrs["image-src"] || DEFAULT_PROPERTY_PLACEHOLDER_IMAGE;
   const childTrackingClasses = context.mode === "editing" ? getTrackingClasses(childIdx, "property-card-triple-item") : "";
   return `
     <table class="property-triple-card-${uniqueId} property-triple-table ${childTrackingClasses}" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" style="width:100%; border:${border}; border-radius:${borderRadius}; border-collapse:separate;${backgroundColor !== "transparent" ? ` background-color:${backgroundColor};` : ""}">
@@ -1249,7 +1360,7 @@ function createImageElement(payload) {
     type: "image",
     tagName: "mj-image",
     attributes: {
-      src: "https://placehold.co/600x200",
+      src: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/placeholder_image.png",
       alt: "",
       padding: "0px 0px",
       "fluid-on-mobile": "true",
@@ -1397,7 +1508,7 @@ function createPropertyCardElement(payload) {
     tagName: "mj-colproperty",
     data: { value: {} },
     attributes: {
-      "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
+      "image-src": DEFAULT_PROPERTY_PLACEHOLDER_IMAGE,
       "image-alt": "Property image",
       "price": "$0",
       "address": "123 Main Street",
@@ -1426,7 +1537,7 @@ function createPropertyCardSingleTwoElement(payload) {
     tagName: "mj-propertysingletwo",
     data: { value: {} },
     attributes: {
-      "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
+      "image-src": DEFAULT_PROPERTY_PLACEHOLDER_IMAGE,
       "image-alt": "Property image",
       "price": "$0",
       "address": "123 Main Street",
@@ -1521,7 +1632,7 @@ function createPropertyCardTripleItemElement(payload) {
     tagName: "mj-propertytripleitem",
     data: { value: {} },
     attributes: {
-      "image-src": payload?.attributes?.["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
+      "image-src": payload?.attributes?.["image-src"] || DEFAULT_PROPERTY_PLACEHOLDER_IMAGE,
       "href": payload?.attributes?.["href"] || "",
       "price": payload?.attributes?.["price"] || "$0",
       "beds": payload?.attributes?.["beds"] || "--",
@@ -1587,8 +1698,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 +1744,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 +1757,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",
@@ -1859,7 +1796,6 @@ var empty_default = {
 
 // src/core/editor/state/editor.ts
 var SECTION_INDEX_REGEX = /^content\.children\.\[(\d+)\]/;
-var MAX_TEMPLATE_SIZE = 50 * 1024;
 function calculateTemplateSize(template) {
   const str = JSON.stringify(template);
   return new Blob([str]).size;
@@ -1880,6 +1816,7 @@ var useEditorStore = create()(
       onSave: null,
       onToast: null,
       onExit: null,
+      onImageUpload: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1888,6 +1825,7 @@ var useEditorStore = create()(
       dataTransfer: null,
       isScaling: false,
       slashCommand: null,
+      mergeFieldSuggestion: null,
       textEditing: null,
       pendingTextEditRequest: null,
       tiptapEditor: null,
@@ -1906,19 +1844,27 @@ var useEditorStore = create()(
       // User data
       images: [],
       userData: null,
+      mergeFields: [],
+      // Render sync
+      renderSyncNeeded: 0,
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
           state.onSave = onSave ?? null;
           state.onToast = onToast ?? null;
           state.onExit = onExit ?? null;
+          state.onImageUpload = onImageUpload ?? null;
           state.isPaidLevel = data?.isPaidLevel ?? 0;
           state.images = data?.images ?? [];
           state.userData = data?.userData ?? null;
+          state.mergeFields = (data?.mergefields ?? []).map((f) => ({
+            label: (f.name || "").replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+            value: (f.merge_tag || "").replace(/^\{\{|\}\}$/g, "")
+          }));
           state.templateSize = calculateTemplateSize(template);
-          state.isAtSizeLimit = false;
+          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
           state.history = [cloneDeep(template)];
           state.historyIndex = 0;
           state.focusIdx = null;
@@ -1927,6 +1873,11 @@ var useEditorStore = create()(
           state.lastSavedSnapshot = JSON.stringify(template);
         });
       },
+      addImage: (image2) => {
+        set((state) => {
+          state.images.push(castDraft(image2));
+        });
+      },
       // Template metadata actions
       setTemplateName: (name) => {
         set((state) => {
@@ -2007,6 +1958,17 @@ var useEditorStore = create()(
           }, 0);
         }
       },
+      // Merge field suggestion actions
+      setMergeFieldSuggestion: (suggestionState) => {
+        set((state) => {
+          state.mergeFieldSuggestion = suggestionState;
+        });
+      },
+      clearMergeFieldSuggestion: () => {
+        set((state) => {
+          state.mergeFieldSuggestion = null;
+        });
+      },
       // Text editing actions (Tiptap overlay)
       startTextEditing: (textEditingState) => {
         set((state) => {
@@ -2182,6 +2144,7 @@ var useEditorStore = create()(
             return;
           }
           Object.assign(element, updates);
+          state2.renderSyncNeeded += 1;
         });
       },
       // Update element content (for contenteditable)
@@ -3084,129 +3047,19 @@ function setValueAtPath(template, path, value) {
 
 // src/core/editor/components/ShadowDomRenderer.tsx
 import { useEffect, useRef, memo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var lastSizeLimitToastTime = 0;
+var cssCache = /* @__PURE__ */ new Map();
+function getEditorStyles(isDragButtonHovered, textEditingIdx) {
+  const cacheKey = `${isDragButtonHovered}-${textEditingIdx ?? "null"}`;
+  const cached = cssCache.get(cacheKey);
+  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 = `
 
-// src/core/editor/constant/configuration.ts
-import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Heading1Icon, Heading2Icon, Heading3Icon, LinkIcon, ListIcon, ListOrderedIcon, MailIcon, PhoneIcon, Pilcrow } from "lucide-react";
-var BUTTON_ALIGNMENTS = ["left", "center", "right"];
-var ALIGNMENT_ICONS = {
-  left: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-left.svg",
-  center: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-center.svg",
-  right: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-right.svg"
-};
-var FONTS = [
-  "Arial",
-  "Helvetica",
-  "Times New Roman",
-  "Courier New",
-  "Verdana",
-  "Tahoma",
-  "Trebuchet MS",
-  "Georgia"
-];
-var TEXT_ALIGNMENT_ICONS = {
-  left: AlignLeftIcon,
-  center: AlignCenterIcon,
-  right: AlignRightIcon,
-  justify: AlignJustifyIcon
-};
-var TEXT_TYPE_OPTIONS = [
-  { type: "paragraph", label: "Paragraph", Icon: Pilcrow, disabled: false },
-  { type: "h1", label: "Heading 1", Icon: Heading1Icon, disabled: false },
-  { type: "h2", label: "Heading 2", Icon: Heading2Icon, disabled: false },
-  { type: "h3", label: "Heading 3", Icon: Heading3Icon, disabled: false },
-  { type: "list", label: "Bulleted", Icon: ListIcon, disabled: true },
-  { type: "ordered", label: "Numbered", Icon: ListOrderedIcon, disabled: true }
-];
-var DEFAULT_FONT_SIZE = 14;
-var MIN_FONT_SIZE = 6;
-var MAX_FONT_SIZE = 72;
-var FONT_SIZE_STEP = 1;
-var LINK_TYPES = [
-  {
-    name: "Email",
-    placeholder: "email@example.com",
-    icon: MailIcon,
-    inputType: "email",
-    prefix: "mailto:"
-  },
-  {
-    name: "Website",
-    placeholder: "https://example.com",
-    icon: LinkIcon,
-    inputType: "url",
-    prefix: ""
-  },
-  {
-    name: "Phone",
-    placeholder: "+1234567890",
-    icon: PhoneIcon,
-    inputType: "tel",
-    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];
-  return LINK_TYPES[1];
-};
-var stripPrefix = (href) => {
-  if (href.startsWith("mailto:")) return href.slice(7);
-  if (href.startsWith("tel:")) return href.slice(4);
-  return href;
-};
-var normalizeWebsiteUrl = (url) => {
-  if (!url) return "";
-  if (url.match(/^https?:\/\//i)) return url;
-  if (url.startsWith("mailto:") || url.startsWith("tel:")) return url;
-  return "https://" + url;
-};
-var DEFAULT_LETTER_SPACING = 0;
-var MIN_LETTER_SPACING = -2;
-var MAX_LETTER_SPACING = 10;
-var LETTER_SPACING_STEP = 0.1;
-var DEFAULT_LINE_HEIGHT = 1.4;
-var MIN_LINE_HEIGHT = 0.8;
-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 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";
-var lastSizeLimitToastTime = 0;
-var cssCache = /* @__PURE__ */ new Map();
-function getEditorStyles(isDragButtonHovered, textEditingIdx) {
-  const cacheKey = `${isDragButtonHovered}-${textEditingIdx ?? "null"}`;
-  const cached = cssCache.get(cacheKey);
-  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;
+  /* Base reset for email content */
+  * {
+    box-sizing: border-box;
   }
 
   /* Make all email blocks interactive */
@@ -3528,6 +3381,19 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   }
   ` : ""}
 
+  /* Merge field tags - dashed underline for {{variable}} patterns */
+  .merge-field-tag {
+  
+    background-color: var(--background);
+    border-radius: 4px;
+    padding: 4px;
+    border: 1px solid var(--border);
+    color: #000000;
+  }
+  .merge-field-tag:hover {
+    cursor: pointer;
+  }
+
   /* Company footer - hide selection/hover outlines and make non-interactive */
   .is-company-footer,
   .is-company-footer .${EMAIL_BLOCK_CLASS_NAME} {
@@ -4153,6 +4019,7 @@ function isTextContentEmpty(element) {
   const text2 = element.textContent?.trim() || "";
   return text2.length === 0;
 }
+var MERGE_FIELD_REGEX_SHADOW = /\{\{[a-zA-Z_][a-zA-Z0-9_]*\}\}/g;
 function isParagraphEmpty(p) {
   const text2 = p.textContent || "";
   return text2.trim() === "" || text2 === "\xA0" || text2 === "&nbsp;";
@@ -4174,6 +4041,40 @@ function injectContentEditable(container) {
           }
         }
       });
+      if (contentDiv.textContent?.includes("{{")) {
+        const walker = document.createTreeWalker(contentDiv, NodeFilter.SHOW_TEXT);
+        const textNodes = [];
+        let tNode;
+        while (tNode = walker.nextNode()) {
+          if (tNode.textContent && MERGE_FIELD_REGEX_SHADOW.test(tNode.textContent)) {
+            textNodes.push(tNode);
+          }
+          MERGE_FIELD_REGEX_SHADOW.lastIndex = 0;
+        }
+        for (const textNode of textNodes) {
+          const text2 = textNode.textContent || "";
+          const fragment = document.createDocumentFragment();
+          let lastIndex = 0;
+          MERGE_FIELD_REGEX_SHADOW.lastIndex = 0;
+          let match;
+          while ((match = MERGE_FIELD_REGEX_SHADOW.exec(text2)) !== null) {
+            if (match.index > lastIndex) {
+              fragment.appendChild(document.createTextNode(text2.slice(lastIndex, match.index)));
+            }
+            const span = document.createElement("span");
+            span.className = "merge-field-tag";
+            const fieldName = match[0].slice(2, -2);
+            span.setAttribute("data-tooltip", fieldName.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()));
+            span.textContent = match[0];
+            fragment.appendChild(span);
+            lastIndex = match.index + match[0].length;
+          }
+          if (lastIndex < text2.length) {
+            fragment.appendChild(document.createTextNode(text2.slice(lastIndex)));
+          }
+          textNode.parentNode?.replaceChild(fragment, textNode);
+        }
+      }
     }
   });
   container.querySelectorAll(".node-type-button").forEach((buttonEl) => {
@@ -4995,6 +4896,158 @@ var ElementsSuggestionsContent = () => {
   );
 };
 
+// src/core/editor/components/merge-field-suggestions.tsx
+import { useMemo as useMemo3, useEffect as useEffect4, useRef as useRef3, useState, useCallback as useCallback3 } from "react";
+import { useFloating as useFloating3, offset as offset3, shift as shift3, flip as flip2 } from "@floating-ui/react";
+import { BracesIcon } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var MergeFieldSuggestions = () => {
+  const isActive = useEditorStore((state) => state.mergeFieldSuggestion?.isActive);
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsx14(MergeFieldSuggestionsContent, {});
+};
+var MergeFieldSuggestionsContent = () => {
+  const mergeFieldSuggestion = useEditorStore((state) => state.mergeFieldSuggestion);
+  const clearMergeFieldSuggestion = useEditorStore((state) => state.clearMergeFieldSuggestion);
+  const tiptapEditor = useEditorStore((state) => state.tiptapEditor);
+  const mergeFields = useEditorStore((state) => state.mergeFields);
+  const containerRef = useRef3(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  useEffect4(() => {
+    if (!tiptapEditor || !mergeFieldSuggestion) return;
+    const updateQuery = () => {
+      const { from } = tiptapEditor.state.selection;
+      const triggerEnd = mergeFieldSuggestion.triggerPosition + 2;
+      if (from > triggerEnd) {
+        const typed = tiptapEditor.state.doc.textBetween(triggerEnd, from);
+        setSearchQuery(typed);
+      } else {
+        setSearchQuery("");
+      }
+    };
+    updateQuery();
+    tiptapEditor.on("selectionUpdate", updateQuery);
+    tiptapEditor.on("update", updateQuery);
+    return () => {
+      tiptapEditor.off("selectionUpdate", updateQuery);
+      tiptapEditor.off("update", updateQuery);
+    };
+  }, [tiptapEditor, mergeFieldSuggestion]);
+  const filteredFields = useMemo3(() => {
+    if (!searchQuery) return mergeFields;
+    const q = searchQuery.toLowerCase();
+    return mergeFields.filter(
+      (f) => f.label.toLowerCase().includes(q) || f.value.toLowerCase().includes(q)
+    );
+  }, [searchQuery, mergeFields]);
+  const handleSelect = useCallback3((fieldValue) => {
+    if (!tiptapEditor || !mergeFieldSuggestion) return;
+    const { from } = tiptapEditor.state.selection;
+    const triggerPos = mergeFieldSuggestion.triggerPosition;
+    tiptapEditor.chain().focus().deleteRange({ from: triggerPos, to: from }).insertContent(`{{${fieldValue}}}`).run();
+    clearMergeFieldSuggestion();
+  }, [tiptapEditor, mergeFieldSuggestion, clearMergeFieldSuggestion]);
+  const virtualReference = useMemo3(() => ({
+    getBoundingClientRect: () => {
+      if (!mergeFieldSuggestion?.cursorRect) {
+        return { x: 0, y: 0, top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0, toJSON: () => ({}) };
+      }
+      const { top, left, height } = mergeFieldSuggestion.cursorRect;
+      return {
+        x: left,
+        y: top,
+        top,
+        left,
+        bottom: top + height,
+        right: left,
+        width: 0,
+        height,
+        toJSON: () => ({})
+      };
+    }
+  }), [mergeFieldSuggestion?.cursorRect]);
+  const { floatingStyles, refs, update } = useFloating3({
+    placement: "bottom-start",
+    middleware: [
+      offset3(4),
+      flip2({ padding: 8 }),
+      shift3({ padding: 8 })
+    ]
+  });
+  const floatingRefsRef = useRef3(refs);
+  useEffect4(() => {
+    floatingRefsRef.current = refs;
+  }, [refs]);
+  useEffect4(() => {
+    if (mergeFieldSuggestion?.cursorRect) {
+      floatingRefsRef.current.setPositionReference(virtualReference);
+      update();
+    }
+  }, [mergeFieldSuggestion?.cursorRect, virtualReference, update]);
+  const clearRef = useRef3(clearMergeFieldSuggestion);
+  useEffect4(() => {
+    clearRef.current = clearMergeFieldSuggestion;
+  }, [clearMergeFieldSuggestion]);
+  useEffect4(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        clearRef.current();
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  useEffect4(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        clearRef.current();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, []);
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        refs.setFloating(node);
+      },
+      style: {
+        ...floatingStyles,
+        zIndex: 9999
+      },
+      className: "bg-popover border rounded-md shadow-md overflow-hidden",
+      children: /* @__PURE__ */ jsx14(Command, { className: "w-[240px]", children: /* @__PURE__ */ jsxs5(CommandList, { className: "max-h-[300px]", children: [
+        /* @__PURE__ */ jsx14(CommandEmpty, { children: "No matching fields." }),
+        /* @__PURE__ */ jsx14(CommandGroup, { heading: "Merge fields", children: filteredFields.map(({ label, value }) => /* @__PURE__ */ jsxs5(
+          CommandItem,
+          {
+            value,
+            keywords: [label],
+            className: "flex items-center gap-2 cursor-pointer",
+            onSelect: () => handleSelect(value),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleSelect(value);
+            },
+            children: [
+              /* @__PURE__ */ jsx14(BracesIcon, { className: "w-4 h-4" }),
+              label
+            ]
+          },
+          value
+        )) })
+      ] }) })
+    }
+  );
+};
+
 // src/core/editor/components/tiptap-overlay.tsx
 import { useEditor, EditorContent } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
@@ -5861,7 +5914,7 @@ function normalizeKeyName(name) {
   }
   let alt;
   let ctrl;
-  let shift4;
+  let shift5;
   let meta;
   for (let i = 0; i < parts.length - 1; i += 1) {
     const mod = parts[i];
@@ -5872,7 +5925,7 @@ function normalizeKeyName(name) {
     } else if (/^(c|ctrl|control)$/i.test(mod)) {
       ctrl = true;
     } else if (/^s(hift)?$/i.test(mod)) {
-      shift4 = true;
+      shift5 = true;
     } else if (/^mod$/i.test(mod)) {
       if (isiOS() || isMacOS()) {
         meta = true;
@@ -5892,7 +5945,7 @@ function normalizeKeyName(name) {
   if (meta) {
     result = `Meta-${result}`;
   }
-  if (shift4) {
+  if (shift5) {
     result = `Shift-${result}`;
   }
   return result;
@@ -10744,8 +10797,8 @@ var Link = Mark.create({
 var index_default = Link;
 
 // src/core/editor/components/tiptap-overlay.tsx
-import { useFloating as useFloating3, autoUpdate as autoUpdate2, offset as offset3 } from "@floating-ui/react";
-import { useEffect as useEffect6, useRef as useRef4, useMemo as useMemo3, useState as useState2 } from "react";
+import { useFloating as useFloating4, autoUpdate as autoUpdate2, offset as offset4 } from "@floating-ui/react";
+import { useEffect as useEffect7, useRef as useRef5, useMemo as useMemo4, useState as useState3 } from "react";
 
 // src/core/editor/extensions/inverse-placeholder.ts
 import { Plugin as Plugin12, PluginKey as PluginKey10 } from "@tiptap/pm/state";
@@ -10955,25 +11008,69 @@ var HeadingParagraph = Node3.create({
   }
 });
 
+// src/core/editor/extensions/merge-field-decoration.ts
+import { Plugin as Plugin13, PluginKey as PluginKey11 } from "@tiptap/pm/state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
+var MERGE_FIELD_REGEX = /\{\{[a-zA-Z_][a-zA-Z0-9_]*\}\}/g;
+var MergeFieldDecoration = Extension.create({
+  name: "mergeFieldDecoration",
+  addProseMirrorPlugins() {
+    let cached = null;
+    return [
+      new Plugin13({
+        key: new PluginKey11("mergeFieldDecoration"),
+        props: {
+          decorations: (state) => {
+            const { doc } = state;
+            const docNodeSize = doc.nodeSize;
+            if (cached && cached.docNodeSize === docNodeSize) {
+              return cached.decorations;
+            }
+            const decorations = [];
+            doc.descendants((node, pos) => {
+              if (!node.isText || !node.text) return;
+              MERGE_FIELD_REGEX.lastIndex = 0;
+              let match;
+              while ((match = MERGE_FIELD_REGEX.exec(node.text)) !== null) {
+                const from = pos + match.index;
+                const to = from + match[0].length;
+                decorations.push(
+                  Decoration2.inline(from, to, { class: "merge-field-tag" })
+                );
+              }
+            });
+            const decorationSet = DecorationSet2.create(doc, decorations);
+            cached = { docNodeSize, decorations: decorationSet };
+            return decorationSet;
+          }
+        }
+      })
+    ];
+  }
+});
+
 // src/core/editor/hooks/use-editor-store-refs.ts
-import { useRef as useRef3, useEffect as useEffect4 } from "react";
+import { useRef as useRef4, useEffect as useEffect5 } from "react";
 function useEditorStoreRefs() {
   const store = useEditorStore();
   const refs = {
-    stopTextEditing: useRef3(store.stopTextEditing),
-    updateElementContent: useRef3(store.updateElementContent),
-    setSlashCommand: useRef3(store.setSlashCommand),
-    clearSlashCommand: useRef3(store.clearSlashCommand),
-    findAdjacentElement: useRef3(store.findAdjacentElement),
-    deleteElement: useRef3(store.deleteElement),
-    setFocusIdx: useRef3(store.setFocusIdx),
-    requestTextEditingOnElement: useRef3(store.requestTextEditingOnElement),
-    clearPendingTextEditRequest: useRef3(store.clearPendingTextEditRequest),
-    template: useRef3(store.template),
-    slashCommand: useRef3(store.slashCommand),
-    pushHistory: useRef3(store.pushHistory)
+    stopTextEditing: useRef4(store.stopTextEditing),
+    updateElementContent: useRef4(store.updateElementContent),
+    setSlashCommand: useRef4(store.setSlashCommand),
+    clearSlashCommand: useRef4(store.clearSlashCommand),
+    findAdjacentElement: useRef4(store.findAdjacentElement),
+    deleteElement: useRef4(store.deleteElement),
+    setFocusIdx: useRef4(store.setFocusIdx),
+    requestTextEditingOnElement: useRef4(store.requestTextEditingOnElement),
+    clearPendingTextEditRequest: useRef4(store.clearPendingTextEditRequest),
+    template: useRef4(store.template),
+    slashCommand: useRef4(store.slashCommand),
+    mergeFieldSuggestion: useRef4(store.mergeFieldSuggestion),
+    setMergeFieldSuggestion: useRef4(store.setMergeFieldSuggestion),
+    clearMergeFieldSuggestion: useRef4(store.clearMergeFieldSuggestion),
+    pushHistory: useRef4(store.pushHistory)
   };
-  useEffect4(() => {
+  useEffect5(() => {
     refs.stopTextEditing.current = store.stopTextEditing;
     refs.updateElementContent.current = store.updateElementContent;
     refs.setSlashCommand.current = store.setSlashCommand;
@@ -10985,6 +11082,9 @@ function useEditorStoreRefs() {
     refs.clearPendingTextEditRequest.current = store.clearPendingTextEditRequest;
     refs.template.current = store.template;
     refs.slashCommand.current = store.slashCommand;
+    refs.mergeFieldSuggestion.current = store.mergeFieldSuggestion;
+    refs.setMergeFieldSuggestion.current = store.setMergeFieldSuggestion;
+    refs.clearMergeFieldSuggestion.current = store.clearMergeFieldSuggestion;
     refs.pushHistory.current = store.pushHistory;
   }, [
     store.stopTextEditing,
@@ -10998,6 +11098,9 @@ function useEditorStoreRefs() {
     store.clearPendingTextEditRequest,
     store.template,
     store.slashCommand,
+    store.mergeFieldSuggestion,
+    store.setMergeFieldSuggestion,
+    store.clearMergeFieldSuggestion,
     store.pushHistory
   ]);
   return refs;
@@ -11045,12 +11148,12 @@ function checkElementPosition(template, elementIdx) {
 
 // src/components/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -11062,12 +11165,12 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipProvider, { children: /* @__PURE__ */ jsx14(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx15(TooltipProvider, { children: /* @__PURE__ */ jsx15(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx15(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -11075,7 +11178,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx15(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -11087,7 +11190,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx14(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ jsx15(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
@@ -11097,12 +11200,12 @@ function TooltipContent({
 import { BotIcon } from "lucide-react";
 
 // src/core/editor/components/text-link-menu.tsx
-import { useState, useEffect as useEffect5 } from "react";
+import { useState as useState2, useEffect as useEffect6 } from "react";
 
 // src/components/ui/input.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "input",
     {
       type,
@@ -11123,12 +11226,12 @@ import { CheckIcon, CopyIcon, LinkIcon as LinkIcon2, PencilIcon, TrashIcon } fro
 
 // src/components/ui/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -11143,14 +11246,14 @@ function Label({
 
 // src/components/ui/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Separator({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -11170,16 +11273,16 @@ var floatButtonVariants = "shadow-none transition-none cursor-pointer rounded-fu
 
 // src/components/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx19(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx19(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -11187,7 +11290,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx19(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -11203,16 +11306,16 @@ function PopoverContent({
 }
 
 // src/core/editor/components/text-link-menu.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 var TextLinkMenu = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [showCopied, setShowCopied] = useState(false);
-  const [linkType, setLinkType] = useState(LINK_TYPES[1]);
-  const [isLinkTypeOpen, setIsLinkTypeOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState2(false);
+  const [inputValue, setInputValue] = useState2("");
+  const [showCopied, setShowCopied] = useState2(false);
+  const [linkType, setLinkType] = useState2(LINK_TYPES[1]);
+  const [isLinkTypeOpen, setIsLinkTypeOpen] = useState2(false);
   const currentHref = editor.getAttributes("link").href || "";
   const hasLink = !!currentHref;
-  useEffect5(() => {
+  useEffect6(() => {
     if (isOpen) {
       setLinkType(detectLinkType(currentHref));
       setInputValue(stripPrefix(currentHref));
@@ -11254,42 +11357,42 @@ var TextLinkMenu = ({ editor }) => {
     editor.chain().focus().unsetLink().run();
     setInputValue("");
   };
-  return /* @__PURE__ */ jsxs6(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsxs6(Tooltip, { children: [
-      /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: hasLink ? /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs7(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs7(Tooltip, { children: [
+      /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(PopoverTrigger, { asChild: true, children: hasLink ? /* @__PURE__ */ jsx20(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: floatButtonVariants,
           onMouseDown: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ jsx19(PencilIcon, { className: "size-4" })
+          children: /* @__PURE__ */ jsx20(PencilIcon, { className: "size-4" })
         }
-      ) : /* @__PURE__ */ jsxs6(
+      ) : /* @__PURE__ */ jsxs7(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
           onMouseDown: (e) => e.preventDefault(),
           children: [
-            /* @__PURE__ */ jsx19(LinkIcon2, { className: "size-4" }),
-            /* @__PURE__ */ jsx19("p", { children: "Add link" })
+            /* @__PURE__ */ jsx20(LinkIcon2, { className: "size-4" }),
+            /* @__PURE__ */ jsx20("p", { children: "Add link" })
           ]
         }
       ) }) }),
-      /* @__PURE__ */ jsx19(TooltipContent, { side: "bottom", children: hasLink ? "Edit link" : "Add link" })
+      /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", children: hasLink ? "Edit link" : "Add link" })
     ] }),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7(
       PopoverContent,
       {
         side: "bottom",
         className: "w-[250px] p-3 shadow-lg z-50001",
         "data-editor-toolbar": true,
         children: [
-          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx19(Label, { children: "Enter a link" }),
-            /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx20(Label, { children: "Enter a link" }),
+            /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx20(
                 Input,
                 {
                   type: linkType.inputType,
@@ -11301,12 +11404,12 @@ var TextLinkMenu = ({ editor }) => {
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ jsxs6(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
-                /* @__PURE__ */ jsxs6(Tooltip, { children: [
-                  /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(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__ */ jsx19(linkType.icon, {}) }) }) }),
-                  /* @__PURE__ */ jsx19(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
+              /* @__PURE__ */ jsxs7(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
+                /* @__PURE__ */ jsxs7(Tooltip, { children: [
+                  /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(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__ */ jsx20(linkType.icon, {}) }) }) }),
+                  /* @__PURE__ */ jsx20(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
                 ] }),
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   PopoverContent,
                   {
                     side: "bottom",
@@ -11314,7 +11417,7 @@ var TextLinkMenu = ({ editor }) => {
                     className: "w-[160px] p-1 z-50001",
                     onPointerDownOutside: (e) => e.preventDefault(),
                     "data-editor-toolbar": true,
-                    children: LINK_TYPES.map((type) => /* @__PURE__ */ jsxs6(
+                    children: LINK_TYPES.map((type) => /* @__PURE__ */ jsxs7(
                       Button,
                       {
                         variant: "ghost",
@@ -11325,11 +11428,11 @@ var TextLinkMenu = ({ editor }) => {
                           setIsLinkTypeOpen(false);
                         },
                         children: [
-                          /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ jsx19(type.icon, { className: "size-4" }),
+                          /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx20(type.icon, { className: "size-4" }),
                             type.name
                           ] }),
-                          linkType.name === type.name && /* @__PURE__ */ jsx19(CheckIcon, { className: "size-4" })
+                          linkType.name === type.name && /* @__PURE__ */ jsx20(CheckIcon, { className: "size-4" })
                         ]
                       },
                       type.name
@@ -11339,11 +11442,11 @@ var TextLinkMenu = ({ editor }) => {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx19(Separator, { className: "my-2" }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex flex-row justify-between items-center", children: [
-            /* @__PURE__ */ jsxs6("div", { className: "flex flex-row", children: [
-              /* @__PURE__ */ jsxs6(Tooltip, { children: [
-                /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(Separator, { className: "my-2" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-row justify-between items-center", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex flex-row", children: [
+              /* @__PURE__ */ jsxs7(Tooltip, { children: [
+                /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
                   Button,
                   {
                     variant: "ghost",
@@ -11351,13 +11454,13 @@ var TextLinkMenu = ({ editor }) => {
                     className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
                     onClick: handleCopy,
                     disabled: !hasLink,
-                    children: showCopied ? /* @__PURE__ */ jsx19(CheckIcon, { className: "text-green-600" }) : /* @__PURE__ */ jsx19(CopyIcon, {})
+                    children: showCopied ? /* @__PURE__ */ jsx20(CheckIcon, { className: "text-green-600" }) : /* @__PURE__ */ jsx20(CopyIcon, {})
                   }
                 ) }),
-                /* @__PURE__ */ jsx19(TooltipContent, { side: "bottom", className: "z-50001", children: showCopied ? "Copied!" : "Copy link" })
+                /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", className: "z-50001", children: showCopied ? "Copied!" : "Copy link" })
               ] }),
-              /* @__PURE__ */ jsxs6(Tooltip, { children: [
-                /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsxs7(Tooltip, { children: [
+                /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
                   Button,
                   {
                     variant: "ghost",
@@ -11365,13 +11468,13 @@ var TextLinkMenu = ({ editor }) => {
                     className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
                     onClick: handleRemoveLink,
                     disabled: !hasLink,
-                    children: /* @__PURE__ */ jsx19(TrashIcon, {})
+                    children: /* @__PURE__ */ jsx20(TrashIcon, {})
                   }
                 ) }),
-                /* @__PURE__ */ jsx19(TooltipContent, { side: "bottom", className: "z-50001", children: "Remove link" })
+                /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", className: "z-50001", children: "Remove link" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(
               Button,
               {
                 variant: "default",
@@ -11388,16 +11491,16 @@ var TextLinkMenu = ({ editor }) => {
 };
 
 // src/core/editor/components/float-link-preview.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var FloatLinkPreview = ({ href }) => {
-  return /* @__PURE__ */ jsxs7(Tooltip, { children: [
-    /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20("div", { className: "max-w-[150px] min-w-[25px] h-[34px] px-4 hover:bg-accent rounded-full flex items-center justify-start", children: /* @__PURE__ */ jsx20("a", { href, target: "_blank", className: "shadow-none transition-none cursor-pointer outline-none text-[16px] text-blue-400 truncate", children: href }) }) }),
-    /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", children: href })
+  return /* @__PURE__ */ jsxs8(Tooltip, { children: [
+    /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21("div", { className: "max-w-[150px] min-w-[25px] h-[34px] px-4 hover:bg-accent rounded-full flex items-center justify-start", children: /* @__PURE__ */ jsx21("a", { href, target: "_blank", className: "shadow-none transition-none cursor-pointer outline-none text-[16px] text-blue-400 truncate", children: href }) }) }),
+    /* @__PURE__ */ jsx21(TooltipContent, { side: "bottom", children: href })
   ] });
 };
 
 // src/core/editor/components/tiptap-overlay.tsx
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var FontFamily = Extension.create({
   name: "fontFamily",
   addGlobalAttributes() {
@@ -11575,7 +11678,8 @@ var TIPTAP_EXTENSIONS = [
     emptyNodeClass: "is-empty-placeholder",
     paragraphPlaceholder: "Start typing...",
     headingPlaceholder: "Heading"
-  })
+  }),
+  MergeFieldDecoration
 ];
 function isNodeEmpty2(node) {
   if (!node) return true;
@@ -11706,16 +11810,16 @@ function handleBackspaceOrDelete(view, event, currentElementIdx, storeRefs) {
 var TiptapOverlay = () => {
   const textEditing = useEditorStore((s) => s.textEditing);
   if (!textEditing) return null;
-  return /* @__PURE__ */ jsx21(TiptapOverlayContent, { ...textEditing }, textEditing.idx);
+  return /* @__PURE__ */ jsx22(TiptapOverlayContent, { ...textEditing }, textEditing.idx);
 };
 var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWidth, initialHeight, clickX, clickY, content, styles, cursorPosition }) => {
-  const containerRef = useRef4(null);
+  const containerRef = useRef5(null);
   const setTiptapEditor = useEditorStore((s) => s.setTiptapEditor);
   const linkColor = useEditorStore((s) => s.template?.content?.[0]?.data?.value?.linkColor) || "#0000ff";
-  const lastSizeLimitToastRef = useRef4(0);
-  const hasContentChangedRef = useRef4(false);
+  const lastSizeLimitToastRef = useRef5(0);
+  const hasContentChangedRef = useRef5(false);
   const storeRefs = useEditorStoreRefs();
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       const isUndoRedoAction = useEditorStore.getState().isUndoRedoAction;
       if (hasContentChangedRef.current && !isUndoRedoAction) {
@@ -11723,7 +11827,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       }
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(() => {
@@ -11741,10 +11845,10 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       }
     };
   }, [getShadowElement]);
-  const cleanedContent = useMemo3(() => {
+  const cleanedContent = useMemo4(() => {
     return content.replace(NBSP_P_CONTENT_REGEX, "<p$1></p>").replace(IS_EMPTY_P_CLASS_REGEX, "").replace(IS_EMPTY_HEADING_CLASS_REGEX, "");
   }, [content]);
-  const lineHeightRatio = useMemo3(() => {
+  const lineHeightRatio = useMemo4(() => {
     const lineHeightPx = parseFloat(styles.lineHeight);
     const fontSizePx = parseFloat(styles.fontSize);
     if (isNaN(lineHeightPx) || isNaN(fontSizePx) || fontSizePx === 0) {
@@ -11752,7 +11856,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
     }
     return lineHeightPx / fontSizePx;
   }, [styles.lineHeight, styles.fontSize]);
-  const virtualReference = useMemo3(() => ({
+  const virtualReference = useMemo4(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -11761,14 +11865,14 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       return rect;
     }
   }), [getReferenceRect]);
-  const { floatingStyles, refs, update } = useFloating3({
+  const { floatingStyles, refs, update } = useFloating4({
     placement: "bottom-start",
     middleware: [
-      offset3(({ rects }) => -rects.reference.height)
+      offset4(({ rects }) => -rects.reference.height)
       // Move up by reference height to overlay exactly
     ]
   });
-  useEffect6(() => {
+  useEffect7(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -11807,17 +11911,36 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
           }
         }
         const isSlashCommandActive = storeRefs.slashCommand.current?.isActive;
-        if (event.key === "Escape" && isSlashCommandActive) {
-          storeRefs.clearSlashCommand.current();
-          return true;
+        const isMergeFieldActive = storeRefs.mergeFieldSuggestion.current?.isActive;
+        if (event.key === "Escape") {
+          if (isSlashCommandActive) {
+            storeRefs.clearSlashCommand.current();
+            return true;
+          }
+          if (isMergeFieldActive) {
+            storeRefs.clearMergeFieldSuggestion.current();
+            return true;
+          }
         }
-        if (event.key === " " && isSlashCommandActive) {
-          storeRefs.clearSlashCommand.current();
-          return false;
+        if (event.key === " ") {
+          if (isSlashCommandActive) {
+            storeRefs.clearSlashCommand.current();
+            return false;
+          }
+          if (isMergeFieldActive) {
+            storeRefs.clearMergeFieldSuggestion.current();
+            return false;
+          }
         }
-        if ((event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") && isSlashCommandActive) {
-          storeRefs.clearSlashCommand.current();
-          return false;
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+          if (isSlashCommandActive) {
+            storeRefs.clearSlashCommand.current();
+            return false;
+          }
+          if (isMergeFieldActive) {
+            storeRefs.clearMergeFieldSuggestion.current();
+            return false;
+          }
         }
         if (event.key === "/") {
           const { from } = view.state.selection;
@@ -11839,6 +11962,33 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
             });
           }
         }
+        if (event.key === "{") {
+          const { from } = view.state.selection;
+          const textBefore = view.state.doc.textBetween(Math.max(0, from - 1), from);
+          if (textBefore === "{") {
+            const coords = view.coordsAtPos(from);
+            if (coords && coords.left > 0 && coords.top > 0) {
+              const lineHeight = parseInt(styles.lineHeight) || 20;
+              storeRefs.setMergeFieldSuggestion.current({
+                isActive: true,
+                cursorRect: { top: coords.top, left: coords.left, height: lineHeight },
+                triggerPosition: from - 1
+                // Position of first "{"
+              });
+            }
+          }
+        }
+        if (event.key === "}" && isMergeFieldActive) {
+          storeRefs.clearMergeFieldSuggestion.current();
+          return false;
+        }
+        if (event.key === "Backspace" && isMergeFieldActive) {
+          const { from } = view.state.selection;
+          const triggerPos = storeRefs.mergeFieldSuggestion.current?.triggerPosition ?? 0;
+          if (from <= triggerPos + 2) {
+            storeRefs.clearMergeFieldSuggestion.current();
+          }
+        }
         if (event.key === "Backspace" || event.key === "Delete") {
           const handled = handleBackspaceOrDelete(
             view,
@@ -11905,8 +12055,8 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       storeRefs.updateElementContent.current(`${idx}.data.value.content`, html);
     }
   });
-  const [currentLinkHref, setCurrentLinkHref] = useState2("");
-  useEffect6(() => {
+  const [currentLinkHref, setCurrentLinkHref] = useState3("");
+  useEffect7(() => {
     if (!editor) return;
     setTiptapEditor(editor);
     const updateLinkHref = () => {
@@ -11921,7 +12071,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       editor.off("transaction", updateLinkHref);
     };
   }, [editor, setTiptapEditor]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (editor) {
       const timer = setTimeout(() => {
         if (cursorPosition === "end") {
@@ -11950,7 +12100,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       return () => clearTimeout(timer);
     }
   }, [editor, clickX, clickY, cursorPosition]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       if (containerRef.current && containerRef.current.contains(target)) {
@@ -11972,7 +12122,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: (node) => {
@@ -12005,7 +12155,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ jsx21("style", { children: `
+        /* @__PURE__ */ jsx22("style", { children: `
         .tiptap-overlay {
           margin: 0;
           padding: 0;
@@ -12071,6 +12221,16 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
           transform: translateY(-50%);
           text-align: inherit;
         }
+        .tiptap-overlay .ProseMirror .merge-field-tag {
+          background-color: var(--background);
+          border-radius: 4px;
+          padding: 4px;
+          border: 1px solid var(--border);
+          color: #000000;
+        }
+        .tiptap-overlay .ProseMirror .merge-field-tag:hover {
+          cursor: pointer;
+        }
         .tiptap-overlay .ProseMirror a {
           color: ${linkColor};
           text-decoration: none;
@@ -12080,36 +12240,36 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
           text-decoration: underline;
         }
       ` }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           EditorContent,
           {
             editor,
             className: "tiptap-overlay"
           }
         ),
-        editor && /* @__PURE__ */ jsx21(
+        editor && /* @__PURE__ */ jsx22(
           BubbleMenu,
           {
             editor,
             options: { placement: "top", offset: 8, flip: true },
             updateDelay: 0,
-            children: /* @__PURE__ */ jsxs8("div", { className: "bg-white flex items-center justify-center border h-[36px] w-fit shadow-md rounded-full text-[16px]", children: [
-              /* @__PURE__ */ jsxs8(Tooltip, { children: [
-                /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs9("div", { className: "bg-white flex items-center justify-center border h-[36px] w-fit shadow-md rounded-full text-[16px]", children: [
+              /* @__PURE__ */ jsxs9(Tooltip, { children: [
+                /* @__PURE__ */ jsx22(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
                   Button,
                   {
                     variant: "ghost",
                     className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
                     children: [
-                      /* @__PURE__ */ jsx21(BotIcon, { className: "size-4" }),
-                      /* @__PURE__ */ jsx21("p", { children: "Magic Write" })
+                      /* @__PURE__ */ jsx22(BotIcon, { className: "size-4" }),
+                      /* @__PURE__ */ jsx22("p", { children: "Magic Write" })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx21(TooltipContent, { side: "bottom", children: "Ask Maillow" })
+                /* @__PURE__ */ jsx22(TooltipContent, { side: "bottom", children: "Ask Maillow" })
               ] }),
-              currentLinkHref && /* @__PURE__ */ jsx21(FloatLinkPreview, { href: currentLinkHref }),
-              /* @__PURE__ */ jsx21(TextLinkMenu, { editor })
+              currentLinkHref && /* @__PURE__ */ jsx22(FloatLinkPreview, { href: currentLinkHref }),
+              /* @__PURE__ */ jsx22(TextLinkMenu, { editor })
             ] })
           }
         )
@@ -12119,12 +12279,12 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
 };
 
 // src/core/editor/components/element-float.tsx
-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";
+import { useEffect as useEffect13, useMemo as useMemo12 } from "react";
+import { useFloating as useFloating5, offset as offset5, shift as shift4, flip as flip3, autoUpdate as autoUpdate3 } from "@floating-ui/react";
 
 // src/core/editor/components/float-ui/actions/delete-button.tsx
 import { TrashIcon as TrashIcon2 } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var DeleteButton = () => {
   const { focusIdx, deleteElement } = useEditorStore();
   const handleDelete = () => {
@@ -12132,23 +12292,23 @@ var DeleteButton = () => {
       deleteElement(focusIdx);
     }
   };
-  return /* @__PURE__ */ jsxs9(Tooltip, { children: [
-    /* @__PURE__ */ jsx22(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs10(Tooltip, { children: [
+    /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
       Button,
       {
         variant: "ghost",
         className: floatButtonVariants,
         onClick: handleDelete,
-        children: /* @__PURE__ */ jsx22(TrashIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx23(TrashIcon2, { className: "size-4" })
       }
     ) }),
-    /* @__PURE__ */ jsx22(TooltipContent, { side: "bottom", children: "Delete" })
+    /* @__PURE__ */ jsx23(TooltipContent, { side: "bottom", children: "Delete" })
   ] });
 };
 
 // src/core/editor/components/float-ui/actions/dulicate-button.tsx
 import { CopyIcon as CopyIcon2 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var DuplicateButton = () => {
   const { focusIdx, duplicateElement } = useEditorStore();
   const isAtSizeLimit = useEditorStore((state) => state.isAtSizeLimit);
@@ -12157,42 +12317,42 @@ var DuplicateButton = () => {
       duplicateElement(focusIdx);
     }
   };
-  return /* @__PURE__ */ jsxs10(Tooltip, { children: [
-    /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs11(Tooltip, { children: [
+    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(
       Button,
       {
         variant: "ghost",
         className: floatButtonVariants,
         onClick: handleDuplicate,
         disabled: isAtSizeLimit,
-        children: /* @__PURE__ */ jsx23(CopyIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx24(CopyIcon2, { className: "size-4" })
       }
     ) }),
-    /* @__PURE__ */ jsx23(TooltipContent, { side: "bottom", children: "Duplicate" })
+    /* @__PURE__ */ jsx24(TooltipContent, { side: "bottom", children: "Duplicate" })
   ] });
 };
 
 // src/core/editor/components/href-menu.tsx
-import { useState as useState3, useEffect as useEffect7, useCallback as useCallback4, useMemo as useMemo5 } from "react";
+import { useState as useState4, useEffect as useEffect8, useCallback as useCallback5, useMemo as useMemo6 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -12205,7 +12365,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -12224,7 +12384,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -12242,7 +12402,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -12254,7 +12414,7 @@ function DropdownMenuSeparator({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -12262,7 +12422,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -12274,7 +12434,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx24(ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ jsx25(ChevronRightIcon, { className: "ml-auto size-4" })
       ]
     }
   );
@@ -12283,7 +12443,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -12300,11 +12460,11 @@ function DropdownMenuSubContent({
 import { CheckIcon as CheckIcon3, CopyIcon as CopyIcon3, LinkIcon as LinkIcon3, PencilIcon as PencilIcon2, TrashIcon as TrashIcon3 } from "lucide-react";
 
 // src/core/editor/hooks/use-href.ts
-import { useMemo as useMemo4, useCallback as useCallback3 } from "react";
+import { useMemo as useMemo5, useCallback as useCallback4 } from "react";
 import { get as lodashGet2 } from "lodash";
 var useHref = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const { element, href } = useMemo4(() => {
+  const { element, href } = useMemo5(() => {
     if (!focusIdx || !template) {
       return { element: null, href: "" };
     }
@@ -12315,19 +12475,19 @@ var useHref = () => {
       href: el?.attributes?.href || ""
     };
   }, [focusIdx, template]);
-  const setHref = useCallback3((url) => {
+  const setHref = useCallback4((url) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, href: url }
     });
   }, [focusIdx, element, updateElement]);
-  const clearHref = useCallback3(() => {
+  const clearHref = useCallback4(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, href: "" }
     });
   }, [focusIdx, element, updateElement]);
-  const copyHref = useCallback3(async () => {
+  const copyHref = useCallback4(async () => {
     if (href) {
       try {
         await navigator.clipboard.writeText(href);
@@ -12347,18 +12507,18 @@ var useHref = () => {
 };
 
 // src/core/editor/components/href-menu.tsx
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } 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);
+  const [isOpen, setIsOpen] = useState4(false);
+  const [inputValue, setInputValue] = useState4("");
+  const [showCopied, setShowCopied] = useState4(false);
+  const [linkType, setLinkType] = useState4(LINK_TYPES[1]);
+  const [isLinkTypeOpen, setIsLinkTypeOpen] = useState4(false);
+  const [isPresetOpen, setIsPresetOpen] = useState4(false);
   console.log("userData", userData);
-  const availablePresets = useMemo5(() => {
+  const availablePresets = useMemo6(() => {
     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]) }));
@@ -12366,11 +12526,11 @@ var HrefMenu = () => {
     const query = inputValue.toLowerCase();
     return all.filter((p) => p.value.toLowerCase().includes(query));
   }, [linkType.name, userData, inputValue]);
-  const handlePresetSelect = useCallback4((value) => {
+  const handlePresetSelect = useCallback5((value) => {
     setInputValue(value);
     setIsPresetOpen(false);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isOpen) {
       setLinkType(detectLinkType(href));
       setInputValue(stripPrefix(href));
@@ -12421,35 +12581,35 @@ var HrefMenu = () => {
     setHref(buildHref(inputValue));
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs12(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsxs12(Tooltip, { children: [
-      /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs13(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs13(Tooltip, { children: [
+      /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ jsx26(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: floatButtonVariants,
-          children: /* @__PURE__ */ jsx25(PencilIcon2, { className: "size-4" })
+          children: /* @__PURE__ */ jsx26(PencilIcon2, { className: "size-4" })
         }
-      ) : /* @__PURE__ */ jsxs12(
+      ) : /* @__PURE__ */ jsxs13(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
           children: [
-            /* @__PURE__ */ jsx25(LinkIcon3, { className: "size-4" }),
-            /* @__PURE__ */ jsx25("p", { children: "Add link" })
+            /* @__PURE__ */ jsx26(LinkIcon3, { className: "size-4" }),
+            /* @__PURE__ */ jsx26("p", { children: "Add link" })
           ]
         }
       ) }) }),
-      /* @__PURE__ */ jsx25(TooltipContent, { side: "bottom", children: hasHref ? `Edit link` : "Add link" })
+      /* @__PURE__ */ jsx26(TooltipContent, { side: "bottom", children: hasHref ? `Edit link` : "Add link" })
     ] }),
-    /* @__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(Popover, { open: isPresetOpen && availablePresets.length > 0, onOpenChange: setIsPresetOpen, children: [
-          /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs13(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx26(Label, { children: "Enter a link" }),
+        /* @__PURE__ */ jsxs13(Popover, { open: isPresetOpen && availablePresets.length > 0, onOpenChange: setIsPresetOpen, children: [
+          /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx26(
               Input,
               {
                 type: linkType.inputType,
@@ -12463,19 +12623,19 @@ var HrefMenu = () => {
                 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__ */ jsxs13(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
+              /* @__PURE__ */ jsxs13(Tooltip, { children: [
+                /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(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__ */ jsx26(linkType.icon, {}) }) }) }),
+                /* @__PURE__ */ jsx26(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
               ] }),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 PopoverContent,
                 {
                   side: "bottom",
                   align: "start",
                   className: "w-[160px] p-1 z-50001",
                   onPointerDownOutside: (e) => e.preventDefault(),
-                  children: LINK_TYPES.map((type) => /* @__PURE__ */ jsxs12(
+                  children: LINK_TYPES.map((type) => /* @__PURE__ */ jsxs13(
                     Button,
                     {
                       variant: "ghost",
@@ -12486,11 +12646,11 @@ var HrefMenu = () => {
                         setIsLinkTypeOpen(false);
                       },
                       children: [
-                        /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx25(type.icon, { className: "size-4" }),
+                        /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx26(type.icon, { className: "size-4" }),
                           type.name
                         ] }),
-                        linkType.name === type.name && /* @__PURE__ */ jsx25(CheckIcon3, { className: "size-4" })
+                        linkType.name === type.name && /* @__PURE__ */ jsx26(CheckIcon3, { className: "size-4" })
                       ]
                     },
                     type.name
@@ -12499,14 +12659,14 @@ var HrefMenu = () => {
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             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(
+              children: /* @__PURE__ */ jsx26("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: availablePresets.map((preset) => /* @__PURE__ */ jsxs13(
                 "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" : ""}`,
@@ -12515,11 +12675,11 @@ var HrefMenu = () => {
                     handlePresetSelect(preset.value);
                   },
                   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 })
+                    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-start gap-0.5", children: [
+                      /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: preset.label }),
+                      /* @__PURE__ */ jsx26("span", { className: "text-sm", children: preset.value })
                     ] }),
-                    inputValue === preset.value && /* @__PURE__ */ jsx25(CheckIcon3, { className: "w-4 h-4 shrink-0" })
+                    inputValue === preset.value && /* @__PURE__ */ jsx26(CheckIcon3, { className: "w-4 h-4 shrink-0" })
                   ]
                 },
                 preset.key
@@ -12528,11 +12688,11 @@ var HrefMenu = () => {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx25(Separator, { className: "my-2" }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex flex-row", children: [
-          /* @__PURE__ */ jsxs12(Tooltip, { children: [
-            /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(Separator, { className: "my-2" }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-row", children: [
+          /* @__PURE__ */ jsxs13(Tooltip, { children: [
+            /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(
               Button,
               {
                 variant: "ghost",
@@ -12540,13 +12700,13 @@ var HrefMenu = () => {
                 className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
                 onClick: handleCopy,
                 disabled: !hasHref,
-                children: showCopied ? /* @__PURE__ */ jsx25(CheckIcon3, { className: "text-green-600" }) : /* @__PURE__ */ jsx25(CopyIcon3, {})
+                children: showCopied ? /* @__PURE__ */ jsx26(CheckIcon3, { className: "text-green-600" }) : /* @__PURE__ */ jsx26(CopyIcon3, {})
               }
             ) }),
-            /* @__PURE__ */ jsx25(TooltipContent, { side: "bottom", className: "z-50001", children: showCopied ? "Copied!" : "Copy link" })
+            /* @__PURE__ */ jsx26(TooltipContent, { side: "bottom", className: "z-50001", children: showCopied ? "Copied!" : "Copy link" })
           ] }),
-          /* @__PURE__ */ jsxs12(Tooltip, { children: [
-            /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsxs13(Tooltip, { children: [
+            /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(
               Button,
               {
                 variant: "ghost",
@@ -12554,13 +12714,13 @@ var HrefMenu = () => {
                 className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
                 onClick: handleClear,
                 disabled: !href,
-                children: /* @__PURE__ */ jsx25(TrashIcon3, {})
+                children: /* @__PURE__ */ jsx26(TrashIcon3, {})
               }
             ) }),
-            /* @__PURE__ */ jsx25(TooltipContent, { side: "bottom", className: "z-50001", children: "Remove link" })
+            /* @__PURE__ */ jsx26(TooltipContent, { side: "bottom", className: "z-50001", children: "Remove link" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsx26(
           Button,
           {
             variant: "default",
@@ -12575,14 +12735,14 @@ var HrefMenu = () => {
 };
 
 // src/core/editor/components/element-gear/button/float.tsx
-import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var ButtonFloat = () => {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    hasHref && /* @__PURE__ */ jsx26(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx26(HrefMenu, {}),
-    /* @__PURE__ */ jsx26(DuplicateButton, {}),
-    /* @__PURE__ */ jsx26(DeleteButton, {})
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    hasHref && /* @__PURE__ */ jsx27(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx27(HrefMenu, {}),
+    /* @__PURE__ */ jsx27(DuplicateButton, {}),
+    /* @__PURE__ */ jsx27(DeleteButton, {})
   ] });
 };
 
@@ -12590,11 +12750,11 @@ var ButtonFloat = () => {
 import { ChevronsLeftRightIcon, ChevronsRightLeftIcon, MoreHorizontalIcon } from "lucide-react";
 
 // src/core/editor/hooks/use-full-width-toggle.ts
-import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
 import { get as lodashGet3 } from "lodash";
 function useFullWidthToggle() {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const { element, isFullWidth } = useMemo6(() => {
+  const { element, isFullWidth } = useMemo7(() => {
     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);
@@ -12603,7 +12763,7 @@ function useFullWidthToggle() {
       isFullWidth: el?.attributes?.["full-width"] === "full-width"
     };
   }, [focusIdx, template]);
-  const handleToggleFullWidth = useCallback5(() => {
+  const handleToggleFullWidth = useCallback6(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     if (isFullWidth) {
@@ -12617,20 +12777,20 @@ function useFullWidthToggle() {
 }
 
 // src/core/editor/components/element-gear/section/float.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var SectionFloat = () => {
   const { isFullWidth, handleToggleFullWidth } = useFullWidthToggle();
-  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx27(DuplicateButton, {}),
-    /* @__PURE__ */ jsx27(DeleteButton, {}),
-    /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxs14(Tooltip, { children: [
-        /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx27(MoreHorizontalIcon, { className: "w-4 h-4" }) }) }) }),
-        /* @__PURE__ */ jsx27(TooltipContent, { side: "bottom", children: "More" })
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx28(DuplicateButton, {}),
+    /* @__PURE__ */ jsx28(DeleteButton, {}),
+    /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs15(Tooltip, { children: [
+        /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx28(MoreHorizontalIcon, { className: "w-4 h-4" }) }) }) }),
+        /* @__PURE__ */ jsx28(TooltipContent, { side: "bottom", children: "More" })
       ] }),
-      /* @__PURE__ */ jsx27(DropdownMenuContent, { side: "bottom", className: "w-[200px]", children: /* @__PURE__ */ jsxs14(DropdownMenuItem, { onClick: handleToggleFullWidth, children: [
-        isFullWidth ? /* @__PURE__ */ jsx27(ChevronsRightLeftIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx27(ChevronsLeftRightIcon, { className: "w-4 h-4" }),
-        /* @__PURE__ */ jsx27("p", { children: isFullWidth ? "Reset to original width" : "Expand to full width" })
+      /* @__PURE__ */ jsx28(DropdownMenuContent, { side: "bottom", className: "w-[200px]", children: /* @__PURE__ */ jsxs15(DropdownMenuItem, { onClick: handleToggleFullWidth, children: [
+        isFullWidth ? /* @__PURE__ */ jsx28(ChevronsRightLeftIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx28(ChevronsLeftRightIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx28("p", { children: isFullWidth ? "Reset to original width" : "Expand to full width" })
       ] }) })
     ] })
   ] });
@@ -12640,11 +12800,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 useCallback6, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo8 } from "react";
 import { get as lodashGet4 } from "lodash";
 function useNoWrap() {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const { element, noWrap } = useMemo7(() => {
+  const { element, noWrap } = useMemo8(() => {
     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);
@@ -12653,7 +12813,7 @@ function useNoWrap() {
       noWrap: el?.data?.value?.noWrap === true
     };
   }, [focusIdx, template]);
-  const handleToggleNoWrap = useCallback6(() => {
+  const handleToggleNoWrap = useCallback7(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       data: {
@@ -12668,30 +12828,30 @@ function useNoWrap() {
 }
 
 // src/core/editor/components/element-gear/section-column/float.tsx
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var SectionColumnFloat = () => {
   const { isFullWidth, handleToggleFullWidth } = useFullWidthToggle();
   const { noWrap, handleToggleNoWrap } = useNoWrap();
-  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
-    /* @__PURE__ */ jsx28(DuplicateButton, {}),
-    /* @__PURE__ */ jsx28(DeleteButton, {}),
-    /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxs15(Tooltip, { children: [
-        /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx28(MoreHorizontalIcon2, { className: "w-4 h-4" }) }) }) }),
-        /* @__PURE__ */ jsx28(TooltipContent, { side: "bottom", children: "More" })
+  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
+    /* @__PURE__ */ jsx29(DuplicateButton, {}),
+    /* @__PURE__ */ jsx29(DeleteButton, {}),
+    /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs16(Tooltip, { children: [
+        /* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx29(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx29(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx29(MoreHorizontalIcon2, { className: "w-4 h-4" }) }) }) }),
+        /* @__PURE__ */ jsx29(TooltipContent, { side: "bottom", children: "More" })
       ] }),
-      /* @__PURE__ */ jsxs15(DropdownMenuContent, { side: "bottom", className: "w-[250px]", children: [
-        /* @__PURE__ */ jsxs15(DropdownMenuItem, { onClick: handleToggleNoWrap, children: [
-          /* @__PURE__ */ jsx28(Layers2Icon, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 w-full", children: [
-            /* @__PURE__ */ jsx28("p", { className: "w-full", children: noWrap ? "Columns collapse" : "Columns collapse" }),
-            !noWrap && /* @__PURE__ */ jsx28(CheckIcon4, { className: "w-4 h-4" })
+      /* @__PURE__ */ jsxs16(DropdownMenuContent, { side: "bottom", className: "w-[250px]", children: [
+        /* @__PURE__ */ jsxs16(DropdownMenuItem, { onClick: handleToggleNoWrap, children: [
+          /* @__PURE__ */ jsx29(Layers2Icon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 w-full", children: [
+            /* @__PURE__ */ jsx29("p", { className: "w-full", children: noWrap ? "Columns collapse" : "Columns collapse" }),
+            !noWrap && /* @__PURE__ */ jsx29(CheckIcon4, { className: "w-4 h-4" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx28(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs15(DropdownMenuItem, { onClick: handleToggleFullWidth, children: [
-          isFullWidth ? /* @__PURE__ */ jsx28(ChevronsRightLeftIcon2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx28(ChevronsLeftRightIcon2, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx28("p", { children: isFullWidth ? "Reset to original width" : "Expand to full width" })
+        /* @__PURE__ */ jsx29(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs16(DropdownMenuItem, { onClick: handleToggleFullWidth, children: [
+          isFullWidth ? /* @__PURE__ */ jsx29(ChevronsRightLeftIcon2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx29(ChevronsLeftRightIcon2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx29("p", { children: isFullWidth ? "Reset to original width" : "Expand to full width" })
         ] })
       ] })
     ] })
@@ -12699,11 +12859,11 @@ var SectionColumnFloat = () => {
 };
 
 // src/core/editor/components/element-gear/spacer/float.tsx
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var SpacerFloat = () => {
-  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
-    /* @__PURE__ */ jsx29(DuplicateButton, {}),
-    /* @__PURE__ */ jsx29(DeleteButton, {})
+  return /* @__PURE__ */ jsxs17(Fragment9, { children: [
+    /* @__PURE__ */ jsx30(DuplicateButton, {}),
+    /* @__PURE__ */ jsx30(DeleteButton, {})
   ] });
 };
 
@@ -12711,16 +12871,16 @@ var SpacerFloat = () => {
 import { MoreHorizontalIcon as MoreHorizontalIcon3, PlusCircleIcon } from "lucide-react";
 
 // src/core/editor/components/email-template-v2/context/sidebar-context.tsx
-import { createContext, useContext, useState as useState4 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { createContext, useContext, useState as useState5 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SidebarContext = createContext(null);
 var PICKER_VIEWS = ["color", "images", "add-social"];
 function SidebarProvider({ children }) {
-  const [activeView, setActiveViewState] = useState4("elements");
-  const [lastView, setLastView] = useState4("elements");
-  const [colorType, setColorType] = useState4("Color");
-  const [colorTarget, setColorTarget] = useState4(null);
-  const [imageTarget, setImageTarget] = useState4(null);
+  const [activeView, setActiveViewState] = useState5("elements");
+  const [lastView, setLastView] = useState5("elements");
+  const [colorType, setColorType] = useState5("Color");
+  const [colorTarget, setColorTarget] = useState5(null);
+  const [imageTarget, setImageTarget] = useState5(null);
   const setActiveView = (view) => {
     if (view !== activeView) {
       if (!PICKER_VIEWS.includes(activeView)) {
@@ -12729,7 +12889,7 @@ function SidebarProvider({ children }) {
     }
     setActiveViewState(view);
   };
-  return /* @__PURE__ */ jsx30(SidebarContext.Provider, { value: { activeView, setActiveView, lastView, colorType, setColorType, colorTarget, setColorTarget, imageTarget, setImageTarget }, children });
+  return /* @__PURE__ */ jsx31(SidebarContext.Provider, { value: { activeView, setActiveView, lastView, colorType, setColorType, colorTarget, setColorTarget, imageTarget, setImageTarget }, children });
 }
 function useSidebarContext() {
   const context = useContext(SidebarContext);
@@ -12740,33 +12900,33 @@ function useSidebarContext() {
 }
 
 // src/core/editor/components/element-gear/social/float.tsx
-import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var SocialFloat = () => {
   const { setActiveView } = useSidebarContext();
-  return /* @__PURE__ */ jsxs17(Fragment10, { children: [
-    /* @__PURE__ */ jsxs17(Tooltip, { children: [
-      /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { variant: "ghost", className: floatButtonVariants, onClick: () => setActiveView("add-social"), children: /* @__PURE__ */ jsx31(PlusCircleIcon, {}) }) }),
-      /* @__PURE__ */ jsx31(TooltipContent, { side: "bottom", children: "Add Social" })
+  return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+    /* @__PURE__ */ jsxs18(Tooltip, { children: [
+      /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "ghost", className: floatButtonVariants, onClick: () => setActiveView("add-social"), children: /* @__PURE__ */ jsx32(PlusCircleIcon, {}) }) }),
+      /* @__PURE__ */ jsx32(TooltipContent, { side: "bottom", children: "Add Social" })
     ] }),
-    /* @__PURE__ */ jsx31(DuplicateButton, {}),
-    /* @__PURE__ */ jsx31(DeleteButton, {}),
-    /* @__PURE__ */ jsxs17(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxs17(Tooltip, { children: [
-        /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx31(MoreHorizontalIcon3, { className: "w-4 h-4" }) }) }) }),
-        /* @__PURE__ */ jsx31(TooltipContent, { side: "bottom", children: "More" })
+    /* @__PURE__ */ jsx32(DuplicateButton, {}),
+    /* @__PURE__ */ jsx32(DeleteButton, {}),
+    /* @__PURE__ */ jsxs18(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs18(Tooltip, { children: [
+        /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx32(MoreHorizontalIcon3, { className: "w-4 h-4" }) }) }) }),
+        /* @__PURE__ */ jsx32(TooltipContent, { side: "bottom", children: "More" })
       ] }),
-      /* @__PURE__ */ jsx31(DropdownMenuContent, { side: "bottom", className: "w-[200px]", children: /* @__PURE__ */ jsxs17(DropdownMenuItem, { onClick: () => setActiveView("add-social"), children: [
-        /* @__PURE__ */ jsx31(PlusCircleIcon, { className: "w-4 h-4" }),
-        /* @__PURE__ */ jsx31("p", { children: "Add Social" })
+      /* @__PURE__ */ jsx32(DropdownMenuContent, { side: "bottom", className: "w-[200px]", children: /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => setActiveView("add-social"), children: [
+        /* @__PURE__ */ jsx32(PlusCircleIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx32("p", { children: "Add Social" })
       ] }) })
     ] })
   ] });
 };
 
 // src/components/ui/textarea.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "textarea",
     {
       "data-slot": "textarea",
@@ -12781,38 +12941,38 @@ function Textarea({ className, ...props }) {
 
 // src/core/editor/components/element-gear/social-item/float.tsx
 import { Accessibility, MoreHorizontalIcon as MoreHorizontalIcon4, TrashIcon as TrashIcon4 } from "lucide-react";
-import { useState as useState6, useEffect as useEffect9 } from "react";
+import { useState as useState7, useEffect as useEffect10 } from "react";
 
 // src/core/editor/components/social-item-menu.tsx
-import { useState as useState5, useEffect as useEffect8, useMemo as useMemo8, useCallback as useCallback7 } from "react";
+import { useState as useState6, useEffect as useEffect9, useMemo as useMemo9, useCallback as useCallback8 } 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";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 var SocialItemMenu = ({ hasHref }) => {
-  const [isOpen, setIsOpen] = useState5(false);
-  const [showCopied, setShowCopied] = useState5(false);
-  const [hrefInputValue, setHrefInputValue] = useState5("");
-  const [contentInputValue, setContentInputValue] = useState5("");
+  const [isOpen, setIsOpen] = useState6(false);
+  const [showCopied, setShowCopied] = useState6(false);
+  const [hrefInputValue, setHrefInputValue] = useState6("");
+  const [contentInputValue, setContentInputValue] = useState6("");
   const { href, setHref, copyHref } = useHref();
   const { focusIdx, template, updateElement } = useEditorStore();
-  const element = useMemo8(() => {
+  const element = useMemo9(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.?\[(\d+)\]/g, "[$1]") : focusIdx;
     return lodashGet5(template, path);
   }, [focusIdx, template]);
   const content = element?.data?.value?.content || "";
-  useEffect8(() => {
+  useEffect9(() => {
     if (isOpen) {
       setHrefInputValue(href);
       setContentInputValue(content);
     }
   }, [isOpen, href, content]);
-  const handleCopy = useCallback7(async () => {
+  const handleCopy = useCallback8(async () => {
     await copyHref();
     setShowCopied(true);
     setTimeout(() => setShowCopied(false), 2e3);
   }, [copyHref]);
-  const handleDone = useCallback7(() => {
+  const handleDone = useCallback8(() => {
     setHref(normalizeWebsiteUrl(hrefInputValue));
     if (focusIdx && element) {
       updateElement(focusIdx, {
@@ -12826,33 +12986,33 @@ var SocialItemMenu = ({ hasHref }) => {
     }
     setIsOpen(false);
   }, [hrefInputValue, contentInputValue, setHref, focusIdx, element, updateElement]);
-  return /* @__PURE__ */ jsxs18(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsxs18(Tooltip, { children: [
-      /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs19(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs19(Tooltip, { children: [
+      /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ jsx34(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: floatButtonVariants,
-          children: /* @__PURE__ */ jsx33(PencilIcon3, { className: "size-4" })
+          children: /* @__PURE__ */ jsx34(PencilIcon3, { className: "size-4" })
         }
-      ) : /* @__PURE__ */ jsxs18(
+      ) : /* @__PURE__ */ jsxs19(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
           children: [
-            /* @__PURE__ */ jsx33(PencilIcon3, { className: "size-4" }),
-            /* @__PURE__ */ jsx33("p", { children: "Edit" })
+            /* @__PURE__ */ jsx34(PencilIcon3, { className: "size-4" }),
+            /* @__PURE__ */ jsx34("p", { children: "Edit" })
           ]
         }
       ) }) }),
-      /* @__PURE__ */ jsx33(TooltipContent, { side: "bottom", children: "Edit" })
+      /* @__PURE__ */ jsx34(TooltipContent, { side: "bottom", children: "Edit" })
     ] }),
-    /* @__PURE__ */ jsxs18(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 mb-2", children: [
-        /* @__PURE__ */ jsx33(Label, { className: "text-xs font-medium", children: "Enter a link" }),
-        /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsxs19(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx34(Label, { className: "text-xs font-medium", children: "Enter a link" }),
+        /* @__PURE__ */ jsx34(
           Input,
           {
             type: "text",
@@ -12864,9 +13024,9 @@ var SocialItemMenu = ({ hasHref }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx33(Label, { className: "text-xs font-medium", children: "Content" }),
-        /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx34(Label, { className: "text-xs font-medium", children: "Content" }),
+        /* @__PURE__ */ jsx34(
           Input,
           {
             type: "text",
@@ -12877,10 +13037,10 @@ var SocialItemMenu = ({ hasHref }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx33(Separator, { className: "my-2" }),
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ jsx33("div", { className: "flex flex-row", children: /* @__PURE__ */ jsxs18(Tooltip, { children: [
-          /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(Separator, { className: "my-2" }),
+      /* @__PURE__ */ jsxs19("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx34("div", { className: "flex flex-row", children: /* @__PURE__ */ jsxs19(Tooltip, { children: [
+          /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
             Button,
             {
               variant: "ghost",
@@ -12888,12 +13048,12 @@ var SocialItemMenu = ({ hasHref }) => {
               className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
               onClick: handleCopy,
               disabled: !hasHref,
-              children: showCopied ? /* @__PURE__ */ jsx33(CheckIcon5, { className: "text-green-600" }) : /* @__PURE__ */ jsx33(CopyIcon4, {})
+              children: showCopied ? /* @__PURE__ */ jsx34(CheckIcon5, { className: "text-green-600" }) : /* @__PURE__ */ jsx34(CopyIcon4, {})
             }
           ) }),
-          /* @__PURE__ */ jsx33(TooltipContent, { side: "bottom", className: "z-50001", children: showCopied ? "Copied!" : "Copy link" })
+          /* @__PURE__ */ jsx34(TooltipContent, { side: "bottom", className: "z-50001", children: showCopied ? "Copied!" : "Copy link" })
         ] }) }),
-        /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(
           Button,
           {
             variant: "default",
@@ -12908,11 +13068,11 @@ var SocialItemMenu = ({ hasHref }) => {
 };
 
 // src/core/editor/hooks/use-alt.ts
-import { useMemo as useMemo9, useCallback as useCallback8 } from "react";
+import { useMemo as useMemo10, useCallback as useCallback9 } from "react";
 import { get as lodashGet6 } from "lodash";
 var useAlt = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const { element, alt } = useMemo9(() => {
+  const { element, alt } = useMemo10(() => {
     if (!focusIdx || !template) {
       return { element: null, alt: "" };
     }
@@ -12923,13 +13083,13 @@ var useAlt = () => {
       alt: el?.attributes?.alt || ""
     };
   }, [focusIdx, template]);
-  const setAlt = useCallback8((text2) => {
+  const setAlt = useCallback9((text2) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, alt: text2 }
     });
   }, [focusIdx, element, updateElement]);
-  const clearAlt = useCallback8(() => {
+  const clearAlt = useCallback9(() => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, alt: "" }
@@ -12945,17 +13105,17 @@ var useAlt = () => {
 };
 
 // src/core/editor/components/element-gear/social-item/float.tsx
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var SocialItemFloat = () => {
   const { href, hasHref } = useHref();
   const { alt, setAlt } = useAlt();
   const { focusIdx, template, deleteElement } = useEditorStore();
-  const [dropdownOpen, setDropdownOpen] = useState6(false);
-  const [altInputValue, setAltInputValue] = useState6("");
+  const [dropdownOpen, setDropdownOpen] = useState7(false);
+  const [altInputValue, setAltInputValue] = useState7("");
   const parentSocial = focusIdx ? getParentByIdx(template, focusIdx) : null;
   const childrenCount = parentSocial?.children?.length || 0;
   const canDelete = childrenCount > 1;
-  useEffect9(() => {
+  useEffect10(() => {
     if (dropdownOpen) {
       setAltInputValue(alt);
     }
@@ -12969,37 +13129,37 @@ var SocialItemFloat = () => {
       deleteElement(focusIdx);
     }
   };
-  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
-    hasHref && /* @__PURE__ */ jsx34(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx34(SocialItemMenu, { hasHref }),
-    /* @__PURE__ */ jsxs19(Tooltip, { children: [
-      /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs20(Fragment11, { children: [
+    hasHref && /* @__PURE__ */ jsx35(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx35(SocialItemMenu, { hasHref }),
+    /* @__PURE__ */ jsxs20(Tooltip, { children: [
+      /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
         Button,
         {
           variant: "ghost",
           className: floatButtonVariants,
           onClick: handleDelete,
           disabled: !canDelete,
-          children: /* @__PURE__ */ jsx34(TrashIcon4, { className: "size-4" })
+          children: /* @__PURE__ */ jsx35(TrashIcon4, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx34(TooltipContent, { side: "bottom", children: canDelete ? "Delete" : "Cannot delete last item" })
+      /* @__PURE__ */ jsx35(TooltipContent, { side: "bottom", children: canDelete ? "Delete" : "Cannot delete last item" })
     ] }),
-    /* @__PURE__ */ jsxs19(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
-      /* @__PURE__ */ jsxs19(Tooltip, { children: [
-        /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx34(MoreHorizontalIcon4, { className: "w-4 h-4" }) }) }) }),
-        /* @__PURE__ */ jsx34(TooltipContent, { side: "bottom", children: "More" })
+    /* @__PURE__ */ jsxs20(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+      /* @__PURE__ */ jsxs20(Tooltip, { children: [
+        /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx35(MoreHorizontalIcon4, { className: "w-4 h-4" }) }) }) }),
+        /* @__PURE__ */ jsx35(TooltipContent, { side: "bottom", children: "More" })
       ] }),
-      /* @__PURE__ */ jsx34(DropdownMenuContent, { side: "bottom", className: "w-[250px] z-50001", children: /* @__PURE__ */ jsxs19(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsxs19(DropdownMenuSubTrigger, { children: [
-          /* @__PURE__ */ jsx34(Accessibility, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx34("p", { children: "Alternative Text" })
+      /* @__PURE__ */ jsx35(DropdownMenuContent, { side: "bottom", className: "w-[250px] z-50001", children: /* @__PURE__ */ jsxs20(DropdownMenuSub, { children: [
+        /* @__PURE__ */ jsxs20(DropdownMenuSubTrigger, { children: [
+          /* @__PURE__ */ jsx35(Accessibility, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx35("p", { children: "Alternative Text" })
         ] }),
-        /* @__PURE__ */ jsx34(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs19(DropdownMenuSubContent, { className: "p-3 w-[250px] z-50001", children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2 mb-2", children: [
-            /* @__PURE__ */ jsx34(Label, { children: "Alternative Text" }),
-            /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs20(DropdownMenuSubContent, { className: "p-3 w-[250px] z-50001", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-2 mb-2", children: [
+            /* @__PURE__ */ jsx35(Label, { children: "Alternative Text" }),
+            /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx35(
                 Textarea,
                 {
                   placeholder: "Icon image alt, for example: 'Facebook icon'",
@@ -13009,14 +13169,14 @@ var SocialItemFloat = () => {
                   onChange: (e) => setAltInputValue(e.target.value)
                 }
               ),
-              /* @__PURE__ */ jsxs19("span", { className: "bg-white rounded-[12px] p-1 shadow-sm absolute bottom-2 right-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs20("span", { className: "bg-white rounded-[12px] p-1 shadow-sm absolute bottom-2 right-2 text-xs text-muted-foreground", children: [
                 altInputValue.length,
                 "/250"
               ] })
             ] }),
-            /* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground mb-4", children: "Be descriptive and add context to keep your alt text clear for clients who use screen readers." })
+            /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground mb-4", children: "Be descriptive and add context to keep your alt text clear for clients who use screen readers." })
           ] }),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Button,
             {
               variant: "default",
@@ -13032,27 +13192,27 @@ var SocialItemFloat = () => {
 };
 
 // src/core/editor/components/element-gear/divider/float.tsx
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var DividerFloat = () => {
-  return /* @__PURE__ */ jsxs20(Fragment12, { children: [
-    /* @__PURE__ */ jsx35(DuplicateButton, {}),
-    /* @__PURE__ */ jsx35(DeleteButton, {})
+  return /* @__PURE__ */ jsxs21(Fragment12, { children: [
+    /* @__PURE__ */ jsx36(DuplicateButton, {}),
+    /* @__PURE__ */ jsx36(DeleteButton, {})
   ] });
 };
 
 // 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 useMemo10, useCallback as useCallback9 } from "react";
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState8, useEffect as useEffect11, useMemo as useMemo11, useCallback as useCallback10 } from "react";
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var ImageFloat = () => {
   const { href, hasHref } = useHref();
   const { alt, setAlt, hasAlt } = useAlt();
   const { focusIdx, updateElement, template } = useEditorStore();
-  const [showMoreView, setShowMoreView] = useState7(null);
-  const [dropdownOpen, setDropdownOpen] = useState7(false);
-  const [altInputValue, setAltInputValue] = useState7("");
-  const { element, isFluidOnMobile } = useMemo10(() => {
+  const [showMoreView, setShowMoreView] = useState8(null);
+  const [dropdownOpen, setDropdownOpen] = useState8(false);
+  const [altInputValue, setAltInputValue] = useState8("");
+  const { element, isFluidOnMobile } = useMemo11(() => {
     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);
@@ -13061,7 +13221,7 @@ var ImageFloat = () => {
       isFluidOnMobile: el?.attributes?.["fluid-on-mobile"] === "true"
     };
   }, [focusIdx, template]);
-  const toggleFluidOnMobile = useCallback9(() => {
+  const toggleFluidOnMobile = useCallback10(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     if (isFluidOnMobile) {
@@ -13071,7 +13231,7 @@ var ImageFloat = () => {
     }
     updateElement(focusIdx, { attributes: newAttributes });
   }, [focusIdx, element, isFluidOnMobile, updateElement]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (dropdownOpen) {
       setAltInputValue(alt);
     }
@@ -13080,35 +13240,35 @@ var ImageFloat = () => {
     setAlt(altInputValue);
     setDropdownOpen(false);
   };
-  return /* @__PURE__ */ jsxs21(Fragment13, { children: [
-    hasHref && /* @__PURE__ */ jsx36(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx36(HrefMenu, {}),
-    /* @__PURE__ */ jsx36(DuplicateButton, {}),
-    /* @__PURE__ */ jsx36(DeleteButton, {}),
-    /* @__PURE__ */ jsxs21(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
-      /* @__PURE__ */ jsxs21(Tooltip, { children: [
-        /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx36(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx36(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx36(MoreHorizontalIcon5, { className: "w-4 h-4" }) }) }) }),
-        /* @__PURE__ */ jsx36(TooltipContent, { side: "bottom", children: "More" })
+  return /* @__PURE__ */ jsxs22(Fragment13, { children: [
+    hasHref && /* @__PURE__ */ jsx37(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx37(HrefMenu, {}),
+    /* @__PURE__ */ jsx37(DuplicateButton, {}),
+    /* @__PURE__ */ jsx37(DeleteButton, {}),
+    /* @__PURE__ */ jsxs22(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+      /* @__PURE__ */ jsxs22(Tooltip, { children: [
+        /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ jsx37(MoreHorizontalIcon5, { className: "w-4 h-4" }) }) }) }),
+        /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "More" })
       ] }),
-      /* @__PURE__ */ jsxs21(DropdownMenuContent, { side: "bottom", className: "w-[250px] z-50001", children: [
-        /* @__PURE__ */ jsxs21(DropdownMenuItem, { onClick: toggleFluidOnMobile, children: [
-          /* @__PURE__ */ jsx36(Proportions, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsxs21("div", { className: "flex flex-row items-center justify-between gap-2 w-full", children: [
-            /* @__PURE__ */ jsx36("p", { children: "Full width on mobile" }),
-            isFluidOnMobile && /* @__PURE__ */ jsx36(CheckIcon6, { className: "w-4 h-4" })
+      /* @__PURE__ */ jsxs22(DropdownMenuContent, { side: "bottom", className: "w-[250px] z-50001", children: [
+        /* @__PURE__ */ jsxs22(DropdownMenuItem, { onClick: toggleFluidOnMobile, children: [
+          /* @__PURE__ */ jsx37(Proportions, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex flex-row items-center justify-between gap-2 w-full", children: [
+            /* @__PURE__ */ jsx37("p", { children: "Full width on mobile" }),
+            isFluidOnMobile && /* @__PURE__ */ jsx37(CheckIcon6, { className: "w-4 h-4" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx36(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs21(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsxs21(DropdownMenuSubTrigger, { children: [
-            /* @__PURE__ */ jsx36(Accessibility2, { className: "w-4 h-4" }),
-            /* @__PURE__ */ jsx36("p", { children: "Alternative Text" })
+        /* @__PURE__ */ jsx37(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs22(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs22(DropdownMenuSubTrigger, { children: [
+            /* @__PURE__ */ jsx37(Accessibility2, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx37("p", { children: "Alternative Text" })
           ] }),
-          /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs21(DropdownMenuSubContent, { className: "p-3 w-[250px] z-50001", children: [
-            /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2 mb-2", children: [
-              /* @__PURE__ */ jsx36(Label, { children: "Alternative Text" }),
-              /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs22(DropdownMenuSubContent, { className: "p-3 w-[250px] z-50001", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2 mb-2", children: [
+              /* @__PURE__ */ jsx37(Label, { children: "Alternative Text" }),
+              /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx37(
                   Textarea,
                   {
                     placeholder: "Spacious living room with hardwood floors, large windows, and a cozy fireplace",
@@ -13118,14 +13278,14 @@ var ImageFloat = () => {
                     onChange: (e) => setAltInputValue(e.target.value)
                   }
                 ),
-                /* @__PURE__ */ jsxs21("span", { className: "bg-white rounded-[12px] p-1 shadow-sm absolute bottom-2 right-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs22("span", { className: "bg-white rounded-[12px] p-1 shadow-sm absolute bottom-2 right-2 text-xs text-muted-foreground", children: [
                   altInputValue.length,
                   "/250"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx36("p", { className: "text-xs text-muted-foreground mb-4", children: "Be descriptive and add context to keep your alt text clear for clients who use screen readers." })
+              /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground mb-4", children: "Be descriptive and add context to keep your alt text clear for clients who use screen readers." })
             ] }),
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               Button,
               {
                 variant: "default",
@@ -13142,7 +13302,7 @@ var ImageFloat = () => {
 };
 
 // src/core/editor/components/mlsNumber-menu.tsx
-import { useState as useState8, useEffect as useEffect11 } from "react";
+import { useState as useState9, useEffect as useEffect12 } from "react";
 import { HousePlusIcon, TrashIcon as TrashIcon5, XIcon as XIcon2, Loader2Icon } from "lucide-react";
 
 // src/services/repliers/commands.ts
@@ -13158,16 +13318,16 @@ async function getListingByMlsNumber(mlsNumber) {
 }
 
 // src/core/editor/components/mlsNumber-menu.tsx
-import { Fragment as Fragment14, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs23 } 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 [isOpen, setIsOpen] = useState9(false);
+  const [inputValue, setInputValue] = useState9("");
+  const [propertyData, setPropertyData] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(false);
   const propertyElement = focusIdx && template ? getValueByIdx(template, focusIdx) : null;
   const currentMlsNumber = propertyElement?.data?.value?.mlsNumber || "";
-  useEffect11(() => {
+  useEffect12(() => {
     setInputValue(currentMlsNumber);
     setPropertyData(null);
   }, [focusIdx, currentMlsNumber]);
@@ -13235,25 +13395,25 @@ var MlsNumberMenu = () => {
       }
     }
   };
-  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(
+  return /* @__PURE__ */ jsxs23(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs23(Tooltip, { children: [
+      /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
         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__ */ jsx38(HousePlusIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx38("p", { children: "MLS" })
           ]
         }
       ) }) }),
-      /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "Enter MLS Number" })
+      /* @__PURE__ */ jsx38(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(
+    /* @__PURE__ */ jsxs23(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx38(Label, { children: "Enter MLS Number" }),
+        /* @__PURE__ */ jsx38(
           Input,
           {
             type: "text",
@@ -13266,10 +13426,10 @@ var MlsNumberMenu = () => {
           }
         )
       ] }),
-      /* @__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(
+      /* @__PURE__ */ jsx38(Separator, { className: "my-2" }),
+      /* @__PURE__ */ jsxs23("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx38("div", { className: "flex flex-row", children: /* @__PURE__ */ jsxs23(Tooltip, { children: [
+          /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(
             Button,
             {
               variant: "ghost",
@@ -13277,27 +13437,27 @@ var MlsNumberMenu = () => {
               className: "shadow-none transition-none cursor-pointer rounded-full outline-none",
               onClick: handleClear,
               disabled: !inputValue,
-              children: /* @__PURE__ */ jsx37(TrashIcon5, {})
+              children: /* @__PURE__ */ jsx38(TrashIcon5, {})
             }
           ) }),
-          /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", className: "z-50001", children: "Clear" })
+          /* @__PURE__ */ jsx38(TooltipContent, { side: "bottom", className: "z-50001", children: "Clear" })
         ] }) }),
-        /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsx38(
           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"
+            children: isLoading ? /* @__PURE__ */ jsx38(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(
+      propertyData && /* @__PURE__ */ jsxs23(Fragment14, { children: [
+        /* @__PURE__ */ jsx38(Separator, { className: "my-2" }),
+        /* @__PURE__ */ jsxs23("div", { className: "rounded-[12px] border overflow-hidden bg-card", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx38(
               "img",
               {
                 src: `https://cdn.repliers.io/${propertyData.images?.[0]}`,
@@ -13305,35 +13465,35 @@ var MlsNumberMenu = () => {
                 className: "w-full h-[120px] object-cover"
               }
             ),
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38(
               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" })
+                children: /* @__PURE__ */ jsx38(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__ */ jsxs23("div", { className: "p-2 flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx38("span", { className: "font-semibold text-sm", children: formatPrice(String(propertyData.listPrice || 0)) }),
+              /* @__PURE__ */ jsx38("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: [
+            /* @__PURE__ */ jsxs23("div", { className: "text-sm", children: [
               propertyData.address?.streetNumber,
               " ",
               propertyData.address?.streetName
             ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs23("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: [
+            /* @__PURE__ */ jsxs23("div", { className: "text-xs text-muted-foreground", children: [
               propertyData.details?.numBedrooms,
               " bd | ",
               propertyData.details?.numBathrooms,
@@ -13341,8 +13501,8 @@ var MlsNumberMenu = () => {
               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(
+            propertyData.office?.brokerageName && /* @__PURE__ */ jsx38("div", { className: "text-xs text-muted-foreground truncate", children: propertyData.office.brokerageName }),
+            /* @__PURE__ */ jsx38(
               Button,
               {
                 variant: "default",
@@ -13360,34 +13520,34 @@ var MlsNumberMenu = () => {
 };
 
 // src/core/editor/components/element-gear/property/float.tsx
-import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function PropertyFloat() {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
-    hasHref && /* @__PURE__ */ jsx38(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx38(HrefMenu, {}),
-    /* @__PURE__ */ jsx38(MlsNumberMenu, {})
+  return /* @__PURE__ */ jsxs24(Fragment15, { children: [
+    hasHref && /* @__PURE__ */ jsx39(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx39(HrefMenu, {}),
+    /* @__PURE__ */ jsx39(MlsNumberMenu, {})
   ] });
 }
 
 // src/core/editor/components/element-gear/property/triple/float.tsx
-import { Fragment as Fragment16, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var PropertyTripleItemFloat = () => {
   const { href, hasHref } = useHref();
-  return /* @__PURE__ */ jsxs24(Fragment16, { children: [
-    hasHref && /* @__PURE__ */ jsx39(FloatLinkPreview, { href }),
-    /* @__PURE__ */ jsx39(HrefMenu, {})
+  return /* @__PURE__ */ jsxs25(Fragment16, { children: [
+    hasHref && /* @__PURE__ */ jsx40(FloatLinkPreview, { href }),
+    /* @__PURE__ */ jsx40(HrefMenu, {})
   ] });
 };
 
 // src/core/editor/components/float-ui/container.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FloatUIContainer = ({ ref, style, className, children }) => {
-  return /* @__PURE__ */ jsx40("div", { ref, style, className, children });
+  return /* @__PURE__ */ jsx41("div", { ref, style, className, children });
 };
 
 // src/core/editor/components/element-float.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var FLOAT_COMPONENTS = {
   "button": ButtonFloat,
   "section": SectionFloat,
@@ -13411,7 +13571,7 @@ var ElementFloat = ({ getReferenceRect, focusIdx, elementType }) => {
   if (!focusIdx || isDragging || textEditing) return null;
   const FloatComponent = FLOAT_COMPONENTS[elementType];
   if (!FloatComponent) return null;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     ElementFloatContent,
     {
       getReferenceRect,
@@ -13420,7 +13580,7 @@ var ElementFloat = ({ getReferenceRect, focusIdx, elementType }) => {
   );
 };
 var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
-  const virtualReference = useMemo11(() => ({
+  const virtualReference = useMemo12(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -13429,18 +13589,18 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
       return rect;
     }
   }), [getReferenceRect]);
-  const { floatingStyles, refs, update } = useFloating4({
+  const { floatingStyles, refs, update } = useFloating5({
     placement: "top",
     middleware: [
-      offset4(16),
+      offset5(16),
       // 8px above the element
-      flip2({ padding: 8 }),
+      flip3({ padding: 8 }),
       // Flip to bottom if not enough space above
-      shift3({ padding: 8 })
+      shift4({ padding: 8 })
       // Keep within viewport
     ]
   });
-  useEffect12(() => {
+  useEffect13(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13455,18 +13615,18 @@ var ElementFloatContent = ({ getReferenceRect, FloatComponent }) => {
     );
     return cleanup;
   }, [getReferenceRect, refs, update, virtualReference]);
-  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, {}) });
+  return /* @__PURE__ */ jsx42(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__ */ jsx42(FloatComponent, {}) });
 };
 
 // src/core/editor/components/scaling/divider-scale.tsx
-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";
+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 autoUpdate4 } from "@floating-ui/react";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var DividerScale = ({ 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, currentAlign } = useMemo12(() => {
+  const { currentWidth, currentAlign } = useMemo13(() => {
     if (!focusIdx || !template) return { currentWidth: 100, currentAlign: "center" };
     const element = getValueByIdx(template, focusIdx);
     const rawWidth = element?.attributes?.width;
@@ -13475,13 +13635,13 @@ var DividerScale = ({ getReferenceRect }) => {
     const align = element?.attributes?.align || "center";
     return { currentWidth: width, currentAlign: align };
   }, [focusIdx, template]);
-  const dragRef = useRef5(null);
-  const getContainerWidth = useCallback11(() => {
+  const dragRef = useRef6(null);
+  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();
     const containerWidth = getContainerWidth();
@@ -13499,7 +13659,7 @@ var DividerScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getContainerWidth, currentWidth, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback11((e) => {
+  const handlePointerMove = useCallback12((e) => {
     if (!dragRef.current) return;
     const { startX, startWidth, containerWidth, side, align } = dragRef.current;
     const deltaX = e.clientX - startX;
@@ -13519,20 +13679,20 @@ var DividerScale = ({ 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) {
@@ -13541,13 +13701,13 @@ var DividerScale = ({ getReferenceRect }) => {
       return rect;
     }
   }), [getReferenceRect]);
-  const { floatingStyles, refs, update } = useFloating5({
+  const { floatingStyles, refs, update } = useFloating6({
     placement: "bottom-start",
     middleware: [
-      offset5(({ rects }) => -rects.reference.height)
+      offset6(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect13(() => {
+  useEffect14(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13574,7 +13734,7 @@ var DividerScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const showLeftHandle = currentAlign !== "left";
   const showRightHandle = currentAlign !== "right";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: refs.setFloating,
@@ -13586,14 +13746,14 @@ var DividerScale = ({ getReferenceRect }) => {
       },
       className: "relative flex flex-row items-center justify-between",
       children: [
-        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx42(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx43(
           "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__ */ jsx42(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
@@ -13606,14 +13766,14 @@ var DividerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/button-scale.tsx
-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";
+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 autoUpdate5 } from "@floating-ui/react";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var ButtonScale = ({ 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: 24, currentHeight: 44, currentAlign: "center" };
     }
@@ -13627,13 +13787,13 @@ var ButtonScale = ({ getReferenceRect }) => {
     const align = element?.attributes?.align || "center";
     return { currentWidth: width, currentHeight: height, currentAlign: align };
   }, [focusIdx, template]);
-  const dragRef = useRef6(null);
-  const getContainerWidth = useCallback12(() => {
+  const dragRef = useRef7(null);
+  const getContainerWidth = useCallback13(() => {
     const rect = getReferenceRect();
     if (!rect || currentWidth <= 0) return null;
     return rect.width / (currentWidth / 100);
   }, [getReferenceRect, currentWidth]);
-  const handlePointerDown = useCallback12((e, side) => {
+  const handlePointerDown = useCallback13((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13655,7 +13815,7 @@ var ButtonScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getContainerWidth, currentWidth, currentHeight, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback12((e) => {
+  const handlePointerMove = useCallback13((e) => {
     if (!dragRef.current) return;
     const { startX, startY, startWidth, startHeight, containerWidth, side, align } = dragRef.current;
     const state = useEditorStore.getState();
@@ -13687,20 +13847,20 @@ var ButtonScale = ({ 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) {
@@ -13709,13 +13869,13 @@ var ButtonScale = ({ getReferenceRect }) => {
       return rect;
     }
   }), [getReferenceRect]);
-  const { floatingStyles, refs, update } = useFloating6({
+  const { floatingStyles, refs, update } = useFloating7({
     placement: "bottom-start",
     middleware: [
-      offset6(({ rects }) => -rects.reference.height)
+      offset7(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect14(() => {
+  useEffect15(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13744,7 +13904,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__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: refs.setFloating,
@@ -13756,28 +13916,28 @@ var ButtonScale = ({ 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"),
@@ -13790,14 +13950,15 @@ var ButtonScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/image-scale.tsx
-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";
+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 autoUpdate6 } from "@floating-ui/react";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+var isCorner = (side) => side === "top-left" || side === "top-right" || side === "bottom-left" || side === "bottom-right";
 var ImageScale = ({ 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 { currentWidth, currentHeight, currentAlign } = useMemo14(() => {
+  const { currentWidth, currentHeight, currentAlign } = useMemo15(() => {
     if (!focusIdx || !template) {
       return { currentWidth: 0, currentHeight: 0, currentAlign: "center" };
     }
@@ -13811,8 +13972,8 @@ var ImageScale = ({ getReferenceRect }) => {
     const align = element?.attributes?.align || "center";
     return { currentWidth: width, currentHeight: height, currentAlign: align };
   }, [focusIdx, template]);
-  const dragRef = useRef7(null);
-  const handlePointerDown = useCallback13((e, side) => {
+  const dragRef = useRef8(null);
+  const handlePointerDown = useCallback14((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -13830,12 +13991,13 @@ var ImageScale = ({ getReferenceRect }) => {
       startWidth: effectiveWidth,
       startHeight: effectiveHeight,
       side,
-      align: currentAlign
+      align: currentAlign,
+      aspectRatio: effectiveHeight > 0 ? effectiveWidth / effectiveHeight : 1
     };
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [getReferenceRect, currentWidth, currentHeight, currentAlign, setIsScaling]);
-  const handlePointerMove = useCallback13((e) => {
+  const handlePointerMove = useCallback14((e) => {
     if (!dragRef.current) return;
     const { startX, startY, startWidth, startHeight, side, align } = dragRef.current;
     const state = useEditorStore.getState();
@@ -13843,7 +14005,35 @@ var ImageScale = ({ getReferenceRect }) => {
     if (!currentFocusIdx || !currentTemplate) return;
     const element = getValueByIdx(currentTemplate, currentFocusIdx);
     if (!element) return;
-    if (side === "left" || side === "right") {
+    if (isCorner(side)) {
+      const { aspectRatio } = dragRef.current;
+      const deltaX = e.clientX - startX;
+      const deltaY = e.clientY - startY;
+      const signX = side.includes("left") ? -1 : 1;
+      const signY = side.includes("top") ? -1 : 1;
+      const alignMultiplier = align === "center" ? 2 : 1;
+      const absDX = Math.abs(deltaX);
+      const absDY = Math.abs(deltaY);
+      let newWidth;
+      let newHeight;
+      if (absDX >= absDY) {
+        newWidth = startWidth + signX * deltaX * alignMultiplier;
+        newHeight = newWidth / aspectRatio;
+      } else {
+        newHeight = startHeight + signY * deltaY;
+        newWidth = newHeight * aspectRatio;
+      }
+      const clampedWidth = Math.max(20, Math.min(600, newWidth));
+      const clampedHeight = Math.max(20, Math.min(600, clampedWidth / aspectRatio));
+      const finalWidth = clampedHeight * aspectRatio;
+      updateElement(currentFocusIdx, {
+        attributes: {
+          ...element.attributes,
+          width: `${Math.round(finalWidth)}px`,
+          height: `${Math.round(clampedHeight)}px`
+        }
+      });
+    } else if (side === "left" || side === "right") {
       const deltaX = e.clientX - startX;
       const alignMultiplier = align === "center" ? 2 : 1;
       const newWidth = side === "left" ? startWidth - deltaX * alignMultiplier : startWidth + deltaX * alignMultiplier;
@@ -13866,20 +14056,20 @@ var ImageScale = ({ 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) {
@@ -13888,13 +14078,13 @@ var ImageScale = ({ getReferenceRect }) => {
       return rect;
     }
   }), [getReferenceRect]);
-  const { floatingStyles, refs, update } = useFloating7({
+  const { floatingStyles, refs, update } = useFloating8({
     placement: "bottom-start",
     middleware: [
-      offset7(({ rects }) => -rects.reference.height)
+      offset8(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect15(() => {
+  useEffect16(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -13921,9 +14111,13 @@ var ImageScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const showLeftHandle = currentAlign !== "left";
   const showRightHandle = currentAlign !== "right";
+  const showTopLeft = currentAlign !== "left";
+  const showTopRight = currentAlign !== "right";
+  const showBottomLeft = currentAlign !== "left";
+  const showBottomRight = 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__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ref: refs.setFloating,
@@ -13935,33 +14129,61 @@ var ImageScale = ({ 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")}`
           }
         ),
-        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx44(
+        showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx45(
           "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__ */ jsx44(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx45(
           "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__ */ jsx44(
+        showLeftHandle && (activeSide === null || activeSide === "left") && /* @__PURE__ */ jsx45(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
             className: `w-[8px] h-[18px] cursor-ew-resize ${handleBaseClass} top-1/2 -translate-y-1/2 -left-[4px] ${getHandleActiveClass("left")}`
           }
+        ),
+        showTopLeft && (activeSide === null || activeSide === "top-left") && /* @__PURE__ */ jsx45(
+          "div",
+          {
+            onPointerDown: (e) => handlePointerDown(e, "top-left"),
+            className: `w-[10px] h-[10px] cursor-nwse-resize ${handleBaseClass} -top-[5px] -left-[5px] ${getHandleActiveClass("top-left")}`
+          }
+        ),
+        showTopRight && (activeSide === null || activeSide === "top-right") && /* @__PURE__ */ jsx45(
+          "div",
+          {
+            onPointerDown: (e) => handlePointerDown(e, "top-right"),
+            className: `w-[10px] h-[10px] cursor-nesw-resize ${handleBaseClass} -top-[5px] -right-[5px] ${getHandleActiveClass("top-right")}`
+          }
+        ),
+        showBottomLeft && (activeSide === null || activeSide === "bottom-left") && /* @__PURE__ */ jsx45(
+          "div",
+          {
+            onPointerDown: (e) => handlePointerDown(e, "bottom-left"),
+            className: `w-[10px] h-[10px] cursor-nesw-resize ${handleBaseClass} -bottom-[5px] -left-[5px] ${getHandleActiveClass("bottom-left")}`
+          }
+        ),
+        showBottomRight && (activeSide === null || activeSide === "bottom-right") && /* @__PURE__ */ jsx45(
+          "div",
+          {
+            onPointerDown: (e) => handlePointerDown(e, "bottom-right"),
+            className: `w-[10px] h-[10px] cursor-nwse-resize ${handleBaseClass} -bottom-[5px] -right-[5px] ${getHandleActiveClass("bottom-right")}`
+          }
         )
       ]
     }
@@ -13969,22 +14191,22 @@ var ImageScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/spacer-scale.tsx
-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";
+import { useMemo as useMemo16, useEffect as useEffect17, useState as useState13, useRef as useRef9, useCallback as useCallback15 } from "react";
+import { useFloating as useFloating9, offset as offset9, autoUpdate as autoUpdate7 } from "@floating-ui/react";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var SpacerScale = ({ getReferenceRect }) => {
-  const [dimensions, setDimensions] = useState12({ width: 0, height: 0 });
-  const [activeSide, setActiveSide] = useState12(null);
+  const [dimensions, setDimensions] = useState13({ width: 0, height: 0 });
+  const [activeSide, setActiveSide] = useState13(null);
   const { focusIdx, template, setIsScaling } = useEditorStore();
-  const currentHeight = useMemo15(() => {
+  const currentHeight = useMemo16(() => {
     if (!focusIdx || !template) return 12;
     const element = getValueByIdx(template, focusIdx);
     const rawHeight = element?.attributes?.height;
     const parsedHeight = rawHeight ? parseFloat(rawHeight.replace("px", "")) : 12;
     return isNaN(parsedHeight) ? 12 : Math.max(12, Math.min(200, parsedHeight));
   }, [focusIdx, template]);
-  const dragRef = useRef8(null);
-  const handlePointerDown = useCallback14((e, side) => {
+  const dragRef = useRef9(null);
+  const handlePointerDown = useCallback15((e, side) => {
     e.preventDefault();
     e.stopPropagation();
     if (document.activeElement instanceof HTMLElement) {
@@ -14000,7 +14222,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [currentHeight, setIsScaling]);
-  const handlePointerMove = useCallback14((e) => {
+  const handlePointerMove = useCallback15((e) => {
     if (!dragRef.current) return;
     const { startY, startHeight, side } = dragRef.current;
     const state = useEditorStore.getState();
@@ -14018,20 +14240,20 @@ var SpacerScale = ({ getReferenceRect }) => {
       }
     });
   }, []);
-  const handlePointerUp = useCallback14(() => {
+  const handlePointerUp = useCallback15(() => {
     setActiveSide(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);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const virtualReference = useMemo15(() => ({
+  const virtualReference = useMemo16(() => ({
     getBoundingClientRect: () => {
       const rect = getReferenceRect();
       if (!rect) {
@@ -14040,13 +14262,13 @@ var SpacerScale = ({ getReferenceRect }) => {
       return rect;
     }
   }), [getReferenceRect]);
-  const { floatingStyles, refs, update } = useFloating8({
+  const { floatingStyles, refs, update } = useFloating9({
     placement: "bottom-start",
     middleware: [
-      offset8(({ rects }) => -rects.reference.height)
+      offset9(({ rects }) => -rects.reference.height)
     ]
   });
-  useEffect16(() => {
+  useEffect17(() => {
     const rect = getReferenceRect();
     if (!rect || !refs.floating.current) return;
     refs.setPositionReference(virtualReference);
@@ -14073,7 +14295,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__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref: refs.setFloating,
@@ -14085,14 +14307,14 @@ var SpacerScale = ({ getReferenceRect }) => {
       },
       className: "relative pointer-events-none",
       children: [
-        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx45(
+        (activeSide === null || activeSide === "top") && /* @__PURE__ */ jsx46(
           "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__ */ jsx45(
+        (activeSide === null || activeSide === "bottom") && /* @__PURE__ */ jsx46(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "bottom"),
@@ -14105,19 +14327,19 @@ var SpacerScale = ({ getReferenceRect }) => {
 };
 
 // src/core/editor/components/scaling/column-scale.tsx
-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";
+import { useMemo as useMemo17, useEffect as useEffect18, useState as useState14, useRef as useRef10, useCallback as useCallback16 } from "react";
+import { Fragment as Fragment17, jsx as jsx47 } from "react/jsx-runtime";
 var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
-  const [activeDivider, setActiveDivider] = useState13(null);
-  const [columnRects, setColumnRects] = useState13([]);
+  const [activeDivider, setActiveDivider] = useState14(null);
+  const [columnRects, setColumnRects] = useState14([]);
   const { template, setIsScaling, setFocusIdx, stopTextEditing } = useEditorStore();
-  const columnWidths = useMemo16(() => {
+  const columnWidths = useMemo17(() => {
     if (!template) return [];
     const sectionColumn = getValueByIdx(template, sectionColumnIdx);
     return sectionColumn?.data?.value?.columnWidths || [];
   }, [template, sectionColumnIdx]);
-  const dragRef = useRef9(null);
-  const updateColumnRects = useCallback15(() => {
+  const dragRef = useRef10(null);
+  const updateColumnRects = useCallback16(() => {
     if (!shadowRoot) return;
     const allColumns = shadowRoot.querySelectorAll(".node-type-column");
     const matchingColumns = [];
@@ -14149,7 +14371,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     });
     setColumnRects(rects);
   }, [shadowRoot, sectionColumnIdx]);
-  useEffect17(() => {
+  useEffect18(() => {
     updateColumnRects();
     let animationId;
     const updateLoop = () => {
@@ -14162,7 +14384,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   const parseWidth = (width) => {
     return parseFloat(width.replace("%", ""));
   };
-  const handlePointerDown = useCallback15((e, dividerIndex) => {
+  const handlePointerDown = useCallback16((e, dividerIndex) => {
     e.preventDefault();
     e.stopPropagation();
     stopTextEditing();
@@ -14188,7 +14410,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
   }, [columnRects, columnWidths, setIsScaling]);
-  const handlePointerMove = useCallback15((e) => {
+  const handlePointerMove = useCallback16((e) => {
     if (!dragRef.current) return;
     const { startX, leftColIndex, rightColIndex, startLeftWidth, startRightWidth, sectionWidth, allWidths } = dragRef.current;
     const deltaX = e.clientX - startX;
@@ -14222,14 +14444,14 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
       }
     });
   }, [sectionColumnIdx]);
-  const handlePointerUp = useCallback15(() => {
+  const handlePointerUp = useCallback16(() => {
     setActiveDivider(null);
     setIsScaling(false);
     dragRef.current = null;
     document.removeEventListener("pointermove", handlePointerMove);
     document.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, setIsScaling]);
-  useEffect17(() => {
+  useEffect18(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -14240,7 +14462,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__ */ jsx46(Fragment17, { children: columnRects.slice(0, -1).map((rect, index) => {
+  return /* @__PURE__ */ jsx47(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);
@@ -14248,7 +14470,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
     if (activeDivider !== null && activeDivider !== index) {
       return null;
     }
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         onPointerDown: (e) => handlePointerDown(e, index),
@@ -14268,9 +14490,9 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
 };
 
 // src/core/editor/hooks/use-undo-redo-keyboard.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 function useUndoRedoKeyboard() {
-  useEffect18(() => {
+  useEffect19(() => {
     const handler = (e) => {
       const isMeta = e.metaKey || e.ctrlKey;
       if (!isMeta || e.key.toLowerCase() !== "z") return;
@@ -14292,9 +14514,9 @@ function useUndoRedoKeyboard() {
 
 // src/components/ui/spinner.tsx
 import { Loader2Icon as Loader2Icon2 } from "lucide-react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     Loader2Icon2,
     {
       role: "status",
@@ -14306,10 +14528,10 @@ function Spinner({ className, ...props }) {
 }
 
 // src/core/editor/components/preview.tsx
-import { EyeIcon } from "lucide-react";
+import { EyeIcon, SendIcon, Monitor, Smartphone } from "lucide-react";
 
 // src/render/useMjmlCompiler.ts
-import { useState as useState14, useCallback as useCallback16 } from "react";
+import { useState as useState15, useCallback as useCallback17 } from "react";
 async function compileMjml(mjml) {
   console.log("Compiling MJML", mjml);
   const response = await fetch("/api/mrender", {
@@ -14326,14 +14548,101 @@ async function compileMjml(mjml) {
 }
 
 // src/core/editor/components/preview.tsx
-import { useEffect as useEffect19, useState as useState15, useRef as useRef10 } from "react";
-import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useState as useState16, useRef as useRef11 } from "react";
+
+// src/validate/helpers.ts
+var MERGE_FIELD_REGEX2 = /\{\{([a-zA-Z_][a-zA-Z0-9_]*)\}\}/g;
+function extractMergeFields(node) {
+  const fields = [];
+  if (!node || typeof node !== "object") return fields;
+  const content = node?.data?.value?.content;
+  if (typeof content === "string") {
+    let match;
+    MERGE_FIELD_REGEX2.lastIndex = 0;
+    while ((match = MERGE_FIELD_REGEX2.exec(content)) !== null) {
+      fields.push(match[1]);
+    }
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      fields.push(...extractMergeFields(child));
+    }
+  }
+  if (Array.isArray(node.content)) {
+    for (const page of node.content) {
+      fields.push(...extractMergeFields(page));
+    }
+  }
+  return fields;
+}
+function extractEmptyLinks(node) {
+  const results = [];
+  if (!node || typeof node !== "object") return results;
+  if (node.type === "button" || node.type === "social-item") {
+    const href = node.attributes?.href;
+    if (!href || href.trim() === "") {
+      const label = node.type === "button" ? node.data?.value?.content || "Untitled Button" : node.attributes?.alt || node.data?.value?.socialType || "Social Link";
+      results.push({ type: node.type, label });
+    }
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      results.push(...extractEmptyLinks(child));
+    }
+  }
+  if (Array.isArray(node.content)) {
+    for (const page of node.content) {
+      results.push(...extractEmptyLinks(page));
+    }
+  }
+  return results;
+}
+
+// src/validate/index.ts
+var PROPERTY_CARD_TYPES = /* @__PURE__ */ new Set(["property-card", "property-card-single-two", "property-card-triple-item"]);
+function countPlaceholderPropertyImages(node) {
+  let count = 0;
+  if (!node || typeof node !== "object") return count;
+  if (PROPERTY_CARD_TYPES.has(node.type)) {
+    const imageSrc = node.attributes?.["image-src"];
+    if (!imageSrc || imageSrc === DEFAULT_PROPERTY_PLACEHOLDER_IMAGE) {
+      count++;
+    }
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      count += countPlaceholderPropertyImages(child);
+    }
+  }
+  if (Array.isArray(node.content)) {
+    for (const page of node.content) {
+      count += countPlaceholderPropertyImages(page);
+    }
+  }
+  return count;
+}
+function validate_editor_onPreview(template, mergeFields) {
+  const usedFields = [...new Set(extractMergeFields(template))];
+  const validValues = new Set(mergeFields.map((f) => f.value));
+  const invalid_merge_fields = usedFields.filter((field) => !validValues.has(field));
+  const missing_links = extractEmptyLinks(template);
+  const placeholder_property_images = countPlaceholderPropertyImages(template);
+  const templateSize = new Blob([JSON.stringify(template)]).size;
+  const is_over_size_limit = templateSize > 50 * 1024;
+  return { invalid_merge_fields, missing_links, is_over_size_limit, placeholder_property_images };
+}
+
+// src/core/editor/components/preview.tsx
+import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
 function Preview() {
-  const { template, setPreviewMode, previewMode, isPaidLevel } = useEditorStore();
-  const [html, setHtml] = useState15("");
-  const [isLoading, setIsLoading] = useState15(false);
-  const lastTemplateRef = useRef10("");
-  useEffect19(() => {
+  const { template, setPreviewMode, previewMode, isPaidLevel, mergeFields } = useEditorStore();
+  const [html, setHtml] = useState16("");
+  const [isLoading, setIsLoading] = useState16(false);
+  const lastTemplateRef = useRef11("");
+  const [deviceMode, setDeviceMode] = useState16("desktop");
+  const [preview_validations, setPreviewValidations] = useState16({ invalid_merge_fields: [], missing_links: [], is_over_size_limit: false, placeholder_property_images: 0 });
+  const [mjmlErrors, setMjmlErrors] = useState16([]);
+  useEffect20(() => {
     if (typeof window === "undefined" || !previewMode) {
       if (!previewMode) {
         setHtml("");
@@ -14347,56 +14656,165 @@ function Preview() {
     }
     lastTemplateRef.current = templateString;
     setIsLoading(true);
+    const validatePreview = () => {
+      const validations = validate_editor_onPreview(template, mergeFields);
+      setPreviewValidations(validations);
+    };
     const convertMjml = async () => {
       try {
         const mjmlString = json2mjml(template, "production", { isPaidLevel });
         console.log("MJML string:", mjmlString);
         const result = await compileMjml(mjmlString);
+        console.log("MJML errors:", result);
+        setMjmlErrors(result.errors ?? []);
         if (result.errors?.length > 0) {
-          console.warn("MJML warnings:", result.errors);
+          console.warn("MJML warnings 1:", result.errors);
         }
         console.log(result.html);
         setHtml(result.html);
       } catch (error) {
         console.error("MJML compilation error:", error);
+        setMjmlErrors([]);
         setHtml('<p style="color: red; padding: 20px;">Error generating preview</p>');
       } finally {
         setIsLoading(false);
       }
     };
+    validatePreview();
     convertMjml();
   }, [template, previewMode]);
-  return /* @__PURE__ */ jsxs29(Dialog, { open: previewMode, onOpenChange: setPreviewMode, children: [
-    /* @__PURE__ */ jsxs29(Tooltip, { children: [
-      /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+  const hasValidations = preview_validations.invalid_merge_fields.length > 0 || preview_validations.missing_links.length > 0 || preview_validations.is_over_size_limit || preview_validations.placeholder_property_images > 0 || mjmlErrors.length > 0;
+  return /* @__PURE__ */ jsxs30(Dialog, { open: previewMode, onOpenChange: setPreviewMode, children: [
+    /* @__PURE__ */ jsxs30(Tooltip, { children: [
+      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: () => setPreviewMode(true),
-          children: /* @__PURE__ */ jsx48(EyeIcon, {})
+          children: /* @__PURE__ */ jsx49(EyeIcon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", className: "z-51", children: "Preview" })
+      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", className: "z-51", children: "Preview" })
     ] }),
-    /* @__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]" }) })
-    ] })
+    /* @__PURE__ */ jsxs30(
+      DialogContent,
+      {
+        showCloseButton: true,
+        className: "flex flex-col !fixed !top-14 !left-12 !right-12 !bottom-0 !transform-none !translate-x-0 !translate-y-0 !w-auto !h-auto !max-w-none !max-h-none rounded-b-none p-0 gap-0",
+        children: [
+          /* @__PURE__ */ jsx49(DialogHeader, { className: "border-b p-4", children: /* @__PURE__ */ jsx49(DialogTitle, { children: "Preview" }) }),
+          /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 justify-between border-b p-4", children: [
+            /* @__PURE__ */ jsx49("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs30(Button, { variant: "ghost", onClick: () => {
+            }, children: [
+              /* @__PURE__ */ jsx49(SendIcon, { className: "w-4 h-4" }),
+              "Send a Test Email"
+            ] }) }),
+            /* @__PURE__ */ jsxs30("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxs30(
+                Button,
+                {
+                  variant: deviceMode === "desktop" ? "default" : "ghost",
+                  onClick: () => setDeviceMode("desktop"),
+                  className: "gap-2 cursor-pointer",
+                  children: [
+                    /* @__PURE__ */ jsx49(Monitor, { className: "w-4 h-4" }),
+                    "Desktop"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs30(
+                Button,
+                {
+                  variant: deviceMode === "mobile" ? "default" : "ghost",
+                  onClick: () => setDeviceMode("mobile"),
+                  className: "gap-2 cursor-pointer",
+                  children: [
+                    /* @__PURE__ */ jsx49(Smartphone, { className: "w-4 h-4" }),
+                    "Mobile"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs30("div", { className: "flex flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx49(
+              "div",
+              {
+                className: "flex-1 flex items-start justify-center overflow-auto w-full",
+                style: { backgroundColor: template?.content?.[0]?.attributes?.["background-color"] || "#965D5D" },
+                children: isLoading ? /* @__PURE__ */ jsx49("div", { className: "flex items-center justify-center h-full w-full", children: /* @__PURE__ */ jsx49("p", { children: "Generating preview..." }) }) : /* @__PURE__ */ jsx49(
+                  "div",
+                  {
+                    className: "flex items-center justify-center bg-white transition-all duration-300 h-full w-full",
+                    children: /* @__PURE__ */ jsx49(
+                      "iframe",
+                      {
+                        srcDoc: html,
+                        className: "w-full border-0 transition-all duration-200",
+                        style: { height: "100%", minHeight: "600px", width: deviceMode === "desktop" ? "100%" : "360px", maxWidth: deviceMode === "desktop" ? "100%" : "360px" },
+                        title: "Email Preview",
+                        sandbox: "allow-same-origin"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            hasValidations && /* @__PURE__ */ jsxs30("div", { className: "w-[300px] border-l p-4 overflow-y-auto flex flex-col gap-4", children: [
+              mjmlErrors.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "w-full rounded-md border border-red-600 p-2", children: [
+                /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold text-red-600", children: "MJML Errors" }),
+                /* @__PURE__ */ jsx49("p", { className: "text-sm mt-1 text-red-600", children: "The following errors occurred during email compilation:" }),
+                /* @__PURE__ */ jsx49("ul", { className: "flex flex-col gap-2 my-2", children: mjmlErrors.map((err, i) => /* @__PURE__ */ jsxs30("li", { className: "text-sm font-mono bg-red-100 rounded border border-red-200 text-red-700 p-2", children: [
+                  /* @__PURE__ */ jsx49("span", { className: "font-semibold", children: err.tagName }),
+                  " (line ",
+                  err.line,
+                  "): ",
+                  err.message
+                ] }, i)) }),
+                /* @__PURE__ */ jsx49("p", { className: "text-xs text-red-500 italic", children: "You may need to contact support to fix these errors. You'll still be able to send the email, but it may not look as expected." })
+              ] }),
+              preview_validations.is_over_size_limit && /* @__PURE__ */ jsxs30("div", { className: "w-full rounded-md border border-red-300 p-2", children: [
+                /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold text-red-600", children: "Template Too Large" }),
+                /* @__PURE__ */ jsx49("p", { className: "text-sm mt-1 text-red-600", children: "This template exceeds the size limit. Reduce your content to use this template, otherwise it will be auto-trimmed." })
+              ] }),
+              preview_validations.placeholder_property_images > 0 && /* @__PURE__ */ jsxs30("div", { className: "w-full rounded-md border p-2", children: [
+                /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold", children: "Placeholder Property Image" }),
+                /* @__PURE__ */ jsx49("p", { className: "text-sm mt-1", children: preview_validations.placeholder_property_images === 1 ? "1 property card is still using the default placeholder image. Upload an image of the property." : `${preview_validations.placeholder_property_images} property cards are still using the default placeholder image. Upload images for each property.` })
+              ] }),
+              preview_validations.invalid_merge_fields.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "w-full rounded-md border p-2", children: [
+                /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold", children: "Invalid Merge Fields" }),
+                /* @__PURE__ */ jsx49("p", { className: "text-sm mt-1", children: "The following merge fields are used in the template but don't exist in your merge field data:" }),
+                /* @__PURE__ */ jsx49("ul", { className: "flex flex-wrap gap-2 mt-2 space-y-1", children: preview_validations.invalid_merge_fields.map((field) => /* @__PURE__ */ jsx49("li", { className: "text-sm font-mono flex items-center justify-center no-wrap whitespace-nowrap bg-background text-nowrap text-ellipsis overflow-hidden rounded border border-border text-black p-2 h-[30px]", children: `{{${field}}}` }, field)) })
+              ] }),
+              preview_validations.missing_links.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "w-full rounded-md border p-2", children: [
+                /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold", children: "Missing Links" }),
+                /* @__PURE__ */ jsx49("p", { className: "text-sm mt-1", children: "The following elements have no link set:" }),
+                /* @__PURE__ */ jsx49("ul", { className: "flex flex-wrap gap-2 mt-2", children: preview_validations.missing_links.map((item, i) => /* @__PURE__ */ jsxs30("li", { className: "text-sm w-full font-mono flex items-center justify-start no-wrap whitespace-nowrap bg-background text-nowrap text-ellipsis overflow-hidden rounded border border-border text-black p-2 h-[30px]", children: [
+                  item.type === "button" ? "Button" : "Social",
+                  ": ",
+                  item.label
+                ] }, i)) })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
   ] });
 }
 
 // src/core/editor/components/history.tsx
 import { Redo2Icon, Undo2Icon } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx50, jsxs as jsxs31 } 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__ */ jsxs30(Fragment18, { children: [
-    /* @__PURE__ */ jsxs30(Tooltip, { children: [
-      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs31(Fragment18, { children: [
+    /* @__PURE__ */ jsxs31(Tooltip, { children: [
+      /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(
         Button,
         {
           variant: "ghost",
@@ -14404,13 +14822,13 @@ var History = () => {
           size: "icon",
           disabled: !canUndo,
           onClick: undo,
-          children: /* @__PURE__ */ jsx49(Undo2Icon, {})
+          children: /* @__PURE__ */ jsx50(Undo2Icon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", children: "Undo (Ctrl+Z)" })
+      /* @__PURE__ */ jsx50(TooltipContent, { side: "bottom", children: "Undo (Ctrl+Z)" })
     ] }),
-    /* @__PURE__ */ jsxs30(Tooltip, { children: [
-      /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsxs31(Tooltip, { children: [
+      /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(
         Button,
         {
           variant: "ghost",
@@ -14418,16 +14836,16 @@ var History = () => {
           size: "icon",
           disabled: !canRedo,
           onClick: redo,
-          children: /* @__PURE__ */ jsx49(Redo2Icon, {})
+          children: /* @__PURE__ */ jsx50(Redo2Icon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", children: "Redo (Ctrl+Shift+Z)" })
+      /* @__PURE__ */ jsx50(TooltipContent, { side: "bottom", children: "Redo (Ctrl+Shift+Z)" })
     ] })
   ] });
 };
 
 // src/core/index.tsx
-import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 var MAILLOW_EMAIL_EDITOR_VERSION = "0.0.1";
 function getSectionColumnIdx(idx, template) {
   let current = idx;
@@ -14463,6 +14881,20 @@ function getCompanyFooterSection(template) {
   }
   return null;
 }
+function restoreImagePreview(shadowRoot, targetIdx, originalSrc) {
+  const targetEl = shadowRoot.querySelector(`.node-idx-${CSS.escape(targetIdx)}`);
+  if (!targetEl) return;
+  const bgEl = targetEl.querySelector("td[background], th[background]");
+  if (bgEl) {
+    bgEl.setAttribute("background", originalSrc);
+    bgEl.style.backgroundImage = `url(${originalSrc})`;
+    return;
+  }
+  const img = targetEl.querySelector("img");
+  if (img) {
+    img.src = originalSrc;
+  }
+}
 function Editor({ setEditorLoading }) {
   useUndoRedoKeyboard();
   const template = useEditorStore((state) => state.template);
@@ -14474,6 +14906,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);
@@ -14491,33 +14925,40 @@ function Editor({ setEditorLoading }) {
   const startTextEditing = useEditorStore((state) => state.startTextEditing);
   const pendingTextEditRequest = useEditorStore((state) => state.pendingTextEditRequest);
   const clearPendingTextEditRequest = useEditorStore((state) => state.clearPendingTextEditRequest);
-  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] = useState16(false);
-  const dragParentIdxRef = useRef11(null);
-  const dragPositionIndexRef = useRef11(0);
-  const createNewSectionRef = useRef11(false);
-  const splitAtParagraphRef = useRef11(null);
-  const isHorizontalDropRef = useRef11(false);
-  const horizontalDropPositionRef = useRef11(null);
-  const isSplitSectionDropRef = useRef11(false);
-  const splitSectionAtElementRef = useRef11(null);
-  const templateCacheRef = useRef11(null);
-  const parentSectionCacheRef = useRef11(/* @__PURE__ */ new Map());
-  const sectionElementCacheRef = useRef11(/* @__PURE__ */ new Map());
-  const sectionRectCacheRef = useRef11(/* @__PURE__ */ new Map());
-  const companyFooterCacheRef = useRef11(void 0);
-  const lastSyncedTemplateRef = useRef11(null);
-  const prevTextEditingIdxRef = useRef11(null);
-  useEffect20(() => {
+  const [renderData, setRenderData] = useState17(null);
+  const [isEditing, setIsEditing] = useState17(false);
+  const [dropIndicator, setDropIndicator] = useState17(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState17(null);
+  const shadowRootRef = useRef12(null);
+  const [hasSelectedElement, setHasSelectedElement] = useState17(false);
+  const dragParentIdxRef = useRef12(null);
+  const dragPositionIndexRef = useRef12(0);
+  const createNewSectionRef = useRef12(false);
+  const splitAtParagraphRef = useRef12(null);
+  const isHorizontalDropRef = useRef12(false);
+  const horizontalDropPositionRef = useRef12(null);
+  const isSplitSectionDropRef = useRef12(false);
+  const splitSectionAtElementRef = useRef12(null);
+  const templateCacheRef = useRef12(null);
+  const parentSectionCacheRef = useRef12(/* @__PURE__ */ new Map());
+  const sectionElementCacheRef = useRef12(/* @__PURE__ */ new Map());
+  const sectionRectCacheRef = useRef12(/* @__PURE__ */ new Map());
+  const companyFooterCacheRef = useRef12(void 0);
+  const lastSyncedTemplateRef = useRef12(null);
+  const prevTextEditingIdxRef = useRef12(null);
+  const lastRenderSyncNeededRef = useRef12(0);
+  const imageReplaceTargetRef = useRef12(null);
+  const imagePreviewOriginalSrcRef = useRef12(null);
+  useEffect21(() => {
     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;
       }
@@ -14526,13 +14967,13 @@ function Editor({ setEditorLoading }) {
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing, textEditing]);
-  useEffect20(() => {
+  }, [template, renderData, isEditing, textEditing, renderSyncNeeded]);
+  useEffect21(() => {
     if (renderData && setEditorLoading) {
       setEditorLoading(false);
     }
   }, [renderData, setEditorLoading]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!pendingTextEditRequest || !shadowRootRef.current) return;
     const { idx, cursorPosition } = pendingTextEditRequest;
     const blockNode = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
@@ -14581,7 +15022,7 @@ function Editor({ setEditorLoading }) {
     startTextEditing({ idx, getReferenceRect: getReferenceRect2, getShadowElement, initialWidth: blockRect.width, initialHeight: blockRect.height, clickX, clickY, content, styles, cursorPosition });
     clearPendingTextEditRequest();
   }, [pendingTextEditRequest, clearPendingTextEditRequest, startTextEditing]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (isDragging && dataTransfer) {
       const currentTemplate = useEditorStore.getState().template;
       templateCacheRef.current = currentTemplate;
@@ -14597,9 +15038,9 @@ function Editor({ setEditorLoading }) {
       sectionRectCacheRef.current.clear();
     }
   }, [isDragging, dataTransfer]);
-  const [html, setHtml] = useState16("");
-  const lastRenderDataRef = useRef11("");
-  useEffect20(() => {
+  const [html, setHtml] = useState17("");
+  const lastRenderDataRef = useRef12("");
+  useEffect21(() => {
     if (typeof window === "undefined" || !renderData) {
       setHtml("");
       lastRenderDataRef.current = "";
@@ -14626,13 +15067,13 @@ function Editor({ setEditorLoading }) {
     };
     convertMjml();
   }, [renderData]);
-  const debouncedUpdateContent = useMemo17(
+  const debouncedUpdateContent = useMemo18(
     () => debounce((contentIdx, content) => {
       updateElementContent(contentIdx, content);
     }, 200),
     [updateElementContent]
   );
-  const handleElementClick = useCallback17(
+  const handleElementClick = useCallback18(
     (idx) => {
       if (isInsideCompanyFooter(idx, template)) {
         return;
@@ -14645,7 +15086,7 @@ function Editor({ setEditorLoading }) {
     },
     [setFocusIdx, template]
   );
-  const handleElementHover = useCallback17(
+  const handleElementHover = useCallback18(
     (idx) => {
       if (!isDragging) {
         if (idx) {
@@ -14659,19 +15100,19 @@ function Editor({ setEditorLoading }) {
     },
     [isDragging, setHoverIdx, template]
   );
-  const handleContentInput = useCallback17(
+  const handleContentInput = useCallback18(
     (contentIdx, content) => {
       debouncedUpdateContent(contentIdx, content);
     },
     [debouncedUpdateContent]
   );
-  const handleEditingStart = useCallback17(() => {
+  const handleEditingStart = useCallback18(() => {
     setIsEditing(true);
   }, []);
-  const handleEditingEnd = useCallback17(() => {
+  const handleEditingEnd = useCallback18(() => {
     setIsEditing(false);
   }, []);
-  const handleSlashCommand = useCallback17(
+  const handleSlashCommand = useCallback18(
     (cursorRect) => {
       setSlashCommand({
         isActive: true,
@@ -14686,10 +15127,10 @@ function Editor({ setEditorLoading }) {
     },
     [setSlashCommand]
   );
-  const handleSlashCommandClose = useCallback17(() => {
+  const handleSlashCommandClose = useCallback18(() => {
     clearSlashCommand();
   }, [clearSlashCommand]);
-  const handleTextEditStart = useCallback17(
+  const handleTextEditStart = useCallback18(
     (idx, initialWidth, initialHeight, clickX, clickY, content, styles) => {
       const getReferenceRect2 = () => {
         if (!shadowRootRef.current) return null;
@@ -14704,11 +15145,11 @@ function Editor({ setEditorLoading }) {
     },
     [startTextEditing]
   );
-  const findParentSectionIdx = useCallback17((idx) => {
+  const findParentSectionIdx = useCallback18((idx) => {
     const match = /^(content\.children\.\[\d+\])/.exec(idx);
     return match ? match[1] : null;
   }, []);
-  const handleDragOver = useCallback17(
+  const handleDragOver = useCallback18(
     (_e, dragInfo) => {
       const currentDataTransfer = useEditorStore.getState().dataTransfer;
       if (!currentDataTransfer) return;
@@ -14717,6 +15158,11 @@ function Editor({ setEditorLoading }) {
         setDropIndicator(null);
         setDropTargetIdx(null);
         splitAtParagraphRef.current = null;
+        if (imageReplaceTargetRef.current && shadowRootRef.current && imagePreviewOriginalSrcRef.current !== null) {
+          restoreImagePreview(shadowRootRef.current, imageReplaceTargetRef.current, imagePreviewOriginalSrcRef.current);
+        }
+        imageReplaceTargetRef.current = null;
+        imagePreviewOriginalSrcRef.current = null;
         return;
       }
       const template2 = templateCacheRef.current || useEditorStore.getState().template;
@@ -14748,21 +15194,64 @@ function Editor({ setEditorLoading }) {
         }
       }
       if (hoveredType === "column" || hoveredType === "property-card" || hoveredType === "property-card-single-two" || hoveredType === "property-card-triple") {
-        const columnIdx = hoveredType === "column" ? idx : getParentIdx(idx);
-        if (columnIdx) {
-          const columnParentIdx = getParentIdx(columnIdx);
-          if (columnParentIdx) {
-            const columnParent = getValueByIdx(template2, columnParentIdx);
-            if (columnParent?.type === "section-property-km" || columnParent?.type === "section-property-single-two" || columnParent?.type === "section-property-triple") {
-              setDropIndicator(null);
-              setDropTargetIdx(null);
-              splitAtParagraphRef.current = null;
-              return;
+        const isImageReplaceDrop = currentDataTransfer.type === "image" && currentDataTransfer.payload?.attributes?.src && (hoveredType === "property-card" || hoveredType === "property-card-single-two");
+        if (!isImageReplaceDrop) {
+          const columnIdx = hoveredType === "column" ? idx : getParentIdx(idx);
+          if (columnIdx) {
+            const columnParentIdx = getParentIdx(columnIdx);
+            if (columnParentIdx) {
+              const columnParent = getValueByIdx(template2, columnParentIdx);
+              if (columnParent?.type === "section-property-km" || columnParent?.type === "section-property-single-two" || columnParent?.type === "section-property-triple") {
+                setDropIndicator(null);
+                setDropTargetIdx(null);
+                splitAtParagraphRef.current = null;
+                return;
+              }
             }
           }
         }
       }
       const dragType = currentDataTransfer.type;
+      const hasImagePayload = currentDataTransfer.payload?.attributes?.src;
+      const PROPERTY_CARD_IMAGE_TYPES = ["property-card", "property-card-single-two", "property-card-triple-item"];
+      const isImageReplaceTarget = hoveredType === "image" || PROPERTY_CARD_IMAGE_TYPES.includes(hoveredType);
+      if (dragType === "image" && hasImagePayload && isImageReplaceTarget) {
+        const newSrc = currentDataTransfer.payload.attributes.src;
+        const prevTarget = imageReplaceTargetRef.current;
+        if (prevTarget !== idx) {
+          if (prevTarget && imagePreviewOriginalSrcRef.current !== null && shadowRootRef.current) {
+            restoreImagePreview(shadowRootRef.current, prevTarget, imagePreviewOriginalSrcRef.current);
+          }
+          if (shadowRootRef.current) {
+            const targetEl = shadowRootRef.current.querySelector(`.node-idx-${CSS.escape(idx)}`);
+            if (targetEl) {
+              const img = targetEl.querySelector("img");
+              if (img && hoveredType === "image") {
+                imagePreviewOriginalSrcRef.current = img.src;
+                img.src = newSrc;
+              } else {
+                const bgEl = targetEl.querySelector("td[background], th[background]");
+                if (bgEl) {
+                  imagePreviewOriginalSrcRef.current = bgEl.getAttribute("background") || "";
+                  bgEl.setAttribute("background", newSrc);
+                  bgEl.style.backgroundImage = `url(${newSrc})`;
+                }
+              }
+            }
+          }
+          imageReplaceTargetRef.current = idx;
+        }
+        setDropIndicator(null);
+        setDropTargetIdx(idx);
+        return;
+      }
+      if (imageReplaceTargetRef.current) {
+        if (shadowRootRef.current && imagePreviewOriginalSrcRef.current !== null) {
+          restoreImagePreview(shadowRootRef.current, imageReplaceTargetRef.current, imagePreviewOriginalSrcRef.current);
+        }
+        imageReplaceTargetRef.current = null;
+        imagePreviewOriginalSrcRef.current = null;
+      }
       const validParents = VALID_PARENT_TYPES[dragType] || [];
       let parentIdx;
       let positionIndex;
@@ -15119,10 +15608,51 @@ function Editor({ setEditorLoading }) {
     [findParentSectionIdx]
     // Only dependency is the helper function
   );
-  const handleDrop = useCallback17(
+  const handleDrop = useCallback18(
     (_e, _dragInfo) => {
       const currentDataTransfer = useEditorStore.getState().dataTransfer;
       if (!currentDataTransfer) return;
+      if (imageReplaceTargetRef.current && currentDataTransfer.payload?.attributes?.src) {
+        const targetIdx = imageReplaceTargetRef.current;
+        const newSrc = currentDataTransfer.payload.attributes.src;
+        const template2 = useEditorStore.getState().template;
+        const PROPERTY_CARD_IMAGE_TYPES = ["property-card", "property-card-single-two", "property-card-triple-item"];
+        if (template2) {
+          const targetElement = getValueByIdx(template2, targetIdx);
+          if (targetElement?.type === "image") {
+            useEditorStore.getState().updateElement(targetIdx, {
+              attributes: { ...targetElement.attributes, src: newSrc }
+            });
+            useEditorStore.getState().setFocusIdx(targetIdx);
+          } else if (targetElement && PROPERTY_CARD_IMAGE_TYPES.includes(targetElement.type)) {
+            useEditorStore.getState().updateElement(targetIdx, {
+              attributes: { ...targetElement.attributes, "image-src": newSrc }
+            });
+            useEditorStore.getState().setFocusIdx(targetIdx);
+          }
+        }
+        setDropIndicator(null);
+        setDropTargetIdx(null);
+        setIsDragging(false);
+        setIsDragButtonHovered(false);
+        setDataTransfer(null);
+        setHoverIdx(null);
+        dragParentIdxRef.current = null;
+        dragPositionIndexRef.current = 0;
+        createNewSectionRef.current = false;
+        splitAtParagraphRef.current = null;
+        isHorizontalDropRef.current = false;
+        horizontalDropPositionRef.current = null;
+        isSplitSectionDropRef.current = false;
+        splitSectionAtElementRef.current = null;
+        imageReplaceTargetRef.current = null;
+        imagePreviewOriginalSrcRef.current = null;
+        templateCacheRef.current = null;
+        parentSectionCacheRef.current.clear();
+        sectionElementCacheRef.current.clear();
+        sectionRectCacheRef.current.clear();
+        return;
+      }
       if (isHorizontalDropRef.current && horizontalDropPositionRef.current) {
         const parentIdx2 = dragParentIdxRef.current;
         const dropPosition = horizontalDropPositionRef.current;
@@ -15143,6 +15673,8 @@ function Editor({ setEditorLoading }) {
         horizontalDropPositionRef.current = null;
         isSplitSectionDropRef.current = false;
         splitSectionAtElementRef.current = null;
+        imageReplaceTargetRef.current = null;
+        imagePreviewOriginalSrcRef.current = null;
         templateCacheRef.current = null;
         parentSectionCacheRef.current.clear();
         sectionElementCacheRef.current.clear();
@@ -15203,6 +15735,8 @@ function Editor({ setEditorLoading }) {
       splitAtParagraphRef.current = null;
       isSplitSectionDropRef.current = false;
       splitSectionAtElementRef.current = null;
+      imageReplaceTargetRef.current = null;
+      imagePreviewOriginalSrcRef.current = null;
       templateCacheRef.current = null;
       parentSectionCacheRef.current.clear();
       sectionElementCacheRef.current.clear();
@@ -15258,7 +15792,7 @@ function Editor({ setEditorLoading }) {
     },
     [addElement, addElementInNewSection, moveElement, moveElementToNewSection, splitTextAndInsertElement, splitSectionAndInsertElement, setIsDragging, setIsDragButtonHovered, setDataTransfer, setHoverIdx]
   );
-  const handleDragLeave = useCallback17(() => {
+  const handleDragLeave = useCallback18(() => {
     setDropIndicator(null);
     setDropTargetIdx(null);
     dragParentIdxRef.current = null;
@@ -15269,18 +15803,23 @@ function Editor({ setEditorLoading }) {
     horizontalDropPositionRef.current = null;
     isSplitSectionDropRef.current = false;
     splitSectionAtElementRef.current = null;
+    if (imageReplaceTargetRef.current && shadowRootRef.current && imagePreviewOriginalSrcRef.current !== null) {
+      restoreImagePreview(shadowRootRef.current, imageReplaceTargetRef.current, imagePreviewOriginalSrcRef.current);
+    }
+    imageReplaceTargetRef.current = null;
+    imagePreviewOriginalSrcRef.current = null;
     templateCacheRef.current = null;
     parentSectionCacheRef.current.clear();
     sectionElementCacheRef.current.clear();
     sectionRectCacheRef.current.clear();
   }, []);
-  const handleShadowRootRef = useCallback17((shadowRoot) => {
+  const handleShadowRootRef = useCallback18((shadowRoot) => {
     shadowRootRef.current = shadowRoot;
   }, []);
-  const handleSelectionRectChange = useCallback17((rect) => {
+  const handleSelectionRectChange = useCallback18((rect) => {
     setHasSelectedElement(rect !== null);
   }, []);
-  const getReferenceRect = useCallback17(() => {
+  const getReferenceRect = useCallback18(() => {
     if (!shadowRootRef.current || !focusIdx) return null;
     const selectedEl = shadowRootRef.current.querySelector(
       `.node-idx-${CSS.escape(focusIdx)}`
@@ -15308,14 +15847,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 = useMemo17(
+  const showCompanyFooter = useMemo18(
     () => template.content[0]?.data?.value?.showCompanyFooter ?? true,
     [template.content[0]?.data?.value?.showCompanyFooter]
   );
   if (!html) {
-    return /* @__PURE__ */ jsx50("div", { className: "maillow-editor flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx50(Spinner, {}) });
+    return /* @__PURE__ */ jsx51("div", { className: "maillow-editor flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx51(Spinner, {}) });
   }
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: "maillow-editor relative ",
@@ -15326,48 +15865,51 @@ function Editor({ setEditorLoading }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsxs32(
           "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__ */ jsx51("div", { className: "w-full h-[2px] bg-black opacity-10" }),
+              /* @__PURE__ */ jsx51(
+                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, {}),
-        /* @__PURE__ */ jsx50(TiptapOverlay, {}),
-        !isDragging && !isScaling && hasSelectedElement && focusIdx && selectedElement?.type && /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx51(ElementsSuggestions, {}),
+        /* @__PURE__ */ jsx51(MergeFieldSuggestions, {}),
+        /* @__PURE__ */ jsx51(TiptapOverlay, {}),
+        !isDragging && !isScaling && hasSelectedElement && focusIdx && selectedElement?.type && /* @__PURE__ */ jsx51(
           ElementFloat,
           {
             getReferenceRect,
@@ -15375,7 +15917,7 @@ function Editor({ setEditorLoading }) {
             elementType: selectedElement.type
           }
         ),
-        !isScaling && hasSelectedElement && focusIdx && canDragSelectedElement && !NOT_DRAGGABLE_ELEMENTS.includes(selectedElement.type) && /* @__PURE__ */ jsx50(
+        !isScaling && hasSelectedElement && focusIdx && canDragSelectedElement && !NOT_DRAGGABLE_ELEMENTS.includes(selectedElement.type) && /* @__PURE__ */ jsx51(
           DragButton,
           {
             getReferenceRect,
@@ -15384,17 +15926,17 @@ function Editor({ setEditorLoading }) {
             isDragging
           }
         ),
-        !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 && selectedElement?.type === "divider" && /* @__PURE__ */ jsx51(DividerScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "button" && /* @__PURE__ */ jsx51(ButtonScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "image" && /* @__PURE__ */ jsx51(ImageScale, { getReferenceRect }),
+        !isDragging && hasSelectedElement && focusIdx && selectedElement?.type === "space" && /* @__PURE__ */ jsx51(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__ */ jsx50(
+          return /* @__PURE__ */ jsx51(
             ColumnScale,
             {
               sectionColumnIdx,
@@ -15416,9 +15958,7 @@ export {
   parseBorder,
   formatBorder,
   parsePrice,
-  json2mjml,
   MAX_TEMPLATE_SIZE,
-  useEditorStore,
   BUTTON_ALIGNMENTS,
   ALIGNMENT_ICONS,
   FONTS,
@@ -15436,6 +15976,9 @@ export {
   MIN_LINE_HEIGHT,
   MAX_LINE_HEIGHT,
   LINE_HEIGHT_STEP,
+  DEFAULT_PROPERTY_PLACEHOLDER_IMAGE,
+  json2mjml,
+  useEditorStore,
   setupDragImage,
   getElementDisplayName,
   cn,