react-tailwind-email-editor 0.0.6 → 0.0.7

package/dist/index.mjs

@@ -1,23 +1,26 @@
-import * as React9 from 'react';
-import React9__default, { createContext, useContext, useMemo, useEffect, useCallback, useState } from 'react';
+import * as React10 from 'react';
+import React10__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, Palette, Settings, Undo2, Redo2, Eye, Code, Download } from 'lucide-react';
+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 { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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';
 
 // src/components/editor/EmailEditor.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -26,7 +29,7 @@ var AccordionItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -42,7 +45,7 @@ var AccordionTrigger = React9.forwardRef(({ className, children, ...props }, ref
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -64,13 +67,16 @@ var EditorContext = createContext({
   templates: [],
   callbacks: {},
   htmlRenderers: {},
-  title: "Email Editor",
+  title: "",
   showToolbar: true,
   showToolbox: true,
   showSettingsPanel: true
 });
 var useEditorConfig = () => useContext(EditorContext);
-var EditorProvider = ({ children, value }) => {
+var EditorProvider = ({
+  children,
+  value
+}) => {
   const mergedTheme = useMemo(
     () => ({ ...defaultTheme, ...value.theme }),
     [value.theme]
@@ -104,7 +110,7 @@ var ToolboxItem = ({ name, config }) => {
 };
 var Toolbox = () => {
   const { components } = useEditorConfig();
-  const grouped = React9__default.useMemo(() => {
+  const grouped = React10__default.useMemo(() => {
     const map = {};
     for (const [name, config] of Object.entries(components)) {
       const cat = config.category || "Other";
@@ -114,7 +120,7 @@ var Toolbox = () => {
     return map;
   }, [components]);
   const categoryKeys = Object.keys(grouped);
-  return /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(Accordion, { type: "multiple", defaultValue: categoryKeys, children: categoryKeys.map((category, idx) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(Accordion, { type: "multiple", defaultValue: categoryKeys, children: categoryKeys.map((category, idx) => /* @__PURE__ */ jsxs(
     AccordionItem,
     {
       value: category,
@@ -161,7 +167,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React9.forwardRef(
+var Button = React10.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -175,7 +181,7 @@ var Button = React9.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ScrollArea = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -189,7 +195,7 @@ var ScrollArea = React9.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React9.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -267,7 +273,7 @@ var SettingsPanel = () => {
     }
   };
   if (slots.settingsPanel && selected) {
-    return React9__default.createElement(slots.settingsPanel, {
+    return React10__default.createElement(slots.settingsPanel, {
       selectedId: selected.id,
       selectedName: selected.displayName || selected.name,
       //@ts-ignore
@@ -280,7 +286,7 @@ var SettingsPanel = () => {
   }
   if (!selected) {
     if (slots.settingsEmptyState) {
-      return React9__default.createElement(slots.settingsEmptyState);
+      return React10__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" }) }),
@@ -355,7 +361,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: React9__default.createElement(selected.settings) })
+      /* @__PURE__ */ jsx(AccordionContent, { className: "pb-4", children: React10__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" })
@@ -4087,9 +4093,46 @@ ${childrenHtml}
   };
   return renderNode("ROOT");
 };
+var Tabs = TabsPrimitive.Root;
+var TabsList = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -4101,7 +4144,7 @@ var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -4137,7 +4180,7 @@ var DialogHeader = ({
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -4149,7 +4192,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -4160,7 +4203,7 @@ var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React9.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4177,7 +4220,7 @@ var DropdownMenuSubTrigger = React9.forwardRef(({ className, inset, children, ..
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -4189,7 +4232,7 @@ var DropdownMenuSubContent = React9.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React9.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4202,7 +4245,7 @@ var DropdownMenuContent = React9.forwardRef(({ className, sideOffset = 4, ...pro
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -4215,7 +4258,7 @@ var DropdownMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React9.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -4232,7 +4275,7 @@ var DropdownMenuCheckboxItem = React9.forwardRef(({ className, children, checked
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -4248,7 +4291,7 @@ var DropdownMenuRadioItem = React9.forwardRef(({ className, children, ...props }
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4261,7 +4304,7 @@ var DropdownMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4270,10 +4313,135 @@ var DropdownMenuSeparator = React9.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var TopBar = () => {
-  const { actions, query, canUndo, canRedo } = useEditor((state, query2) => ({
-    canUndo: state.options.enabled && query2.history.canUndo(),
-    canRedo: state.options.enabled && query2.history.canRedo()
+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;
+      }
+    }
+    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 TopBar = ({
+  isDarkMode,
+  onToggleDarkMode,
+  primaryColor,
+  onPrimaryColorChange
+}) => {
+  const { actions, query, canUndo, canRedo } = useEditor((state, queryCtx) => ({
+    canUndo: state.options.enabled && queryCtx.history.canUndo(),
+    canRedo: state.options.enabled && queryCtx.history.canRedo()
   }));
   const { title, logo, templates, callbacks, slots, htmlRenderers } = useEditorConfig();
   const [showCode, setShowCode] = useState(false);
@@ -4343,7 +4511,7 @@ var TopBar = () => {
     }
   };
   if (slots.toolbar) {
-    return React9__default.createElement(slots.toolbar, {
+    return React10__default.createElement(slots.toolbar, {
       onExport: getHtml,
       onPreview: getHtml,
       onClear: handleClearCanvas,
@@ -4352,21 +4520,23 @@ var TopBar = () => {
     });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-background", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          logo || /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center", children: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4 text-primary-foreground" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold leading-tight", children: title }),
-            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "Drag & Drop Builder" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-border" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-border bg-background", children: [
+      /* @__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-2", children: [
-            /* @__PURE__ */ jsx(LayoutTemplate, { className: "h-4 w-4" }),
-            "Templates"
-          ] }) }),
+          /* @__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, {}),
@@ -4376,7 +4546,7 @@ var TopBar = () => {
                 className: "gap-2",
                 onClick: () => handleLoadTemplate(template),
                 children: [
-                  template.icon && React9__default.createElement(template.icon, {
+                  template.icon && React10__default.createElement(template.icon, {
                     className: "h-4 w-4 text-muted-foreground"
                   }),
                   /* @__PURE__ */ jsxs("div", { children: [
@@ -4399,8 +4569,28 @@ var TopBar = () => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-muted rounded-md p-0.5", children: [
+      /* @__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-0.5 bg-muted rounded-md p-0.5", children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -4408,9 +4598,9 @@ var TopBar = () => {
               size: "sm",
               disabled: !canUndo,
               onClick: () => actions.history.undo(),
-              className: "h-8 w-8 p-0",
+              className: "h-7 w-7 p-0",
               title: "Undo",
-              children: /* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx(Undo2, { className: "h-3.5 w-3.5" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4420,22 +4610,21 @@ var TopBar = () => {
               size: "sm",
               disabled: !canRedo,
               onClick: () => actions.history.redo(),
-              className: "h-8 w-8 p-0",
+              className: "h-7 w-7 p-0",
               title: "Redo",
-              children: /* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx(Redo2, { className: "h-3.5 w-3.5" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border" }),
         /* @__PURE__ */ jsxs(
           Button,
           {
             variant: "outline",
             size: "sm",
             onClick: handlePreview,
-            className: "gap-2",
+            className: "gap-1.5 h-8 text-xs",
             children: [
-              /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
               " Preview"
             ]
           }
@@ -4443,13 +4632,12 @@ var TopBar = () => {
         /* @__PURE__ */ jsxs(
           Button,
           {
-            variant: "default",
             size: "sm",
             onClick: handleExport,
-            className: "gap-2",
+            className: "gap-1.5 h-8 text-xs",
             children: [
-              /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }),
-              " Export HTML"
+              /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5" }),
+              " Export"
             ]
           }
         )
@@ -4460,7 +4648,7 @@ var TopBar = () => {
         /* @__PURE__ */ jsx(DialogTitle, { children: "Export HTML" }),
         /* @__PURE__ */ jsx(DialogDescription, { children: "Copy this HTML code to use in your email client or system." })
       ] }),
-      slots.exportDialog ? React9__default.createElement(slots.exportDialog, {
+      slots.exportDialog ? React10__default.createElement(slots.exportDialog, {
         html: htmlCode,
         onClose: () => setShowCode(false)
       }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4479,53 +4667,98 @@ var TopBar = () => {
     ] }) }),
     /* @__PURE__ */ jsx(Dialog, { open: showPreview, onOpenChange: setShowPreview, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-5xl max-h-[90vh]", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { children: "Email Preview" }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-muted rounded-lg p-1" })
-        ] }),
+        /* @__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 ? React9__default.createElement(slots.previewDialog, {
+      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__ */ jsx("div", { className: "border rounded-lg bg-muted/30 overflow-hidden", children: /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              srcDoc: htmlCode,
-              className: "w-full min-h-[500px] bg-white",
-              title: "Email Preview",
-              style: {
-                height: previewDevice === "mobile" ? "667px" : "600px"
+          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",
+              {
+                srcDoc: htmlCode,
+                className: "w-full min-h-[500px] bg-white",
+                title: "Email Preview",
+                style: {
+                  height: previewDevice === "mobile" ? "667px" : "600px"
+                }
               }
-            }
-          ) })
+            )
+          ] })
         }
       ) })
     ] }) })
   ] });
 };
-var defaultEmailContent = /* @__PURE__ */ jsxs(Element, { is: Paper, canvas: true, children: [
-  /* @__PURE__ */ jsx(EmailHeader, {}),
-  /* @__PURE__ */ jsxs(Element, { is: Container, canvas: true, children: [
-    /* @__PURE__ */ jsx(
-      TextBlock,
-      {
-        text: "Thank you for your business! Please find your invoice details below.",
-        fontSize: 16,
-        align: "center"
-      }
-    ),
-    /* @__PURE__ */ jsx(Spacer, { height: 10 }),
-    /* @__PURE__ */ jsx(InvoiceTable, {}),
-    /* @__PURE__ */ jsx(Spacer, { height: 20 }),
-    /* @__PURE__ */ jsx(EmailButton, { text: "Pay Now", href: "#" })
-  ] }),
-  /* @__PURE__ */ jsx(EmailFooter, {})
-] });
+var LeftSidebar = ({ setActiveTab, activeTab }) => {
+  const { components, slots } = useEditorConfig();
+  const { selectedNodeId } = useEditor((state) => ({
+    //@ts-ignore
+    selectedNodeId: state.events.selected[0]
+  }));
+  useEffect(() => {
+    if (selectedNodeId) {
+      setActiveTab("properties");
+    }
+  }, [selectedNodeId]);
+  const categories = useMemo(() => {
+    return Object.keys(components).reduce((acc, k) => {
+      const cat = components[k].category || "Other";
+      if (!acc.includes(cat)) acc.push(cat);
+      return acc;
+    }, []);
+  }, [components]);
+  return /* @__PURE__ */ jsx("div", { className: "h-full flex flex-col bg-background border-r border-border", children: /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: activeTab,
+      onValueChange: (value) => setActiveTab(value),
+      className: "flex-1 flex flex-col",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 pt-2 border-b border-border", children: /* @__PURE__ */ jsxs(TabsList, { className: "w-full h-9 bg-muted/50", children: [
+          /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: "components",
+              className: "flex-1 gap-1.5 text-xs data-[state=active]:bg-background",
+              children: [
+                /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5" }),
+                "Components"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: "properties",
+              className: "flex-1 gap-1.5 text-xs data-[state=active]:bg-background",
+              children: [
+                /* @__PURE__ */ jsx(Settings, { className: "h-3.5 w-3.5" }),
+                "Properties"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__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: "properties", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
+      ]
+    }
+  ) });
+};
+var defaultEmailContent = /* @__PURE__ */ jsx(Element, { is: Paper, canvas: true });
+var getReadablePrimaryForeground = (primaryHsl) => {
+  var _a;
+  const lightness = Number.parseFloat(
+    ((_a = primaryHsl.trim().split(/\s+/)[2]) == null ? void 0 : _a.replace("%", "")) || "50"
+  );
+  return lightness > 60 ? "222.2 47.4% 11.2%" : "210 40% 98%";
+};
 var EmailEditor = ({
   components: userComponents,
   replaceBuiltins = false,
@@ -4540,20 +4773,69 @@ var EmailEditor = ({
   htmlRenderers = {},
   showToolbar = true,
   showToolbox = true,
-  showSettingsPanel = true,
+  darkMode = true,
   className,
   style
 }) => {
+  var _a, _b, _c, _d;
   const mergedComponents = useMemo(() => {
     if (replaceBuiltins) return userComponents || {};
     return { ...DEFAULT_COMPONENTS, ...userComponents || {} };
   }, [userComponents, replaceBuiltins]);
+  const [activeTab, setActiveTab] = useState(
+    "components"
+  );
   const resolver = useMemo(() => {
     const res = buildResolver(mergedComponents);
     res.Paper = Paper;
     return res;
   }, [mergedComponents]);
   const renderNodeFn = slots.renderNode || RenderNode;
+  const [isDarkMode, setIsDarkMode] = useState(!darkMode);
+  const [primaryColor, setPrimaryColor] = useState(
+    (_a = theme.colors) == null ? void 0 : _a.primary
+  );
+  useEffect(() => {
+    var _a2;
+    setPrimaryColor((_a2 = theme.colors) == null ? void 0 : _a2.primary);
+  }, [(_b = theme.colors) == null ? void 0 : _b.primary]);
+  const primaryForeground = 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 = useMemo(() => {
+    const colors = theme.colors || {};
+    return {
+      background: colors.background,
+      foreground: colors.foreground,
+      border: colors.border,
+      muted: colors.muted,
+      "muted-foreground": colors.mutedForeground,
+      destructive: colors.destructive,
+      "panel-background": colors.panelBackground,
+      "canvas-background": colors.canvasBackground
+    };
+  }, [theme.colors]);
+  const editorStyle = useMemo(() => {
+    const cssVars = { ...style || {} };
+    Object.entries(themeColorVars).forEach(([token, value]) => {
+      if (value) cssVars[`--${token}`] = value;
+    });
+    if (primaryColor) cssVars["--primary"] = primaryColor;
+    if (primaryForeground) cssVars["--primary-foreground"] = primaryForeground;
+    if (theme.borderRadius) cssVars["--radius"] = `${theme.borderRadius}px`;
+    if (theme.fontFamily) cssVars.fontFamily = theme.fontFamily;
+    return cssVars;
+  }, [
+    style,
+    themeColorVars,
+    primaryColor,
+    primaryForeground,
+    theme.borderRadius,
+    theme.fontFamily
+  ]);
   return /* @__PURE__ */ jsx(
     EditorProvider,
     {
@@ -4568,51 +4850,54 @@ var EmailEditor = ({
         logo,
         showToolbar,
         showToolbox,
-        showSettingsPanel
+        showSettingsPanel: false
       },
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: `h-screen flex flex-col bg-muted/30 ${className || ""}`,
-          style,
+          className: `h-screen flex flex-col ${isDarkMode ? "dark" : ""} bg-background text-foreground ${className || ""}`,
+          style: editorStyle,
           children: /* @__PURE__ */ jsxs(Editor, { resolver, onRender: renderNodeFn, children: [
-            showToolbar && /* @__PURE__ */ jsx(TopBar, {}),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-              showToolbox && /* @__PURE__ */ jsxs("div", { className: "w-72 border-r bg-background flex flex-col", children: [
-                /* @__PURE__ */ jsxs("div", { className: "p-4 border-b", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4 text-primary" }),
-                    /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: "Components" })
-                  ] }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Drag components to canvas" })
-                ] }),
-                /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: slots.toolbox ? React9__default.createElement(slots.toolbox, {
-                  components: mergedComponents,
-                  categories: Object.keys(mergedComponents).reduce((acc, k) => {
-                    const cat = mergedComponents[k].category || "Other";
-                    if (!acc.includes(cat)) acc.push(cat);
-                    return acc;
-                  }, [])
-                }) : /* @__PURE__ */ jsx(Toolbox, {}) })
-              ] }),
+            showToolbar && /* @__PURE__ */ jsx(
+              TopBar,
+              {
+                isDarkMode,
+                onToggleDarkMode: () => setIsDarkMode((prev) => !prev),
+                primaryColor,
+                onPrimaryColorChange: (primaryHsl) => {
+                  var _a2;
+                  setPrimaryColor(primaryHsl);
+                  (_a2 = callbacks.onColorChange) == null ? void 0 : _a2.call(callbacks, primaryHsl);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 flex", children: [
+              showToolbox && /* @__PURE__ */ jsx("div", { className: "w-auto max-w-96 flex-shrink-0", children: /* @__PURE__ */ jsx(
+                LeftSidebar,
+                {
+                  setActiveTab,
+                  activeTab
+                }
+              ) }),
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "flex-1 overflow-auto p-8 craftjs-renderer",
-                  style: { backgroundColor: "#e5e5e5" },
-                  children: initialState ? /* @__PURE__ */ jsx(Frame, { data: initialState, children: defaultEmailContent }) : /* @__PURE__ */ jsx(Frame, { children: defaultContent || defaultEmailContent })
+                  className: "flex-1 overflow-auto craftjs-renderer",
+                  style: {
+                    backgroundColor: ((_d = theme.colors) == null ? void 0 : _d.canvasBackground) || "hsl(var(--muted))"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "p-8",
+                      onClick: () => {
+                        setActiveTab("properties");
+                      },
+                      children: /* @__PURE__ */ jsx(Frame, { data: initialState, children: defaultEmailContent })
+                    }
+                  )
                 }
-              ),
-              showSettingsPanel && /* @__PURE__ */ jsxs("div", { className: "w-80 border-l bg-background flex flex-col", children: [
-                /* @__PURE__ */ jsxs("div", { className: "p-4 border-b", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 text-primary" }),
-                    /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: "Properties" })
-                  ] }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Edit selected component" })
-                ] }),
-                /* @__PURE__ */ jsx(SettingsPanel, {})
-              ] })
+              )
             ] })
           ] })
         }