@kgalexander/mcreate 0.0.13 → 0.0.15

package/dist/index.mjs

@@ -21,7 +21,6 @@ import {
   FONTS,
   FONT_SIZE_STEP,
   History,
-  IMAGE_SELECTION_VALID_TYPES,
   Input,
   LETTER_SPACING_STEP,
   LINE_HEIGHT_STEP,
@@ -29,7 +28,6 @@ import {
   MAX_FONT_SIZE,
   MAX_LETTER_SPACING,
   MAX_LINE_HEIGHT,
-  MAX_PAID_LEVEL,
   MAX_TEMPLATE_SIZE,
   MIN_FONT_SIZE,
   MIN_LETTER_SPACING,
@@ -61,10 +59,10 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-LAW7VVEQ.mjs";
+} from "./chunk-XSQHR5MC.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
-import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react";
+import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
 
 // src/core/editor/components/email-template-v2/components/template-json-view.tsx
 import { CodeIcon } from "lucide-react";
@@ -93,7 +91,7 @@ function TemplateSizeIndicator() {
     "span",
     {
       className: cn(
-        "text-xs text-muted-foreground ml-2",
+        "text-xs text-muted-foreground ml-2 hidden md:block",
         percentage > 90 && "text-yellow-600",
         isAtSizeLimit && "text-red-600"
       ),
@@ -196,15 +194,23 @@ function TemplateNameDialog() {
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
-function TemplateHeader({ template }) {
-  const { templateId, onSave, markAsSaved, isSaving, setIsSaving } = useEditorStore();
+function TemplateHeader() {
+  const templateId = useEditorStore((s) => s.templateId);
+  const onSave = useEditorStore((s) => s.onSave);
+  const markAsSaved = useEditorStore((s) => s.markAsSaved);
+  const isSaving = useEditorStore((s) => s.isSaving);
+  const setIsSaving = useEditorStore((s) => s.setIsSaving);
+  const onExit = useEditorStore((s) => s.onExit);
+  const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
     console.log("handleExit - templateId:", templateId);
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
-      await onSave(templateId, template);
+      await onSave(templateId, useEditorStore.getState().template);
       markAsSaved();
+      onExit?.();
+      console.log("handleExit - onExit called");
     } catch (error) {
       console.error("Failed to save:", error);
     } finally {
@@ -221,16 +227,21 @@ function TemplateHeader({ template }) {
       /* @__PURE__ */ jsx4(TemplateSizeIndicator, {})
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-row gap-2 items-center", children: [
-      template?.name || "Loading...",
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground w-[100px] truncate text-ellipsis overflow-hidden", children: templateName || "Loading..." }),
       /* @__PURE__ */ jsx4(TemplateNameDialog, {})
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-row gap-1 items-center", children: [
-      /* @__PURE__ */ jsx4(TemplateJsonView, {}),
-      /* @__PURE__ */ jsx4(HistoryDebugView, {}),
+      process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsx4(TemplateJsonView, {}),
+      process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsx4(HistoryDebugView, {}),
       /* @__PURE__ */ jsx4(Preview, {}),
       /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
         /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "icon", className: "cursor-pointer shadow-none transition-none rounded-[12px]", children: /* @__PURE__ */ jsx4(MoreHorizontalIcon, { className: "w-4 h-4" }) }) }),
-        /* @__PURE__ */ jsxs5(DropdownMenuContent, { align: "center", children: [
+        /* @__PURE__ */ jsxs5(DropdownMenuContent, { align: "end", className: "z-51", children: [
+          /* @__PURE__ */ jsxs5(DropdownMenuItem, { variant: "default", className: "cursor-pointer  md:hidden", children: [
+            /* @__PURE__ */ jsx4(SendIcon, { className: "w-4 h-4" }),
+            "Send Test"
+          ] }),
+          /* @__PURE__ */ jsx4(DropdownMenuSeparator, { className: " md:hidden" }),
           /* @__PURE__ */ jsxs5(DropdownMenuItem, { className: "cursor-pointer", children: [
             /* @__PURE__ */ jsx4(PencilIcon, { className: "w-4 h-4" }),
             "Change Template"
@@ -250,14 +261,17 @@ function TemplateHeader({ template }) {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(Button, { variant: "default", className: "cursor-pointer shadow-none transition-none rounded-[12px]", children: "Send Test" })
+      /* @__PURE__ */ jsx4(Button, { variant: "default", className: "w-fit cursor-pointer shadow-none transition-none rounded-[12px] hidden md:block", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-row gap-2 items-center", children: [
+        /* @__PURE__ */ jsx4(SendIcon, {}),
+        /* @__PURE__ */ jsx4("p", { children: "Send Test" })
+      ] }) })
     ] })
   ] });
 }
 
 // src/core/editor/components/email-template-v2/sidebar/sidebar.tsx
 import { useCallback as useCallback8, useEffect as useEffect2, useRef as useRef3, useMemo as useMemo6, useState as useState6 } from "react";
-import { BlocksIcon, Hexagon as Hexagon2, Paintbrush, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { BlocksIcon, Paintbrush, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 
 // src/core/editor/components/email-template-v2/sidebar/view/elements/main.tsx
 import { useState as useState2 } from "react";
@@ -1357,7 +1371,7 @@ var rgbaArrayToHex = (rgba) => {
   const [r, g, b] = rgba.map((v) => Math.round(v));
   return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
 };
-var ColorButton = ({ color, onColorSelect, currentColor }) => /* @__PURE__ */ jsxs19(Tooltip, { children: [
+var ColorButton = ({ colorName, color, onColorSelect, currentColor }) => /* @__PURE__ */ jsxs19(Tooltip, { children: [
   /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(
     "button",
     {
@@ -1366,11 +1380,13 @@ var ColorButton = ({ color, onColorSelect, currentColor }) => /* @__PURE__ */ js
       className: `aspect-square rounded-full cursor-pointer border hover:border-gray-500 ${isColorSelected(color, currentColor) ? "border-2 border-blue-500" : "border-accent"}`
     }
   ) }),
-  /* @__PURE__ */ jsx21(TooltipContent, { children: color })
+  /* @__PURE__ */ jsx21(TooltipContent, { children: colorName || color })
 ] });
 function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "Color", colorTarget, focusIdx, currentColor }) {
   const templateColors = useTemplateColors();
   const lastPickedColorRef = useRef2(null);
+  const userData = useEditorStore((s) => s.userData);
+  const colorPalettes = userData?.brand_kits?.[0]?.color_palettes ?? [];
   const [colorWheelOpen, setColorWheelOpen] = useState4(false);
   const handleColorPickerChange = useCallback6((rgba) => {
     const hex = rgbaArrayToHex(rgba);
@@ -1424,7 +1440,7 @@ function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "C
         templateColors.map((color) => /* @__PURE__ */ jsx21(ColorButton, { color, onColorSelect, currentColor }, color))
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "w-full mb-4", children: [
+    colorPalettes.length > 0 && /* @__PURE__ */ jsxs19("div", { className: "w-full mb-4", children: [
       /* @__PURE__ */ jsxs19("div", { className: "flex flex-row items-center justify-between w-full mb-1", children: [
         /* @__PURE__ */ jsxs19("div", { className: "flex flex-row items-center gap-2 h-[44px]", children: [
           /* @__PURE__ */ jsx21(Hexagon, { className: "w-4 h-4 text-muted-foreground" }),
@@ -1432,16 +1448,10 @@ function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "C
         ] }),
         /* @__PURE__ */ jsx21(Button, { variant: "link", className: "text-sm pr-0 cursor-pointer", children: "Edit" })
       ] }),
-      /* @__PURE__ */ jsxs19("div", { className: "w-full flex flex-col gap-4", children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx21(Label, { className: "text-xs font-medium text-muted-foreground", children: "Color palette 1" }),
-          /* @__PURE__ */ jsx21("div", { className: "w-full grid grid-cols-7 gap-2", children: /* @__PURE__ */ jsx21(ColorButton, { color: "#FFFFFF", onColorSelect, currentColor }) })
-        ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx21(Label, { className: "text-xs font-medium text-muted-foreground", children: "Color palette 2" }),
-          /* @__PURE__ */ jsx21("div", { className: "w-full grid grid-cols-7 gap-2", children: /* @__PURE__ */ jsx21(ColorButton, { color: "#E97575", onColorSelect, currentColor }) })
-        ] })
-      ] })
+      /* @__PURE__ */ jsx21("div", { className: "w-full flex flex-col gap-4", children: colorPalettes.map((palette) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx21(Label, { className: "text-xs font-medium text-muted-foreground", children: palette.name }),
+        /* @__PURE__ */ jsx21("div", { className: "w-full grid grid-cols-7 gap-2", children: palette.colors.map((c) => /* @__PURE__ */ jsx21(ColorButton, { colorName: c.name, color: c.hex, onColorSelect, currentColor }, c.color_id)) })
+      ] }, palette.palette_id)) })
     ] }),
     /* @__PURE__ */ jsxs19("div", { className: "w-full", children: [
       /* @__PURE__ */ jsxs19("div", { className: "flex flex-row items-center justify-between w-full mb-1", children: [
@@ -1527,6 +1537,7 @@ var IMAGES_MOCK_DATA = [
 ];
 var ImageSelection = ({ setActiveView, lastView, onImageSelect, focusIdx }) => {
   const template = useEditorStore((state) => state.template);
+  const images = useEditorStore((state) => state.images);
   const currentImageUrl = useMemo4(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
@@ -1541,16 +1552,28 @@ var ImageSelection = ({ setActiveView, lastView, onImageSelect, focusIdx }) => {
     ] }) }),
     /* @__PURE__ */ jsxs20("div", { className: "w-full", children: [
       /* @__PURE__ */ jsx22("div", { className: "flex flex-row items-center justify-between w-full mb-4", children: /* @__PURE__ */ jsx22("p", { className: "text-sm font-medium", children: "Images" }) }),
-      /* @__PURE__ */ jsx22("div", { className: "w-full grid grid-cols-3 gap-3", children: IMAGES_MOCK_DATA.map((image, index) => /* @__PURE__ */ jsx22(
-        Button,
-        {
-          variant: "outline",
-          className: `aspect-square h-full w-full cursor-pointer shadow-none transition-none rounded-[12px] p-0 ${currentImageUrl === image.src ? "ring-2 ring-blue-500 ring-offset-2" : ""}`,
-          onClick: () => onImageSelect?.(image.src),
-          children: /* @__PURE__ */ jsx22("img", { src: image.src, alt: image.alt, className: "w-full h-full object-cover rounded-[12px]" })
-        },
-        index
-      )) })
+      /* @__PURE__ */ jsxs20("div", { className: "w-full grid grid-cols-3 gap-3", children: [
+        IMAGES_MOCK_DATA.map((image, index) => /* @__PURE__ */ jsx22(
+          Button,
+          {
+            variant: "outline",
+            className: `aspect-square h-full w-full cursor-pointer shadow-none transition-none rounded-[12px] p-0 ${currentImageUrl === image.src ? "ring-2 ring-blue-500 ring-offset-2" : ""}`,
+            onClick: () => onImageSelect?.(image.src),
+            children: /* @__PURE__ */ jsx22("img", { src: image.src, alt: image.alt, className: "w-full h-full object-cover rounded-[12px]" })
+          },
+          index
+        )),
+        images.map((image, index) => /* @__PURE__ */ jsx22(
+          Button,
+          {
+            variant: "outline",
+            className: `aspect-square h-full w-full cursor-pointer shadow-none transition-none rounded-[12px] p-0 ${currentImageUrl === image.public_url ? "ring-2 ring-blue-500 ring-offset-2" : ""}`,
+            onClick: () => onImageSelect?.(image.public_url),
+            children: /* @__PURE__ */ jsx22("img", { src: image.public_url, alt: image.original_name, className: "w-full h-full object-cover rounded-[12px]" })
+          },
+          index
+        ))
+      ] })
     ] })
   ] });
 };
@@ -1804,11 +1827,24 @@ var toTemplatePath = (focusIdx) => {
   return focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
 };
 function TemplateSidebar({ editorLoading }) {
-  const { activeView, setActiveView, lastView, colorType, colorTarget, imageTarget } = useSidebarContext();
+  const { activeView, setActiveView, lastView, colorType, colorTarget, imageTarget, setImageTarget } = useSidebarContext();
   const focusIdx = useEditorStore((state) => state.focusIdx);
-  const template = useEditorStore((state) => state.template);
   const tiptapEditor = useEditorStore((state) => state.tiptapEditor);
+  const focusedElementAttrs = useEditorStore(
+    (s) => s.focusIdx ? lodashGet2(s.template, toTemplatePath(s.focusIdx))?.attributes : null
+  );
+  const focusedElementType = useEditorStore(
+    (s) => s.focusIdx ? lodashGet2(s.template, toTemplatePath(s.focusIdx))?.type : null
+  );
+  const parentElementAttrs = useEditorStore((s) => {
+    if (!s.focusIdx) return null;
+    const parentIdx = getParentIdx(s.focusIdx);
+    return parentIdx ? lodashGet2(s.template, toTemplatePath(parentIdx))?.attributes : null;
+  });
+  const pageBgColor = useEditorStore((s) => s.template?.content?.[0]?.attributes?.["background-color"]);
+  const linkColor = useEditorStore((s) => s.template?.content?.[0]?.data?.value?.linkColor);
   const previousElementTypeRef = useRef3(void 0);
+  const previousFocusIdxRef = useRef3(null);
   const [openSidebar, setOpenSidebar] = useState6(true);
   const [updateCounter, forceUpdate] = useState6(0);
   useEffect2(() => {
@@ -1829,97 +1865,71 @@ function TemplateSidebar({ editorLoading }) {
     if (colorTarget === "highlightColor" && tiptapEditor) {
       return tiptapEditor.getAttributes("textStyle").backgroundColor || null;
     }
-    if (!focusIdx || !template) return null;
-    const path = toTemplatePath(focusIdx);
-    const element = lodashGet2(template, path);
-    if (!element) return null;
+    if (!focusIdx || !focusedElementAttrs) return null;
     switch (colorTarget) {
       case "sectionBgColor":
       case "buttonBgColor":
-        return element.attributes?.["background-color"] || null;
+        return focusedElementAttrs["background-color"] || null;
       case "buttonTextColor":
       case "socialTextColor":
       case "socialItemTextColor":
-        return element.attributes?.["color"] || null;
+        return focusedElementAttrs["color"] || null;
       case "strokeColor":
       case "buttonStrokeColor": {
-        const parsed = parseBorder(element.attributes?.border);
+        const parsed = parseBorder(focusedElementAttrs.border);
         return parsed.color || null;
       }
       case "spacerBgColor":
       case "dividerBgColor":
       case "imageBgColor":
       case "socialBgColor":
-        return element.attributes?.["container-background-color"] || null;
+        return focusedElementAttrs["container-background-color"] || null;
       case "dividerBorderColor":
-        return element.attributes?.["border-color"] || null;
-      case "columnBgColor": {
-        const columnIdx = getParentIdx(focusIdx);
-        if (!columnIdx) return null;
-        const column = lodashGet2(template, toTemplatePath(columnIdx));
-        return column?.attributes?.["background-color"] || null;
-      }
-      case "columnStrokeColor": {
-        const columnIdx = getParentIdx(focusIdx);
-        if (!columnIdx) return null;
-        const column = lodashGet2(template, toTemplatePath(columnIdx));
-        const parsed = parseBorder(column?.attributes?.border);
-        return parsed.color || null;
-      }
-      case "propertyBgColor": {
-        const columnIdx = getParentIdx(focusIdx);
-        if (!columnIdx) return null;
-        const column = lodashGet2(template, toTemplatePath(columnIdx));
-        return column?.attributes?.["background-color"] || null;
-      }
+        return focusedElementAttrs["border-color"] || null;
+      case "columnBgColor":
+      case "propertyBgColor":
+        return parentElementAttrs?.["background-color"] || null;
+      case "columnStrokeColor":
       case "propertyStrokeColor": {
-        const columnIdx = getParentIdx(focusIdx);
-        if (!columnIdx) return null;
-        const column = lodashGet2(template, toTemplatePath(columnIdx));
-        const parsed = parseBorder(column?.attributes?.border);
+        const parsed = parseBorder(parentElementAttrs?.border);
         return parsed.color || null;
       }
       case "propertyTextColor": {
-        const element2 = lodashGet2(template, toTemplatePath(focusIdx));
-        if (element2?.type === "property-card-triple-item") {
-          const parentIdx = getParentIdx(focusIdx);
-          if (!parentIdx) return "#111116";
-          const parent = lodashGet2(template, toTemplatePath(parentIdx));
-          return parent?.attributes?.["text-color"] || "#111116";
+        if (focusedElementType === "property-card-triple-item") {
+          return parentElementAttrs?.["text-color"] || "#111116";
         }
-        return element2?.attributes?.["text-color"] || "#111116";
-      }
-      case "statusColor": {
-        const property = lodashGet2(template, toTemplatePath(focusIdx));
-        return property?.attributes?.["status-color"] || "#B8B8B8";
+        return focusedElementAttrs["text-color"] || "#111116";
       }
+      case "statusColor":
+        return focusedElementAttrs["status-color"] || "#B8B8B8";
       case "pageBgColor":
-        return template?.content?.[0]?.attributes?.["background-color"] || null;
+        return pageBgColor || null;
       case "linkColor":
-        return template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
+        return linkColor || "#0000ff";
       default:
         return null;
     }
-  }, [colorTarget, focusIdx, template, tiptapEditor, updateCounter]);
+  }, [colorTarget, focusIdx, focusedElementAttrs, parentElementAttrs, focusedElementType, pageBgColor, linkColor, tiptapEditor, updateCounter]);
   useEffect2(() => {
-    if (!focusIdx || !template) {
+    if (!focusIdx || !focusedElementType) {
       previousElementTypeRef.current = void 0;
       return;
     }
-    const element = lodashGet2(template, toTemplatePath(focusIdx));
-    const currentType = normalizeElementType(element?.type);
+    const currentType = normalizeElementType(focusedElementType);
     const previousType = previousElementTypeRef.current;
     if (previousType && currentType !== previousType && activeView === "color") {
       setActiveView(lastView);
     }
-    if (activeView === "images" && currentType && !IMAGE_SELECTION_VALID_TYPES.includes(currentType)) {
+    if (activeView === "images" && previousFocusIdxRef.current !== null && previousFocusIdxRef.current !== focusIdx) {
       setActiveView(lastView);
+      setImageTarget(null);
     }
     if (activeView === "add-social" && currentType && !ADD_SOCIAL_VALID_TYPES.includes(currentType)) {
       setActiveView(lastView);
     }
     previousElementTypeRef.current = currentType;
-  }, [focusIdx, template, activeView, lastView, setActiveView]);
+    previousFocusIdxRef.current = focusIdx ?? null;
+  }, [focusIdx, focusedElementType, activeView, lastView, setActiveView, setImageTarget]);
   const handleColorSelect = useCallback8((color) => {
     const tiptapEditor2 = useEditorStore.getState().tiptapEditor;
     if (colorTarget === "textColor" && tiptapEditor2) {
@@ -1933,9 +1943,9 @@ function TemplateSidebar({ editorLoading }) {
       }
       window.dispatchEvent(new CustomEvent("toolbar-refresh"));
     } else if (colorTarget === "sectionBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "background-color": color }
@@ -1943,9 +1953,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "buttonBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "background-color": color }
@@ -1953,9 +1963,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "buttonStrokeColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           const parsed = parseBorder(element.attributes?.border);
           const newBorder = formatBorder({
@@ -1969,9 +1979,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "buttonTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "color": color }
@@ -1979,10 +1989,10 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "strokeColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
       if (focusIdx2 === "content") return;
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           const parsed = parseBorder(element.attributes?.border);
           const newBorder = formatBorder({
@@ -1996,11 +2006,11 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "columnBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
         const columnIdx = getParentIdx(focusIdx2);
         if (columnIdx) {
-          const column = lodashGet2(template2, toTemplatePath(columnIdx));
+          const column = lodashGet2(template, toTemplatePath(columnIdx));
           if (column) {
             updateElement(columnIdx, {
               attributes: { ...column.attributes, "background-color": color }
@@ -2009,11 +2019,11 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "columnStrokeColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
         const columnIdx = getParentIdx(focusIdx2);
         if (columnIdx) {
-          const column = lodashGet2(template2, toTemplatePath(columnIdx));
+          const column = lodashGet2(template, toTemplatePath(columnIdx));
           if (column) {
             const parsed = parseBorder(column.attributes?.border);
             const newBorder = formatBorder({
@@ -2028,9 +2038,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "spacerBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -2038,9 +2048,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "dividerBorderColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "border-color": color }
@@ -2048,9 +2058,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "dividerBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -2058,9 +2068,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "imageBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -2068,9 +2078,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "socialBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -2078,9 +2088,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "socialTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "color": color }
@@ -2088,9 +2098,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "socialItemTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "color": color }
@@ -2098,9 +2108,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "pageBgColor") {
-      const { updateElement, template: template2 } = useEditorStore.getState();
-      if (template2) {
-        const pageElement = template2.content?.[0];
+      const { updateElement, template } = useEditorStore.getState();
+      if (template) {
+        const pageElement = template.content?.[0];
         if (pageElement) {
           updateElement("content", {
             attributes: { ...pageElement.attributes, "background-color": color }
@@ -2108,9 +2118,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "linkColor") {
-      const { updateElement, template: template2 } = useEditorStore.getState();
-      if (template2) {
-        const pageElement = template2.content?.[0];
+      const { updateElement, template } = useEditorStore.getState();
+      if (template) {
+        const pageElement = template.content?.[0];
         if (pageElement) {
           updateElement("content", {
             data: { value: { ...pageElement.data?.value, linkColor: color } }
@@ -2118,11 +2128,11 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "propertyBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
         const columnIdx = getParentIdx(focusIdx2);
         if (columnIdx) {
-          const column = lodashGet2(template2, toTemplatePath(columnIdx));
+          const column = lodashGet2(template, toTemplatePath(columnIdx));
           if (column) {
             updateElement(columnIdx, {
               attributes: { ...column.attributes, "background-color": color }
@@ -2131,12 +2141,12 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "propertyStrokeColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
         const columnIdx = getParentIdx(focusIdx2);
         if (columnIdx) {
-          const column = lodashGet2(template2, toTemplatePath(columnIdx));
-          const property = lodashGet2(template2, toTemplatePath(focusIdx2));
+          const column = lodashGet2(template, toTemplatePath(columnIdx));
+          const property = lodashGet2(template, toTemplatePath(focusIdx2));
           if (column) {
             const parsed = parseBorder(column.attributes?.border);
             const newBorder = formatBorder({
@@ -2156,13 +2166,13 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "propertyTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = lodashGet2(template, toTemplatePath(focusIdx2));
         if (element?.type === "property-card-triple-item") {
           const parentIdx = getParentIdx(focusIdx2);
           if (parentIdx) {
-            const parent = lodashGet2(template2, toTemplatePath(parentIdx));
+            const parent = lodashGet2(template, toTemplatePath(parentIdx));
             if (parent) {
               updateElement(parentIdx, {
                 attributes: { ...parent.attributes, "text-color": color }
@@ -2176,9 +2186,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "statusColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const property = lodashGet2(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const property = lodashGet2(template, toTemplatePath(focusIdx2));
         if (property) {
           updateElement(focusIdx2, {
             attributes: { ...property.attributes, "status-color": color }
@@ -2188,10 +2198,17 @@ function TemplateSidebar({ editorLoading }) {
     }
   }, [colorTarget]);
   const handleImageSelect = useCallback8((imageSrc) => {
-    const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-    if (!focusIdx2 || !template2) return;
-    const element = lodashGet2(template2, toTemplatePath(focusIdx2));
+    const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+    if (!focusIdx2 || !template) return;
+    const element = lodashGet2(template, toTemplatePath(focusIdx2));
     if (!element) return;
+    const validTypesForTarget = {
+      sectionBgImage: ["section", "section-column", "section-property-km", "section-property-single-two", "section-property-triple"],
+      imageElement: ["image"],
+      propertyImage: ["property-card", "property-card-single-two", "property-card-triple-item"]
+    };
+    const validTypes = validTypesForTarget[imageTarget ?? ""];
+    if (validTypes && !validTypes.includes(element.type)) return;
     const attributeName = imageTarget === "imageElement" ? "src" : imageTarget === "propertyImage" ? "image-src" : "background-url";
     updateElement(focusIdx2, {
       attributes: { ...element.attributes, [attributeName]: imageSrc }
@@ -2235,19 +2252,6 @@ function TemplateSidebar({ editorLoading }) {
             }
           ),
           /* @__PURE__ */ jsx24("span", { className: "text-xs text-muted-foreground", children: "Styles" })
-        ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsx24(
-            Button,
-            {
-              onClick: () => handleViewClick("brand"),
-              variant: "ghost",
-              size: "icon",
-              className: `shadow-none transition-none w-[44px] h-[44px] p-0 flex flex-col items-center cursor-pointer ${activeView === "brand" ? "bg-sidebar-accent" : ""}`,
-              children: /* @__PURE__ */ jsx24(Hexagon2, {})
-            }
-          ),
-          /* @__PURE__ */ jsx24("span", { className: "text-xs text-muted-foreground", children: "Brand" })
         ] })
       ] }),
       /* @__PURE__ */ jsx24(
@@ -2436,7 +2440,7 @@ var ToolbarContainer = ({ children }) => {
     {
       "data-toolbar-container": "true",
       "data-editor-toolbar": "true",
-      className: "absolute top-0 left-0 right-0 mx-auto flex flex-row items-center w-fit justify-center h-[44px] py-2 shrink-0 px-1 border m-2 bg-white dark:bg-black rounded-[12px] shadow-sm",
+      className: "absolute top-0 left-0 right-0 mx-auto m-2 flex flex-row items-center w-fit justify-center h-[44px] py-2 shrink-0 px-1 border bg-white dark:bg-black rounded-[12px] [@media(max-width:950px)]:static [@media(max-width:950px)]:mx-0 [@media(max-width:950px)]:m-0 [@media(max-width:950px)]:max-w-full [@media(max-width:950px)]:w-full [@media(max-width:950px)]:items-center [@media(max-width:950px)]:rounded-none [@media(max-width:950px)]:justify-start [@media(max-width:950px)]:shadow-none [@media(max-width:950px)]:border-0 [@media(max-width:950px)]:border-b",
       style: { zIndex: 51 },
       children
     }
@@ -2451,14 +2455,20 @@ var ToolbarContent = ({ children }) => {
 
 // src/core/editor/components/toolbar-ui/separator.tsx
 import { jsx as jsx30 } from "react/jsx-runtime";
-var ToolbarSeparator = () => {
-  return /* @__PURE__ */ jsx30("div", { className: "border-r h-[14px] pr-2 mr-2" });
+var ToolbarSeparator = ({ className }) => {
+  return /* @__PURE__ */ jsx30("div", { className: cn("border-r h-[14px] pr-2 mr-2", className) });
 };
 
-// src/core/editor/components/element-gear/plain-toolbar.tsx
+// src/core/editor/components/toolbar-ui/item.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
+var ToolbarItem = ({ children, className }) => {
+  return /* @__PURE__ */ jsx31("div", { className: cn("", className), children });
+};
+
+// src/core/editor/components/element-gear/plain-toolbar.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
 var PlainToolbar = () => {
-  return /* @__PURE__ */ jsx31(ToolbarContainer, { children: /* @__PURE__ */ jsx31(ToolbarContent, { children: /* @__PURE__ */ jsx31(BasicOption, {}) }) });
+  return /* @__PURE__ */ jsx32(ToolbarContainer, { children: /* @__PURE__ */ jsx32(ToolbarContent, { children: /* @__PURE__ */ jsx32(BasicOption, {}) }) });
 };
 
 // src/core/editor/components/element-gear/text/toolbar.tsx
@@ -2471,7 +2481,7 @@ import { TypeIcon } from "lucide-react";
 // src/components/ui/slider.tsx
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 function Slider2({
   className,
   defaultValue,
@@ -2498,14 +2508,14 @@ function Slider2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
             className: cn(
               "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ jsx32(
+            children: /* @__PURE__ */ jsx33(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -2516,7 +2526,7 @@ function Slider2({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx32(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx33(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -2531,7 +2541,7 @@ function Slider2({
 
 // src/core/editor/components/paragraph-text-settings.tsx
 import { useState as useState7, useEffect as useEffect3, useMemo as useMemo10, useCallback as useCallback11, memo as memo2 } from "react";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
   const [isOpen, setIsOpen] = useState7(false);
   const tiptapEditor = useEditorStore((s) => s.tiptapEditor);
@@ -2650,26 +2660,26 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
   }, [applyLineHeight]);
   return /* @__PURE__ */ jsxs26(Tooltip, { children: [
     /* @__PURE__ */ jsxs26(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
           disabled: !tiptapEditor,
-          children: /* @__PURE__ */ jsx33(TypeIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx34(TypeIcon, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(
         PopoverContent,
         {
           className: "w-64 z-51 mt-1 rounded-[12px]",
           "data-editor-toolbar": "true",
           children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-4", children: [
             /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsx33(Label, { children: "Letter spacing" }),
+              /* @__PURE__ */ jsx34(Label, { children: "Letter spacing" }),
               /* @__PURE__ */ jsxs26("div", { className: "flex flex-row items-center gap-2", children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   Slider2,
                   {
                     value: [currentLetterSpacing],
@@ -2680,7 +2690,7 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
                     disabled: !tiptapEditor
                   }
                 ),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   Input,
                   {
                     type: "number",
@@ -2698,9 +2708,9 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
               ] })
             ] }),
             /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsx33(Label, { children: "Line spacing" }),
+              /* @__PURE__ */ jsx34(Label, { children: "Line spacing" }),
               /* @__PURE__ */ jsxs26("div", { className: "flex flex-row items-center gap-2", children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   Slider2,
                   {
                     value: [currentLineHeight],
@@ -2711,7 +2721,7 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
                     disabled: !tiptapEditor
                   }
                 ),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   Input,
                   {
                     type: "number",
@@ -2733,13 +2743,13 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx33(TooltipContent, { side: "bottom", className: "z-51", children: "Text Settings" })
+    /* @__PURE__ */ jsx34(TooltipContent, { side: "bottom", className: "z-51", children: "Text Settings" })
   ] });
 });
 
 // src/core/editor/components/font-family-dropdown.tsx
 import { CheckIcon as CheckIcon3 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var FontFamilyDropdown = ({
   currentFont,
   onFontChange,
@@ -2747,7 +2757,7 @@ var FontFamilyDropdown = ({
 }) => {
   return /* @__PURE__ */ jsxs27(DropdownMenu, { modal: false, children: [
     /* @__PURE__ */ jsxs27(Tooltip, { children: [
-      /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
         Button,
         {
           variant: "outline",
@@ -2756,9 +2766,9 @@ var FontFamilyDropdown = ({
           children: currentFont
         }
       ) }) }),
-      /* @__PURE__ */ jsx34(TooltipContent, { side: "bottom", children: "Font" })
+      /* @__PURE__ */ jsx35(TooltipContent, { side: "bottom", children: "Font" })
     ] }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       DropdownMenuContent,
       {
         align: "start",
@@ -2772,7 +2782,7 @@ var FontFamilyDropdown = ({
             style: { fontFamily: font },
             children: [
               font,
-              currentFont === font && /* @__PURE__ */ jsx34(CheckIcon3, { className: "w-4 h-4 ml-auto" })
+              currentFont === font && /* @__PURE__ */ jsx35(CheckIcon3, { className: "w-4 h-4 ml-auto" })
             ]
           },
           font
@@ -2788,7 +2798,7 @@ import { useState as useState8, useEffect as useEffect4, useCallback as useCallb
 // src/components/ui/button-group.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
   {
@@ -2808,7 +2818,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       role: "group",
@@ -2825,7 +2835,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Comp,
     {
       className: cn(
@@ -2839,9 +2849,9 @@ function ButtonGroupText({
 
 // src/components/ui/input-group.tsx
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       "data-slot": "input-group",
@@ -2900,7 +2910,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Input,
     {
       "data-slot": "input-group-control",
@@ -2915,7 +2925,7 @@ function InputGroupInput({
 
 // src/core/editor/components/font-size-control.tsx
 import { CheckIcon as CheckIcon4, MinusIcon, PlusIcon } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var PRESET_FONT_SIZES = [6, 8, 10, 12, 14, 16, 18, 21, 24, 28, 32, 36, 48, 64, 72];
 var FontSizeControl = memo3(function FontSizeControl2({
   value,
@@ -2980,9 +2990,9 @@ var FontSizeControl = memo3(function FontSizeControl2({
     setInputValue(String(size));
     setIsPopoverOpen(false);
   }, [onChange]);
-  return /* @__PURE__ */ jsx37("div", { className: "grid w-full max-w-sm gap-6", children: /* @__PURE__ */ jsxs28(ButtonGroup, { children: [
+  return /* @__PURE__ */ jsx38("div", { className: "grid w-full max-w-sm gap-6", children: /* @__PURE__ */ jsxs28(ButtonGroup, { children: [
     /* @__PURE__ */ jsxs28(Tooltip, { children: [
-      /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx38(
         Button,
         {
           variant: "ghost",
@@ -2991,14 +3001,14 @@ var FontSizeControl = memo3(function FontSizeControl2({
           "aria-label": "Decrease Font Size",
           onClick: handleDecrease,
           disabled: disabled || value <= min,
-          children: /* @__PURE__ */ jsx37(MinusIcon, {})
+          children: /* @__PURE__ */ jsx38(MinusIcon, {})
         }
       ) }) }),
-      /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "Decrease" })
+      /* @__PURE__ */ jsx38(TooltipContent, { side: "bottom", children: "Decrease" })
     ] }),
     /* @__PURE__ */ jsxs28(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [
       /* @__PURE__ */ jsxs28(Tooltip, { children: [
-        /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(InputGroup, { className: "shadow-none border-x-0", children: /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(InputGroup, { className: "shadow-none border-x-0", children: /* @__PURE__ */ jsx38(
           InputGroupInput,
           {
             type: "number",
@@ -3014,16 +3024,16 @@ var FontSizeControl = memo3(function FontSizeControl2({
             disabled
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "Font size" })
+        /* @__PURE__ */ jsx38(TooltipContent, { side: "bottom", children: "Font size" })
       ] }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         PopoverContent,
         {
           className: "w-auto p-0 overflow-hidden z-50001 ",
           align: "center",
           side: "bottom",
           onOpenAutoFocus: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ jsx37("div", { className: "flex flex-col min-w-[100px] text-start max-h-[400px] overflow-y-auto", children: PRESET_FONT_SIZES.map((size) => /* @__PURE__ */ jsxs28(
+          children: /* @__PURE__ */ jsx38("div", { className: "flex flex-col min-w-[100px] text-start max-h-[400px] overflow-y-auto", children: PRESET_FONT_SIZES.map((size) => /* @__PURE__ */ jsxs28(
             "button",
             {
               className: `flex items-center justify-between px-3 py-1 text-sm h-[38px] hover:bg-accent cursor-pointer text-start ${value === size ? "bg-accent font-medium" : ""}`,
@@ -3032,8 +3042,8 @@ var FontSizeControl = memo3(function FontSizeControl2({
                 handlePresetSelect(size);
               },
               children: [
-                /* @__PURE__ */ jsx37("span", { className: "text-sm", children: size }),
-                value === size && /* @__PURE__ */ jsx37(CheckIcon4, { className: "w-4 h-4" })
+                /* @__PURE__ */ jsx38("span", { className: "text-sm", children: size }),
+                value === size && /* @__PURE__ */ jsx38(CheckIcon4, { className: "w-4 h-4" })
               ]
             },
             size
@@ -3042,7 +3052,7 @@ var FontSizeControl = memo3(function FontSizeControl2({
       )
     ] }),
     /* @__PURE__ */ jsxs28(Tooltip, { children: [
-      /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx38(
         Button,
         {
           variant: "ghost",
@@ -3051,10 +3061,10 @@ var FontSizeControl = memo3(function FontSizeControl2({
           "aria-label": "Increase Font Size",
           onClick: handleIncrease,
           disabled: disabled || value >= max,
-          children: /* @__PURE__ */ jsx37(PlusIcon, {})
+          children: /* @__PURE__ */ jsx38(PlusIcon, {})
         }
       ) }) }),
-      /* @__PURE__ */ jsx37(TooltipContent, { side: "bottom", children: "Increase" })
+      /* @__PURE__ */ jsx38(TooltipContent, { side: "bottom", children: "Increase" })
     ] })
   ] }) });
 });
@@ -3065,7 +3075,7 @@ import { useCallback as useCallback15, useMemo as useMemo12 } from "react";
 // src/core/editor/components/border-radius.tsx
 import { useState as useState9, useEffect as useEffect5 } from "react";
 import { SquareRoundCorner } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var BorderRadius = ({
   value,
   onChange,
@@ -3101,19 +3111,19 @@ var BorderRadius = ({
   };
   return /* @__PURE__ */ jsxs29(Tooltip, { children: [
     /* @__PURE__ */ jsxs29(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx38(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ jsx38(SquareRoundCorner, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx39(SquareRoundCorner, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsx38(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx38(Label, { children: "Corner rounding" }),
+      /* @__PURE__ */ jsx39(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx39(Label, { children: "Corner rounding" }),
         /* @__PURE__ */ jsxs29("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             Slider2,
             {
               value: [value],
@@ -3123,7 +3133,7 @@ var BorderRadius = ({
               step: 1
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             Input,
             {
               type: "number",
@@ -3139,14 +3149,14 @@ var BorderRadius = ({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx38(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ jsx39(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 
 // src/core/editor/components/stroke-weight.tsx
 import { BanIcon, MinusIcon as MinusIcon2 } from "lucide-react";
 import { useState as useState10, useEffect as useEffect6 } from "react";
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var StrokeWeight = ({
   width,
   isEnabled,
@@ -3184,40 +3194,40 @@ var StrokeWeight = ({
   };
   return /* @__PURE__ */ jsxs30(Tooltip, { children: [
     /* @__PURE__ */ jsxs30(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx39(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ jsx39(MinusIcon2, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx40(MinusIcon2, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsx39(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx40(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-3", children: [
         /* @__PURE__ */ jsxs30("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             Button,
             {
               variant: !isEnabled ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onEnabledChange(false),
-              children: /* @__PURE__ */ jsx39(BanIcon, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsx40(BanIcon, { className: "w-4 h-4" })
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             Button,
             {
               variant: isEnabled ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onEnabledChange(true),
-              children: /* @__PURE__ */ jsx39(MinusIcon2, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsx40(MinusIcon2, { className: "w-4 h-4" })
             }
           )
         ] }),
         /* @__PURE__ */ jsxs30("div", { children: [
-          /* @__PURE__ */ jsx39(Label, { children: "Stroke weight" }),
+          /* @__PURE__ */ jsx40(Label, { children: "Stroke weight" }),
           /* @__PURE__ */ jsxs30("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               Slider2,
               {
                 value: [width],
@@ -3227,7 +3237,7 @@ var StrokeWeight = ({
                 step: 1
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               Input,
               {
                 type: "number",
@@ -3244,22 +3254,22 @@ var StrokeWeight = ({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx39(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ jsx40(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 
 // src/components/ui/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ jsx41(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     CollapsiblePrimitive.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
@@ -3270,7 +3280,7 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
@@ -3398,7 +3408,7 @@ var usePadding = (options = {}) => {
 };
 
 // src/core/editor/components/better-padding.tsx
-import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var PADDING_MAX = 34;
 var BetterPadding = ({
   showPadding = true,
@@ -3423,17 +3433,17 @@ var BetterPadding = ({
   const handleToggleText = useCallback14(() => handleToggle("text"), [handleToggle]);
   return /* @__PURE__ */ jsxs31(Tooltip, { children: [
     /* @__PURE__ */ jsxs31(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ jsx41(SquareSquare, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx42(SquareSquare, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ jsxs31(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
-        showPadding && /* @__PURE__ */ jsx41(
+        showPadding && /* @__PURE__ */ jsx42(
           PaddingSectionUI,
           {
             label: "Padding",
@@ -3442,7 +3452,7 @@ var BetterPadding = ({
             data: padding
           }
         ),
-        showInnerPadding && /* @__PURE__ */ jsx41(
+        showInnerPadding && /* @__PURE__ */ jsx42(
           PaddingSectionUI,
           {
             label: "Inner Padding",
@@ -3451,7 +3461,7 @@ var BetterPadding = ({
             data: innerPadding
           }
         ),
-        showIconPadding && /* @__PURE__ */ jsx41(
+        showIconPadding && /* @__PURE__ */ jsx42(
           PaddingSectionUI,
           {
             label: "Icon Padding",
@@ -3460,7 +3470,7 @@ var BetterPadding = ({
             data: iconPadding
           }
         ),
-        showTextPadding && /* @__PURE__ */ jsx41(
+        showTextPadding && /* @__PURE__ */ jsx42(
           PaddingSectionUI,
           {
             label: "Text Padding",
@@ -3471,7 +3481,7 @@ var BetterPadding = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx41(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ jsx42(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
@@ -3575,13 +3585,13 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
     }
   }, [leftInput, data]);
   return /* @__PURE__ */ jsxs31(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
-    /* @__PURE__ */ jsx41(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx41(Button, { variant: "outline", className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsxs31("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx41("p", { children: label }),
-      /* @__PURE__ */ jsx41(ChevronDownIcon3, { className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` })
+    /* @__PURE__ */ jsx42(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx42(Button, { variant: "outline", className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsxs31("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx42("p", { children: label }),
+      /* @__PURE__ */ jsx42(ChevronDownIcon3, { className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` })
     ] }) }) }),
-    /* @__PURE__ */ jsx41(CollapsibleContent2, { className: "w-full", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx41("div", { className: "p-2", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
-        /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(CollapsibleContent2, { className: "w-full", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx42("div", { className: "p-2", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
+        /* @__PURE__ */ jsx42(
           Slider2,
           {
             value: [sliderValue],
@@ -3591,7 +3601,7 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
             step: 1
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           Input,
           {
             type: "number",
@@ -3608,8 +3618,8 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
       /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-4 p-2", children: [
         /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
           /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx41(PanelTopDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(PanelTopDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsx42(
               Input,
               {
                 type: "number",
@@ -3624,8 +3634,8 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
             )
           ] }),
           /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx41(PanelBottomDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(PanelBottomDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsx42(
               Input,
               {
                 type: "number",
@@ -3642,8 +3652,8 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
         ] }),
         /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
           /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx41(PanelLeftDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(PanelLeftDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsx42(
               Input,
               {
                 type: "number",
@@ -3658,8 +3668,8 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
             )
           ] }),
           /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx41(PanelRightDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(PanelRightDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsx42(
               Input,
               {
                 type: "number",
@@ -3691,22 +3701,22 @@ var formatBorderRadius = (value) => {
 };
 
 // src/core/editor/components/background-color-btn.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 var BackgroundColorBtn = ({ activeView, colorTarget, handleOpenBgColorPicker, currentBgColor }) => {
   return /* @__PURE__ */ jsxs32(Tooltip, { children: [
-    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx43(
       Button,
       {
         variant: "ghost",
         className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && (colorTarget === "sectionBgColor" || colorTarget === "propertyBgColor") ? "bg-muted" : ""}`,
         size: "icon",
         onClick: handleOpenBgColorPicker,
-        children: /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsx43(
           "div",
           {
             className: "w-6 h-6 rounded-full border flex items-center justify-center overflow-hidden",
             style: { backgroundColor: currentBgColor || "transparent" },
-            children: currentBgColor === "transparent" ? /* @__PURE__ */ jsx42(
+            children: currentBgColor === "transparent" ? /* @__PURE__ */ jsx43(
               "img",
               {
                 src: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/transparent-visual.svg",
@@ -3720,12 +3730,12 @@ var BackgroundColorBtn = ({ activeView, colorTarget, handleOpenBgColorPicker, cu
         )
       }
     ) }),
-    /* @__PURE__ */ jsx42(TooltipContent, { side: "bottom", className: "z-51", children: "Background Color" })
+    /* @__PURE__ */ jsx43(TooltipContent, { side: "bottom", className: "z-51", children: "Background Color" })
   ] });
 };
 
 // src/core/editor/components/element-gear/column-styles.tsx
-import { Fragment as Fragment3, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var ColumnStyles = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
@@ -3806,7 +3816,7 @@ var ColumnStyles = () => {
     updatePadding({ top: value, right: value, bottom: value, left: value });
   }, [updatePadding]);
   return /* @__PURE__ */ jsxs33(Fragment3, { children: [
-    /* @__PURE__ */ jsx43(ToolbarContent, { children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(ToolbarContent, { children: /* @__PURE__ */ jsx44(
       BackgroundColorBtn,
       {
         activeView,
@@ -3815,29 +3825,29 @@ var ColumnStyles = () => {
         currentBgColor: currentBgColor || "transparent"
       }
     ) }),
-    /* @__PURE__ */ jsx43(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx44(ToolbarSeparator, {}),
     /* @__PURE__ */ jsxs33(ToolbarContent, { children: [
       border.width > 0 && /* @__PURE__ */ jsxs33(Tooltip, { children: [
-        /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx44(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "columnStrokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx44(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx43("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx44("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx43(TooltipContent, { side: "bottom", className: "z-51", children: "Column Stroke Color" })
+        /* @__PURE__ */ jsx44(TooltipContent, { side: "bottom", className: "z-51", children: "Column Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         StrokeWeight,
         {
           width: border.width,
@@ -3847,7 +3857,7 @@ var ColumnStyles = () => {
           tooltipText: "Column Stroke Width"
         }
       ),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         BorderRadius,
         {
           value: borderRadiusValue,
@@ -3855,7 +3865,7 @@ var ColumnStyles = () => {
           tooltipText: "Column Border Radius"
         }
       ),
-      /* @__PURE__ */ jsx43(BetterPadding, { targetIdx: columnIdx, tooltipText: "Column Padding" })
+      /* @__PURE__ */ jsx44(BetterPadding, { targetIdx: columnIdx, tooltipText: "Column Padding" })
     ] })
   ] });
 };
@@ -3867,12 +3877,6 @@ var parseFontSize = (value) => {
   return isNaN(parsed) ? DEFAULT_FONT_SIZE : parsed;
 };
 
-// src/core/editor/components/toolbar-ui/overflow-container.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
-var ToolbarOverflowContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx44("div", { className: "absolute right-0 -bottom-13 bg-white p-1 rounded-[12px] shadow-lg border ", children });
-};
-
 // src/core/editor/components/element-gear/text/toolbar.tsx
 import { Fragment as Fragment4, jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var ALIGNMENTS = ["left", "center", "right", "justify"];
@@ -3895,8 +3899,8 @@ var TextToolbar = () => {
   const textEditingStyles = useEditorStore((s) => s.textEditing?.styles);
   const template = useEditorStore((s) => s.template);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [isOverflowOpen, setIsOverflowOpen] = useState12(false);
   const [updateCounter, forceUpdate] = useState12(0);
+  const [overflowOpen, setOverflowOpen] = useState12(false);
   const isInSectionColumn = useMemo13(() => {
     if (!focusIdx || !template) return false;
     const columnIdx = getParentIdx(focusIdx);
@@ -4068,204 +4072,479 @@ var TextToolbar = () => {
   const CurrentIcon = currentTypeConfig.Icon;
   return /* @__PURE__ */ jsxs34(ToolbarContainer, { children: [
     /* @__PURE__ */ jsx45(ToolbarContent, { children: /* @__PURE__ */ jsx45(BasicOption, {}) }),
-    /* @__PURE__ */ jsx45(ToolbarSeparator, {}),
-    isInSectionColumn && /* @__PURE__ */ jsxs34(Fragment4, { children: [
-      /* @__PURE__ */ jsx45(ColumnStyles, {}),
-      /* @__PURE__ */ jsx45(ToolbarSeparator, {})
+    /* @__PURE__ */ jsx45(ToolbarSeparator, { className: "hidden [@media(min-width:650px)]:block" }),
+    /* @__PURE__ */ jsxs34(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx45(
+        TextTypeItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleSetType,
+          activeType,
+          CurrentIcon
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        FontFamilyDropdownItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleSetFontFamily,
+          currentFontFamily
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        FontSizeControlItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleFontSizeChange,
+          currentFontSize
+        }
+      )
     ] }),
+    /* @__PURE__ */ jsx45(ToolbarSeparator, { className: "hidden [@media(min-width:880px)]:block" }),
     /* @__PURE__ */ jsxs34(ToolbarContent, { children: [
-      /* @__PURE__ */ jsxs34(DropdownMenu, { modal: false, children: [
-        /* @__PURE__ */ jsx45(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "shadow-none transition-none cursor-pointer rounded-[12px] gap-1",
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ jsx45(CurrentIcon, { className: "w-4 h-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(
-          DropdownMenuContent,
-          {
-            align: "start",
-            className: "z-51",
-            "data-editor-toolbar": "true",
-            children: TEXT_TYPE_OPTIONS.map(({ type, label, Icon: Icon2, disabled }) => /* @__PURE__ */ jsxs34(
-              DropdownMenuItem,
-              {
-                onClick: () => handleSetType(type),
-                className: "gap-2",
-                disabled,
-                children: [
-                  /* @__PURE__ */ jsx45(Icon2, { className: "w-4 h-4" }),
-                  label,
-                  activeType === type && /* @__PURE__ */ jsx45(CheckIcon5, { className: "w-4 h-4 ml-auto" })
-                ]
-              },
-              type
-            ))
-          }
-        )
-      ] }),
       /* @__PURE__ */ jsx45(
-        FontFamilyDropdown,
+        TextColorItem,
         {
-          currentFont: currentFontFamily,
-          onFontChange: handleSetFontFamily,
-          disabled: !tiptapEditor
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleOpenTextColorPicker,
+          currentTextColor,
+          activeView,
+          colorTarget: colorTarget || "textColor"
         }
       ),
       /* @__PURE__ */ jsx45(
-        FontSizeControl,
+        HighlightColorItem,
         {
-          value: currentFontSize,
-          onChange: handleFontSizeChange,
-          disabled: !tiptapEditor
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleOpenHighlightColorPicker,
+          currentHighlightColor,
+          activeView,
+          colorTarget: colorTarget || "highlightColor"
         }
       ),
-      /* @__PURE__ */ jsx45(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "textColor" ? "bg-muted" : ""}`,
-            size: "icon",
-            disabled: !tiptapEditor,
-            onClick: handleOpenTextColorPicker,
-            children: [
-              /* @__PURE__ */ jsx45(CaseUpperIcon, {}),
+      /* @__PURE__ */ jsx45(
+        BoldItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleBold,
+          isBoldActive
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        ItalicItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleItalic,
+          isItalicActive
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        UnderlineItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleUnderline,
+          isUnderlineActive
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        StrikethroughItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleStrike,
+          isStrikeActive
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        TextAlignmentItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          handleCycleAlignment,
+          currentAlignment,
+          tiptapEditor
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        ParagraphTextSettingsItem,
+        {
+          isResponsive: true,
+          isInSectionColumn
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx45(ToolbarSeparator, { className: isInSectionColumn ? "" : "[@media(min-width:1400px)]:hidden" }),
+    /* @__PURE__ */ jsx45(ToolbarContent, { children: /* @__PURE__ */ jsx45(ToolbarItem, { className: isInSectionColumn ? "" : "[@media(min-width:1400px)]:hidden", children: /* @__PURE__ */ jsxs34(Popover, { open: overflowOpen, onOpenChange: (open) => {
+      if (open) setOverflowOpen(true);
+    }, children: [
+      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+        Button,
+        {
+          variant: "ghost",
+          className: `shadow-none transition-none cursor-pointer ${overflowOpen ? "bg-accent" : ""}`,
+          size: "icon",
+          onClick: () => setOverflowOpen((prev) => !prev),
+          children: /* @__PURE__ */ jsx45(EllipsisIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxs34(
+        PopoverContent,
+        {
+          align: "center",
+          side: "bottom",
+          className: "z-51 p-1 shadow-sm mt-1 rounded-[12px] w-auto min-w-0 flex flex-row items-center justify-center gap-1",
+          "data-editor-toolbar": "true",
+          onPointerDownOutside: (e) => e.preventDefault(),
+          onFocusOutside: (e) => e.preventDefault(),
+          onInteractOutside: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsxs34(ToolbarContent, { children: [
               /* @__PURE__ */ jsx45(
-                "span",
+                TextTypeItem,
                 {
-                  className: "w-[14px] h-[3px] rounded-full",
-                  style: { backgroundColor: currentTextColor }
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleSetType,
+                  activeType,
+                  CurrentIcon
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                FontFamilyDropdownItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleSetFontFamily,
+                  currentFontFamily
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                FontSizeControlItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleFontSizeChange,
+                  currentFontSize
                 }
               )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
-      ] }),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "highlightColor" ? "bg-muted" : ""}`,
-            size: "icon",
-            disabled: !tiptapEditor,
-            onClick: handleOpenHighlightColorPicker,
-            children: [
-              /* @__PURE__ */ jsx45(HighlighterIcon, {}),
+            ] }),
+            /* @__PURE__ */ jsx45(ToolbarSeparator, { className: " [@media(min-width:830px)]:hidden" }),
+            /* @__PURE__ */ jsxs34(ToolbarContent, { children: [
+              isInSectionColumn && /* @__PURE__ */ jsxs34(Fragment4, { children: [
+                /* @__PURE__ */ jsx45(ColumnStyles, {}),
+                /* @__PURE__ */ jsx45(ToolbarSeparator, { className: "[@media(min-width:1400px)]:hidden" })
+              ] }),
               /* @__PURE__ */ jsx45(
-                "span",
+                TextColorItem,
                 {
-                  className: "w-[14px] h-[3px] rounded-full",
-                  style: { backgroundColor: currentHighlightColor === "transparent" ? "#FFFFFF" : currentHighlightColor }
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleOpenTextColorPicker,
+                  currentTextColor,
+                  activeView,
+                  colorTarget: colorTarget || "textColor"
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                HighlightColorItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleOpenHighlightColorPicker,
+                  currentHighlightColor,
+                  activeView,
+                  colorTarget: colorTarget || "highlightColor"
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                BoldItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleBold,
+                  isBoldActive
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                ItalicItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleItalic,
+                  isItalicActive
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                UnderlineItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleUnderline,
+                  isUnderlineActive
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                StrikethroughItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleStrike,
+                  isStrikeActive
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                TextAlignmentItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  handleCycleAlignment,
+                  currentAlignment,
+                  tiptapEditor
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                ParagraphTextSettingsItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn
                 }
               )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Highlight Color" })
-      ] }),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isBoldActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleBold,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ jsx45(BoldIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Bold" })
-      ] }),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isItalicActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleItalic,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ jsx45(ItalicIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Italic" })
-      ] }),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isUnderlineActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleUnderline,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ jsx45(Underline, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Underline" })
-      ] }),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isStrikeActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleStrike,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ jsx45(Strikethrough, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Strikethrough" })
-      ] }),
-      /* @__PURE__ */ jsxs34(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-          Button,
-          {
-            variant: "ghost",
-            className: "shadow-none transition-none cursor-pointer",
-            size: "icon",
-            onClick: handleCycleAlignment,
-            disabled: !tiptapEditor,
-            children: (() => {
-              const AlignIcon = TEXT_ALIGNMENT_ICONS[currentAlignment];
-              return /* @__PURE__ */ jsx45(AlignIcon, {});
-            })()
-          }
-        ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Alignment" })
-      ] }),
-      /* @__PURE__ */ jsx45(ParagraphTextSettings, {})
-    ] }),
-    /* @__PURE__ */ jsx45(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx45(ToolbarContent, { children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
-      /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-        Button,
-        {
-          variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer",
-          size: "icon",
-          onClick: () => setIsOverflowOpen(!isOverflowOpen),
-          children: /* @__PURE__ */ jsx45(EllipsisIcon, {})
+            ] })
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "See more" })
-    ] }) }),
-    isOverflowOpen && /* @__PURE__ */ jsx45(ToolbarOverflowContainer, { children: /* @__PURE__ */ jsxs34(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx45(Button, { variant: "ghost", size: "icon", className: "shadow-none transition-none cursor-pointer", children: /* @__PURE__ */ jsx45(BoldIcon, {}) }),
-      /* @__PURE__ */ jsx45(Button, { variant: "ghost", size: "icon", className: "shadow-none transition-none cursor-pointer", children: /* @__PURE__ */ jsx45(BoldIcon, {}) })
-    ] }) })
+      )
+    ] }) }) })
   ] });
 };
+var ParagraphTextSettingsItem = ({ isResponsive, isInSectionColumn }) => {
+  const className = isResponsive ? isInSectionColumn ? "hidden [@media(min-width:1400px)]:block" : "hidden [@media(min-width:1400px)]:block" : isInSectionColumn ? "[@media(min-width:1400px)]:hidden" : "[@media(min-width:1400px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsx45(ParagraphTextSettings, {}) });
+};
+var TextAlignmentItem = ({ isResponsive, isInSectionColumn, handleCycleAlignment, currentAlignment, tiptapEditor }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1350px)]:block" : "[@media(min-width:1350px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+      Button,
+      {
+        variant: "ghost",
+        className: "shadow-none transition-none cursor-pointer",
+        size: "icon",
+        onClick: handleCycleAlignment,
+        disabled: !tiptapEditor,
+        children: (() => {
+          const AlignIcon = TEXT_ALIGNMENT_ICONS[currentAlignment];
+          return /* @__PURE__ */ jsx45(AlignIcon, {});
+        })()
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Alignment" })
+  ] }) });
+};
+var StrikethroughItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleStrike, isStrikeActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1250px)]:block" : "[@media(min-width:1250px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isStrikeActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleStrike,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ jsx45(Strikethrough, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Strikethrough" })
+  ] }) });
+};
+var UnderlineItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleUnderline, isUnderlineActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1150px)]:block" : "[@media(min-width:1150px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isUnderlineActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleUnderline,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ jsx45(Underline, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Underline" })
+  ] }) });
+};
+var ItalicItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleItalic, isItalicActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1050px)]:block" : "[@media(min-width:1050px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isItalicActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleItalic,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ jsx45(ItalicIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Italic" })
+  ] }) });
+};
+var BoldItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleBold, isBoldActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:975px)]:block" : "[@media(min-width:975px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isBoldActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleBold,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ jsx45(BoldIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Bold" })
+  ] }) });
+};
+var HighlightColorItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleOpenHighlightColorPicker, currentHighlightColor, activeView, colorTarget }) => {
+  const className = isResponsive ? "hidden [@media(min-width:930px)]:block" : "[@media(min-width:930px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "highlightColor" ? "bg-muted" : ""}`,
+        size: "icon",
+        disabled: !tiptapEditor,
+        onClick: handleOpenHighlightColorPicker,
+        children: [
+          /* @__PURE__ */ jsx45(HighlighterIcon, {}),
+          /* @__PURE__ */ jsx45(
+            "span",
+            {
+              className: "w-[14px] h-[3px] rounded-full",
+              style: { backgroundColor: currentHighlightColor === "transparent" ? "#FFFFFF" : currentHighlightColor }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Highlight Color" })
+  ] }) });
+};
+var TextColorItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleOpenTextColorPicker, currentTextColor, activeView, colorTarget }) => {
+  const className = isResponsive ? "hidden [@media(min-width:880px)]:block" : "[@media(min-width:880px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "textColor" ? "bg-muted" : ""}`,
+        size: "icon",
+        disabled: !tiptapEditor,
+        onClick: handleOpenTextColorPicker,
+        children: [
+          /* @__PURE__ */ jsx45(CaseUpperIcon, {}),
+          /* @__PURE__ */ jsx45(
+            "span",
+            {
+              className: "w-[14px] h-[3px] rounded-full",
+              style: { backgroundColor: currentTextColor }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
+  ] }) });
+};
+var FontSizeControlItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleFontSizeChange, currentFontSize }) => {
+  const className = isResponsive ? "hidden [@media(min-width:830px)]:block" : "[@media(min-width:830px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsx45(
+    FontSizeControl,
+    {
+      value: currentFontSize,
+      onChange: handleFontSizeChange,
+      disabled: !tiptapEditor
+    }
+  ) });
+};
+var FontFamilyDropdownItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleSetFontFamily, currentFontFamily }) => {
+  const className = isResponsive ? "hidden [@media(min-width:710px)]:block" : "[@media(min-width:710px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsx45(
+    FontFamilyDropdown,
+    {
+      currentFont: currentFontFamily,
+      onFontChange: handleSetFontFamily,
+      disabled: !tiptapEditor
+    }
+  ) });
+};
+var TextTypeItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleSetType, activeType, CurrentIcon }) => {
+  const className = isResponsive ? "hidden [@media(min-width:650px)]:block" : "[@media(min-width:650px)]:hidden";
+  return /* @__PURE__ */ jsx45(ToolbarItem, { className, children: /* @__PURE__ */ jsxs34(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx45(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "shadow-none transition-none cursor-pointer rounded-[12px] gap-1",
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ jsx45(CurrentIcon, { className: "w-4 h-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx45(
+      DropdownMenuContent,
+      {
+        align: "start",
+        className: "z-51",
+        "data-editor-toolbar": "true",
+        children: TEXT_TYPE_OPTIONS.map(({ type, label, Icon: Icon2, disabled }) => /* @__PURE__ */ jsxs34(
+          DropdownMenuItem,
+          {
+            onClick: () => handleSetType(type),
+            className: "gap-2",
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx45(Icon2, { className: "w-4 h-4" }),
+              label,
+              activeType === type && /* @__PURE__ */ jsx45(CheckIcon5, { className: "w-4 h-4 ml-auto" })
+            ]
+          },
+          type
+        ))
+      }
+    )
+  ] }) });
+};
 
 // src/core/editor/components/element-gear/button/toolbar.tsx
 import { useCallback as useCallback21, useMemo as useMemo18 } from "react";
@@ -8192,10 +8471,10 @@ var PropertyTripleItemToolbar = () => {
 // src/core/editor/components/email-template-v2/toolbar/toolbar.tsx
 import { jsx as jsx67 } from "react/jsx-runtime";
 function Toolbar() {
-  const { focusIdx, template } = useEditorStore();
-  const selectedElement = focusIdx ? getValueByIdx(template, focusIdx) : null;
-  const elementType = selectedElement?.type;
-  if (selectedElement === null) {
+  const elementType = useEditorStore(
+    (s) => s.focusIdx ? getValueByIdx(s.template, s.focusIdx)?.type : null
+  );
+  if (!elementType) {
     return;
   }
   if (elementType === "text") {
@@ -8298,7 +8577,7 @@ function useAutoSave() {
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
 import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-GBVVYXAB.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-66YYN7ME.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -8306,25 +8585,19 @@ function TemplatePage({
   initialTemplate,
   onSave,
   onToast,
-  isPaidLevel = 0
+  onExit,
+  data
 }) {
-  console.log("Template page rendered!");
-  if (isPaidLevel > MAX_PAID_LEVEL) {
-    console.warn("This paid level is invalid:", isPaidLevel);
-  } else {
-    console.log("This paid level is valid:", isPaidLevel);
-  }
   useState20(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, isPaidLevel);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = useState20(false);
   const [isPageHovered, setIsPageHovered] = useState20(false);
-  const template = useEditorStore((state) => state.template);
   const previewMode = useEditorStore((state) => state.previewMode);
   const focusIdx = useEditorStore((state) => state.focusIdx);
   const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
-  const canvasBackgroundColor = template?.content?.[0]?.attributes?.["background-color"] || "#ffffff";
+  const canvasBackgroundColor = useEditorStore((s) => s.template?.content?.[0]?.attributes?.["background-color"]) || "#ffffff";
   const handlePageClick = (e) => {
     if (!previewMode && e.target === e.currentTarget) {
       setFocusIdx("content");
@@ -8345,7 +8618,7 @@ function TemplatePage({
     {
       className: "flex flex-col bg-background  overflow-hidden",
       children: [
-        /* @__PURE__ */ jsx69(TemplateHeader, { template }),
+        /* @__PURE__ */ jsx69(TemplateHeader, {}),
         /* @__PURE__ */ jsxs54("div", { className: "flex flex-row h-full bg-background", children: [
           /* @__PURE__ */ jsx69(TemplateSidebar, { editorLoading }),
           /* @__PURE__ */ jsxs54("div", { className: "flex flex-col w-full overflow-hidden h-[calc(100vh-60px)] bg-background relative", children: [
@@ -8356,7 +8629,7 @@ function TemplatePage({
                 "div",
                 {
                   className: cn(
-                    "min-h-[calc(70vh)] h-fit rounded-[12px] max-w-[626px] w-[626px] pb-0 pt-5 mt-24 mb-4 email-page-preview cursor-pointer",
+                    "min-h-[calc(70vh)] h-fit rounded-[12px] max-w-[626px] w-[626px] pb-0 pt-5 mt-24 mb-4 email-page-preview cursor-pointer [@media(max-width:950px)]:w-full [@media(max-width:950px)]:max-w-full [@media(max-width:950px)]:min-h-screen  [@media(max-width:950px)]:rounded-none [@media(max-width:950px)]:mt-0 [@media(max-width:950px)]:mb-0",
                     focusIdx === "content" && "outline outline-2 outline-blue-500",
                     isPageHovered && focusIdx !== "content" && "outline outline-2 outline-blue-300"
                   ),