@savvycal/mjml-editor 0.0.2 → 0.0.3

package/README.md

@@ -35,26 +35,41 @@ pnpm add @savvycal/mjml-editor
 
 ### Peer Dependencies
 
-This library requires React 18 or 19:
+This library requires React 18+ and Tailwind CSS v4:
 
 ```bash
-npm install react react-dom
+npm install react react-dom tailwindcss @tailwindcss/vite tw-animate-css
 ```
 
 ### Styles
 
-You must import the library's CSS in your application:
+This library is designed to work with Tailwind CSS v4. Instead of bundling all styles, the library exports CSS files that integrate with your app's Tailwind build, ensuring no style conflicts and minimal CSS overhead.
 
-```tsx
-import '@savvycal/mjml-editor/styles.css';
+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";
 ```
 
+**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
+
 ## Usage
 
 ```tsx
 import { useState } from 'react';
 import { MjmlEditor } from '@savvycal/mjml-editor';
-import '@savvycal/mjml-editor/styles.css';
 
 function App() {
   const [mjml, setMjml] = useState(initialMjml);
@@ -77,6 +92,7 @@ function App() {
 | `className` | `string` | Optional CSS class for the container |
 | `defaultTheme` | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`) |
 | `liquidSchema` | `LiquidSchema` | Optional schema for Liquid template autocomplete |
+| `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`) |
 
 ## Liquid Template Support
 
