react-tailwind-email-editor 0.0.13 → 0.0.15

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React10 = require('react');
+var React9 = require('react');
 var core = require('@craftjs/core');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var lucideReact = require('lucide-react');
@@ -11,10 +11,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var DialogPrimitive = require('@radix-ui/react-dialog');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var PopoverPrimitive = require('@radix-ui/react-popover');
-var LabelPrimitive = require('@radix-ui/react-label');
+var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,21 +31,17 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
-var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 
 // src/components/editor/EmailEditor.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var Accordion = AccordionPrimitive__namespace.Root;
-var AccordionItem = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionItem = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Item,
   {
     ref,
@@ -57,7 +50,7 @@ var AccordionItem = React10__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
@@ -73,7 +66,7 @@ var AccordionTrigger = React10__namespace.forwardRef(({ className, children, ...
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionContent = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Content,
   {
     ref,
@@ -88,7 +81,7 @@ var defaultTheme = {
   paperMinHeight: 800,
   paperBackground: "#ffffff"
 };
-var EditorContext = React10.createContext({
+var EditorContext = React9.createContext({
   components: {},
   theme: defaultTheme,
   slots: {},
@@ -100,16 +93,16 @@ var EditorContext = React10.createContext({
   showToolbox: true,
   showSettingsPanel: true
 });
-var useEditorConfig = () => React10.useContext(EditorContext);
+var useEditorConfig = () => React9.useContext(EditorContext);
 var EditorProvider = ({
   children,
   value
 }) => {
-  const mergedTheme = React10.useMemo(
+  const mergedTheme = React9.useMemo(
     () => ({ ...defaultTheme, ...value.theme }),
     [value.theme]
   );
-  const ctx = React10.useMemo(
+  const ctx = React9.useMemo(
     () => ({ ...value, theme: mergedTheme }),
     [value, mergedTheme]
   );
@@ -138,7 +131,7 @@ var ToolboxItem = ({ name, config }) => {
 };
 var Toolbox = () => {
   const { components } = useEditorConfig();
-  const grouped = React10__namespace.default.useMemo(() => {
+  const grouped = React9__namespace.default.useMemo(() => {
     const map = {};
     for (const [name, config] of Object.entries(components)) {
       const cat = config.category || "Other";
@@ -195,7 +188,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React10__namespace.forwardRef(
+var Button = React9__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -209,7 +202,7 @@ var Button = React10__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ScrollArea = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ScrollArea = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
@@ -223,7 +216,7 @@ var ScrollArea = React10__namespace.forwardRef(({ className, children, ...props
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React10__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React9__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -301,7 +294,7 @@ var SettingsPanel = () => {
     }
   };
   if (slots.settingsPanel && selected) {
-    return React10__namespace.default.createElement(slots.settingsPanel, {
+    return React9__namespace.default.createElement(slots.settingsPanel, {
       selectedId: selected.id,
       selectedName: selected.displayName || selected.name,
       //@ts-ignore
@@ -314,7 +307,7 @@ var SettingsPanel = () => {
   }
   if (!selected) {
     if (slots.settingsEmptyState) {
-      return React10__namespace.default.createElement(slots.settingsEmptyState);
+      return React9__namespace.default.createElement(slots.settingsEmptyState);
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { className: "h-8 w-8 text-muted-foreground" }) }),
@@ -389,7 +382,7 @@ var SettingsPanel = () => {
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Properties" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "pb-4", children: React10__namespace.default.createElement(selected.settings) })
+      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "pb-4", children: React9__namespace.default.createElement(selected.settings) })
     ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-muted-foreground text-sm py-8", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paintbrush, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No editable properties" })
@@ -469,7 +462,7 @@ var RenderNode = ({ render }) => {
     deletable: query.node(node.id).isDeletable(),
     parent: node.data.parent
   }));
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (dom) {
       if (isActive || isHover) {
         dom.classList.add("component-selected");
@@ -478,19 +471,19 @@ var RenderNode = ({ render }) => {
       }
     }
   }, [dom, isActive, isHover]);
-  const getPos = React10.useCallback((dom2) => {
+  const getPos = React9.useCallback((dom2) => {
     const { top, left, bottom } = dom2 ? dom2.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 };
     return {
       top: `${top > 0 ? top : bottom}px`,
       left: `${left}px`
     };
   }, []);
-  const scroll = React10.useCallback(() => {
+  const scroll = React9.useCallback(() => {
     const currentDOM = dom;
     if (!currentDOM) return;
     const { top, left } = getPos(currentDOM);
   }, [dom, getPos]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     var _a;
     (_a = document.querySelector(".craftjs-renderer")) == null ? void 0 : _a.addEventListener("scroll", scroll);
     return () => {
@@ -2021,126 +2014,6 @@ SocialLinks.craft = {
     settings: SocialLinksSettings
   }
 };
-var TwoColumn = ({
-  leftWidth = 50,
-  gap = 20,
-  padding = 10,
-  backgroundColor = "#ffffff"
-}) => {
-  const { connectors: { connect, drag } } = core.useNode();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: (ref) => connect(drag(ref)),
-      style: {
-        display: "flex",
-        gap: `${gap}px`,
-        padding: `${padding}px`,
-        backgroundColor,
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: `${leftWidth}%` }, children: /* @__PURE__ */ jsxRuntime.jsx(core.Element, { id: "left-column", is: Container, canvas: true, background: "#f9f9f9", padding: 10 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: `${100 - leftWidth}%` }, children: /* @__PURE__ */ jsxRuntime.jsx(core.Element, { id: "right-column", is: Container, canvas: true, background: "#f9f9f9", padding: 10 }) })
-      ]
-    }
-  );
-};
-var TwoColumnSettings = () => {
-  const { actions: { setProp }, leftWidth, gap, padding, backgroundColor } = core.useNode((node) => ({
-    leftWidth: node.data.props.leftWidth,
-    gap: node.data.props.gap,
-    padding: node.data.props.padding,
-    backgroundColor: node.data.props.backgroundColor
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium mb-1", children: "Left Column Width" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min: 20,
-          max: 80,
-          value: leftWidth || 50,
-          onChange: (e) => setProp((props) => props.leftWidth = parseInt(e.target.value)),
-          className: "w-full"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Left: ",
-          leftWidth,
-          "%"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Right: ",
-          100 - (leftWidth || 50),
-          "%"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium mb-1", children: "Gap" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min: 0,
-          max: 40,
-          value: gap || 20,
-          onChange: (e) => setProp((props) => props.gap = parseInt(e.target.value)),
-          className: "w-full"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        gap,
-        "px"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium mb-1", children: "Padding" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min: 0,
-          max: 40,
-          value: padding || 10,
-          onChange: (e) => setProp((props) => props.padding = parseInt(e.target.value)),
-          className: "w-full"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        padding,
-        "px"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium mb-1", children: "Background Color" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "color",
-          value: backgroundColor || "#ffffff",
-          onChange: (e) => setProp((props) => props.backgroundColor = e.target.value),
-          className: "w-full h-10 rounded border cursor-pointer"
-        }
-      )
-    ] })
-  ] });
-};
-TwoColumn.craft = {
-  props: {
-    leftWidth: 50,
-    gap: 20,
-    padding: 10,
-    backgroundColor: "#ffffff"
-  },
-  related: {
-    settings: TwoColumnSettings
-  }
-};
 var Countdown = ({
   title = "Sale Ends In",
   days = 3,
@@ -3671,13 +3544,6 @@ var DEFAULT_COMPONENTS = {
     category: "Layout",
     createElement: () => /* @__PURE__ */ jsxRuntime.jsx(core.Element, { is: Container, canvas: true })
   },
-  TwoColumn: {
-    component: TwoColumn,
-    label: "Two Columns",
-    description: "Side-by-side layout",
-    icon: lucideReact.Columns,
-    category: "Layout"
-  },
   Spacer: {
     component: Spacer,
     label: "Spacer",
@@ -4122,7 +3988,7 @@ ${childrenHtml}
   return renderNode("ROOT");
 };
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -4134,7 +4000,7 @@ var TabsList = React10__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -4146,7 +4012,7 @@ var TabsTrigger = React10__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsContent = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Content,
   {
     ref,
@@ -4158,308 +4024,303 @@ var TabsContent = React10__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var Dialog = DialogPrimitive__namespace.Root;
-var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+var Modal = ({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  maxWidth = 672,
+  maxHeight = "85vh"
+}) => {
+  const panelRef = React9__namespace.default.useRef(null);
+  const [closeHovered, setCloseHovered] = React9__namespace.default.useState(false);
+  React9.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  React9.useEffect(() => {
+    if (open) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }
+  }, [open]);
+  React9.useEffect(() => {
+    if (open && panelRef.current) panelRef.current.focus();
+  }, [open]);
+  if (!open) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? "modal-title" : void 0,
+        "aria-describedby": description ? "modal-desc" : void 0,
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0,0,0,0.5)",
+          padding: "16px"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: panelRef,
+            tabIndex: -1,
+            style: {
+              position: "relative",
+              backgroundColor: "#ffffff",
+              borderRadius: "12px",
+              boxShadow: "0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.12)",
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              maxWidth: `${maxWidth}px`,
+              maxHeight,
+              overflowY: "auto",
+              outline: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  "aria-label": "Close modal",
+                  onMouseEnter: () => setCloseHovered(true),
+                  onMouseLeave: () => setCloseHovered(false),
+                  style: {
+                    position: "absolute",
+                    top: "14px",
+                    right: "14px",
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "8px",
+                    border: "none",
+                    background: closeHovered ? "#f3f4f6" : "transparent",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: closeHovered ? "#111827" : "#6b7280",
+                    fontSize: "18px",
+                    lineHeight: 1,
+                    padding: 0,
+                    flexShrink: 0,
+                    transition: "background 0.15s, color 0.15s"
+                  },
+                  children: "\u2715"
+                }
+              ),
+              (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px 24px 0 24px", flexShrink: 0 }, children: [
+                title && /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    id: "modal-title",
+                    style: {
+                      margin: 0,
+                      fontSize: "18px",
+                      fontWeight: 600,
+                      lineHeight: "1.4",
+                      color: "#111827"
+                    },
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    id: "modal-desc",
+                    style: {
+                      margin: "6px 0 0 0",
+                      fontSize: "14px",
+                      lineHeight: "1.5",
+                      color: "#6b7280"
+                    },
+                    children: description
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: { padding: "16px 24px 24px 24px", overflowY: "auto", flex: 1 },
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
     ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
+    document.body
+  );
+};
+var Dropdown = ({
+  trigger,
+  label,
+  items,
+  align = "start"
+}) => {
+  const [open, setOpen] = React9.useState(false);
+  const containerRef = React9__namespace.default.useRef(null);
+  React9.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a;
+      if (!((_a = containerRef.current) == null ? void 0 : _a.contains(e.target))) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  React9.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      ),
-      ...props,
+      ref: containerRef,
+      style: { position: "relative", display: "inline-block" },
       children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => setOpen((v) => !v), children: trigger }),
+        open && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "calc(100% + 6px)",
+              ...align === "end" ? { right: 0 } : { left: 0 },
+              zIndex: 9998,
+              minWidth: "224px",
+              backgroundColor: "#ffffff",
+              border: "1px solid #e5e7eb",
+              borderRadius: "8px",
+              boxShadow: "0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08)",
+              padding: "4px",
+              outline: "none"
+            },
+            children: [
+              label && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    padding: "6px 8px 4px 8px",
+                    fontSize: "11px",
+                    fontWeight: 600,
+                    color: "#9ca3af",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.06em"
+                  },
+                  children: label
+                }
+              ),
+              items.map((entry) => {
+                if ("separator" in entry && entry.separator) {
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        height: "1px",
+                        backgroundColor: "#f3f4f6",
+                        margin: "4px 0"
+                      }
+                    },
+                    entry.key
+                  );
+                }
+                const item = entry;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownItemRow,
+                  {
+                    item,
+                    onSelect: () => {
+                      item.onClick();
+                      setOpen(false);
+                    }
+                  },
+                  item.key
+                );
+              })
+            ]
+          }
+        )
       ]
     }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-var DialogHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
