@kgalexander/mcreate 0.0.14 → 0.0.15

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

@@ -1587,8 +1587,8 @@ function createSectionPropertyTripleElement(payload) {
 
 // templates/empty.json
 var empty_default = {
-  id: "-1",
-  name: "Empty Template",
+  id: "1",
+  name: "Playground Demo",
   version: "1.0.0",
   published: true,
   creator: "Kevin Guerrero",
@@ -1633,7 +1633,7 @@ var empty_default = {
                   tagName: "mj-text",
                   data: {
                     value: {
-                      content: '<p class="paragraph" style=" padding: 4px 0; font-family: Arial, sans-serif;">&nbsp;</p>'
+                      content: '<p class="paragraph" style=" padding: 4px 0; font-family: Arial, sans-serif;">Welcome to our Open House! Please join us for a tour of this beautiful home.</p>'
                     }
                   },
                   attributes: {
@@ -1646,180 +1646,6 @@ var empty_default = {
             }
           ]
         },
-        {
-          type: "section-property-km",
-          tagName: "mj-section",
-          data: { value: { columnRows: 1, columnWidths: [] } },
-          attributes: { "background-color": "#FFFFFF", padding: "12px 12px 12px 12px" },
-          children: [
-            {
-              type: "column",
-              tagName: "mj-column",
-              data: { value: {} },
-              attributes: { "background-color": "#FFFFFF", width: "500px", padding: "0px", border: "1px solid #dddddd", "border-radius": "0px" },
-              children: [
-                {
-                  type: "property-card",
-                  tagName: "mj-colproperty",
-                  data: { value: {} },
-                  attributes: {
-                    "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-                    "image-alt": "Beautiful modern home with pool",
-                    description: "Beautiful modern home with pool",
-                    price: "1000000",
-                    address: "123 Main Street",
-                    city: "Austin, TX 78701",
-                    beds: "",
-                    baths: "2",
-                    sqft: "1,850",
-                    href: "https://www.zillow.com/homedetails/126-Cara-Mia-Ln-Galloway-NJ-08205/68297408_zpid/?rtoken=6acd62a8-1848-41ed-919b-0034083eafca~X1-ZUu7aphk9l2689_9ej1i&utm_campaign=emo-instantsearchdigest&utm_source=email&utm_term=urn%3Amsg%3A20251026011813e84b11d632bb8725&utm_medium=email&utm_content=forsaleimage&sse=X1-SSsyx4z97dhglz0000000000_1pt02&srp=H4sIAAAAAAAAAHWRwXKDIBCGn8ZjokKQeOh0YpOZ9Nihh94yRNfozAoOYFrz9FXR1h7KgVn%2B799lF8JKN2DDUpuLlQjhswVp8uqtA9MLJx08BTwLCGlkm%2BlOFXaIA3rw4idY588bvtuyNElSEpCXQQK5JpTtk4h6YnXnKo9ouiWcUco8UdqsSMIp2fOAHz00cKu1EoCQuyGYu2CZb8TT18LLSRwtt3nw3rfg0VSQzTXLGh2Yacr1VLU9IJ7HZ1mrd4ndbHNmiJbGQMkrgsgrrfG%2FhFKi%2Fc24wt9XbOp5HDZaFpeVdyjE9BknZTRiA8otEw77R7wRwvZfu0fKi%2BqGj%2BhnXeLWRWR08uM33zV%2BmeABAAA%3D",
-                    status: "Empty",
-                    "status-color": "#B8B8B8",
-                    "is-new": "",
-                    "is-open-house": "1",
-                    "open-house-date": "2026-01-29",
-                    "open-house-time": "01:00-13:07",
-                    brokerage: "Keller Williams Atlantic Shore",
-                    "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-                    "border-radius": "0px",
-                    border: "1px solid #dddddd",
-                    "font-family": "Arial, sans-serif",
-                    "text-color": "#000000",
-                    "price-text-color": "",
-                    "details-text-color": "",
-                    "address-text-color": "",
-                    "brokerage-text-color": "#535364",
-                    "description-text-color": "",
-                    "mls-logo-text-color": "",
-                    "status-text-color": "",
-                    "new-text-color": "",
-                    "open-house-text-color": ""
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "section-property-single-two",
-          tagName: "mj-section",
-          data: { value: { columnRows: 1, columnWidths: [] } },
-          attributes: { "background-color": "#FFFFFF", padding: "12px 12px 12px 12px" },
-          children: [
-            {
-              type: "column",
-              tagName: "mj-column",
-              data: { value: {} },
-              attributes: { "background-color": "#FFFFFF", width: "500px", padding: "0px", border: "1px solid #dddddd", "border-radius": "12px" },
-              children: [
-                {
-                  type: "property-card-single-two",
-                  tagName: "mj-propertysingletwo",
-                  data: { value: {} },
-                  attributes: {
-                    "image-src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXddI94MwjUVz5M4CyDxZhSkIIwWbyDF59_w&s",
-                    "image-alt": "Beautiful modern home with pool",
-                    description: "Beautiful modern home with pool",
-                    price: "324203492034",
-                    address: "123 Main Street",
-                    city: "Austin, TX 78701",
-                    beds: "",
-                    baths: "",
-                    sqft: "",
-                    href: "https://www.zillow.com/homedetails/126-Cara-Mia-Ln-Galloway-NJ-08205/68297408_zpid/?rtoken=6acd62a8-1848-41ed-919b-0034083eafca~X1-ZUu7aphk9l2689_9ej1i&utm_campaign=emo-instantsearchdigest&utm_source=email&utm_term=urn%3Amsg%3A20251026011813e84b11d632bb8725&utm_medium=email&utm_content=forsaleimage&sse=X1-SSsyx4z97dhglz0000000000_1pt02&srp=H4sIAAAAAAAAAHWRwXKDIBCGn8ZjokKQeOh0YpOZ9Nihh94yRNfozAoOYFrz9FXR1h7KgVn%2B799lF8JKN2DDUpuLlQjhswVp8uqtA9MLJx08BTwLCGlkm%2BlOFXaIA3rw4idY588bvtuyNElSEpCXQQK5JpTtk4h6YnXnKo9ouiWcUco8UdqsSMIp2fOAHz00cKu1EoCQuyGYu2CZb8TT18LLSRwtt3nw3rfg0VSQzTXLGh2Yacr1VLU9IJ7HZ1mrd4ndbHNmiJbGQMkrgsgrrfG%2FhFKi%2Fc24wt9XbOp5HDZaFpeVdyjE9BknZTRiA8otEw77R7wRwvZfu0fKi%2BqGj%2BhnXeLWRWR08uM33zV%2BmeABAAA%3D",
-                    status: "Just Listed",
-                    "status-color": "#008000",
-                    "is-new": "1",
-                    "is-open-house": "",
-                    "open-house-date": "03/25",
-                    "open-house-time": "12pm-1pm",
-                    brokerage: "Keller Williams Atlantic Shore",
-                    "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-                    "border-radius": "12px",
-                    border: "1x solid #dddddd",
-                    "font-family": "Arial, sans-serif",
-                    "text-color": "#000000"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "section-property-triple",
-          tagName: "mj-section",
-          data: { value: { columnRows: 1, columnWidths: [] } },
-          attributes: { "background-color": "#FFFFFF", padding: "12px" },
-          children: [
-            {
-              type: "column",
-              tagName: "mj-column",
-              data: { value: {} },
-              attributes: { "background-color": "transparent", padding: "0px", "css-class": "property-triple-section-column", width: "500px" },
-              children: [
-                {
-                  type: "property-card-triple",
-                  tagName: "mj-propertytriple",
-                  data: { value: {} },
-                  attributes: {
-                    width: "100%",
-                    gap: "24px",
-                    "border-radius": "8px",
-                    border: "1px solid #d1d1d5",
-                    "image-height": "102px",
-                    "font-family": "Arial, sans-serif",
-                    "text-color": "#000000",
-                    "background-color": "#FFFFFF"
-                  },
-                  children: [
-                    {
-                      type: "property-card-triple-item",
-                      tagName: "mj-propertytripleitem",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://photos.zillowstatic.com/fp/a8e605d336d0b5a94d91828aee3c0afb-p_i.jpg",
-                        href: "",
-                        price: "$320,000",
-                        beds: "3",
-                        baths: "2",
-                        sqft: "1,385",
-                        city: "Egg Harbor City"
-                      }
-                    },
-                    {
-                      type: "property-card-triple-item",
-                      tagName: "mj-propertytripleitem",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://photos.zillowstatic.com/fp/4d72133271685e778a0126b3defd9854-p_i.jpg",
-                        href: "",
-                        price: "$282,000",
-                        beds: "2",
-                        baths: "2",
-                        sqft: "1,224",
-                        city: "Egg Harbor"
-                      }
-                    },
-                    {
-                      type: "property-card-triple-item",
-                      tagName: "mj-propertytripleitem",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://photos.zillowstatic.com/fp/26e69f22548989c0e4d1ec372ce178e0-p_i.jpg",
-                        href: "",
-                        price: "$484,900",
-                        beds: "3",
-                        baths: "1",
-                        sqft: "1,417",
-                        city: "Egg Harbor"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
         {
           type: "section",
           tagName: "mj-section",
@@ -1906,6 +1732,8 @@ var useEditorStore = create()(
       // User data
       images: [],
       userData: null,
+      // Render sync
+      renderSyncNeeded: 0,
       // Initialize store with external template (for npm package usage)
       initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit) => {
         set((state) => {
@@ -2182,6 +2010,7 @@ var useEditorStore = create()(
             return;
           }
           Object.assign(element, updates);
+          state2.renderSyncNeeded += 1;
         });
       },
       // Update element content (for contenteditable)
@@ -3204,6 +3033,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   if (cached) return cached;
   const hiddenSelectors = !isDragButtonHovered && HIDDEN_SELECTION_VISUAL_ELEMENTS.length > 0 ? HIDDEN_SELECTION_VISUAL_ELEMENTS.map((type) => `.node-type-${type}`).join(", ") : null;
   const css = `
+
   /* Base reset for email content */
   * {
     box-sizing: border-box;
@@ -14474,6 +14304,8 @@ function Editor({ setEditorLoading }) {
   const dataTransfer = useEditorStore((state) => state.dataTransfer);
   const textEditing = useEditorStore((state) => state.textEditing);
   const isScaling = useEditorStore((state) => state.isScaling);
+  const canvasBackgroundColor = useEditorStore((s) => s.template?.content?.[0]?.attributes?.["background-color"]) || "#f5f5f5";
+  const renderSyncNeeded = useEditorStore((state) => state.renderSyncNeeded);
   const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
   const setHoverIdx = useEditorStore((state) => state.setHoverIdx);
   const updateElementContent = useEditorStore((state) => state.updateElementContent);
@@ -14512,12 +14344,17 @@ function Editor({ setEditorLoading }) {
   const companyFooterCacheRef = useRef11(void 0);
   const lastSyncedTemplateRef = useRef11(null);
   const prevTextEditingIdxRef = useRef11(null);
+  const lastRenderSyncNeededRef = useRef11(0);
   useEffect20(() => {
     const currentIdx = textEditing?.idx ?? null;
     const prevIdx = prevTextEditingIdxRef.current;
     const switchedTarget = currentIdx !== null && prevIdx !== null && currentIdx !== prevIdx;
     prevTextEditingIdxRef.current = currentIdx;
-    if (!isEditing && (!textEditing || switchedTarget)) {
+    const forceSync = renderSyncNeeded > lastRenderSyncNeededRef.current;
+    if (forceSync) {
+      lastRenderSyncNeededRef.current = renderSyncNeeded;
+    }
+    if (forceSync || !isEditing && (!textEditing || switchedTarget)) {
       if (template === lastSyncedTemplateRef.current) {
         return;
       }
@@ -14526,7 +14363,7 @@ function Editor({ setEditorLoading }) {
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing, textEditing]);
+  }, [template, renderData, isEditing, textEditing, renderSyncNeeded]);
   useEffect20(() => {
     if (renderData && setEditorLoading) {
       setEditorLoading(false);
@@ -15326,43 +15163,45 @@ function Editor({ setEditorLoading }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsxs31(
           "div",
           {
-            className: `editor-container rounded-b-[12px] border-t-1 border-t-accent max-w-[626px]`,
+            className: `editor-container rounded-b-[12px] max-w-[626px] w-[626px] [@media(max-width:950px)]:max-w-[100%] [@media(max-width:950px)]:w-[100%] `,
             style: {
-              width: "626px",
               height: "100%",
-              backgroundColor: "#f5f5f5",
+              backgroundColor: canvasBackgroundColor,
               overflow: "auto"
             },
-            children: /* @__PURE__ */ jsx50(
-              ShadowDomRenderer,
-              {
-                html,
-                focusIdx,
-                hoverIdx,
-                dropIndicator,
-                dropTargetIdx,
-                isDragging,
-                isDragButtonHovered,
-                textEditingIdx: textEditing?.idx || null,
-                showCompanyFooter,
-                onElementClick: handleElementClick,
-                onElementHover: handleElementHover,
-                onContentInput: handleContentInput,
-                onEditingStart: handleEditingStart,
-                onEditingEnd: handleEditingEnd,
-                onDragOver: handleDragOver,
-                onDrop: handleDrop,
-                onDragLeave: handleDragLeave,
-                onSelectionRectChange: handleSelectionRectChange,
-                onShadowRootRef: handleShadowRootRef,
-                onSlashCommand: handleSlashCommand,
-                onSlashCommandClose: handleSlashCommandClose,
-                onTextEditStart: handleTextEditStart
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx50("div", { className: "w-full h-[4px] bg-black opacity-10" }),
+              /* @__PURE__ */ jsx50(
+                ShadowDomRenderer,
+                {
+                  html,
+                  focusIdx,
+                  hoverIdx,
+                  dropIndicator,
+                  dropTargetIdx,
+                  isDragging,
+                  isDragButtonHovered,
+                  textEditingIdx: textEditing?.idx || null,
+                  showCompanyFooter,
+                  onElementClick: handleElementClick,
+                  onElementHover: handleElementHover,
+                  onContentInput: handleContentInput,
+                  onEditingStart: handleEditingStart,
+                  onEditingEnd: handleEditingEnd,
+                  onDragOver: handleDragOver,
+                  onDrop: handleDrop,
+                  onDragLeave: handleDragLeave,
+                  onSelectionRectChange: handleSelectionRectChange,
+                  onShadowRootRef: handleShadowRootRef,
+                  onSlashCommand: handleSlashCommand,
+                  onSlashCommandClose: handleSlashCommandClose,
+                  onTextEditStart: handleTextEditStart
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx50(ElementsSuggestions, {}),

package/dist/{core-WHUOFMYJ.mjs → core-66YYN7ME.mjs}

@@ -5,7 +5,7 @@ import {
   MAILLOW_EMAIL_EDITOR_VERSION,
   Preview,
   useEditorStore
-} from "./chunk-QGWWLZOW.mjs";
+} from "./chunk-XSQHR5MC.mjs";
 export {
   Editor,
   History,