@@ -84,7 +100,6 @@ The editor provides autocomplete for Liquid template variables and tags. Pass a
 
 ```tsx
 import { MjmlEditor, type LiquidSchema } from '@savvycal/mjml-editor';
-import '@savvycal/mjml-editor/styles.css';
 
 const liquidSchema: LiquidSchema = {
   variables: [

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,2CAoKzB"}
+{"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"}

package/dist/components/editor/InteractivePreview.js

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

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

@@ -5,7 +5,18 @@ interface MjmlEditorProps {
     className?: string;
     defaultTheme?: 'light' | 'dark' | 'system';
     liquidSchema?: LiquidSchema;
+    /**
+     * Whether to apply the theme class to document.documentElement.
+     * This is needed for Radix UI portals (popovers, menus, etc.) which
+     * render outside the editor container.
+     *
+     * Set to false if your app manages document-level theme classes
+     * and you want to prevent conflicts.
+     *
+     * @default true
+     */
+    applyThemeToDocument?: boolean;
 }
-export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, applyThemeToDocument, }: 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;CAC7B;AA4HD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,GACb,EAAE,eAAe,2CAuBjB"}
+{"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"}

package/dist/components/editor/MjmlEditor.js

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

package/dist/components/editor/SourceEditor.js

@@ -42,7 +42,7 @@ function E() {
             {
               value: a,
               onChange: (e) => f(e.target.value),
-              className: "w-full h-full p-4 font-mono text-sm bg-muted border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring",
+              className: "w-full h-full p-4 font-mono text-sm bg-muted text-foreground border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring",
               spellCheck: !1
             }
           ) }),

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,2CAkEpB"}
+{"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"}

package/dist/components/editor/SourcePreview.js

@@ -1,24 +1,38 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useRef as f, useState as u, useEffect as m, useMemo as b } from "react";
+import { useRef as h, useState as f, useEffect as a } from "react";
 import { renderMjmlString as x } from "../../lib/mjml/renderer.js";
-function v({
+function w({
   mjmlSource: s,
-  debounceMs: i = 300
+  debounceMs: c = 300
 }) {
-  const o = f(null), [l, c] = u(s);
-  m(() => {
+  const l = h(null), [o, u] = f(s), [b, m] = f({
+    html: "",
+    errors: []
+  });
+  a(() => {
     const e = setTimeout(() => {
-      c(s);
-    }, i);
+      u(s);
+    }, c);
     return () => clearTimeout(e);
-  }, [s, i]);
-  const { html: a, errors: t } = b(() => l.trim() ? x(l) : { html: "", errors: [] }, [l]);
-  return m(() => {
-    if (o.current) {
-      const e = o.current.contentDocument;
-      e && (e.open(), e.write(a), e.close());
+  }, [s, c]), a(() => {
+    if (!o.trim()) {
+      m({ html: "", errors: [] });
+      return;
     }
-  }, [a]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+    let e = !1;
+    return x(o).then((i) => {
+      e || m(i);
+    }), () => {
+      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());
+    }
+  }, [d]), /* @__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: [
@@ -30,7 +44,7 @@ function v({
     /* @__PURE__ */ n("div", { className: "flex-1 overflow-auto bg-muted", children: /* @__PURE__ */ n(
       "iframe",
       {
-        ref: o,
+        ref: l,
         title: "Source Preview",
         className: "w-full h-full border-0 bg-white",
         sandbox: "allow-same-origin"
@@ -38,7 +52,7 @@ function v({
     ) }),
     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, d) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
+      /* @__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,
@@ -46,10 +60,10 @@ function v({
         ] }),
         " ",
         e.message
-      ] }, d)) })
+      ] }, i)) })
     ] })
   ] });
 }
 export {
-  v as SourcePreview
+  w as SourcePreview
 };

package/dist/components/ui/badge.js

@@ -10,7 +10,7 @@ const i = n(
         default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
         secondary: "border-transparent bg-muted text-foreground hover:bg-muted/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground"
+        outline: "border-border text-foreground"
       }
     },
     defaultVariants: {
@@ -18,8 +18,8 @@ const i = n(
     }
   }
 );
-function m({ className: r, variant: t, ...e }) {
-  return /* @__PURE__ */ o("div", { className: a(i({ variant: t }), r), ...e });
+function m({ className: r, variant: e, ...t }) {
+  return /* @__PURE__ */ o("div", { className: a(i({ variant: e }), r), ...t });
 }
 export {
   m as Badge

package/dist/components/ui/button.js

@@ -10,9 +10,9 @@ const u = a(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-white hover:bg-destructive/90",
-        outline: "border border-border bg-background hover:bg-accent hover:border-border",
+        outline: "border border-border bg-background text-foreground hover:bg-accent hover:border-border",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {

package/dist/components/ui/floating-panel.js

@@ -1,18 +1,18 @@
 import { jsx as o } from "react/jsx-runtime";
 import "react";
-import { PanelLeft as f, PanelRight as d } from "lucide-react";
+import { PanelLeft as f, PanelRight as u } from "lucide-react";
 import { cn as n } from "../../lib/utils.js";
 function c({
   side: t,
   onClick: e
 }) {
-  const r = t === "left" ? f : d;
+  const r = t === "left" ? f : u;
   return /* @__PURE__ */ o(
     "button",
     {
       onClick: e,
       className: n(
-        "fixed top-14 z-40",
+        "absolute top-14 z-40",
         "h-8 w-8 rounded-md",
         "flex items-center justify-center",
         "text-foreground-muted hover:text-foreground hover:bg-accent/50",
@@ -24,31 +24,31 @@ function c({
     }
   );
 }
-function g({
+function h({
   children: t,
   side: e,
   isOpen: r,
   onToggle: l,
-  width: i,
-  className: a
+  width: a,
+  className: i
 }) {
   return r ? /* @__PURE__ */ o(
     "div",
     {
       className: n(
-        "fixed top-14 bottom-3 z-40",
-        "bg-background border border-border rounded-lg",
+        "absolute top-14 bottom-3 z-40",
+        "bg-background text-foreground border border-border rounded-lg",
         "shadow-lg",
         "flex flex-col overflow-hidden",
         "transition-all duration-150 ease-out",
         e === "left" ? "left-3" : "right-3",
-        a
+        i
       ),
-      style: { width: i },
+      style: { width: a },
       children: t
     }
   ) : /* @__PURE__ */ o(c, { side: e, onClick: l });
 }
 export {
-  g as FloatingPanel
+  h as FloatingPanel
 };

package/dist/components/ui/input.js

@@ -10,7 +10,7 @@ function a({ className: o, type: r, ...t }) {
       autoComplete: "off",
       "data-1p-ignore": !0,
       className: n(
-        "h-9 w-full min-w-0 rounded-md border border-border bg-background px-3 py-1 text-sm",
+        "h-9 w-full min-w-0 rounded-md border border-border bg-background text-foreground px-3 py-1 text-sm",
         "placeholder:text-foreground-muted",
         "transition-smooth",
         "focus:border-ring focus:ring-2 focus:ring-ring/20 focus:outline-none",