@kgalexander/mcreate 0.0.13 → 0.0.14

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,7 +59,7 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-LAW7VVEQ.mjs";
+} from "./chunk-QGWWLZOW.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react";
@@ -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,7 +227,7 @@ function TemplateHeader({ template }) {
       /* @__PURE__ */ jsx4(TemplateSizeIndicator, {})
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-row gap-2 items-center", children: [
-      template?.name || "Loading...",
+      templateName || "Loading...",
       /* @__PURE__ */ jsx4(TemplateNameDialog, {})
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-row gap-1 items-center", children: [
@@ -257,7 +263,7 @@ function TemplateHeader({ template }) {
 
 // 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 +1363,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 +1372,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 +1432,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 +1440,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 +1529,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 +1544,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 +1819,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 +1857,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 +1935,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 +1945,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 +1955,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 +1971,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 +1981,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 +1998,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 +2011,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 +2030,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 +2040,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 +2050,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 +2060,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 +2070,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 +2080,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 +2090,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 +2100,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 +2110,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 +2120,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 +2133,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 +2158,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 +2178,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 +2190,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 +2244,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(
@@ -8192,10 +8188,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 +8294,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-WHUOFMYJ.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -8306,25 +8302,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 +8335,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: [