@savvycal/mjml-editor 0.0.3 → 0.2.0

package/dist/components/editor/EditorCanvas.d.ts

@@ -5,7 +5,8 @@ interface EditorCanvasProps {
     onTabChange: (tab: EditorTabType) => void;
     leftPanelOpen?: boolean;
     rightPanelOpen?: boolean;
+    showThemeToggle?: boolean;
 }
-export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, showThemeToggle, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=EditorCanvas.d.ts.map

package/dist/components/editor/EditorCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/components/editor/EditorCanvas.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,UAAU,iBAAiB;IACzB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,GACf,EAAE,iBAAiB,2CA0GnB"}
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/components/editor/EditorCanvas.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,UAAU,iBAAiB;IACzB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAsB,GACvB,EAAE,iBAAiB,2CA0GnB"}

package/dist/components/editor/EditorCanvas.js

@@ -1,21 +1,22 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as g } from "react";
-import { Monitor as x, Smartphone as v, Undo2 as N, Redo2 as b } from "lucide-react";
-import { VisualEditor as w } from "./VisualEditor.js";
-import { InteractivePreview as k } from "./InteractivePreview.js";
-import { SourceEditor as C } from "./SourceEditor.js";
-import { useEditor as y } from "../../context/EditorContext.js";
+import { useState as x } from "react";
+import { Monitor as v, Smartphone as N, Undo2 as b, Redo2 as w } from "lucide-react";
+import { VisualEditor as k } from "./VisualEditor.js";
+import { InteractivePreview as C } from "./InteractivePreview.js";
+import { SourceEditor as y } from "./SourceEditor.js";
+import { useEditor as E } from "../../context/EditorContext.js";
 import { Button as i } from "../ui/button.js";
-import { Tabs as E, TabsList as S, TabsTrigger as s } from "../ui/tabs.js";
-import { ThemeToggle as M } from "../ui/theme-toggle.js";
+import { Tabs as S, TabsList as M, TabsTrigger as s } from "../ui/tabs.js";
+import { ThemeToggle as P } from "../ui/theme-toggle.js";
 import { cn as d } from "../../lib/utils.js";
