@kgalexander/mcreate 0.0.7 → 0.0.8

package/README.md

@@ -8,6 +8,20 @@ mcreate package
 npm install @kgalexander/mcreate
 ```
 
+## Tailwind CSS v4 Setup
+
+This package uses Tailwind CSS utility classes. For styles to work correctly, you need to configure Tailwind to scan the package for class names.
+
+Add the `@source` directive to your `globals.css` (or main CSS file):
+
+```css
+@import "tailwindcss";
+
+@source "../node_modules/@kgalexander/mcreate";
+```
+
+> **Why is this needed?** Tailwind CSS v4 doesn't scan `node_modules` by default. The `@source` directive tells Tailwind to include class names from this package when compiling your CSS.
+
 ## Local Development with npm link
 
 When using `npm link` to develop this package locally with a Next.js application, you need to configure Next.js to resolve symlinked packages outside the project directory.

package/dist/{chunk-4J3VEZPB.mjs → chunk-JD4V766D.mjs}

@@ -1875,6 +1875,8 @@ var useEditorStore = create()(
     immer((set) => ({
       // Initial state
       template: defaultTemplate,
+      templateId: null,
+      onSave: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1893,6 +1895,48 @@ var useEditorStore = create()(
       historyIndex: -1,
       isUndoRedoAction: false,
       lastHistoryPushTime: 0,
+      // Auto-save tracking
+      lastSavedSnapshot: null,
+      isSaving: false,
+      // Initialize store with external template (for npm package usage)
+      initializeWithTemplate: (templateId, template, onSave) => {
+        set((state) => {
+          state.templateId = templateId;
+          state.template = template;
+          state.onSave = onSave ?? null;
+          state.templateSize = calculateTemplateSize(template);
+          state.isAtSizeLimit = false;
+          state.history = [cloneDeep(template)];
+          state.historyIndex = 0;
+          state.focusIdx = null;
+          state.hoverIdx = null;
+          state.textEditing = null;
+          state.lastSavedSnapshot = JSON.stringify(template);
+        });
+      },
+      // Template metadata actions
+      setTemplateName: (name) => {
+        set((state) => {
+          state.template.name = name;
+        });
+        useEditorStore.getState().pushHistory();
+      },
+      // Auto-save actions
+      markAsSaved: () => {
+        set((state) => {
+          state.lastSavedSnapshot = JSON.stringify(state.template);
+        });
+      },
+      hasUnsavedChanges: () => {
+        const state = useEditorStore.getState();
+        if (!state.lastSavedSnapshot) return true;
+        return JSON.stringify(state.template) !== state.lastSavedSnapshot;
+      },
+      setIsSaving: (saving) => {
+        set((state) => {
+          state.isSaving = saving;
+        });
+      },
       // Selection actions
       setFocusIdx: (idx) => {
         set((state) => {
@@ -4341,6 +4385,11 @@ function DialogPortal({
 }) {
   return /* @__PURE__ */ jsx4(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
 function DialogOverlay({
   className,
   ...props
@@ -4392,6 +4441,38 @@ function DialogContent({
     )
   ] });
 }
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx4(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx4(Button, { variant: "outline", children: "Close" }) })
+      ]
+    }
+  );
+}
 function DialogTitle({
   className,
   ...props
@@ -14062,9 +14143,6 @@ function getCompanyFooterSection(template) {
 }
 function Editor({ setEditorLoading }) {
   useUndoRedoKeyboard();
-  useEffect19(() => {
-    useEditorStore.getState().clearHistory();
-  }, []);
   const template = useEditorStore((state) => state.template);
   const previewMode = useEditorStore((state) => state.previewMode);
   const focusIdx = useEditorStore((state) => state.focusIdx);
@@ -15003,6 +15081,7 @@ export {
   parseBorder,
   formatBorder,
   parsePrice,
+  json2mjml,
   MAX_TEMPLATE_SIZE,
   useEditorStore,
   BUTTON_ALIGNMENTS,
@@ -15029,7 +15108,10 @@ export {
   Button,
   Dialog,
   DialogTrigger,
+  DialogClose,
   DialogContent,
+  DialogHeader,
+  DialogFooter,
   DialogTitle,
   QUICK_BLOCKS,
   Tooltip,

package/dist/{core-IQDOULVP.mjs → core-B2RPCQDU.mjs}

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

package/dist/index.d.mts

@@ -1,15 +1,294 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type PageElement = {
+    id?: string;
+    type: 'page';
+    tagName: 'mj-body';
+    data: {
+        value: {
+            breakpoint?: string;
+            headAttributes?: string;
+            fontSize?: string;
+            fontWeight?: string;
+            lineHeight?: string;
+            'font-size'?: string;
+            'font-weight'?: string;
+            'line-height'?: string;
+            headStyles?: string[];
+            fonts?: {
+                name?: string;
+                href?: string;
+            }[];
+            responsive?: boolean;
+            fontFamily?: string;
+            'font-family'?: string;
+            textColor?: string;
+            'text-color'?: string;
+            showCompanyFooter?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (SectionElement | SectionColumnElement | SectionPropertyKmElement | SectionPropertySingleTwoElement | SectionPropertyTripleElement)[];
+};
+type SectionElement = {
+    type: 'section';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            columnRows?: number;
+            columnWidths?: string[];
+            noWrap?: boolean;
+            isCompanyFooter?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (ColumnElement)[];
+};
+type SectionColumnElement = {
+    type: 'section-column';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            columnRows?: number;
+            columnWidths?: string[];
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (ColumnElement)[];
+};
+type SectionPropertyKmElement = {
+    type: 'section-property-km';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: [ColumnElement];
+};
+type SectionPropertySingleTwoElement = {
+    type: 'section-property-single-two';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: [ColumnElement];
+};
+type ColumnElement = {
+    type: 'column';
+    tagName: 'mj-column';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (TextElement | ButtonElement | SpaceElement | DividerElement | ImageElement | SocialElement | PropertyCardElement | PropertyCardSingleTwoElement | PropertyCardTripleElement)[];
+};
+type TextElement = {
+    type: 'text';
+    tagName: 'mj-text';
+    data: {
+        value: {
+            content: string;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type ButtonElement = {
+    type: 'button';
+    tagName: 'mj-button';
+    data: {
+        value: {
+            content: string;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardElement = {
+    type: 'property-card';
+    tagName: 'mj-colproperty';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardSingleTwoElement = {
+    type: 'property-card-single-two';
+    tagName: 'mj-propertysingletwo';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardTripleItemElement = {
+    type: 'property-card-triple-item';
+    tagName: 'mj-propertytripleitem';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardTripleElement = {
+    type: 'property-card-triple';
+    tagName: 'mj-propertytriple';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: PropertyCardTripleItemElement[];
+};
+type SectionPropertyTripleElement = {
+    type: 'section-property-triple';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: [ColumnElement];
+};
+type SpaceElement = {
+    type: 'space';
+    tagName: 'mj-spacer';
+    attributes: {
+        [key: string]: string;
+    };
+};
+type DividerElement = {
+    type: 'divider';
+    tagName: 'mj-divider';
+    attributes: {
+        [key: string]: string;
+    };
+};
+type ImageElement = {
+    type: 'image';
+    tagName: 'mj-image';
+    attributes: {
+        [key: string]: string;
+    };
+};
+type SocialStyle = 'Icon + Text' | 'Icon' | 'Text';
+type IconSize = 'Small' | 'Medium' | 'Large';
+type IconStyle = 'Regular' | 'Filled' | 'Outline';
+type IconColor = 'Colored' | 'Dark' | 'Light' | 'Gray';
+type SocialElement = {
+    type: 'social';
+    tagName: 'mj-social';
+    data: {
+        value: {
+            socialStyle: SocialStyle;
+            iconSize: IconSize;
+            iconStyle: IconStyle;
+            iconColor: IconColor;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (SocialItemElement)[];
+};
+type SocialItemElement = {
+    type: 'social-item';
+    tagName: 'mj-social-element';
+    data: {
+        value: {
+            content: string;
+            socialType: string;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type TemplateJSON = {
+    id: string;
+    name: string;
+    version: string;
+    published: boolean;
+    creator: string;
+    content: PageElement[];
+};
+
+type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+
 interface EditorProps {
-    defaultContent?: string;
     setEditorLoading?: (loading: boolean) => void;
     editorLoading?: boolean;
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave }: {
     templateId: string;
-    initialTemplate: any;
+    initialTemplate: TemplateJSON;
+    onSave?: OnSaveCallback;
 }): react_jsx_runtime.JSX.Element;
 
-export { Editor, TemplatePage };
+/**
+ * JSON to MJML Converter
+ * Converts template JSON to MJML string for rendering
+ */
+
+type RenderMode = 'production' | 'editing';
+interface RenderOptions {
+    isPaid?: boolean;
+}
+/**
+ * Convert template JSON to MJML string
+ * @param template - Template JSON object
+ * @param mode - Render mode: 'production' for clean output, 'editing' for tracking classes
+ * @param options - Render options including isPaid for company footer visibility
+ * @returns MJML string
+ */
+declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
+
+export { Editor, type OnSaveCallback, type TemplateJSON, TemplatePage, json2mjml };