@kgalexander/mcreate 1.0.7 → 1.0.8

package/dist/{chunk-B46UUREH.mjs → chunk-FJ4KXNNM.mjs}

@@ -1707,7 +1707,7 @@ var empty_default = {
   version: "1.0.0",
   published: true,
   creator: "Kevin Guerrero",
-  image: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/placeholder_image.png",
+  image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
   content: [
     {
       id: "main-body",
@@ -3418,7 +3418,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   /* Merge field tags - dashed underline for {{variable}} patterns */
   .merge-field-tag {
   
-    background-color: var(--background);
+    background-color: white;
     border-radius: 4px;
     padding: 0px;
     border: 1px solid var(--border);
@@ -4286,7 +4286,7 @@ var DragButton = ({ getReferenceRect, focusIdx, elementType, isDragging }) => {
         zIndex: 49,
         opacity: isDragging ? 0.3 : 1
       },
-      className: "flex items-center justify-center bg-background border shadow-sm rounded-full cursor-grab hover:bg-blue-400 hover:border-blue-300 active:cursor-grabbing transition-colors",
+      className: "flex items-center justify-center bg-white border shadow-sm rounded-full cursor-grab hover:bg-blue-400 hover:border-blue-300 active:cursor-grabbing transition-colors",
       children: /* @__PURE__ */ jsx2(Move, { className: "w-4 h-4pointer-events-none", color: isDragButtonHovered ? "white" : "gray" })
     }
   );
@@ -11303,7 +11303,7 @@ function Separator({
 }
 
 // src/core/editor/components/float-ui/helper.ts
-var floatButtonVariants = "shadow-none transition-none cursor-pointer rounded-full h-[34px] w-[34px] p-0";
+var floatButtonVariants = "shadow-none transition-none cursor-pointer rounded-full h-[34px] w-[34px] p-0 text-black";
 
 // src/components/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -11407,7 +11407,7 @@ var TextLinkMenu = ({ editor }) => {
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px] text-black",
           onMouseDown: (e) => e.preventDefault(),
           children: [
             /* @__PURE__ */ jsx20(LinkIcon2, { className: "size-4" }),
@@ -12289,7 +12289,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
           text-align: inherit;
         }
         .tiptap-overlay .ProseMirror .merge-field-tag {
-          background-color: var(--background);
+          background-color: white;
           border-radius: 4px;
           padding: 0px;
           border: 1px solid var(--border);
@@ -12366,7 +12366,7 @@ var DeleteButton = () => {
         variant: "ghost",
         className: floatButtonVariants,
         onClick: handleDelete,
-        children: /* @__PURE__ */ jsx23(TrashIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx23(TrashIcon2, { className: "size-4 " })
       }
     ) }),
     /* @__PURE__ */ jsx23(TooltipContent, { side: "bottom", children: "Delete" })
@@ -12663,7 +12663,7 @@ var HrefMenu = () => {
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px] text-black",
           children: [
             /* @__PURE__ */ jsx26(LinkIcon3, { className: "size-4" }),
             /* @__PURE__ */ jsx26("p", { children: "Add link" })
@@ -13472,7 +13472,7 @@ var MlsNumberMenu = () => {
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+          className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px] text-black",
           children: [
             /* @__PURE__ */ jsx38(HousePlusIcon, { className: "size-4" }),
             /* @__PURE__ */ jsx38("p", { children: "MLS" })
@@ -13821,14 +13821,14 @@ var DividerScale = ({ getReferenceRect }) => {
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "left"),
-            className: `w-[18px] h-[18px] cursor-ew-resize bg-background shadow-md border rounded-full absolute -left-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "left" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
+            className: `w-[18px] h-[18px] cursor-ew-resize bg-white shadow-md border rounded-full absolute -left-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "left" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
           }
         ),
         showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: (e) => handlePointerDown(e, "right"),
-            className: `w-[18px] h-[18px] cursor-ew-resize bg-background shadow-md border rounded-full absolute -right-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "right" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
+            className: `w-[18px] h-[18px] cursor-ew-resize bg-white shadow-md border rounded-full absolute -right-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "right" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
           }
         )
       ]
