@kgalexander/mcreate 1.0.2 → 1.0.3

package/dist/{chunk-G7F7GRJC.mjs → chunk-JWS6HO2H.mjs}

@@ -815,15 +815,15 @@ function propertyCardTripleMockMjml(block, context) {
     ${responsiveStyles}
     <mj-table align="center" width="${width}" padding="0" css-class="${trackingClasses}">
       <tr class="property-triple-row-${uniqueId}">
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
           ${cards[0] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"  ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[1] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px" ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[2] || ""}
         </th>
       </tr>
@@ -1823,6 +1823,7 @@ var useEditorStore = create()(
       onImageUpload: null,
       onDuplicate: null,
       onDelete: null,
+      onTemplateCapture: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1863,7 +1864,7 @@ var useEditorStore = create()(
         });
       },
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
@@ -1873,6 +1874,7 @@ var useEditorStore = create()(
           state.onImageUpload = onImageUpload ?? null;
           state.onDuplicate = onDuplicate ?? null;
           state.onDelete = onDelete ?? null;
+          state.onTemplateCapture = onTemplateCapture ?? null;
           state.isPaidLevel = data?.isPaidLevel ?? 0;
           state.images = data?.images ?? [];
           state.userData = data?.userData ?? null;

package/dist/{core-P3XCQRWR.mjs → core-FT6UNZ6N.mjs}

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

package/dist/index.d.mts

@@ -292,6 +292,7 @@ type OnExitCallback = () => void;
 type OnImageUploadCallback = (file: File) => Promise<ImageData>;
 type OnDuplicateCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
 type OnDeleteCallback = (templateId: string) => void | Promise<void>;
+type OnTemplateCaptureCallback = (templateId: string, imageDataUrl: string) => void | Promise<void>;
 type PaidLevel = 0 | 1 | 2 | 3;
 
 interface EditorProps {
@@ -300,7 +301,7 @@ interface EditorProps {
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, onDuplicate, onDelete, data, }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture, data, }: {
     templateId: string;
     initialTemplate: TemplateJSON;
     onSave?: OnSaveCallback;
@@ -309,6 +310,7 @@ declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, on
     onImageUpload?: OnImageUploadCallback;
     onDuplicate?: OnDuplicateCallback;
     onDelete?: OnDeleteCallback;
+    onTemplateCapture?: OnTemplateCaptureCallback;
     data?: {
         isPaidLevel?: PaidLevel;
         images?: ImageData[];
@@ -337,4 +339,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };
+export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnTemplateCaptureCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };

package/dist/index.d.ts

@@ -292,6 +292,7 @@ type OnExitCallback = () => void;
 type OnImageUploadCallback = (file: File) => Promise<ImageData>;
 type OnDuplicateCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
 type OnDeleteCallback = (templateId: string) => void | Promise<void>;
+type OnTemplateCaptureCallback = (templateId: string, imageDataUrl: string) => void | Promise<void>;
 type PaidLevel = 0 | 1 | 2 | 3;
 
 interface EditorProps {
@@ -300,7 +301,7 @@ interface EditorProps {
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, onDuplicate, onDelete, data, }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture, data, }: {
     templateId: string;
     initialTemplate: TemplateJSON;
     onSave?: OnSaveCallback;
@@ -309,6 +310,7 @@ declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, on
     onImageUpload?: OnImageUploadCallback;
     onDuplicate?: OnDuplicateCallback;
     onDelete?: OnDeleteCallback;
+    onTemplateCapture?: OnTemplateCaptureCallback;
     data?: {
         isPaidLevel?: PaidLevel;
         images?: ImageData[];
@@ -337,4 +339,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };
+export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnTemplateCaptureCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };

package/dist/index.js

@@ -890,15 +890,15 @@ function propertyCardTripleMockMjml(block, context) {
     ${responsiveStyles}
     <mj-table align="center" width="${width}" padding="0" css-class="${trackingClasses}">
       <tr class="property-triple-row-${uniqueId}">
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
           ${cards[0] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"  ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[1] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px" ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[2] || ""}
         </th>
       </tr>
@@ -2004,6 +2004,7 @@ var init_editor = __esm({
           onImageUpload: null,
           onDuplicate: null,
           onDelete: null,
+          onTemplateCapture: null,
           previewMode: false,
           focusIdx: null,
           hoverIdx: null,
@@ -2044,7 +2045,7 @@ var init_editor = __esm({
             });
           },
           // Initialize store with external template (for npm package usage)
-          initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete) => {
+          initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture) => {
             set((state) => {
               state.templateId = templateId;
               state.template = template;
@@ -2054,6 +2055,7 @@ var init_editor = __esm({
               state.onImageUpload = onImageUpload ?? null;
               state.onDuplicate = onDuplicate ?? null;
               state.onDelete = onDelete ?? null;
+              state.onTemplateCapture = onTemplateCapture ?? null;
               state.isPaidLevel = data?.isPaidLevel ?? 0;
               state.images = data?.images ?? [];
               state.userData = data?.userData ?? null;
@@ -16967,6 +16969,46 @@ function TemplateNameDialog() {
 
 // src/core/editor/components/email-template-v2/header.tsx
 init_editor();
+
+// src/core/editor/utils/capture-template.ts
+var import_html_to_image = require("html-to-image");
+var CAPTURE_WIDTH = 600;
+async function captureTemplateImage(compiledHtml) {
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.top = "0";
+  container.style.left = "0";
+  container.style.zIndex = "99999";
+  container.style.width = `${CAPTURE_WIDTH}px`;
+  container.style.backgroundColor = "#FFFFFF00";
+  container.style.overflow = "hidden";
+  container.style.maxHeight = "100vh";
+  container.style.opacity = "0";
+  container.innerHTML = compiledHtml;
+  document.body.appendChild(container);
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  try {
+    const dataUrl = await (0, import_html_to_image.toPng)(container, {
+      width: CAPTURE_WIDTH,
+      quality: 0.1,
+      pixelRatio: 1,
+      cacheBust: true,
+      imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
+      backgroundColor: "#ffffff",
+      fetchRequestInit: { mode: "cors" },
+      skipFonts: true,
+      // Override opacity on the cloned node (real element is opacity:0 to stay invisible)
+      style: { opacity: "1" }
+    });
+    return dataUrl;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
+// src/core/editor/components/email-template-v2/header.tsx
+init_json2mjml();
 init_core();
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function TemplateHeader() {
@@ -16978,14 +17020,28 @@ function TemplateHeader() {
   const onExit = useEditorStore((s) => s.onExit);
   const onDuplicate = useEditorStore((s) => s.onDuplicate);
   const onDelete = useEditorStore((s) => s.onDelete);
+  const onTemplateCapture = useEditorStore((s) => s.onTemplateCapture);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
     console.log("handleExit - templateId:", templateId);
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
-      await onSave(templateId, useEditorStore.getState().template);
+      const template = useEditorStore.getState().template;
+      await onSave(templateId, template);
       markAsSaved();
+      if (onTemplateCapture) {
+        try {
+          const { default: mjml2html } = await import("mjml-browser");
+          const mjmlString = json2mjml(template, "editing");
+          const result = mjml2html(mjmlString);
+          console.log("Result:", result.html);
+          const imageDataUrl = await captureTemplateImage(result.html);
+          await onTemplateCapture(templateId, imageDataUrl);
+        } catch (err) {
+          console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+        }
+      }
       onExit?.();
       console.log("handleExit - onExit called");
     } catch (error) {
@@ -28692,10 +28748,11 @@ function TemplatePage({
   onImageUpload,
   onDuplicate,
   onDelete,
+  onTemplateCapture,
   data
 }) {
   (0, import_react97.useState)(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = (0, import_react97.useState)(false);

package/dist/index.mjs

@@ -60,7 +60,7 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-G7F7GRJC.mjs";
+} from "./chunk-JWS6HO2H.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
@@ -203,6 +203,43 @@ function TemplateNameDialog() {
   ] });
 }
 
+// src/core/editor/utils/capture-template.ts
+import { toPng } from "html-to-image";
+var CAPTURE_WIDTH = 600;
+async function captureTemplateImage(compiledHtml) {
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.top = "0";
+  container.style.left = "0";
+  container.style.zIndex = "99999";
+  container.style.width = `${CAPTURE_WIDTH}px`;
+  container.style.backgroundColor = "#FFFFFF00";
+  container.style.overflow = "hidden";
+  container.style.maxHeight = "100vh";
+  container.style.opacity = "0";
+  container.innerHTML = compiledHtml;
+  document.body.appendChild(container);
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  try {
+    const dataUrl = await toPng(container, {
+      width: CAPTURE_WIDTH,
+      quality: 0.1,
+      pixelRatio: 1,
+      cacheBust: true,
+      imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
+      backgroundColor: "#ffffff",
+      fetchRequestInit: { mode: "cors" },
+      skipFonts: true,
+      // Override opacity on the cloned node (real element is opacity:0 to stay invisible)
+      style: { opacity: "1" }
+    });
+    return dataUrl;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
 // src/core/editor/components/email-template-v2/header.tsx
 import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
 function TemplateHeader() {
@@ -214,14 +251,28 @@ function TemplateHeader() {
   const onExit = useEditorStore((s) => s.onExit);
   const onDuplicate = useEditorStore((s) => s.onDuplicate);
   const onDelete = useEditorStore((s) => s.onDelete);
+  const onTemplateCapture = useEditorStore((s) => s.onTemplateCapture);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
     console.log("handleExit - templateId:", templateId);
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
-      await onSave(templateId, useEditorStore.getState().template);
+      const template = useEditorStore.getState().template;
+      await onSave(templateId, template);
       markAsSaved();
+      if (onTemplateCapture) {
+        try {
+          const { default: mjml2html } = await import("mjml-browser");
+          const mjmlString = json2mjml(template, "editing");
+          const result = mjml2html(mjmlString);
+          console.log("Result:", result.html);
+          const imageDataUrl = await captureTemplateImage(result.html);
+          await onTemplateCapture(templateId, imageDataUrl);
+        } catch (err) {
+          console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+        }
+      }
       onExit?.();
       console.log("handleExit - onExit called");
     } catch (error) {
@@ -11663,7 +11714,7 @@ function useAutoSave() {
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
 import { jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-P3XCQRWR.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-FT6UNZ6N.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -11675,10 +11726,11 @@ function TemplatePage({
   onImageUpload,
   onDuplicate,
   onDelete,
+  onTemplateCapture,
   data
 }) {
   useState25(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete, onTemplateCapture);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = useState25(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kgalexander/mcreate",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Maillow email template editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",