@kgalexander/mcreate 0.0.13 → 0.0.14

package/dist/index.js

@@ -2017,7 +2017,7 @@ function setValueAtPath(template, path, value) {
     (0, import_set.default)(template, lodashPath, value);
   }
 }
-var import_zustand, import_immer, import_middleware, import_get2, import_set, import_cloneDeep, import_immer2, SECTION_INDEX_REGEX, MAX_TEMPLATE_SIZE, defaultTemplate, MAX_PAID_LEVEL, useEditorStore;
+var import_zustand, import_immer, import_middleware, import_get2, import_set, import_cloneDeep, import_immer2, SECTION_INDEX_REGEX, MAX_TEMPLATE_SIZE, defaultTemplate, useEditorStore;
 var init_editor = __esm({
   "src/core/editor/state/editor.ts"() {
     "use strict";
@@ -2041,7 +2041,6 @@ var init_editor = __esm({
         id: page.id || generateId()
       }))
     };
-    MAX_PAID_LEVEL = 3;
     useEditorStore = (0, import_zustand.create)()(
       (0, import_middleware.devtools)(
         (0, import_immer.immer)((set) => ({
@@ -2050,6 +2049,7 @@ var init_editor = __esm({
           templateId: null,
           onSave: null,
           onToast: null,
+          onExit: null,
           previewMode: false,
           focusIdx: null,
           hoverIdx: null,
@@ -2073,14 +2073,20 @@ var init_editor = __esm({
           isSaving: false,
           // Subscription level (0 = free, 1-3 = paid tiers)
           isPaidLevel: 0,
+          // User data
+          images: [],
+          userData: null,
           // Initialize store with external template (for npm package usage)
-          initializeWithTemplate: (templateId, template, onSave, onToast, isPaidLevel) => {
+          initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit) => {
             set((state) => {
               state.templateId = templateId;
               state.template = template;
               state.onSave = onSave ?? null;
               state.onToast = onToast ?? null;
-              state.isPaidLevel = isPaidLevel ?? 0;
+              state.onExit = onExit ?? null;
+              state.isPaidLevel = data?.isPaidLevel ?? 0;
+              state.images = data?.images ?? [];
+              state.userData = data?.userData ?? null;
               state.templateSize = calculateTemplateSize(template);
               state.isAtSizeLimit = false;
               state.history = [(0, import_cloneDeep.default)(template)];
@@ -3196,7 +3202,7 @@ var init_editor = __esm({
 });
 
 // src/core/editor/constant/configuration.ts
-var import_lucide_react, BUTTON_ALIGNMENTS, ALIGNMENT_ICONS, FONTS, TEXT_ALIGNMENT_ICONS, TEXT_TYPE_OPTIONS, DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, FONT_SIZE_STEP, LINK_TYPES, detectLinkType, stripPrefix, normalizeWebsiteUrl, DEFAULT_LETTER_SPACING, MIN_LETTER_SPACING, MAX_LETTER_SPACING, LETTER_SPACING_STEP, DEFAULT_LINE_HEIGHT, MIN_LINE_HEIGHT, MAX_LINE_HEIGHT, LINE_HEIGHT_STEP, HIDDEN_SELECTION_VISUAL_ELEMENTS, NOT_DRAGGABLE_ELEMENTS, IMAGE_SELECTION_VALID_TYPES;
+var import_lucide_react, BUTTON_ALIGNMENTS, ALIGNMENT_ICONS, FONTS, TEXT_ALIGNMENT_ICONS, TEXT_TYPE_OPTIONS, DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, FONT_SIZE_STEP, LINK_TYPES, LINK_PRESETS, detectLinkType, stripPrefix, normalizeWebsiteUrl, DEFAULT_LETTER_SPACING, MIN_LETTER_SPACING, MAX_LETTER_SPACING, LETTER_SPACING_STEP, DEFAULT_LINE_HEIGHT, MIN_LINE_HEIGHT, MAX_LINE_HEIGHT, LINE_HEIGHT_STEP, HIDDEN_SELECTION_VISUAL_ELEMENTS, NOT_DRAGGABLE_ELEMENTS, EDITOR_COLORS;
 var init_configuration = __esm({
   "src/core/editor/constant/configuration.ts"() {
     "use strict";
@@ -3258,6 +3264,17 @@ var init_configuration = __esm({
         prefix: "tel:"
       }
     ];
+    LINK_PRESETS = {
+      Phone: [
+        { label: "Personal Phone", key: "personal_phone_number" },
+        { label: "Office Phone", key: "office_phone_number" },
+        { label: "Business Phone", key: "business_phone_number" }
+      ],
+      Website: [
+        { label: "Team Website", key: "team_website" },
+        { label: "Brokerage Website", key: "brokerage_website" }
+      ]
+    };
     detectLinkType = (href) => {
       if (href.startsWith("mailto:")) return LINK_TYPES[0];
       if (href.startsWith("tel:")) return LINK_TYPES[2];
@@ -3284,7 +3301,18 @@ var init_configuration = __esm({
     LINE_HEIGHT_STEP = 0.1;
     HIDDEN_SELECTION_VISUAL_ELEMENTS = ["text", "divider", "column"];
     NOT_DRAGGABLE_ELEMENTS = ["page", "social-item", "text", "property-card", "property-card-single-two", "property-card-triple", "property-card-triple-item"];
-    IMAGE_SELECTION_VALID_TYPES = ["section", "section-column", "image", "section-property-km", "section-property-single-two", "section-property-triple", "property-card", "property-card-single-two", "property-card-triple", "property-card-triple-item"];
+    EDITOR_COLORS = {
+      /** Purple — drag/drop state */
+      drag: {
+        solid: "rgb(59, 130, 246)",
+        half: "rgba(59, 130, 246, 0.5)"
+      },
+      /** Blue — hover/selection state */
+      hover: {
+        solid: "rgb(59, 130, 246)",
+        half: "rgba(59, 130, 246, 0.5)"
+      }
+    };
   }
 });
 
@@ -3311,32 +3339,32 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
 
   /* Hover state - uses CSS variable for dynamic color */
   .${EMAIL_BLOCK_CLASS_NAME}.is-hovered {
-    outline-color: var(--outline-color-hover, rgba(59, 130, 246, 0.5));
+    outline-color: var(--outline-color-hover, ${EDITOR_COLORS.hover.half});
   }
 
   /* Selected state - uses CSS variable for dynamic color */
   .${EMAIL_BLOCK_CLASS_NAME}.is-selected {
-    outline-color: var(--outline-color, rgb(59, 130, 246));
+    outline-color: var(--outline-color, ${EDITOR_COLORS.hover.solid});
   }
 
   /* Drop target state - highlight section being dropped into */
   .${EMAIL_BLOCK_CLASS_NAME}.is-drop-target {
-    outline-color: rgb(147, 51, 234) !important;
+    outline-color: ${EDITOR_COLORS.drag.solid} !important;
   }
 
   /* Column selection in section-column - 50% opacity blue */
   .${EMAIL_BLOCK_CLASS_NAME}.is-column-selected {
-    outline-color: rgba(59, 130, 246, 0.5);
+    outline-color: ${EDITOR_COLORS.hover.half};
   }
 
   /* Column hover when child element is hovered - 50% opacity blue */
   .${EMAIL_BLOCK_CLASS_NAME}.is-column-hover-parent {
-    outline-color: rgba(59, 130, 246, 0.5);
+    outline-color: ${EDITOR_COLORS.hover.half};
   }
 
   /* Card selection in property-card-triple - 50% opacity blue */
   .${EMAIL_BLOCK_CLASS_NAME}.is-card-selected {
-    outline-color: rgba(59, 130, 246, 0.5);
+    outline-color: ${EDITOR_COLORS.hover.half};
   }
 
   /* Hide selection visual for configured elements (unless drag button hovered) */
@@ -3356,12 +3384,12 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
     outline-color: transparent !important;
   }
   .node-type-button.is-selected > table {
-    outline: 2px solid var(--outline-color, rgb(59, 130, 246));
+    outline: 2px solid var(--outline-color, ${EDITOR_COLORS.hover.solid});
     outline-offset: -2px;
     border-radius: 2px;
   }
   .node-type-button.is-hovered:not(.is-selected) > table {
-    outline: 2px solid var(--outline-color-hover, rgba(59, 130, 246, 0.5));
+    outline: 2px solid var(--outline-color-hover, ${EDITOR_COLORS.hover.half});
     outline-offset: -2px;
     border-radius: 2px;
   }
@@ -3374,12 +3402,12 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
     outline-color: transparent !important;
   }
   .node-type-image.is-selected table td {
-    outline: 2px solid var(--outline-color, rgb(59, 130, 246));
+    outline: 2px solid var(--outline-color, ${EDITOR_COLORS.hover.solid});
     outline-offset: -2px;
     border-radius: 2px;
   }
   .node-type-image.is-hovered:not(.is-selected) table td {
-    outline: 2px solid var(--outline-color-hover, rgba(59, 130, 246, 0.5));
+    outline: 2px solid var(--outline-color-hover, ${EDITOR_COLORS.hover.half});
     outline-offset: -2px;
     border-radius: 2px;
   }
@@ -3397,7 +3425,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   /* Drop indicator - uses CSS variable for dynamic color */
   .drop-indicator {
     position: absolute;
-    background-color: var(--outline-color, rgb(59, 130, 246));
+    background-color: var(--outline-color, ${EDITOR_COLORS.hover.solid});
     pointer-events: none;
     z-index: 1000;
   }
@@ -3777,8 +3805,8 @@ var init_ShadowDomRenderer = __esm({
         contentWrapper.className = "shadow-content";
         contentWrapper.innerHTML = html;
         contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
-        contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
-        contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
+        contentWrapper.style.setProperty("--outline-color", isDragging ? EDITOR_COLORS.drag.solid : EDITOR_COLORS.hover.solid);
+        contentWrapper.style.setProperty("--outline-color-hover", isDragging ? EDITOR_COLORS.drag.half : EDITOR_COLORS.hover.half);
         const template = useEditorStore.getState().template;
         const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
         contentWrapper.style.setProperty("--link-color", linkColor2);
@@ -3798,8 +3826,8 @@ var init_ShadowDomRenderer = __esm({
         if (!shadowRootRef.current) return;
         const contentWrapper = shadowRootRef.current.querySelector(".shadow-content");
         if (contentWrapper) {
-          contentWrapper.style.setProperty("--outline-color", isDragging ? "rgb(147, 51, 234)" : "rgb(59, 130, 246)");
-          contentWrapper.style.setProperty("--outline-color-hover", isDragging ? "rgba(147, 51, 234, 0.5)" : "rgba(59, 130, 246, 0.5)");
+          contentWrapper.style.setProperty("--outline-color", isDragging ? EDITOR_COLORS.drag.solid : EDITOR_COLORS.hover.solid);
+          contentWrapper.style.setProperty("--outline-color-hover", isDragging ? EDITOR_COLORS.drag.half : EDITOR_COLORS.hover.half);
           contentWrapper.style.setProperty("--company-footer-opacity", showCompanyFooter ? "1" : "0.25");
           const template = useEditorStore.getState().template;
           const linkColor2 = template?.content?.[0]?.data?.value?.linkColor || "#0000ff";
@@ -4259,11 +4287,11 @@ var init_ShadowDomRenderer = __esm({
                 width: 3,
                 height: dropIndicator.height
               },
-              backgroundColor: isDragging ? "rgb(147, 51, 234)" : "#3b82f6",
+              backgroundColor: isDragging ? EDITOR_COLORS.drag.solid : EDITOR_COLORS.hover.solid,
               borderRadius: 2,
               pointerEvents: "none",
               zIndex: 9999,
-              boxShadow: isDragging ? "0 0 4px rgba(147, 51, 234, 0.5)" : "0 0 4px rgba(59, 130, 246, 0.5)"
+              boxShadow: isDragging ? `0 0 4px ${EDITOR_COLORS.drag.half}` : `0 0 4px ${EDITOR_COLORS.hover.half}`
             },
             children: (dropIndicator.isNewSection || dropIndicator.isSplitSection) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
@@ -4273,7 +4301,7 @@ var init_ShadowDomRenderer = __esm({
                   top: "50%",
                   left: "50%",
                   transform: "translate(-50%, -50%)",
-                  backgroundColor: "rgb(147, 51, 234)",
+                  backgroundColor: EDITOR_COLORS.drag.solid,
                   color: "white",
                   fontSize: 12,
                   fontWeight: 600,
@@ -12718,24 +12746,42 @@ var init_href_menu = __esm({
     init_label();
     init_separator();
     init_use_href();
+    init_editor();
     init_helper();
     init_configuration();
     import_jsx_runtime25 = require("react/jsx-runtime");
     HrefMenu = () => {
       const { href, setHref, clearHref, copyHref, hasHref } = useHref();
+      const userData = useEditorStore((s) => s.userData);
       const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
       const [inputValue, setInputValue] = (0, import_react12.useState)("");
       const [showCopied, setShowCopied] = (0, import_react12.useState)(false);
       const [linkType, setLinkType] = (0, import_react12.useState)(LINK_TYPES[1]);
       const [isLinkTypeOpen, setIsLinkTypeOpen] = (0, import_react12.useState)(false);
+      const [isPresetOpen, setIsPresetOpen] = (0, import_react12.useState)(false);
+      console.log("userData", userData);
+      const availablePresets = (0, import_react12.useMemo)(() => {
+        const presetDefs = LINK_PRESETS[linkType.name] ?? [];
+        if (!userData) return [];
+        const all = presetDefs.filter((p) => userData[p.key]).map((p) => ({ ...p, value: String(userData[p.key]) }));
+        if (!inputValue) return all;
+        const query = inputValue.toLowerCase();
+        return all.filter((p) => p.value.toLowerCase().includes(query));
+      }, [linkType.name, userData, inputValue]);
+      const handlePresetSelect = (0, import_react12.useCallback)((value) => {
+        setInputValue(value);
+        setIsPresetOpen(false);
+      }, []);
       (0, import_react12.useEffect)(() => {
         if (isOpen) {
           setLinkType(detectLinkType(href));
           setInputValue(stripPrefix(href));
+          setIsPresetOpen(true);
         }
       }, [isOpen, href]);
       const handleInputChange = (e) => {
         setInputValue(e.target.value);
+        setIsPresetOpen(true);
       };
       const buildHref = (value) => {
         if (!value) return "";
@@ -12745,15 +12791,22 @@ var init_href_menu = __esm({
         if (value.startsWith(linkType.prefix)) return value;
         return linkType.prefix + value;
       };
+      const handleInputClick = () => {
+        if (availablePresets.length > 0) {
+          setIsPresetOpen(true);
+        }
+      };
       const handleInputBlur = () => {
         setHref(buildHref(inputValue));
       };
       const handleKeyDown = (e) => {
         if (e.key === "Enter") {
           setHref(buildHref(inputValue));
+          setIsPresetOpen(false);
           setIsOpen(false);
         }
         if (e.key === "Escape") {
+          setIsPresetOpen(false);
           setIsOpen(false);
         }
       };
@@ -12796,55 +12849,85 @@ var init_href_menu = __esm({
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DropdownMenuContent, { side: "bottom", className: "w-[250px] p-3 shadow-lg z-50001", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { children: "Enter a link" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                Input,
-                {
-                  type: linkType.inputType,
-                  placeholder: linkType.placeholder,
-                  className: "w-full rounded-[12px] shadow-none pl-12 h-[44px]",
-                  value: inputValue,
-                  onChange: handleInputChange,
-                  onBlur: handleInputBlur,
-                  onKeyDown: handleKeyDown,
-                  autoFocus: true
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { size: "icon", variant: "ghost", className: "absolute shadow-none rounded-[12px] left-1.5 top-1/2 -translate-y-1/2 h-[34px] w-[34px] cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(linkType.icon, {}) }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
-                ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: isPresetOpen && availablePresets.length > 0, onOpenChange: setIsPresetOpen, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  PopoverContent,
+                  Input,
                   {
-                    side: "bottom",
-                    align: "start",
-                    className: "w-[160px] p-1 z-50001",
-                    onPointerDownOutside: (e) => e.preventDefault(),
-                    children: LINK_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-                      Button,
-                      {
-                        variant: "ghost",
-                        className: "w-full justify-between shadow-none cursor-pointer",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          setLinkType(type);
-                          setIsLinkTypeOpen(false);
+                    type: linkType.inputType,
+                    placeholder: linkType.placeholder,
+                    className: "w-full rounded-[12px] shadow-none pl-12 h-[44px]",
+                    value: inputValue,
+                    onChange: handleInputChange,
+                    onClick: handleInputClick,
+                    onBlur: handleInputBlur,
+                    onKeyDown: handleKeyDown,
+                    autoFocus: true
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: isLinkTypeOpen, onOpenChange: setIsLinkTypeOpen, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { size: "icon", variant: "ghost", className: "absolute shadow-none rounded-[12px] left-1.5 top-1/2 -translate-y-1/2 h-[34px] w-[34px] cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(linkType.icon, {}) }) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { side: "top", className: "z-50001", children: "Link Type" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    PopoverContent,
+                    {
+                      side: "bottom",
+                      align: "start",
+                      className: "w-[160px] p-1 z-50001",
+                      onPointerDownOutside: (e) => e.preventDefault(),
+                      children: LINK_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                        Button,
+                        {
+                          variant: "ghost",
+                          className: "w-full justify-between shadow-none cursor-pointer",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setLinkType(type);
+                            setIsLinkTypeOpen(false);
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(type.icon, { className: "size-4" }),
+                              type.name
+                            ] }),
+                            linkType.name === type.name && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react18.CheckIcon, { className: "size-4" })
+                          ]
                         },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(type.icon, { className: "size-4" }),
-                            type.name
-                          ] }),
-                          linkType.name === type.name && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react18.CheckIcon, { className: "size-4" })
-                        ]
+                        type.name
+                      ))
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                PopoverContent,
+                {
+                  side: "bottom",
+                  align: "start",
+                  className: "w-[var(--radix-popover-trigger-width)] p-0 overflow-hidden z-50001",
+                  onOpenAutoFocus: (e) => e.preventDefault(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: availablePresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                    "button",
+                    {
+                      className: `flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer ${inputValue === preset.value ? "bg-accent font-medium" : ""}`,
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        handlePresetSelect(preset.value);
                       },
-                      type.name
-                    ))
-                  }
-                )
-              ] })
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xs text-muted-foreground", children: preset.label }),
+                          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm", children: preset.value })
+                        ] }),
+                        inputValue === preset.value && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react18.CheckIcon, { className: "w-4 h-4 shrink-0" })
+                      ]
+                    },
+                    preset.key
+                  )) })
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Separator, { className: "my-2" }),
@@ -16223,15 +16306,23 @@ function TemplateNameDialog() {
 init_editor();
 init_core();
 var import_jsx_runtime55 = require("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 {
@@ -16248,7 +16339,7 @@ function TemplateHeader({ template }) {
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TemplateSizeIndicator, {})
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row gap-2 items-center", children: [
-      template?.name || "Loading...",
+      templateName || "Loading...",
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TemplateNameDialog, {})
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
@@ -16876,6 +16967,7 @@ function useTemplateColors() {
 }
 
 // src/core/editor/components/email-template-v2/sidebar/view/color-selection.tsx
+init_editor();
 init_label();
 init_popover();
 
@@ -17407,7 +17499,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__ */ (0, import_jsx_runtime72.jsxs)(Tooltip, { children: [
+var ColorButton = ({ colorName, color, onColorSelect, currentColor }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(Tooltip, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "button",
     {
@@ -17416,11 +17508,13 @@ var ColorButton = ({ color, onColorSelect, currentColor }) => /* @__PURE__ */ (0
       className: `aspect-square rounded-full cursor-pointer border hover:border-gray-500 ${isColorSelected(color, currentColor) ? "border-2 border-blue-500" : "border-accent"}`
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TooltipContent, { children: color })
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TooltipContent, { children: colorName || color })
 ] });
 function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "Color", colorTarget, focusIdx, currentColor }) {
   const templateColors = useTemplateColors();
   const lastPickedColorRef = (0, import_react44.useRef)(null);
+  const userData = useEditorStore((s) => s.userData);
+  const colorPalettes = userData?.brand_kits?.[0]?.color_palettes ?? [];
   const [colorWheelOpen, setColorWheelOpen] = (0, import_react44.useState)(false);
   const handleColorPickerChange = (0, import_react44.useCallback)((rgba) => {
     const hex = rgbaArrayToHex(rgba);
@@ -17474,7 +17568,7 @@ function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "C
         templateColors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ColorButton, { color, onColorSelect, currentColor }, color))
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "w-full mb-4", children: [
+    colorPalettes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "w-full mb-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-row items-center justify-between w-full mb-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-row items-center gap-2 h-[44px]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react43.Hexagon, { className: "w-4 h-4 text-muted-foreground" }),
@@ -17482,16 +17576,10 @@ function ColorSelection({ setActiveView, lastView, onColorSelect, colorType = "C
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Button, { variant: "link", className: "text-sm pr-0 cursor-pointer", children: "Edit" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "w-full flex flex-col gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label, { className: "text-xs font-medium text-muted-foreground", children: "Color palette 1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full grid grid-cols-7 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ColorButton, { color: "#FFFFFF", onColorSelect, currentColor }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label, { className: "text-xs font-medium text-muted-foreground", children: "Color palette 2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full grid grid-cols-7 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ColorButton, { color: "#E97575", onColorSelect, currentColor }) })
-        ] })
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full flex flex-col gap-4", children: colorPalettes.map((palette) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label, { className: "text-xs font-medium text-muted-foreground", children: palette.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full grid grid-cols-7 gap-2", children: palette.colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ColorButton, { colorName: c.name, color: c.hex, onColorSelect, currentColor }, c.color_id)) })
+      ] }, palette.palette_id)) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-row items-center justify-between w-full mb-1", children: [
@@ -17583,6 +17671,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 = (0, import_react45.useMemo)(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
@@ -17597,16 +17686,28 @@ var ImageSelection = ({ setActiveView, lastView, onImageSelect, focusIdx }) => {
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex flex-row items-center justify-between w-full mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "text-sm font-medium", children: "Images" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-full grid grid-cols-3 gap-3", children: IMAGES_MOCK_DATA.map((image2, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-        Button,
-        {
-          variant: "outline",
-          className: `aspect-square h-full w-full cursor-pointer shadow-none transition-none rounded-[12px] p-0 ${currentImageUrl === image2.src ? "ring-2 ring-blue-500 ring-offset-2" : ""}`,
-          onClick: () => onImageSelect?.(image2.src),
-          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { src: image2.src, alt: image2.alt, className: "w-full h-full object-cover rounded-[12px]" })
-        },
-        index
-      )) })
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "w-full grid grid-cols-3 gap-3", children: [
+        IMAGES_MOCK_DATA.map((image2, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          Button,
+          {
+            variant: "outline",
+            className: `aspect-square h-full w-full cursor-pointer shadow-none transition-none rounded-[12px] p-0 ${currentImageUrl === image2.src ? "ring-2 ring-blue-500 ring-offset-2" : ""}`,
+            onClick: () => onImageSelect?.(image2.src),
+            children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { src: image2.src, alt: image2.alt, className: "w-full h-full object-cover rounded-[12px]" })
+          },
+          index
+        )),
+        images.map((image2, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          Button,
+          {
+            variant: "outline",
+            className: `aspect-square h-full w-full cursor-pointer shadow-none transition-none rounded-[12px] p-0 ${currentImageUrl === image2.public_url ? "ring-2 ring-blue-500 ring-offset-2" : ""}`,
+            onClick: () => onImageSelect?.(image2.public_url),
+            children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { src: image2.public_url, alt: image2.original_name, className: "w-full h-full object-cover rounded-[12px]" })
+          },
+          index
+        ))
+      ] })
     ] })
   ] });
 };
