@savvycal/mjml-editor 0.5.0 → 0.7.0

package/README.md

@@ -15,15 +15,15 @@ A React-based visual editor for MJML email templates. Built for embedding in app
 
 ## Supported Components
 
-| Component | Description |
-|-----------|-------------|
-| `mj-section` | Row containers with background color/image |
-| `mj-column` | Responsive columns within sections |
-| `mj-text` | Text content with typography settings |
-| `mj-image` | Images with dimensions, alt text, and links |
-| `mj-button` | Call-to-action buttons with styling |
-| `mj-divider` | Horizontal separators |
-| `mj-spacer` | Vertical spacing |
+| Component    | Description                                 |
+| ------------ | ------------------------------------------- |
+| `mj-section` | Row containers with background color/image  |
+| `mj-column`  | Responsive columns within sections          |
+| `mj-text`    | Text content with typography settings       |
+| `mj-image`   | Images with dimensions, alt text, and links |
+| `mj-button`  | Call-to-action buttons with styling         |
+| `mj-divider` | Horizontal separators                       |
+| `mj-spacer`  | Vertical spacing                            |
 
 ## Installation
 
@@ -48,20 +48,22 @@ This library is designed to work with Tailwind CSS v4. Instead of bundling all s
 Add the following imports to your app's main CSS file:
 
 ```css
-@import "@savvycal/mjml-editor/preset.css";
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "@savvycal/mjml-editor/components.css";
+@import '@savvycal/mjml-editor/preset.css';
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@savvycal/mjml-editor/components.css';
 ```
 
 **Note:** `preset.css` must come before `tailwindcss` so that `@theme` tokens are registered before Tailwind generates its utilities.
 
 The `preset.css` file includes:
+
 - `@source` directive that tells Tailwind to scan the library's dist files for utility classes (works with npm, yarn, and pnpm)
 - `@theme` tokens that map CSS variables to Tailwind utilities
 - Custom utilities (`bg-checkered`, `shadow-framer`, etc.)
 
 The `components.css` file includes:
+
 - Scoped CSS variables for the editor theme (light/dark mode)
 - Tiptap/ProseMirror editor styles
 
@@ -74,27 +76,23 @@ import { MjmlEditor } from '@savvycal/mjml-editor';
 function App() {
   const [mjml, setMjml] = useState(initialMjml);
 
-  return (
-    <MjmlEditor
-      value={mjml}
-      onChange={setMjml}
-    />
-  );
+  return <MjmlEditor value={mjml} onChange={setMjml} />;
 }
 ```
 
 ### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `string` | MJML markup string (required) |
-| `onChange` | `(mjml: string) => void` | Called when the document changes (required) |
-| `onSourceApply` | `(mjml: string) => void` | Called when Source tab **Apply** succeeds with valid MJML (optional) |
-| `className` | `string` | Optional CSS class for the container |
-| `defaultTheme` | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`) |
-| `liquidSchema` | `LiquidSchema` | Optional schema for Liquid template autocomplete |
-| `extensions` | `EditorExtensions` | Optional extensions for custom features beyond standard MJML |
-| `applyThemeToDocument` | `boolean` | Whether to apply theme class to `document.documentElement`. Needed for dropdown/popover theming. Set to `false` if your app manages document-level theme classes. (default: `true`) |
+| Prop                   | Type                            | Description                                                                                                                                                                         |
+| ---------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                | `string`                        | MJML markup string (required)                                                                                                                                                       |
+| `onChange`             | `(mjml: string) => void`        | Called when the document changes (required)                                                                                                                                         |
+| `className`            | `string`                        | Optional CSS class for the container                                                                                                                                                |
+| `defaultTheme`         | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`)                                                                                                                                              |
+| `liquidSchema`         | `LiquidSchema`                  | Optional schema for Liquid template autocomplete                                                                                                                                    |
+| `extensions`           | `EditorExtensions`              | Optional extensions for custom features beyond standard MJML                                                                                                                        |
+| `applyThemeToDocument` | `boolean`                       | Whether to apply theme class to `document.documentElement`. Needed for dropdown/popover theming. Set to `false` if your app manages document-level theme classes. (default: `true`) |
+
+When using the Source tab, valid MJML edits are applied automatically as you type.
 
 ## Liquid Template Support
 
@@ -120,11 +118,7 @@ function App() {
   const [mjml, setMjml] = useState(initialMjml);
 
   return (
-    <MjmlEditor
-      value={mjml}
-      onChange={setMjml}
-      liquidSchema={liquidSchema}
-    />
+    <MjmlEditor value={mjml} onChange={setMjml} liquidSchema={liquidSchema} />
   );
 }
 ```
