react-tailwind-email-editor 0.0.14 → 0.0.16

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import * as React10 from 'react';
-import React10__default, { createContext, useContext, useMemo, useEffect, useCallback, useState } from 'react';
+import * as React9 from 'react';
+import React9__default, { createContext, useContext, useMemo, useEffect, useCallback, useState } from 'react';
 import { useEditor, useNode, Element, Editor, Frame } from '@craftjs/core';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, X, ChevronRight, Check, Circle, Table, Variable, Quote, Tag, Timer, Share2, List, PlayCircle, MousePointer2, Image, Type, Minus, ArrowUpDown, Columns, LayoutTemplate, PanelBottom, PanelTop, Layers, ChevronUp, Copy, Trash2, Settings2, Paintbrush, Move, ArrowUp, Sun, Moon, Undo2, Redo2, Eye, Code, Download, Settings } from 'lucide-react';
+import { ChevronDown, Table, Variable, Quote, Tag, Timer, Share2, List, PlayCircle, MousePointer2, Image, Type, Minus, ArrowUpDown, LayoutTemplate, PanelBottom, PanelTop, Layers, ChevronUp, Copy, Trash2, Settings2, Paintbrush, Move, ArrowUp, Undo2, Redo2, Eye, Code, Check, Download, Settings } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -10,17 +10,14 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { createPortal } from 'react-dom';
 
 // src/components/editor/EmailEditor.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -29,7 +26,7 @@ var AccordionItem = React10.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -45,7 +42,7 @@ var AccordionTrigger = React10.forwardRef(({ className, children, ...props }, re
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -110,7 +107,7 @@ var ToolboxItem = ({ name, config }) => {
 };
 var Toolbox = () => {
   const { components } = useEditorConfig();
-  const grouped = React10__default.useMemo(() => {
+  const grouped = React9__default.useMemo(() => {
     const map = {};
     for (const [name, config] of Object.entries(components)) {
       const cat = config.category || "Other";
@@ -167,7 +164,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React10.forwardRef(
+var Button = React9.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -181,7 +178,7 @@ var Button = React10.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -195,7 +192,7 @@ var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React9.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -273,7 +270,7 @@ var SettingsPanel = () => {
     }
   };
   if (slots.settingsPanel && selected) {
-    return React10__default.createElement(slots.settingsPanel, {
+    return React9__default.createElement(slots.settingsPanel, {
       selectedId: selected.id,
       selectedName: selected.displayName || selected.name,
       //@ts-ignore
@@ -286,7 +283,7 @@ var SettingsPanel = () => {
   }
   if (!selected) {
     if (slots.settingsEmptyState) {
-      return React10__default.createElement(slots.settingsEmptyState);
+      return React9__default.createElement(slots.settingsEmptyState);
     }
     return /* @__PURE__ */ jsxs("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Layers, { className: "h-8 w-8 text-muted-foreground" }) }),
@@ -361,7 +358,7 @@ var SettingsPanel = () => {
         /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsx("span", { children: "Properties" })
       ] }) }),
-      /* @__PURE__ */ jsx(AccordionContent, { className: "pb-4", children: React10__default.createElement(selected.settings) })
+      /* @__PURE__ */ jsx(AccordionContent, { className: "pb-4", children: React9__default.createElement(selected.settings) })
     ] }) }) : /* @__PURE__ */ jsxs("div", { className: "text-center text-muted-foreground text-sm py-8", children: [
       /* @__PURE__ */ jsx(Paintbrush, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
       /* @__PURE__ */ jsx("p", { children: "No editable properties" })
@@ -1993,126 +1990,6 @@ SocialLinks.craft = {
     settings: SocialLinksSettings
   }
 };
-var TwoColumn = ({
-  leftWidth = 50,
-  gap = 20,
-  padding = 10,
-  backgroundColor = "#ffffff"
-}) => {
-  const { connectors: { connect, drag } } = useNode();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: (ref) => connect(drag(ref)),
-      style: {
-        display: "flex",
-        gap: `${gap}px`,
-        padding: `${padding}px`,
-        backgroundColor,
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { width: `${leftWidth}%` }, children: /* @__PURE__ */ jsx(Element, { id: "left-column", is: Container, canvas: true, background: "#f9f9f9", padding: 10 }) }),
-        /* @__PURE__ */ jsx("div", { style: { width: `${100 - leftWidth}%` }, children: /* @__PURE__ */ jsx(Element, { id: "right-column", is: Container, canvas: true, background: "#f9f9f9", padding: 10 }) })
-      ]
-    }
-  );
-};
-var TwoColumnSettings = () => {
-  const { actions: { setProp }, leftWidth, gap, padding, backgroundColor } = useNode((node) => ({
-    leftWidth: node.data.props.leftWidth,
-    gap: node.data.props.gap,
-    padding: node.data.props.padding,
-    backgroundColor: node.data.props.backgroundColor
-  }));
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Left Column Width" }),
-      /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          "Left: ",
-          leftWidth,
-          "%"
-        ] }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          "Right: ",
-          100 - (leftWidth || 50),
-          "%"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Gap" }),
-      /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        gap,
-        "px"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Padding" }),
-      /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        padding,
-        "px"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Background Color" }),
-      /* @__PURE__ */ 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,
@@ -3643,13 +3520,6 @@ var DEFAULT_COMPONENTS = {
     category: "Layout",
     createElement: () => /* @__PURE__ */ jsx(Element, { is: Container, canvas: true })
   },
-  TwoColumn: {
-    component: TwoColumn,
-    label: "Two Columns",
-    description: "Side-by-side layout",
-    icon: Columns,
-    category: "Layout"
-  },
   Spacer: {
     component: Spacer,
     label: "Spacer",
@@ -4094,7 +3964,7 @@ ${childrenHtml}
   return renderNode("ROOT");
 };
 var Tabs = TabsPrimitive.Root;
-var TabsList = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -4106,7 +3976,7 @@ var TabsList = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -4118,7 +3988,7 @@ var TabsTrigger = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -4130,308 +4000,303 @@ var TabsContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Dialog = DialogPrimitive.Root;
-var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.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__default.useRef(null);
+  const [closeHovered, setCloseHovered] = React9__default.useState(false);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  useEffect(() => {
+    if (open) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open && panelRef.current) panelRef.current.focus();
+  }, [open]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { style: { padding: "20px 24px 0 24px", flexShrink: 0 }, children: [
+                title && /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: "modal-title",
+                    style: {
+                      margin: 0,
+                      fontSize: "18px",
+                      fontWeight: 600,
+                      lineHeight: "1.4",
+                      color: "#111827"
+                    },
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: "modal-desc",
+                    style: {
+                      margin: "6px 0 0 0",
+                      fontSize: "14px",
+                      lineHeight: "1.5",
+                      color: "#6b7280"
+                    },
+                    children: description
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { padding: "16px 24px 24px 24px", overflowY: "auto", flex: 1 },
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
     ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
+    document.body
+  );
+};
+var Dropdown = ({
+  trigger,
+  label,
+  items,
+  align = "start"
+}) => {
+  const [open, setOpen] = useState(false);
+  const containerRef = React9__default.useRef(null);
+  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]);
+  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__ */ 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__ */ jsxs(DialogPrimitive.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__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
+        /* @__PURE__ */ jsx("div", { onClick: () => setOpen((v) => !v), children: trigger }),
+        open && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        height: "1px",
+                        backgroundColor: "#f3f4f6",
+                        margin: "4px 0"
+                      }
+                    },
+                    entry.key
+                  );
+                }
+                const item = entry;
+                return /* @__PURE__ */ jsx(
+                  DropdownItemRow,
+                  {
+                    item,
+                    onSelect: () => {
+                      item.onClick();
+                      setOpen(false);
+                    }
+                  },
+                  item.key
+                );
+              })
+            ]
+          }
+        )
       ]
     }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.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__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.Item.displayName;