-var DropdownMenuSubTrigger = React10__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React10__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
-      className
-    ),
-    ...props
-  }
-) }));
-DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React10__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React10__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className
-    ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React10__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Label,
-  {
-    ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React10__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-var labelVariants = classVarianceAuthority.cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label2 = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  LabelPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label2.displayName = LabelPrimitive__namespace.Root.displayName;
-var COLOR_PRESETS = [
-  { name: "Blue", hsl: "222.2 47.4% 11.2%" },
-  { name: "Indigo", hsl: "243 75% 59%" },
-  { name: "Emerald", hsl: "160 84% 39%" },
-  { name: "Rose", hsl: "346 77% 50%" },
-  { name: "Amber", hsl: "32 95% 44%" },
-  { name: "Violet", hsl: "263 70% 50%" },
-  { name: "Cyan", hsl: "192 91% 36%" },
-  { name: "Slate", hsl: "215 20% 35%" }
-];
-var ColorCustomizer = ({ value, onColorChange }) => {
-  const [customColor, setCustomColor] = React10.useState("#1e293b");
-  const applyColor = (hsl) => {
-    onColorChange(hsl);
-  };
-  const hexToHsl = (hex) => {
-    const r = parseInt(hex.slice(1, 3), 16) / 255;
-    const g = parseInt(hex.slice(3, 5), 16) / 255;
-    const b = parseInt(hex.slice(5, 7), 16) / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    let h = 0;
-    let s = 0;
-    const l = (max + min) / 2;
-    if (max !== min) {
-      const d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-        case r:
-          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-          break;
-        case g:
-          h = ((b - r) / d + 2) / 6;
-          break;
-        case b:
-          h = ((r - g) / d + 4) / 6;
-          break;
-      }
+  );
+};
+var DropdownItemRow = ({ item, onSelect }) => {
+  const [hovered, setHovered] = React9.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: onSelect,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        width: "100%",
+        padding: "7px 8px",
+        fontSize: "13px",
+        fontWeight: 400,
+        borderRadius: "6px",
+        border: "none",
+        background: hovered ? "#f9fafb" : "transparent",
+        cursor: "pointer",
+        color: item.danger ? "#ef4444" : "#111827",
+        textAlign: "left",
+        transition: "background 0.1s"
+      },
+      children: item.label
     }
