@savvycal/mjml-editor 0.0.2 → 0.0.3

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

package/dist/context/ThemeContext.js

@@ -1,53 +1,55 @@
 import { jsx as y } from "react/jsx-runtime";
-import { useState as i, useEffect as d, useCallback as h, useMemo as k, createContext as S, useContext as p } from "react";
-const a = S(null), u = "mjml-editor-theme";
-function E() {
+import { useState as d, useEffect as h, useCallback as a, useMemo as S, createContext as E, useContext as x } from "react";
+const u = E(null), l = "mjml-editor-theme";
+function p() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function x() {
+function C() {
   if (typeof window > "u") return "system";
-  const e = localStorage.getItem(u);
+  const e = localStorage.getItem(l);
   return e === "light" || e === "dark" || e === "system" ? e : "system";
 }
-function M({
+function P({
   children: e,
-  defaultTheme: l,
-  storageKey: s = u
+  defaultTheme: f,
+  storageKey: s = l,
+  applyToDocument: m = !0
 }) {
-  const [r, f] = i(
-    () => l ?? x()
-  ), [g, T] = i(E);
-  d(() => {
-    const t = window.matchMedia("(prefers-color-scheme: dark)"), c = (v) => {
-      T(v.matches ? "dark" : "light");
+  const [n, g] = d(
+    () => f ?? C()
+  ), [T, w] = d(p);
+  h(() => {
+    const t = window.matchMedia("(prefers-color-scheme: dark)"), c = (k) => {
+      w(k.matches ? "dark" : "light");
     };
     return t.addEventListener("change", c), () => t.removeEventListener("change", c);
   }, []);
-  const o = r === "system" ? g : r;
-  d(() => {
+  const r = n === "system" ? T : n;
+  h(() => {
+    if (!m) return;
     const t = document.documentElement;
-    t.classList.remove("light", "dark"), t.classList.add(o);
-  }, [o]);
-  const n = h(
+    t.classList.remove("light", "dark"), t.classList.add(r);
+  }, [r, m]);
+  const o = a(
     (t) => {
-      f(t), localStorage.setItem(s, t);
+      g(t), localStorage.setItem(s, t);
     },
     [s]
-  ), m = h(() => {
-    n(o === "light" ? "dark" : "light");
-  }, [o, n]), w = k(
-    () => ({ theme: r, resolvedTheme: o, setTheme: n, toggleTheme: m }),
-    [r, o, n, m]
+  ), i = a(() => {
+    o(r === "light" ? "dark" : "light");
+  }, [r, o]), v = S(
+    () => ({ theme: n, resolvedTheme: r, setTheme: o, toggleTheme: i }),
+    [n, r, o, i]
   );
-  return /* @__PURE__ */ y(a.Provider, { value: w, children: e });
+  return /* @__PURE__ */ y(u.Provider, { value: v, children: e });
 }
-function P() {
-  const e = p(a);
+function b() {
+  const e = x(u);
   if (!e)
     throw new Error("useTheme must be used within a ThemeProvider");
   return e;
 }
 export {
-  M as ThemeProvider,
-  P as useTheme
+  P as ThemeProvider,
+  b as useTheme
 };

package/dist/lib/mjml/renderer.d.ts

@@ -10,14 +10,14 @@ export interface RenderResult {
 /**
  * Render MJML JSON to HTML
  */
-export declare function renderMjml(document: MjmlNode): RenderResult;
+export declare function renderMjml(document: MjmlNode): Promise<RenderResult>;
 /**
  * Render MJML string to HTML
  */
-export declare function renderMjmlString(mjmlString: string): RenderResult;
+export declare function renderMjmlString(mjmlString: string): Promise<RenderResult>;
 /**
  * Render MJML JSON to HTML with block IDs preserved as CSS classes
  * This allows clicking elements in the preview to identify the source block
  */
-export declare function renderMjmlInteractive(document: MjmlNode): RenderResult;
+export declare function renderMjmlInteractive(document: MjmlNode): Promise<RenderResult>;
 //# sourceMappingURL=renderer.d.ts.map

package/dist/lib/mjml/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/lib/mjml/renderer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAkFD;;GAEG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,QAAQ,GAAG,YAAY,CAkB3D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,CAiBjE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,GAAG,YAAY,CAqBtE"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/lib/mjml/renderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AA6FD;;GAEG;AACH,wBAAsB,UAAU,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,CAmB1E;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CACpC,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,YAAY,CAAC,CAkBvB;AAED;;;GAGG;AACH,wBAAsB,qBAAqB,CACzC,QAAQ,EAAE,QAAQ,GACjB,OAAO,CAAC,YAAY,CAAC,CAsBvB"}