@savvycal/mjml-editor 0.0.2 → 0.1.0

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",

package/dist/components/ui/popover.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import * as e from "@radix-ui/react-popover";
-import { cn as n } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 function m({
   ...o
 }) {
@@ -24,8 +24,8 @@ function l({
       "data-slot": "popover-content",
       align: r,
       sideOffset: a,
-      className: n(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+      className: d(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-border p-4 shadow-md outline-hidden",
         o
       ),
       ...i

package/dist/components/ui/scroll-area.js

@@ -1,7 +1,7 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import "react";
 import * as o from "@radix-ui/react-scroll-area";
-import { cn as s } from "../../lib/utils.js";
+import { cn as i } from "../../lib/utils.js";
 function h({
   className: a,
   viewportClassName: l,
@@ -14,29 +14,29 @@ function h({
     o.Root,
     {
       "data-slot": "scroll-area",
-      className: s("relative", a),
+      className: i("relative", a),
       ...n,
       children: [
         /* @__PURE__ */ r(
           o.Viewport,
           {
             "data-slot": "scroll-area-viewport",
-            className: s(
-              "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            className: i(
+              "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:outline-ring/50",
               l
             ),
             style: t,
             children: c
           }
         ),
-        (e === "vertical" || e === "both") && /* @__PURE__ */ r(i, { orientation: "vertical" }),
-        (e === "horizontal" || e === "both") && /* @__PURE__ */ r(i, { orientation: "horizontal" }),
+        (e === "vertical" || e === "both") && /* @__PURE__ */ r(s, { orientation: "vertical" }),
+        (e === "horizontal" || e === "both") && /* @__PURE__ */ r(s, { orientation: "horizontal" }),
         /* @__PURE__ */ r(o.Corner, {})
       ]
     }
   );
 }
-function i({
+function s({
   className: a,
   orientation: l = "vertical",
   ...t
@@ -46,7 +46,7 @@ function i({
     {
       "data-slot": "scroll-area-scrollbar",
       orientation: l,
-      className: s(
+      className: i(
         "flex touch-none p-px transition-colors select-none",
         l === "vertical" && "h-full w-2.5 border-l border-l-transparent",
         l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
@@ -65,5 +65,5 @@ function i({
 }
 export {
   h as ScrollArea,
-  i as ScrollBar
+  s as ScrollBar
 };

package/dist/components/ui/select.js

@@ -48,7 +48,7 @@ function y({
     {
       "data-slot": "select-content",
       className: o(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md",
         r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         t
       ),

package/dist/components.css

@@ -0,0 +1,365 @@
+/**
+ * Component styles for @savvycal/mjml-editor
+ *
+ * Import this file in your app's CSS AFTER the preset and tailwindcss:
+ *
+ *   @import "@savvycal/mjml-editor/preset.css";
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "@savvycal/mjml-editor/components.css";
+ */
+
+/* Base CSS variable defaults at :root level */
+:root {
+  --radius: 0.5rem;
+
+  /* Core backgrounds */
+  --background: var(--color-white);
+  --background-subtle: var(--color-zinc-50);
+  --canvas: oklch(0.975 0.005 250);
+  --surface: var(--color-white);
+
+  /* Foregrounds */
+  --foreground: var(--color-zinc-950);
+  --foreground-muted: var(--color-zinc-600);
+  --foreground-subtle: var(--color-zinc-500);
+
+  /* Card/Popover */
+  --card: var(--color-white);
+  --card-foreground: var(--color-zinc-950);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-zinc-950);
+
+  /* Primary */
+  --primary: var(--color-zinc-900);
+  --primary-foreground: var(--color-zinc-50);
+
+  /* Secondary */
+  --secondary: var(--color-zinc-100);
+  --secondary-foreground: var(--color-zinc-900);
+
+  /* Muted */
+  --muted: var(--color-zinc-100);
+  --muted-foreground: var(--color-zinc-600);
+
+  /* Accent */
+  --accent: oklch(0.97 0.005 250);
+  --accent-foreground: var(--color-zinc-950);
+
+  /* Borders */
+  --border: var(--color-zinc-200);
+  --border-subtle: var(--color-zinc-200);
+  --border-strong: var(--color-zinc-300);
+
+  /* Focus/Selection */
+  --ring: oklch(0.55 0.15 250);
+  --selection: oklch(0.92 0.03 250);
+  --selection-foreground: oklch(0.35 0.12 250);
+  --input: var(--color-zinc-300);
+
+  /* Destructive */
+  --destructive: oklch(0.55 0.22 25);
+
+  /* Inspector */
+  --inspector: var(--color-zinc-50);
+  --inspector-header: var(--color-white);
+
+  /* Toolbar */
+  --toolbar: var(--color-white);
+  --toolbar-border: var(--color-zinc-200);
+
+  /* Block states */
+  --block-hover: oklch(0.97 0.02 250);
+  --block-selected: oklch(0.40 0.15 250);
+  --block-selected-bg: oklch(0.96 0.02 250);
+
+  /* Chart colors */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  /* Sidebar */
+  --sidebar: var(--color-zinc-50);
+  --sidebar-foreground: var(--color-zinc-950);
+  --sidebar-primary: var(--color-zinc-900);
+  --sidebar-primary-foreground: var(--color-zinc-50);
+  --sidebar-accent: var(--color-zinc-100);
+  --sidebar-accent-foreground: var(--color-zinc-900);
+  --sidebar-border: var(--color-zinc-200);
+  --sidebar-ring: oklch(0.55 0.15 250);
+}
+
+/* Dark mode at root level (for Radix UI portals that render outside .mjml-editor) */
+:root.dark, .dark {
+  --background: var(--color-zinc-950);
+  --background-subtle: var(--color-zinc-900);
+  --canvas: oklch(0.10 0.005 250);
+  --surface: var(--color-zinc-800);
+  --foreground: var(--color-zinc-50);
+  --foreground-muted: var(--color-zinc-400);
+  --foreground-subtle: var(--color-zinc-500);
+  --card: var(--color-zinc-900);
+  --card-foreground: var(--color-zinc-50);
+  --popover: var(--color-zinc-900);
+  --popover-foreground: var(--color-zinc-50);
+  --primary: var(--color-zinc-50);
+  --primary-foreground: var(--color-zinc-950);
+  --secondary: var(--color-zinc-800);
+  --secondary-foreground: var(--color-zinc-200);
+  --muted: var(--color-zinc-800);
+  --muted-foreground: var(--color-zinc-400);
+  --accent: var(--color-zinc-800);
+  --accent-foreground: var(--color-zinc-50);
+  --border: var(--color-zinc-700);
+  --border-subtle: var(--color-zinc-800);
+  --border-strong: var(--color-zinc-600);
+  --ring: oklch(0.60 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);
+  --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-selected-bg: oklch(0.22 0.04 250);
+  --chart-1: oklch(0.70 0.20 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-5: oklch(0.75 0.17 70);
+  --sidebar: var(--color-zinc-950);
+  --sidebar-foreground: var(--color-zinc-50);
+  --sidebar-primary: var(--color-zinc-50);
+  --sidebar-primary-foreground: var(--color-zinc-950);
+  --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);
+}
+
+/* Scoped CSS variable defaults - applied to .mjml-editor container */
+.mjml-editor {
+  --radius: 0.5rem;
+
+  /* Core backgrounds */
+  --background: var(--color-white);
+  --background-subtle: var(--color-zinc-50);
+  --canvas: oklch(0.975 0.005 250);
+  --surface: var(--color-white);
+
+  /* Foregrounds */
+  --foreground: var(--color-zinc-950);
+  --foreground-muted: var(--color-zinc-600);
+  --foreground-subtle: var(--color-zinc-500);
+
+  /* Card/Popover */
+  --card: var(--color-white);
+  --card-foreground: var(--color-zinc-950);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-zinc-950);
+
+  /* Primary */
+  --primary: var(--color-zinc-900);
+  --primary-foreground: var(--color-zinc-50);
+
+  /* Secondary */
+  --secondary: var(--color-zinc-100);
+  --secondary-foreground: var(--color-zinc-900);
+
+  /* Muted */
+  --muted: var(--color-zinc-100);
+  --muted-foreground: var(--color-zinc-600);
+
+  /* Accent */
+  --accent: oklch(0.97 0.005 250);
+  --accent-foreground: var(--color-zinc-950);
+
+  /* Borders */
+  --border: var(--color-zinc-200);
+  --border-subtle: var(--color-zinc-200);
+  --border-strong: var(--color-zinc-300);
+
+  /* Focus/Selection */
+  --ring: oklch(0.55 0.15 250);
+  --selection: oklch(0.92 0.03 250);
+  --selection-foreground: oklch(0.35 0.12 250);
+  --input: var(--color-zinc-300);
+
+  /* Destructive */
+  --destructive: oklch(0.55 0.22 25);
+
+  /* Inspector */
+  --inspector: var(--color-zinc-50);
+  --inspector-header: var(--color-white);
+
+  /* Toolbar */
+  --toolbar: var(--color-white);
+  --toolbar-border: var(--color-zinc-200);
+
+  /* Block states */
+  --block-hover: oklch(0.97 0.02 250);
+  --block-selected: oklch(0.40 0.15 250);
+  --block-selected-bg: oklch(0.96 0.02 250);
+
+  /* Chart colors */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  /* Sidebar */
+  --sidebar: var(--color-zinc-50);
+  --sidebar-foreground: var(--color-zinc-950);
+  --sidebar-primary: var(--color-zinc-900);
+  --sidebar-primary-foreground: var(--color-zinc-50);
+  --sidebar-accent: var(--color-zinc-100);
+  --sidebar-accent-foreground: var(--color-zinc-900);
+  --sidebar-border: var(--color-zinc-200);
+  --sidebar-ring: oklch(0.55 0.15 250);
+}
+
+/* Dark mode - when .mjml-editor has .dark class or is inside .dark */
+.mjml-editor.dark,
+.dark .mjml-editor {
+  /* Core backgrounds */
+  --background: var(--color-zinc-950);
+  --background-subtle: var(--color-zinc-900);
+  --canvas: oklch(0.10 0.005 250);
+  --surface: var(--color-zinc-800);
+
+  /* Foregrounds */
+  --foreground: var(--color-zinc-50);
+  --foreground-muted: var(--color-zinc-400);
+  --foreground-subtle: var(--color-zinc-500);
+
+  /* Card/Popover */
+  --card: var(--color-zinc-900);
+  --card-foreground: var(--color-zinc-50);
+  --popover: var(--color-zinc-900);
+  --popover-foreground: var(--color-zinc-50);
+
+  /* Primary - inverted */
+  --primary: var(--color-zinc-50);
+  --primary-foreground: var(--color-zinc-950);
+
+  /* Secondary */
+  --secondary: var(--color-zinc-800);
+  --secondary-foreground: var(--color-zinc-200);
+
+  /* Muted */
+  --muted: var(--color-zinc-800);
+  --muted-foreground: var(--color-zinc-400);
+
+  /* Accent */
+  --accent: var(--color-zinc-800);
+  --accent-foreground: var(--color-zinc-50);
+
+  /* Borders */
+  --border: var(--color-zinc-700);
+  --border-subtle: var(--color-zinc-800);
+  --border-strong: var(--color-zinc-600);
+
+  /* Focus/Selection */
+  --ring: oklch(0.60 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);
+
+  /* Inspector */
+  --inspector: var(--color-zinc-950);
+  --inspector-header: var(--color-zinc-900);
+
+  /* Toolbar */
+  --toolbar: var(--color-zinc-950);
+  --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-selected-bg: oklch(0.22 0.04 250);
+
+  /* Chart colors - adjusted for dark bg */
+  --chart-1: oklch(0.70 0.20 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-5: oklch(0.75 0.17 70);
+
+  /* Sidebar */
+  --sidebar: var(--color-zinc-950);
+  --sidebar-foreground: var(--color-zinc-50);
+  --sidebar-primary: var(--color-zinc-50);
+  --sidebar-primary-foreground: var(--color-zinc-950);
+  --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);
+}
+
+/* Force light mode within .light scope (e.g., email canvas preview) */
+.mjml-editor.dark .light,
+.dark .mjml-editor .light {
+  --background: var(--color-white);
+  --background-subtle: var(--color-zinc-50);
+  --canvas: oklch(0.975 0.005 250);
+  --surface: var(--color-white);
+  --foreground: var(--color-zinc-950);
+  --foreground-muted: var(--color-zinc-600);
+  --foreground-subtle: var(--color-zinc-500);
+  --card: var(--color-white);
+  --card-foreground: var(--color-zinc-950);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-zinc-950);
+  --primary: var(--color-zinc-900);
+  --primary-foreground: var(--color-zinc-50);
+  --secondary: var(--color-zinc-100);
+  --secondary-foreground: var(--color-zinc-900);
+  --muted: var(--color-zinc-100);
+  --muted-foreground: var(--color-zinc-600);
+  --accent: oklch(0.97 0.005 250);
+  --accent-foreground: var(--color-zinc-950);
+  --border: var(--color-zinc-200);
+  --border-subtle: var(--color-zinc-200);
+  --border-strong: var(--color-zinc-300);
+  --ring: oklch(0.55 0.15 250);
+  --selection: oklch(0.92 0.03 250);
+  --selection-foreground: oklch(0.35 0.12 250);
+  --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-bg: oklch(0.96 0.02 250);
+}
+
+/* Tiptap Editor Styles */
+.ProseMirror {
+  outline: none;
+}
+
+.ProseMirror p {
+  margin: 0;
+}
+
+.ProseMirror a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: text;
+}
+
+/* Liquid syntax highlighting */
+.liquid-highlight {
+  background-color: oklch(0.93 0.04 250);
+  border-radius: 3px;
+  padding: 1px 2px;
+  margin: 0 -2px;
+  pointer-events: none;
+}

package/dist/context/ThemeContext.d.ts

@@ -11,8 +11,19 @@ interface ThemeProviderProps {
     children: ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
+    /**
+     * Whether to apply the theme class to document.documentElement.
+     * This is needed for Radix UI portals (popovers, menus, etc.) which
+     * render outside the .mjml-editor container.
+     *
+     * Set to false if the host app manages document-level theme classes
+     * and you want to prevent conflicts.
+     *
+     * @default true
+     */
+    applyToDocument?: boolean;
 }
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, applyToDocument, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeContextValue;
 export {};
 //# sourceMappingURL=ThemeContext.d.ts.map

package/dist/context/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzC,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtC,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAsBD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,UAAwB,GACzB,EAAE,kBAAkB,2CA6CpB;AAGD,wBAAgB,QAAQ,sBAMvB"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzC,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtC,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAsBD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,UAAwB,EACxB,eAAsB,GACvB,EAAE,kBAAkB,2CAgDpB;AAGD,wBAAgB,QAAQ,sBAMvB"}