@@ -17853,7 +17954,6 @@ var SelectSocial = ({ value, onChange }) => {
 };
 
 // src/core/editor/components/email-template-v2/sidebar/sidebar.tsx
-init_configuration();
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var normalizeElementType = (type) => {
   if (type === "section" || type === "section-column") return "section";
@@ -17866,11 +17966,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 ? (0, import_lodash8.get)(s.template, toTemplatePath(s.focusIdx))?.attributes : null
+  );
+  const focusedElementType = useEditorStore(
+    (s) => s.focusIdx ? (0, import_lodash8.get)(s.template, toTemplatePath(s.focusIdx))?.type : null
+  );
+  const parentElementAttrs = useEditorStore((s) => {
+    if (!s.focusIdx) return null;
+    const parentIdx = getParentIdx(s.focusIdx);
+    return parentIdx ? (0, import_lodash8.get)(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 = (0, import_react47.useRef)(void 0);
+  const previousFocusIdxRef = (0, import_react47.useRef)(null);
   const [openSidebar, setOpenSidebar] = (0, import_react47.useState)(true);
   const [updateCounter, forceUpdate] = (0, import_react47.useState)(0);
   (0, import_react47.useEffect)(() => {
@@ -17891,97 +18004,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 = (0, import_lodash8.get)(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 = (0, import_lodash8.get)(template, toTemplatePath(columnIdx));
-        return column?.attributes?.["background-color"] || null;
-      }
-      case "columnStrokeColor": {
-        const columnIdx = getParentIdx(focusIdx);
-        if (!columnIdx) return null;
-        const column = (0, import_lodash8.get)(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 = (0, import_lodash8.get)(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 = (0, import_lodash8.get)(template, toTemplatePath(columnIdx));
-        const parsed = parseBorder(column?.attributes?.border);
+        const parsed = parseBorder(parentElementAttrs?.border);
         return parsed.color || null;
       }
       case "propertyTextColor": {
-        const element2 = (0, import_lodash8.get)(template, toTemplatePath(focusIdx));
-        if (element2?.type === "property-card-triple-item") {
-          const parentIdx = getParentIdx(focusIdx);
-          if (!parentIdx) return "#111116";
-          const parent = (0, import_lodash8.get)(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 = (0, import_lodash8.get)(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]);
   (0, import_react47.useEffect)(() => {
-    if (!focusIdx || !template) {
+    if (!focusIdx || !focusedElementType) {
       previousElementTypeRef.current = void 0;
       return;
     }
-    const element = (0, import_lodash8.get)(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 = (0, import_react47.useCallback)((color) => {
     const tiptapEditor2 = useEditorStore.getState().tiptapEditor;
     if (colorTarget === "textColor" && tiptapEditor2) {
@@ -17995,9 +18082,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 = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "background-color": color }
@@ -18005,9 +18092,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "buttonBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "background-color": color }
@@ -18015,9 +18102,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "buttonStrokeColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           const parsed = parseBorder(element.attributes?.border);
           const newBorder = formatBorder({
@@ -18031,9 +18118,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "buttonTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "color": color }
@@ -18041,10 +18128,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 = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           const parsed = parseBorder(element.attributes?.border);
           const newBorder = formatBorder({
@@ -18058,11 +18145,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 = (0, import_lodash8.get)(template2, toTemplatePath(columnIdx));
+          const column = (0, import_lodash8.get)(template, toTemplatePath(columnIdx));
           if (column) {
             updateElement(columnIdx, {
               attributes: { ...column.attributes, "background-color": color }
@@ -18071,11 +18158,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 = (0, import_lodash8.get)(template2, toTemplatePath(columnIdx));
+          const column = (0, import_lodash8.get)(template, toTemplatePath(columnIdx));
           if (column) {
             const parsed = parseBorder(column.attributes?.border);
             const newBorder = formatBorder({
@@ -18090,9 +18177,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "spacerBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -18100,9 +18187,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "dividerBorderColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "border-color": color }
@@ -18110,9 +18197,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "dividerBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -18120,9 +18207,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "imageBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -18130,9 +18217,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "socialBgColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "container-background-color": color }
@@ -18140,9 +18227,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "socialTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "color": color }
@@ -18150,9 +18237,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "socialItemTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element) {
           updateElement(focusIdx2, {
             attributes: { ...element.attributes, "color": color }
@@ -18160,9 +18247,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 }
@@ -18170,9 +18257,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 } }
@@ -18180,11 +18267,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 = (0, import_lodash8.get)(template2, toTemplatePath(columnIdx));
+          const column = (0, import_lodash8.get)(template, toTemplatePath(columnIdx));
           if (column) {
             updateElement(columnIdx, {
               attributes: { ...column.attributes, "background-color": color }
@@ -18193,12 +18280,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 = (0, import_lodash8.get)(template2, toTemplatePath(columnIdx));
-          const property = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+          const column = (0, import_lodash8.get)(template, toTemplatePath(columnIdx));
+          const property = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
           if (column) {
             const parsed = parseBorder(column.attributes?.border);
             const newBorder = formatBorder({
@@ -18218,13 +18305,13 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "propertyTextColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const element = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (element?.type === "property-card-triple-item") {
           const parentIdx = getParentIdx(focusIdx2);
           if (parentIdx) {
-            const parent = (0, import_lodash8.get)(template2, toTemplatePath(parentIdx));
+            const parent = (0, import_lodash8.get)(template, toTemplatePath(parentIdx));
             if (parent) {
               updateElement(parentIdx, {
                 attributes: { ...parent.attributes, "text-color": color }
@@ -18238,9 +18325,9 @@ function TemplateSidebar({ editorLoading }) {
         }
       }
     } else if (colorTarget === "statusColor") {
-      const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-      if (focusIdx2 && template2) {
-        const property = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+      const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+      if (focusIdx2 && template) {
+        const property = (0, import_lodash8.get)(template, toTemplatePath(focusIdx2));
         if (property) {
           updateElement(focusIdx2, {
             attributes: { ...property.attributes, "status-color": color }
@@ -18250,10 +18337,17 @@ function TemplateSidebar({ editorLoading }) {
     }
   }, [colorTarget]);
   const handleImageSelect = (0, import_react47.useCallback)((imageSrc) => {
-    const { focusIdx: focusIdx2, updateElement, template: template2 } = useEditorStore.getState();
-    if (!focusIdx2 || !template2) return;
-    const element = (0, import_lodash8.get)(template2, toTemplatePath(focusIdx2));
+    const { focusIdx: focusIdx2, updateElement, template } = useEditorStore.getState();
+    if (!focusIdx2 || !template) return;
+    const element = (0, import_lodash8.get)(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 }
@@ -18297,19 +18391,6 @@ function TemplateSidebar({ editorLoading }) {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-muted-foreground", children: "Styles" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-            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__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react46.Hexagon, {})
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-muted-foreground", children: "Brand" })
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
@@ -24437,10 +24518,10 @@ init_editor();
 init_idx();
 var import_jsx_runtime118 = require("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") {
@@ -24556,25 +24637,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);
-  }
   (0, import_react83.useState)(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, isPaidLevel);
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit);
   });
   useAutoSave();
   const [editorLoading, setEditorLoading] = (0, import_react83.useState)(false);
   const [isPageHovered, setIsPageHovered] = (0, import_react83.useState)(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");
@@ -24595,7 +24670,7 @@ function TemplatePage({
     {
       className: "flex flex-col bg-background  overflow-hidden",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TemplateHeader, { template }),
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TemplateHeader, {}),
         /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-row h-full bg-background", children: [
           /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TemplateSidebar, { editorLoading }),
           /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col w-full overflow-hidden h-[calc(100vh-60px)] bg-background relative", children: [