-var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.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__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.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__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.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.Content.displayName;
-var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label2 = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label2.displayName = LabelPrimitive.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] = 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] = useState(false);
+  return /* @__PURE__ */ 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__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "gap-2 h-8 text-xs", children: [
-      /* @__PURE__ */ jsx(Paintbrush, { className: "h-3.5 w-3.5" }),
-      "Primary"
-    ] }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-64", align: "end", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx(Label2, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Primary Color" }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => applyColor(preset.hsl),
-          className: "group flex flex-col items-center gap-1",
-          title: preset.name,
-          children: [
-            /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: preset.name })
-          ]
-        },
-        preset.name
-      )) }),
-      /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-border", children: [
-        /* @__PURE__ */ jsx(Label2, { className: "text-xs text-muted-foreground mb-1.5 block", children: "Custom Color" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ 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__ */ 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,
@@ -4511,7 +4376,7 @@ var TopBar = ({
     }
   };
   if (slots.toolbar) {
-    return React10__default.createElement(slots.toolbar, {
+    return React9__default.createElement(slots.toolbar, {
       onExport: getHtml,
       onPreview: getHtml,
       onClear: handleClearCanvas,
@@ -4524,72 +4389,64 @@ var TopBar = ({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold text-foreground", children: title }) }),
         /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-border" }),
-        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              className: "gap-1.5 h-8 text-xs",
-              children: [
-                /* @__PURE__ */ jsx(LayoutTemplate, { className: "h-3.5 w-3.5" }),
-                "Templates"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [
-            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Quick Start Templates" }),
-            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            templates.map((template) => /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            align: "start",
+            label: "Quick Start Templates",
+            trigger: /* @__PURE__ */ jsxs(
+              Button,
               {
-                className: "gap-2",
-                onClick: () => handleLoadTemplate(template),
+                variant: "outline",
+                size: "sm",
+                className: "gap-1.5 h-8 text-xs",
                 children: [
-                  template.icon && React10__default.createElement(template.icon, {
-                    className: "h-4 w-4 text-muted-foreground"
+                  /* @__PURE__ */ jsx(LayoutTemplate, { className: "h-3.5 w-3.5" }),
+                  "Templates"
+                ]
+              }
+            ),
+            items: [
+              ...templates.map((template) => ({
+                key: template.id,
+                label: /* @__PURE__ */ jsxs(React9__default.Fragment, { children: [
+                  template.icon && React9__default.createElement(template.icon, {
+                    style: {
+                      width: 14,
+                      height: 14,
+                      color: "#9ca3af",
+                      flexShrink: 0
+                    }
                   }),
                   /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("div", { className: "font-medium", children: template.name }),
-                    template.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: template.description })
+                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: "13px" }, children: template.name }),
+                    template.description && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "11px",
+                          color: "#9ca3af",
+                          marginTop: 1
+                        },
+                        children: template.description
+                      }
+                    )
                   ] })
-                ]
-              },
-              template.id
-            )),
-            templates.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: onToggleDarkMode,
-            className: "gap-1.5 h-8 text-xs",
-            children: [
-              isDarkMode ? /* @__PURE__ */ jsx(Sun, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Moon, { className: "h-3.5 w-3.5" }),
-              isDarkMode ? "Light" : "Dark"
             ]
           }
-        ),
-        /* @__PURE__ */ jsx(
-          ColorCustomizer,
-          {
-            value: primaryColor,
-            onColorChange: onPrimaryColorChange
-          }
-        ),
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 bg-muted rounded-md p-0.5", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -4643,57 +4500,126 @@ var TopBar = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Dialog, { open: showCode, onOpenChange: setShowCode, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-4xl max-h-[80vh]", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: "Export HTML" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Copy this HTML code to use in your email client or system." })
-      ] }),
-      slots.exportDialog ? React10__default.createElement(slots.exportDialog, {
-        html: htmlCode,
-        onClose: () => setShowCode(false)
-      }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-2", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleCopy, children: [
-            copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }),
-            copied ? "Copied!" : "Copy"
+    /* @__PURE__ */ 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__default.createElement(slots.exportDialog, {
+          html: htmlCode,
+          onClose: () => setShowCode(false)
+        }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleCopy,
+                style: modalActionButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.background = "#f3f4f6",
+                onMouseLeave: (e) => e.currentTarget.style.background = "#ffffff",
+                children: [
+                  copied ? /* @__PURE__ */ jsx(Check, { size: 14, style: { marginRight: 6 } }) : /* @__PURE__ */ jsx(Copy, { size: 14, style: { marginRight: 6 } }),
+                  copied ? "Copied!" : "Copy"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleDownload,
+                style: modalActionButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.background = "#f3f4f6",
+                onMouseLeave: (e) => e.currentTarget.style.background = "#ffffff",
+                children: [
+                  /* @__PURE__ */ jsx(Download, { size: 14, style: { marginRight: 6 } }),
+                  "Download"
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [
-            /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
-            " Download"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(ScrollArea, { className: "h-[400px] border rounded-md", children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-xs font-mono whitespace-pre-wrap", children: htmlCode }) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: showPreview, onOpenChange: setShowPreview, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-5xl max-h-[90vh]", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { children: "Email Preview" }) }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Preview how your email will look in email clients." })
-      ] }),
-      slots.previewDialog ? React10__default.createElement(slots.previewDialog, {
-        html: htmlCode,
-        onClose: () => setShowPreview(false)
-      }) : /* @__PURE__ */ jsx(ScrollArea, { className: "h-[600px]", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `mx-auto transition-all duration-300 ${previewDevice === "mobile" ? "max-w-[375px]" : "max-w-full"}`,
-          children: /* @__PURE__ */ jsxs("div", { className: "border rounded-lg bg-muted/30 overflow-hidden", children: [
-            previewDevice === "mobile" && /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-1 bg-muted-foreground/30 rounded-full" }) }),
-            /* @__PURE__ */ jsx(
-              "iframe",
+          /* @__PURE__ */ jsx("div", { style: codeScrollStyle, children: /* @__PURE__ */ jsx("pre", { style: preStyle, children: htmlCode }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ 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__default.createElement(slots.previewDialog, {
+          html: htmlCode,
+          onClose: () => setShowPreview(false)
+        }) : /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", maxHeight: "600px" }, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              margin: "0 auto",
+              transition: "max-width 0.3s",
+              maxWidth: previewDevice === "mobile" ? "375px" : "100%"
+            },
+            children: /* @__PURE__ */ 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__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        height: "24px",
+                        background: "#f3f4f6",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            width: "64px",
+                            height: "4px",
+                            background: "rgba(107,114,128,0.3)",
+                            borderRadius: "9999px"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ 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 }) => {
@@ -4745,7 +4671,7 @@ var LeftSidebar = ({ setActiveTab, activeTab }) => {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "components", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full max-h-[180vh]  ", children: slots.toolbox ? React10__default.createElement(slots.toolbox, { components, categories }) : /* @__PURE__ */ jsx(Toolbox, {}) }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "components", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full max-h-[180vh]  ", children: slots.toolbox ? React9__default.createElement(slots.toolbox, { components, categories }) : /* @__PURE__ */ jsx(Toolbox, {}) }) }),
         /* @__PURE__ */ jsx(TabsContent, { value: "properties", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
       ]
     }
@@ -4906,6 +4832,6 @@ var EmailEditor = ({
   );
 };
 
-export { AVAILABLE_VARIABLES, Container, Countdown, DEFAULT_COMPONENTS, Divider, EditorProvider, EmailButton, EmailEditor, EmailFooter, EmailHeader, IconList, ImageBlock, InvoiceTable, Paper, PromoCode, RenderNode, SettingsPanel, SocialLinks, Spacer, Testimonial, TextBlock, Toolbox, TwoColumn, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };
+export { AVAILABLE_VARIABLES, Container, Countdown, DEFAULT_COMPONENTS, Divider, EditorProvider, EmailButton, EmailEditor, EmailFooter, EmailHeader, IconList, ImageBlock, InvoiceTable, Paper, PromoCode, RenderNode, SettingsPanel, SocialLinks, Spacer, Testimonial, TextBlock, Toolbox, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map