react-tailwind-email-editor 0.0.6 → 0.0.7

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React9 = require('react');
+var React10 = require('react');
 var core = require('@craftjs/core');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var lucideReact = require('lucide-react');
@@ -10,8 +10,11 @@ var jsxRuntime = require('react/jsx-runtime');
 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');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,18 +34,21 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
+var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 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 = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionItem = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Item,
   {
     ref,
@@ -51,7 +57,7 @@ var AccordionItem = React9__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
@@ -67,7 +73,7 @@ var AccordionTrigger = React9__namespace.forwardRef(({ className, children, ...p
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionContent = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Content,
   {
     ref,
@@ -82,25 +88,28 @@ var defaultTheme = {
   paperMinHeight: 800,
   paperBackground: "#ffffff"
 };
-var EditorContext = React9.createContext({
+var EditorContext = React10.createContext({
   components: {},
   theme: defaultTheme,
   slots: {},
   templates: [],
   callbacks: {},
   htmlRenderers: {},
-  title: "Email Editor",
+  title: "",
   showToolbar: true,
   showToolbox: true,
   showSettingsPanel: true
 });
-var useEditorConfig = () => React9.useContext(EditorContext);
-var EditorProvider = ({ children, value }) => {
-  const mergedTheme = React9.useMemo(
+var useEditorConfig = () => React10.useContext(EditorContext);
+var EditorProvider = ({
+  children,
+  value
+}) => {
+  const mergedTheme = React10.useMemo(
     () => ({ ...defaultTheme, ...value.theme }),
     [value.theme]
   );
-  const ctx = React9.useMemo(
+  const ctx = React10.useMemo(
     () => ({ ...value, theme: mergedTheme }),
     [value, mergedTheme]
   );
@@ -129,7 +138,7 @@ var ToolboxItem = ({ name, config }) => {
 };
 var Toolbox = () => {
   const { components } = useEditorConfig();
-  const grouped = React9__namespace.default.useMemo(() => {
+  const grouped = React10__namespace.default.useMemo(() => {
     const map = {};
     for (const [name, config] of Object.entries(components)) {
       const cat = config.category || "Other";
@@ -139,7 +148,7 @@ var Toolbox = () => {
     return map;
   }, [components]);
   const categoryKeys = Object.keys(grouped);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", defaultValue: categoryKeys, children: categoryKeys.map((category, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", defaultValue: categoryKeys, children: categoryKeys.map((category, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionItem,
     {
       value: category,
@@ -186,7 +195,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React9__namespace.forwardRef(
+var Button = React10__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -200,7 +209,7 @@ var Button = React9__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ScrollArea = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ScrollArea = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
@@ -214,7 +223,7 @@ var ScrollArea = React9__namespace.forwardRef(({ className, children, ...props }
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React9__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React10__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -292,7 +301,7 @@ var SettingsPanel = () => {
     }
   };
   if (slots.settingsPanel && selected) {
-    return React9__namespace.default.createElement(slots.settingsPanel, {
+    return React10__namespace.default.createElement(slots.settingsPanel, {
       selectedId: selected.id,
       selectedName: selected.displayName || selected.name,
       //@ts-ignore
@@ -305,7 +314,7 @@ var SettingsPanel = () => {
   }
   if (!selected) {
     if (slots.settingsEmptyState) {
-      return React9__namespace.default.createElement(slots.settingsEmptyState);
+      return React10__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" }) }),
@@ -380,7 +389,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: React9__namespace.default.createElement(selected.settings) })
+      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "pb-4", children: React10__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" })
@@ -460,7 +469,7 @@ var RenderNode = ({ render }) => {
     deletable: query.node(node.id).isDeletable(),
     parent: node.data.parent
   }));
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (dom) {
       if (isActive || isHover) {
         dom.classList.add("component-selected");
@@ -469,19 +478,19 @@ var RenderNode = ({ render }) => {
       }
     }
   }, [dom, isActive, isHover]);
-  const getPos = React9.useCallback((dom2) => {
+  const getPos = React10.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 = React9.useCallback(() => {
+  const scroll = React10.useCallback(() => {
     const currentDOM = dom;
     if (!currentDOM) return;
     const { top, left } = getPos(currentDOM);
   }, [dom, getPos]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     var _a;
     (_a = document.querySelector(".craftjs-renderer")) == null ? void 0 : _a.addEventListener("scroll", scroll);
     return () => {
@@ -4112,9 +4121,46 @@ ${childrenHtml}
   };
   return renderNode("ROOT");
 };
+var Tabs = TabsPrimitive__namespace.Root;
+var TabsList = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.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__namespace.List.displayName;
+var TabsTrigger = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.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__namespace.Trigger.displayName;
+var TabsContent = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.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__namespace.Content.displayName;
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -4126,7 +4172,7 @@ var DialogOverlay = React9__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -4162,7 +4208,7 @@ var DialogHeader = ({
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -4174,7 +4220,7 @@ var DialogTitle = React9__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -4185,7 +4231,7 @@ var DialogDescription = React9__namespace.forwardRef(({ className, ...props }, r
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
-var DropdownMenuSubTrigger = React9__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuSubTrigger = React10__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
@@ -4202,7 +4248,7 @@ var DropdownMenuSubTrigger = React9__namespace.forwardRef(({ className, inset, c
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSubContent = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.SubContent,
   {
     ref,
@@ -4214,7 +4260,7 @@ var DropdownMenuSubContent = React9__namespace.forwardRef(({ className, ...props
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React9__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuContent = React10__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Content,
   {
     ref,
@@ -4227,7 +4273,7 @@ var DropdownMenuContent = React9__namespace.forwardRef(({ className, sideOffset
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React9__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuItem = React10__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
@@ -4240,7 +4286,7 @@ var DropdownMenuItem = React9__namespace.forwardRef(({ className, inset, ...prop
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React9__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuCheckboxItem = React10__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
@@ -4257,7 +4303,7 @@ var DropdownMenuCheckboxItem = React9__namespace.forwardRef(({ className, childr
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuRadioItem = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.RadioItem,
   {
     ref,
@@ -4273,7 +4319,7 @@ var DropdownMenuRadioItem = React9__namespace.forwardRef(({ className, children,
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React9__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuLabel = React10__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
@@ -4286,7 +4332,7 @@ var DropdownMenuLabel = React9__namespace.forwardRef(({ className, inset, ...pro
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSeparator = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
@@ -4295,20 +4341,145 @@ var DropdownMenuSeparator = React9__namespace.forwardRef(({ className, ...props
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
-var TopBar = () => {
-  const { actions, query, canUndo, canRedo } = core.useEditor((state, query2) => ({
-    canUndo: state.options.enabled && query2.history.canUndo(),
-    canRedo: state.options.enabled && query2.history.canRedo()
+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;
+      }
+    }
+    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 TopBar = ({
+  isDarkMode,
+  onToggleDarkMode,
+  primaryColor,
+  onPrimaryColorChange
+}) => {
+  const { actions, query, canUndo, canRedo } = core.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] = 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(
+  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(
     "desktop"
   );
-  const getHtml = React9.useCallback(() => {
+  const getHtml = React10.useCallback(() => {
     const json = query.serialize();
     const nodes = JSON.parse(json);
     return generateEmailHtml(nodes, htmlRenderers);
@@ -4368,7 +4539,7 @@ var TopBar = () => {
     }
   };
   if (slots.toolbar) {
-    return React9__namespace.default.createElement(slots.toolbar, {
+    return React10__namespace.default.createElement(slots.toolbar, {
       onExport: getHtml,
       onPreview: getHtml,
       onClear: handleClearCanvas,
@@ -4377,21 +4548,23 @@ var TopBar = () => {
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-background", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          logo || /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4 text-primary-foreground" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm font-bold leading-tight", children: title }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "Drag & Drop Builder" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-px bg-border" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-border bg-background", children: [
+      /* @__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-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { className: "h-4 w-4" }),
-            "Templates"
-          ] }) }),
+          /* @__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, {}),
@@ -4401,7 +4574,7 @@ var TopBar = () => {
                 className: "gap-2",
                 onClick: () => handleLoadTemplate(template),
                 children: [
-                  template.icon && React9__namespace.default.createElement(template.icon, {
+                  template.icon && React10__namespace.default.createElement(template.icon, {
                     className: "h-4 w-4 text-muted-foreground"
                   }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4424,8 +4597,28 @@ var TopBar = () => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 bg-muted rounded-md p-0.5", children: [
+      /* @__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-0.5 bg-muted rounded-md p-0.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
@@ -4433,9 +4626,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__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-3.5 w-3.5" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4445,22 +4638,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__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-3.5 w-3.5" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
             variant: "outline",
             size: "sm",
             onClick: handlePreview,
-            className: "gap-2",
+            className: "gap-1.5 h-8 text-xs",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-3.5 w-3.5" }),
               " Preview"
             ]
           }
@@ -4468,13 +4660,12 @@ var TopBar = () => {
         /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
-            variant: "default",
             size: "sm",
             onClick: handleExport,
-            className: "gap-2",
+            className: "gap-1.5 h-8 text-xs",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4" }),
-              " Export HTML"
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-3.5 w-3.5" }),
+              " Export"
             ]
           }
         )
@@ -4485,7 +4676,7 @@ var TopBar = () => {
         /* @__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 ? React9__namespace.default.createElement(slots.exportDialog, {
+      slots.exportDialog ? React10__namespace.default.createElement(slots.exportDialog, {
         html: htmlCode,
         onClose: () => setShowCode(false)
       }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -4504,53 +4695,98 @@ var TopBar = () => {
     ] }) }),
     /* @__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.jsxs(DialogTitle, { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Email Preview" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 bg-muted rounded-lg p-1" })
-        ] }),
+        /* @__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 ? React9__namespace.default.createElement(slots.previewDialog, {
+      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.jsx("div", { className: "border rounded-lg bg-muted/30 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "iframe",
-            {
-              srcDoc: htmlCode,
-              className: "w-full min-h-[500px] bg-white",
-              title: "Email Preview",
-              style: {
-                height: previewDevice === "mobile" ? "667px" : "600px"
+          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",
+              {
+                srcDoc: htmlCode,
+                className: "w-full min-h-[500px] bg-white",
+                title: "Email Preview",
+                style: {
+                  height: previewDevice === "mobile" ? "667px" : "600px"
+                }
               }
-            }
-          ) })
+            )
+          ] })
         }
       ) })
     ] }) })
   ] });
 };
-var defaultEmailContent = /* @__PURE__ */ jsxRuntime.jsxs(core.Element, { is: Paper, canvas: true, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(EmailHeader, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(core.Element, { is: Container, canvas: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      TextBlock,
-      {
-        text: "Thank you for your business! Please find your invoice details below.",
-        fontSize: 16,
-        align: "center"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { height: 10 }),
-    /* @__PURE__ */ jsxRuntime.jsx(InvoiceTable, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { height: 20 }),
-    /* @__PURE__ */ jsxRuntime.jsx(EmailButton, { text: "Pay Now", href: "#" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx(EmailFooter, {})
-] });
+var LeftSidebar = ({ setActiveTab, activeTab }) => {
+  const { components, slots } = useEditorConfig();
+  const { selectedNodeId } = core.useEditor((state) => ({
+    //@ts-ignore
+    selectedNodeId: state.events.selected[0]
+  }));
+  React10.useEffect(() => {
+    if (selectedNodeId) {
+      setActiveTab("properties");
+    }
+  }, [selectedNodeId]);
+  const categories = React10.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__ */ jsxRuntime.jsx("div", { className: "h-full flex flex-col bg-background border-r border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Tabs,
+    {
+      value: activeTab,
+      onValueChange: (value) => setActiveTab(value),
+      className: "flex-1 flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pt-2 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "w-full h-9 bg-muted/50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            TabsTrigger,
+            {
+              value: "components",
+              className: "flex-1 gap-1.5 text-xs data-[state=active]:bg-background",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { className: "h-3.5 w-3.5" }),
+                "Components"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            TabsTrigger,
+            {
+              value: "properties",
+              className: "flex-1 gap-1.5 text-xs data-[state=active]:bg-background",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-3.5 w-3.5" }),
+                "Properties"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__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: "properties", className: "flex-1 mt-0 ", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(SettingsPanel, {}) }) })
+      ]
+    }
+  ) });
+};
+var defaultEmailContent = /* @__PURE__ */ jsxRuntime.jsx(core.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,
@@ -4565,20 +4801,69 @@ var EmailEditor = ({
   htmlRenderers = {},
   showToolbar = true,
   showToolbox = true,
-  showSettingsPanel = true,
+  darkMode = true,
   className,
   style
 }) => {
-  const mergedComponents = React9.useMemo(() => {
+  var _a, _b, _c, _d;
+  const mergedComponents = React10.useMemo(() => {
     if (replaceBuiltins) return userComponents || {};
     return { ...DEFAULT_COMPONENTS, ...userComponents || {} };
   }, [userComponents, replaceBuiltins]);
-  const resolver = React9.useMemo(() => {
+  const [activeTab, setActiveTab] = React10.useState(
+    "components"
+  );
+  const resolver = React10.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(
+    (_a = theme.colors) == null ? void 0 : _a.primary
+  );
+  React10.useEffect(() => {
+    var _a2;
+    setPrimaryColor((_a2 = theme.colors) == null ? void 0 : _a2.primary);
+  }, [(_b = theme.colors) == null ? void 0 : _b.primary]);
+  const primaryForeground = React10.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 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 = React10.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__ */ jsxRuntime.jsx(
     EditorProvider,
     {
@@ -4593,51 +4878,54 @@ var EmailEditor = ({
         logo,
         showToolbar,
         showToolbox,
-        showSettingsPanel
+        showSettingsPanel: false
       },
       children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(core.Editor, { resolver, onRender: renderNodeFn, children: [
-            showToolbar && /* @__PURE__ */ jsxRuntime.jsx(TopBar, {}),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-              showToolbox && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72 border-r bg-background flex flex-col", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4 text-primary" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: "Components" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Drag components to canvas" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: slots.toolbox ? React9__namespace.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__ */ jsxRuntime.jsx(Toolbox, {}) })
-              ] }),
+            showToolbar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex", children: [
+              showToolbox && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto max-w-96 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                LeftSidebar,
+                {
+                  setActiveTab,
+                  activeTab
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "flex-1 overflow-auto p-8 craftjs-renderer",
-                  style: { backgroundColor: "#e5e5e5" },
-                  children: initialState ? /* @__PURE__ */ jsxRuntime.jsx(core.Frame, { data: initialState, children: defaultEmailContent }) : /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "p-8",
+                      onClick: () => {
+                        setActiveTab("properties");
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(core.Frame, { data: initialState, children: defaultEmailContent })
+                    }
+                  )
                 }
-              ),
-              showSettingsPanel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-80 border-l bg-background flex flex-col", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4 text-primary" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: "Properties" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Edit selected component" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(SettingsPanel, {})
-              ] })
+              )
             ] })
           ] })
         }