@kgalexander/mcreate 0.0.10 → 0.0.12

package/dist/index.js

@@ -267,7 +267,7 @@ var init_format = __esm({
 function propertyCardMockMjml(block, context) {
   const a = block.attributes;
   const trackingClasses = context.mode === "editing" ? getTrackingClasses(context.idx, "property-card") : "";
-  const href = a["href"] || a["link"] || "#";
+  const href = a["href"] || "";
   const price = formatPrice(a["price"] || "$0");
   const address = a["address"] || "123 Main Street";
   const city = a["city"] || "City, ST 00000";
@@ -443,7 +443,7 @@ function propertyCardSingleTwoMockMjml(block, context) {
   const a = block.attributes;
   const trackingClasses = context.mode === "editing" ? getTrackingClasses(context.idx, "property-card-single-two") : "";
   const uniqueId = Math.random().toString(36).slice(2, 8);
-  const href = a["href"] || a["link"] || "#";
+  const href = a["href"] || "";
   const price = formatPrice(a["price"] || "$0");
   const address = a["address"] || "123 Main Street";
   const city = a["city"] || "City, ST 00000";
@@ -644,7 +644,7 @@ var init_mock_property_singletwo = __esm({
 // src/render/Mockup/mock-property-triple-better.ts
 function renderCard(child, childIdx, context, uniqueId, borderRadius, imageHeight, border, fontFamily, textColor, backgroundColor, innerBorderRadius) {
   const attrs = child.attributes;
-  const href = attrs["href"] || attrs["link"] || "#";
+  const href = attrs["href"] || "";
   const price = formatPrice(attrs["price"] || "$0");
   const beds = formatNumber(attrs["beds"] || "--");
   const baths = formatNumber(attrs["baths"] || "--");
@@ -948,7 +948,7 @@ function propertyCardTripleToMjml(block, context) {
     const cardNum = index + 1;
     const childAttrs = child.attributes || {};
     productionAttrs[`image-src-${cardNum}`] = childAttrs["image-src"] || "";
-    productionAttrs[`href-${cardNum}`] = childAttrs["href"] || childAttrs["link"] || "#";
+    productionAttrs[`href-${cardNum}`] = childAttrs["href"] || "";
     productionAttrs[`price-${cardNum}`] = childAttrs["price"] || "$0";
     productionAttrs[`beds-${cardNum}`] = childAttrs["beds"] || "--";
     productionAttrs[`baths-${cardNum}`] = childAttrs["baths"] || "--";
@@ -1076,7 +1076,7 @@ function rootChildrenToMjml(children, parentContext) {
 function json2mjml(template, mode = "production", options = {}) {
   const showCompanyFooter = template.content[0]?.data?.value?.showCompanyFooter ?? true;
   const footerMutation = needsCompanyFooterMutation(template);
-  const needsProductionFilter = mode === "production" && options?.isPaid && !showCompanyFooter;
+  const needsProductionFilter = mode === "production" && (options?.isPaidLevel ?? 0) >= 1 && !showCompanyFooter;
   if (footerMutation || needsProductionFilter) {
     template = typeof structuredClone !== "undefined" ? structuredClone(template) : JSON.parse(JSON.stringify(template));
   }
@@ -1129,7 +1129,6 @@ function json2mjml(template, mode = "production", options = {}) {
           p { margin: 0px 0px 0px 0px !important; }
           a { color: ${linkColor}; text-decoration: none; }
           a span { text-decoration: underline; }
-          p span { text-decoration: underline; }
 
           .property-details-separator {font-family:Arial,sans-serif;color:#C3C3C3;padding:0 4px 0 2px;}
 
@@ -1492,7 +1491,7 @@ function createPropertyCardElement(payload) {
       "beds": "--",
       "baths": "--",
       "sqft": "--",
-      "link": "#",
+      "href": "",
       "status": "Empty",
       "is-status": "show",
       "status-color": "#B8B8B8",
@@ -1521,7 +1520,7 @@ function createPropertyCardSingleTwoElement(payload) {
       "beds": "--",
       "baths": "--",
       "sqft": "--",
-      "link": "#",
+      "href": "",
       "status": "Empty",
       "is-status": "show",
       "status-color": "#B8B8B8",
@@ -1608,7 +1607,7 @@ function createPropertyCardTripleItemElement(payload) {
     data: { value: {} },
     attributes: {
       "image-src": payload?.attributes?.["image-src"] || "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-      "link": payload?.attributes?.["link"] || "#",
+      "href": payload?.attributes?.["href"] || "",
       "price": payload?.attributes?.["price"] || "$0",
       "beds": payload?.attributes?.["beds"] || "--",
       "baths": payload?.attributes?.["baths"] || "--",
@@ -1628,6 +1627,7 @@ function createPropertyCardTripleElement(payload) {
       "gap": "24px",
       "border-radius": "0px",
       "border": "1px solid #d1d1d5",
+      "background-color": "#ffffff",
       "image-height": "102px",
       ...payload?.attributes
     },
@@ -2015,7 +2015,7 @@ function setValueAtPath(template, path, value) {
     (0, import_set.default)(template, lodashPath, value);
   }
 }
-var import_zustand, import_immer, import_middleware, import_get2, import_set, import_cloneDeep, import_immer2, import_sonner, SECTION_INDEX_REGEX, MAX_TEMPLATE_SIZE, defaultTemplate, useEditorStore;
+var import_zustand, import_immer, import_middleware, import_get2, import_set, import_cloneDeep, import_immer2, import_sonner, SECTION_INDEX_REGEX, MAX_TEMPLATE_SIZE, defaultTemplate, MAX_PAID_LEVEL, useEditorStore;
 var init_editor = __esm({
   "src/core/editor/state/editor.ts"() {
     "use strict";
@@ -2040,6 +2040,7 @@ var init_editor = __esm({
         id: page.id || generateId()
       }))
     };
+    MAX_PAID_LEVEL = 3;
     useEditorStore = (0, import_zustand.create)()(
       (0, import_middleware.devtools)(
         (0, import_immer.immer)((set) => ({
@@ -2068,12 +2069,15 @@ var init_editor = __esm({
           // Auto-save tracking
           lastSavedSnapshot: null,
           isSaving: false,
+          // Subscription level (0 = free, 1-3 = paid tiers)
+          isPaidLevel: 0,
           // Initialize store with external template (for npm package usage)
-          initializeWithTemplate: (templateId, template, onSave) => {
+          initializeWithTemplate: (templateId, template, onSave, isPaidLevel) => {
             set((state) => {
               state.templateId = templateId;
               state.template = template;
               state.onSave = onSave ?? null;
+              state.isPaidLevel = isPaidLevel ?? 0;
               state.templateSize = calculateTemplateSize(template);
               state.isAtSizeLimit = false;
               state.history = [(0, import_cloneDeep.default)(template)];
@@ -3613,579 +3617,6 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   cssCache.set(cacheKey, css);
   return css;
 }
-function ShadowDomRenderer({
-  html,
-  focusIdx,
-  hoverIdx,
-  dropIndicator,
-  dropTargetIdx,
-  isDragging = false,
-  isDragButtonHovered = false,
-  textEditingIdx = null,
-  showCompanyFooter = true,
-  onElementClick,
-  onElementHover,
-  onContentInput,
-  onEditingStart,
-  onEditingEnd,
-  onDragOver,
-  onDrop,
-  onDragLeave,
-  onSelectionRectChange,
-  onShadowRootRef,
-  onSlashCommand,
-  onSlashCommandClose,
-  onTextEditStart
-}) {
-  const containerRef = (0, import_react.useRef)(null);
-  const shadowRootRef = (0, import_react.useRef)(null);
-  const rafRef = (0, import_react.useRef)(null);
-  const lastBlockNodeRef = (0, import_react.useRef)(null);
-  const callbackRefs = (0, import_react.useRef)({
-    onElementClick,
-    onElementHover,
-    onContentInput,
-    onEditingStart,
-    onEditingEnd,
-    onDragOver,
-    onDrop,
-    onDragLeave,
-    onSlashCommand,
-    onSlashCommandClose,
-    onTextEditStart
-  });
-  (0, import_react.useEffect)(() => {
-    callbackRefs.current = {
-      onElementClick,
-      onElementHover,
-      onContentInput,
-      onEditingStart,
-      onEditingEnd,
-      onDragOver,
-      onDrop,
-      onDragLeave,
-      onSlashCommand,
-      onSlashCommandClose,
-      onTextEditStart
-    };
-  });
-  (0, import_react.useEffect)(() => {
-    if (containerRef.current && !shadowRootRef.current) {
-      shadowRootRef.current = containerRef.current.attachShadow({ mode: "open" });
-      onShadowRootRef?.(shadowRootRef.current);
-    }
-  }, [onShadowRootRef]);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    const styleEl = document.createElement("style");
-    styleEl.id = "editor-styles";
-    styleEl.textContent = getEditorStyles(isDragButtonHovered, textEditingIdx);
-    const contentWrapper = document.createElement("div");
-    contentWrapper.className = "shadow-content";
-    contentWrapper.innerHTML = html;
-    contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
-    contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
-    contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
-    const template = useEditorStore.getState().template;
-    const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
-    contentWrapper.style.setProperty("--link-color", linkColor2);
-    injectContentEditable(contentWrapper);
-    shadowRootRef.current.innerHTML = "";
-    shadowRootRef.current.appendChild(styleEl);
-    shadowRootRef.current.appendChild(contentWrapper);
-  }, [html]);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    const styleEl = shadowRootRef.current.querySelector("#editor-styles");
-    if (styleEl) {
-      styleEl.textContent = getEditorStyles(isDragButtonHovered, textEditingIdx);
-    }
-  }, [isDragButtonHovered, textEditingIdx]);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    const contentWrapper = shadowRootRef.current.querySelector(".shadow-content");
-    if (contentWrapper) {
-      contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
-      contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
-      contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
-      const template = useEditorStore.getState().template;
-      const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
-      contentWrapper.style.setProperty("--link-color", linkColor2);
-    }
-  }, [isDragging, showCompanyFooter]);
-  const linkColor = useEditorStore((state) => state.template?.content?.[0]?.data?.value?.linkColor);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    const contentWrapper = shadowRootRef.current.querySelector(".shadow-content");
-    if (contentWrapper) {
-      contentWrapper.style.setProperty("--link-color", linkColor || "#0000ff");
-    }
-  }, [linkColor]);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    shadowRootRef.current.querySelectorAll(".is-selected").forEach((el) => {
-      el.classList.remove("is-selected");
-    });
-    shadowRootRef.current.querySelectorAll(".is-column-selected").forEach((el) => {
-      el.classList.remove("is-column-selected");
-    });
-    shadowRootRef.current.querySelectorAll(".is-card-selected").forEach((el) => {
-      el.classList.remove("is-card-selected");
-    });
-    if (focusIdx) {
-      const selectedEl = shadowRootRef.current.querySelector(
-        `.node-idx-${CSS.escape(focusIdx)}`
-      );
-      if (selectedEl) {
-        if (focusIdx !== "content") {
-          selectedEl.classList.add("is-selected");
-        }
-        if (selectedEl.classList.contains("node-type-section-column")) {
-          selectedEl.querySelectorAll(".node-type-column").forEach((col) => {
-            col.classList.add("is-column-selected");
-          });
-        } else if (selectedEl.classList.contains("node-type-column")) {
-          const parentSection = selectedEl.closest(".node-type-section-column");
-          if (parentSection) {
-            parentSection.querySelectorAll(".node-type-column").forEach((col) => {
-              col.classList.add("is-column-selected");
-            });
-          }
-        } else {
-          const parentSectionColumn = selectedEl.closest(".node-type-section-column");
-          if (parentSectionColumn) {
-            const parentColumn = selectedEl.closest(".node-type-column");
-            if (parentColumn) {
-              parentColumn.classList.add("is-column-selected");
-            }
-          }
-        }
-        if (selectedEl.classList.contains("node-type-section-property-triple")) {
-          selectedEl.querySelectorAll(".node-type-property-card-triple-item").forEach((card) => {
-            card.classList.add("is-card-selected");
-          });
-        } else if (selectedEl.classList.contains("node-type-property-card-triple")) {
-          selectedEl.querySelectorAll(".node-type-property-card-triple-item").forEach((card) => {
-            card.classList.add("is-card-selected");
-          });
-        } else if (selectedEl.classList.contains("node-type-property-card-triple-item")) {
-          selectedEl.classList.add("is-card-selected");
-        }
-        onSelectionRectChange?.(selectedEl.getBoundingClientRect());
-      } else {
-        onSelectionRectChange?.(null);
-      }
-    } else {
-      onSelectionRectChange?.(null);
-    }
-  }, [focusIdx, html, onSelectionRectChange]);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    shadowRootRef.current.querySelectorAll(".is-hovered").forEach((el) => {
-      el.classList.remove("is-hovered");
-    });
-    shadowRootRef.current.querySelectorAll(".is-column-hover-parent").forEach((el) => {
-      el.classList.remove("is-column-hover-parent");
-    });
-    if (hoverIdx && hoverIdx !== focusIdx && hoverIdx !== "content") {
-      const hoveredEl = shadowRootRef.current.querySelector(
-        `.node-idx-${CSS.escape(hoverIdx)}`
-      );
-      if (hoveredEl) {
-        hoveredEl.classList.add("is-hovered");
-        if (!hoveredEl.classList.contains("node-type-column")) {
-          const parentSectionColumn = hoveredEl.closest(".node-type-section-column");
-          if (parentSectionColumn) {
-            const parentColumn = hoveredEl.closest(".node-type-column");
-            if (parentColumn) {
-              parentColumn.classList.add("is-column-hover-parent");
-            }
-          }
-        }
-      }
-    }
-  }, [focusIdx, hoverIdx, html]);
-  (0, import_react.useEffect)(() => {
-    if (!shadowRootRef.current) return;
-    shadowRootRef.current.querySelectorAll(".is-drop-target").forEach((el) => {
-      el.classList.remove("is-drop-target");
-    });
-    if (dropTargetIdx && isDragging) {
-      const targetEl = shadowRootRef.current.querySelector(
-        `.node-idx-${CSS.escape(dropTargetIdx)}`
-      );
-      if (targetEl) {
-        targetEl.classList.add("is-drop-target");
-      }
-    }
-  }, [dropTargetIdx, isDragging]);
-  (0, import_react.useEffect)(() => {
-    const shadowRoot = shadowRootRef.current;
-    if (!shadowRoot) return;
-    const handleMouseDown = (e) => {
-      const target = e.target;
-      const mouseEvent = e;
-      if (target.closest('[contenteditable="true"]')) {
-        return;
-      }
-      const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
-      if (blockNode && callbackRefs.current.onElementClick) {
-        const idx = getIdxFromElement(blockNode);
-        if (idx) {
-          callbackRefs.current.onElementClick(idx);
-          if (blockNode.classList.contains("node-type-text") && callbackRefs.current.onTextEditStart) {
-            const contentDiv = blockNode.querySelector("div");
-            if (contentDiv) {
-              const blockEl = blockNode;
-              const blockRect = blockEl.getBoundingClientRect();
-              const blockStyle = window.getComputedStyle(blockEl);
-              const content = contentDiv.innerHTML;
-              const clickX = mouseEvent.clientX;
-              const clickY = mouseEvent.clientY;
-              const contentStyle = window.getComputedStyle(contentDiv);
-              const styles = {
-                fontFamily: contentStyle.fontFamily,
-                fontSize: contentStyle.fontSize,
-                fontWeight: contentStyle.fontWeight,
-                lineHeight: contentStyle.lineHeight,
-                color: contentStyle.color,
-                textAlign: contentStyle.textAlign,
-                padding: blockStyle.padding,
-                // Use td's padding
-                // Additional text-rendering properties for exact matching
-                letterSpacing: contentStyle.letterSpacing,
-                wordSpacing: contentStyle.wordSpacing,
-                textRendering: contentStyle.textRendering,
-                fontStyle: contentStyle.fontStyle,
-                textDecoration: contentStyle.textDecoration,
-                textTransform: contentStyle.textTransform,
-                fontVariant: contentStyle.fontVariant,
-                textIndent: contentStyle.textIndent
-              };
-              callbackRefs.current.onTextEditStart?.(idx, blockRect.width, blockRect.height, clickX, clickY, content, styles);
-            }
-          }
-        }
-      }
-    };
-    const handleMouseOver = (e) => {
-      const target = e.target;
-      const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
-      if (blockNode && callbackRefs.current.onElementHover) {
-        const idx = getIdxFromElement(blockNode);
-        callbackRefs.current.onElementHover(idx || null);
-      }
-    };
-    const handleMouseOut = (e) => {
-      const relatedTarget = e.relatedTarget;
-      if (!relatedTarget || !shadowRoot.contains(relatedTarget)) {
-        callbackRefs.current.onElementHover?.(null);
-      }
-    };
-    const handleInput = (e) => {
-      const target = e.target;
-      if (target.getAttribute("contenteditable") === "true" && callbackRefs.current.onContentInput) {
-        const contentIdx = target.getAttribute("data-content-idx");
-        if (contentIdx) {
-          const isRichText = target.closest(".node-type-text");
-          const content = isRichText ? target.innerHTML : target.textContent || "";
-          callbackRefs.current.onContentInput(contentIdx, content);
-          if (isRichText) {
-            if (isTextContentEmpty(target)) {
-              target.classList.add("is-empty");
-            } else {
-              target.classList.remove("is-empty");
-            }
-          }
-        }
-      }
-    };
-    const handleFocus = (e) => {
-      const target = e.target;
-      if (target.getAttribute("contenteditable") === "true") {
-        callbackRefs.current.onEditingStart?.();
-        const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
-        if (blockNode && callbackRefs.current.onElementClick) {
-          const idx = getIdxFromElement(blockNode);
-          if (idx) {
-            callbackRefs.current.onElementClick(idx);
-          }
-        }
-      }
-    };
-    const handleBlur = (e) => {
-      const target = e.target;
-      if (target.getAttribute("contenteditable") === "true") {
-        callbackRefs.current.onEditingEnd?.();
-      }
-    };
-    const getParagraphInfo = (blockNode, mouseY) => {
-      if (!blockNode.classList.contains("node-type-text")) return void 0;
-      const contentDiv = blockNode.querySelector("div");
-      if (!contentDiv) return void 0;
-      const paragraphs = Array.from(contentDiv.querySelectorAll("p"));
-      if (paragraphs.length < 2) return void 0;
-      for (let i = 0; i < paragraphs.length; i++) {
-        const pRect = paragraphs[i].getBoundingClientRect();
-        if (mouseY >= pRect.top && mouseY <= pRect.bottom) {
-          const midpoint = pRect.top + pRect.height / 2;
-          return {
-            paragraphIndex: i,
-            totalParagraphs: paragraphs.length,
-            paragraphRect: pRect,
-            isAboveMidpoint: mouseY < midpoint
-          };
-        }
-      }
-      return void 0;
-    };
-    const handleDragOver = (e) => {
-      const dragEvent = e;
-      dragEvent.preventDefault();
-      const target = dragEvent.target;
-      const mouseY = dragEvent.clientY;
-      const mouseX = dragEvent.clientX;
-      let blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
-      if (blockNode && getTypeFromElement(blockNode) === "social-item") {
-        blockNode = blockNode.parentElement?.closest(`.${EMAIL_BLOCK_CLASS_NAME}`) || null;
-      }
-      if (rafRef.current) return;
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        if (blockNode === lastBlockNodeRef.current && blockNode) {
-          const dragInfo2 = {
-            idx: getIdxFromElement(blockNode),
-            type: getTypeFromElement(blockNode),
-            rect: blockNode.getBoundingClientRect(),
-            mouseY,
-            // Use captured value
-            mouseX,
-            // Use captured value
-            paragraphInfo: getParagraphInfo(blockNode, mouseY)
-          };
-          callbackRefs.current.onDragOver?.(dragEvent, dragInfo2);
-          return;
-        }
-        lastBlockNodeRef.current = blockNode;
-        const dragInfo = {
-          idx: blockNode ? getIdxFromElement(blockNode) : null,
-          type: blockNode ? getTypeFromElement(blockNode) : null,
-          rect: blockNode ? blockNode.getBoundingClientRect() : null,
-          mouseY,
-          // Use captured value
-          mouseX,
-          // Use captured value
-          paragraphInfo: blockNode ? getParagraphInfo(blockNode, mouseY) : void 0
-        };
-        callbackRefs.current.onDragOver?.(dragEvent, dragInfo);
-      });
-    };
-    const handleDragLeave = (e) => {
-      const dragEvent = e;
-      const relatedTarget = dragEvent.relatedTarget;
-      if (!relatedTarget || !shadowRoot.contains(relatedTarget)) {
-        lastBlockNodeRef.current = null;
-        callbackRefs.current.onDragLeave?.();
-      }
-    };
-    const handleDrop = (e) => {
-      const dragEvent = e;
-      dragEvent.preventDefault();
-      const target = dragEvent.target;
-      const mouseY = dragEvent.clientY;
-      const mouseX = dragEvent.clientX;
-      const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
-      const dragInfo = {
-        idx: blockNode ? getIdxFromElement(blockNode) : null,
-        type: blockNode ? getTypeFromElement(blockNode) : null,
-        rect: blockNode ? blockNode.getBoundingClientRect() : null,
-        mouseY,
-        mouseX,
-        paragraphInfo: blockNode ? getParagraphInfo(blockNode, mouseY) : void 0
-      };
-      callbackRefs.current.onDrop?.(dragEvent, dragInfo);
-    };
-    const handleLinkClick = (e) => {
-      const target = e.target;
-      if (target.tagName === "A" || target.closest("a")) {
-        e.preventDefault();
-      }
-    };
-    const handleKeyDown = (e) => {
-      const keyEvent = e;
-      const target = keyEvent.target;
-      if (target.getAttribute("contenteditable") === "true" && target.closest(".node-type-button")) {
-        const isAtSizeLimit = useEditorStore.getState().isAtSizeLimit;
-        if (isAtSizeLimit) {
-          const allowedKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Escape", "Tab"];
-          const isModifier = keyEvent.ctrlKey || keyEvent.metaKey || keyEvent.altKey;
-          const isAllowed = allowedKeys.includes(keyEvent.key) || isModifier;
-          if (!isAllowed && (keyEvent.key.length === 1 || keyEvent.key === "Enter")) {
-            keyEvent.preventDefault();
-            const now = Date.now();
-            if (now - lastSizeLimitToastTime > 2e3) {
-              lastSizeLimitToastTime = now;
-              import_sonner2.toast.error("Template size limit reached");
-            }
-            return;
-          }
-        }
-        return;
-      }
-      const relevantKeys = ["/", "Escape", " ", "Backspace"];
-      if (!relevantKeys.includes(keyEvent.key)) return;
-      if (target.getAttribute("contenteditable") !== "true") return;
-      if (!target.closest(".node-type-text")) return;
-      if (keyEvent.key === "Escape") {
-        callbackRefs.current.onSlashCommandClose?.();
-        return;
-      }
-      if (keyEvent.key === " ") {
-        callbackRefs.current.onSlashCommandClose?.();
-        return;
-      }
-      if (keyEvent.key === "Backspace") {
-        callbackRefs.current.onSlashCommandClose?.();
-        return;
-      }
-      if (keyEvent.key !== "/") return;
-      const selection = window.getSelection();
-      if (!selection || !selection.rangeCount) return;
-      const range = selection.getRangeAt(0);
-      const textContent = target.textContent || "";
-      const cursorOffset = range.startOffset;
-      const charBefore = cursorOffset > 0 ? textContent[cursorOffset - 1] : "";
-      if (cursorOffset > 0 && charBefore !== " " && charBefore !== "\xA0") {
-        return;
-      }
-      const targetRect = target.getBoundingClientRect();
-      const rangeRect = range.getBoundingClientRect();
-      const hasValidRangeRect = rangeRect.height > 0 || (rangeRect.top !== 0 || rangeRect.left !== 0);
-      const rect = hasValidRangeRect ? rangeRect : {
-        top: targetRect.top,
-        left: targetRect.left,
-        bottom: targetRect.top + 20,
-        right: targetRect.left,
-        width: 0,
-        height: 20,
-        x: targetRect.left,
-        y: targetRect.top,
-        toJSON: () => ({})
-      };
-      callbackRefs.current.onSlashCommand?.(rect);
-    };
-    const handlePaste = (e) => {
-      const clipboardEvent = e;
-      const target = clipboardEvent.target;
-      if (target.getAttribute("contenteditable") !== "true") return;
-      if (!target.closest(".node-type-button")) return;
-      const { templateSize } = useEditorStore.getState();
-      const pastedText = clipboardEvent.clipboardData?.getData("text/plain") || "";
-      const pasteSize = new Blob([pastedText]).size;
-      if (templateSize + pasteSize > MAX_TEMPLATE_SIZE) {
-        clipboardEvent.preventDefault();
-        const now = Date.now();
-        if (now - lastSizeLimitToastTime > 2e3) {
-          lastSizeLimitToastTime = now;
-          import_sonner2.toast.error("Template size limit reached");
-        }
-      }
-    };
-    shadowRoot.addEventListener("mousedown", handleMouseDown);
-    shadowRoot.addEventListener("click", handleLinkClick, true);
-    shadowRoot.addEventListener("mouseover", handleMouseOver);
-    shadowRoot.addEventListener("mouseout", handleMouseOut);
-    shadowRoot.addEventListener("input", handleInput);
-    shadowRoot.addEventListener("focusin", handleFocus);
-    shadowRoot.addEventListener("focusout", handleBlur);
-    shadowRoot.addEventListener("keydown", handleKeyDown);
-    shadowRoot.addEventListener("paste", handlePaste);
-    shadowRoot.addEventListener("dragover", handleDragOver);
-    shadowRoot.addEventListener("dragleave", handleDragLeave);
-    shadowRoot.addEventListener("drop", handleDrop);
-    return () => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      lastBlockNodeRef.current = null;
-      shadowRoot.removeEventListener("mousedown", handleMouseDown);
-      shadowRoot.removeEventListener("click", handleLinkClick, true);
-      shadowRoot.removeEventListener("mouseover", handleMouseOver);
-      shadowRoot.removeEventListener("mouseout", handleMouseOut);
-      shadowRoot.removeEventListener("input", handleInput);
-      shadowRoot.removeEventListener("focusin", handleFocus);
-      shadowRoot.removeEventListener("focusout", handleBlur);
-      shadowRoot.removeEventListener("keydown", handleKeyDown);
-      shadowRoot.removeEventListener("paste", handlePaste);
-      shadowRoot.removeEventListener("dragover", handleDragOver);
-      shadowRoot.removeEventListener("dragleave", handleDragLeave);
-      shadowRoot.removeEventListener("drop", handleDrop);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: containerRef,
-        className: "shadow-dom-renderer",
-        style: {
-          width: "100%",
-          height: "100%",
-          overflow: "auto"
-        }
-      }
-    ),
-    dropIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: "drop-indicator-line",
-        style: {
-          position: "fixed",
-          // Horizontal indicator (existing default)
-          ...(dropIndicator.orientation === "horizontal" || !dropIndicator.orientation) && {
-            top: dropIndicator.top - 1.5,
-            left: dropIndicator.left,
-            width: dropIndicator.width,
-            height: 3
-          },
-          // Vertical indicator (NEW)
-          ...dropIndicator.orientation === "vertical" && {
-            top: dropIndicator.top,
-            left: dropIndicator.left - 1.5,
-            width: 3,
-            height: dropIndicator.height
-          },
-          backgroundColor: isDragging ? "rgb(147, 51, 234)" : "#3b82f6",
-          borderRadius: 2,
-          pointerEvents: "none",
-          zIndex: 9999,
-          boxShadow: isDragging ? "0 0 4px rgba(147, 51, 234, 0.5)" : "0 0 4px rgba(59, 130, 246, 0.5)"
-        },
-        children: (dropIndicator.isNewSection || dropIndicator.isSplitSection) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              backgroundColor: "rgb(147, 51, 234)",
-              color: "white",
-              fontSize: 12,
-              fontWeight: 600,
-              padding: "4px 10px",
-              borderRadius: 9999,
-              whiteSpace: "nowrap",
-              pointerEvents: "none"
-            },
-            children: dropIndicator.isNewSection ? "New section" : "Split section"
-          }
-        )
-      }
-    )
-  ] });
-}
 function getIdxFromElement(element) {
   const classList = element.classList;
   for (let i = 0; i < classList.length; i++) {
@@ -4243,7 +3674,7 @@ function injectContentEditable(container) {
     }
   });
 }
-var import_react, import_sonner2, import_jsx_runtime, lastSizeLimitToastTime, cssCache;
+var import_react, import_sonner2, import_jsx_runtime, lastSizeLimitToastTime, cssCache, ShadowDomRenderer;
 var init_ShadowDomRenderer = __esm({
   "src/core/editor/components/ShadowDomRenderer.tsx"() {
     "use strict";
@@ -4256,6 +3687,591 @@ var init_ShadowDomRenderer = __esm({
     import_jsx_runtime = require("react/jsx-runtime");
     lastSizeLimitToastTime = 0;
     cssCache = /* @__PURE__ */ new Map();
+    ShadowDomRenderer = (0, import_react.memo)(function ShadowDomRenderer2({
+      html,
+      focusIdx,
+      hoverIdx,
+      dropIndicator,
+      dropTargetIdx,
+      isDragging = false,
+      isDragButtonHovered = false,
+      textEditingIdx = null,
+      showCompanyFooter = true,
+      onElementClick,
+      onElementHover,
+      onContentInput,
+      onEditingStart,
+      onEditingEnd,
+      onDragOver,
+      onDrop,
+      onDragLeave,
+      onSelectionRectChange,
+      onShadowRootRef,
+      onSlashCommand,
+      onSlashCommandClose,
+      onTextEditStart
+    }) {
+      const containerRef = (0, import_react.useRef)(null);
+      const shadowRootRef = (0, import_react.useRef)(null);
+      const rafRef = (0, import_react.useRef)(null);
+      const lastBlockNodeRef = (0, import_react.useRef)(null);
+      const hoverRafRef = (0, import_react.useRef)(null);
+      const lastHoverIdxRef = (0, import_react.useRef)(null);
+      const callbackRefs = (0, import_react.useRef)({
+        onElementClick,
+        onElementHover,
+        onContentInput,
+        onEditingStart,
+        onEditingEnd,
+        onDragOver,
+        onDrop,
+        onDragLeave,
+        onSlashCommand,
+        onSlashCommandClose,
+        onTextEditStart
+      });
+      (0, import_react.useEffect)(() => {
+        callbackRefs.current = {
+          onElementClick,
+          onElementHover,
+          onContentInput,
+          onEditingStart,
+          onEditingEnd,
+          onDragOver,
+          onDrop,
+          onDragLeave,
+          onSlashCommand,
+          onSlashCommandClose,
+          onTextEditStart
+        };
+      });
+      (0, import_react.useEffect)(() => {
+        if (containerRef.current && !shadowRootRef.current) {
+          shadowRootRef.current = containerRef.current.attachShadow({ mode: "open" });
+          onShadowRootRef?.(shadowRootRef.current);
+        }
+      }, [onShadowRootRef]);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        const styleEl = document.createElement("style");
+        styleEl.id = "editor-styles";
+        styleEl.textContent = getEditorStyles(isDragButtonHovered, textEditingIdx);
+        const contentWrapper = document.createElement("div");
+        contentWrapper.className = "shadow-content";
+        contentWrapper.innerHTML = html;
+        contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
+        contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
+        contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
+        const template = useEditorStore.getState().template;
+        const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
+        contentWrapper.style.setProperty("--link-color", linkColor2);
+        injectContentEditable(contentWrapper);
+        shadowRootRef.current.innerHTML = "";
+        shadowRootRef.current.appendChild(styleEl);
+        shadowRootRef.current.appendChild(contentWrapper);
+      }, [html]);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        const styleEl = shadowRootRef.current.querySelector("#editor-styles");
+        if (styleEl) {
+          styleEl.textContent = getEditorStyles(isDragButtonHovered, textEditingIdx);
+        }
+      }, [isDragButtonHovered, textEditingIdx]);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        const contentWrapper = shadowRootRef.current.querySelector(".shadow-content");
+        if (contentWrapper) {
+          contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
+          contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
+          contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
+          const template = useEditorStore.getState().template;
+          const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
+          contentWrapper.style.setProperty("--link-color", linkColor2);
+        }
+      }, [isDragging, showCompanyFooter]);
+      const linkColor = useEditorStore((state) => state.template?.content?.[0]?.data?.value?.linkColor);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        const contentWrapper = shadowRootRef.current.querySelector(".shadow-content");
+        if (contentWrapper) {
+          contentWrapper.style.setProperty("--link-color", linkColor || "#0000ff");
+        }
+      }, [linkColor]);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        shadowRootRef.current.querySelectorAll(".is-selected").forEach((el) => {
+          el.classList.remove("is-selected");
+        });
+        shadowRootRef.current.querySelectorAll(".is-column-selected").forEach((el) => {
+          el.classList.remove("is-column-selected");
+        });
+        shadowRootRef.current.querySelectorAll(".is-card-selected").forEach((el) => {
+          el.classList.remove("is-card-selected");
+        });
+        if (focusIdx) {
+          const selectedEl = shadowRootRef.current.querySelector(
+            `.node-idx-${CSS.escape(focusIdx)}`
+          );
+          if (selectedEl) {
+            if (focusIdx !== "content") {
+              selectedEl.classList.add("is-selected");
+            }
+            if (selectedEl.classList.contains("node-type-section-column")) {
+              selectedEl.querySelectorAll(".node-type-column").forEach((col) => {
+                col.classList.add("is-column-selected");
+              });
+            } else if (selectedEl.classList.contains("node-type-column")) {
+              const parentSection = selectedEl.closest(".node-type-section-column");
+              if (parentSection) {
+                parentSection.querySelectorAll(".node-type-column").forEach((col) => {
+                  col.classList.add("is-column-selected");
+                });
+              }
+            } else {
+              const parentSectionColumn = selectedEl.closest(".node-type-section-column");
+              if (parentSectionColumn) {
+                const parentColumn = selectedEl.closest(".node-type-column");
+                if (parentColumn) {
+                  parentColumn.classList.add("is-column-selected");
+                }
+              }
+            }
+            if (selectedEl.classList.contains("node-type-section-property-triple")) {
+              selectedEl.querySelectorAll(".node-type-property-card-triple-item").forEach((card) => {
+                card.classList.add("is-card-selected");
+              });
+            } else if (selectedEl.classList.contains("node-type-property-card-triple")) {
+              selectedEl.querySelectorAll(".node-type-property-card-triple-item").forEach((card) => {
+                card.classList.add("is-card-selected");
+              });
+            } else if (selectedEl.classList.contains("node-type-property-card-triple-item")) {
+              selectedEl.classList.add("is-card-selected");
+            }
+            onSelectionRectChange?.(selectedEl.getBoundingClientRect());
+          } else {
+            onSelectionRectChange?.(null);
+          }
+        } else {
+          onSelectionRectChange?.(null);
+        }
+      }, [focusIdx, html, onSelectionRectChange]);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        shadowRootRef.current.querySelectorAll(".is-hovered").forEach((el) => {
+          el.classList.remove("is-hovered");
+        });
+        shadowRootRef.current.querySelectorAll(".is-column-hover-parent").forEach((el) => {
+          el.classList.remove("is-column-hover-parent");
+        });
+        if (hoverIdx && hoverIdx !== focusIdx && hoverIdx !== "content") {
+          const hoveredEl = shadowRootRef.current.querySelector(
+            `.node-idx-${CSS.escape(hoverIdx)}`
+          );
+          if (hoveredEl) {
+            hoveredEl.classList.add("is-hovered");
+            if (!hoveredEl.classList.contains("node-type-column")) {
+              const parentSectionColumn = hoveredEl.closest(".node-type-section-column");
+              if (parentSectionColumn) {
+                const parentColumn = hoveredEl.closest(".node-type-column");
+                if (parentColumn) {
+                  parentColumn.classList.add("is-column-hover-parent");
+                }
+              }
+            }
+          }
+        }
+      }, [focusIdx, hoverIdx, html]);
+      (0, import_react.useEffect)(() => {
+        if (!shadowRootRef.current) return;
+        shadowRootRef.current.querySelectorAll(".is-drop-target").forEach((el) => {
+          el.classList.remove("is-drop-target");
+        });
+        if (dropTargetIdx && isDragging) {
+          const targetEl = shadowRootRef.current.querySelector(
+            `.node-idx-${CSS.escape(dropTargetIdx)}`
+          );
+          if (targetEl) {
+            targetEl.classList.add("is-drop-target");
+          }
+        }
+      }, [dropTargetIdx, isDragging]);
+      (0, import_react.useEffect)(() => {
+        const shadowRoot = shadowRootRef.current;
+        if (!shadowRoot) return;
+        const handleMouseDown = (e) => {
+          const target = e.target;
+          const mouseEvent = e;
+          if (target.closest('[contenteditable="true"]')) {
+            return;
+          }
+          const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
+          if (blockNode && callbackRefs.current.onElementClick) {
+            const idx = getIdxFromElement(blockNode);
+            if (idx) {
+              callbackRefs.current.onElementClick(idx);
+              if (blockNode.classList.contains("node-type-text") && callbackRefs.current.onTextEditStart) {
+                const contentDiv = blockNode.querySelector("div");
+                if (contentDiv) {
+                  const blockEl = blockNode;
+                  const blockRect = blockEl.getBoundingClientRect();
+                  const blockStyle = window.getComputedStyle(blockEl);
+                  const content = contentDiv.innerHTML;
+                  const clickX = mouseEvent.clientX;
+                  const clickY = mouseEvent.clientY;
+                  const contentStyle = window.getComputedStyle(contentDiv);
+                  const styles = {
+                    fontFamily: contentStyle.fontFamily,
+                    fontSize: contentStyle.fontSize,
+                    fontWeight: contentStyle.fontWeight,
+                    lineHeight: contentStyle.lineHeight,
+                    color: contentStyle.color,
+                    textAlign: contentStyle.textAlign,
+                    padding: blockStyle.padding,
+                    // Use td's padding
+                    // Additional text-rendering properties for exact matching
+                    letterSpacing: contentStyle.letterSpacing,
+                    wordSpacing: contentStyle.wordSpacing,
+                    textRendering: contentStyle.textRendering,
+                    fontStyle: contentStyle.fontStyle,
+                    textDecoration: contentStyle.textDecoration,
+                    textTransform: contentStyle.textTransform,
+                    fontVariant: contentStyle.fontVariant,
+                    textIndent: contentStyle.textIndent
+                  };
+                  callbackRefs.current.onTextEditStart?.(idx, blockRect.width, blockRect.height, clickX, clickY, content, styles);
+                }
+              }
+            }
+          }
+        };
+        const handleMouseOver = (e) => {
+          const target = e.target;
+          const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
+          const newIdx = blockNode ? getIdxFromElement(blockNode) : null;
+          if (newIdx === lastHoverIdxRef.current) return;
+          if (hoverRafRef.current) return;
+          hoverRafRef.current = requestAnimationFrame(() => {
+            hoverRafRef.current = null;
+            lastHoverIdxRef.current = newIdx;
+            callbackRefs.current.onElementHover?.(newIdx);
+          });
+        };
+        const handleMouseOut = (e) => {
+          const relatedTarget = e.relatedTarget;
+          if (!relatedTarget || !shadowRoot.contains(relatedTarget)) {
+            lastHoverIdxRef.current = null;
+            callbackRefs.current.onElementHover?.(null);
+          }
+        };
+        const handleInput = (e) => {
+          const target = e.target;
+          if (target.getAttribute("contenteditable") === "true" && callbackRefs.current.onContentInput) {
+            const contentIdx = target.getAttribute("data-content-idx");
+            if (contentIdx) {
+              const isRichText = target.closest(".node-type-text");
+              const content = isRichText ? target.innerHTML : target.textContent || "";
+              callbackRefs.current.onContentInput(contentIdx, content);
+              if (isRichText) {
+                if (isTextContentEmpty(target)) {
+                  target.classList.add("is-empty");
+                } else {
+                  target.classList.remove("is-empty");
+                }
+              }
+            }
+          }
+        };
+        const handleFocus = (e) => {
+          const target = e.target;
+          if (target.getAttribute("contenteditable") === "true") {
+            callbackRefs.current.onEditingStart?.();
+            const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
+            if (blockNode && callbackRefs.current.onElementClick) {
+              const idx = getIdxFromElement(blockNode);
+              if (idx) {
+                callbackRefs.current.onElementClick(idx);
+              }
+            }
+          }
+        };
+        const handleBlur = (e) => {
+          const target = e.target;
+          if (target.getAttribute("contenteditable") === "true") {
+            callbackRefs.current.onEditingEnd?.();
+          }
+        };
+        const getParagraphInfo = (blockNode, mouseY) => {
+          if (!blockNode.classList.contains("node-type-text")) return void 0;
+          const contentDiv = blockNode.querySelector("div");
+          if (!contentDiv) return void 0;
+          const paragraphs = Array.from(contentDiv.querySelectorAll("p"));
+          if (paragraphs.length < 2) return void 0;
+          for (let i = 0; i < paragraphs.length; i++) {
+            const pRect = paragraphs[i].getBoundingClientRect();
+            if (mouseY >= pRect.top && mouseY <= pRect.bottom) {
+              const midpoint = pRect.top + pRect.height / 2;
+              return {
+                paragraphIndex: i,
+                totalParagraphs: paragraphs.length,
+                paragraphRect: pRect,
+                isAboveMidpoint: mouseY < midpoint
+              };
+            }
+          }
+          return void 0;
+        };
+        const handleDragOver = (e) => {
+          const dragEvent = e;
+          dragEvent.preventDefault();
+          const target = dragEvent.target;
+          const mouseY = dragEvent.clientY;
+          const mouseX = dragEvent.clientX;
+          let blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
+          if (blockNode && getTypeFromElement(blockNode) === "social-item") {
+            blockNode = blockNode.parentElement?.closest(`.${EMAIL_BLOCK_CLASS_NAME}`) || null;
+          }
+          if (rafRef.current) return;
+          rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            if (blockNode === lastBlockNodeRef.current && blockNode) {
+              const dragInfo2 = {
+                idx: getIdxFromElement(blockNode),
+                type: getTypeFromElement(blockNode),
+                rect: blockNode.getBoundingClientRect(),
+                mouseY,
+                // Use captured value
+                mouseX,
+                // Use captured value
+                paragraphInfo: getParagraphInfo(blockNode, mouseY)
+              };
+              callbackRefs.current.onDragOver?.(dragEvent, dragInfo2);
+              return;
+            }
+            lastBlockNodeRef.current = blockNode;
+            const dragInfo = {
+              idx: blockNode ? getIdxFromElement(blockNode) : null,
+              type: blockNode ? getTypeFromElement(blockNode) : null,
+              rect: blockNode ? blockNode.getBoundingClientRect() : null,
+              mouseY,
+              // Use captured value
+              mouseX,
+              // Use captured value
+              paragraphInfo: blockNode ? getParagraphInfo(blockNode, mouseY) : void 0
+            };
+            callbackRefs.current.onDragOver?.(dragEvent, dragInfo);
+          });
+        };
+        const handleDragLeave = (e) => {
+          const dragEvent = e;
+          const relatedTarget = dragEvent.relatedTarget;
+          if (!relatedTarget || !shadowRoot.contains(relatedTarget)) {
+            lastBlockNodeRef.current = null;
+            callbackRefs.current.onDragLeave?.();
+          }
+        };
+        const handleDrop = (e) => {
+          const dragEvent = e;
+          dragEvent.preventDefault();
+          const target = dragEvent.target;
+          const mouseY = dragEvent.clientY;
+          const mouseX = dragEvent.clientX;
+          const blockNode = target.closest(`.${EMAIL_BLOCK_CLASS_NAME}`);
+          const dragInfo = {
+            idx: blockNode ? getIdxFromElement(blockNode) : null,
+            type: blockNode ? getTypeFromElement(blockNode) : null,
+            rect: blockNode ? blockNode.getBoundingClientRect() : null,
+            mouseY,
+            mouseX,
+            paragraphInfo: blockNode ? getParagraphInfo(blockNode, mouseY) : void 0
+          };
+          callbackRefs.current.onDrop?.(dragEvent, dragInfo);
+        };
+        const handleLinkClick = (e) => {
+          const target = e.target;
+          if (target.tagName === "A" || target.closest("a")) {
+            e.preventDefault();
+          }
+        };
+        const handleKeyDown = (e) => {
+          const keyEvent = e;
+          const target = keyEvent.target;
+          if (target.getAttribute("contenteditable") === "true" && target.closest(".node-type-button")) {
+            const isAtSizeLimit = useEditorStore.getState().isAtSizeLimit;
+            if (isAtSizeLimit) {
+              const allowedKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Escape", "Tab"];
+              const isModifier = keyEvent.ctrlKey || keyEvent.metaKey || keyEvent.altKey;
+              const isAllowed = allowedKeys.includes(keyEvent.key) || isModifier;
+              if (!isAllowed && (keyEvent.key.length === 1 || keyEvent.key === "Enter")) {
+                keyEvent.preventDefault();
+                const now = Date.now();
+                if (now - lastSizeLimitToastTime > 2e3) {
+                  lastSizeLimitToastTime = now;
+                  import_sonner2.toast.error("Template size limit reached");
+                }
+                return;
+              }
+            }
+            return;
+          }
+          const relevantKeys = ["/", "Escape", " ", "Backspace"];
+          if (!relevantKeys.includes(keyEvent.key)) return;
+          if (target.getAttribute("contenteditable") !== "true") return;
+          if (!target.closest(".node-type-text")) return;
+          if (keyEvent.key === "Escape") {
+            callbackRefs.current.onSlashCommandClose?.();
+            return;
+          }
+          if (keyEvent.key === " ") {
+            callbackRefs.current.onSlashCommandClose?.();
+            return;
+          }
+          if (keyEvent.key === "Backspace") {
+            callbackRefs.current.onSlashCommandClose?.();
+            return;
+          }
+          if (keyEvent.key !== "/") return;
+          const selection = window.getSelection();
+          if (!selection || !selection.rangeCount) return;
+          const range = selection.getRangeAt(0);
+          const textContent = target.textContent || "";
+          const cursorOffset = range.startOffset;
+          const charBefore = cursorOffset > 0 ? textContent[cursorOffset - 1] : "";
+          if (cursorOffset > 0 && charBefore !== " " && charBefore !== "\xA0") {
+            return;
+          }
+          const targetRect = target.getBoundingClientRect();
+          const rangeRect = range.getBoundingClientRect();
+          const hasValidRangeRect = rangeRect.height > 0 || (rangeRect.top !== 0 || rangeRect.left !== 0);
+          const rect = hasValidRangeRect ? rangeRect : {
+            top: targetRect.top,
+            left: targetRect.left,
+            bottom: targetRect.top + 20,
+            right: targetRect.left,
+            width: 0,
+            height: 20,
+            x: targetRect.left,
+            y: targetRect.top,
+            toJSON: () => ({})
+          };
+          callbackRefs.current.onSlashCommand?.(rect);
+        };
+        const handlePaste = (e) => {
+          const clipboardEvent = e;
+          const target = clipboardEvent.target;
+          if (target.getAttribute("contenteditable") !== "true") return;
+          if (!target.closest(".node-type-button")) return;
+          const { templateSize } = useEditorStore.getState();
+          const pastedText = clipboardEvent.clipboardData?.getData("text/plain") || "";
+          const pasteSize = new Blob([pastedText]).size;
+          if (templateSize + pasteSize > MAX_TEMPLATE_SIZE) {
+            clipboardEvent.preventDefault();
+            const now = Date.now();
+            if (now - lastSizeLimitToastTime > 2e3) {
+              lastSizeLimitToastTime = now;
+              import_sonner2.toast.error("Template size limit reached");
+            }
+          }
+        };
+        shadowRoot.addEventListener("mousedown", handleMouseDown);
+        shadowRoot.addEventListener("click", handleLinkClick, true);
+        shadowRoot.addEventListener("mouseover", handleMouseOver);
+        shadowRoot.addEventListener("mouseout", handleMouseOut);
+        shadowRoot.addEventListener("input", handleInput);
+        shadowRoot.addEventListener("focusin", handleFocus);
+        shadowRoot.addEventListener("focusout", handleBlur);
+        shadowRoot.addEventListener("keydown", handleKeyDown);
+        shadowRoot.addEventListener("paste", handlePaste);
+        shadowRoot.addEventListener("dragover", handleDragOver);
+        shadowRoot.addEventListener("dragleave", handleDragLeave);
+        shadowRoot.addEventListener("drop", handleDrop);
+        return () => {
+          if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+          }
+          lastBlockNodeRef.current = null;
+          if (hoverRafRef.current) {
+            cancelAnimationFrame(hoverRafRef.current);
+            hoverRafRef.current = null;
+          }
+          lastHoverIdxRef.current = null;
+          shadowRoot.removeEventListener("mousedown", handleMouseDown);
+          shadowRoot.removeEventListener("click", handleLinkClick, true);
+          shadowRoot.removeEventListener("mouseover", handleMouseOver);
+          shadowRoot.removeEventListener("mouseout", handleMouseOut);
+          shadowRoot.removeEventListener("input", handleInput);
+          shadowRoot.removeEventListener("focusin", handleFocus);
+          shadowRoot.removeEventListener("focusout", handleBlur);
+          shadowRoot.removeEventListener("keydown", handleKeyDown);
+          shadowRoot.removeEventListener("paste", handlePaste);
+          shadowRoot.removeEventListener("dragover", handleDragOver);
+          shadowRoot.removeEventListener("dragleave", handleDragLeave);
+          shadowRoot.removeEventListener("drop", handleDrop);
+        };
+      }, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: containerRef,
+            className: "shadow-dom-renderer",
+            style: {
+              width: "100%",
+              height: "100%",
+              overflow: "auto"
+            }
+          }
+        ),
+        dropIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "drop-indicator-line",
+            style: {
+              position: "fixed",
+              // Horizontal indicator (existing default)
+              ...(dropIndicator.orientation === "horizontal" || !dropIndicator.orientation) && {
+                top: dropIndicator.top - 1.5,
+                left: dropIndicator.left,
+                width: dropIndicator.width,
+                height: 3
+              },
+              // Vertical indicator (NEW)
+              ...dropIndicator.orientation === "vertical" && {
+                top: dropIndicator.top,
+                left: dropIndicator.left - 1.5,
+                width: 3,
+                height: dropIndicator.height
+              },
+              backgroundColor: isDragging ? "rgb(147, 51, 234)" : "#3b82f6",
+              borderRadius: 2,
+              pointerEvents: "none",
+              zIndex: 9999,
+              boxShadow: isDragging ? "0 0 4px rgba(147, 51, 234, 0.5)" : "0 0 4px rgba(59, 130, 246, 0.5)"
+            },
+            children: (dropIndicator.isNewSection || dropIndicator.isSplitSection) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  backgroundColor: "rgb(147, 51, 234)",
+                  color: "white",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  padding: "4px 10px",
+                  borderRadius: 9999,
+                  whiteSpace: "nowrap",
+                  pointerEvents: "none"
+                },
+                children: dropIndicator.isNewSection ? "New section" : "Split section"
+              }
+            )
+          }
+        )
+      ] });
+    });
   }
 });
 
