@kgalexander/mcreate 0.0.13 → 0.0.15

package/dist/index.js

@@ -1687,8 +1687,8 @@ var empty_default;
 var init_empty = __esm({
   "templates/empty.json"() {
     empty_default = {
-      id: "-1",
-      name: "Empty Template",
+      id: "1",
+      name: "Playground Demo",
       version: "1.0.0",
       published: true,
       creator: "Kevin Guerrero",
@@ -1733,7 +1733,7 @@ var init_empty = __esm({
                       tagName: "mj-text",
                       data: {
                         value: {
-                          content: '<p class="paragraph" style=" padding: 4px 0; font-family: Arial, sans-serif;">&nbsp;</p>'
+                          content: '<p class="paragraph" style=" padding: 4px 0; font-family: Arial, sans-serif;">Welcome to our Open House! Please join us for a tour of this beautiful home.</p>'
                         }
                       },
                       attributes: {
@@ -1746,180 +1746,6 @@ var init_empty = __esm({
                 }
               ]
             },
-            {
-              type: "section-property-km",
-              tagName: "mj-section",
-              data: { value: { columnRows: 1, columnWidths: [] } },
-              attributes: { "background-color": "#FFFFFF", padding: "12px 12px 12px 12px" },
-              children: [
-                {
-                  type: "column",
-                  tagName: "mj-column",
-                  data: { value: {} },
-                  attributes: { "background-color": "#FFFFFF", width: "500px", padding: "0px", border: "1px solid #dddddd", "border-radius": "0px" },
-                  children: [
-                    {
-                      type: "property-card",
-                      tagName: "mj-colproperty",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://cornerstonepropertymgmt.com/wp-content/themes/cornerstone/assets/img/nofeaturedimage.jpg",
-                        "image-alt": "Beautiful modern home with pool",
-                        description: "Beautiful modern home with pool",
-                        price: "1000000",
-                        address: "123 Main Street",
-                        city: "Austin, TX 78701",
-                        beds: "",
-                        baths: "2",
-                        sqft: "1,850",
-                        href: "https://www.zillow.com/homedetails/126-Cara-Mia-Ln-Galloway-NJ-08205/68297408_zpid/?rtoken=6acd62a8-1848-41ed-919b-0034083eafca~X1-ZUu7aphk9l2689_9ej1i&utm_campaign=emo-instantsearchdigest&utm_source=email&utm_term=urn%3Amsg%3A20251026011813e84b11d632bb8725&utm_medium=email&utm_content=forsaleimage&sse=X1-SSsyx4z97dhglz0000000000_1pt02&srp=H4sIAAAAAAAAAHWRwXKDIBCGn8ZjokKQeOh0YpOZ9Nihh94yRNfozAoOYFrz9FXR1h7KgVn%2B799lF8JKN2DDUpuLlQjhswVp8uqtA9MLJx08BTwLCGlkm%2BlOFXaIA3rw4idY588bvtuyNElSEpCXQQK5JpTtk4h6YnXnKo9ouiWcUco8UdqsSMIp2fOAHz00cKu1EoCQuyGYu2CZb8TT18LLSRwtt3nw3rfg0VSQzTXLGh2Yacr1VLU9IJ7HZ1mrd4ndbHNmiJbGQMkrgsgrrfG%2FhFKi%2Fc24wt9XbOp5HDZaFpeVdyjE9BknZTRiA8otEw77R7wRwvZfu0fKi%2BqGj%2BhnXeLWRWR08uM33zV%2BmeABAAA%3D",
-                        status: "Empty",
-                        "status-color": "#B8B8B8",
-                        "is-new": "",
-                        "is-open-house": "1",
-                        "open-house-date": "2026-01-29",
-                        "open-house-time": "01:00-13:07",
-                        brokerage: "Keller Williams Atlantic Shore",
-                        "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-                        "border-radius": "0px",
-                        border: "1px solid #dddddd",
-                        "font-family": "Arial, sans-serif",
-                        "text-color": "#000000",
-                        "price-text-color": "",
-                        "details-text-color": "",
-                        "address-text-color": "",
-                        "brokerage-text-color": "#535364",
-                        "description-text-color": "",
-                        "mls-logo-text-color": "",
-                        "status-text-color": "",
-                        "new-text-color": "",
-                        "open-house-text-color": ""
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: "section-property-single-two",
-              tagName: "mj-section",
-              data: { value: { columnRows: 1, columnWidths: [] } },
-              attributes: { "background-color": "#FFFFFF", padding: "12px 12px 12px 12px" },
-              children: [
-                {
-                  type: "column",
-                  tagName: "mj-column",
-                  data: { value: {} },
-                  attributes: { "background-color": "#FFFFFF", width: "500px", padding: "0px", border: "1px solid #dddddd", "border-radius": "12px" },
-                  children: [
-                    {
-                      type: "property-card-single-two",
-                      tagName: "mj-propertysingletwo",
-                      data: { value: {} },
-                      attributes: {
-                        "image-src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXddI94MwjUVz5M4CyDxZhSkIIwWbyDF59_w&s",
-                        "image-alt": "Beautiful modern home with pool",
-                        description: "Beautiful modern home with pool",
-                        price: "324203492034",
-                        address: "123 Main Street",
-                        city: "Austin, TX 78701",
-                        beds: "",
-                        baths: "",
-                        sqft: "",
-                        href: "https://www.zillow.com/homedetails/126-Cara-Mia-Ln-Galloway-NJ-08205/68297408_zpid/?rtoken=6acd62a8-1848-41ed-919b-0034083eafca~X1-ZUu7aphk9l2689_9ej1i&utm_campaign=emo-instantsearchdigest&utm_source=email&utm_term=urn%3Amsg%3A20251026011813e84b11d632bb8725&utm_medium=email&utm_content=forsaleimage&sse=X1-SSsyx4z97dhglz0000000000_1pt02&srp=H4sIAAAAAAAAAHWRwXKDIBCGn8ZjokKQeOh0YpOZ9Nihh94yRNfozAoOYFrz9FXR1h7KgVn%2B799lF8JKN2DDUpuLlQjhswVp8uqtA9MLJx08BTwLCGlkm%2BlOFXaIA3rw4idY588bvtuyNElSEpCXQQK5JpTtk4h6YnXnKo9ouiWcUco8UdqsSMIp2fOAHz00cKu1EoCQuyGYu2CZb8TT18LLSRwtt3nw3rfg0VSQzTXLGh2Yacr1VLU9IJ7HZ1mrd4ndbHNmiJbGQMkrgsgrrfG%2FhFKi%2Fc24wt9XbOp5HDZaFpeVdyjE9BknZTRiA8otEw77R7wRwvZfu0fKi%2BqGj%2BhnXeLWRWR08uM33zV%2BmeABAAA%3D",
-                        status: "Just Listed",
-                        "status-color": "#008000",
-                        "is-new": "1",
-                        "is-open-house": "",
-                        "open-house-date": "03/25",
-                        "open-house-time": "12pm-1pm",
-                        brokerage: "Keller Williams Atlantic Shore",
-                        "mls-logo": "https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg",
-                        "border-radius": "12px",
-                        border: "1x solid #dddddd",
-                        "font-family": "Arial, sans-serif",
-                        "text-color": "#000000"
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: "section-property-triple",
-              tagName: "mj-section",
-              data: { value: { columnRows: 1, columnWidths: [] } },
-              attributes: { "background-color": "#FFFFFF", padding: "12px" },
-              children: [
-                {
-                  type: "column",
-                  tagName: "mj-column",
-                  data: { value: {} },
-                  attributes: { "background-color": "transparent", padding: "0px", "css-class": "property-triple-section-column", width: "500px" },
-                  children: [
-                    {
-                      type: "property-card-triple",
-                      tagName: "mj-propertytriple",
-                      data: { value: {} },
-                      attributes: {
-                        width: "100%",
-                        gap: "24px",
-                        "border-radius": "8px",
-                        border: "1px solid #d1d1d5",
-                        "image-height": "102px",
-                        "font-family": "Arial, sans-serif",
-                        "text-color": "#000000",
-                        "background-color": "#FFFFFF"
-                      },
-                      children: [
-                        {
-                          type: "property-card-triple-item",
-                          tagName: "mj-propertytripleitem",
-                          data: { value: {} },
-                          attributes: {
-                            "image-src": "https://photos.zillowstatic.com/fp/a8e605d336d0b5a94d91828aee3c0afb-p_i.jpg",
-                            href: "",
-                            price: "$320,000",
-                            beds: "3",
-                            baths: "2",
-                            sqft: "1,385",
-                            city: "Egg Harbor City"
-                          }
-                        },
-                        {
-                          type: "property-card-triple-item",
-                          tagName: "mj-propertytripleitem",
-                          data: { value: {} },
-                          attributes: {
-                            "image-src": "https://photos.zillowstatic.com/fp/4d72133271685e778a0126b3defd9854-p_i.jpg",
-                            href: "",
-                            price: "$282,000",
-                            beds: "2",
-                            baths: "2",
-                            sqft: "1,224",
-                            city: "Egg Harbor"
-                          }
-                        },
-                        {
-                          type: "property-card-triple-item",
-                          tagName: "mj-propertytripleitem",
-                          data: { value: {} },
-                          attributes: {
-                            "image-src": "https://photos.zillowstatic.com/fp/26e69f22548989c0e4d1ec372ce178e0-p_i.jpg",
-                            href: "",
-                            price: "$484,900",
-                            beds: "3",
-                            baths: "1",
-                            sqft: "1,417",
-                            city: "Egg Harbor"
-                          }
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
             {
               type: "section",
               tagName: "mj-section",
@@ -2017,7 +1843,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 +1867,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 +1875,7 @@ var init_editor = __esm({
           templateId: null,
           onSave: null,
           onToast: null,
+          onExit: null,
           previewMode: false,
           focusIdx: null,
           hoverIdx: null,
@@ -2073,14 +1899,22 @@ var init_editor = __esm({
           isSaving: false,
           // Subscription level (0 = free, 1-3 = paid tiers)
           isPaidLevel: 0,
+          // User data
+          images: [],
+          userData: null,
+          // Render sync
+          renderSyncNeeded: 0,
           // 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)];
@@ -2346,6 +2180,7 @@ var init_editor = __esm({
                 return;
               }
               Object.assign(element, updates);
+              state2.renderSyncNeeded += 1;
             });
           },
           // Update element content (for contenteditable)
@@ -3196,7 +3031,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 +3093,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 +3130,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)"
+      }
+    };
   }
 });
 
@@ -3295,6 +3152,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   if (cached) return cached;
   const hiddenSelectors = !isDragButtonHovered && HIDDEN_SELECTION_VISUAL_ELEMENTS.length > 0 ? HIDDEN_SELECTION_VISUAL_ELEMENTS.map((type) => `.node-type-${type}`).join(", ") : null;
   const css = `
+
   /* Base reset for email content */
   * {
     box-sizing: border-box;
@@ -3311,32 +3169,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 +3214,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 +3232,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 +3255,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 +3635,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 +3656,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 +4117,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 +4131,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 +12576,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 +12621,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 +12679,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" }),
@@ -15100,6 +15013,8 @@ function Editor({ setEditorLoading }) {
   const dataTransfer = useEditorStore((state) => state.dataTransfer);
   const textEditing = useEditorStore((state) => state.textEditing);
   const isScaling = useEditorStore((state) => state.isScaling);
+  const canvasBackgroundColor = useEditorStore((s) => s.template?.content?.[0]?.attributes?.["background-color"]) || "#f5f5f5";
+  const renderSyncNeeded = useEditorStore((state) => state.renderSyncNeeded);
   const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
   const setHoverIdx = useEditorStore((state) => state.setHoverIdx);
   const updateElementContent = useEditorStore((state) => state.updateElementContent);
@@ -15138,12 +15053,17 @@ function Editor({ setEditorLoading }) {
   const companyFooterCacheRef = (0, import_react35.useRef)(void 0);
   const lastSyncedTemplateRef = (0, import_react35.useRef)(null);
   const prevTextEditingIdxRef = (0, import_react35.useRef)(null);
+  const lastRenderSyncNeededRef = (0, import_react35.useRef)(0);
   (0, import_react35.useEffect)(() => {
     const currentIdx = textEditing?.idx ?? null;
     const prevIdx = prevTextEditingIdxRef.current;
     const switchedTarget = currentIdx !== null && prevIdx !== null && currentIdx !== prevIdx;
     prevTextEditingIdxRef.current = currentIdx;
-    if (!isEditing && (!textEditing || switchedTarget)) {
+    const forceSync = renderSyncNeeded > lastRenderSyncNeededRef.current;
+    if (forceSync) {
+      lastRenderSyncNeededRef.current = renderSyncNeeded;
+    }
+    if (forceSync || !isEditing && (!textEditing || switchedTarget)) {
       if (template === lastSyncedTemplateRef.current) {
         return;
       }
@@ -15152,7 +15072,7 @@ function Editor({ setEditorLoading }) {
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing, textEditing]);
+  }, [template, renderData, isEditing, textEditing, renderSyncNeeded]);
   (0, import_react35.useEffect)(() => {
     if (renderData && setEditorLoading) {
       setEditorLoading(false);
@@ -15952,43 +15872,45 @@ function Editor({ setEditorLoading }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "div",
           {
-            className: `editor-container rounded-b-[12px] border-t-1 border-t-accent max-w-[626px]`,
+            className: `editor-container rounded-b-[12px] max-w-[626px] w-[626px] [@media(max-width:950px)]:max-w-[100%] [@media(max-width:950px)]:w-[100%] `,
             style: {
-              width: "626px",
               height: "100%",
-              backgroundColor: "#f5f5f5",
+              backgroundColor: canvasBackgroundColor,
               overflow: "auto"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              ShadowDomRenderer,
-              {
-                html,
-                focusIdx,
-                hoverIdx,
-                dropIndicator,
-                dropTargetIdx,
-                isDragging,
-                isDragButtonHovered,
-                textEditingIdx: textEditing?.idx || null,
-                showCompanyFooter,
-                onElementClick: handleElementClick,
-                onElementHover: handleElementHover,
-                onContentInput: handleContentInput,
-                onEditingStart: handleEditingStart,
-                onEditingEnd: handleEditingEnd,
-                onDragOver: handleDragOver,
-                onDrop: handleDrop,
-                onDragLeave: handleDragLeave,
-                onSelectionRectChange: handleSelectionRectChange,
-                onShadowRootRef: handleShadowRootRef,
-                onSlashCommand: handleSlashCommand,
-                onSlashCommandClose: handleSlashCommandClose,
-                onTextEditStart: handleTextEditStart
-              }
-            )
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-full h-[4px] bg-black opacity-10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                ShadowDomRenderer,
+                {
+                  html,
+                  focusIdx,
+                  hoverIdx,
+                  dropIndicator,
+                  dropTargetIdx,
+                  isDragging,
+                  isDragButtonHovered,
+                  textEditingIdx: textEditing?.idx || null,
+                  showCompanyFooter,
+                  onElementClick: handleElementClick,
+                  onElementHover: handleElementHover,
+                  onContentInput: handleContentInput,
+                  onEditingStart: handleEditingStart,
+                  onEditingEnd: handleEditingEnd,
+                  onDragOver: handleDragOver,
+                  onDrop: handleDrop,
+                  onDragLeave: handleDragLeave,
+                  onSelectionRectChange: handleSelectionRectChange,
+                  onShadowRootRef: handleShadowRootRef,
+                  onSlashCommand: handleSlashCommand,
+                  onSlashCommandClose: handleSlashCommandClose,
+                  onTextEditStart: handleTextEditStart
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ElementsSuggestions, {}),
@@ -16110,7 +16032,7 @@ function TemplateSizeIndicator() {
     "span",
     {
       className: cn(
-        "text-xs text-muted-foreground ml-2",
+        "text-xs text-muted-foreground ml-2 hidden md:block",
         percentage > 90 && "text-yellow-600",
         isAtSizeLimit && "text-red-600"
       ),
@@ -16223,15 +16145,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,16 +16178,21 @@ 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...",
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm text-muted-foreground w-[100px] truncate text-ellipsis overflow-hidden", children: 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: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TemplateJsonView, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HistoryDebugView, {}),
+      process.env.NODE_ENV !== "production" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TemplateJsonView, {}),
+      process.env.NODE_ENV !== "production" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HistoryDebugView, {}),
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Preview, {}),
       /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownMenu, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { variant: "outline", size: "icon", className: "cursor-pointer shadow-none transition-none rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react32.MoreHorizontalIcon, { className: "w-4 h-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownMenuContent, { align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownMenuContent, { align: "end", className: "z-51", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownMenuItem, { variant: "default", className: "cursor-pointer  md:hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react32.SendIcon, { className: "w-4 h-4" }),
+            "Send Test"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownMenuSeparator, { className: " md:hidden" }),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownMenuItem, { className: "cursor-pointer", children: [
             /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react32.PencilIcon, { className: "w-4 h-4" }),
             "Change Template"
@@ -16277,7 +16212,10 @@ function TemplateHeader({ template }) {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { variant: "default", className: "cursor-pointer shadow-none transition-none rounded-[12px]", children: "Send Test" })
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { variant: "default", className: "w-fit cursor-pointer shadow-none transition-none rounded-[12px] hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react32.SendIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { children: "Send Test" })
+      ] }) })
     ] })
   ] });
 }
@@ -16876,6 +16814,7 @@ function useTemplateColors() {
 }
 
 // src/core/editor/components/email-template-v2/sidebar/view/color-selection.tsx
+init_editor();
 init_label();
 init_popover();
 
@@ -17407,7 +17346,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 +17355,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 +17415,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 +17423,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 +17518,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 +17533,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 +17801,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 +17813,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 +17851,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 +17929,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 +17939,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 +17949,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 +17965,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 +17975,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 +17992,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 +18005,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 +18024,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 +18034,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 +18044,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 +18054,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 +18064,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 +18074,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 +18084,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 +18094,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 +18104,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 +18114,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 +18127,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 +18152,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 +18172,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 +18184,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 +18238,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)(
@@ -18506,7 +18434,7 @@ var ToolbarContainer = ({ children }) => {
     {
       "data-toolbar-container": "true",
       "data-editor-toolbar": "true",
-      className: "absolute top-0 left-0 right-0 mx-auto flex flex-row items-center w-fit justify-center h-[44px] py-2 shrink-0 px-1 border m-2 bg-white dark:bg-black rounded-[12px] shadow-sm",
+      className: "absolute top-0 left-0 right-0 mx-auto m-2 flex flex-row items-center w-fit justify-center h-[44px] py-2 shrink-0 px-1 border bg-white dark:bg-black rounded-[12px] [@media(max-width:950px)]:static [@media(max-width:950px)]:mx-0 [@media(max-width:950px)]:m-0 [@media(max-width:950px)]:max-w-full [@media(max-width:950px)]:w-full [@media(max-width:950px)]:items-center [@media(max-width:950px)]:rounded-none [@media(max-width:950px)]:justify-start [@media(max-width:950px)]:shadow-none [@media(max-width:950px)]:border-0 [@media(max-width:950px)]:border-b",
       style: { zIndex: 51 },
       children
     }
@@ -18520,20 +18448,29 @@ var ToolbarContent = ({ children }) => {
 };
 
 // src/core/editor/components/toolbar-ui/separator.tsx
+init_utils();
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var ToolbarSeparator = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "border-r h-[14px] pr-2 mr-2" });
+var ToolbarSeparator = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: cn("border-r h-[14px] pr-2 mr-2", className) });
 };
 
-// src/core/editor/components/element-gear/plain-toolbar.tsx
+// src/core/editor/components/toolbar-ui/item.tsx
+init_utils();
 var import_jsx_runtime82 = require("react/jsx-runtime");
+var ToolbarItem = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: cn("", className), children });
+};
+
+// src/core/editor/components/element-gear/plain-toolbar.tsx
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var PlainToolbar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(BasicOption, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ToolbarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(BasicOption, {}) }) });
 };
 
 // src/core/editor/components/element-gear/text/toolbar.tsx
 var import_react57 = require("react");
 init_dropdown_menu();
+init_popover();
 init_button();
 var import_lucide_react54 = require("lucide-react");
 init_tooltip();
@@ -18551,7 +18488,7 @@ init_label();
 var React = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
 init_utils();
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 function Slider2({
   className,
   defaultValue,
@@ -18564,7 +18501,7 @@ function Slider2({
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     SliderPrimitive.Root,
     {
       "data-slot": "slider",
@@ -18578,14 +18515,14 @@ function Slider2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
             className: cn(
               "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -18596,7 +18533,7 @@ function Slider2({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -18614,7 +18551,7 @@ init_input();
 var import_react50 = require("react");
 init_editor();
 init_configuration();
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var ParagraphTextSettings = (0, import_react50.memo)(function ParagraphTextSettings2() {
   const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
   const tiptapEditor = useEditorStore((s) => s.tiptapEditor);
@@ -18731,28 +18668,28 @@ var ParagraphTextSettings = (0, import_react50.memo)(function ParagraphTextSetti
       e.target.blur();
     }
   }, [applyLineHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
           disabled: !tiptapEditor,
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react48.TypeIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.TypeIcon, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
         PopoverContent,
         {
           className: "w-64 z-51 mt-1 rounded-[12px]",
           "data-editor-toolbar": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Label, { children: "Letter spacing" }),
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Label, { children: "Letter spacing" }),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   Slider2,
                   {
                     value: [currentLetterSpacing],
@@ -18763,7 +18700,7 @@ var ParagraphTextSettings = (0, import_react50.memo)(function ParagraphTextSetti
                     disabled: !tiptapEditor
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   Input,
                   {
                     type: "number",
@@ -18780,10 +18717,10 @@ var ParagraphTextSettings = (0, import_react50.memo)(function ParagraphTextSetti
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Label, { children: "Line spacing" }),
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Label, { children: "Line spacing" }),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   Slider2,
                   {
                     value: [currentLineHeight],
@@ -18794,7 +18731,7 @@ var ParagraphTextSettings = (0, import_react50.memo)(function ParagraphTextSetti
                     disabled: !tiptapEditor
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   Input,
                   {
                     type: "number",
@@ -18816,7 +18753,7 @@ var ParagraphTextSettings = (0, import_react50.memo)(function ParagraphTextSetti
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Text Settings" })
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Text Settings" })
   ] });
 });
 
@@ -18826,15 +18763,15 @@ init_dropdown_menu();
 init_tooltip();
 var import_lucide_react49 = require("lucide-react");
 init_configuration();
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var FontFamilyDropdown = ({
   currentFont,
   onFontChange,
   disabled = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu, { modal: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         Button,
         {
           variant: "outline",
@@ -18843,15 +18780,15 @@ var FontFamilyDropdown = ({
           children: currentFont
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipContent, { side: "bottom", children: "Font" })
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TooltipContent, { side: "bottom", children: "Font" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       DropdownMenuContent,
       {
         align: "start",
         className: "z-51",
         "data-editor-toolbar": "true",
-        children: FONTS.map((font) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+        children: FONTS.map((font) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
           DropdownMenuItem,
           {
             onClick: () => onFontChange(font),
@@ -18859,7 +18796,7 @@ var FontFamilyDropdown = ({
             style: { fontFamily: font },
             children: [
               font,
-              currentFont === font && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react49.CheckIcon, { className: "w-4 h-4 ml-auto" })
+              currentFont === font && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.CheckIcon, { className: "w-4 h-4 ml-auto" })
             ]
           },
           font
@@ -18878,7 +18815,7 @@ var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority2 = require("class-variance-authority");
 init_utils();
 init_separator();
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority2.cva)(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
   {
@@ -18898,7 +18835,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     "div",
     {
       role: "group",
@@ -18915,7 +18852,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot3.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     Comp,
     {
       className: cn(
@@ -18933,9 +18870,9 @@ init_utils();
 init_button();
 init_input();
 init_textarea();
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -18994,7 +18931,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -19012,7 +18949,7 @@ init_tooltip();
 init_popover();
 var import_lucide_react50 = require("lucide-react");
 init_configuration();
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var PRESET_FONT_SIZES = [6, 8, 10, 12, 14, 16, 18, 21, 24, 28, 32, 36, 48, 64, 72];
 var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
   value,
@@ -19077,9 +19014,9 @@ var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
     setInputValue(String(size));
     setIsPopoverOpen(false);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "grid w-full max-w-sm gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(ButtonGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "grid w-full max-w-sm gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(ButtonGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         Button,
         {
           variant: "ghost",
@@ -19088,14 +19025,14 @@ var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
           "aria-label": "Decrease Font Size",
           onClick: handleDecrease,
           disabled: disabled || value <= min,
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react50.MinusIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react50.MinusIcon, {})
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TooltipContent, { side: "bottom", children: "Decrease" })
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipContent, { side: "bottom", children: "Decrease" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputGroup, { className: "shadow-none border-x-0", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(InputGroup, { className: "shadow-none border-x-0", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           InputGroupInput,
           {
             type: "number",
@@ -19111,16 +19048,16 @@ var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
             disabled
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TooltipContent, { side: "bottom", children: "Font size" })
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipContent, { side: "bottom", children: "Font size" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         PopoverContent,
         {
           className: "w-auto p-0 overflow-hidden z-50001 ",
           align: "center",
           side: "bottom",
           onOpenAutoFocus: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex flex-col min-w-[100px] text-start max-h-[400px] overflow-y-auto", children: PRESET_FONT_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex flex-col min-w-[100px] text-start max-h-[400px] overflow-y-auto", children: PRESET_FONT_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
             "button",
             {
               className: `flex items-center justify-between px-3 py-1 text-sm h-[38px] hover:bg-accent cursor-pointer text-start ${value === size ? "bg-accent font-medium" : ""}`,
@@ -19129,8 +19066,8 @@ var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
                 handlePresetSelect(size);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-sm", children: size }),
-                value === size && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react50.CheckIcon, { className: "w-4 h-4" })
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "text-sm", children: size }),
+                value === size && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react50.CheckIcon, { className: "w-4 h-4" })
               ]
             },
             size
@@ -19138,8 +19075,8 @@ var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         Button,
         {
           variant: "ghost",
@@ -19148,10 +19085,10 @@ var FontSizeControl = (0, import_react51.memo)(function FontSizeControl2({
           "aria-label": "Increase Font Size",
           onClick: handleIncrease,
           disabled: disabled || value >= max,
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react50.PlusIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react50.PlusIcon, {})
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TooltipContent, { side: "bottom", children: "Increase" })
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipContent, { side: "bottom", children: "Increase" })
     ] })
   ] }) });
 });
@@ -19169,7 +19106,7 @@ init_input();
 init_label();
 init_tooltip();
 var import_lucide_react51 = require("lucide-react");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var BorderRadius = ({
   value,
   onChange,
@@ -19203,21 +19140,21 @@ var BorderRadius = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react51.SquareRoundCorner, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react51.SquareRoundCorner, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Label, { children: "Corner rounding" }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Label, { children: "Corner rounding" }),
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             Slider2,
             {
               value: [value],
@@ -19227,7 +19164,7 @@ var BorderRadius = ({
               step: 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             Input,
             {
               type: "number",
@@ -19243,7 +19180,7 @@ var BorderRadius = ({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 
@@ -19255,7 +19192,7 @@ var import_lucide_react52 = require("lucide-react");
 var import_react53 = require("react");
 init_label();
 init_input();
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var StrokeWeight = ({
   width,
   isEnabled,
@@ -19291,42 +19228,42 @@ var StrokeWeight = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react52.MinusIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react52.MinusIcon, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             Button,
             {
               variant: !isEnabled ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onEnabledChange(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react52.BanIcon, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react52.BanIcon, { className: "w-4 h-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             Button,
             {
               variant: isEnabled ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onEnabledChange(true),
-              children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react52.MinusIcon, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react52.MinusIcon, { className: "w-4 h-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Label, { children: "Stroke weight" }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Label, { children: "Stroke weight" }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
               Slider2,
               {
                 value: [width],
@@ -19336,7 +19273,7 @@ var StrokeWeight = ({
                 step: 1
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
               Input,
               {
                 type: "number",
@@ -19353,7 +19290,7 @@ var StrokeWeight = ({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 
@@ -19362,16 +19299,16 @@ init_button();
 
 // src/components/ui/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     CollapsiblePrimitive.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
@@ -19382,7 +19319,7 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
@@ -19514,7 +19451,7 @@ var usePadding = (options = {}) => {
 };
 
 // src/core/editor/components/better-padding.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var PADDING_MAX = 34;
 var BetterPadding = ({
   showPadding = true,
@@ -19537,19 +19474,19 @@ var BetterPadding = ({
   const handleToggleInner = (0, import_react55.useCallback)(() => handleToggle("inner"), [handleToggle]);
   const handleToggleIcon = (0, import_react55.useCallback)(() => handleToggle("icon"), [handleToggle]);
   const handleToggleText = (0, import_react55.useCallback)(() => handleToggle("text"), [handleToggle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react53.SquareSquare, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.SquareSquare, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
-        showPadding && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
+        showPadding && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           PaddingSectionUI,
           {
             label: "Padding",
@@ -19558,7 +19495,7 @@ var BetterPadding = ({
             data: padding
           }
         ),
-        showInnerPadding && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        showInnerPadding && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           PaddingSectionUI,
           {
             label: "Inner Padding",
@@ -19567,7 +19504,7 @@ var BetterPadding = ({
             data: innerPadding
           }
         ),
-        showIconPadding && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        showIconPadding && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           PaddingSectionUI,
           {
             label: "Icon Padding",
@@ -19576,7 +19513,7 @@ var BetterPadding = ({
             data: iconPadding
           }
         ),
-        showTextPadding && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        showTextPadding && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           PaddingSectionUI,
           {
             label: "Text Padding",
@@ -19587,7 +19524,7 @@ var BetterPadding = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
@@ -19690,14 +19627,14 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
       setLeftInput(clamped.toString());
     }
   }, [leftInput, data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Button, { variant: "outline", className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react53.ChevronDownIcon, { className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` })
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button, { variant: "outline", className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.ChevronDownIcon, { className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CollapsibleContent2, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CollapsibleContent2, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           Slider2,
           {
             value: [sliderValue],
@@ -19707,7 +19644,7 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
             step: 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           Input,
           {
             type: "number",
@@ -19721,11 +19658,11 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-col gap-4 p-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react53.PanelTopDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-col gap-4 p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.PanelTopDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               Input,
               {
                 type: "number",
@@ -19739,9 +19676,9 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react53.PanelBottomDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.PanelBottomDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               Input,
               {
                 type: "number",
@@ -19756,10 +19693,10 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react53.PanelLeftDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.PanelLeftDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               Input,
               {
                 type: "number",
@@ -19773,9 +19710,9 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react53.PanelRightDashedIcon, { size: 18, className: "text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.PanelRightDashedIcon, { size: 18, className: "text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               Input,
               {
                 type: "number",
@@ -19815,22 +19752,22 @@ var formatBorderRadius = (value) => {
 // src/core/editor/components/background-color-btn.tsx
 init_tooltip();
 init_button();
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var BackgroundColorBtn = ({ activeView, colorTarget, handleOpenBgColorPicker, currentBgColor }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       Button,
       {
         variant: "ghost",
         className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && (colorTarget === "sectionBgColor" || colorTarget === "propertyBgColor") ? "bg-muted" : ""}`,
         size: "icon",
         onClick: handleOpenBgColorPicker,
-        children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           "div",
           {
             className: "w-6 h-6 rounded-full border flex items-center justify-center overflow-hidden",
             style: { backgroundColor: currentBgColor || "transparent" },
-            children: currentBgColor === "transparent" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+            children: currentBgColor === "transparent" ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               "img",
               {
                 src: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/transparent-visual.svg",
@@ -19844,12 +19781,12 @@ var BackgroundColorBtn = ({ activeView, colorTarget, handleOpenBgColorPicker, cu
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Background Color" })
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Background Color" })
   ] });
 };
 
 // src/core/editor/components/element-gear/column-styles.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var ColumnStyles = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
@@ -19929,8 +19866,8 @@ var ColumnStyles = () => {
   const handlePaddingUniformChange = (0, import_react56.useCallback)((value) => {
     updatePadding({ top: value, right: value, bottom: value, left: value });
   }, [updatePadding]);
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       BackgroundColorBtn,
       {
         activeView,
@@ -19939,29 +19876,29 @@ var ColumnStyles = () => {
         currentBgColor: currentBgColor || "transparent"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(ToolbarContent, { children: [
-      border.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(ToolbarContent, { children: [
+      border.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "columnStrokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Column Stroke Color" })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Column Stroke Color" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         StrokeWeight,
         {
           width: border.width,
@@ -19971,7 +19908,7 @@ var ColumnStyles = () => {
           tooltipText: "Column Stroke Width"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         BorderRadius,
         {
           value: borderRadiusValue,
@@ -19979,7 +19916,7 @@ var ColumnStyles = () => {
           tooltipText: "Column Border Radius"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(BetterPadding, { targetIdx: columnIdx, tooltipText: "Column Padding" })
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(BetterPadding, { targetIdx: columnIdx, tooltipText: "Column Padding" })
     ] })
   ] });
 };
@@ -19996,12 +19933,6 @@ var parseFontSize = (value) => {
   return isNaN(parsed) ? DEFAULT_FONT_SIZE : parsed;
 };
 
-// src/core/editor/components/toolbar-ui/overflow-container.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
-var ToolbarOverflowContainer = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "absolute right-0 -bottom-13 bg-white p-1 rounded-[12px] shadow-lg border ", children });
-};
-
 // src/core/editor/components/element-gear/text/toolbar.tsx
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var ALIGNMENTS = ["left", "center", "right", "justify"];
@@ -20024,8 +19955,8 @@ var TextToolbar = () => {
   const textEditingStyles = useEditorStore((s) => s.textEditing?.styles);
   const template = useEditorStore((s) => s.template);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [isOverflowOpen, setIsOverflowOpen] = (0, import_react57.useState)(false);
   const [updateCounter, forceUpdate] = (0, import_react57.useState)(0);
+  const [overflowOpen, setOverflowOpen] = (0, import_react57.useState)(false);
   const isInSectionColumn = (0, import_react57.useMemo)(() => {
     if (!focusIdx || !template) return false;
     const columnIdx = getParentIdx(focusIdx);
@@ -20197,204 +20128,479 @@ var TextToolbar = () => {
   const CurrentIcon = currentTypeConfig.Icon;
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ToolbarContainer, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(BasicOption, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, {}),
-    isInSectionColumn && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ColumnStyles, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, { className: "hidden [@media(min-width:650px)]:block" }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ToolbarContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        TextTypeItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleSetType,
+          activeType,
+          CurrentIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        FontFamilyDropdownItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleSetFontFamily,
+          currentFontFamily
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        FontSizeControlItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleFontSizeChange,
+          currentFontSize
+        }
+      )
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, { className: "hidden [@media(min-width:880px)]:block" }),
     /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ToolbarContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(DropdownMenu, { modal: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "shadow-none transition-none cursor-pointer rounded-[12px] gap-1",
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(CurrentIcon, { className: "w-4 h-4" })
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          DropdownMenuContent,
-          {
-            align: "start",
-            className: "z-51",
-            "data-editor-toolbar": "true",
-            children: TEXT_TYPE_OPTIONS.map(({ type, label, Icon: Icon2, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-              DropdownMenuItem,
-              {
-                onClick: () => handleSetType(type),
-                className: "gap-2",
-                disabled,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon2, { className: "w-4 h-4" }),
-                  label,
-                  activeType === type && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.CheckIcon, { className: "w-4 h-4 ml-auto" })
-                ]
-              },
-              type
-            ))
-          }
-        )
-      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-        FontFamilyDropdown,
+        TextColorItem,
         {
-          currentFont: currentFontFamily,
-          onFontChange: handleSetFontFamily,
-          disabled: !tiptapEditor
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleOpenTextColorPicker,
+          currentTextColor,
+          activeView,
+          colorTarget: colorTarget || "textColor"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-        FontSizeControl,
+        HighlightColorItem,
         {
-          value: currentFontSize,
-          onChange: handleFontSizeChange,
-          disabled: !tiptapEditor
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleOpenHighlightColorPicker,
+          currentHighlightColor,
+          activeView,
+          colorTarget: colorTarget || "highlightColor"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "textColor" ? "bg-muted" : ""}`,
-            size: "icon",
-            disabled: !tiptapEditor,
-            onClick: handleOpenTextColorPicker,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.CaseUpperIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        BoldItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleBold,
+          isBoldActive
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        ItalicItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleItalic,
+          isItalicActive
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        UnderlineItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleUnderline,
+          isUnderlineActive
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        StrikethroughItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          tiptapEditor,
+          handleToggleStrike,
+          isStrikeActive
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        TextAlignmentItem,
+        {
+          isResponsive: true,
+          isInSectionColumn,
+          handleCycleAlignment,
+          currentAlignment,
+          tiptapEditor
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        ParagraphTextSettingsItem,
+        {
+          isResponsive: true,
+          isInSectionColumn
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, { className: isInSectionColumn ? "" : "[@media(min-width:1400px)]:hidden" }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className: isInSectionColumn ? "" : "[@media(min-width:1400px)]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Popover, { open: overflowOpen, onOpenChange: (open) => {
+      if (open) setOverflowOpen(true);
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          className: `shadow-none transition-none cursor-pointer ${overflowOpen ? "bg-accent" : ""}`,
+          size: "icon",
+          onClick: () => setOverflowOpen((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.EllipsisIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+        PopoverContent,
+        {
+          align: "center",
+          side: "bottom",
+          className: "z-51 p-1 shadow-sm mt-1 rounded-[12px] w-auto min-w-0 flex flex-row items-center justify-center gap-1",
+          "data-editor-toolbar": "true",
+          onPointerDownOutside: (e) => e.preventDefault(),
+          onFocusOutside: (e) => e.preventDefault(),
+          onInteractOutside: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ToolbarContent, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                "span",
+                TextTypeItem,
                 {
-                  className: "w-[14px] h-[3px] rounded-full",
-                  style: { backgroundColor: currentTextColor }
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleSetType,
+                  activeType,
+                  CurrentIcon
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                FontFamilyDropdownItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleSetFontFamily,
+                  currentFontFamily
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                FontSizeControlItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleFontSizeChange,
+                  currentFontSize
                 }
               )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "highlightColor" ? "bg-muted" : ""}`,
-            size: "icon",
-            disabled: !tiptapEditor,
-            onClick: handleOpenHighlightColorPicker,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.HighlighterIcon, {}),
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, { className: " [@media(min-width:830px)]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ToolbarContent, { children: [
+              isInSectionColumn && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ColumnStyles, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, { className: "[@media(min-width:1400px)]:hidden" })
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                "span",
+                TextColorItem,
                 {
-                  className: "w-[14px] h-[3px] rounded-full",
-                  style: { backgroundColor: currentHighlightColor === "transparent" ? "#FFFFFF" : currentHighlightColor }
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleOpenTextColorPicker,
+                  currentTextColor,
+                  activeView,
+                  colorTarget: colorTarget || "textColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                HighlightColorItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleOpenHighlightColorPicker,
+                  currentHighlightColor,
+                  activeView,
+                  colorTarget: colorTarget || "highlightColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                BoldItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleBold,
+                  isBoldActive
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                ItalicItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleItalic,
+                  isItalicActive
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                UnderlineItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleUnderline,
+                  isUnderlineActive
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                StrikethroughItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  tiptapEditor,
+                  handleToggleStrike,
+                  isStrikeActive
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                TextAlignmentItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn,
+                  handleCycleAlignment,
+                  currentAlignment,
+                  tiptapEditor
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                ParagraphTextSettingsItem,
+                {
+                  isResponsive: false,
+                  isInSectionColumn
                 }
               )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Highlight Color" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isBoldActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleBold,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.BoldIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Bold" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isItalicActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleItalic,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.ItalicIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Italic" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isUnderlineActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleUnderline,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.Underline, {})
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Underline" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          Button,
-          {
-            variant: "ghost",
-            className: `shadow-none transition-none cursor-pointer ${isStrikeActive ? "bg-accent" : ""}`,
-            size: "icon",
-            onClick: handleToggleStrike,
-            disabled: !tiptapEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.Strikethrough, {})
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Strikethrough" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-          Button,
-          {
-            variant: "ghost",
-            className: "shadow-none transition-none cursor-pointer",
-            size: "icon",
-            onClick: handleCycleAlignment,
-            disabled: !tiptapEditor,
-            children: (() => {
-              const AlignIcon = TEXT_ALIGNMENT_ICONS[currentAlignment];
-              return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(AlignIcon, {});
-            })()
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Alignment" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ParagraphTextSettings, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-        Button,
-        {
-          variant: "ghost",
-          className: "shadow-none transition-none cursor-pointer",
-          size: "icon",
-          onClick: () => setIsOverflowOpen(!isOverflowOpen),
-          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.EllipsisIcon, {})
+            ] })
+          ]
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "See more" })
-    ] }) }),
-    isOverflowOpen && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarOverflowContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ToolbarContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Button, { variant: "ghost", size: "icon", className: "shadow-none transition-none cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.BoldIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Button, { variant: "ghost", size: "icon", className: "shadow-none transition-none cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.BoldIcon, {}) })
-    ] }) })
+      )
+    ] }) }) })
   ] });
 };
+var ParagraphTextSettingsItem = ({ isResponsive, isInSectionColumn }) => {
+  const className = isResponsive ? isInSectionColumn ? "hidden [@media(min-width:1400px)]:block" : "hidden [@media(min-width:1400px)]:block" : isInSectionColumn ? "[@media(min-width:1400px)]:hidden" : "[@media(min-width:1400px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ParagraphTextSettings, {}) });
+};
+var TextAlignmentItem = ({ isResponsive, isInSectionColumn, handleCycleAlignment, currentAlignment, tiptapEditor }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1350px)]:block" : "[@media(min-width:1350px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        className: "shadow-none transition-none cursor-pointer",
+        size: "icon",
+        onClick: handleCycleAlignment,
+        disabled: !tiptapEditor,
+        children: (() => {
+          const AlignIcon = TEXT_ALIGNMENT_ICONS[currentAlignment];
+          return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(AlignIcon, {});
+        })()
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Alignment" })
+  ] }) });
+};
+var StrikethroughItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleStrike, isStrikeActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1250px)]:block" : "[@media(min-width:1250px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isStrikeActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleStrike,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.Strikethrough, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Strikethrough" })
+  ] }) });
+};
+var UnderlineItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleUnderline, isUnderlineActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1150px)]:block" : "[@media(min-width:1150px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isUnderlineActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleUnderline,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.Underline, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Underline" })
+  ] }) });
+};
+var ItalicItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleItalic, isItalicActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:1050px)]:block" : "[@media(min-width:1050px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isItalicActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleItalic,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.ItalicIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Italic" })
+  ] }) });
+};
+var BoldItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleToggleBold, isBoldActive }) => {
+  const className = isResponsive ? "hidden [@media(min-width:975px)]:block" : "[@media(min-width:975px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer ${isBoldActive ? "bg-accent" : ""}`,
+        size: "icon",
+        onClick: handleToggleBold,
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.BoldIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Bold" })
+  ] }) });
+};
+var HighlightColorItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleOpenHighlightColorPicker, currentHighlightColor, activeView, colorTarget }) => {
+  const className = isResponsive ? "hidden [@media(min-width:930px)]:block" : "[@media(min-width:930px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "highlightColor" ? "bg-muted" : ""}`,
+        size: "icon",
+        disabled: !tiptapEditor,
+        onClick: handleOpenHighlightColorPicker,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.HighlighterIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            "span",
+            {
+              className: "w-[14px] h-[3px] rounded-full",
+              style: { backgroundColor: currentHighlightColor === "transparent" ? "#FFFFFF" : currentHighlightColor }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Highlight Color" })
+  ] }) });
+};
+var TextColorItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleOpenTextColorPicker, currentTextColor, activeView, colorTarget }) => {
+  const className = isResponsive ? "hidden [@media(min-width:880px)]:block" : "[@media(min-width:880px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+      Button,
+      {
+        variant: "ghost",
+        className: `shadow-none transition-none cursor-pointer flex flex-col justify-center items-center gap-0 ${activeView === "color" && colorTarget === "textColor" ? "bg-muted" : ""}`,
+        size: "icon",
+        disabled: !tiptapEditor,
+        onClick: handleOpenTextColorPicker,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.CaseUpperIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            "span",
+            {
+              className: "w-[14px] h-[3px] rounded-full",
+              style: { backgroundColor: currentTextColor }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
+  ] }) });
+};
+var FontSizeControlItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleFontSizeChange, currentFontSize }) => {
+  const className = isResponsive ? "hidden [@media(min-width:830px)]:block" : "[@media(min-width:830px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    FontSizeControl,
+    {
+      value: currentFontSize,
+      onChange: handleFontSizeChange,
+      disabled: !tiptapEditor
+    }
+  ) });
+};
+var FontFamilyDropdownItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleSetFontFamily, currentFontFamily }) => {
+  const className = isResponsive ? "hidden [@media(min-width:710px)]:block" : "[@media(min-width:710px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    FontFamilyDropdown,
+    {
+      currentFont: currentFontFamily,
+      onFontChange: handleSetFontFamily,
+      disabled: !tiptapEditor
+    }
+  ) });
+};
+var TextTypeItem = ({ isResponsive, isInSectionColumn, tiptapEditor, handleSetType, activeType, CurrentIcon }) => {
+  const className = isResponsive ? "hidden [@media(min-width:650px)]:block" : "[@media(min-width:650px)]:hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarItem, { className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "shadow-none transition-none cursor-pointer rounded-[12px] gap-1",
+        disabled: !tiptapEditor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(CurrentIcon, { className: "w-4 h-4" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      DropdownMenuContent,
+      {
+        align: "start",
+        className: "z-51",
+        "data-editor-toolbar": "true",
+        children: TEXT_TYPE_OPTIONS.map(({ type, label, Icon: Icon2, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+          DropdownMenuItem,
+          {
+            onClick: () => handleSetType(type),
+            className: "gap-2",
+            disabled,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon2, { className: "w-4 h-4" }),
+              label,
+              activeType === type && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react54.CheckIcon, { className: "w-4 h-4 ml-auto" })
+            ]
+          },
+          type
+        ))
+      }
+    )
+  ] }) });
+};
 
 // src/core/editor/components/element-gear/button/toolbar.tsx
 var import_react62 = require("react");
@@ -24437,10 +24643,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 +24762,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 +24795,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: [
@@ -24606,7 +24806,7 @@ function TemplatePage({
                 "div",
                 {
                   className: cn(
-                    "min-h-[calc(70vh)] h-fit rounded-[12px] max-w-[626px] w-[626px] pb-0 pt-5 mt-24 mb-4 email-page-preview cursor-pointer",
+                    "min-h-[calc(70vh)] h-fit rounded-[12px] max-w-[626px] w-[626px] pb-0 pt-5 mt-24 mb-4 email-page-preview cursor-pointer [@media(max-width:950px)]:w-full [@media(max-width:950px)]:max-w-full [@media(max-width:950px)]:min-h-screen  [@media(max-width:950px)]:rounded-none [@media(max-width:950px)]:mt-0 [@media(max-width:950px)]:mb-0",
                     focusIdx === "content" && "outline outline-2 outline-blue-500",
                     isPageHovered && focusIdx !== "content" && "outline outline-2 outline-blue-300"
                   ),