@kgalexander/mcreate 0.0.17 → 1.0.0

package/dist/index.mjs

@@ -60,7 +60,7 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-GZLWB3EZ.mjs";
+} from "./chunk-G7F7GRJC.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
@@ -81,11 +81,20 @@ function TemplateJsonView() {
 }
 
 // src/core/editor/components/template-size-indicator.tsx
+import { useEffect } from "react";
 import { jsxs as jsxs2 } from "react/jsx-runtime";
+var POLLING_INTERVAL_MS = 3e4;
 function TemplateSizeIndicator() {
   const templateSize = useEditorStore((state) => state.templateSize);
   const isAtSizeLimit = useEditorStore((state) => state.isAtSizeLimit);
-  console.log("templateSize", templateSize, isAtSizeLimit);
+  const sizeTrackingMode = useEditorStore((state) => state.sizeTrackingMode);
+  const recheckTemplateSize = useEditorStore((state) => state.recheckTemplateSize);
+  useEffect(() => {
+    if (sizeTrackingMode !== "polling") return;
+    const id = setInterval(recheckTemplateSize, POLLING_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [sizeTrackingMode, recheckTemplateSize]);
+  if (sizeTrackingMode === "polling") return null;
   const sizeKB = (templateSize / 1024).toFixed(0);
   const maxKB = (MAX_TEMPLATE_SIZE / 1024).toFixed(0);
   const percentage = templateSize / MAX_TEMPLATE_SIZE * 100;
@@ -203,6 +212,8 @@ function TemplateHeader() {
   const isSaving = useEditorStore((s) => s.isSaving);
   const setIsSaving = useEditorStore((s) => s.setIsSaving);
   const onExit = useEditorStore((s) => s.onExit);
+  const onDuplicate = useEditorStore((s) => s.onDuplicate);
+  const onDelete = useEditorStore((s) => s.onDelete);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
     console.log("handleExit - templateId:", templateId);
@@ -252,12 +263,12 @@ function TemplateHeader() {
             /* @__PURE__ */ jsx4(MegaphoneIcon, { className: "w-4 h-4" }),
             "Start new campaign"
           ] }),
-          /* @__PURE__ */ jsxs5(DropdownMenuItem, { className: "cursor-pointer", children: [
+          /* @__PURE__ */ jsxs5(DropdownMenuItem, { className: "cursor-pointer", onClick: () => templateId && onDuplicate?.(templateId, useEditorStore.getState().template), children: [
             /* @__PURE__ */ jsx4(CopyIcon, { className: "w-4 h-4" }),
             "Duplicate"
           ] }),
           /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs5(DropdownMenuItem, { variant: "destructive", className: "cursor-pointer", children: [
+          /* @__PURE__ */ jsxs5(DropdownMenuItem, { variant: "destructive", className: "cursor-pointer", onClick: () => templateId && onDelete?.(templateId), children: [
             /* @__PURE__ */ jsx4(TrashIcon, { className: "w-4 h-4" }),
             "Delete"
           ] })
@@ -272,7 +283,7 @@ function TemplateHeader() {
 }
 
 // src/core/editor/components/email-template-v2/sidebar/sidebar.tsx
-import { useCallback as useCallback18, useEffect as useEffect4, useRef as useRef6, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect5, useRef as useRef6, useMemo as useMemo7, useState as useState10 } from "react";
 import { BlocksIcon, Paintbrush, PanelLeftClose, PanelLeftOpen, FileIcon } from "lucide-react";
 
 // src/core/editor/components/email-template-v2/sidebar/view/elements/main.tsx
@@ -283,7 +294,7 @@ import { useCallback as useCallback3 } from "react";
 import { ArrowLeftIcon as ArrowLeftIcon2 } from "lucide-react";
 
 // src/core/editor/hooks/use-recently-used.ts
-import { useState as useState2, useCallback, useEffect } from "react";
+import { useState as useState2, useCallback, useEffect as useEffect2 } from "react";
 
 // src/pre-elements/columns.json
 var columns_default = [
@@ -1208,7 +1219,7 @@ function resolveAll(refs) {
 }
 function useRecentlyUsed() {
   const [refs, setRefs] = useState2(() => readRefs());
-  useEffect(() => {
+  useEffect2(() => {
     const handler = (e) => {
       if (e.key === STORAGE_KEY) {
         setRefs(readRefs());
@@ -1230,7 +1241,7 @@ function useRecentlyUsed() {
 }
 
 // src/core/editor/components/email-template-v2/sidebar/view/elements/_components/preview-section.tsx
-import { useRef, useState as useState3, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useRef, useState as useState3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
 function PreviewSection({
@@ -1251,7 +1262,7 @@ function PreviewSection({
     setCanGoLeft(el.scrollLeft > 0);
     setCanGoRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     updateScrollState();
     const el = scrollRef.current;
     if (!el) return;
@@ -2710,7 +2721,7 @@ import {
   memo,
   useCallback as useCallback15,
   useContext,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useMemo as useMemo4,
   useRef as useRef3,
   useState as useState6
@@ -2750,7 +2761,7 @@ var ColorPicker = ({
   saturationRef.current = saturation;
   lightnessRef.current = lightness;
   alphaRef.current = alpha;
-  useEffect3(() => {
+  useEffect4(() => {
     if (value) {
       const color = Color(value);
       const hsl = color.hsl().object();
@@ -2835,7 +2846,7 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
     },
     [isDragging, updateColor]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const handlePointerUp = () => setIsDragging(false);
     if (isDragging) {
       window.addEventListener("pointermove", handlePointerMove);
@@ -3697,7 +3708,7 @@ function TemplateSidebar({ editorLoading }) {
   const previousFocusIdxRef = useRef6(null);
   const [openSidebar, setOpenSidebar] = useState10(true);
   const [updateCounter, forceUpdate] = useState10(0);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -3760,7 +3771,7 @@ function TemplateSidebar({ editorLoading }) {
         return null;
     }
   }, [colorTarget, focusIdx, focusedElementAttrs, parentElementAttrs, focusedElementType, pageBgColor, linkColor, tiptapEditor, updateCounter]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!focusIdx || !focusedElementType) {
       previousElementTypeRef.current = void 0;
       return;
@@ -4338,7 +4349,7 @@ var PlainToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/text/toolbar.tsx
-import { useEffect as useEffect6, useState as useState17, useCallback as useCallback27, useMemo as useMemo14 } from "react";
+import { useEffect as useEffect7, useState as useState17, useCallback as useCallback27, useMemo as useMemo14 } from "react";
 import { BoldIcon, BracesIcon, CaseUpperIcon, CheckIcon as CheckIcon5, EllipsisIcon, HighlighterIcon, ItalicIcon, Strikethrough, Underline } from "lucide-react";
 
 // src/core/editor/components/paragraph-text-settings.tsx
@@ -4406,7 +4417,7 @@ function Slider2({
 }
 
 // src/core/editor/components/paragraph-text-settings.tsx
-import { useState as useState12, useEffect as useEffect5, useMemo as useMemo11, useCallback as useCallback22, memo as memo2 } from "react";
+import { useState as useState12, useEffect as useEffect6, useMemo as useMemo11, useCallback as useCallback22, memo as memo2 } from "react";
 
 // src/core/editor/hooks/use-editable-value.ts
 import { useState as useState11, useCallback as useCallback21 } from "react";
@@ -4478,7 +4489,7 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
   const [isOpen, setIsOpen] = useState12(false);
   const tiptapEditor = useEditorStore((s) => s.tiptapEditor);
   const [updateCounter, forceUpdate] = useState12(0);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -4932,7 +4943,7 @@ var BorderRadius = ({
   value,
   onChange,
   tooltipText = "Border Radius",
-  max = 100
+  max = 50
 }) => {
   const [isOpen, setIsOpen] = useState14(false);
   const input = useEditableNumber({ value, onChange, min: 0, max });
@@ -5635,7 +5646,7 @@ var TextToolbar = () => {
     const section = getValueByIdx(template, sectionIdx);
     return section?.type === "section-column";
   }, [focusIdx, template]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -9408,18 +9419,25 @@ var PropertyEditMenu = () => {
               ) }),
               /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsDescription ? "Hide Description" : "Show Description" })
             ] }),
-            /* @__PURE__ */ jsx68(
-              Textarea,
-              {
-                disabled: !currentIsDescription,
-                placeholder: "Beautiful home in the heart of the New Jersey Shore",
-                className: "w-full shadow-none rounded-[12px] min-h-fit max-h-34",
-                value: descriptionInput.displayValue,
-                onChange: (e) => descriptionInput.setLocalValue(e.target.value),
-                onFocus: descriptionInput.handleFocus,
-                onBlur: descriptionInput.handleBlur
-              }
-            )
+            /* @__PURE__ */ jsxs55("div", { className: "flex flex-col w-full gap-1", children: [
+              /* @__PURE__ */ jsx68(
+                Textarea,
+                {
+                  disabled: !currentIsDescription,
+                  placeholder: "Beautiful home in the heart of the New Jersey Shore",
+                  className: "w-full shadow-none rounded-[12px] min-h-fit max-h-34",
+                  maxLength: 200,
+                  value: descriptionInput.displayValue,
+                  onChange: (e) => descriptionInput.setLocalValue(e.target.value.slice(0, 200)),
+                  onFocus: descriptionInput.handleFocus,
+                  onBlur: descriptionInput.handleBlur
+                }
+              ),
+              /* @__PURE__ */ jsxs55("p", { className: "text-xs text-muted-foreground text-right", children: [
+                (descriptionInput.displayValue || "").length,
+                "/200"
+              ] })
+            ] })
           ] }) })
         ] })
       ] })
@@ -10042,11 +10060,11 @@ function Skeleton({ className, ...props }) {
 import { Suspense, useState as useState25, lazy } from "react";
 
 // src/core/editor/hooks/use-auto-save.ts
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
 var AUTO_SAVE_INTERVAL = 30 * 1e3;
 function useAutoSave() {
   const intervalRef = useRef7(null);
-  useEffect7(() => {
+  useEffect8(() => {
     intervalRef.current = setInterval(async () => {
       const { template, templateId, onSave, hasUnsavedChanges, markAsSaved, isSaving, setIsSaving } = useEditorStore.getState();
       if (isSaving || !templateId || !onSave || !hasUnsavedChanges()) {
@@ -10074,7 +10092,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-JDSYY73O.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-P3XCQRWR.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -10084,10 +10102,12 @@ function TemplatePage({
   onToast,
   onExit,
   onImageUpload,
+  onDuplicate,
+  onDelete,
   data
 }) {
   useState25(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = useState25(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kgalexander/mcreate",
-  "version": "0.0.17",
+  "version": "1.0.0",
   "description": "Maillow email template editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -74,6 +74,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "color": "^5.0.3",
+    "html-to-image": "^1.11.13",
     "immer": "^11.1.3",
     "lodash": "^4.17.23",
     "lucide-react": "^0.563.0",