-function L({
+function q({
   activeTab: o,
   onTabChange: t,
   leftPanelOpen: a,
-  rightPanelOpen: l
+  rightPanelOpen: l,
+  showThemeToggle: c = !0
 }) {
-  const { undo: c, redo: m, canUndo: u, canRedo: h } = y(), [n, f] = g("desktop");
+  const { undo: m, redo: u, canUndo: h, canRedo: f } = E(), [n, p] = x("desktop");
   return /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center gap-1 border-b border-border bg-background relative", children: [
       /* @__PURE__ */ e(
@@ -52,18 +53,18 @@ function L({
         }
       ),
       o === "preview" && /* @__PURE__ */ e(
-        E,
+        S,
         {
           value: n,
-          onValueChange: (p) => f(p),
+          onValueChange: (g) => p(g),
           className: "absolute left-1/2 -translate-x-1/2",
-          children: /* @__PURE__ */ r(S, { className: "h-8", children: [
+          children: /* @__PURE__ */ r(M, { className: "h-8", children: [
             /* @__PURE__ */ r(s, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(x, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Desktop" })
             ] }),
             /* @__PURE__ */ r(s, { value: "mobile", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e(N, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Mobile" })
             ] })
           ] })
@@ -76,11 +77,11 @@ function L({
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: c,
-            disabled: !u,
+            onClick: m,
+            disabled: !h,
             className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent disabled:opacity-40",
             title: "Undo (Cmd+Z)",
-            children: /* @__PURE__ */ e(N, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(b, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ e(
@@ -88,29 +89,29 @@ function L({
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: m,
-            disabled: !h,
+            onClick: u,
+            disabled: !f,
             className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent disabled:opacity-40",
             title: "Redo (Cmd+Shift+Z)",
-            children: /* @__PURE__ */ e(b, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(w, { className: "h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ e(M, {})
+        c && /* @__PURE__ */ e(P, {})
       ] })
     ] }),
     /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
       o === "edit" && /* @__PURE__ */ e(
-        w,
+        k,
         {
           leftPanelOpen: a,
           rightPanelOpen: l
         }
       ),
-      o === "preview" && /* @__PURE__ */ e(k, { showHeader: !1, previewMode: n }),
-      o === "source" && /* @__PURE__ */ e(C, {})
+      o === "preview" && /* @__PURE__ */ e(C, { showHeader: !1, previewMode: n }),
+      o === "source" && /* @__PURE__ */ e(y, {})
     ] })
   ] });
 }
 export {
-  L as EditorCanvas
+  q as EditorCanvas
 };

package/dist/components/editor/InteractivePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InteractivePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,wBAAgB,kBAAkB,CAAC,EACjC,UAAiB,EACjB,WAAuB,GACxB,EAAE,uBAAuB,2CAkLzB"}
+{"version":3,"file":"InteractivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InteractivePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,wBAAgB,kBAAkB,CAAC,EACjC,UAAiB,EACjB,WAAuB,GACxB,EAAE,uBAAuB,2CAqLzB"}

package/dist/components/editor/InteractivePreview.js

@@ -1,5 +1,5 @@
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { useRef as w, useState as b, useEffect as c, useCallback as E } from "react";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { useRef as w, useState as h, useEffect as a, useCallback as E } from "react";
 import { useEditor as y } from "../../context/EditorContext.js";
 import { renderMjmlInteractive as C } from "../../lib/mjml/renderer.js";
 const I = 375;
@@ -7,31 +7,31 @@ function S({
   showHeader: p = !0,
   previewMode: g = "desktop"
 }) {
-  const { state: n, selectBlock: d } = y(), o = w(null), [m, x] = b(n.document), [v, k] = b({
+  const { state: r, selectBlock: d } = y(), o = w(null), [m, x] = h(r.document), [k, v] = h({
     html: "",
     errors: []
   });
-  c(() => {
+  a(() => {
     const e = setTimeout(() => {
-      x(n.document);
+      x(r.document);
     }, 300);
     return () => clearTimeout(e);
-  }, [n.document]), c(() => {
+  }, [r.document]), a(() => {
     let e = !1;
     return C(m).then((t) => {
-      e || k(t);
+      e || v(t);
     }), () => {
       e = !0;
     };
   }, [m]);
-  const { html: u, errors: l } = v, i = E(
+  const { html: u, errors: l } = k, i = E(
     (e) => {
       e.data?.type === "BLOCK_SELECTED" && d(e.data.blockId);
     },
     [d]
   );
-  c(() => (window.addEventListener("message", i), () => window.removeEventListener("message", i)), [i]);
-  const a = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", f = `
+  a(() => (window.addEventListener("message", i), () => window.removeEventListener("message", i)), [i]);
+  const c = r.selectedBlockId ? `.block-${r.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", b = `
     (function() {
       document.addEventListener('click', function(e) {
         e.preventDefault();
@@ -60,15 +60,15 @@ function S({
       }, true);
     })();
   `;
-  return c(() => {
+  return a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
         e.open(), e.write(u), e.close();
         const t = e.createElement("script");
-        t.textContent = f, e.body.appendChild(t);
-        const h = e.createElement("style");
-        h.textContent = `
+        t.textContent = b, e.body.appendChild(t);
+        const f = e.createElement("style");
+        f.textContent = `
           [class*="block-"] {
             cursor: pointer;
             transition: outline 0.15s ease;
@@ -77,22 +77,22 @@ function S({
             outline: 1px dashed #94a3b8 !important;
             outline-offset: -1px;
           }
-          ${a}
-        `, e.head.appendChild(h);
+          ${c}
+        `, e.head.appendChild(f);
       }
     }
-  }, [u, a, f]), c(() => {
+  }, [u, c, b]), a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
         let t = e.getElementById("selection-highlight");
-        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = a;
+        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = c;
       }
     }
-  }, [n.selectedBlockId, a]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
-    p && /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
+  }, [r.selectedBlockId, c]), /* @__PURE__ */ n("div", { className: "flex flex-col h-full", children: [
+    p && /* @__PURE__ */ n("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
       /* @__PURE__ */ s("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
-      l.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+      l.length > 0 && /* @__PURE__ */ n("span", { className: "text-xs font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-md", children: [
         l.length,
         " warning",
         l.length !== 1 ? "s" : ""
@@ -111,17 +111,24 @@ function S({
         sandbox: "allow-same-origin allow-scripts"
       }
     ) }),
-    l.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
-      /* @__PURE__ */ s("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
-      /* @__PURE__ */ s("div", { className: "space-y-1", children: l.map((e, t) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
-        /* @__PURE__ */ r("span", { className: "font-mono", children: [
-          "Line ",
-          e.line,
-          ":"
-        ] }),
-        " ",
-        e.message
-      ] }, t)) })
+    l.length > 0 && /* @__PURE__ */ n("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 dark:bg-amber-900/20 p-3", children: [
+      /* @__PURE__ */ s("div", { className: "text-xs font-semibold text-amber-700 dark:text-amber-300 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ s("div", { className: "space-y-1", children: l.map((e, t) => /* @__PURE__ */ n(
+        "div",
+        {
+          className: "text-xs text-amber-600 dark:text-amber-400",
+          children: [
+            /* @__PURE__ */ n("span", { className: "font-mono", children: [
+              "Line ",
+              e.line,
+              ":"
+            ] }),
+            " ",
+            e.message
+          ]
+        },
+        t
+      )) })
     ] })
   ] });
 }

package/dist/components/editor/MjmlEditor.d.ts

@@ -16,7 +16,22 @@ interface MjmlEditorProps {
      * @default true
      */
     applyThemeToDocument?: boolean;
+    /**
+     * Whether to show the theme toggle in the toolbar.
+     * @default true
+     */
+    showThemeToggle?: boolean;
+    /**
+     * Whether the tree panel (left) is open by default.
+     * @default true
+     */
+    defaultLeftPanelOpen?: boolean;
+    /**
+     * Whether the inspector panel (right) is open by default.
+     * @default false
+     */
+    defaultRightPanelOpen?: boolean;
 }
-export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, applyThemeToDocument, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, applyThemeToDocument, showThemeToggle, defaultLeftPanelOpen, defaultRightPanelOpen, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MjmlEditor.d.ts.map

package/dist/components/editor/MjmlEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAcnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAuJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,oBAA2B,GAC5B,EAAE,eAAe,2CAuCjB"}
+{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAcnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAoKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,GAC9B,EAAE,eAAe,2CA4CjB"}

package/dist/components/editor/MjmlEditor.js

@@ -1,137 +1,154 @@
-import { jsx as t, jsxs as T, Fragment as I } from "react/jsx-runtime";
-import { useState as d, useEffect as c, useCallback as b, useRef as P } from "react";
-import { EditorProvider as L, useEditor as D } from "../../context/EditorContext.js";
-import { ThemeProvider as M, useTheme as O } from "../../context/ThemeContext.js";
-import { LiquidSchemaProvider as j } from "../../context/LiquidSchemaContext.js";
-import { OutlineTree as x, GLOBAL_STYLES_ID as y } from "./OutlineTree.js";
-import { EditorCanvas as C } from "./EditorCanvas.js";
-import { BlockInspector as S } from "./BlockInspector.js";
-import { GlobalStylesPanel as K } from "./GlobalStylesPanel.js";
-import { FloatingPanel as E } from "../ui/floating-panel.js";
-import { createEmptyDocument as w, parseMjml as R, serializeMjml as A } from "../../lib/mjml/parser.js";
-function F(n) {
+import { jsx as e, jsxs as w, Fragment as L } from "react/jsx-runtime";
+import { useState as c, useEffect as a, useCallback as D, useRef as M } from "react";
+import { EditorProvider as O, useEditor as j } from "../../context/EditorContext.js";
+import { ThemeProvider as x, useTheme as C } from "../../context/ThemeContext.js";
+import { LiquidSchemaProvider as S } from "../../context/LiquidSchemaContext.js";
+import { OutlineTree as K, GLOBAL_STYLES_ID as B } from "./OutlineTree.js";
+import { EditorCanvas as R } from "./EditorCanvas.js";
+import { BlockInspector as A } from "./BlockInspector.js";
+import { GlobalStylesPanel as F } from "./GlobalStylesPanel.js";
+import { FloatingPanel as I } from "../ui/floating-panel.js";
+import { createEmptyDocument as b, parseMjml as N, serializeMjml as $ } from "../../lib/mjml/parser.js";
+function z(n) {
   if (!n || n.trim() === "")
-    return w();
+    return b();
   try {
-    return R(n);
-  } catch (e) {
-    return console.error("Failed to parse MJML:", e), w();
+    return N(n);
+  } catch (o) {
+    return console.error("Failed to parse MJML:", o), b();
   }
 }
-function N({
+function G({
   className: n,
-  children: e
+  children: o
 }) {
-  const { resolvedTheme: o } = O();
-  return /* @__PURE__ */ t(
+  const { resolvedTheme: l } = C();
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: `mjml-editor ${o} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
-      children: e
+      className: `mjml-editor ${l} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
+      children: o
     }
   );
 }
-function $({ onChange: n }) {
-  const { state: e, undo: o, redo: s, canUndo: a, canRedo: u, deleteBlock: m, selectBlock: f } = D(), [l, p] = d(!0), [i, h] = d(!0), [k, B] = d("edit"), v = P(n);
-  return c(() => {
-    v.current = n;
-  }, [n]), c(() => {
-    e.selectedBlockId && h(!0);
-  }, [e.selectedBlockId]), c(() => {
-    const g = A(e.document);
-    v.current(g);
-  }, [e.document]), c(() => {
-    const g = (r) => {
-      if (!(r.target instanceof HTMLInputElement || r.target instanceof HTMLTextAreaElement || r.target?.isContentEditable)) {
-        if ((r.metaKey || r.ctrlKey) && r.key === "z") {
-          r.preventDefault(), r.shiftKey ? u && s() : a && o();
+function H({
+  onChange: n,
+  showThemeToggle: o = !0,
+  defaultLeftPanelOpen: l = !0,
+  defaultRightPanelOpen: T = !1
+}) {
+  const { state: r, undo: d, redo: u, canUndo: f, canRedo: m, deleteBlock: p, selectBlock: h } = j(), [i, g] = c(l), [s, k] = c(T), [y, P] = c("edit"), E = M(n);
+  return a(() => {
+    E.current = n;
+  }, [n]), a(() => {
+    r.selectedBlockId && k(!0);
+  }, [r.selectedBlockId]), a(() => {
+    const v = $(r.document);
+    E.current(v);
+  }, [r.document]), a(() => {
+    const v = (t) => {
+      if (!(t.target instanceof HTMLInputElement || t.target instanceof HTMLTextAreaElement || t.target?.isContentEditable)) {
+        if ((t.metaKey || t.ctrlKey) && t.key === "z") {
+          t.preventDefault(), t.shiftKey ? m && u() : f && d();
           return;
         }
-        if ((r.key === "Delete" || r.key === "Backspace") && e.selectedBlockId && e.selectedBlockId !== y) {
-          r.preventDefault(), m(e.selectedBlockId);
+        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== B) {
+          t.preventDefault(), p(r.selectedBlockId);
           return;
         }
-        if (r.key === "Escape" && e.selectedBlockId) {
-          r.preventDefault(), f(null);
+        if (t.key === "Escape" && r.selectedBlockId) {
+          t.preventDefault(), h(null);
           return;
         }
       }
     };
-    return window.addEventListener("keydown", g), () => window.removeEventListener("keydown", g);
+    return window.addEventListener("keydown", v), () => window.removeEventListener("keydown", v);
   }, [
-    o,
-    s,
-    a,
+    d,
     u,
-    m,
     f,
-    e.selectedBlockId
-  ]), /* @__PURE__ */ T("div", { className: "relative h-full overflow-hidden", children: [
-    /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-canvas", children: /* @__PURE__ */ t(
-      C,
+    m,
+    p,
+    h,
+    r.selectedBlockId
+  ]), /* @__PURE__ */ w("div", { className: "relative h-full overflow-hidden", children: [
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-canvas", children: /* @__PURE__ */ e(
+      R,
       {
-        activeTab: k,
-        onTabChange: B,
-        leftPanelOpen: l,
-        rightPanelOpen: i
+        activeTab: y,
+        onTabChange: P,
+        leftPanelOpen: i,
+        rightPanelOpen: s,
+        showThemeToggle: o
       }
     ) }),
-    k === "edit" && /* @__PURE__ */ T(I, { children: [
-      /* @__PURE__ */ t(
-        E,
+    y === "edit" && /* @__PURE__ */ w(L, { children: [
+      /* @__PURE__ */ e(
+        I,
         {
           side: "left",
-          isOpen: l,
-          onToggle: () => p(!l),
+          isOpen: i,
+          onToggle: () => g(!i),
           width: 256,
-          children: /* @__PURE__ */ t(x, { onTogglePanel: () => p(!1) })
+          children: /* @__PURE__ */ e(K, { onTogglePanel: () => g(!1) })
         }
       ),
-      /* @__PURE__ */ t(
-        E,
+      /* @__PURE__ */ e(
+        I,
         {
           side: "right",
-          isOpen: i,
-          onToggle: () => h(!i),
+          isOpen: s,
+          onToggle: () => k(!s),
           width: 300,
-          children: e.selectedBlockId === y ? /* @__PURE__ */ t(
-            K,
+          children: r.selectedBlockId === B ? /* @__PURE__ */ e(
+            F,
             {
-              onTogglePanel: () => h(!1)
+              onTogglePanel: () => k(!1)
             }
-          ) : /* @__PURE__ */ t(S, { onTogglePanel: () => h(!1) })
+          ) : /* @__PURE__ */ e(A, { onTogglePanel: () => k(!1) })
         }
       )
     ] })
   ] });
 }
-function X({
+function te({
   value: n,
-  onChange: e,
-  className: o,
-  defaultTheme: s = "system",
-  liquidSchema: a,
-  applyThemeToDocument: u = !0
+  onChange: o,
+  className: l,
+  defaultTheme: T = "system",
+  liquidSchema: r,
+  applyThemeToDocument: d = !0,
+  showThemeToggle: u = !0,
+  defaultLeftPanelOpen: f = !0,
+  defaultRightPanelOpen: m = !1
 }) {
-  const [m, f] = d(!1);
-  c(() => {
-    f(!0);
+  const [p, h] = c(!1);
+  a(() => {
+    h(!0);
   }, []);
-  const [l] = d(() => F(n)), p = b(
-    (i) => {
-      e(i);
+  const [i] = c(() => z(n)), g = D(
+    (s) => {
+      o(s);
     },
-    [e]
+    [o]
   );
-  return m ? /* @__PURE__ */ t(
-    M,
+  return p ? /* @__PURE__ */ e(
+    x,
     {
-      defaultTheme: s,
-      applyToDocument: u,
-      children: /* @__PURE__ */ t(j, { schema: a, children: /* @__PURE__ */ t(N, { className: o, children: /* @__PURE__ */ t(L, { initialDocument: l, children: /* @__PURE__ */ t($, { onChange: p }) }) }) })
+      defaultTheme: T,
+      applyToDocument: d,
+      children: /* @__PURE__ */ e(S, { schema: r, children: /* @__PURE__ */ e(G, { className: l, children: /* @__PURE__ */ e(O, { initialDocument: i, children: /* @__PURE__ */ e(
+        H,
+        {
+          onChange: g,
+          showThemeToggle: u,
+          defaultLeftPanelOpen: f,
+          defaultRightPanelOpen: m
+        }
+      ) }) }) })
     }
-  ) : /* @__PURE__ */ t("div", { className: `h-full w-full bg-background ${o || ""}` });
+  ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${l || ""}` });
 }
 export {
-  X as MjmlEditor
+  te as MjmlEditor
 };

package/dist/components/editor/OutlineTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AA+NpD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAiI9D"}
+{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AA+NpD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAkI9D"}

package/dist/components/editor/OutlineTree.js

@@ -217,6 +217,7 @@ function he({ onTogglePanel: t }) {
         variant: "outline",
         size: "sm",
         onClick: x,
+        disabled: !a,
         className: "w-full h-8 gap-1.5 text-xs font-medium",
         children: [
           /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" }),

package/dist/components/editor/SourcePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAgB,GACjB,EAAE,kBAAkB,2CAkFpB"}
+{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAgB,GACjB,EAAE,kBAAkB,2CAqFpB"}

package/dist/components/editor/SourcePreview.js

@@ -1,41 +1,41 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useRef as h, useState as f, useEffect as a } from "react";
-import { renderMjmlString as x } from "../../lib/mjml/renderer.js";
+import { useRef as x, useState as b, useEffect as i } from "react";
+import { renderMjmlString as h } from "../../lib/mjml/renderer.js";
 function w({
   mjmlSource: s,
-  debounceMs: c = 300
+  debounceMs: m = 300
 }) {
-  const l = h(null), [o, u] = f(s), [b, m] = f({
+  const a = x(null), [l, f] = b(s), [u, d] = b({
     html: "",
     errors: []
   });
-  a(() => {
+  i(() => {
     const e = setTimeout(() => {
-      u(s);
-    }, c);
+      f(s);
+    }, m);
     return () => clearTimeout(e);
-  }, [s, c]), a(() => {
-    if (!o.trim()) {
-      m({ html: "", errors: [] });
+  }, [s, m]), i(() => {
+    if (!l.trim()) {
+      d({ html: "", errors: [] });
       return;
     }
     let e = !1;
-    return x(o).then((i) => {
-      e || m(i);
+    return h(l).then((o) => {
+      e || d(o);
     }), () => {
       e = !0;
     };
-  }, [o]);
-  const { html: d, errors: t } = b;
-  return a(() => {
-    if (l.current) {
-      const e = l.current.contentDocument;
-      e && (e.open(), e.write(d), e.close());
+  }, [l]);
+  const { html: c, errors: t } = u;
+  return i(() => {
+    if (a.current) {
+      const e = a.current.contentDocument;
+      e && (e.open(), e.write(c), e.close());
     }
-  }, [d]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+  }, [c]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
       /* @__PURE__ */ n("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
-      t.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+      t.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-md", children: [
         t.length,
         " warning",
         t.length !== 1 ? "s" : ""
@@ -44,23 +44,30 @@ function w({
     /* @__PURE__ */ n("div", { className: "flex-1 overflow-auto bg-muted", children: /* @__PURE__ */ n(
       "iframe",
       {
-        ref: l,
+        ref: a,
         title: "Source Preview",
         className: "w-full h-full border-0 bg-white",
         sandbox: "allow-same-origin"
       }
     ) }),
-    t.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
-      /* @__PURE__ */ n("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
-      /* @__PURE__ */ n("div", { className: "space-y-1", children: t.map((e, i) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
-        /* @__PURE__ */ r("span", { className: "font-mono", children: [
-          "Line ",
-          e.line,
-          ":"
-        ] }),
-        " ",
-        e.message
-      ] }, i)) })
+    t.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 dark:bg-amber-900/20 p-3", children: [
+      /* @__PURE__ */ n("div", { className: "text-xs font-semibold text-amber-700 dark:text-amber-300 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ n("div", { className: "space-y-1", children: t.map((e, o) => /* @__PURE__ */ r(
+        "div",
+        {
+          className: "text-xs text-amber-600 dark:text-amber-400",
+          children: [
+            /* @__PURE__ */ r("span", { className: "font-mono", children: [
+              "Line ",
+              e.line,
+              ":"
+            ] }),
+            " ",
+            e.message
+          ]
+        },
+        o
+      )) })
     ] })
   ] });
 }

package/dist/components/editor/VisualEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/VisualEditor.tsx"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,cAAc,GACf,EAAE,iBAAiB,2CAwEnB"}
+{"version":3,"file":"VisualEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/VisualEditor.tsx"],"names":[],"mappings":"AAyBA,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,cAAc,GACf,EAAE,iBAAiB,2CAuGnB"}

package/dist/components/editor/VisualEditor.js

@@ -1,43 +1,70 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { useEditor as b } from "../../context/EditorContext.js";
-import { ScrollArea as p } from "../ui/scroll-area.js";
-import { VisualSection as N } from "./visual-blocks/VisualSection.js";
-import { useFontLoader as y } from "../../hooks/useFontLoader.js";
-import { useStyleLoader as _, VISUAL_EDITOR_SCOPE_CLASS as A } from "../../hooks/useStyleLoader.js";
-const E = 256, L = 300, i = 12, c = 24;
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useEditor as x } from "../../context/EditorContext.js";
+import { ScrollArea as a } from "../ui/scroll-area.js";
+import { VisualSection as y } from "./visual-blocks/VisualSection.js";
+import { useFontLoader as k } from "../../hooks/useFontLoader.js";
+import { useStyleLoader as E, VISUAL_EDITOR_SCOPE_CLASS as L } from "../../hooks/useStyleLoader.js";
+import { createEmptyDocument as S } from "../../lib/mjml/parser.js";
+function _(o) {
+  return o.tagName !== "mjml" ? !1 : o.children?.some((n) => n.tagName === "mj-body") ?? !1;
+}
+const v = 256, A = 300, m = 12, u = 24;
 function G({
-  leftPanelOpen: s,
-  rightPanelOpen: l
+  leftPanelOpen: o,
+  rightPanelOpen: n
 }) {
-  const { state: a, selectBlock: m } = b();
-  y(), _();
-  const o = a.document.children?.find((t) => t.tagName === "mj-body"), e = o?.attributes.width || "600px", u = o?.attributes["background-color"], h = (t) => {
-    t.target === t.currentTarget && m(null);
-  }, d = s ? E + i + c : 16, n = l ? L + i + c : 16, f = (parseInt(e, 10) || 600) + d + n;
-  return /* @__PURE__ */ r(
-    p,
+  const { state: d, selectBlock: h, setDocument: f } = x();
+  k(), E();
+  const b = () => {
+    f(S());
+  };
+  if (!_(d.document))
+    return /* @__PURE__ */ e(
+      a,
+      {
+        className: "h-full",
+        viewportStyle: { backgroundColor: "#ffffff" },
+        children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8 min-h-[400px]", children: /* @__PURE__ */ s("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6 max-w-md text-center", children: [
+          /* @__PURE__ */ e("p", { className: "text-red-700 font-medium mb-2", children: "Invalid MJML structure" }),
+          /* @__PURE__ */ e("p", { className: "text-red-600 text-sm mb-4", children: "The document is missing required elements like mj-body. Reset to a blank template to continue editing." }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: b,
+              className: "px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 transition-colors",
+              children: "Reset to blank template"
+            }
+          )
+        ] }) })
+      }
+    );
+  const r = d.document.children?.find((t) => t.tagName === "mj-body"), i = r?.attributes.width || "600px", p = r?.attributes["background-color"], g = (t) => {
+    t.target === t.currentTarget && h(null);
+  }, c = o ? v + m + u : 16, l = n ? A + m + u : 16, N = (parseInt(i, 10) || 600) + c + l;
+  return /* @__PURE__ */ e(
+    a,
     {
       className: "h-full",
       orientation: "both",
-      viewportStyle: { backgroundColor: u || "#ffffff" },
-      children: /* @__PURE__ */ r(
+      viewportStyle: { backgroundColor: p || "#ffffff" },
+      children: /* @__PURE__ */ e(
         "div",
         {
           className: "py-8",
           style: {
-            paddingLeft: d,
-            paddingRight: n,
-            minWidth: f
+            paddingLeft: c,
+            paddingRight: l,
+            minWidth: N
           },
-          onClick: h,
-          children: /* @__PURE__ */ g(
+          onClick: g,
+          children: /* @__PURE__ */ s(
             "div",
             {
-              className: `light mx-auto w-full ${A}`,
-              style: { maxWidth: e },
+              className: `light mx-auto w-full ${L}`,
+              style: { maxWidth: i },
               children: [
-                o?.children?.map((t) => /* @__PURE__ */ r(N, { node: t }, t._id)),
-                (!o?.children || o.children.length === 0) && /* @__PURE__ */ r("div", { className: "bg-surface rounded-lg border-2 border-dashed border-border p-12 text-center", children: /* @__PURE__ */ r("p", { className: "text-muted-foreground", children: "Add a section to get started" }) })
+                r?.children?.map((t) => /* @__PURE__ */ e(y, { node: t }, t._id)),
+                (!r?.children || r.children.length === 0) && /* @__PURE__ */ e("div", { className: "bg-zinc-100 rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center", children: /* @__PURE__ */ e("p", { className: "text-zinc-500", children: "Add a section to get started" }) })
               ]
             }
           )

package/dist/hooks/useFontLoader.d.ts

@@ -1,5 +1,6 @@
 /**
  * Hook that injects <link> tags into the document head for each mj-font.
+ * Also loads MJML's default Ubuntu font to match preview rendering.
  * This enables custom fonts to render in the visual editor.
  */
 export declare function useFontLoader(): void;

package/dist/hooks/useFontLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFontLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useFontLoader.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,aAAa,SA6C5B"}
+{"version":3,"file":"useFontLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useFontLoader.ts"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,wBAAgB,aAAa,SAgD5B"}

package/dist/hooks/useFontLoader.js

@@ -1,21 +1,24 @@
-import { useEffect as l } from "react";
-import { useEditor as m } from "../context/EditorContext.js";
-const t = "mjml-editor-font-";
-function d() {
-  const { fonts: c } = m();
-  l(() => (document.querySelectorAll(`link[id^="${t}"]`).forEach((e) => {
-    const o = e.id.replace(t, "").replace(/-/g, " ");
-    c.some(
-      (n) => n.name === o || n.name.replace(/\s+/g, "-") === e.id.replace(t, "")
+import { useMemo as m, useEffect as s } from "react";
+import { useEditor as a } from "../context/EditorContext.js";
+const o = "mjml-editor-font-", i = {
+  name: "Ubuntu",
+  href: "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"
+};
+function u() {
+  const { fonts: c } = a(), n = m(() => [i, ...c], [c]);
+  s(() => (document.querySelectorAll(`link[id^="${o}"]`).forEach((e) => {
+    const r = e.id.replace(o, "").replace(/-/g, " ");
+    n.some(
+      (l) => l.name === r || l.name.replace(/\s+/g, "-") === e.id.replace(o, "")
     ) || e.remove();
-  }), c.forEach((e) => {
-    const o = `${t}${e.name.replace(/\s+/g, "-")}`;
-    let r = document.getElementById(o);
-    r ? r.href !== e.href && (r.href = e.href) : (r = document.createElement("link"), r.id = o, r.rel = "stylesheet", r.href = e.href, document.head.appendChild(r));
+  }), n.forEach((e) => {
+    const r = `${o}${e.name.replace(/\s+/g, "-")}`;
+    let t = document.getElementById(r);
+    t ? t.href !== e.href && (t.href = e.href) : (t = document.createElement("link"), t.id = r, t.rel = "stylesheet", t.href = e.href, document.head.appendChild(t));
   }), () => {
-    document.querySelectorAll(`link[id^="${t}"]`).forEach((e) => e.remove());
-  }), [c]);
+    document.querySelectorAll(`link[id^="${o}"]`).forEach((e) => e.remove());
+  }), [n]);
 }
 export {
-  d as useFontLoader
+  u as useFontLoader
 };

package/dist/lib/mjml/renderer.js

@@ -9,24 +9,24 @@ function m(r) {
       ...r,
       children: r.children?.map(m)
     };
-  const t = r.attributes["mj-class"] || "", e = `block-${r._id}`, s = t ? `${t} ${e}` : e;
+  const t = r.attributes["mj-class"] || "", e = `block-${r._id}`, n = t ? `${t} ${e}` : e;
   return {
     ...r,
-    attributes: { ...r.attributes, "mj-class": s },
+    attributes: { ...r.attributes, "mj-class": n },
     children: r.children?.map(m)
   };
 }
-function g(r) {
-  return p(r);
+function p(r) {
+  return g(r);
 }
-function p(r, t = 0) {
-  const e = "  ".repeat(t), s = r.tagName, n = Object.entries(r.attributes || {}).filter(
-    ([a, l]) => a !== "_id" && l !== "" && l !== void 0
-  ).map(([a, l]) => `${a}="${h(l)}"`).join(" "), i = n ? `<${s} ${n}>` : `<${s}>`, c = `</${s}>`;
+function g(r, t = 0) {
+  const e = "  ".repeat(t), n = r.tagName, l = Object.entries(r.attributes || {}).filter(
+    ([a, s]) => a !== "_id" && s !== "" && s !== void 0
+  ).map(([a, s]) => `${a}="${h(s)}"`).join(" "), i = l ? `<${n} ${l}>` : `<${n}>`, c = `</${n}>`;
   if (r.content !== void 0)
     return `${e}${i}${r.content}${c}`;
   if (r.children && r.children.length > 0) {
-    const a = r.children.map((l) => p(l, t + 1)).join(`
+    const a = r.children.map((s) => g(s, t + 1)).join(`
 `);
     return `${e}${i}
 ${a}
@@ -48,23 +48,23 @@ async function $(r) {
     };
   } catch (t) {
     return console.error("MJML render error:", t), {
-      html: '<p style="color: red; padding: 20px;">Error rendering email preview</p>',
+      html: '<p style="color: #dc2626; padding: 20px; background: white; margin: 0;">Error rendering email preview</p>',
       errors: [{ line: 0, message: String(t), tagName: "mjml" }]
     };
   }
 }
 async function d(r) {
   try {
-    const t = await u(), e = m(r), s = g(e), n = t(s, {
+    const t = await u(), e = m(r), n = p(e), l = t(n, {
       validationLevel: "soft"
     });
     return {
-      html: n.html,
-      errors: n.errors || []
+      html: l.html,
+      errors: l.errors || []
     };
   } catch (t) {
     return console.error("MJML render error:", t), {
-      html: '<p style="color: red; padding: 20px;">Error rendering email preview</p>',
+      html: '<p style="color: #dc2626; padding: 20px; background: white; margin: 0;">Error rendering email preview</p>',
       errors: [{ line: 0, message: String(t), tagName: "mjml" }]
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvycal/mjml-editor",
-  "version": "0.0.3",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "repository": {