-    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: "gap-2 h-8 text-xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paintbrush, { className: "h-3.5 w-3.5" }),
-      "Primary"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64", align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Primary Color" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-2", children: COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => applyColor(preset.hsl),
-          className: "group flex flex-col items-center gap-1",
-          title: preset.name,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "w-8 h-8 rounded-full border-2 transition-all shadow-sm",
-                style: {
-                  backgroundColor: `hsl(${preset.hsl})`,
-                  borderColor: value === preset.hsl ? "hsl(var(--foreground))" : "transparent"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: preset.name })
-          ]
-        },
-        preset.name
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-2 border-t border-border", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: "text-xs text-muted-foreground mb-1.5 block", children: "Custom Color" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "color",
-              value: customColor,
-              onChange: (e) => {
-                setCustomColor(e.target.value);
-                applyColor(hexToHsl(e.target.value));
-              },
-              className: "w-10 h-8 rounded border border-border cursor-pointer bg-background"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: customColor })
-        ] })
-      ] })
-    ] }) })
-  ] });
+  );
+};
+var modalActionButtonStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "6px 12px",
+  fontSize: "13px",
+  fontWeight: 500,
+  borderRadius: "6px",
+  border: "1px solid #d1d5db",
+  background: "#ffffff",
+  cursor: "pointer",
+  color: "#374151",
+  transition: "background 0.15s"
+};
+var codeScrollStyle = {
+  height: "400px",
+  overflowY: "auto",
+  border: "1px solid #e5e7eb",
+  borderRadius: "6px"
+};
+var preStyle = {
+  padding: "16px",
+  fontSize: "12px",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  whiteSpace: "pre-wrap",
+  margin: 0,
+  color: "#111827"
 };
 var TopBar = ({
   isDarkMode,
@@ -4472,14 +4333,14 @@ var TopBar = ({
     canRedo: state.options.enabled && queryCtx.history.canRedo()
   }));
   const { title, logo, templates, callbacks, slots, htmlRenderers } = useEditorConfig();
-  const [showCode, setShowCode] = React10.useState(false);
-  const [showPreview, setShowPreview] = React10.useState(false);
-  const [copied, setCopied] = React10.useState(false);
-  const [htmlCode, setHtmlCode] = React10.useState("");
-  const [previewDevice, setPreviewDevice] = React10.useState(
+  const [showCode, setShowCode] = React9.useState(false);
+  const [showPreview, setShowPreview] = React9.useState(false);
+  const [copied, setCopied] = React9.useState(false);
+  const [htmlCode, setHtmlCode] = React9.useState("");
+  const [previewDevice, setPreviewDevice] = React9.useState(
     "desktop"
   );
-  const getHtml = React10.useCallback(() => {
+  const getHtml = React9.useCallback(() => {
     const json = query.serialize();
     const nodes = JSON.parse(json);
     return generateEmailHtml(nodes, htmlRenderers);
@@ -4539,7 +4400,7 @@ var TopBar = ({
     }
   };
   if (slots.toolbar) {
-    return React10__namespace.default.createElement(slots.toolbar, {
+    return React9__namespace.default.createElement(slots.toolbar, {
       onExport: getHtml,
       onPreview: getHtml,
       onClear: handleClearCanvas,
@@ -4552,72 +4413,64 @@ var TopBar = ({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm font-semibold text-foreground", children: title }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-px bg-border" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              className: "gap-1.5 h-8 text-xs",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { className: "h-3.5 w-3.5" }),
-                "Templates"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { children: "Quick Start Templates" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-            templates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(
-              DropdownMenuItem,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Dropdown,
+          {
+            align: "start",
+            label: "Quick Start Templates",
+            trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
               {
-                className: "gap-2",
-                onClick: () => handleLoadTemplate(template),
+                variant: "outline",
+                size: "sm",
+                className: "gap-1.5 h-8 text-xs",
                 children: [
-                  template.icon && React10__namespace.default.createElement(template.icon, {
-                    className: "h-4 w-4 text-muted-foreground"
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { className: "h-3.5 w-3.5" }),
+                  "Templates"
+                ]
+              }
+            ),
+            items: [
+              ...templates.map((template) => ({
+                key: template.id,
+                label: /* @__PURE__ */ jsxRuntime.jsxs(React9__namespace.default.Fragment, { children: [
+                  template.icon && React9__namespace.default.createElement(template.icon, {
+                    style: {
+                      width: 14,
+                      height: 14,
+                      color: "#9ca3af",
+                      flexShrink: 0
+                    }
                   }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: template.name }),
-                    template.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: template.description })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500, fontSize: "13px" }, children: template.name }),
+                    template.description && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "11px",
+                          color: "#9ca3af",
+                          marginTop: 1
+                        },
+                        children: template.description
+                      }
+                    )
                   ] })
-                ]
-              },
-              template.id
-            )),
-            templates.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenuItem,
+                ] }),
+                onClick: () => handleLoadTemplate(template)
+              })),
+              ...templates.length > 0 ? [{ key: "sep-clear", separator: true }] : [],
               {
+                key: "clear",
+                label: "Clear Canvas",
                 onClick: handleClearCanvas,
-                className: "text-destructive",
-                children: "Clear Canvas"
+                danger: true
               }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: onToggleDarkMode,