@@ -12641,7 +12657,7 @@ var init_use_href = __esm({
           }
         }
       }, [href]);
-      const hasHref = Boolean(href && href !== "#" && href.trim() !== "");
+      const hasHref = Boolean(href && href !== "" && href.trim() !== "");
       return {
         href,
         setHref,
@@ -14633,23 +14649,9 @@ var init_useMjmlCompiler = __esm({
   }
 });
 
-// src/core/editor/hooks/use-user.ts
-function useUser() {
-  return {
-    isPaid: true
-    // toggle to true for testing paid features
-  };
-}
-var init_use_user = __esm({
-  "src/core/editor/hooks/use-user.ts"() {
-    "use strict";
-  }
-});
-
 // src/core/editor/components/preview.tsx
 function Preview() {
-  const { isPaid } = useUser();
-  const { template, setPreviewMode, previewMode } = useEditorStore();
+  const { template, setPreviewMode, previewMode, isPaidLevel } = useEditorStore();
   const [html, setHtml] = (0, import_react33.useState)("");
   const [isLoading, setIsLoading] = (0, import_react33.useState)(false);
   const lastTemplateRef = (0, import_react33.useRef)("");
@@ -14669,7 +14671,7 @@ function Preview() {
     setIsLoading(true);
     const convertMjml = async () => {
       try {
-        const mjmlString = json2mjml(template, "production", { isPaid });
+        const mjmlString = json2mjml(template, "production", { isPaidLevel });
         console.log("MJML string:", mjmlString);
         const result = await compileMjml(mjmlString);
         if (result.errors?.length > 0) {
@@ -14717,7 +14719,6 @@ var init_preview = __esm({
     init_editor();
     init_json2mjml();
     init_useMjmlCompiler();
-    init_use_user();
     import_react33 = require("react");
     init_tooltip();
     import_jsx_runtime47 = require("react/jsx-runtime");
@@ -16444,15 +16445,14 @@ var StylesPage = ({ value }) => {
 };
 
 // src/core/editor/components/email-template-v2/components/styles-badge.tsx
-init_use_user();
 init_editor();
 var import_react40 = require("react");
 var import_lucide_react38 = require("lucide-react");
 var import_lucide_react39 = require("lucide-react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var StylesBadge = ({ value }) => {
-  const { isPaid } = useUser();
-  const { template, setShowCompanyFooter } = useEditorStore();
+  const { template, setShowCompanyFooter, isPaidLevel } = useEditorStore();
+  const isPaid = isPaidLevel >= 1;
   const showCompanyFooter = (0, import_react40.useMemo)(() => {
     return template.content[0]?.data?.value?.showCompanyFooter ?? true;
   }, [template]);
@@ -23764,15 +23764,25 @@ var Editor2 = (0, import_react80.lazy)(() => Promise.resolve().then(() => (init_
 function TemplatePage({
   templateId,
   initialTemplate,
-  onSave
+  onSave,
+  isPaidLevel = 0
 }) {
+  console.log("Template page rendered!");
+  if (isPaidLevel > MAX_PAID_LEVEL) {
+    console.warn("This paid level is invalid:", isPaidLevel);
+  } else {
+    console.log("This paid level is valid:", isPaidLevel);
+  }
   (0, import_react80.useState)(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, isPaidLevel);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = (0, import_react80.useState)(false);
   const [isPageHovered, setIsPageHovered] = (0, import_react80.useState)(false);
-  const { template, previewMode, focusIdx, setFocusIdx } = useEditorStore();
+  const template = useEditorStore((state) => state.template);
+  const previewMode = useEditorStore((state) => state.previewMode);
+  const focusIdx = useEditorStore((state) => state.focusIdx);
+  const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
   const canvasBackgroundColor = template?.content?.[0]?.attributes?.["background-color"] || "#ffffff";
   const handlePageClick = (e) => {
     if (!previewMode && e.target === e.currentTarget) {