@@ -160,11 +154,13 @@ function App() {
 Enables the `sc-if` attribute for server-side conditional rendering using Liquid expressions.
 
 When enabled:
+
 - A "Condition (Liquid)" field appears in the Advanced section of the inspector for all block types
 - Blocks with conditions display an "if" badge indicator in both the canvas and outline tree
 - The Advanced section auto-expands when a block has a condition
 
 **How it works:**
+
 - The `sc-if` attribute is preserved in the MJML output for server-side processing
 - The attribute is stripped from preview rendering to avoid MJML validation warnings
 - Your server processes the Liquid condition and conditionally renders the block
@@ -196,12 +192,12 @@ The library exports TypeScript types for integration:
 
 ```tsx
 import type {
-  MjmlNode,          // MJML document node structure
-  MjmlTagName,       // Union of supported MJML tag names
-  ContentBlockType,  // Union of content block types
-  EditorExtensions,  // Extensions configuration
-  LiquidSchema,      // Schema for Liquid autocomplete
-  LiquidSchemaItem,  // Individual variable/tag definition
+  MjmlNode, // MJML document node structure
+  MjmlTagName, // Union of supported MJML tag names
+  ContentBlockType, // Union of content block types
+  EditorExtensions, // Extensions configuration
+  LiquidSchema, // Schema for Liquid autocomplete
+  LiquidSchemaItem, // Individual variable/tag definition
 } from '@savvycal/mjml-editor';
 ```
 
@@ -217,13 +213,13 @@ interface EditorExtensions {
 
 ```typescript
 interface LiquidSchemaItem {
-  name: string;         // Variable or tag name (e.g., "user.name")
+  name: string; // Variable or tag name (e.g., "user.name")
   description?: string; // Description shown in autocomplete
 }
 
 interface LiquidSchema {
   variables: LiquidSchemaItem[]; // {{ variable }} syntax
-  tags: LiquidSchemaItem[];      // {% tag %} syntax
+  tags: LiquidSchemaItem[]; // {% tag %} syntax
 }
 ```
 
@@ -235,22 +231,22 @@ The library exports theme utilities if you need to integrate with or control the
 import { ThemeProvider, useTheme, ThemeToggle } from '@savvycal/mjml-editor';
 ```
 
-| Export | Description |
-|--------|-------------|
-| `ThemeProvider` | Context provider for theme management |
-| `useTheme()` | Hook returning `{ theme, setTheme }` |
-| `ThemeToggle` | Pre-built UI component for theme switching |
+| Export          | Description                                |
+| --------------- | ------------------------------------------ |
+| `ThemeProvider` | Context provider for theme management      |
+| `useTheme()`    | Hook returning `{ theme, setTheme }`       |
+| `ThemeToggle`   | Pre-built UI component for theme switching |
 
 Note: `MjmlEditor` includes its own `ThemeProvider`, so you don't need to wrap it. These exports are for advanced use cases where you need theme access outside the editor.
 
 ## Keyboard Shortcuts
 
-| Shortcut | Action |
-|----------|--------|
-| `Cmd/Ctrl + Z` | Undo |
-| `Cmd/Ctrl + Shift + Z` | Redo |
+| Shortcut               | Action                |
+| ---------------------- | --------------------- |
+| `Cmd/Ctrl + Z`         | Undo                  |
+| `Cmd/Ctrl + Shift + Z` | Redo                  |
 | `Delete` / `Backspace` | Delete selected block |
-| `Escape` | Deselect block |
+| `Escape`               | Deselect block        |
 
 ## Contributing
 

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

@@ -6,8 +6,7 @@ interface EditorCanvasProps {
     leftPanelOpen?: boolean;
     rightPanelOpen?: boolean;
     showThemeToggle?: boolean;
-    onSourceApply?: (mjml: string) => void;
 }
-export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, showThemeToggle, onSourceApply, }: 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;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAsB,EACtB,aAAa,GACd,EAAE,iBAAiB,2CAsLnB"}
+{"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,47 +1,31 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useState as s, useCallback as m } from "react";
-import { Monitor as z, Smartphone as j, Undo2 as P, Redo2 as R } from "lucide-react";
-import { VisualEditor as U } from "./VisualEditor.js";
-import { InteractivePreview as L } from "./InteractivePreview.js";
-import { SourceEditor as V } from "./SourceEditor.js";
-import { useEditor as Z } from "../../context/EditorContext.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+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 A, TabsList as B, TabsTrigger as g } from "../ui/tabs.js";
-import { ThemeToggle as H } from "../ui/theme-toggle.js";
-import { cn as u } from "../../lib/utils.js";
-function _({
-  activeTab: r,
-  onTabChange: d,
-  leftPanelOpen: x,
-  rightPanelOpen: v,
-  showThemeToggle: b = !0,
-  onSourceApply: N
+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 q({
+  activeTab: o,
+  onTabChange: t,
+  leftPanelOpen: a,
+  rightPanelOpen: l,
+  showThemeToggle: c = !0
 }) {
-  const { undo: w, redo: k, canUndo: C, canRedo: y } = Z(), [h, S] = s("desktop"), [f, p] = s(!1), [n, l] = s(null), [D, a] = s(!1), c = m(
-    (t) => {
-      if (t !== r) {
-        if (r === "source" && f) {
-          l(t), a(!0);
-          return;
-        }
-        d(t);
-      }
-    },
-    [r, f, d]
-  ), E = m(() => {
-    l(null), a(!1);
-  }, []), M = m(() => {
-    n && (p(!1), d(n)), l(null), a(!1);
-  }, [n, d]);
-  return /* @__PURE__ */ o("div", { className: "relative flex flex-col h-full", children: [
-    /* @__PURE__ */ o("div", { className: "h-11 px-4 flex items-center gap-1 border-b border-border bg-background relative", children: [
+  const { undo: m, redo: u, canUndo: h, canRedo: f } = E(), [n, p] = x("desktop");
+  return /* @__PURE__ */ r("div", { className: "relative 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(
         "button",
         {
-          onClick: () => c("edit"),
-          className: u(
+          onClick: () => t("edit"),
+          className: d(
             "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-            r === "edit" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+            o === "edit" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
           ),
           children: "Edit"
         }
@@ -49,10 +33,10 @@ function _({
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => c("preview"),
-          className: u(
+          onClick: () => t("preview"),
+          className: d(
             "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-            r === "preview" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+            o === "preview" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
           ),
           children: "Preview"
         }
@@ -60,44 +44,44 @@ function _({
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => c("source"),
-          className: u(
+          onClick: () => t("source"),
+          className: d(
             "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-            r === "source" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+            o === "source" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
           ),
           children: "Source"
         }
       ),
-      r === "preview" && /* @__PURE__ */ e(
-        A,
+      o === "preview" && /* @__PURE__ */ e(
+        S,
         {
-          value: h,
-          onValueChange: (t) => S(t),
+          value: n,
+          onValueChange: (g) => p(g),
           className: "absolute left-1/2 -translate-x-1/2",
-          children: /* @__PURE__ */ o(B, { className: "h-8", children: [
-            /* @__PURE__ */ o(g, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(z, { className: "h-3.5 w-3.5" }),
+          children: /* @__PURE__ */ r(M, { className: "h-8", children: [
+            /* @__PURE__ */ r(s, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
+              /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Desktop" })
             ] }),
-            /* @__PURE__ */ o(g, { value: "mobile", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(j, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ r(s, { value: "mobile", className: "h-7 px-2 gap-1.5", children: [
+              /* @__PURE__ */ e(N, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Mobile" })
             ] })
           ] })
         }
       ),
       /* @__PURE__ */ e("div", { className: "flex-1" }),
-      /* @__PURE__ */ o("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-0.5", children: [
         /* @__PURE__ */ e(
           i,
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: w,
-            disabled: !C,
+            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(P, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(b, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ e(
@@ -105,75 +89,29 @@ function _({
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: k,
-            disabled: !y,
+            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(R, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(w, { className: "h-4 w-4" })
           }
         ),
-        b && /* @__PURE__ */ e(H, {})
+        c && /* @__PURE__ */ e(P, {})
       ] })
     ] }),
-    /* @__PURE__ */ o("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
-      r === "edit" && /* @__PURE__ */ e(
-        U,
+    /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
+      o === "edit" && /* @__PURE__ */ e(
+        k,
         {
-          leftPanelOpen: x,
-          rightPanelOpen: v
+          leftPanelOpen: a,
+          rightPanelOpen: l
         }
       ),
-      r === "preview" && /* @__PURE__ */ e(L, { showHeader: !1, previewMode: h }),
-      r === "source" && /* @__PURE__ */ e(
-        V,
-        {
-          onApply: N,
-          onDirtyChange: p
-        }
-      )
-    ] }),
-    D && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ o(
-      "div",
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": "discard-source-title",
-        className: "w-full max-w-md rounded-lg border border-border bg-popover p-5 shadow-lg",
-        children: [
-          /* @__PURE__ */ e(
-            "h2",
-            {
-              id: "discard-source-title",
-              className: "text-base font-semibold text-foreground",
-              children: "Discard un-applied source changes?"
-            }
-          ),
-          /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-foreground-muted", children: "You have unsaved edits in Source. Leaving this tab will discard those changes." }),
-          /* @__PURE__ */ o("div", { className: "mt-5 flex justify-end gap-2", children: [
-            /* @__PURE__ */ e(
-              i,
-              {
-                variant: "outline",
-                size: "sm",
-                onClick: E,
-                children: "Keep Editing"
-              }
-            ),
-            /* @__PURE__ */ e(
-              i,
-              {
-                variant: "destructive",
-                size: "sm",
-                onClick: M,
-                children: "Discard Changes"
-              }
-            )
-          ] })
-        ]
-      }
-    ) })
+      o === "preview" && /* @__PURE__ */ e(C, { showHeader: !1, previewMode: n }),
+      o === "source" && /* @__PURE__ */ e(y, {})
+    ] })
   ] });
 }
 export {
-  _ as EditorCanvas
+  q as EditorCanvas
 };

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

@@ -3,11 +3,6 @@ import { LiquidSchema } from '../../types/liquid';
 interface MjmlEditorProps {
     value: string;
     onChange: (mjml: string) => void;
-    /**
-     * Called when Source tab "Apply" succeeds with valid MJML.
-     * Useful for triggering explicit save/persist actions.
-     */
-    onSourceApply?: (mjml: string) => void;
     className?: string;
     defaultTheme?: 'light' | 'dark' | 'system';
     liquidSchema?: LiquidSchema;
@@ -54,6 +49,6 @@ interface MjmlEditorProps {
      */
     defaultRightPanelOpen?: boolean;
 }
-export declare function MjmlEditor({ value, onChange, onSourceApply, className, defaultTheme, liquidSchema, extensions, applyThemeToDocument, showThemeToggle, defaultLeftPanelOpen, defaultRightPanelOpen, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, extensions, 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,EAAY,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC/D,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;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;;;;;;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;AAuKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,UAAU,EACV,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,GAC9B,EAAE,eAAe,2CAsDjB"}
+{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAY,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC/D,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;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;;;;;;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,UAAU,EACV,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,GAC9B,EAAE,eAAe,2CA8CjB"}

package/dist/components/editor/MjmlEditor.js

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

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

@@ -1,7 +1,2 @@
-interface SourceEditorProps {
-    onApply?: (mjml: string) => void;
-    onDirtyChange?: (isDirty: boolean) => void;
-}
-export declare function SourceEditor({ onApply, onDirtyChange }: SourceEditorProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function SourceEditor(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SourceEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourceEditor.tsx"],"names":[],"mappings":"AAoCA,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CAwIzE"}
+{"version":3,"file":"SourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourceEditor.tsx"],"names":[],"mappings":"AA0DA,wBAAgB,YAAY,4CAkH3B"}

package/dist/components/editor/SourceEditor.js

@@ -1,88 +1,110 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useState as d, useEffect as c, useCallback as u, useMemo as N } from "react";
-import { AlertTriangle as S } from "lucide-react";
-import j from "@uiw/react-codemirror";
-import { EditorState as E } from "@codemirror/state";
-import { indentUnit as k, bracketMatching as w, syntaxHighlighting as L, defaultHighlightStyle as K } from "@codemirror/language";
-import { lineNumbers as W, highlightActiveLineGutter as A, highlightActiveLine as C, EditorView as D, keymap as z } from "@codemirror/view";
-import { history as J, indentWithTab as P, defaultKeymap as H, historyKeymap as I } from "@codemirror/commands";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useState as f, useRef as g, useEffect as p, useCallback as v, useMemo as y } from "react";
+import k from "@uiw/react-codemirror";
+import { EditorState as N } from "@codemirror/state";
+import { indentUnit as M, bracketMatching as E, syntaxHighlighting as j, HighlightStyle as C } from "@codemirror/language";
+import { lineNumbers as w, highlightActiveLineGutter as L, highlightActiveLine as D, EditorView as W, keymap as R } from "@codemirror/view";
+import { history as z, indentWithTab as A, defaultKeymap as H, historyKeymap as K } from "@codemirror/commands";
 import { highlightSelectionMatches as T, searchKeymap as U } from "@codemirror/search";
-import { xml as F } from "@codemirror/lang-xml";
-import { useEditor as G } from "../../context/EditorContext.js";
-import { serializeMjml as b, parseMjml as R } from "../../lib/mjml/parser.js";
-import { ResizableSplitPane as V } from "../ui/resizable-split-pane.js";
-import { SourcePreview as Y } from "./SourcePreview.js";
-function se({ onApply: f, onDirtyChange: o }) {
-  const { state: h, setDocument: p } = G(), [i, g] = d(""), [l, r] = d(null), [a, m] = d(!1);
-  c(() => {
-    const e = b(h.document);
-    g(e), m(!1), r(null);
-  }, [h.document]);
-  const n = u(() => {
-    try {
-      const e = R(i);
-      if (e.tagName !== "mjml") {
-        r("Invalid MJML: Document must have an <mjml> root element");
-        return;
-      }
-      const M = b(e);
-      p(e), f?.(M), r(null), m(!1);
-    } catch (e) {
-      r(e instanceof Error ? e.message : "Failed to parse MJML");
+import { xml as _ } from "@codemirror/lang-xml";
+import { tags as t } from "@lezer/highlight";
+import { useEditor as B } from "../../context/EditorContext.js";
+import { serializeMjml as b, parseMjml as I } from "../../lib/mjml/parser.js";
+import { ResizableSplitPane as J } from "../ui/resizable-split-pane.js";
+import { SourcePreview as O } from "./SourcePreview.js";
+const P = 350, V = C.define([
+  {
+    tag: t.tagName,
+    color: "var(--cm-tag, oklch(0.74 0.1 158))",
+    fontWeight: "600"
+  },
+  {
+    tag: t.attributeName,
+    color: "var(--cm-attribute-name, oklch(0.76 0.09 80))"
+  },
+  {
+    tag: [t.attributeValue, t.string],
+    color: "var(--cm-attribute-value, oklch(0.77 0.1 255))"
+  },
+  {
+    tag: [t.angleBracket, t.bracket],
+    color: "var(--cm-punctuation, oklch(0.7 0.02 250))"
+  },
+  { tag: t.comment, color: "var(--cm-comment, oklch(0.63 0.01 250))" },
+  {
+    tag: t.invalid,
+    color: "var(--cm-invalid, oklch(0.7 0.16 25))",
+    textDecoration: "underline"
+  }
+]);
+function ae() {
+  const { state: s, setDocument: u } = B(), [o, d] = f(""), [a, i] = f(null), c = g(!1), l = g("");
+  p(() => {
+    if (c.current) {
+      c.current = !1;
+      return;
     }
-  }, [i, p, f]), x = N(
+    const e = b(s.document);
+    l.current = e, d(e), i(null);
+  }, [s.document]);
+  const h = v(
+    (e) => {
+      try {
+        const r = I(e);
+        if (r.tagName !== "mjml") {
+          i("Invalid MJML: Document must have an <mjml> root element");
+          return;
+        }
+        l.current = b(r), c.current = !0, u(r), i(null);
+      } catch (r) {
+        i(r instanceof Error ? r.message : "Failed to parse MJML");
+      }
+    },
+    [u]
+  ), x = y(
     () => [
-      W(),
-      A(),
-      C(),
-      J(),
-      E.tabSize.of(2),
-      k.of("  "),
       w(),
+      L(),
+      D(),
+      z(),
+      N.tabSize.of(2),
+      M.of("  "),
+      E(),
       T(),
-      L(K),
-      D.lineWrapping,
-      z.of([
-        P,
+      j(V),
+      W.lineWrapping,
+      R.of([
+        A,
         ...H,
-        ...I,
+        ...K,
         ...U
       ]),
-      F()
+      _()
     ],
     []
-  ), y = u((e) => {
-    g(e), m(!0), r(null);
-  }, []), v = u(
-    (e) => {
-      e.defaultPrevented || (e.metaKey || e.ctrlKey) && e.key === "Enter" && (e.preventDefault(), n());
-    },
-    [n]
-  );
-  return c(() => {
-    o?.(a);
-  }, [a, o]), c(
-    () => () => {
-      o?.(!1);
-    },
-    [o]
-  ), /* @__PURE__ */ s(
-    V,
+  ), S = v((e) => {
+    d(e), i(null);
+  }, []);
+  return p(() => {
+    if (o === l.current)
+      return;
+    const e = window.setTimeout(() => {
+      h(o);
+    }, P);
+    return () => window.clearTimeout(e);
+  }, [o, h]), /* @__PURE__ */ m(
+    J,
     {
       defaultLeftWidth: 50,
       minLeftWidth: 30,
       maxLeftWidth: 70,
       children: [
-        /* @__PURE__ */ s("div", { className: "flex flex-col h-full bg-background", children: [
-          /* @__PURE__ */ t("div", { className: "px-4 pt-4", children: /* @__PURE__ */ s("div", { className: "flex items-start gap-3 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800", children: [
-            /* @__PURE__ */ t(S, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }),
-            /* @__PURE__ */ t("p", { className: "text-sm", children: "You are editing the raw MJML source. Changes may affect the visual editor." })
-          ] }) }),
-          /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 p-4", onKeyDown: v, children: /* @__PURE__ */ t(
-            j,
+        /* @__PURE__ */ m("div", { className: "flex flex-col h-full bg-background", children: [
+          /* @__PURE__ */ n("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ n(
+            k,
             {
-              value: i,
-              onChange: y,
+              value: o,
+              onChange: S,
               extensions: x,
               basicSetup: !1,
               theme: "none",
@@ -91,25 +113,16 @@ function se({ onApply: f, onDirtyChange: o }) {
               spellCheck: !1
             }
           ) }),
-          /* @__PURE__ */ s("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
-            /* @__PURE__ */ t(
-              "button",
-              {
-                onClick: n,
-                disabled: !a,
-                className: "px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
-                children: "Apply"
-              }
-            ),
-            a && !l && /* @__PURE__ */ t("span", { className: "text-sm text-foreground-muted", children: "Unsaved changes" }),
-            l && /* @__PURE__ */ t("span", { className: "text-sm text-destructive", children: l })
+          /* @__PURE__ */ m("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
+            !a && /* @__PURE__ */ n("span", { className: "text-sm text-foreground-muted", children: "Changes sync automatically" }),
+            a && /* @__PURE__ */ n("span", { className: "text-sm text-destructive", children: a })
           ] })
         ] }),
-        /* @__PURE__ */ t(Y, { mjmlSource: i, debounceMs: 300 })
+        /* @__PURE__ */ n(O, { mjmlSource: o, debounceMs: 300 })
       ]
     }
   );
 }
 export {
-  se as SourceEditor
+  ae as SourceEditor
 };

package/dist/components.css

@@ -70,9 +70,21 @@
 
   /* Block states */
   --block-hover: oklch(0.97 0.02 250);
-  --block-selected: oklch(0.40 0.15 250);
+  --block-selected: oklch(0.4 0.15 250);
   --block-selected-bg: oklch(0.96 0.02 250);
 
+  /* Source editor syntax colors */
+  --cm-tag: oklch(0.56 0.11 158);
+  --cm-attribute-name: oklch(0.53 0.11 78);
+  --cm-attribute-value: oklch(0.53 0.11 255);
+  --cm-punctuation: oklch(0.46 0.02 250);
+  --cm-comment: oklch(0.57 0.01 250);
+  --cm-invalid: oklch(0.56 0.2 25);
+  --cm-caret: oklch(0.48 0.14 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 12%, transparent);
+
   /* Chart colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -92,10 +104,11 @@
 }
 
 /* Dark mode at root level (for Radix UI portals that render outside .mjml-editor) */
-:root.dark, .dark {
+:root.dark,
+.dark {
   --background: var(--color-zinc-950);
   --background-subtle: var(--color-zinc-900);
-  --canvas: oklch(0.10 0.005 250);
+  --canvas: oklch(0.1 0.005 250);
   --surface: var(--color-zinc-800);
   --foreground: var(--color-zinc-50);
   --foreground-muted: var(--color-zinc-400);
@@ -115,22 +128,32 @@
   --border: var(--color-zinc-700);
   --border-subtle: var(--color-zinc-800);
   --border-strong: var(--color-zinc-600);
-  --ring: oklch(0.60 0.15 250);
+  --ring: oklch(0.6 0.15 250);
   --selection: oklch(0.25 0.06 250);
   --selection-foreground: oklch(0.75 0.12 250);
   --input: var(--color-zinc-800);
-  --destructive: oklch(0.60 0.22 25);
+  --destructive: oklch(0.6 0.22 25);
   --inspector: var(--color-zinc-950);
   --inspector-header: var(--color-zinc-900);
   --toolbar: var(--color-zinc-950);
   --toolbar-border: var(--color-zinc-800);
-  --block-hover: oklch(0.20 0.03 250);
-  --block-selected: oklch(0.50 0.15 250);
+  --block-hover: oklch(0.2 0.03 250);
+  --block-selected: oklch(0.5 0.15 250);
   --block-selected-bg: oklch(0.22 0.04 250);
-  --chart-1: oklch(0.70 0.20 41);
+  --cm-tag: oklch(0.78 0.11 158);
+  --cm-attribute-name: oklch(0.81 0.1 80);
+  --cm-attribute-value: oklch(0.79 0.11 255);
+  --cm-punctuation: oklch(0.72 0.02 250);
+  --cm-comment: oklch(0.64 0.01 250);
+  --cm-invalid: oklch(0.72 0.17 25);
+  --cm-caret: oklch(0.82 0.11 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 44%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+  --chart-1: oklch(0.7 0.2 41);
   --chart-2: oklch(0.65 0.12 185);
-  --chart-3: oklch(0.50 0.08 227);
-  --chart-4: oklch(0.80 0.17 84);
+  --chart-3: oklch(0.5 0.08 227);
+  --chart-4: oklch(0.8 0.17 84);
   --chart-5: oklch(0.75 0.17 70);
   --sidebar: var(--color-zinc-950);
   --sidebar-foreground: var(--color-zinc-50);
@@ -139,7 +162,7 @@
   --sidebar-accent: var(--color-zinc-800);
   --sidebar-accent-foreground: var(--color-zinc-200);
   --sidebar-border: var(--color-zinc-800);
-  --sidebar-ring: oklch(0.60 0.15 250);
+  --sidebar-ring: oklch(0.6 0.15 250);
 }
 
 /* Scoped CSS variable defaults - applied to .mjml-editor container */
@@ -203,9 +226,21 @@
 
   /* Block states */
   --block-hover: oklch(0.97 0.02 250);
-  --block-selected: oklch(0.40 0.15 250);
+  --block-selected: oklch(0.4 0.15 250);
   --block-selected-bg: oklch(0.96 0.02 250);
 
+  /* Source editor syntax colors */
+  --cm-tag: oklch(0.56 0.11 158);
+  --cm-attribute-name: oklch(0.53 0.11 78);
+  --cm-attribute-value: oklch(0.53 0.11 255);
+  --cm-punctuation: oklch(0.46 0.02 250);
+  --cm-comment: oklch(0.57 0.01 250);
+  --cm-invalid: oklch(0.56 0.2 25);
+  --cm-caret: oklch(0.48 0.14 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 12%, transparent);
+
   /* Chart colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -230,7 +265,7 @@
   /* Core backgrounds */
   --background: var(--color-zinc-950);
   --background-subtle: var(--color-zinc-900);
-  --canvas: oklch(0.10 0.005 250);
+  --canvas: oklch(0.1 0.005 250);
   --surface: var(--color-zinc-800);
 
   /* Foregrounds */
@@ -266,13 +301,13 @@
   --border-strong: var(--color-zinc-600);
 
   /* Focus/Selection */
-  --ring: oklch(0.60 0.15 250);
+  --ring: oklch(0.6 0.15 250);
   --selection: oklch(0.25 0.06 250);
   --selection-foreground: oklch(0.75 0.12 250);
   --input: var(--color-zinc-800);
 
   /* Destructive */
-  --destructive: oklch(0.60 0.22 25);
+  --destructive: oklch(0.6 0.22 25);
 
   /* Inspector */
   --inspector: var(--color-zinc-950);
@@ -283,15 +318,27 @@
   --toolbar-border: var(--color-zinc-800);
 
   /* Block states */
-  --block-hover: oklch(0.20 0.03 250);
-  --block-selected: oklch(0.50 0.15 250);
+  --block-hover: oklch(0.2 0.03 250);
+  --block-selected: oklch(0.5 0.15 250);
   --block-selected-bg: oklch(0.22 0.04 250);
 
+  /* Source editor syntax colors */
+  --cm-tag: oklch(0.78 0.11 158);
+  --cm-attribute-name: oklch(0.81 0.1 80);
+  --cm-attribute-value: oklch(0.79 0.11 255);
+  --cm-punctuation: oklch(0.72 0.02 250);
+  --cm-comment: oklch(0.64 0.01 250);
+  --cm-invalid: oklch(0.72 0.17 25);
+  --cm-caret: oklch(0.82 0.11 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 44%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+
   /* Chart colors - adjusted for dark bg */
-  --chart-1: oklch(0.70 0.20 41);
+  --chart-1: oklch(0.7 0.2 41);
   --chart-2: oklch(0.65 0.12 185);
-  --chart-3: oklch(0.50 0.08 227);
-  --chart-4: oklch(0.80 0.17 84);
+  --chart-3: oklch(0.5 0.08 227);
+  --chart-4: oklch(0.8 0.17 84);
   --chart-5: oklch(0.75 0.17 70);
 
   /* Sidebar */
@@ -302,7 +349,7 @@
   --sidebar-accent: var(--color-zinc-800);
   --sidebar-accent-foreground: var(--color-zinc-200);
   --sidebar-border: var(--color-zinc-800);
-  --sidebar-ring: oklch(0.60 0.15 250);
+  --sidebar-ring: oklch(0.6 0.15 250);
 }
 
 /* Force light mode within .light scope (e.g., email canvas preview) */
@@ -336,23 +383,42 @@
   --input: var(--color-zinc-300);
   --destructive: oklch(0.55 0.22 25);
   --block-hover: oklch(0.97 0.02 250);
-  --block-selected: oklch(0.40 0.15 250);
+  --block-selected: oklch(0.4 0.15 250);
   --block-selected-bg: oklch(0.96 0.02 250);
 }
 
 /* Source editor (CodeMirror) */
 .mjml-editor .source-editor .cm-editor {
   height: 100%;
-  background: var(--muted);
+  background: color-mix(in oklab, var(--muted) 78%, var(--background) 22%);
   color: var(--foreground);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-  font-size: 0.875rem;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
 }
 
 .mjml-editor .source-editor .cm-scroller {
   font-family: inherit;
-  line-height: 1.5;
+  line-height: inherit;
+}
+
+.mjml-editor .source-editor .cm-content,
+.mjml-editor .source-editor .cm-gutterElement {
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: normal;
+  font-variant-ligatures: none;
+}
+
+.mjml-editor .source-editor .cm-content {
+  caret-color: var(--cm-caret);
+}
+
+.mjml-editor .source-editor .cm-line {
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 .mjml-editor .source-editor .cm-focused {
@@ -367,12 +433,16 @@
 
 .mjml-editor .source-editor .cm-activeLine,
 .mjml-editor .source-editor .cm-activeLineGutter {
-  background: color-mix(in oklab, var(--accent) 80%, transparent);
+  background: var(--cm-active-line-bg);
 }
 
 .mjml-editor .source-editor .cm-selectionBackground,
 .mjml-editor .source-editor .cm-content ::selection {
-  background: var(--selection);
+  background: var(--cm-selection-bg);
+}
+
+.mjml-editor .source-editor .cm-content ::selection {
+  color: var(--cm-selection-fg);
 }
 
 .mjml-editor .source-editor .cm-searchMatch {
@@ -389,8 +459,9 @@
   outline: 1px solid var(--border-strong);
 }
 
-.mjml-editor .source-editor .cm-cursor {
-  border-left-color: var(--foreground);
+.mjml-editor .source-editor .cm-cursor,
+.mjml-editor .source-editor .cm-dropCursor {
+  border-left-color: var(--cm-caret) !important;
 }
 
 /* Tiptap Editor Styles */

package/package.json

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