-            className: "gap-1.5 h-8 text-xs",
-            children: [
-              isDarkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-3.5 w-3.5" }),
-              isDarkMode ? "Light" : "Dark"
             ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ColorCustomizer,
-          {
-            value: primaryColor,
-            onColorChange: onPrimaryColorChange
-          }
-        ),
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 bg-muted rounded-md p-0.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -4671,57 +4524,126 @@ var TopBar = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: showCode, onOpenChange: setShowCode, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-4xl max-h-[80vh]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Export HTML" }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Copy this HTML code to use in your email client or system." })
-      ] }),
-      slots.exportDialog ? React10__namespace.default.createElement(slots.exportDialog, {
-        html: htmlCode,
-        onClose: () => setShowCode(false)
-      }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: handleCopy, children: [
-            copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-4 w-4 mr-2" }),
-            copied ? "Copied!" : "Copy"
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        open: showCode,
+        onClose: () => setShowCode(false),
+        title: "Export HTML",
+        description: "Copy this HTML code to use in your email client or system.",
+        maxWidth: 896,
+        maxHeight: "80vh",
+        children: slots.exportDialog ? React9__namespace.default.createElement(slots.exportDialog, {
+          html: htmlCode,
+          onClose: () => setShowCode(false)
+        }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px", marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleCopy,
+                style: modalActionButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.background = "#f3f4f6",
+                onMouseLeave: (e) => e.currentTarget.style.background = "#ffffff",
+                children: [
+                  copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, style: { marginRight: 6 } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 14, style: { marginRight: 6 } }),
+                  copied ? "Copied!" : "Copy"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleDownload,
+                style: modalActionButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.background = "#f3f4f6",
+                onMouseLeave: (e) => e.currentTarget.style.background = "#ffffff",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 14, style: { marginRight: 6 } }),
+                  "Download"
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4 mr-2" }),
-            " Download"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[400px] border rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-4 text-xs font-mono whitespace-pre-wrap", children: htmlCode }) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: showPreview, onOpenChange: setShowPreview, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-5xl max-h-[90vh]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Email Preview" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Preview how your email will look in email clients." })
-      ] }),
-      slots.previewDialog ? React10__namespace.default.createElement(slots.previewDialog, {
-        html: htmlCode,
-        onClose: () => setShowPreview(false)
-      }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[600px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `mx-auto transition-all duration-300 ${previewDevice === "mobile" ? "max-w-[375px]" : "max-w-full"}`,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg bg-muted/30 overflow-hidden", children: [
-            previewDevice === "mobile" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-1 bg-muted-foreground/30 rounded-full" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "iframe",
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: codeScrollStyle, children: /* @__PURE__ */ jsxRuntime.jsx("pre", { style: preStyle, children: htmlCode }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        open: showPreview,
+        onClose: () => setShowPreview(false),
+        title: "Email Preview",
+        description: "Preview how your email will look in email clients.",
+        maxWidth: 1024,
+        maxHeight: "90vh",
+        children: slots.previewDialog ? React9__namespace.default.createElement(slots.previewDialog, {
+          html: htmlCode,
+          onClose: () => setShowPreview(false)
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowY: "auto", maxHeight: "600px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              margin: "0 auto",
+              transition: "max-width 0.3s",
+              maxWidth: previewDevice === "mobile" ? "375px" : "100%"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                srcDoc: htmlCode,
-                className: "w-full min-h-[500px] bg-white",
-                title: "Email Preview",
                 style: {
-                  height: previewDevice === "mobile" ? "667px" : "600px"
-                }
+                  border: "1px solid #e5e7eb",
+                  borderRadius: "8px",
+                  background: "rgba(243,244,246,0.3)",
+                  overflow: "hidden"
+                },
+                children: [
+                  previewDevice === "mobile" && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        height: "24px",
+                        background: "#f3f4f6",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            width: "64px",
+                            height: "4px",
+                            background: "rgba(107,114,128,0.3)",
+                            borderRadius: "9999px"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "iframe",
+                    {
+                      srcDoc: htmlCode,
+                      title: "Email Preview",
+                      style: {
+                        width: "100%",
+                        minHeight: "500px",
+                        background: "#ffffff",
+                        border: "none",
+                        display: "block",
+                        height: previewDevice === "mobile" ? "667px" : "600px"
+                      }
+                    }
+                  )
+                ]
               }
             )
-          ] })
-        }
-      ) })
-    ] }) })
+          }
+        ) })
+      }
+    )
   ] });
 };
 var LeftSidebar = ({ setActiveTab, activeTab }) => {
@@ -4730,12 +4652,12 @@ var LeftSidebar = ({ setActiveTab, activeTab }) => {
     //@ts-ignore
     selectedNodeId: state.events.selected[0]
   }));
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (selectedNodeId) {
       setActiveTab("properties");
     }
   }, [selectedNodeId]);