@@ -13973,7 +13973,7 @@ var ButtonScale = ({ getReferenceRect }) => {
   }, [getReferenceRect, refs, update, virtualReference]);
   const showLeftHandle = currentAlign !== "left";
   const showRightHandle = currentAlign !== "right";
-  const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
+  const handleBaseClass = "bg-white shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
   return /* @__PURE__ */ jsxs27(
     "div",
@@ -14186,7 +14186,7 @@ var ImageScale = ({ getReferenceRect }) => {
   const showTopRight = currentAlign !== "right";
   const showBottomLeft = currentAlign !== "left";
   const showBottomRight = currentAlign !== "right";
-  const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
+  const handleBaseClass = "bg-white shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
   return /* @__PURE__ */ jsxs28(
     "div",
@@ -14364,7 +14364,7 @@ var SpacerScale = ({ getReferenceRect }) => {
     );
     return cleanup;
   }, [getReferenceRect, refs, update, virtualReference]);
-  const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
+  const handleBaseClass = "bg-white shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
   return /* @__PURE__ */ jsxs29(
     "div",
@@ -14531,7 +14531,7 @@ var ColumnScale = ({ sectionColumnIdx, shadowRoot }) => {
   if (columnRects.length < 2 || columnWidths.length < 2) {
     return null;
   }
-  const handleBaseClass = "bg-background shadow-md border rounded-full touch-none select-none pointer-events-auto";
+  const handleBaseClass = "bg-white shadow-md border rounded-full touch-none select-none pointer-events-auto";
   const getHandleActiveClass = (index) => activeDivider === index ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
   return /* @__PURE__ */ jsx47(Fragment17, { children: columnRects.slice(0, -1).map((rect, index) => {
     const nextRect = columnRects[index + 1];

package/dist/{core-FWDS3AQF.mjs → core-OW5KVXX7.mjs}

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

package/dist/index.js

@@ -1817,7 +1817,7 @@ var init_empty = __esm({
       version: "1.0.0",
       published: true,
       creator: "Kevin Guerrero",
-      image: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/placeholder_image.png",
+      image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
       content: [
         {
           id: "main-body",
@@ -3544,7 +3544,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   /* Merge field tags - dashed underline for {{variable}} patterns */
   .merge-field-tag {
   
-    background-color: var(--background);
+    background-color: white;
     border-radius: 4px;
     padding: 0px;
     border: 1px solid var(--border);
@@ -4443,7 +4443,7 @@ var init_drag_button = __esm({
             zIndex: 49,
             opacity: isDragging ? 0.3 : 1
           },
-          className: "flex items-center justify-center bg-background border shadow-sm rounded-full cursor-grab hover:bg-blue-400 hover:border-blue-300 active:cursor-grabbing transition-colors",
+          className: "flex items-center justify-center bg-white border shadow-sm rounded-full cursor-grab hover:bg-blue-400 hover:border-blue-300 active:cursor-grabbing transition-colors",
           children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Move, { className: "w-4 h-4pointer-events-none", color: isDragButtonHovered ? "white" : "gray" })
         }
       );
@@ -11625,7 +11625,7 @@ var floatButtonVariants;
 var init_helper = __esm({
   "src/core/editor/components/float-ui/helper.ts"() {
     "use strict";
-    floatButtonVariants = "shadow-none transition-none cursor-pointer rounded-full h-[34px] w-[34px] p-0";
+    floatButtonVariants = "shadow-none transition-none cursor-pointer rounded-full h-[34px] w-[34px] p-0 text-black";
   }
 });
 
@@ -11752,7 +11752,7 @@ var init_text_link_menu = __esm({
             Button,
             {
               variant: "ghost",
-              className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+              className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px] text-black",
               onMouseDown: (e) => e.preventDefault(),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react14.LinkIcon, { className: "size-4" }),
@@ -12673,7 +12673,7 @@ var init_tiptap_overlay = __esm({
           text-align: inherit;
         }
         .tiptap-overlay .ProseMirror .merge-field-tag {
-          background-color: var(--background);
+          background-color: white;
           border-radius: 4px;
           padding: 0px;
           border: 1px solid var(--border);
@@ -12756,7 +12756,7 @@ var init_delete_button = __esm({
             variant: "ghost",
             className: floatButtonVariants,
             onClick: handleDelete,
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.TrashIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.TrashIcon, { className: "size-4 " })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipContent, { side: "bottom", children: "Delete" })
@@ -13090,7 +13090,7 @@ var init_href_menu = __esm({
             Button,
             {
               variant: "ghost",
-              className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+              className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px] text-black",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react19.LinkIcon, { className: "size-4" }),
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: "Add link" })
@@ -14067,7 +14067,7 @@ var init_mlsNumber_menu = __esm({
             Button,
             {
               variant: "ghost",
-              className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px]",
+              className: "shadow-none transition-none cursor-pointer rounded-full outline-none h-[34px] text-black",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react26.HousePlusIcon, { className: "size-4" }),
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "MLS" })
@@ -14471,14 +14471,14 @@ var init_divider_scale = __esm({
               "div",
               {
                 onPointerDown: (e) => handlePointerDown(e, "left"),
-                className: `w-[18px] h-[18px] cursor-ew-resize bg-background shadow-md border rounded-full absolute -left-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "left" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
+                className: `w-[18px] h-[18px] cursor-ew-resize bg-white shadow-md border rounded-full absolute -left-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "left" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
               }
             ),
             showRightHandle && (activeSide === null || activeSide === "right") && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               "div",
               {
                 onPointerDown: (e) => handlePointerDown(e, "right"),
-                className: `w-[18px] h-[18px] cursor-ew-resize bg-background shadow-md border rounded-full absolute -right-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "right" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
+                className: `w-[18px] h-[18px] cursor-ew-resize bg-white shadow-md border rounded-full absolute -right-[9px] top-1/2 -translate-y-1/2 touch-none select-none ${activeSide === "right" ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300"}`
               }
             )
           ]
@@ -14632,7 +14632,7 @@ var init_button_scale = __esm({
       }, [getReferenceRect, refs, update, virtualReference]);
       const showLeftHandle = currentAlign !== "left";
       const showRightHandle = currentAlign !== "right";
-      const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
+      const handleBaseClass = "bg-white shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
       const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
       return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "div",
@@ -14854,7 +14854,7 @@ var init_image_scale = __esm({
       const showTopRight = currentAlign !== "right";
       const showBottomLeft = currentAlign !== "left";
       const showBottomRight = currentAlign !== "right";
-      const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
+      const handleBaseClass = "bg-white shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
       const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "div",
@@ -15041,7 +15041,7 @@ var init_spacer_scale = __esm({
         );
         return cleanup;
       }, [getReferenceRect, refs, update, virtualReference]);
-      const handleBaseClass = "bg-background shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
+      const handleBaseClass = "bg-white shadow-md border rounded-full absolute touch-none select-none pointer-events-auto";
       const getHandleActiveClass = (side) => activeSide === side ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
       return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "div",
@@ -15217,7 +15217,7 @@ var init_column_scale = __esm({
       if (columnRects.length < 2 || columnWidths.length < 2) {
         return null;
       }
-      const handleBaseClass = "bg-background shadow-md border rounded-full touch-none select-none pointer-events-auto";
+      const handleBaseClass = "bg-white shadow-md border rounded-full touch-none select-none pointer-events-auto";
       const getHandleActiveClass = (index) => activeDivider === index ? "bg-blue-400 border-blue-300" : "hover:bg-blue-400 hover:border-blue-300";
       return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: columnRects.slice(0, -1).map((rect, index) => {
         const nextRect = columnRects[index + 1];
@@ -17024,19 +17024,23 @@ function TemplateHeader() {
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
+      const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==";
       const template = useEditorStore.getState().template;
+      const needsCapture = useEditorStore.getState().hasUnsavedChanges() || !template.image || template.image === PLACEHOLDER_IMAGE;
       let capturedImage;
-      try {
-        const { default: mjml2html } = await import("mjml-browser");
-        const mjmlString = json2mjml(template, "editing");
-        const result = mjml2html(mjmlString);
-        capturedImage = await captureTemplateImage(result.html);
-      } catch (err) {
-        console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+      if (needsCapture) {
+        try {
+          const { default: mjml2html } = await import("mjml-browser");
+          const mjmlString = json2mjml(template, "editing");
+          const result = mjml2html(mjmlString);
+          capturedImage = await captureTemplateImage(result.html);
+        } catch (err) {
+          console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+        }
       }
       await onSave(templateId, template, capturedImage);
-      markAsSaved();
       onExit?.();
+      markAsSaved();
     } catch (error) {
       console.error("Failed to save:", error);
     } finally {
@@ -21539,7 +21543,8 @@ var TRANSPARENT_ALLOWED_ELEMENTS = [
   "socialBgColor",
   "buttonBgColor",
   "highlightColor",
-  "propertyBgColor"
+  "propertyBgColor",
+  "dividerBgColor"
 ];
 var rgbToHex2 = (rgb) => {
   const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i);
@@ -22720,7 +22725,7 @@ function ParentBreadcrumb() {
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { variant: "ghost", disabled: true, className: "p-0 px-1.5 shadow-none transition-none cursor-pointer", children: currentName }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "absolute right-0 top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent to-white pointer-events-none" })
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "absolute right-0 top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent to-background pointer-events-none" })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: currentName })
     ] }) })
@@ -23341,7 +23346,7 @@ var FontSizeControl = (0, import_react65.memo)(function FontSizeControl2({
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer bg-transparent border border-r-0 rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer bg-transparent border border-border border-r-0 rounded-[12px]",
           size: "icon",
           "aria-label": "Decrease Font Size",
           onClick: handleDecrease,
@@ -23357,7 +23362,7 @@ var FontSizeControl = (0, import_react65.memo)(function FontSizeControl2({
           InputGroupInput,
           {
             type: "number",
-            className: "text-center w-12 border-0 shadow-none px-0",
+            className: "text-center w-12 border-0 shadow-none px-0 bg-background",
             placeholder: "--",
             value: input.displayValue,
             onChange: (e) => input.setLocalValue(e.target.value),
@@ -23401,7 +23406,7 @@ var FontSizeControl = (0, import_react65.memo)(function FontSizeControl2({
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer bg-transparent border border-l-0 rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer bg-transparent border border-border border-l-0 rounded-[12px]",
           size: "icon",
           "aria-label": "Increase Font Size",
           onClick: handleIncrease,
@@ -25458,7 +25463,7 @@ var ButtonToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleButtonAlign,
-          children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(TooltipContent, { side: "bottom", children: "Align" })
@@ -26698,14 +26703,10 @@ var SocialToolbar = () => {
             className: "shadow-none transition-none cursor-pointer",
             size: "icon",
             onClick: handleCycleAlign,
-            children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(TooltipContent, { side: "bottom", className: "z-51", children: [
-          "Align (",
-          currentAlign,
-          ")"
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
       ] })
     ] })
   ] });
@@ -27297,7 +27298,7 @@ var DividerToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
@@ -27415,7 +27416,7 @@ var ImageToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TooltipContent, { side: "bottom", children: "Align" })

package/dist/index.mjs

@@ -60,7 +60,7 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-B46UUREH.mjs";
+} from "./chunk-FJ4KXNNM.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
@@ -256,19 +256,23 @@ function TemplateHeader() {
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
+      const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==";
       const template = useEditorStore.getState().template;
+      const needsCapture = useEditorStore.getState().hasUnsavedChanges() || !template.image || template.image === PLACEHOLDER_IMAGE;
       let capturedImage;
-      try {
-        const { default: mjml2html } = await import("mjml-browser");
-        const mjmlString = json2mjml(template, "editing");
-        const result = mjml2html(mjmlString);
-        capturedImage = await captureTemplateImage(result.html);
-      } catch (err) {
-        console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+      if (needsCapture) {
+        try {
+          const { default: mjml2html } = await import("mjml-browser");
+          const mjmlString = json2mjml(template, "editing");
+          const result = mjml2html(mjmlString);
+          capturedImage = await captureTemplateImage(result.html);
+        } catch (err) {
+          console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+        }
       }
       await onSave(templateId, template, capturedImage);
-      markAsSaved();
       onExit?.();
+      markAsSaved();
     } catch (error) {
       console.error("Failed to save:", error);
     } finally {
@@ -4723,7 +4727,8 @@ var TRANSPARENT_ALLOWED_ELEMENTS = [
   "socialBgColor",
   "buttonBgColor",
   "highlightColor",
-  "propertyBgColor"
+  "propertyBgColor",
+  "dividerBgColor"
 ];
 var rgbToHex2 = (rgb) => {
   const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i);
@@ -5884,7 +5889,7 @@ function ParentBreadcrumb() {
     /* @__PURE__ */ jsx31(BreadcrumbItem, { children: /* @__PURE__ */ jsxs29(Tooltip, { children: [
       /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
         /* @__PURE__ */ jsx31(Button, { variant: "ghost", disabled: true, className: "p-0 px-1.5 shadow-none transition-none cursor-pointer", children: currentName }),
-        /* @__PURE__ */ jsx31("div", { className: "absolute right-0 top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent to-white pointer-events-none" })
+        /* @__PURE__ */ jsx31("div", { className: "absolute right-0 top-0 bottom-0 w-[50%] bg-gradient-to-r from-transparent to-background pointer-events-none" })
       ] }) }),
       /* @__PURE__ */ jsx31(TooltipContent, { side: "bottom", className: "z-51", children: currentName })
     ] }) })
@@ -6475,7 +6480,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer bg-transparent border border-r-0 rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer bg-transparent border border-border border-r-0 rounded-[12px]",
           size: "icon",
           "aria-label": "Decrease Font Size",
           onClick: handleDecrease,
@@ -6491,7 +6496,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
           InputGroupInput,
           {
             type: "number",
-            className: "text-center w-12 border-0 shadow-none px-0",
+            className: "text-center w-12 border-0 shadow-none px-0 bg-background",
             placeholder: "--",
             value: input.displayValue,
             onChange: (e) => input.setLocalValue(e.target.value),
@@ -6535,7 +6540,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
         Button,
         {
           variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer bg-transparent border border-l-0 rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer bg-transparent border border-border border-l-0 rounded-[12px]",
           size: "icon",
           "aria-label": "Increase Font Size",
           onClick: handleIncrease,
@@ -8543,7 +8548,7 @@ var ButtonToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleButtonAlign,
-          children: /* @__PURE__ */ jsx52("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx52("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ jsx52(TooltipContent, { side: "bottom", children: "Align" })
@@ -9741,14 +9746,10 @@ var SocialToolbar = () => {
             className: "shadow-none transition-none cursor-pointer",
             size: "icon",
             onClick: handleCycleAlign,
-            children: /* @__PURE__ */ jsx61("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx61("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
           }
         ) }),
-        /* @__PURE__ */ jsxs50(TooltipContent, { side: "bottom", className: "z-51", children: [
-          "Align (",
-          currentAlign,
-          ")"
-        ] })
+        /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
       ] })
     ] })
   ] });
@@ -10318,7 +10319,7 @@ var DividerToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ jsx64("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx64("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ jsx64(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
@@ -10431,7 +10432,7 @@ var ImageToolbar = () => {
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ jsx65("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx65("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4 dark:invert" })
         }
       ) }),
       /* @__PURE__ */ jsx65(TooltipContent, { side: "bottom", children: "Align" })
@@ -11708,7 +11709,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-FWDS3AQF.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-OW5KVXX7.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({

package/package.json

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