-  const categories = React10.useMemo(() => {
+  const categories = React9.useMemo(() => {
     return Object.keys(components).reduce((acc, k) => {
       const cat = components[k].category || "Other";
       if (!acc.includes(cat)) acc.push(cat);
@@ -4773,7 +4695,7 @@ var LeftSidebar = ({ setActiveTab, activeTab }) => {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "components", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full max-h-[180vh]  ", children: slots.toolbox ? React10__namespace.default.createElement(slots.toolbox, { components, categories }) : /* @__PURE__ */ jsxRuntime.jsx(Toolbox, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "components", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full max-h-[180vh]  ", children: slots.toolbox ? React9__namespace.default.createElement(slots.toolbox, { components, categories }) : /* @__PURE__ */ jsxRuntime.jsx(Toolbox, {}) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "properties", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(SettingsPanel, {}) }) })
       ]
     }
@@ -4806,34 +4728,34 @@ var EmailEditor = ({
   style
 }) => {
   var _a, _b, _c, _d;
-  const mergedComponents = React10.useMemo(() => {
+  const mergedComponents = React9.useMemo(() => {
     if (replaceBuiltins) return userComponents || {};
     return { ...DEFAULT_COMPONENTS, ...userComponents || {} };
   }, [userComponents, replaceBuiltins]);
-  const [activeTab, setActiveTab] = React10.useState(
+  const [activeTab, setActiveTab] = React9.useState(
     "components"
   );
-  const resolver = React10.useMemo(() => {
+  const resolver = React9.useMemo(() => {
     const res = buildResolver(mergedComponents);
     res.Paper = Paper;
     return res;
   }, [mergedComponents]);
   const renderNodeFn = slots.renderNode || RenderNode;
-  const [isDarkMode, setIsDarkMode] = React10.useState(!darkMode);
-  const [primaryColor, setPrimaryColor] = React10.useState(
+  const [isDarkMode, setIsDarkMode] = React9.useState(!darkMode);
+  const [primaryColor, setPrimaryColor] = React9.useState(
     (_a = theme.colors) == null ? void 0 : _a.primary
   );
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     var _a2;
     setPrimaryColor((_a2 = theme.colors) == null ? void 0 : _a2.primary);
   }, [(_b = theme.colors) == null ? void 0 : _b.primary]);
-  const primaryForeground = React10.useMemo(() => {
+  const primaryForeground = React9.useMemo(() => {
     var _a2;
     if ((_a2 = theme.colors) == null ? void 0 : _a2.primaryForeground) return theme.colors.primaryForeground;
     if (!primaryColor) return void 0;
     return getReadablePrimaryForeground(primaryColor);
   }, [primaryColor, (_c = theme.colors) == null ? void 0 : _c.primaryForeground]);
-  const themeColorVars = React10.useMemo(() => {
+  const themeColorVars = React9.useMemo(() => {
     const colors = theme.colors || {};
     return {
       background: colors.background,
@@ -4846,7 +4768,7 @@ var EmailEditor = ({
       "canvas-background": colors.canvasBackground
     };
   }, [theme.colors]);
-  const editorStyle = React10.useMemo(() => {
+  const editorStyle = React9.useMemo(() => {
     const cssVars = { ...style || {} };
     Object.entries(themeColorVars).forEach(([token, value]) => {
       if (value) cssVars[`--${token}`] = value;
@@ -4956,7 +4878,6 @@ exports.Spacer = Spacer;
 exports.Testimonial = Testimonial;
 exports.TextBlock = TextBlock;
 exports.Toolbox = Toolbox;
-exports.TwoColumn = TwoColumn;
 exports.VariableText = VariableText;
 exports.VideoPlaceholder = VideoPlaceholder;
 exports.buildResolver = buildResolver;