@kgalexander/mcreate 0.0.11 → 0.0.13

package/dist/index.mjs

@@ -29,6 +29,7 @@ import {
   MAX_FONT_SIZE,
   MAX_LETTER_SPACING,
   MAX_LINE_HEIGHT,
+  MAX_PAID_LEVEL,
   MAX_TEMPLATE_SIZE,
   MIN_FONT_SIZE,
   MIN_LETTER_SPACING,
@@ -59,9 +60,8 @@ import {
   parsePrice,
   setupDragImage,
   useEditorStore,
-  useSidebarContext,
-  useUser
-} from "./chunk-TDZCSKBT.mjs";
+  useSidebarContext
+} from "./chunk-LAW7VVEQ.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react";
@@ -257,7 +257,7 @@ function TemplateHeader({ template }) {
 
 // src/core/editor/components/email-template-v2/sidebar/sidebar.tsx
 import { useCallback as useCallback8, useEffect as useEffect2, useRef as useRef3, useMemo as useMemo6, useState as useState6 } from "react";
-import { BlocksIcon, Paintbrush, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { BlocksIcon, Hexagon as Hexagon2, Paintbrush, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 
 // src/core/editor/components/email-template-v2/sidebar/view/elements/main.tsx
 import { useState as useState2 } from "react";
@@ -690,8 +690,8 @@ import { EyeOff } from "lucide-react";
 import { CheckIcon } from "lucide-react";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var StylesBadge = ({ value }) => {
-  const { isPaid } = useUser();
-  const { template, setShowCompanyFooter } = useEditorStore();
+  const { template, setShowCompanyFooter, isPaidLevel } = useEditorStore();
+  const isPaid = isPaidLevel >= 1;
   const showCompanyFooter = useMemo(() => {
     return template.content[0]?.data?.value?.showCompanyFooter ?? true;
   }, [template]);
@@ -1519,6 +1519,10 @@ var IMAGES_MOCK_DATA = [
   {
     src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlIqGRcEU6qFIYC_nYbC88kuKRy9YKnqInVQ&s",
     alt: "Image"
+  },
+  {
+    src: "https://icons.veryicon.com/png/o/miscellaneous/face-monochrome-icon/calendar-249.png",
+    alt: "Image"
   }
 ];
 var ImageSelection = ({ setActiveView, lastView, onImageSelect, focusIdx }) => {
@@ -2231,6 +2235,19 @@ function TemplateSidebar({ editorLoading }) {
             }
           ),
           /* @__PURE__ */ jsx24("span", { className: "text-xs text-muted-foreground", children: "Styles" })
+        ] }),
+        /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsx24(
+            Button,
+            {
+              onClick: () => handleViewClick("brand"),
+              variant: "ghost",
+              size: "icon",
+              className: `shadow-none transition-none w-[44px] h-[44px] p-0 flex flex-col items-center cursor-pointer ${activeView === "brand" ? "bg-sidebar-accent" : ""}`,
+              children: /* @__PURE__ */ jsx24(Hexagon2, {})
+            }
+          ),
+          /* @__PURE__ */ jsx24("span", { className: "text-xs text-muted-foreground", children: "Brand" })
         ] })
       ] }),
       /* @__PURE__ */ jsx24(
@@ -4251,7 +4268,7 @@ var TextToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/button/toolbar.tsx
-import { useCallback as useCallback20, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback21, useMemo as useMemo18 } from "react";
 import { get as lodashGet7 } from "lodash";
 import { BoldIcon as BoldIcon2, CaseUpperIcon as CaseUpperIcon2, ItalicIcon as ItalicIcon2, Strikethrough as Strikethrough2, Underline as Underline2 } from "lucide-react";
 
@@ -4384,8 +4401,227 @@ var useSize = (options = {}) => {
   return { width, height, setWidth, setHeight };
 };
 
-// src/core/editor/components/element-gear/button/toolbar.tsx
+// src/core/editor/components/button-text-settings.tsx
+import { TypeIcon as TypeIcon2 } from "lucide-react";
+import { useState as useState13, useEffect as useEffect9, useMemo as useMemo17, useCallback as useCallback20, memo as memo4 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+var ButtonTextSettings = memo4(function ButtonTextSettings2() {
+  const [isOpen, setIsOpen] = useState13(false);
+  const focusIdx = useEditorStore((s) => s.focusIdx);
+  const template = useEditorStore((s) => s.template);
+  const updateElement = useEditorStore((s) => s.updateElement);
+  const buttonElement = useMemo17(() => {
+    return focusIdx ? getValueByIdx(template, focusIdx) : null;
+  }, [focusIdx, template]);
+  const currentLetterSpacing = useMemo17(() => {
+    if (!buttonElement?.attributes?.["letter-spacing"]) return DEFAULT_LETTER_SPACING;
+    const parsed = parseFloat(buttonElement.attributes["letter-spacing"]);
+    return isNaN(parsed) ? DEFAULT_LETTER_SPACING : parsed;
+  }, [buttonElement]);
+  const currentLineHeight = useMemo17(() => {
+    if (!buttonElement?.attributes?.["line-height"]) return DEFAULT_LINE_HEIGHT;
+    const parsed = parseFloat(buttonElement.attributes["line-height"]);
+    return isNaN(parsed) ? DEFAULT_LINE_HEIGHT : parsed;
+  }, [buttonElement]);
+  const [letterSpacingInputValue, setLetterSpacingInputValue] = useState13(
+    String(currentLetterSpacing)
+  );
+  const [isLetterSpacingInputFocused, setIsLetterSpacingInputFocused] = useState13(false);
+  const [lineHeightInputValue, setLineHeightInputValue] = useState13(
+    String(currentLineHeight)
+  );
+  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = useState13(false);
+  useEffect9(() => {
+    if (!isLetterSpacingInputFocused) {
+      setLetterSpacingInputValue(String(currentLetterSpacing));
+    }
+  }, [currentLetterSpacing, isLetterSpacingInputFocused]);
+  useEffect9(() => {
+    if (!isLineHeightInputFocused) {
+      setLineHeightInputValue(String(currentLineHeight));
+    }
+  }, [currentLineHeight, isLineHeightInputFocused]);
+  const handleLetterSpacingSliderChange = useCallback20((values) => {
+    if (!focusIdx) return;
+    const value = values[0];
+    setLetterSpacingInputValue(String(value));
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "letter-spacing": `${value}px`
+      }
+    });
+  }, [focusIdx, updateElement]);
+  const handleLetterSpacingInputChange = useCallback20((e) => {
+    setLetterSpacingInputValue(e.target.value);
+  }, []);
+  const applyLetterSpacing = useCallback20(() => {
+    if (!focusIdx) return;
+    const parsed = parseFloat(letterSpacingInputValue);
+    if (isNaN(parsed) || letterSpacingInputValue === "") {
+      setLetterSpacingInputValue(String(currentLetterSpacing));
+      return;
+    }
+    const clampedValue = Math.max(MIN_LETTER_SPACING, Math.min(parsed, MAX_LETTER_SPACING));
+    setLetterSpacingInputValue(String(clampedValue));
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "letter-spacing": `${clampedValue}px`
+      }
+    });
+  }, [focusIdx, letterSpacingInputValue, currentLetterSpacing, updateElement]);
+  const handleLetterSpacingInputBlur = useCallback20(() => {
+    setIsLetterSpacingInputFocused(false);
+    applyLetterSpacing();
+  }, [applyLetterSpacing]);
+  const handleLetterSpacingInputKeyDown = useCallback20((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      applyLetterSpacing();
+      e.target.blur();
+    }
+  }, [applyLetterSpacing]);
+  const handleLineHeightSliderChange = useCallback20((values) => {
+    if (!focusIdx) return;
+    const value = values[0];
+    setLineHeightInputValue(String(value));
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "line-height": String(value)
+      }
+    });
+  }, [focusIdx, updateElement]);
+  const handleLineHeightInputChange = useCallback20((e) => {
+    setLineHeightInputValue(e.target.value);
+  }, []);
+  const applyLineHeight = useCallback20(() => {
+    if (!focusIdx) return;
+    const parsed = parseFloat(lineHeightInputValue);
+    if (isNaN(parsed) || lineHeightInputValue === "") {
+      setLineHeightInputValue(String(currentLineHeight));
+      return;
+    }
+    const clampedValue = Math.max(MIN_LINE_HEIGHT, Math.min(parsed, MAX_LINE_HEIGHT));
+    setLineHeightInputValue(String(clampedValue));
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "line-height": String(clampedValue)
+      }
+    });
+  }, [focusIdx, lineHeightInputValue, currentLineHeight, updateElement]);
+  const handleLineHeightInputBlur = useCallback20(() => {
+    setIsLineHeightInputFocused(false);
+    applyLineHeight();
+  }, [applyLineHeight]);
+  const handleLineHeightInputKeyDown = useCallback20((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      applyLineHeight();
+      e.target.blur();
+    }
+  }, [applyLineHeight]);
+  return /* @__PURE__ */ jsxs35(Tooltip, { children: [
+    /* @__PURE__ */ jsxs35(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx46(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+        Button,
+        {
+          variant: "ghost",
+          className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
+          size: "icon",
+          disabled: !focusIdx,
+          children: /* @__PURE__ */ jsx46(TypeIcon2, { className: "w-4 h-4" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx46(
+        PopoverContent,
+        {
+          className: "w-64 z-51 mt-1 rounded-[12px]",
+          "data-editor-toolbar": "true",
+          children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsx46(Label, { children: "Letter spacing" }),
+              /* @__PURE__ */ jsxs35("div", { className: "flex flex-row items-center gap-2", children: [
+                /* @__PURE__ */ jsx46(
+                  Slider2,
+                  {
+                    value: [currentLetterSpacing],
+                    onValueChange: handleLetterSpacingSliderChange,
+                    min: MIN_LETTER_SPACING,
+                    max: MAX_LETTER_SPACING,
+                    step: LETTER_SPACING_STEP,
+                    disabled: !focusIdx
+                  }
+                ),
+                /* @__PURE__ */ jsx46(
+                  Input,
+                  {
+                    type: "number",
+                    value: letterSpacingInputValue,
+                    onChange: handleLetterSpacingInputChange,
+                    onFocus: () => setIsLetterSpacingInputFocused(true),
+                    onBlur: handleLetterSpacingInputBlur,
+                    onKeyDown: handleLetterSpacingInputKeyDown,
+                    className: "w-25 shadow-none rounded-[12px]",
+                    min: MIN_LETTER_SPACING,
+                    max: MAX_LETTER_SPACING,
+                    disabled: !focusIdx
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsx46(Label, { children: "Line spacing" }),
+              /* @__PURE__ */ jsxs35("div", { className: "flex flex-row items-center gap-2", children: [
+                /* @__PURE__ */ jsx46(
+                  Slider2,
+                  {
+                    value: [currentLineHeight],
+                    onValueChange: handleLineHeightSliderChange,
+                    min: MIN_LINE_HEIGHT,
+                    max: MAX_LINE_HEIGHT,
+                    step: LINE_HEIGHT_STEP,
+                    disabled: !focusIdx
+                  }
+                ),
+                /* @__PURE__ */ jsx46(
+                  Input,
+                  {
+                    type: "number",
+                    value: lineHeightInputValue,
+                    onChange: handleLineHeightInputChange,
+                    onFocus: () => setIsLineHeightInputFocused(true),
+                    onBlur: handleLineHeightInputBlur,
+                    onKeyDown: handleLineHeightInputKeyDown,
+                    className: "w-25 shadow-none rounded-[12px]",
+                    min: MIN_LINE_HEIGHT,
+                    max: MAX_LINE_HEIGHT,
+                    step: LINE_HEIGHT_STEP,
+                    disabled: !focusIdx
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", className: "z-51", children: "Text Settings" })
+  ] });
+});
+
+// src/core/editor/components/element-gear/button/toolbar.tsx
+import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var ButtonToolbar = () => {
   const { focusIdx, deleteElement, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
@@ -4393,41 +4629,41 @@ var ButtonToolbar = () => {
   const border = useBorder();
   const padding = usePadding();
   const size = useSize({ defaultWidth: 100, defaultHeight: 40, widthUnit: "%", heightUnit: "px" });
-  const currentElement = useMemo17(() => {
+  const currentElement = useMemo18(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return lodashGet7(template, path);
   }, [focusIdx, template]);
-  const currentBgColor = useMemo17(() => {
+  const currentBgColor = useMemo18(() => {
     return currentElement?.attributes?.["background-color"];
   }, [currentElement]);
-  const currentTextColor = useMemo17(() => {
+  const currentTextColor = useMemo18(() => {
     return currentElement?.attributes?.["color"] || "#ffffff";
   }, [currentElement]);
-  const isBold = useMemo17(() => {
+  const isBold = useMemo18(() => {
     return currentElement?.attributes?.["font-weight"] === "bold";
   }, [currentElement]);
-  const isItalic = useMemo17(() => {
+  const isItalic = useMemo18(() => {
     return currentElement?.attributes?.["font-style"] === "italic";
   }, [currentElement]);
-  const isUnderline = useMemo17(() => {
+  const isUnderline = useMemo18(() => {
     const decoration = currentElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("underline");
   }, [currentElement]);
-  const isStrikethrough = useMemo17(() => {
+  const isStrikethrough = useMemo18(() => {
     const decoration = currentElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("line-through");
   }, [currentElement]);
-  const currentAlignment = useMemo17(() => {
+  const currentAlignment = useMemo18(() => {
     return currentElement?.attributes?.["text-align"] || "left";
   }, [currentElement]);
-  const currentButtonAlign = useMemo17(() => {
+  const currentButtonAlign = useMemo18(() => {
     return currentElement?.attributes?.["align"] || "center";
   }, [currentElement]);
-  const currentFontFamily = useMemo17(() => {
+  const currentFontFamily = useMemo18(() => {
     return currentElement?.attributes?.["font-family"] || "Arial";
   }, [currentElement]);
-  const currentFontSize = useMemo17(() => {
+  const currentFontSize = useMemo18(() => {
     return parseFontSize(currentElement?.attributes?.["font-size"]);
   }, [currentElement]);
   const handleDelete = () => {
@@ -4435,36 +4671,36 @@ var ButtonToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = useCallback20(() => {
+  const handleOpenBgColorPicker = useCallback21(() => {
     setColorType("Button Color");
     setColorTarget("buttonBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback20(() => {
+  const handleOpenStrokeColorPicker = useCallback21(() => {
     setColorType("Stroke Color");
     setColorTarget("buttonStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = useCallback20(() => {
+  const handleOpenTextColorPicker = useCallback21(() => {
     setColorType("Text Color");
     setColorTarget("buttonTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = useCallback20(() => {
+  const handleToggleBold = useCallback21(() => {
     if (!focusIdx || !currentElement) return;
     const newWeight = isBold ? "normal" : "bold";
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-weight": newWeight }
     });
   }, [focusIdx, currentElement, isBold, updateElement]);
-  const handleToggleItalic = useCallback20(() => {
+  const handleToggleItalic = useCallback21(() => {
     if (!focusIdx || !currentElement) return;
     const newStyle = isItalic ? "normal" : "italic";
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-style": newStyle }
     });
   }, [focusIdx, currentElement, isItalic, updateElement]);
-  const handleToggleUnderline = useCallback20(() => {
+  const handleToggleUnderline = useCallback21(() => {
     if (!focusIdx || !currentElement) return;
     const currentDecoration = currentElement.attributes?.["text-decoration"] || "";
     let newDecoration;
@@ -4477,7 +4713,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-decoration": newDecoration || "none" }
     });
   }, [focusIdx, currentElement, isUnderline, updateElement]);
-  const handleToggleStrike = useCallback20(() => {
+  const handleToggleStrike = useCallback21(() => {
     if (!focusIdx || !currentElement) return;
     const currentDecoration = currentElement.attributes?.["text-decoration"] || "";
     let newDecoration;
@@ -4490,7 +4726,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-decoration": newDecoration || "none" }
     });
   }, [focusIdx, currentElement, isStrikethrough, updateElement]);
-  const handleCycleAlignment = useCallback20(() => {
+  const handleCycleAlignment = useCallback21(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentAlignment);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -4499,7 +4735,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-align": nextAlignment }
     });
   }, [focusIdx, currentElement, currentAlignment, updateElement]);
-  const handleCycleButtonAlign = useCallback20(() => {
+  const handleCycleButtonAlign = useCallback21(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentButtonAlign);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -4508,22 +4744,22 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "align": nextAlign }
     });
   }, [focusIdx, currentElement, currentButtonAlign, updateElement]);
-  const handleSetFontFamily = useCallback20((font) => {
+  const handleSetFontFamily = useCallback21((font) => {
     if (!focusIdx || !currentElement) return;
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-family": font }
     });
   }, [focusIdx, currentElement, updateElement]);
-  const handleFontSizeChange = useCallback20((size2) => {
+  const handleFontSizeChange = useCallback21((size2) => {
     if (!focusIdx || !currentElement) return;
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-size": `${size2}px` }
     });
   }, [focusIdx, currentElement, updateElement]);
-  return /* @__PURE__ */ jsxs35(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx46(ToolbarContent, { children: /* @__PURE__ */ jsx46(BasicOption, {}) }),
-    /* @__PURE__ */ jsx46(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs36(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx47(ToolbarContent, { children: /* @__PURE__ */ jsx47(BasicOption, {}) }),
+    /* @__PURE__ */ jsx47(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx47(
       BackgroundColorBtn,
       {
         activeView,
@@ -4532,29 +4768,29 @@ var ButtonToolbar = () => {
         currentBgColor: currentBgColor || "transparent"
       }
     ),
-    /* @__PURE__ */ jsx46(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs35(ToolbarContent, { children: [
-      border.isEnabled && /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs36(ToolbarContent, { children: [
+      border.isEnabled && /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "buttonStrokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx47(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx46("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx47("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         StrokeWeight,
         {
           width: border.width,
@@ -4563,7 +4799,7 @@ var ButtonToolbar = () => {
           onEnabledChange: border.setEnabled
         }
       ),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         BorderRadius,
         {
           value: borderRadius.value,
@@ -4571,18 +4807,18 @@ var ButtonToolbar = () => {
           tooltipText: "Corner Rounding"
         }
       ),
-      /* @__PURE__ */ jsx46(BetterPadding, { showInnerPadding: true })
+      /* @__PURE__ */ jsx47(BetterPadding, { showInnerPadding: true })
     ] }),
-    /* @__PURE__ */ jsx46(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs35(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs36(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx47(
         FontFamilyDropdown,
         {
           currentFont: currentFontFamily,
           onFontChange: handleSetFontFamily
         }
       ),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         FontSizeControl,
         {
           value: currentFontSize,
@@ -4590,10 +4826,10 @@ var ButtonToolbar = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx46(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs35(ToolbarContent, { children: [
-      /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
+    /* @__PURE__ */ jsx47(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs36(ToolbarContent, { children: [
+      /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36(
           Button,
           {
             variant: "ghost",
@@ -4601,8 +4837,8 @@ var ButtonToolbar = () => {
             size: "icon",
             onClick: handleOpenTextColorPicker,
             children: [
-              /* @__PURE__ */ jsx46(CaseUpperIcon2, {}),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx47(CaseUpperIcon2, {}),
+              /* @__PURE__ */ jsx47(
                 "span",
                 {
                   className: "w-[14px] h-[3px] rounded-full",
@@ -4612,62 +4848,62 @@ var ButtonToolbar = () => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Text Color" })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Text Color" })
       ] }),
-      /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer ${isBold ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleToggleBold,
-            children: /* @__PURE__ */ jsx46(BoldIcon2, {})
+            children: /* @__PURE__ */ jsx47(BoldIcon2, {})
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Bold" })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Bold" })
       ] }),
-      /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer ${isItalic ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleToggleItalic,
-            children: /* @__PURE__ */ jsx46(ItalicIcon2, {})
+            children: /* @__PURE__ */ jsx47(ItalicIcon2, {})
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Italic" })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Italic" })
       ] }),
-      /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer ${isUnderline ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleToggleUnderline,
-            children: /* @__PURE__ */ jsx46(Underline2, {})
+            children: /* @__PURE__ */ jsx47(Underline2, {})
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Underline" })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Underline" })
       ] }),
-      /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer ${isStrikethrough ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleToggleStrike,
-            children: /* @__PURE__ */ jsx46(Strikethrough2, {})
+            children: /* @__PURE__ */ jsx47(Strikethrough2, {})
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Strikethrough" })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Strikethrough" })
       ] }),
-      /* @__PURE__ */ jsxs35(Tooltip, { children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsxs36(Tooltip, { children: [
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           Button,
           {
             variant: "ghost",
@@ -4676,46 +4912,47 @@ var ButtonToolbar = () => {
             onClick: handleCycleAlignment,
             children: (() => {
               const AlignIcon = TEXT_ALIGNMENT_ICONS[currentAlignment];
-              return /* @__PURE__ */ jsx46(AlignIcon, {});
+              return /* @__PURE__ */ jsx47(AlignIcon, {});
             })()
           }
         ) }),
-        /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Alignment" })
-      ] })
+        /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Alignment" })
+      ] }),
+      /* @__PURE__ */ jsx47(ButtonTextSettings, {})
     ] }),
-    /* @__PURE__ */ jsx46(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx46(ToolbarContent, { children: /* @__PURE__ */ jsxs35(Tooltip, { children: [
-      /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx47(ToolbarContent, { children: /* @__PURE__ */ jsxs36(Tooltip, { children: [
+      /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleButtonAlign,
-          children: /* @__PURE__ */ jsx46("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx47("img", { src: ALIGNMENT_ICONS[currentButtonAlign], alt: "Align", className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: "Align" })
+      /* @__PURE__ */ jsx47(TooltipContent, { side: "bottom", children: "Align" })
     ] }) })
   ] });
 };
 
 // src/core/editor/components/element-gear/section/toolbar.tsx
-import { useCallback as useCallback22, useMemo as useMemo19 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo20 } from "react";
 import { get as lodashGet9 } from "lodash";
 
 // src/core/editor/components/image-menu.tsx
 import { ImageIcon, TrashIcon as TrashIcon4, UploadIcon } from "lucide-react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 
 // src/core/editor/hooks/use-image.ts
-import { useMemo as useMemo18, useCallback as useCallback21 } from "react";
+import { useMemo as useMemo19, useCallback as useCallback22 } from "react";
 import { get as lodashGet8 } from "lodash";
 var useImage = (options = {}) => {
   const { type = "background" } = options;
   const attributeName = type === "image" ? "src" : type === "property" ? "image-src" : "background-url";
   const { focusIdx, updateElement, template } = useEditorStore();
-  const { element, url, positionX, positionY, backgroundSize, backgroundRepeat, width, height } = useMemo18(() => {
+  const { element, url, positionX, positionY, backgroundSize, backgroundRepeat, width, height } = useMemo19(() => {
     if (!focusIdx || !template) {
       return {
         element: null,
@@ -4741,49 +4978,49 @@ var useImage = (options = {}) => {
       height: el?.attributes?.["height"] || "auto"
     };
   }, [focusIdx, template, attributeName]);
-  const setUrl = useCallback21((newUrl) => {
+  const setUrl = useCallback22((newUrl) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [attributeName]: newUrl }
     });
   }, [focusIdx, element, updateElement, attributeName]);
-  const removeUrl = useCallback21(() => {
+  const removeUrl = useCallback22(() => {
     if (!focusIdx || !element) return;
     const newAttributes = { ...element.attributes };
     delete newAttributes[attributeName];
     updateElement(focusIdx, { attributes: newAttributes });
   }, [focusIdx, element, updateElement, attributeName]);
-  const setPositionX = useCallback21((value) => {
+  const setPositionX = useCallback22((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-position-x": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setPositionY = useCallback21((value) => {
+  const setPositionY = useCallback22((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-position-y": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setBackgroundSize = useCallback21((value) => {
+  const setBackgroundSize = useCallback22((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-size": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setBackgroundRepeat = useCallback21((value) => {
+  const setBackgroundRepeat = useCallback22((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-repeat": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setWidth = useCallback21((value) => {
+  const setWidth = useCallback22((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, width: value }
     });
   }, [focusIdx, element, updateElement]);
-  const setHeight = useCallback21((value) => {
+  const setHeight = useCallback22((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, height: value }
@@ -4809,7 +5046,7 @@ var useImage = (options = {}) => {
 };
 
 // src/core/editor/components/image-options.tsx
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var ImageOptions = () => {
   const { width, height, setWidth, setHeight } = useImage({ type: "image" });
   const parsedWidth = parseInt(width.replace("px", ""), 10);
@@ -4834,10 +5071,10 @@ var ImageOptions = () => {
       setHeight(`${numValue}px`);
     }
   };
-  return /* @__PURE__ */ jsx47("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx47("div", { className: "flex flex-row items-center gap-2 w-full", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-row gap-2 flex-1", children: [
-    /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
-      /* @__PURE__ */ jsx47(Label, { htmlFor: "width", className: "text-xs text-muted-foreground", children: "W" }),
-      /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx48("div", { className: "flex flex-row items-center gap-2 w-full", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row gap-2 flex-1", children: [
+    /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
+      /* @__PURE__ */ jsx48(Label, { htmlFor: "width", className: "text-xs text-muted-foreground", children: "W" }),
+      /* @__PURE__ */ jsx48(
         Input,
         {
           id: "width",
@@ -4851,9 +5088,9 @@ var ImageOptions = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
-      /* @__PURE__ */ jsx47(Label, { htmlFor: "height", className: "text-xs text-muted-foreground", children: "H" }),
-      /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
+      /* @__PURE__ */ jsx48(Label, { htmlFor: "height", className: "text-xs text-muted-foreground", children: "H" }),
+      /* @__PURE__ */ jsx48(
         Input,
         {
           id: "height",
@@ -4872,7 +5109,7 @@ var ImageOptions = () => {
 
 // src/core/editor/components/bg-img-options.tsx
 import { Scaling, Repeat } from "lucide-react";
-import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var BgImgOptions = () => {
   const {
     positionX,
@@ -4884,51 +5121,51 @@ var BgImgOptions = () => {
     backgroundRepeat,
     setBackgroundRepeat
   } = useImage({ type: "background" });
-  return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx48("div", { className: "flex flex-row items-center gap-2 w-full", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row gap-2 flex-1", children: [
-      /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
-        /* @__PURE__ */ jsx48(Label, { className: "text-xs text-muted-foreground", children: "X" }),
-        /* @__PURE__ */ jsxs37(Select, { value: positionX, onValueChange: setPositionX, children: [
-          /* @__PURE__ */ jsx48(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: "X Position" }) }),
-          /* @__PURE__ */ jsx48(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs37(SelectGroup, { children: [
-            /* @__PURE__ */ jsx48(SelectItem, { value: "left", children: "Left" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "center", children: "Center" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "right", children: "Right" })
+  return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx49("div", { className: "flex flex-row items-center gap-2 w-full", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row gap-2 flex-1", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
+        /* @__PURE__ */ jsx49(Label, { className: "text-xs text-muted-foreground", children: "X" }),
+        /* @__PURE__ */ jsxs38(Select, { value: positionX, onValueChange: setPositionX, children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "X Position" }) }),
+          /* @__PURE__ */ jsx49(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs38(SelectGroup, { children: [
+            /* @__PURE__ */ jsx49(SelectItem, { value: "left", children: "Left" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "center", children: "Center" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "right", children: "Right" })
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
-        /* @__PURE__ */ jsx48(Label, { className: "text-xs text-muted-foreground", children: "Y" }),
-        /* @__PURE__ */ jsxs37(Select, { value: positionY, onValueChange: setPositionY, children: [
-          /* @__PURE__ */ jsx48(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: "Y Position" }) }),
-          /* @__PURE__ */ jsx48(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs37(SelectGroup, { children: [
-            /* @__PURE__ */ jsx48(SelectItem, { value: "top", children: "Top" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "center", children: "Center" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "bottom", children: "Bottom" })
+      /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-1.5 flex-1", children: [
+        /* @__PURE__ */ jsx49(Label, { className: "text-xs text-muted-foreground", children: "Y" }),
+        /* @__PURE__ */ jsxs38(Select, { value: positionY, onValueChange: setPositionY, children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Y Position" }) }),
+          /* @__PURE__ */ jsx49(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs38(SelectGroup, { children: [
+            /* @__PURE__ */ jsx49(SelectItem, { value: "top", children: "Top" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "center", children: "Center" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "bottom", children: "Bottom" })
           ] }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx48(Separator, { className: "my-2" }),
-    /* @__PURE__ */ jsxs37("div", { className: "flex flex-col items-center gap-2 ", children: [
-      /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-2 w-full", children: [
-        /* @__PURE__ */ jsx48(Scaling, { size: 18, className: "text-muted-foreground" }),
-        /* @__PURE__ */ jsxs37(Select, { value: backgroundSize, onValueChange: setBackgroundSize, children: [
-          /* @__PURE__ */ jsx48(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: "Background Size" }) }),
-          /* @__PURE__ */ jsx48(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs37(SelectGroup, { children: [
-            /* @__PURE__ */ jsx48(SelectItem, { value: "auto", children: "Auto" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "cover", children: "Cover" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "contain", children: "Contain" })
+    /* @__PURE__ */ jsx49(Separator, { className: "my-2" }),
+    /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center gap-2 ", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-2 w-full", children: [
+        /* @__PURE__ */ jsx49(Scaling, { size: 18, className: "text-muted-foreground" }),
+        /* @__PURE__ */ jsxs38(Select, { value: backgroundSize, onValueChange: setBackgroundSize, children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Background Size" }) }),
+          /* @__PURE__ */ jsx49(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs38(SelectGroup, { children: [
+            /* @__PURE__ */ jsx49(SelectItem, { value: "auto", children: "Auto" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "cover", children: "Cover" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "contain", children: "Contain" })
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-2 w-full", children: [
-        /* @__PURE__ */ jsx48(Repeat, { size: 18, className: "text-muted-foreground" }),
-        /* @__PURE__ */ jsxs37(Select, { value: backgroundRepeat, onValueChange: setBackgroundRepeat, children: [
-          /* @__PURE__ */ jsx48(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: "Background Repeat" }) }),
-          /* @__PURE__ */ jsx48(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs37(SelectGroup, { children: [
-            /* @__PURE__ */ jsx48(SelectItem, { value: "repeat", children: "Repeat" }),
-            /* @__PURE__ */ jsx48(SelectItem, { value: "no-repeat", children: "No Repeat" })
+      /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-2 w-full", children: [
+        /* @__PURE__ */ jsx49(Repeat, { size: 18, className: "text-muted-foreground" }),
+        /* @__PURE__ */ jsxs38(Select, { value: backgroundRepeat, onValueChange: setBackgroundRepeat, children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full rounded-[12px] shadow-none", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Background Repeat" }) }),
+          /* @__PURE__ */ jsx49(SelectContent, { className: "z-51", children: /* @__PURE__ */ jsxs38(SelectGroup, { children: [
+            /* @__PURE__ */ jsx49(SelectItem, { value: "repeat", children: "Repeat" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "no-repeat", children: "No Repeat" })
           ] }) })
         ] })
       ] })
@@ -4937,9 +5174,9 @@ var BgImgOptions = () => {
 };
 
 // src/core/editor/components/image-menu.tsx
-import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var ImageMenu = ({ type }) => {
-  const [isOpen, setIsOpen] = useState13(false);
+  const [isOpen, setIsOpen] = useState14(false);
   const { setActiveView, setImageTarget } = useSidebarContext();
   const { url, removeUrl } = useImage({ type });
   const handleSelectImage = () => {
@@ -4952,41 +5189,41 @@ var ImageMenu = ({ type }) => {
     removeUrl();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs38(Tooltip, { children: [
-    /* @__PURE__ */ jsxs38(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs39(Tooltip, { children: [
+    /* @__PURE__ */ jsxs39(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(
         Button,
         {
           variant: "outline",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: url && !url.includes("https://placehold.co/600x200") ? /* @__PURE__ */ jsx49("img", { src: url, alt: "Background Image", className: "w-full h-full object-cover rounded-[12px]" }) : /* @__PURE__ */ jsx49(ImageIcon, { className: "w-4 h-4" })
+          children: url && !url.includes("https://placehold.co/600x200") ? /* @__PURE__ */ jsx50("img", { src: url, alt: "Background Image", className: "w-full h-full object-cover rounded-[12px]" }) : /* @__PURE__ */ jsx50(ImageIcon, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsxs38(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-3", children: [
-        /* @__PURE__ */ jsxs38("div", { className: "flex flex-row gap-2", children: [
-          /* @__PURE__ */ jsxs38(Button, { variant: "outline", className: "w-full flex-1 cursor-pointer shadow-none transition-none", onClick: handleSelectImage, children: [
-            /* @__PURE__ */ jsx49(UploadIcon, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs39(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-3", children: [
+        /* @__PURE__ */ jsxs39("div", { className: "flex flex-row gap-2", children: [
+          /* @__PURE__ */ jsxs39(Button, { variant: "outline", className: "w-full flex-1 cursor-pointer shadow-none transition-none", onClick: handleSelectImage, children: [
+            /* @__PURE__ */ jsx50(UploadIcon, { className: "w-4 h-4" }),
             url ? "Change Image" : "Select Image"
           ] }),
-          /* @__PURE__ */ jsx49(Button, { disabled: !url, variant: "ghost", size: "icon", className: " cursor-pointer shadow-none transition-none", onClick: handleRemoveImage, children: /* @__PURE__ */ jsx49(TrashIcon4, { className: "w-4 h-4" }) })
+          /* @__PURE__ */ jsx50(Button, { disabled: !url, variant: "ghost", size: "icon", className: " cursor-pointer shadow-none transition-none", onClick: handleRemoveImage, children: /* @__PURE__ */ jsx50(TrashIcon4, { className: "w-4 h-4" }) })
         ] }),
-        type !== "property" && /* @__PURE__ */ jsxs38(Fragment5, { children: [
-          /* @__PURE__ */ jsx49(Separator, { className: "my-2" }),
-          /* @__PURE__ */ jsx49("div", { children: type === "background" ? /* @__PURE__ */ jsx49(BgImgOptions, {}) : /* @__PURE__ */ jsx49(ImageOptions, {}) })
+        type !== "property" && /* @__PURE__ */ jsxs39(Fragment5, { children: [
+          /* @__PURE__ */ jsx50(Separator, { className: "my-2" }),
+          /* @__PURE__ */ jsx50("div", { children: type === "background" ? /* @__PURE__ */ jsx50(BgImgOptions, {}) : /* @__PURE__ */ jsx50(ImageOptions, {}) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx49(TooltipContent, { side: "bottom", className: "z-51", children: /* @__PURE__ */ jsx49("p", { children: type === "background" ? "Background Image" : type === "image" ? "Image" : "Property Image" }) })
+    /* @__PURE__ */ jsx50(TooltipContent, { side: "bottom", className: "z-51", children: /* @__PURE__ */ jsx50("p", { children: type === "background" ? "Background Image" : type === "image" ? "Image" : "Property Image" }) })
   ] });
 };
 
 // src/core/editor/components/element-gear/section/toolbar.tsx
-import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var SectionToolbar = () => {
   const { focusIdx, deleteElement, template } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const currentBgColor = useMemo19(() => {
+  const currentBgColor = useMemo20(() => {
     if (!focusIdx || !template) return void 0;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = lodashGet9(template, path);
@@ -5000,21 +5237,21 @@ var SectionToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = useCallback22(() => {
+  const handleOpenBgColorPicker = useCallback23(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback22(() => {
+  const handleOpenStrokeColorPicker = useCallback23(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  return /* @__PURE__ */ jsxs39(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx50(ToolbarContent, { children: /* @__PURE__ */ jsx50(BasicOption, {}) }),
-    /* @__PURE__ */ jsx50(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs39(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs40(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx51(ToolbarContent, { children: /* @__PURE__ */ jsx51(BasicOption, {}) }),
+    /* @__PURE__ */ jsx51(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs40(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx51(
         BackgroundColorBtn,
         {
           activeView,
@@ -5023,29 +5260,29 @@ var SectionToolbar = () => {
           currentBgColor: currentBgColor || "transparent"
         }
       ),
-      /* @__PURE__ */ jsx50(ImageMenu, { type: "background" }),
-      /* @__PURE__ */ jsx50(ToolbarSeparator, {}),
-      border.isEnabled && /* @__PURE__ */ jsxs39(Tooltip, { children: [
-        /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(ImageMenu, { type: "background" }),
+      /* @__PURE__ */ jsx51(ToolbarSeparator, {}),
+      border.isEnabled && /* @__PURE__ */ jsxs40(Tooltip, { children: [
+        /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "strokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx50(
+            children: /* @__PURE__ */ jsx51(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx50("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx51("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx50(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx51(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         StrokeWeight,
         {
           width: border.width,
@@ -5054,7 +5291,7 @@ var SectionToolbar = () => {
           onEnabledChange: border.setEnabled
         }
       ),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         BorderRadius,
         {
           value: borderRadius.value,
@@ -5062,26 +5299,32 @@ var SectionToolbar = () => {
           tooltipText: "Corner Rounding"
         }
       ),
-      /* @__PURE__ */ jsx50(BetterPadding, {})
+      /* @__PURE__ */ jsx51(BetterPadding, {})
     ] })
   ] });
 };
 
 // src/core/editor/components/element-gear/section-column/toolbar.tsx
-import { useCallback as useCallback23, useMemo as useMemo20, useState as useState14 } from "react";
+import { useCallback as useCallback24, useMemo as useMemo21, useState as useState15 } from "react";
 import { CheckIcon as CheckIcon6, Columns2Icon, Columns3Icon, Columns4Icon } from "lucide-react";
 import { get as lodashGet10 } from "lodash";
-import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+var VERTICAL_ALIGNMENTS = ["top", "middle", "bottom"];
 var SectionColumnToolbar = () => {
-  const { focusIdx, deleteElement, template, setColumnCount } = useEditorStore();
+  const { focusIdx, deleteElement, template, setColumnCount, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [columnCountOpen, setColumnCountOpen] = useState14(false);
-  const element = useMemo20(() => {
+  const [columnCountOpen, setColumnCountOpen] = useState15(false);
+  const [verticalAlignOpen, setVerticalAlignOpen] = useState15(false);
+  const element = useMemo21(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return lodashGet10(template, path);
   }, [focusIdx, template]);
   const columnCount = element?.children?.length || 2;
+  const currentVerticalAlign = useMemo21(() => {
+    const firstChild = element?.children?.[0];
+    return firstChild?.attributes?.["vertical-align"] || "top";
+  }, [element]);
   const currentBgColor = element?.attributes?.["background-color"];
   const borderRadius = useBorderRadius();
   const border = useBorder();
@@ -5091,21 +5334,30 @@ var SectionColumnToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = useCallback23(() => {
+  const handleOpenBgColorPicker = useCallback24(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback23(() => {
+  const handleOpenStrokeColorPicker = useCallback24(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  return /* @__PURE__ */ jsxs40(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx51(ToolbarContent, { children: /* @__PURE__ */ jsx51(BasicOption, {}) }),
-    /* @__PURE__ */ jsx51(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs40(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx51(
+  const handleVerticalAlignChange = useCallback24((align) => {
+    if (!focusIdx || !element?.children) return;
+    const updatedChildren = element.children.map((child) => ({
+      ...child,
+      attributes: { ...child.attributes, "vertical-align": align }
+    }));
+    updateElement(focusIdx, { children: updatedChildren });
+    setVerticalAlignOpen(false);
+  }, [focusIdx, element, updateElement]);
+  return /* @__PURE__ */ jsxs41(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx52(ToolbarContent, { children: /* @__PURE__ */ jsx52(BasicOption, {}) }),
+    /* @__PURE__ */ jsx52(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs41(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx52(
         BackgroundColorBtn,
         {
           activeView,
@@ -5114,29 +5366,29 @@ var SectionColumnToolbar = () => {
           currentBgColor: currentBgColor || "transparent"
         }
       ),
-      /* @__PURE__ */ jsx51(ImageMenu, { type: "background" }),
-      /* @__PURE__ */ jsx51(ToolbarSeparator, {}),
-      border.isEnabled && /* @__PURE__ */ jsxs40(Tooltip, { children: [
-        /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(ImageMenu, { type: "background" }),
+      /* @__PURE__ */ jsx52(ToolbarSeparator, {}),
+      border.isEnabled && /* @__PURE__ */ jsxs41(Tooltip, { children: [
+        /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx52(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "strokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx52(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx51("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx52("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx51(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx52(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(
         StrokeWeight,
         {
           width: border.width,
@@ -5145,7 +5397,7 @@ var SectionColumnToolbar = () => {
           onEnabledChange: border.setEnabled
         }
       ),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(
         BorderRadius,
         {
           value: borderRadius.value,
@@ -5153,56 +5405,79 @@ var SectionColumnToolbar = () => {
           tooltipText: "Corner Rounding"
         }
       ),
-      /* @__PURE__ */ jsx51(BetterPadding, {}),
-      /* @__PURE__ */ jsx51(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs40(DropdownMenu, { open: columnCountOpen, onOpenChange: setColumnCountOpen, children: [
-        /* @__PURE__ */ jsx51(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs40(Button, { variant: "ghost", className: `shadow-none transition-none cursor-pointer rounded-[12px] ${columnCountOpen ? "bg-muted" : ""}`, onClick: () => setColumnCountOpen(!columnCountOpen), children: [
-          columnCount === 2 && /* @__PURE__ */ jsx51(Columns2Icon, { className: "w-4 h-4" }),
-          columnCount === 3 && /* @__PURE__ */ jsx51(Columns3Icon, { className: "w-4 h-4" }),
-          columnCount === 4 && /* @__PURE__ */ jsx51(Columns4Icon, { className: "w-4 h-4" })
+      /* @__PURE__ */ jsx52(BetterPadding, {}),
+      /* @__PURE__ */ jsx52(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs41(DropdownMenu, { open: columnCountOpen, onOpenChange: setColumnCountOpen, children: [
+        /* @__PURE__ */ jsx52(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs41(Button, { variant: "ghost", className: `shadow-none transition-none cursor-pointer rounded-[12px] ${columnCountOpen ? "bg-muted" : ""}`, onClick: () => setColumnCountOpen(!columnCountOpen), children: [
+          columnCount === 2 && /* @__PURE__ */ jsx52(Columns2Icon, { className: "w-4 h-4" }),
+          columnCount === 3 && /* @__PURE__ */ jsx52(Columns3Icon, { className: "w-4 h-4" }),
+          columnCount === 4 && /* @__PURE__ */ jsx52(Columns4Icon, { className: "w-4 h-4" })
         ] }) }),
-        /* @__PURE__ */ jsxs40(DropdownMenuContent, { align: "center", "data-editor-toolbar": "true", className: "z-51", children: [
-          /* @__PURE__ */ jsxs40(DropdownMenuItem, { onClick: () => focusIdx && setColumnCount(focusIdx, 2), children: [
-            /* @__PURE__ */ jsx51(Columns2Icon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsxs41(DropdownMenuContent, { align: "center", "data-editor-toolbar": "true", className: "z-51", children: [
+          /* @__PURE__ */ jsxs41(DropdownMenuItem, { onClick: () => focusIdx && setColumnCount(focusIdx, 2), children: [
+            /* @__PURE__ */ jsx52(Columns2Icon, { className: "w-4 h-4" }),
             "2 Columns",
-            columnCount === 2 && /* @__PURE__ */ jsx51(CheckIcon6, { className: "w-4 h-4" })
+            columnCount === 2 && /* @__PURE__ */ jsx52(CheckIcon6, { className: "w-4 h-4" })
           ] }),
-          /* @__PURE__ */ jsxs40(DropdownMenuItem, { onClick: () => focusIdx && setColumnCount(focusIdx, 3), children: [
-            /* @__PURE__ */ jsx51(Columns3Icon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxs41(DropdownMenuItem, { onClick: () => focusIdx && setColumnCount(focusIdx, 3), children: [
+            /* @__PURE__ */ jsx52(Columns3Icon, { className: "w-4 h-4" }),
             "3 Columns",
-            columnCount === 3 && /* @__PURE__ */ jsx51(CheckIcon6, { className: "w-4 h-4" })
+            columnCount === 3 && /* @__PURE__ */ jsx52(CheckIcon6, { className: "w-4 h-4" })
           ] }),
-          /* @__PURE__ */ jsxs40(DropdownMenuItem, { onClick: () => focusIdx && setColumnCount(focusIdx, 4), children: [
-            /* @__PURE__ */ jsx51(Columns4Icon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxs41(DropdownMenuItem, { onClick: () => focusIdx && setColumnCount(focusIdx, 4), children: [
+            /* @__PURE__ */ jsx52(Columns4Icon, { className: "w-4 h-4" }),
             "4 Columns",
-            columnCount === 4 && /* @__PURE__ */ jsx51(CheckIcon6, { className: "w-4 h-4" })
+            columnCount === 4 && /* @__PURE__ */ jsx52(CheckIcon6, { className: "w-4 h-4" })
           ] })
         ] })
-      ] })
+      ] }),
+      /* @__PURE__ */ jsx52(Tooltip, { children: /* @__PURE__ */ jsxs41(DropdownMenu, { open: verticalAlignOpen, onOpenChange: setVerticalAlignOpen, children: [
+        /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx52(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx52(
+          Button,
+          {
+            variant: "outline",
+            className: `shadow-none transition-none cursor-pointer rounded-[12px] gap-1 ${verticalAlignOpen ? "bg-muted" : ""}`,
+            children: currentVerticalAlign.charAt(0).toUpperCase() + currentVerticalAlign.slice(1)
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx52(TooltipContent, { side: "bottom", className: "z-51", children: "Vertical Alignment" }),
+        /* @__PURE__ */ jsx52(DropdownMenuContent, { align: "center", "data-editor-toolbar": "true", className: "z-51", children: VERTICAL_ALIGNMENTS.map((align) => /* @__PURE__ */ jsxs41(
+          DropdownMenuItem,
+          {
+            onClick: () => handleVerticalAlignChange(align),
+            className: "gap-2 capitalize",
+            children: [
+              align.charAt(0).toUpperCase() + align.slice(1),
+              currentVerticalAlign === align && /* @__PURE__ */ jsx52(CheckIcon6, { className: "w-4 h-4 ml-auto" })
+            ]
+          },
+          align
+        )) })
+      ] }) })
     ] })
   ] });
 };
 
 // src/core/editor/components/element-gear/page/toolbar.tsx
-import { useCallback as useCallback24, useMemo as useMemo21 } from "react";
-import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useCallback as useCallback25, useMemo as useMemo22 } from "react";
+import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var PageToolbar = () => {
   const { focusIdx, template } = useEditorStore();
   const { activeView, colorTarget, setColorType, setColorTarget, setActiveView } = useSidebarContext();
-  const currentBgColor = useMemo21(() => {
+  const currentBgColor = useMemo22(() => {
     if (!focusIdx || !template || focusIdx !== "content") return void 0;
     const page = template.content?.[0];
     return page?.attributes?.["background-color"];
   }, [focusIdx, template]);
-  const handleOpenBgColorPicker = useCallback24(() => {
+  const handleOpenBgColorPicker = useCallback25(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  return /* @__PURE__ */ jsxs41(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx52(ToolbarContent, { children: /* @__PURE__ */ jsx52(BasicOption, {}) }),
-    /* @__PURE__ */ jsx52(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs42(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx53(ToolbarContent, { children: /* @__PURE__ */ jsx53(BasicOption, {}) }),
+    /* @__PURE__ */ jsx53(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx53(
       BackgroundColorBtn,
       {
         activeView,
@@ -5215,14 +5490,14 @@ var PageToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/spacer/toolbar.tsx
-import { useCallback as useCallback26, useMemo as useMemo23 } from "react";
+import { useCallback as useCallback27, useMemo as useMemo24 } from "react";
 
 // src/core/editor/hooks/use-height.ts
-import { useMemo as useMemo22, useCallback as useCallback25 } from "react";
+import { useMemo as useMemo23, useCallback as useCallback26 } from "react";
 import { get as lodashGet11 } from "lodash";
 var useHeight = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const currentValue = useMemo22(() => {
+  const currentValue = useMemo23(() => {
     if (!focusIdx || !template) return 12;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = lodashGet11(template, path);
@@ -5231,7 +5506,7 @@ var useHeight = () => {
     const parsed = parseInt(rawValue.replace("px", ""), 10);
     return isNaN(parsed) ? 12 : Math.max(4, parsed);
   }, [focusIdx, template]);
-  const handleChange = useCallback25((value) => {
+  const handleChange = useCallback26((value) => {
     if (!focusIdx || !template) return;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = lodashGet11(template, path);
@@ -5251,27 +5526,27 @@ var useHeight = () => {
 
 // src/core/editor/components/element-gear/spacer/toolbar.tsx
 import { get as lodashGet12 } from "lodash";
-import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var SpacerToolbar = () => {
   const { focusIdx, template } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
   const height = useHeight();
   const padding = usePadding();
-  const currentBgColor = useMemo23(() => {
+  const currentBgColor = useMemo24(() => {
     if (!focusIdx || !template) return void 0;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = lodashGet12(template, path);
     return element?.attributes?.["container-background-color"];
   }, [focusIdx, template]);
-  const handleOpenBgColorPicker = useCallback26(() => {
+  const handleOpenBgColorPicker = useCallback27(() => {
     setColorType("Background Color");
     setColorTarget("spacerBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  return /* @__PURE__ */ jsxs42(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx53(ToolbarContent, { children: /* @__PURE__ */ jsx53(BasicOption, {}) }),
-    /* @__PURE__ */ jsx53(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx53(ToolbarContent, { children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs43(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx54(ToolbarContent, { children: /* @__PURE__ */ jsx54(BasicOption, {}) }),
+    /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx54(ToolbarContent, { children: /* @__PURE__ */ jsx54(
       BackgroundColorBtn,
       {
         activeView,
@@ -5280,17 +5555,151 @@ var SpacerToolbar = () => {
         currentBgColor: currentBgColor || "transparent"
       }
     ) }),
-    /* @__PURE__ */ jsx53(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx53(ToolbarContent, { children: /* @__PURE__ */ jsx53(BetterPadding, {}) })
+    /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx54(ToolbarContent, { children: /* @__PURE__ */ jsx54(BetterPadding, {}) })
   ] });
 };
 
 // src/core/editor/components/element-gear/social/toolbar.tsx
-import { BoldIcon as BoldIcon3, CaseUpperIcon as CaseUpperIcon3, CheckIcon as CheckIcon7, ItalicIcon as ItalicIcon3, Scan, Strikethrough as Strikethrough3, Underline as Underline3 } from "lucide-react";
-import { useCallback as useCallback27, useMemo as useMemo24 } from "react";
-import { Fragment as Fragment6, jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon as BoldIcon3, CaseUpperIcon as CaseUpperIcon3, CheckIcon as CheckIcon7, ItalicIcon as ItalicIcon3, Scan, Strikethrough as Strikethrough3, Underline as Underline3 } from "lucide-react";
+import { useCallback as useCallback29, useMemo as useMemo26 } from "react";
+
+// src/core/editor/components/social-line-spacing.tsx
+import { TypeIcon as TypeIcon3 } from "lucide-react";
+import { useState as useState16, useEffect as useEffect10, useMemo as useMemo25, useCallback as useCallback28, memo as memo5 } from "react";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+var SocialLineSpacing = memo5(function SocialLineSpacing2() {
+  const [isOpen, setIsOpen] = useState16(false);
+  const focusIdx = useEditorStore((s) => s.focusIdx);
+  const template = useEditorStore((s) => s.template);
+  const updateElement = useEditorStore((s) => s.updateElement);
+  const socialElement = useMemo25(() => {
+    return focusIdx ? getValueByIdx(template, focusIdx) : null;
+  }, [focusIdx, template]);
+  const currentLineHeight = useMemo25(() => {
+    if (!socialElement?.attributes?.["line-height"]) return DEFAULT_LINE_HEIGHT;
+    const parsed = parseFloat(socialElement.attributes["line-height"]);
+    return isNaN(parsed) ? DEFAULT_LINE_HEIGHT : parsed;
+  }, [socialElement]);
+  const [lineHeightInputValue, setLineHeightInputValue] = useState16(
+    String(currentLineHeight)
+  );
+  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = useState16(false);
+  useEffect10(() => {
+    if (!isLineHeightInputFocused) {
+      setLineHeightInputValue(String(currentLineHeight));
+    }
+  }, [currentLineHeight, isLineHeightInputFocused]);
+  const handleLineHeightSliderChange = useCallback28((values) => {
+    if (!focusIdx) return;
+    const value = values[0];
+    setLineHeightInputValue(String(value));
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "line-height": String(value)
+      }
+    });
+  }, [focusIdx, updateElement]);
+  const handleLineHeightInputChange = useCallback28((e) => {
+    setLineHeightInputValue(e.target.value);
+  }, []);
+  const applyLineHeight = useCallback28(() => {
+    if (!focusIdx) return;
+    const parsed = parseFloat(lineHeightInputValue);
+    if (isNaN(parsed) || lineHeightInputValue === "") {
+      setLineHeightInputValue(String(currentLineHeight));
+      return;
+    }
+    const clampedValue = Math.max(MIN_LINE_HEIGHT, Math.min(parsed, MAX_LINE_HEIGHT));
+    setLineHeightInputValue(String(clampedValue));
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "line-height": String(clampedValue)
+      }
+    });
+  }, [focusIdx, lineHeightInputValue, currentLineHeight, updateElement]);
+  const handleLineHeightInputBlur = useCallback28(() => {
+    setIsLineHeightInputFocused(false);
+    applyLineHeight();
+  }, [applyLineHeight]);
+  const handleLineHeightInputKeyDown = useCallback28((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      applyLineHeight();
+      e.target.blur();
+    }
+  }, [applyLineHeight]);
+  return /* @__PURE__ */ jsxs44(Tooltip, { children: [
+    /* @__PURE__ */ jsxs44(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx55(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+        Button,
+        {
+          variant: "ghost",
+          className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
+          size: "icon",
+          disabled: !focusIdx,
+          children: /* @__PURE__ */ jsx55(TypeIcon3, { className: "w-4 h-4" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx55(
+        PopoverContent,
+        {
+          className: "w-64 z-5001 mt-1 rounded-[12px]",
+          "data-editor-toolbar": "true",
+          children: /* @__PURE__ */ jsx55("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx55(Label, { children: "Line spacing" }),
+            /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-2", children: [
+              /* @__PURE__ */ jsx55(
+                Slider2,
+                {
+                  value: [currentLineHeight],
+                  onValueChange: handleLineHeightSliderChange,
+                  min: MIN_LINE_HEIGHT,
+                  max: MAX_LINE_HEIGHT,
+                  step: LINE_HEIGHT_STEP,
+                  disabled: !focusIdx
+                }
+              ),
+              /* @__PURE__ */ jsx55(
+                Input,
+                {
+                  type: "number",
+                  value: lineHeightInputValue,
+                  onChange: handleLineHeightInputChange,
+                  onFocus: () => setIsLineHeightInputFocused(true),
+                  onBlur: handleLineHeightInputBlur,
+                  onKeyDown: handleLineHeightInputKeyDown,
+                  className: "w-25 shadow-none rounded-[12px]",
+                  min: MIN_LINE_HEIGHT,
+                  max: MAX_LINE_HEIGHT,
+                  step: LINE_HEIGHT_STEP,
+                  disabled: !focusIdx
+                }
+              )
+            ] })
+          ] }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", className: "z-5001", children: "Line Spacing" })
+  ] });
+});
+
+// src/core/editor/components/element-gear/social/toolbar.tsx
+import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var ALIGNMENTS2 = ["left", "center", "right"];
 var MODES = ["horizontal", "vertical"];
+var SOCIAL_ITEM_ALIGNMENT_ICONS = {
+  left: AlignLeftIcon,
+  center: AlignCenterIcon,
+  right: AlignRightIcon
+};
 var SocialToolbar = () => {
   const focusIdx = useEditorStore((state) => state.focusIdx);
   const template = useEditorStore((state) => state.template);
@@ -5301,44 +5710,48 @@ var SocialToolbar = () => {
   const currentIconStyle = socialElement?.data?.value?.iconStyle || "Regular";
   const currentIconColor = socialElement?.data?.value?.iconColor || "Colored";
   const { setActiveView, setColorTarget, setColorType, activeView, colorTarget } = useSidebarContext();
-  const currentBgColor = useMemo24(() => {
+  const currentBgColor = useMemo26(() => {
     return socialElement?.attributes?.["container-background-color"] || "transparent";
   }, [socialElement]);
-  const currentFontFamily = useMemo24(() => {
+  const currentFontFamily = useMemo26(() => {
     return socialElement?.attributes?.["font-family"] || "Arial";
   }, [socialElement]);
-  const currentFontSize = useMemo24(() => {
+  const currentFontSize = useMemo26(() => {
     return parseFontSize(socialElement?.attributes?.["font-size"]);
   }, [socialElement]);
-  const currentTextColor = useMemo24(() => {
+  const currentTextColor = useMemo26(() => {
     return socialElement?.attributes?.["color"] || "#000000";
   }, [socialElement]);
-  const isBold = useMemo24(() => {
+  const isBold = useMemo26(() => {
     return socialElement?.attributes?.["font-weight"] === "bold";
   }, [socialElement]);
-  const isItalic = useMemo24(() => {
+  const isItalic = useMemo26(() => {
     return socialElement?.attributes?.["font-style"] === "italic";
   }, [socialElement]);
-  const isUnderline = useMemo24(() => {
+  const isUnderline = useMemo26(() => {
     const decoration = socialElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("underline");
   }, [socialElement]);
-  const isStrikethrough = useMemo24(() => {
+  const isStrikethrough = useMemo26(() => {
     const decoration = socialElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("line-through");
   }, [socialElement]);
-  const currentMode = useMemo24(() => {
+  const currentMode = useMemo26(() => {
     return socialElement?.attributes?.["mode"] || "horizontal";
   }, [socialElement]);
-  const currentAlign = useMemo24(() => {
+  const currentAlign = useMemo26(() => {
     return socialElement?.attributes?.["align"] || "center";
   }, [socialElement]);
-  const handleOpenBgColorPicker = useCallback27(() => {
+  const currentSocialItemAlign = useMemo26(() => {
+    const firstChild = socialElement?.children?.[0];
+    return firstChild?.attributes?.["align"] || "center";
+  }, [socialElement]);
+  const handleOpenBgColorPicker = useCallback29(() => {
     setColorType("Background Color");
     setColorTarget("socialBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleSocialStyleChange = useCallback27((value) => {
+  const handleSocialStyleChange = useCallback29((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5353,7 +5766,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconSizeChange = useCallback27((value) => {
+  const handleIconSizeChange = useCallback29((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5368,7 +5781,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconStyleChange = useCallback27((value) => {
+  const handleIconStyleChange = useCallback29((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5383,7 +5796,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconColorChange = useCallback27((value) => {
+  const handleIconColorChange = useCallback29((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5398,7 +5811,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleSetFontFamily = useCallback27((font) => {
+  const handleSetFontFamily = useCallback29((font) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5409,7 +5822,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleFontSizeChange = useCallback27((size) => {
+  const handleFontSizeChange = useCallback29((size) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5420,12 +5833,12 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleOpenTextColorPicker = useCallback27(() => {
+  const handleOpenTextColorPicker = useCallback29(() => {
     setColorType("Text Color");
     setColorTarget("socialTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = useCallback27(() => {
+  const handleToggleBold = useCallback29(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5437,7 +5850,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isBold, updateElement]);
-  const handleToggleItalic = useCallback27(() => {
+  const handleToggleItalic = useCallback29(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5449,7 +5862,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isItalic, updateElement]);
-  const handleToggleUnderline = useCallback27(() => {
+  const handleToggleUnderline = useCallback29(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5467,7 +5880,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isUnderline, updateElement]);
-  const handleToggleStrike = useCallback27(() => {
+  const handleToggleStrike = useCallback29(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5485,7 +5898,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isStrikethrough, updateElement]);
-  const handleModeChange = useCallback27((mode) => {
+  const handleModeChange = useCallback29((mode) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5496,24 +5909,43 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleCycleAlign = useCallback27(() => {
+  const handleCycleAlign = useCallback29(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
     const currentIndex = ALIGNMENTS2.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % ALIGNMENTS2.length;
     const nextAlign = ALIGNMENTS2[nextIndex];
+    const updatedChildren = element?.children?.map((child) => ({
+      ...child,
+      attributes: { ...child.attributes, align: nextAlign }
+    }));
     updateElement(focusIdx, {
       attributes: {
         ...element?.attributes,
         "align": nextAlign
-      }
+      },
+      children: updatedChildren
     });
   }, [focusIdx, currentAlign, updateElement]);
-  return /* @__PURE__ */ jsxs43(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx54(ToolbarContent, { children: /* @__PURE__ */ jsx54(BasicOption, {}) }),
-    /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx54(ToolbarContent, { children: /* @__PURE__ */ jsx54(
+  const handleCycleSocialItemAlign = useCallback29(() => {
+    if (!focusIdx) return;
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    if (!element?.children) return;
+    const currentIndex = ALIGNMENTS2.indexOf(currentSocialItemAlign);
+    const nextIndex = (currentIndex + 1) % ALIGNMENTS2.length;
+    const nextAlign = ALIGNMENTS2[nextIndex];
+    const updatedChildren = element.children.map((child) => ({
+      ...child,
+      attributes: { ...child.attributes, align: nextAlign }
+    }));
+    updateElement(focusIdx, { children: updatedChildren });
+  }, [focusIdx, currentSocialItemAlign, updateElement]);
+  return /* @__PURE__ */ jsxs45(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx56(ToolbarContent, { children: /* @__PURE__ */ jsx56(BasicOption, {}) }),
+    /* @__PURE__ */ jsx56(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx56(ToolbarContent, { children: /* @__PURE__ */ jsx56(
       BackgroundColorBtn,
       {
         activeView,
@@ -5522,19 +5954,19 @@ var SocialToolbar = () => {
         currentBgColor: currentBgColor || "transparent"
       }
     ) }),
-    /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx54(ToolbarContent, { children: /* @__PURE__ */ jsx54(BetterPadding, { showInnerPadding: true, showIconPadding: true, showTextPadding: true }) }),
-    currentSocialStyle !== "Icon" && /* @__PURE__ */ jsxs43(Fragment6, { children: [
-      /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs43(ToolbarContent, { children: [
-        /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx56(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx56(ToolbarContent, { children: /* @__PURE__ */ jsx56(BetterPadding, { showInnerPadding: true, showIconPadding: true, showTextPadding: true }) }),
+    currentSocialStyle !== "Icon" && /* @__PURE__ */ jsxs45(Fragment6, { children: [
+      /* @__PURE__ */ jsx56(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs45(ToolbarContent, { children: [
+        /* @__PURE__ */ jsx56(
           FontFamilyDropdown,
           {
             currentFont: currentFontFamily,
             onFontChange: handleSetFontFamily
           }
         ),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx56(
           FontSizeControl,
           {
             value: currentFontSize,
@@ -5542,10 +5974,10 @@ var SocialToolbar = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs43(ToolbarContent, { children: [
-        /* @__PURE__ */ jsxs43(Tooltip, { children: [
-          /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs43(
+      /* @__PURE__ */ jsx56(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs45(ToolbarContent, { children: [
+        /* @__PURE__ */ jsxs45(Tooltip, { children: [
+          /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs45(
             Button,
             {
               variant: "ghost",
@@ -5553,8 +5985,8 @@ var SocialToolbar = () => {
               size: "icon",
               onClick: handleOpenTextColorPicker,
               children: [
-                /* @__PURE__ */ jsx54(CaseUpperIcon3, {}),
-                /* @__PURE__ */ jsx54(
+                /* @__PURE__ */ jsx56(CaseUpperIcon3, {}),
+                /* @__PURE__ */ jsx56(
                   "span",
                   {
                     className: "w-[14px] h-[3px] rounded-full",
@@ -5564,113 +5996,130 @@ var SocialToolbar = () => {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
+          /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
         ] }),
-        /* @__PURE__ */ jsxs43(Tooltip, { children: [
-          /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsxs45(Tooltip, { children: [
+          /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isBold ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleBold,
-              children: /* @__PURE__ */ jsx54(BoldIcon3, {})
+              children: /* @__PURE__ */ jsx56(BoldIcon3, {})
             }
           ) }),
-          /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Bold" })
+          /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Bold" })
         ] }),
-        /* @__PURE__ */ jsxs43(Tooltip, { children: [
-          /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsxs45(Tooltip, { children: [
+          /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isItalic ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleItalic,
-              children: /* @__PURE__ */ jsx54(ItalicIcon3, {})
+              children: /* @__PURE__ */ jsx56(ItalicIcon3, {})
             }
           ) }),
-          /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Italic" })
+          /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Italic" })
         ] }),
-        /* @__PURE__ */ jsxs43(Tooltip, { children: [
-          /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsxs45(Tooltip, { children: [
+          /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isUnderline ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleUnderline,
-              children: /* @__PURE__ */ jsx54(Underline3, {})
+              children: /* @__PURE__ */ jsx56(Underline3, {})
             }
           ) }),
-          /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Underline" })
+          /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Underline" })
         ] }),
-        /* @__PURE__ */ jsxs43(Tooltip, { children: [
-          /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsxs45(Tooltip, { children: [
+          /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isStrikethrough ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleStrike,
-              children: /* @__PURE__ */ jsx54(Strikethrough3, {})
+              children: /* @__PURE__ */ jsx56(Strikethrough3, {})
             }
           ) }),
-          /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Strikethrough" })
-        ] })
+          /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Strikethrough" })
+        ] }),
+        /* @__PURE__ */ jsxs45(Tooltip, { children: [
+          /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
+            Button,
+            {
+              variant: "ghost",
+              className: "shadow-none transition-none cursor-pointer",
+              size: "icon",
+              onClick: handleCycleSocialItemAlign,
+              children: (() => {
+                const AlignIcon = SOCIAL_ITEM_ALIGNMENT_ICONS[currentSocialItemAlign];
+                return /* @__PURE__ */ jsx56(AlignIcon, {});
+              })()
+            }
+          ) }),
+          /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Alignment" })
+        ] }),
+        /* @__PURE__ */ jsx56(SocialLineSpacing, {})
       ] })
     ] }),
-    /* @__PURE__ */ jsx54(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs43(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx54(Tooltip, { children: /* @__PURE__ */ jsxs43(Popover, { children: [
-        /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx56(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs45(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx56(Tooltip, { children: /* @__PURE__ */ jsxs45(Popover, { children: [
+        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
           Button,
           {
             variant: "ghost",
             size: "icon",
             className: "shadow-none transition-none cursor-pointer rounded-[12px] gap-1",
-            children: /* @__PURE__ */ jsx54(Scan, {})
+            children: /* @__PURE__ */ jsx56(Scan, {})
           }
         ) }) }),
-        /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Icon Settings" }),
-        /* @__PURE__ */ jsxs43(PopoverContent, { className: "flex flex-col gap-2 p-2 z-5001 w-[200px]", children: [
-          /* @__PURE__ */ jsxs43(Select, { value: currentSocialStyle, onValueChange: (v) => handleSocialStyleChange(v), children: [
-            /* @__PURE__ */ jsx54(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx54(SelectValue, { placeholder: "Icon + Text" }) }),
-            /* @__PURE__ */ jsxs43(SelectContent, { className: "w-full z-5001", children: [
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Icon + Text", children: "Icon + Text" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Icon", children: "Icon" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Text", children: "Text" })
+        /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Icon Settings" }),
+        /* @__PURE__ */ jsxs45(PopoverContent, { className: "flex flex-col gap-2 p-2 z-5001 w-[200px]", children: [
+          /* @__PURE__ */ jsxs45(Select, { value: currentSocialStyle, onValueChange: (v) => handleSocialStyleChange(v), children: [
+            /* @__PURE__ */ jsx56(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx56(SelectValue, { placeholder: "Icon + Text" }) }),
+            /* @__PURE__ */ jsxs45(SelectContent, { className: "w-full z-5001", children: [
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Icon + Text", children: "Icon + Text" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Icon", children: "Icon" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Text", children: "Text" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs43(Select, { value: currentIconSize, onValueChange: (v) => handleIconSizeChange(v), children: [
-            /* @__PURE__ */ jsx54(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx54(SelectValue, { placeholder: "Small" }) }),
-            /* @__PURE__ */ jsxs43(SelectContent, { className: "w-full z-5001", children: [
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Small", children: "Small" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Medium", children: "Medium" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Large", children: "Large" })
+          /* @__PURE__ */ jsxs45(Select, { value: currentIconSize, onValueChange: (v) => handleIconSizeChange(v), children: [
+            /* @__PURE__ */ jsx56(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx56(SelectValue, { placeholder: "Small" }) }),
+            /* @__PURE__ */ jsxs45(SelectContent, { className: "w-full z-5001", children: [
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Small", children: "Small" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Medium", children: "Medium" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Large", children: "Large" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs43(Select, { value: currentIconStyle, onValueChange: (v) => handleIconStyleChange(v), children: [
-            /* @__PURE__ */ jsx54(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx54(SelectValue, { placeholder: "Regular" }) }),
-            /* @__PURE__ */ jsxs43(SelectContent, { className: "w-full z-5001", children: [
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Regular", children: "Regular" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Filled", children: "Filled" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Outline", children: "Outline" })
+          /* @__PURE__ */ jsxs45(Select, { value: currentIconStyle, onValueChange: (v) => handleIconStyleChange(v), children: [
+            /* @__PURE__ */ jsx56(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx56(SelectValue, { placeholder: "Regular" }) }),
+            /* @__PURE__ */ jsxs45(SelectContent, { className: "w-full z-5001", children: [
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Regular", children: "Regular" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Filled", children: "Filled" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Outline", children: "Outline" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs43(Select, { value: currentIconColor, onValueChange: (v) => handleIconColorChange(v), children: [
-            /* @__PURE__ */ jsx54(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx54(SelectValue, { placeholder: "Colored" }) }),
-            /* @__PURE__ */ jsxs43(SelectContent, { className: "w-full z-5001", children: [
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Colored", children: "Colored" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Dark", children: "Dark" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Light", children: "Light" }),
-              /* @__PURE__ */ jsx54(SelectItem, { value: "Gray", children: "Gray" })
+          /* @__PURE__ */ jsxs45(Select, { value: currentIconColor, onValueChange: (v) => handleIconColorChange(v), children: [
+            /* @__PURE__ */ jsx56(SelectTrigger, { className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx56(SelectValue, { placeholder: "Colored" }) }),
+            /* @__PURE__ */ jsxs45(SelectContent, { className: "w-full z-5001", children: [
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Colored", children: "Colored" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Dark", children: "Dark" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Light", children: "Light" }),
+              /* @__PURE__ */ jsx56(SelectItem, { value: "Gray", children: "Gray" })
             ] })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx54(Tooltip, { children: /* @__PURE__ */ jsxs43(DropdownMenu, { modal: false, children: [
-        /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx56(Tooltip, { children: /* @__PURE__ */ jsxs45(DropdownMenu, { modal: false, children: [
+        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
           Button,
           {
             variant: "outline",
@@ -5678,21 +6127,21 @@ var SocialToolbar = () => {
             children: currentMode === "horizontal" ? "Horizontal" : "Vertical"
           }
         ) }) }),
-        /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", className: "z-51", children: "Direction" }),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: "Direction" }),
+        /* @__PURE__ */ jsx56(
           DropdownMenuContent,
           {
             align: "start",
             className: "z-51",
             "data-editor-toolbar": "true",
-            children: MODES.map((mode) => /* @__PURE__ */ jsxs43(
+            children: MODES.map((mode) => /* @__PURE__ */ jsxs45(
               DropdownMenuItem,
               {
                 onClick: () => handleModeChange(mode),
                 className: "gap-2 capitalize",
                 children: [
                   mode.charAt(0).toUpperCase() + mode.slice(1),
-                  currentMode === mode && /* @__PURE__ */ jsx54(CheckIcon7, { className: "w-4 h-4 ml-auto" })
+                  currentMode === mode && /* @__PURE__ */ jsx56(CheckIcon7, { className: "w-4 h-4 ml-auto" })
                 ]
               },
               mode
@@ -5700,18 +6149,18 @@ var SocialToolbar = () => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs43(Tooltip, { children: [
-        /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsxs45(Tooltip, { children: [
+        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
           Button,
           {
             variant: "ghost",
             className: "shadow-none transition-none cursor-pointer",
             size: "icon",
             onClick: handleCycleAlign,
-            children: /* @__PURE__ */ jsx54("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx56("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
           }
         ) }),
-        /* @__PURE__ */ jsxs43(TooltipContent, { side: "bottom", className: "z-51", children: [
+        /* @__PURE__ */ jsxs45(TooltipContent, { side: "bottom", className: "z-51", children: [
           "Align (",
           currentAlign,
           ")"
@@ -5722,9 +6171,15 @@ var SocialToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/social-item/toolbar.tsx
-import { BoldIcon as BoldIcon4, CaseUpperIcon as CaseUpperIcon4, ItalicIcon as ItalicIcon4, RemoveFormatting, Strikethrough as Strikethrough4, Underline as Underline4 } from "lucide-react";
-import { useCallback as useCallback28, useMemo as useMemo25 } from "react";
-import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+import { AlignCenterIcon as AlignCenterIcon2, AlignLeftIcon as AlignLeftIcon2, AlignRightIcon as AlignRightIcon2, BoldIcon as BoldIcon4, CaseUpperIcon as CaseUpperIcon4, ItalicIcon as ItalicIcon4, RemoveFormatting, Strikethrough as Strikethrough4, Underline as Underline4 } from "lucide-react";
+import { useCallback as useCallback30, useMemo as useMemo27 } from "react";
+import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
+var ALIGNMENTS3 = ["left", "center", "right"];
+var SOCIAL_ITEM_ALIGNMENT_ICONS2 = {
+  left: AlignLeftIcon2,
+  center: AlignCenterIcon2,
+  right: AlignRightIcon2
+};
 var SocialItemToolbar = () => {
   const focusIdx = useEditorStore((state) => state.focusIdx);
   const template = useEditorStore((state) => state.template);
@@ -5733,30 +6188,33 @@ var SocialItemToolbar = () => {
   const socialItemElement = focusIdx ? getValueByIdx(template, focusIdx) : null;
   const parentSocialElement = focusIdx ? getParentByIdx(template, focusIdx) : null;
   const parentSocialStyle = parentSocialElement?.data?.value?.socialStyle || "Icon + Text";
-  const currentFontFamily = useMemo25(() => {
+  const currentFontFamily = useMemo27(() => {
     return socialItemElement?.attributes?.["font-family"] || "Arial";
   }, [socialItemElement]);
-  const currentFontSize = useMemo25(() => {
+  const currentFontSize = useMemo27(() => {
     return parseFontSize(socialItemElement?.attributes?.["font-size"]);
   }, [socialItemElement]);
-  const currentTextColor = useMemo25(() => {
+  const currentTextColor = useMemo27(() => {
     return socialItemElement?.attributes?.["color"] || "#000000";
   }, [socialItemElement]);
-  const isBold = useMemo25(() => {
+  const isBold = useMemo27(() => {
     return socialItemElement?.attributes?.["font-weight"] === "bold";
   }, [socialItemElement]);
-  const isItalic = useMemo25(() => {
+  const isItalic = useMemo27(() => {
     return socialItemElement?.attributes?.["font-style"] === "italic";
   }, [socialItemElement]);
-  const isUnderline = useMemo25(() => {
+  const isUnderline = useMemo27(() => {
     const decoration = socialItemElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("underline");
   }, [socialItemElement]);
-  const isStrikethrough = useMemo25(() => {
+  const isStrikethrough = useMemo27(() => {
     const decoration = socialItemElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("line-through");
   }, [socialItemElement]);
-  const handleSetFontFamily = useCallback28((font) => {
+  const currentAlign = useMemo27(() => {
+    return socialItemElement?.attributes?.["align"] || "center";
+  }, [socialItemElement]);
+  const handleSetFontFamily = useCallback30((font) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5767,7 +6225,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleFontSizeChange = useCallback28((size) => {
+  const handleFontSizeChange = useCallback30((size) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5778,12 +6236,12 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleOpenTextColorPicker = useCallback28(() => {
+  const handleOpenTextColorPicker = useCallback30(() => {
     setColorType("Text Color");
     setColorTarget("socialItemTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = useCallback28(() => {
+  const handleToggleBold = useCallback30(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5795,7 +6253,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isBold, updateElement]);
-  const handleToggleItalic = useCallback28(() => {
+  const handleToggleItalic = useCallback30(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5807,7 +6265,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isItalic, updateElement]);
-  const handleToggleUnderline = useCallback28(() => {
+  const handleToggleUnderline = useCallback30(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5825,7 +6283,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isUnderline, updateElement]);
-  const handleToggleStrike = useCallback28(() => {
+  const handleToggleStrike = useCallback30(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5843,7 +6301,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isStrikethrough, updateElement]);
-  const handleRemoveFormatting = useCallback28(() => {
+  const handleRemoveFormatting = useCallback30(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -5861,19 +6319,33 @@ var SocialItemToolbar = () => {
       attributes: restAttributes
     });
   }, [focusIdx, updateElement]);
-  return /* @__PURE__ */ jsxs44(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx55(ToolbarContent, { children: /* @__PURE__ */ jsx55(BasicOption, {}) }),
-    parentSocialStyle !== "Icon" && /* @__PURE__ */ jsxs44(Fragment7, { children: [
-      /* @__PURE__ */ jsx55(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs44(ToolbarContent, { children: [
-        /* @__PURE__ */ jsx55(
+  const handleCycleAlign = useCallback30(() => {
+    if (!focusIdx) return;
+    const currentTemplate = useEditorStore.getState().template;
+    const element = getValueByIdx(currentTemplate, focusIdx);
+    const currentIndex = ALIGNMENTS3.indexOf(currentAlign);
+    const nextIndex = (currentIndex + 1) % ALIGNMENTS3.length;
+    const nextAlign = ALIGNMENTS3[nextIndex];
+    updateElement(focusIdx, {
+      attributes: {
+        ...element?.attributes,
+        "align": nextAlign
+      }
+    });
+  }, [focusIdx, currentAlign, updateElement]);
+  return /* @__PURE__ */ jsxs46(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx57(ToolbarContent, { children: /* @__PURE__ */ jsx57(BasicOption, {}) }),
+    parentSocialStyle !== "Icon" && /* @__PURE__ */ jsxs46(Fragment7, { children: [
+      /* @__PURE__ */ jsx57(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs46(ToolbarContent, { children: [
+        /* @__PURE__ */ jsx57(
           FontFamilyDropdown,
           {
             currentFont: currentFontFamily,
             onFontChange: handleSetFontFamily
           }
         ),
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx57(
           FontSizeControl,
           {
             value: currentFontSize,
@@ -5881,10 +6353,10 @@ var SocialItemToolbar = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx55(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs44(ToolbarContent, { children: [
-        /* @__PURE__ */ jsxs44(Tooltip, { children: [
-          /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs44(
+      /* @__PURE__ */ jsx57(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs46(ToolbarContent, { children: [
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs46(
             Button,
             {
               variant: "ghost",
@@ -5892,8 +6364,8 @@ var SocialItemToolbar = () => {
               size: "icon",
               onClick: handleOpenTextColorPicker,
               children: [
-                /* @__PURE__ */ jsx55(CaseUpperIcon4, {}),
-                /* @__PURE__ */ jsx55(
+                /* @__PURE__ */ jsx57(CaseUpperIcon4, {}),
+                /* @__PURE__ */ jsx57(
                   "span",
                   {
                     className: "w-[14px] h-[3px] rounded-full",
@@ -5903,72 +6375,88 @@ var SocialItemToolbar = () => {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: "Text Color" })
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Text Color" })
         ] }),
-        /* @__PURE__ */ jsxs44(Tooltip, { children: [
-          /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isBold ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleBold,
-              children: /* @__PURE__ */ jsx55(BoldIcon4, {})
+              children: /* @__PURE__ */ jsx57(BoldIcon4, {})
             }
           ) }),
-          /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: "Bold" })
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Bold" })
         ] }),
-        /* @__PURE__ */ jsxs44(Tooltip, { children: [
-          /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isItalic ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleItalic,
-              children: /* @__PURE__ */ jsx55(ItalicIcon4, {})
+              children: /* @__PURE__ */ jsx57(ItalicIcon4, {})
             }
           ) }),
-          /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: "Italic" })
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Italic" })
         ] }),
-        /* @__PURE__ */ jsxs44(Tooltip, { children: [
-          /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isUnderline ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleUnderline,
-              children: /* @__PURE__ */ jsx55(Underline4, {})
+              children: /* @__PURE__ */ jsx57(Underline4, {})
             }
           ) }),
-          /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: "Underline" })
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Underline" })
         ] }),
-        /* @__PURE__ */ jsxs44(Tooltip, { children: [
-          /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
             Button,
             {
               variant: "ghost",
               className: `shadow-none transition-none cursor-pointer ${isStrikethrough ? "bg-muted" : ""}`,
               size: "icon",
               onClick: handleToggleStrike,
-              children: /* @__PURE__ */ jsx55(Strikethrough4, {})
+              children: /* @__PURE__ */ jsx57(Strikethrough4, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Strikethrough" })
+        ] }),
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+            Button,
+            {
+              variant: "ghost",
+              className: "shadow-none transition-none cursor-pointer",
+              size: "icon",
+              onClick: handleCycleAlign,
+              children: (() => {
+                const AlignIcon = SOCIAL_ITEM_ALIGNMENT_ICONS2[currentAlign];
+                return /* @__PURE__ */ jsx57(AlignIcon, {});
+              })()
             }
           ) }),
-          /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: "Strikethrough" })
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Alignment" })
         ] }),
-        /* @__PURE__ */ jsxs44(Tooltip, { children: [
-          /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs46(Tooltip, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
             Button,
             {
               variant: "ghost",
               className: "shadow-none transition-none cursor-pointer",
               size: "icon",
               onClick: handleRemoveFormatting,
-              children: /* @__PURE__ */ jsx55(RemoveFormatting, {})
+              children: /* @__PURE__ */ jsx57(RemoveFormatting, {})
             }
           ) }),
-          /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: "Remove formatting" })
+          /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: "Remove formatting" })
         ] })
       ] })
     ] })
@@ -5977,8 +6465,8 @@ var SocialItemToolbar = () => {
 
 // src/core/editor/components/element-gear/divider/_components/stroke-weight.tsx
 import { MinusIcon as MinusIcon4 } from "lucide-react";
-import { useState as useState15, useEffect as useEffect9, useCallback as useCallback29 } from "react";
-import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useState as useState17, useEffect as useEffect11, useCallback as useCallback31 } from "react";
+import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var StrokeWeight2 = ({
   width,
   borderStyle,
@@ -5986,20 +6474,20 @@ var StrokeWeight2 = ({
   onStyleChange,
   tooltipText = "Stroke Weight"
 }) => {
-  const [isOpen, setIsOpen] = useState15(false);
-  const [inputValue, setInputValue] = useState15(width.toString());
-  useEffect9(() => {
+  const [isOpen, setIsOpen] = useState17(false);
+  const [inputValue, setInputValue] = useState17(width.toString());
+  useEffect11(() => {
     setInputValue(width.toString());
   }, [width]);
-  const handleSliderChange = useCallback29((values) => {
+  const handleSliderChange = useCallback31((values) => {
     const newWidth = values[0];
     setInputValue(newWidth.toString());
     onWidthChange(newWidth);
   }, [onWidthChange]);
-  const handleInputChange = useCallback29((e) => {
+  const handleInputChange = useCallback31((e) => {
     setInputValue(e.target.value);
   }, []);
-  const handleInputBlur = useCallback29(() => {
+  const handleInputBlur = useCallback31(() => {
     const parsed = parseInt(inputValue, 10);
     if (isNaN(parsed)) {
       setInputValue(width.toString());
@@ -6009,63 +6497,63 @@ var StrokeWeight2 = ({
     setInputValue(clamped.toString());
     onWidthChange(clamped);
   }, [inputValue, width, onWidthChange]);
-  const handleInputKeyDown = useCallback29((e) => {
+  const handleInputKeyDown = useCallback31((e) => {
     if (e.key === "Enter") {
       handleInputBlur();
     }
   }, [handleInputBlur]);
-  return /* @__PURE__ */ jsxs45(Tooltip, { children: [
-    /* @__PURE__ */ jsxs45(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx56(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs47(Tooltip, { children: [
+    /* @__PURE__ */ jsxs47(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx58(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
         Button,
         {
           variant: "ghost",
           className: `shadow-none transition-none cursor-pointer rounded-[12px] ${isOpen ? "bg-muted" : ""}`,
           size: "icon",
-          children: /* @__PURE__ */ jsx56(MinusIcon4, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx58(MinusIcon4, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsx56(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-2", children: [
-          /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsx58(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px]", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-2", children: [
+          /* @__PURE__ */ jsx58(
             Button,
             {
               variant: borderStyle === "solid" ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onStyleChange("solid"),
-              children: /* @__PURE__ */ jsx56("div", { className: "w-full h-[2px] bg-current" })
+              children: /* @__PURE__ */ jsx58("div", { className: "w-full h-[2px] bg-current" })
             }
           ),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx58(
             Button,
             {
               variant: borderStyle === "dashed" ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onStyleChange("dashed"),
-              children: /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center justify-center gap-1", children: [
-                /* @__PURE__ */ jsx56("div", { className: "w-full h-[2px] bg-current" }),
-                /* @__PURE__ */ jsx56("div", { className: "w-full h-[2px] bg-current" })
+              children: /* @__PURE__ */ jsxs47("div", { className: "w-full flex flex-row items-center justify-center gap-1", children: [
+                /* @__PURE__ */ jsx58("div", { className: "w-full h-[2px] bg-current" }),
+                /* @__PURE__ */ jsx58("div", { className: "w-full h-[2px] bg-current" })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx58(
             Button,
             {
               variant: borderStyle === "dotted" ? "default" : "outline",
               className: "flex-1 cursor-pointer shadow-none rounded-[12px]",
               onClick: () => onStyleChange("dotted"),
-              children: /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center justify-center gap-1", children: [
-                /* @__PURE__ */ jsx56("div", { className: "rounded-full w-[4px] h-[4px] bg-current" }),
-                /* @__PURE__ */ jsx56("div", { className: "rounded-full w-[4px] h-[4px] bg-current" }),
-                /* @__PURE__ */ jsx56("div", { className: "rounded-full w-[4px] h-[4px] bg-current" })
+              children: /* @__PURE__ */ jsxs47("div", { className: "w-full flex flex-row items-center justify-center gap-1", children: [
+                /* @__PURE__ */ jsx58("div", { className: "rounded-full w-[4px] h-[4px] bg-current" }),
+                /* @__PURE__ */ jsx58("div", { className: "rounded-full w-[4px] h-[4px] bg-current" }),
+                /* @__PURE__ */ jsx58("div", { className: "rounded-full w-[4px] h-[4px] bg-current" })
               ] })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs45("div", { children: [
-          /* @__PURE__ */ jsx56(Label, { children: "Stroke weight" }),
-          /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsxs47("div", { children: [
+          /* @__PURE__ */ jsx58(Label, { children: "Stroke weight" }),
+          /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ jsx58(
               Slider2,
               {
                 value: [width],
@@ -6075,7 +6563,7 @@ var StrokeWeight2 = ({
                 step: 1
               }
             ),
-            /* @__PURE__ */ jsx56(
+            /* @__PURE__ */ jsx58(
               Input,
               {
                 type: "number",
@@ -6092,15 +6580,15 @@ var StrokeWeight2 = ({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
+    /* @__PURE__ */ jsx58(TooltipContent, { side: "bottom", className: "z-51", children: tooltipText })
   ] });
 };
 
 // src/core/editor/hooks/use-divider-border.ts
-import { useMemo as useMemo26, useCallback as useCallback30 } from "react";
+import { useMemo as useMemo28, useCallback as useCallback32 } from "react";
 var useDividerBorder = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const { element, width, style, color } = useMemo26(() => {
+  const { element, width, style, color } = useMemo28(() => {
     if (!focusIdx || !template) {
       return { element: null, width: 1, style: "solid", color: "#000000" };
     }
@@ -6118,7 +6606,7 @@ var useDividerBorder = () => {
       color: rawColor
     };
   }, [focusIdx, template]);
-  const setWidth = useCallback30((newWidth) => {
+  const setWidth = useCallback32((newWidth) => {
     if (!focusIdx || !template || !element) return;
     const clampedWidth = Math.max(1, Math.min(50, newWidth));
     updateElement(focusIdx, {
@@ -6128,7 +6616,7 @@ var useDividerBorder = () => {
       }
     });
   }, [focusIdx, template, element, updateElement]);
-  const setStyle = useCallback30((newStyle) => {
+  const setStyle = useCallback32((newStyle) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: {
@@ -6147,10 +6635,10 @@ var useDividerBorder = () => {
 };
 
 // src/core/editor/hooks/use-width.ts
-import { useMemo as useMemo27, useCallback as useCallback31 } from "react";
+import { useMemo as useMemo29, useCallback as useCallback33 } from "react";
 var useWidth = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const currentValue = useMemo27(() => {
+  const currentValue = useMemo29(() => {
     if (!focusIdx || !template) return 100;
     const element = getValueByIdx(template, focusIdx);
     const rawValue = element?.attributes?.width;
@@ -6158,7 +6646,7 @@ var useWidth = () => {
     const parsed = parseFloat(rawValue.replace("%", ""));
     return isNaN(parsed) ? 100 : Math.max(10, Math.min(100, parsed));
   }, [focusIdx, template]);
-  const handleChange = useCallback31((value) => {
+  const handleChange = useCallback33((value) => {
     if (!focusIdx || !template) return;
     const element = getValueByIdx(template, focusIdx);
     if (!element) return;
@@ -6177,9 +6665,9 @@ var useWidth = () => {
 };
 
 // src/core/editor/components/element-gear/divider/toolbar.tsx
-import { useCallback as useCallback32, useMemo as useMemo28 } from "react";
+import { useCallback as useCallback34, useMemo as useMemo30 } from "react";
 import lodashGet13 from "lodash/get";
-import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
 var DIVIDER_ALIGNMENTS = ["left", "center", "right"];
 var DividerToolbar = () => {
   const { activeView, setActiveView, setColorType, setColorTarget, colorTarget } = useSidebarContext();
@@ -6187,24 +6675,24 @@ var DividerToolbar = () => {
   const border = useDividerBorder();
   const padding = usePadding();
   const width = useWidth();
-  const currentElement = useMemo28(() => {
+  const currentElement = useMemo30(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return lodashGet13(template, path);
   }, [focusIdx, template]);
   const currentAlign = currentElement?.attributes?.align || "center";
   const currentBgColor = currentElement?.attributes?.["container-background-color"];
-  const handleOpenBgColorPicker = useCallback32(() => {
+  const handleOpenBgColorPicker = useCallback34(() => {
     setColorType("Background Color");
     setColorTarget("dividerBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback32(() => {
+  const handleOpenStrokeColorPicker = useCallback34(() => {
     setColorType("Stroke Color");
     setColorTarget("dividerBorderColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleCycleAlign = useCallback32(() => {
+  const handleCycleAlign = useCallback34(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = DIVIDER_ALIGNMENTS.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % DIVIDER_ALIGNMENTS.length;
@@ -6213,10 +6701,10 @@ var DividerToolbar = () => {
       attributes: { ...currentElement.attributes, align: nextAlign }
     });
   }, [focusIdx, currentElement, currentAlign, updateElement]);
-  return /* @__PURE__ */ jsxs46(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx57(ToolbarContent, { children: /* @__PURE__ */ jsx57(BasicOption, {}) }),
-    /* @__PURE__ */ jsx57(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx57(ToolbarContent, { children: /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs48(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx59(ToolbarContent, { children: /* @__PURE__ */ jsx59(BasicOption, {}) }),
+    /* @__PURE__ */ jsx59(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx59(ToolbarContent, { children: /* @__PURE__ */ jsx59(
       BackgroundColorBtn,
       {
         activeView,
@@ -6225,29 +6713,29 @@ var DividerToolbar = () => {
         currentBgColor: currentBgColor || "transparent"
       }
     ) }),
-    /* @__PURE__ */ jsx57(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs46(ToolbarContent, { children: [
-      /* @__PURE__ */ jsxs46(Tooltip, { children: [
-        /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx59(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs48(ToolbarContent, { children: [
+      /* @__PURE__ */ jsxs48(Tooltip, { children: [
+        /* @__PURE__ */ jsx59(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx59(
           Button,
           {
             variant: "ghost",
             className: "shadow-none transition-none cursor-pointer rounded-[12px]",
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx57(
+            children: /* @__PURE__ */ jsx59(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx57("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx59("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx59(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx59(
         StrokeWeight2,
         {
           width: border.width,
@@ -6257,57 +6745,57 @@ var DividerToolbar = () => {
           tooltipText: "Stroke Weight"
         }
       ),
-      /* @__PURE__ */ jsx57(BetterPadding, {})
+      /* @__PURE__ */ jsx59(BetterPadding, {})
     ] }),
-    /* @__PURE__ */ jsx57(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx57(ToolbarContent, { children: /* @__PURE__ */ jsxs46(Tooltip, { children: [
-      /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx59(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx59(ToolbarContent, { children: /* @__PURE__ */ jsxs48(Tooltip, { children: [
+      /* @__PURE__ */ jsx59(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx59(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ jsx57("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx59("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
+      /* @__PURE__ */ jsx59(TooltipContent, { side: "bottom", className: "z-51", children: "Align" })
     ] }) })
   ] });
 };
 
 // src/core/editor/components/element-gear/image/toolbar.tsx
-import { useCallback as useCallback33, useMemo as useMemo29 } from "react";
+import { useCallback as useCallback35, useMemo as useMemo31 } from "react";
 import { get as lodashGet14 } from "lodash";
-import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs49 } from "react/jsx-runtime";
 var ImageToolbar = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const currentElement = useMemo29(() => {
+  const currentElement = useMemo31(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return lodashGet14(template, path);
   }, [focusIdx, template]);
-  const currentBgColor = useMemo29(() => {
+  const currentBgColor = useMemo31(() => {
     return currentElement?.attributes?.["container-background-color"];
   }, [currentElement]);
-  const currentAlign = useMemo29(() => {
+  const currentAlign = useMemo31(() => {
     return currentElement?.attributes?.["align"] || "center";
   }, [currentElement]);
   const border = useBorder();
   const borderRadius = useBorderRadius();
   const padding = usePadding();
-  const handleOpenBgColorPicker = useCallback33(() => {
+  const handleOpenBgColorPicker = useCallback35(() => {
     setColorType("Background Color");
     setColorTarget("imageBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback33(() => {
+  const handleOpenStrokeColorPicker = useCallback35(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleCycleAlign = useCallback33(() => {
+  const handleCycleAlign = useCallback35(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -6316,11 +6804,11 @@ var ImageToolbar = () => {
       attributes: { ...currentElement.attributes, align: nextAlign }
     });
   }, [focusIdx, currentElement, currentAlign, updateElement]);
-  return /* @__PURE__ */ jsxs47(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx58(ToolbarContent, { children: /* @__PURE__ */ jsx58(BasicOption, {}) }),
-    /* @__PURE__ */ jsx58(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs47(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs49(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx60(ToolbarContent, { children: /* @__PURE__ */ jsx60(BasicOption, {}) }),
+    /* @__PURE__ */ jsx60(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs49(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx60(
         BackgroundColorBtn,
         {
           activeView,
@@ -6329,31 +6817,31 @@ var ImageToolbar = () => {
           currentBgColor: currentBgColor || "transparent"
         }
       ),
-      /* @__PURE__ */ jsx58(ImageMenu, { type: "image" })
+      /* @__PURE__ */ jsx60(ImageMenu, { type: "image" })
     ] }),
-    /* @__PURE__ */ jsx58(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs47(ToolbarContent, { children: [
-      border.isEnabled && /* @__PURE__ */ jsxs47(Tooltip, { children: [
-        /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx60(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs49(ToolbarContent, { children: [
+      border.isEnabled && /* @__PURE__ */ jsxs49(Tooltip, { children: [
+        /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "strokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx58(
+            children: /* @__PURE__ */ jsx60(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx58("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx60("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx58(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx60(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx60(
         StrokeWeight,
         {
           width: border.width,
@@ -6362,7 +6850,7 @@ var ImageToolbar = () => {
           onEnabledChange: border.setEnabled
         }
       ),
-      /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx60(
         BorderRadius,
         {
           value: borderRadius.value,
@@ -6370,41 +6858,41 @@ var ImageToolbar = () => {
           tooltipText: "Corner Rounding"
         }
       ),
-      /* @__PURE__ */ jsx58(BetterPadding, {})
+      /* @__PURE__ */ jsx60(BetterPadding, {})
     ] }),
-    /* @__PURE__ */ jsx58(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx58(ToolbarContent, { children: /* @__PURE__ */ jsxs47(Tooltip, { children: [
-      /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx60(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx60(ToolbarContent, { children: /* @__PURE__ */ jsxs49(Tooltip, { children: [
+      /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(
         Button,
         {
           variant: "ghost",
           className: "shadow-none transition-none cursor-pointer",
           size: "icon",
           onClick: handleCycleAlign,
-          children: /* @__PURE__ */ jsx58("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx60("img", { src: ALIGNMENT_ICONS[currentAlign], alt: "Align", className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx58(TooltipContent, { side: "bottom", children: "Align" })
+      /* @__PURE__ */ jsx60(TooltipContent, { side: "bottom", children: "Align" })
     ] }) })
   ] });
 };
 
 // src/core/editor/components/element-gear/property/toolbar.tsx
-import { useMemo as useMemo31, useCallback as useCallback35 } from "react";
+import { useMemo as useMemo33, useCallback as useCallback37 } from "react";
 
 // src/core/editor/components/property-edit-menu.tsx
 import { ChevronDownIcon as ChevronDownIcon4, CircleCheckIcon, HouseIcon } from "lucide-react";
-import { useState as useState16, useCallback as useCallback34, useMemo as useMemo30, useEffect as useEffect10 } from "react";
+import { useState as useState18, useCallback as useCallback36, useMemo as useMemo32, useEffect as useEffect12 } from "react";
 
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon as CheckIcon8 } from "lucide-react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -6413,12 +6901,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx61(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ jsx59(CheckIcon8, { className: "size-3.5" })
+          children: /* @__PURE__ */ jsx61(CheckIcon8, { className: "size-3.5" })
         }
       )
     }
@@ -6428,7 +6916,7 @@ function Checkbox({
 // src/components/ui/toggle.tsx
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var toggleVariants = cva3(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
@@ -6455,7 +6943,7 @@ function Toggle({
   size,
   ...props
 }) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx62(
     TogglePrimitive.Root,
     {
       "data-slot": "toggle",
@@ -6466,7 +6954,7 @@ function Toggle({
 }
 
 // src/core/editor/components/property-edit-menu.tsx
-import { jsx as jsx61, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs50 } from "react/jsx-runtime";
 var CARD_FEATURES = {
   "property-card": { status: true, openhouse: true, brokerage: true, description: true },
   "property-card-single-two": { status: true, openhouse: false, brokerage: true, description: false },
@@ -6475,27 +6963,27 @@ var CARD_FEATURES = {
 var PropertyEditMenu = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [isOpen, setIsOpen] = useState16(false);
-  const [openSection, setOpenSection] = useState16(null);
-  const [openhouseEnabled, setOpenhouseEnabled] = useState16(true);
-  const [openhouseDate, setOpenhouseDate] = useState16(/* @__PURE__ */ new Date());
-  const [openhouseStartTime, setOpenhouseStartTime] = useState16("12:00");
-  const [openhouseEndTime, setOpenhouseEndTime] = useState16("13:00");
-  const propertyElement = useMemo30(() => {
+  const [isOpen, setIsOpen] = useState18(false);
+  const [openSection, setOpenSection] = useState18(null);
+  const [openhouseEnabled, setOpenhouseEnabled] = useState18(true);
+  const [openhouseDate, setOpenhouseDate] = useState18(/* @__PURE__ */ new Date());
+  const [openhouseStartTime, setOpenhouseStartTime] = useState18("12:00");
+  const [openhouseEndTime, setOpenhouseEndTime] = useState18("13:00");
+  const propertyElement = useMemo32(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
   }, [focusIdx, template]);
   const cardType = propertyElement?.type;
   const features = cardType ? CARD_FEATURES[cardType] : null;
-  const currentPrice = useMemo30(() => {
+  const currentPrice = useMemo32(() => {
     const rawPrice = propertyElement?.attributes?.["price"] || "";
     return parsePrice(rawPrice);
   }, [propertyElement]);
-  const [priceInput, setPriceInput] = useState16(currentPrice);
-  useEffect10(() => {
+  const [priceInput, setPriceInput] = useState18(currentPrice);
+  useEffect12(() => {
     setPriceInput(currentPrice);
   }, [currentPrice]);
-  const handlePriceBlur = useCallback34(() => {
+  const handlePriceBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (priceInput === currentPrice) return;
     updateElement(focusIdx, {
@@ -6505,73 +6993,73 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, priceInput, currentPrice, updateElement]);
-  const currentBeds = useMemo30(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
-  const currentBaths = useMemo30(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
-  const currentSqft = useMemo30(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
-  const currentDescription = useMemo30(() => propertyElement?.attributes?.["description"] || "", [propertyElement]);
-  const currentIsDescription = useMemo30(() => propertyElement?.attributes?.["is-description"] || "", [propertyElement]);
-  const currentBrokerage = useMemo30(() => propertyElement?.attributes?.["brokerage"] || "", [propertyElement]);
-  const currentIsBrokerage = useMemo30(() => propertyElement?.attributes?.["is-brokerage"] || "", [propertyElement]);
-  const currentStatus = useMemo30(() => propertyElement?.attributes?.["status"] || "", [propertyElement]);
-  const currentIsStatus = useMemo30(() => propertyElement?.attributes?.["is-status"] || "", [propertyElement]);
-  const currentIsNew = useMemo30(() => propertyElement?.attributes?.["is-new"] || "", [propertyElement]);
-  const currentStatusColor = useMemo30(() => propertyElement?.attributes?.["status-color"] || "#B8B8B8", [propertyElement]);
-  const currentIsOpenHouse = useMemo30(() => propertyElement?.attributes?.["is-open-house"] || "", [propertyElement]);
-  const currentOpenHouseDate = useMemo30(() => propertyElement?.attributes?.["open-house-date"] || "", [propertyElement]);
-  const currentOpenHouseTime = useMemo30(() => propertyElement?.attributes?.["open-house-time"] || "", [propertyElement]);
-  const currentAddress = useMemo30(() => propertyElement?.attributes?.["address"] || "", [propertyElement]);
-  const currentCity = useMemo30(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
-  const currentCountry = useMemo30(() => propertyElement?.attributes?.["country"] || "USA", [propertyElement]);
-  const [bedsInput, setBedsInput] = useState16(currentBeds);
-  const [bathsInput, setBathsInput] = useState16(currentBaths);
-  const [sqftInput, setSqftInput] = useState16(currentSqft);
-  const [descriptionInput, setDescriptionInput] = useState16(currentDescription);
-  const [isDescriptionEnabled, setIsDescriptionEnabled] = useState16(!!currentIsDescription);
-  const [brokerageInput, setBrokerageInput] = useState16(currentBrokerage);
-  const [isBrokerageEnabled, setIsBrokerageEnabled] = useState16(!!currentIsBrokerage);
-  const [statusInput, setStatusInput] = useState16(currentStatus);
-  const [isStatusEnabled, setIsStatusEnabled] = useState16(!!currentIsStatus);
-  const [isNewEnabled, setIsNewEnabled] = useState16(!!currentIsNew);
-  const [addressLine1Input, setAddressLine1Input] = useState16("");
-  const [addressLine2Input, setAddressLine2Input] = useState16("");
-  const [cityInput, setCityInput] = useState16("");
-  const [stateInput, setStateInput] = useState16("");
-  const [zipInput, setZipInput] = useState16("");
-  const [countryInput, setCountryInput] = useState16("USA");
-  useEffect10(() => {
+  const currentBeds = useMemo32(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
+  const currentBaths = useMemo32(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
+  const currentSqft = useMemo32(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
+  const currentDescription = useMemo32(() => propertyElement?.attributes?.["description"] || "", [propertyElement]);
+  const currentIsDescription = useMemo32(() => propertyElement?.attributes?.["is-description"] || "", [propertyElement]);
+  const currentBrokerage = useMemo32(() => propertyElement?.attributes?.["brokerage"] || "", [propertyElement]);
+  const currentIsBrokerage = useMemo32(() => propertyElement?.attributes?.["is-brokerage"] || "", [propertyElement]);
+  const currentStatus = useMemo32(() => propertyElement?.attributes?.["status"] || "", [propertyElement]);
+  const currentIsStatus = useMemo32(() => propertyElement?.attributes?.["is-status"] || "", [propertyElement]);
+  const currentIsNew = useMemo32(() => propertyElement?.attributes?.["is-new"] || "", [propertyElement]);
+  const currentStatusColor = useMemo32(() => propertyElement?.attributes?.["status-color"] || "#B8B8B8", [propertyElement]);
+  const currentIsOpenHouse = useMemo32(() => propertyElement?.attributes?.["is-open-house"] || "", [propertyElement]);
+  const currentOpenHouseDate = useMemo32(() => propertyElement?.attributes?.["open-house-date"] || "", [propertyElement]);
+  const currentOpenHouseTime = useMemo32(() => propertyElement?.attributes?.["open-house-time"] || "", [propertyElement]);
+  const currentAddress = useMemo32(() => propertyElement?.attributes?.["address"] || "", [propertyElement]);
+  const currentCity = useMemo32(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
+  const currentCountry = useMemo32(() => propertyElement?.attributes?.["country"] || "USA", [propertyElement]);
+  const [bedsInput, setBedsInput] = useState18(currentBeds);
+  const [bathsInput, setBathsInput] = useState18(currentBaths);
+  const [sqftInput, setSqftInput] = useState18(currentSqft);
+  const [descriptionInput, setDescriptionInput] = useState18(currentDescription);
+  const [isDescriptionEnabled, setIsDescriptionEnabled] = useState18(!!currentIsDescription);
+  const [brokerageInput, setBrokerageInput] = useState18(currentBrokerage);
+  const [isBrokerageEnabled, setIsBrokerageEnabled] = useState18(!!currentIsBrokerage);
+  const [statusInput, setStatusInput] = useState18(currentStatus);
+  const [isStatusEnabled, setIsStatusEnabled] = useState18(!!currentIsStatus);
+  const [isNewEnabled, setIsNewEnabled] = useState18(!!currentIsNew);
+  const [addressLine1Input, setAddressLine1Input] = useState18("");
+  const [addressLine2Input, setAddressLine2Input] = useState18("");
+  const [cityInput, setCityInput] = useState18("");
+  const [stateInput, setStateInput] = useState18("");
+  const [zipInput, setZipInput] = useState18("");
+  const [countryInput, setCountryInput] = useState18("USA");
+  useEffect12(() => {
     setBedsInput(currentBeds);
   }, [currentBeds]);
-  useEffect10(() => {
+  useEffect12(() => {
     setBathsInput(currentBaths);
   }, [currentBaths]);
-  useEffect10(() => {
+  useEffect12(() => {
     setSqftInput(currentSqft);
   }, [currentSqft]);
-  useEffect10(() => {
+  useEffect12(() => {
     setDescriptionInput(currentDescription);
   }, [currentDescription]);
-  useEffect10(() => {
+  useEffect12(() => {
     setIsDescriptionEnabled(!!currentIsDescription);
   }, [currentIsDescription]);
-  useEffect10(() => {
+  useEffect12(() => {
     setBrokerageInput(currentBrokerage);
   }, [currentBrokerage]);
-  useEffect10(() => {
+  useEffect12(() => {
     setIsBrokerageEnabled(!!currentIsBrokerage);
   }, [currentIsBrokerage]);
-  useEffect10(() => {
+  useEffect12(() => {
     setStatusInput(currentStatus);
   }, [currentStatus]);
-  useEffect10(() => {
+  useEffect12(() => {
     setIsStatusEnabled(!!currentIsStatus);
   }, [currentIsStatus]);
-  useEffect10(() => {
+  useEffect12(() => {
     setIsNewEnabled(!!currentIsNew);
   }, [currentIsNew]);
-  useEffect10(() => {
+  useEffect12(() => {
     setOpenhouseEnabled(!!currentIsOpenHouse);
   }, [currentIsOpenHouse]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (currentOpenHouseDate) {
       const parsed = new Date(currentOpenHouseDate);
       if (!isNaN(parsed.getTime())) {
@@ -6579,18 +7067,18 @@ var PropertyEditMenu = () => {
       }
     }
   }, [currentOpenHouseDate]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (currentOpenHouseTime) {
       const [start, end] = currentOpenHouseTime.split("-");
       if (start) setOpenhouseStartTime(start);
       if (end) setOpenhouseEndTime(end);
     }
   }, [currentOpenHouseTime]);
-  useEffect10(() => {
+  useEffect12(() => {
     setAddressLine1Input(currentAddress);
     setAddressLine2Input("");
   }, [currentAddress]);
-  useEffect10(() => {
+  useEffect12(() => {
     const match = currentCity.match(/^(.+),\s*(\w{2})\s*(\d{5})?$/);
     if (match) {
       setCityInput(match[1] || "");
@@ -6602,10 +7090,10 @@ var PropertyEditMenu = () => {
       setZipInput("");
     }
   }, [currentCity]);
-  useEffect10(() => {
+  useEffect12(() => {
     setCountryInput(currentCountry);
   }, [currentCountry]);
-  const handleBedsBlur = useCallback34(() => {
+  const handleBedsBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (bedsInput === currentBeds) return;
     updateElement(focusIdx, {
@@ -6615,7 +7103,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, bedsInput, currentBeds, updateElement]);
-  const handleBathsBlur = useCallback34(() => {
+  const handleBathsBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (bathsInput === currentBaths) return;
     updateElement(focusIdx, {
@@ -6625,7 +7113,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, bathsInput, currentBaths, updateElement]);
-  const handleSqftBlur = useCallback34(() => {
+  const handleSqftBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (sqftInput === currentSqft) return;
     updateElement(focusIdx, {
@@ -6635,7 +7123,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, sqftInput, currentSqft, updateElement]);
-  const handleDescriptionBlur = useCallback34(() => {
+  const handleDescriptionBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (descriptionInput === currentDescription) return;
     updateElement(focusIdx, {
@@ -6645,7 +7133,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, descriptionInput, currentDescription, updateElement]);
-  const handleIsDescriptionChange = useCallback34((checked) => {
+  const handleIsDescriptionChange = useCallback36((checked) => {
     setIsDescriptionEnabled(checked);
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
@@ -6655,7 +7143,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleBrokerageBlur = useCallback34(() => {
+  const handleBrokerageBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (brokerageInput === currentBrokerage) return;
     updateElement(focusIdx, {
@@ -6665,7 +7153,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, brokerageInput, currentBrokerage, updateElement]);
-  const handleIsBrokerageChange = useCallback34((checked) => {
+  const handleIsBrokerageChange = useCallback36((checked) => {
     setIsBrokerageEnabled(checked);
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
@@ -6675,7 +7163,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleStatusBlur = useCallback34(() => {
+  const handleStatusBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     if (statusInput === currentStatus) return;
     updateElement(focusIdx, {
@@ -6685,7 +7173,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, statusInput, currentStatus, updateElement]);
-  const handleIsStatusChange = useCallback34((checked) => {
+  const handleIsStatusChange = useCallback36((checked) => {
     setIsStatusEnabled(checked);
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
@@ -6695,7 +7183,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleIsNewChange = useCallback34((checked) => {
+  const handleIsNewChange = useCallback36((checked) => {
     setIsNewEnabled(checked);
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
@@ -6705,7 +7193,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleIsOpenHouseChange = useCallback34((checked) => {
+  const handleIsOpenHouseChange = useCallback36((checked) => {
     setOpenhouseEnabled(checked);
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
@@ -6715,7 +7203,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleOpenHouseDateBlur = useCallback34(() => {
+  const handleOpenHouseDateBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     const newDate = openhouseDate ? openhouseDate.toISOString().split("T")[0] : "";
     if (newDate === currentOpenHouseDate) return;
@@ -6726,7 +7214,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, openhouseDate, currentOpenHouseDate, updateElement]);
-  const handleOpenHouseTimeBlur = useCallback34(() => {
+  const handleOpenHouseTimeBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     const newTime = `${openhouseStartTime}-${openhouseEndTime}`;
     if (newTime === currentOpenHouseTime) return;
@@ -6737,7 +7225,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, openhouseStartTime, openhouseEndTime, currentOpenHouseTime, updateElement]);
-  const handleAddressBlur = useCallback34(() => {
+  const handleAddressBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     const newAddress = addressLine2Input ? `${addressLine1Input}, ${addressLine2Input}` : addressLine1Input;
     if (newAddress === currentAddress) return;
@@ -6748,7 +7236,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, addressLine1Input, addressLine2Input, currentAddress, updateElement]);
-  const handleCityBlur = useCallback34(() => {
+  const handleCityBlur = useCallback36(() => {
     if (!focusIdx || !propertyElement) return;
     const newCity = zipInput ? `${cityInput}, ${stateInput} ${zipInput}` : stateInput ? `${cityInput}, ${stateInput}` : cityInput;
     if (newCity === currentCity) return;
@@ -6759,7 +7247,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, cityInput, stateInput, zipInput, currentCity, updateElement]);
-  const handleCountryChange = useCallback34((value) => {
+  const handleCountryChange = useCallback36((value) => {
     setCountryInput(value);
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
@@ -6769,43 +7257,43 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleOpenStatusColorPicker = useCallback34(() => {
+  const handleOpenStatusColorPicker = useCallback36(() => {
     setColorType("Status Color");
     setColorTarget("statusColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggle = useCallback34((section) => {
+  const handleToggle = useCallback36((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleTogglePrice = useCallback34(() => handleToggle("price"), [handleToggle]);
-  const handleToggleDetails = useCallback34(() => handleToggle("details"), [handleToggle]);
-  const handleToggleAddress = useCallback34(() => handleToggle("address"), [handleToggle]);
-  const handleToggleStatus = useCallback34(() => handleToggle("status"), [handleToggle]);
-  const handleToggleOpenhouse = useCallback34(() => handleToggle("openhouse"), [handleToggle]);
-  const handleToggleBrokerage = useCallback34(() => handleToggle("brokerage"), [handleToggle]);
-  const handleToggleDescription = useCallback34(() => handleToggle("description"), [handleToggle]);
-  const handleToggleMLS = useCallback34(() => handleToggle("mls"), [handleToggle]);
-  return /* @__PURE__ */ jsxs48(Tooltip, { children: [
-    /* @__PURE__ */ jsxs48(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx61(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
+  const handleTogglePrice = useCallback36(() => handleToggle("price"), [handleToggle]);
+  const handleToggleDetails = useCallback36(() => handleToggle("details"), [handleToggle]);
+  const handleToggleAddress = useCallback36(() => handleToggle("address"), [handleToggle]);
+  const handleToggleStatus = useCallback36(() => handleToggle("status"), [handleToggle]);
+  const handleToggleOpenhouse = useCallback36(() => handleToggle("openhouse"), [handleToggle]);
+  const handleToggleBrokerage = useCallback36(() => handleToggle("brokerage"), [handleToggle]);
+  const handleToggleDescription = useCallback36(() => handleToggle("description"), [handleToggle]);
+  const handleToggleMLS = useCallback36(() => handleToggle("mls"), [handleToggle]);
+  return /* @__PURE__ */ jsxs50(Tooltip, { children: [
+    /* @__PURE__ */ jsxs50(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx63(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
         Button,
         {
           variant: "outline",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: /* @__PURE__ */ jsx61(HouseIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx63(HouseIcon, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsxs48(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
-        /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "price", onOpenChange: handleTogglePrice, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs48("p", { children: [
-              /* @__PURE__ */ jsx61("span", { className: "text-red-500", children: "*" }),
+      /* @__PURE__ */ jsxs50(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
+        /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "price", onOpenChange: handleTogglePrice, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs50("p", { children: [
+              /* @__PURE__ */ jsx63("span", { className: "text-red-500", children: "*" }),
               "Price"
             ] }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "price" ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "price" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsx61("div", { className: "flex flex-row items-center justify-between gap-2", children: /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsx63("div", { className: "flex flex-row items-center justify-between gap-2", children: /* @__PURE__ */ jsx63(
             Input,
             {
               type: "number",
@@ -6817,16 +7305,16 @@ var PropertyEditMenu = () => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "details", onOpenChange: handleToggleDetails, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs48("p", { children: [
-              /* @__PURE__ */ jsx61("span", { className: "text-red-500", children: "*" }),
+        /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "details", onOpenChange: handleToggleDetails, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs50("p", { children: [
+              /* @__PURE__ */ jsx63("span", { className: "text-red-500", children: "*" }),
               "Details"
             ] }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "details" ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "details" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-start justify-start gap-2", children: [
-            /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-row items-start justify-start gap-2", children: [
+            /* @__PURE__ */ jsx63(
               Input,
               {
                 type: "number",
@@ -6837,7 +7325,7 @@ var PropertyEditMenu = () => {
                 onBlur: handleBedsBlur
               }
             ),
-            /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsx63(
               Input,
               {
                 type: "number",
@@ -6848,7 +7336,7 @@ var PropertyEditMenu = () => {
                 onBlur: handleBathsBlur
               }
             ),
-            /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsx63(
               Input,
               {
                 type: "number",
@@ -6861,16 +7349,16 @@ var PropertyEditMenu = () => {
             )
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "address", onOpenChange: handleToggleAddress, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs48("p", { children: [
-              /* @__PURE__ */ jsx61("span", { className: "text-red-500", children: "*" }),
+        /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "address", onOpenChange: handleToggleAddress, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs50("p", { children: [
+              /* @__PURE__ */ jsx63("span", { className: "text-red-500", children: "*" }),
               "Address"
             ] }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "address" ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "address" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-col items-start justify-start gap-2", children: [
-            /* @__PURE__ */ jsx61("div", { className: "w-full flex flex-row items-start justify-start gap-2", children: /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-start justify-start gap-2", children: [
+            /* @__PURE__ */ jsx63("div", { className: "w-full flex flex-row items-start justify-start gap-2", children: /* @__PURE__ */ jsx63(
               Input,
               {
                 type: "text",
@@ -6881,7 +7369,7 @@ var PropertyEditMenu = () => {
                 onBlur: handleAddressBlur
               }
             ) }),
-            /* @__PURE__ */ jsx61("div", { className: "w-full", children: /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsx63("div", { className: "w-full", children: /* @__PURE__ */ jsx63(
               Input,
               {
                 type: "text",
@@ -6892,8 +7380,8 @@ var PropertyEditMenu = () => {
                 onBlur: handleAddressBlur
               }
             ) }),
-            /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-start justify-start gap-2", children: [
-              /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsxs50("div", { className: "flex flex-row items-start justify-start gap-2", children: [
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   type: "text",
@@ -6904,7 +7392,7 @@ var PropertyEditMenu = () => {
                   onBlur: handleCityBlur
                 }
               ),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   type: "text",
@@ -6916,12 +7404,12 @@ var PropertyEditMenu = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-start justify-start gap-2", children: [
-              /* @__PURE__ */ jsxs48(Select, { value: countryInput, onValueChange: handleCountryChange, children: [
-                /* @__PURE__ */ jsx61(SelectTrigger, { className: "w-3/4 shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx61(SelectValue, { placeholder: "Country" }) }),
-                /* @__PURE__ */ jsx61(SelectContent, { className: "w-full shadow-none rounded-[12px] z-50001", children: /* @__PURE__ */ jsx61(SelectItem, { value: "USA", children: "United States" }) })
+            /* @__PURE__ */ jsxs50("div", { className: "flex flex-row items-start justify-start gap-2", children: [
+              /* @__PURE__ */ jsxs50(Select, { value: countryInput, onValueChange: handleCountryChange, children: [
+                /* @__PURE__ */ jsx63(SelectTrigger, { className: "w-3/4 shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx63(SelectValue, { placeholder: "Country" }) }),
+                /* @__PURE__ */ jsx63(SelectContent, { className: "w-full shadow-none rounded-[12px] z-50001", children: /* @__PURE__ */ jsx63(SelectItem, { value: "USA", children: "United States" }) })
               ] }),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   type: "text",
@@ -6935,15 +7423,15 @@ var PropertyEditMenu = () => {
             ] })
           ] }) })
         ] }),
-        features?.status && /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "status", onOpenChange: handleToggleStatus, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx61("p", { children: "Status" }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "status" ? "rotate-180" : ""}` })
+        features?.status && /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "status", onOpenChange: handleToggleStatus, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx63("p", { children: "Status" }),
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "status" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-col items-start justify-start gap-2", children: [
-            /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
-              /* @__PURE__ */ jsxs48(Tooltip, { children: [
-                /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-start justify-start gap-2", children: [
+            /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
+              /* @__PURE__ */ jsxs50(Tooltip, { children: [
+                /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
                   Checkbox,
                   {
                     className: " shadow-none rounded-[12px] w-9 h-9",
@@ -6951,9 +7439,9 @@ var PropertyEditMenu = () => {
                     onCheckedChange: (checked) => handleIsStatusChange(checked === "indeterminate" ? false : checked)
                   }
                 ) }),
-                /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-50001", children: isStatusEnabled ? "Hide Status" : "Show Status" })
+                /* @__PURE__ */ jsx63(TooltipContent, { side: "bottom", className: "z-50001", children: isStatusEnabled ? "Hide Status" : "Show Status" })
               ] }),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 BackgroundColorBtn,
                 {
                   activeView,
@@ -6962,7 +7450,7 @@ var PropertyEditMenu = () => {
                   currentBgColor: currentStatusColor
                 }
               ),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   disabled: !isStatusEnabled,
@@ -6975,7 +7463,7 @@ var PropertyEditMenu = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx61("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsxs48(
+            /* @__PURE__ */ jsx63("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsxs50(
               Toggle,
               {
                 className: "w-full shadow-none rounded-[12px]",
@@ -6985,22 +7473,22 @@ var PropertyEditMenu = () => {
                 pressed: isNewEnabled,
                 onPressedChange: handleIsNewChange,
                 children: [
-                  /* @__PURE__ */ jsx61(CircleCheckIcon, { className: "group-aria-pressed/toggle:fill-foreground" }),
+                  /* @__PURE__ */ jsx63(CircleCheckIcon, { className: "group-aria-pressed/toggle:fill-foreground" }),
                   "New Label"
                 ]
               }
             ) })
           ] }) })
         ] }),
-        features?.openhouse && /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "openhouse", onOpenChange: handleToggleOpenhouse, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx61("p", { children: "Open house" }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "openhouse" ? "rotate-180" : ""}` })
+        features?.openhouse && /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "openhouse", onOpenChange: handleToggleOpenhouse, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx63("p", { children: "Open house" }),
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "openhouse" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-col items-start justify-start gap-2", children: [
-            /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
-              /* @__PURE__ */ jsxs48(Tooltip, { children: [
-                /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-start justify-start gap-2", children: [
+            /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
+              /* @__PURE__ */ jsxs50(Tooltip, { children: [
+                /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
                   Checkbox,
                   {
                     className: "shadow-none rounded-[12px] w-9 h-9",
@@ -7008,9 +7496,9 @@ var PropertyEditMenu = () => {
                     onCheckedChange: (checked) => handleIsOpenHouseChange(checked === "indeterminate" ? false : checked)
                   }
                 ) }),
-                /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-50001", children: openhouseEnabled ? "Disable Open House" : "Enable Open House" })
+                /* @__PURE__ */ jsx63(TooltipContent, { side: "bottom", className: "z-50001", children: openhouseEnabled ? "Disable Open House" : "Enable Open House" })
               ] }),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   disabled: !openhouseEnabled,
@@ -7022,8 +7510,8 @@ var PropertyEditMenu = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
-              /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   disabled: !openhouseEnabled,
@@ -7034,7 +7522,7 @@ var PropertyEditMenu = () => {
                   className: "w-full shadow-none rounded-[12px]"
                 }
               ),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   disabled: !openhouseEnabled,
@@ -7048,15 +7536,15 @@ var PropertyEditMenu = () => {
             ] })
           ] }) })
         ] }),
-        features?.brokerage && /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "brokerage", onOpenChange: handleToggleBrokerage, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx61("p", { children: "Brokerage" }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "brokerage" ? "rotate-180" : ""}` })
+        features?.brokerage && /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "brokerage", onOpenChange: handleToggleBrokerage, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx63("p", { children: "Brokerage" }),
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "brokerage" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-col items-start justify-start gap-2", children: [
-            /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
-              /* @__PURE__ */ jsxs48(Tooltip, { children: [
-                /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-start justify-start gap-2", children: [
+            /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: [
+              /* @__PURE__ */ jsxs50(Tooltip, { children: [
+                /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
                   Checkbox,
                   {
                     className: "shadow-none rounded-[12px] w-9 h-9",
@@ -7064,9 +7552,9 @@ var PropertyEditMenu = () => {
                     onCheckedChange: (checked) => handleIsBrokerageChange(checked === "indeterminate" ? false : checked)
                   }
                 ) }),
-                /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-50001", children: isBrokerageEnabled ? "Hide Brokerage" : "Show Brokerage" })
+                /* @__PURE__ */ jsx63(TooltipContent, { side: "bottom", className: "z-50001", children: isBrokerageEnabled ? "Hide Brokerage" : "Show Brokerage" })
               ] }),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 Input,
                 {
                   disabled: !isBrokerageEnabled,
@@ -7079,17 +7567,17 @@ var PropertyEditMenu = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx61("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx61("p", { className: "text-xs text-muted-foreground", children: "Please provide the listing office name." }) })
+            /* @__PURE__ */ jsx63("div", { className: "w-full flex flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx63("p", { className: "text-xs text-muted-foreground", children: "Please provide the listing office name." }) })
           ] }) })
         ] }),
-        features?.description && /* @__PURE__ */ jsxs48(Collapsible, { open: openSection === "description", onOpenChange: handleToggleDescription, children: [
-          /* @__PURE__ */ jsx61(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx61("p", { children: "Description" }),
-            /* @__PURE__ */ jsx61(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "description" ? "rotate-180" : ""}` })
+        features?.description && /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "description", onOpenChange: handleToggleDescription, children: [
+          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx63("p", { children: "Description" }),
+            /* @__PURE__ */ jsx63(ChevronDownIcon4, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "description" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx61(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-start justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs48(Tooltip, { children: [
-              /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-row items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs50(Tooltip, { children: [
+              /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
                 Checkbox,
                 {
                   className: "shadow-none rounded-[12px] w-9 h-9",
@@ -7097,9 +7585,9 @@ var PropertyEditMenu = () => {
                   onCheckedChange: (checked) => handleIsDescriptionChange(checked === "indeterminate" ? false : checked)
                 }
               ) }),
-              /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-50001", children: isDescriptionEnabled ? "Hide Description" : "Show Description" })
+              /* @__PURE__ */ jsx63(TooltipContent, { side: "bottom", className: "z-50001", children: isDescriptionEnabled ? "Hide Description" : "Show Description" })
             ] }),
-            /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsx63(
               Textarea,
               {
                 disabled: !isDescriptionEnabled,
@@ -7114,61 +7602,61 @@ var PropertyEditMenu = () => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx61(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
+    /* @__PURE__ */ jsx63(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
   ] });
 };
 
 // src/core/editor/components/element-gear/property/toolbar.tsx
 import { CaseUpperIcon as CaseUpperIcon6 } from "lucide-react";
-import { jsx as jsx62, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs51 } from "react/jsx-runtime";
 function PropertyToolbar() {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const columnIdx = useMemo31(() => {
+  const columnIdx = useMemo33(() => {
     if (!focusIdx) return null;
     return getParentIdx(focusIdx);
   }, [focusIdx]);
-  const columnElement = useMemo31(() => {
+  const columnElement = useMemo33(() => {
     if (!columnIdx || !template) return null;
     return getValueByIdx(template, columnIdx);
   }, [columnIdx, template]);
-  const propertyElement = useMemo31(() => {
+  const propertyElement = useMemo33(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
   }, [focusIdx, template]);
-  const currentBgColor = useMemo31(() => {
+  const currentBgColor = useMemo33(() => {
     return columnElement?.attributes?.["background-color"] || "transparent";
   }, [columnElement]);
-  const border = useMemo31(() => {
+  const border = useMemo33(() => {
     const rawBorder = columnElement?.attributes?.["border"];
     return parseBorder(rawBorder);
   }, [columnElement]);
-  const borderRadiusValue = useMemo31(() => {
+  const borderRadiusValue = useMemo33(() => {
     const rawRadius = columnElement?.attributes?.["border-radius"];
     return parseBorderRadius(rawRadius);
   }, [columnElement]);
-  const currentFontFamily = useMemo31(() => {
+  const currentFontFamily = useMemo33(() => {
     return propertyElement?.attributes?.["font-family"] || "Arial, sans-serif";
   }, [propertyElement]);
-  const currentTextColor = useMemo31(() => {
+  const currentTextColor = useMemo33(() => {
     return propertyElement?.attributes?.["text-color"] || "#111116";
   }, [propertyElement]);
-  const handleOpenBgColorPicker = useCallback35(() => {
+  const handleOpenBgColorPicker = useCallback37(() => {
     setColorType("Background Color");
     setColorTarget("propertyBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback35(() => {
+  const handleOpenStrokeColorPicker = useCallback37(() => {
     setColorType("Stroke Color");
     setColorTarget("propertyStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = useCallback35(() => {
+  const handleOpenTextColorPicker = useCallback37(() => {
     setColorType("Text Color");
     setColorTarget("propertyTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleFontChange = useCallback35((font) => {
+  const handleFontChange = useCallback37((font) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
       attributes: {
@@ -7177,7 +7665,7 @@ function PropertyToolbar() {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleBorderWidthChange = useCallback35((width) => {
+  const handleBorderWidthChange = useCallback37((width) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const newBorder = { ...border, width };
     const formattedBorder = formatBorder(newBorder);
@@ -7194,7 +7682,7 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, border, updateElement]);
-  const handleBorderEnabledChange = useCallback35((enabled) => {
+  const handleBorderEnabledChange = useCallback37((enabled) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const newWidth = enabled ? border.width === 0 ? 1 : border.width : 0;
     const newBorder = { ...border, width: newWidth };
@@ -7212,7 +7700,7 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, border, updateElement]);
-  const handleBorderRadiusChange = useCallback35((value) => {
+  const handleBorderRadiusChange = useCallback37((value) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const formattedRadius = formatBorderRadius(value);
     updateElement(columnIdx, {
@@ -7228,11 +7716,11 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, updateElement]);
-  return /* @__PURE__ */ jsxs49(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx62(ToolbarContent, { children: /* @__PURE__ */ jsx62(BasicOption, {}) }),
-    /* @__PURE__ */ jsx62(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs49(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs51(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx64(ToolbarContent, { children: /* @__PURE__ */ jsx64(BasicOption, {}) }),
+    /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs51(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx64(
         BackgroundColorBtn,
         {
           activeView,
@@ -7241,18 +7729,18 @@ function PropertyToolbar() {
           currentBgColor
         }
       ),
-      /* @__PURE__ */ jsx62(ImageMenu, { type: "property" }),
-      /* @__PURE__ */ jsx62(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx62(ToolbarContent, { children: /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx64(ImageMenu, { type: "property" }),
+      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx64(ToolbarContent, { children: /* @__PURE__ */ jsx64(
         FontFamilyDropdown,
         {
           currentFont: currentFontFamily,
           onFontChange: handleFontChange
         }
       ) }),
-      /* @__PURE__ */ jsx62(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs49(Tooltip, { children: [
-        /* @__PURE__ */ jsx62(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
+      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs51(Tooltip, { children: [
+        /* @__PURE__ */ jsx64(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs51(
           Button,
           {
             variant: "ghost",
@@ -7260,8 +7748,8 @@ function PropertyToolbar() {
             size: "icon",
             onClick: handleOpenTextColorPicker,
             children: [
-              /* @__PURE__ */ jsx62(CaseUpperIcon6, {}),
-              /* @__PURE__ */ jsx62(
+              /* @__PURE__ */ jsx64(CaseUpperIcon6, {}),
+              /* @__PURE__ */ jsx64(
                 "span",
                 {
                   className: "w-[14px] h-[3px] rounded-full",
@@ -7271,30 +7759,30 @@ function PropertyToolbar() {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx62(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
+        /* @__PURE__ */ jsx64(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
       ] }),
-      /* @__PURE__ */ jsx62(ToolbarSeparator, {}),
-      border.width > 0 && /* @__PURE__ */ jsxs49(Tooltip, { children: [
-        /* @__PURE__ */ jsx62(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
+      border.width > 0 && /* @__PURE__ */ jsxs51(Tooltip, { children: [
+        /* @__PURE__ */ jsx64(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx64(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "propertyStrokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx64(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx62("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx64("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx62(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx64(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx64(
         StrokeWeight,
         {
           width: border.width,
@@ -7304,7 +7792,7 @@ function PropertyToolbar() {
           max: 14
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx64(
         BorderRadius,
         {
           value: borderRadiusValue,
@@ -7313,36 +7801,36 @@ function PropertyToolbar() {
           max: 18
         }
       ),
-      /* @__PURE__ */ jsx62(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx62(PropertyEditMenu, {})
+      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx64(PropertyEditMenu, {})
     ] })
   ] });
 }
 
 // src/core/editor/components/element-gear/property/triple/toolbar.tsx
-import { useCallback as useCallback37, useMemo as useMemo33 } from "react";
+import { useCallback as useCallback39, useMemo as useMemo35 } from "react";
 
 // src/core/editor/components/property-triple-edit-menu.tsx
 import { ChevronDownIcon as ChevronDownIcon5, HouseIcon as HouseIcon2 } from "lucide-react";
-import { useState as useState17, useCallback as useCallback36, useMemo as useMemo32, useEffect as useEffect11 } from "react";
-import { jsx as jsx63, jsxs as jsxs50 } from "react/jsx-runtime";
+import { useState as useState19, useCallback as useCallback38, useMemo as useMemo34, useEffect as useEffect13 } from "react";
+import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
 var PropertyTripleEditMenu = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const [isOpen, setIsOpen] = useState17(false);
-  const [openSection, setOpenSection] = useState17(null);
-  const propertyElement = useMemo32(() => {
+  const [isOpen, setIsOpen] = useState19(false);
+  const [openSection, setOpenSection] = useState19(null);
+  const propertyElement = useMemo34(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
   }, [focusIdx, template]);
-  const currentPrice = useMemo32(() => {
+  const currentPrice = useMemo34(() => {
     const rawPrice = propertyElement?.attributes?.["price"] || "";
     return parsePrice(rawPrice);
   }, [propertyElement]);
-  const [priceInput, setPriceInput] = useState17(currentPrice);
-  useEffect11(() => {
+  const [priceInput, setPriceInput] = useState19(currentPrice);
+  useEffect13(() => {
     setPriceInput(currentPrice);
   }, [currentPrice]);
-  const handlePriceBlur = useCallback36(() => {
+  const handlePriceBlur = useCallback38(() => {
     if (!focusIdx || !propertyElement) return;
     if (priceInput === currentPrice) return;
     updateElement(focusIdx, {
@@ -7352,27 +7840,27 @@ var PropertyTripleEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, priceInput, currentPrice, updateElement]);
-  const currentBeds = useMemo32(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
-  const currentBaths = useMemo32(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
-  const currentSqft = useMemo32(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
-  const currentCity = useMemo32(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
-  const [bedsInput, setBedsInput] = useState17(currentBeds);
-  const [bathsInput, setBathsInput] = useState17(currentBaths);
-  const [sqftInput, setSqftInput] = useState17(currentSqft);
-  const [cityInput, setCityInput] = useState17(currentCity);
-  useEffect11(() => {
+  const currentBeds = useMemo34(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
+  const currentBaths = useMemo34(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
+  const currentSqft = useMemo34(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
+  const currentCity = useMemo34(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
+  const [bedsInput, setBedsInput] = useState19(currentBeds);
+  const [bathsInput, setBathsInput] = useState19(currentBaths);
+  const [sqftInput, setSqftInput] = useState19(currentSqft);
+  const [cityInput, setCityInput] = useState19(currentCity);
+  useEffect13(() => {
     setBedsInput(currentBeds);
   }, [currentBeds]);
-  useEffect11(() => {
+  useEffect13(() => {
     setBathsInput(currentBaths);
   }, [currentBaths]);
-  useEffect11(() => {
+  useEffect13(() => {
     setSqftInput(currentSqft);
   }, [currentSqft]);
-  useEffect11(() => {
+  useEffect13(() => {
     setCityInput(currentCity);
   }, [currentCity]);
-  const handleBedsBlur = useCallback36(() => {
+  const handleBedsBlur = useCallback38(() => {
     if (!focusIdx || !propertyElement) return;
     if (bedsInput === currentBeds) return;
     updateElement(focusIdx, {
@@ -7382,7 +7870,7 @@ var PropertyTripleEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, bedsInput, currentBeds, updateElement]);
-  const handleBathsBlur = useCallback36(() => {
+  const handleBathsBlur = useCallback38(() => {
     if (!focusIdx || !propertyElement) return;
     if (bathsInput === currentBaths) return;
     updateElement(focusIdx, {
@@ -7392,7 +7880,7 @@ var PropertyTripleEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, bathsInput, currentBaths, updateElement]);
-  const handleSqftBlur = useCallback36(() => {
+  const handleSqftBlur = useCallback38(() => {
     if (!focusIdx || !propertyElement) return;
     if (sqftInput === currentSqft) return;
     updateElement(focusIdx, {
@@ -7402,7 +7890,7 @@ var PropertyTripleEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, sqftInput, currentSqft, updateElement]);
-  const handleCityBlur = useCallback36(() => {
+  const handleCityBlur = useCallback38(() => {
     if (!focusIdx || !propertyElement) return;
     if (cityInput === currentCity) return;
     updateElement(focusIdx, {
@@ -7412,33 +7900,33 @@ var PropertyTripleEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, cityInput, currentCity, updateElement]);
-  const handleToggle = useCallback36((section) => {
+  const handleToggle = useCallback38((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleTogglePrice = useCallback36(() => handleToggle("price"), [handleToggle]);
-  const handleToggleDetails = useCallback36(() => handleToggle("details"), [handleToggle]);
-  const handleToggleAddress = useCallback36(() => handleToggle("address"), [handleToggle]);
-  return /* @__PURE__ */ jsxs50(Tooltip, { children: [
-    /* @__PURE__ */ jsxs50(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx63(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
+  const handleTogglePrice = useCallback38(() => handleToggle("price"), [handleToggle]);
+  const handleToggleDetails = useCallback38(() => handleToggle("details"), [handleToggle]);
+  const handleToggleAddress = useCallback38(() => handleToggle("address"), [handleToggle]);
+  return /* @__PURE__ */ jsxs52(Tooltip, { children: [
+    /* @__PURE__ */ jsxs52(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx65(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx65(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx65(
         Button,
         {
           variant: "outline",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: /* @__PURE__ */ jsx63(HouseIcon2, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx65(HouseIcon2, { className: "w-4 h-4" })
         }
       ) }) }),
-      /* @__PURE__ */ jsxs50(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
-        /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "price", onOpenChange: handleTogglePrice, children: [
-          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs50("p", { children: [
-              /* @__PURE__ */ jsx63("span", { className: "text-red-500", children: "*" }),
+      /* @__PURE__ */ jsxs52(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
+        /* @__PURE__ */ jsxs52(Collapsible, { open: openSection === "price", onOpenChange: handleTogglePrice, children: [
+          /* @__PURE__ */ jsx65(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx65(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs52("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs52("p", { children: [
+              /* @__PURE__ */ jsx65("span", { className: "text-red-500", children: "*" }),
               "Price"
             ] }),
-            /* @__PURE__ */ jsx63(ChevronDownIcon5, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "price" ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx65(ChevronDownIcon5, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "price" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsx63("div", { className: "flex flex-row items-center justify-between gap-2", children: /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx65(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsx65("div", { className: "flex flex-row items-center justify-between gap-2", children: /* @__PURE__ */ jsx65(
             Input,
             {
               type: "number",
@@ -7450,16 +7938,16 @@ var PropertyTripleEditMenu = () => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "details", onOpenChange: handleToggleDetails, children: [
-          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs50("p", { children: [
-              /* @__PURE__ */ jsx63("span", { className: "text-red-500", children: "*" }),
+        /* @__PURE__ */ jsxs52(Collapsible, { open: openSection === "details", onOpenChange: handleToggleDetails, children: [
+          /* @__PURE__ */ jsx65(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx65(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs52("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs52("p", { children: [
+              /* @__PURE__ */ jsx65("span", { className: "text-red-500", children: "*" }),
               "Details"
             ] }),
-            /* @__PURE__ */ jsx63(ChevronDownIcon5, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "details" ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx65(ChevronDownIcon5, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "details" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-row items-start justify-start gap-2", children: [
-            /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx65(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsxs52("div", { className: "flex flex-row items-start justify-start gap-2", children: [
+            /* @__PURE__ */ jsx65(
               Input,
               {
                 type: "number",
@@ -7470,7 +7958,7 @@ var PropertyTripleEditMenu = () => {
                 onBlur: handleBedsBlur
               }
             ),
-            /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsx65(
               Input,
               {
                 type: "number",
@@ -7481,7 +7969,7 @@ var PropertyTripleEditMenu = () => {
                 onBlur: handleBathsBlur
               }
             ),
-            /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsx65(
               Input,
               {
                 type: "number",
@@ -7494,15 +7982,15 @@ var PropertyTripleEditMenu = () => {
             )
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs50(Collapsible, { open: openSection === "address", onOpenChange: handleToggleAddress, children: [
-          /* @__PURE__ */ jsx63(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx63(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs50("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs50("p", { children: [
-              /* @__PURE__ */ jsx63("span", { className: "text-red-500", children: "*" }),
+        /* @__PURE__ */ jsxs52(Collapsible, { open: openSection === "address", onOpenChange: handleToggleAddress, children: [
+          /* @__PURE__ */ jsx65(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx65(Button, { variant: "ghost", className: "w-full shadow-none rounded-[12px] cursor-pointer", children: /* @__PURE__ */ jsxs52("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs52("p", { children: [
+              /* @__PURE__ */ jsx65("span", { className: "text-red-500", children: "*" }),
               "City"
             ] }),
-            /* @__PURE__ */ jsx63(ChevronDownIcon5, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "address" ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx65(ChevronDownIcon5, { className: `w-4 h-4 transition-transform duration-200 ${openSection === "address" ? "rotate-180" : ""}` })
           ] }) }) }),
-          /* @__PURE__ */ jsx63(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsx63("div", { className: "flex flex-col items-start justify-start gap-2", children: /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx65(CollapsibleContent2, { className: "w-full p-2", children: /* @__PURE__ */ jsx65("div", { className: "flex flex-col items-start justify-start gap-2", children: /* @__PURE__ */ jsx65(
             Input,
             {
               type: "text",
@@ -7516,59 +8004,59 @@ var PropertyTripleEditMenu = () => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx63(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
+    /* @__PURE__ */ jsx65(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
   ] });
 };
 
 // src/core/editor/components/element-gear/property/triple/toolbar.tsx
 import { CaseUpperIcon as CaseUpperIcon7 } from "lucide-react";
-import { jsx as jsx64, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs53 } from "react/jsx-runtime";
 var PropertyTripleItemToolbar = () => {
   const focusIdx = useEditorStore((state) => state.focusIdx);
   const template = useEditorStore((state) => state.template);
   const updateElement = useEditorStore((state) => state.updateElement);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const parentIdx = useMemo33(() => {
+  const parentIdx = useMemo35(() => {
     if (!focusIdx) return null;
     return getParentIdx(focusIdx);
   }, [focusIdx]);
-  const parentElement = useMemo33(() => {
+  const parentElement = useMemo35(() => {
     if (!parentIdx || !template) return null;
     return getValueByIdx(template, parentIdx);
   }, [parentIdx, template]);
-  const currentBgColor = useMemo33(() => {
+  const currentBgColor = useMemo35(() => {
     return parentElement?.attributes?.["background-color"] || "transparent";
   }, [parentElement]);
-  const border = useMemo33(() => {
+  const border = useMemo35(() => {
     const rawBorder = parentElement?.attributes?.["border"];
     return parseBorder(rawBorder);
   }, [parentElement]);
-  const borderRadiusValue = useMemo33(() => {
+  const borderRadiusValue = useMemo35(() => {
     const rawRadius = parentElement?.attributes?.["border-radius"];
     return parseBorderRadius(rawRadius);
   }, [parentElement]);
-  const currentTextColor = useMemo33(() => {
+  const currentTextColor = useMemo35(() => {
     return parentElement?.attributes?.["text-color"] || "#111116";
   }, [parentElement]);
-  const currentFontFamily = useMemo33(() => {
+  const currentFontFamily = useMemo35(() => {
     return parentElement?.attributes?.["font-family"] || "Arial, sans-serif";
   }, [parentElement]);
-  const handleOpenBgColorPicker = useCallback37(() => {
+  const handleOpenBgColorPicker = useCallback39(() => {
     setColorType("Background Color");
     setColorTarget("propertyBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback37(() => {
+  const handleOpenStrokeColorPicker = useCallback39(() => {
     setColorType("Stroke Color");
     setColorTarget("propertyStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = useCallback37(() => {
+  const handleOpenTextColorPicker = useCallback39(() => {
     setColorType("Text Color");
     setColorTarget("propertyTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleFontChange = useCallback37((font) => {
+  const handleFontChange = useCallback39((font) => {
     if (!parentIdx || !parentElement) return;
     updateElement(parentIdx, {
       attributes: {
@@ -7577,7 +8065,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, updateElement]);
-  const handleBorderWidthChange = useCallback37((width) => {
+  const handleBorderWidthChange = useCallback39((width) => {
     if (!parentIdx || !parentElement) return;
     const newBorder = { ...border, width };
     const formattedBorder = formatBorder(newBorder);
@@ -7588,7 +8076,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, border, updateElement]);
-  const handleBorderEnabledChange = useCallback37((enabled) => {
+  const handleBorderEnabledChange = useCallback39((enabled) => {
     if (!parentIdx || !parentElement) return;
     const newWidth = enabled ? border.width === 0 ? 1 : border.width : 0;
     const newBorder = { ...border, width: newWidth };
@@ -7600,7 +8088,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, border, updateElement]);
-  const handleBorderRadiusChange = useCallback37((value) => {
+  const handleBorderRadiusChange = useCallback39((value) => {
     if (!parentIdx || !parentElement) return;
     const formattedRadius = formatBorderRadius(value);
     updateElement(parentIdx, {
@@ -7610,11 +8098,11 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, updateElement]);
-  return /* @__PURE__ */ jsxs51(ToolbarContainer, { children: [
-    /* @__PURE__ */ jsx64(ToolbarContent, { children: /* @__PURE__ */ jsx64(BasicOption, {}) }),
-    /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs51(ToolbarContent, { children: [
-      /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs53(ToolbarContainer, { children: [
+    /* @__PURE__ */ jsx66(ToolbarContent, { children: /* @__PURE__ */ jsx66(BasicOption, {}) }),
+    /* @__PURE__ */ jsx66(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs53(ToolbarContent, { children: [
+      /* @__PURE__ */ jsx66(
         BackgroundColorBtn,
         {
           activeView,
@@ -7623,18 +8111,18 @@ var PropertyTripleItemToolbar = () => {
           currentBgColor
         }
       ),
-      /* @__PURE__ */ jsx64(ImageMenu, { type: "property" }),
-      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx66(ImageMenu, { type: "property" }),
+      /* @__PURE__ */ jsx66(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx66(
         FontFamilyDropdown,
         {
           currentFont: currentFontFamily,
           onFontChange: handleFontChange
         }
       ),
-      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs51(Tooltip, { children: [
-        /* @__PURE__ */ jsx64(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs51(
+      /* @__PURE__ */ jsx66(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxs53(Tooltip, { children: [
+        /* @__PURE__ */ jsx66(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs53(
           Button,
           {
             variant: "ghost",
@@ -7642,8 +8130,8 @@ var PropertyTripleItemToolbar = () => {
             size: "icon",
             onClick: handleOpenTextColorPicker,
             children: [
-              /* @__PURE__ */ jsx64(CaseUpperIcon7, {}),
-              /* @__PURE__ */ jsx64(
+              /* @__PURE__ */ jsx66(CaseUpperIcon7, {}),
+              /* @__PURE__ */ jsx66(
                 "span",
                 {
                   className: "w-[14px] h-[3px] rounded-full",
@@ -7653,30 +8141,30 @@ var PropertyTripleItemToolbar = () => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx64(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
+        /* @__PURE__ */ jsx66(TooltipContent, { side: "bottom", className: "z-51", children: "Text Color" })
       ] }),
-      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
-      border.width > 0 && /* @__PURE__ */ jsxs51(Tooltip, { children: [
-        /* @__PURE__ */ jsx64(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx66(ToolbarSeparator, {}),
+      border.width > 0 && /* @__PURE__ */ jsxs53(Tooltip, { children: [
+        /* @__PURE__ */ jsx66(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx66(
           Button,
           {
             variant: "ghost",
             className: `shadow-none transition-none cursor-pointer rounded-[12px] ${activeView === "color" && colorTarget === "propertyStrokeColor" ? "bg-muted" : ""}`,
             size: "icon",
             onClick: handleOpenStrokeColorPicker,
-            children: /* @__PURE__ */ jsx64(
+            children: /* @__PURE__ */ jsx66(
               "div",
               {
                 className: "w-5 h-5 rounded-full border justify-center items-center flex",
                 style: { backgroundColor: border.color },
-                children: /* @__PURE__ */ jsx64("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
+                children: /* @__PURE__ */ jsx66("div", { className: "w-[50%] h-[50%] bg-secondary rounded-full" })
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx64(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
+        /* @__PURE__ */ jsx66(TooltipContent, { side: "bottom", className: "z-51", children: "Stroke Color" })
       ] }),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx66(
         StrokeWeight,
         {
           width: border.width,
@@ -7686,7 +8174,7 @@ var PropertyTripleItemToolbar = () => {
           max: 4
         }
       ),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx66(
         BorderRadius,
         {
           value: borderRadiusValue,
@@ -7695,14 +8183,14 @@ var PropertyTripleItemToolbar = () => {
           max: 18
         }
       ),
-      /* @__PURE__ */ jsx64(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx64(PropertyTripleEditMenu, {})
+      /* @__PURE__ */ jsx66(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx66(PropertyTripleEditMenu, {})
     ] })
   ] });
 };
 
 // src/core/editor/components/email-template-v2/toolbar/toolbar.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function Toolbar() {
   const { focusIdx, template } = useEditorStore();
   const selectedElement = focusIdx ? getValueByIdx(template, focusIdx) : null;
@@ -7711,60 +8199,60 @@ function Toolbar() {
     return;
   }
   if (elementType === "text") {
-    return /* @__PURE__ */ jsx65(TextToolbar, {});
+    return /* @__PURE__ */ jsx67(TextToolbar, {});
   }
   if (elementType === "button") {
-    return /* @__PURE__ */ jsx65(ButtonToolbar, {});
+    return /* @__PURE__ */ jsx67(ButtonToolbar, {});
   }
   if (elementType === "section-column") {
-    return /* @__PURE__ */ jsx65(SectionColumnToolbar, {});
+    return /* @__PURE__ */ jsx67(SectionColumnToolbar, {});
   }
   if (elementType === "section") {
-    return /* @__PURE__ */ jsx65(SectionToolbar, {});
+    return /* @__PURE__ */ jsx67(SectionToolbar, {});
   }
   if (elementType === "section-property-km") {
-    return /* @__PURE__ */ jsx65(SectionToolbar, {});
+    return /* @__PURE__ */ jsx67(SectionToolbar, {});
   }
   if (elementType === "section-property-single-two") {
-    return /* @__PURE__ */ jsx65(SectionToolbar, {});
+    return /* @__PURE__ */ jsx67(SectionToolbar, {});
   }
   if (elementType === "section-property-triple") {
-    return /* @__PURE__ */ jsx65(SectionToolbar, {});
+    return /* @__PURE__ */ jsx67(SectionToolbar, {});
   }
   if (elementType === "page") {
-    return /* @__PURE__ */ jsx65(PageToolbar, {});
+    return /* @__PURE__ */ jsx67(PageToolbar, {});
   }
   if (elementType === "space") {
-    return /* @__PURE__ */ jsx65(SpacerToolbar, {});
+    return /* @__PURE__ */ jsx67(SpacerToolbar, {});
   }
   if (elementType === "social") {
-    return /* @__PURE__ */ jsx65(SocialToolbar, {});
+    return /* @__PURE__ */ jsx67(SocialToolbar, {});
   }
   if (elementType === "divider") {
-    return /* @__PURE__ */ jsx65(DividerToolbar, {});
+    return /* @__PURE__ */ jsx67(DividerToolbar, {});
   }
   if (elementType === "image") {
-    return /* @__PURE__ */ jsx65(ImageToolbar, {});
+    return /* @__PURE__ */ jsx67(ImageToolbar, {});
   }
   if (elementType === "social-item") {
-    return /* @__PURE__ */ jsx65(SocialItemToolbar, {});
+    return /* @__PURE__ */ jsx67(SocialItemToolbar, {});
   }
   if (elementType === "property-card") {
-    return /* @__PURE__ */ jsx65(PropertyToolbar, {});
+    return /* @__PURE__ */ jsx67(PropertyToolbar, {});
   }
   if (elementType === "property-card-single-two") {
-    return /* @__PURE__ */ jsx65(PropertyToolbar, {});
+    return /* @__PURE__ */ jsx67(PropertyToolbar, {});
   }
   if (elementType === "property-card-triple-item") {
-    return /* @__PURE__ */ jsx65(PropertyTripleItemToolbar, {});
+    return /* @__PURE__ */ jsx67(PropertyTripleItemToolbar, {});
   }
-  return /* @__PURE__ */ jsx65(PlainToolbar, {});
+  return /* @__PURE__ */ jsx67(PlainToolbar, {});
 }
 
 // src/components/ui/skeleton.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       "data-slot": "skeleton",
@@ -7775,14 +8263,14 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/core/editor/components/email-template-v2/template-page.tsx
-import { Suspense, useState as useState18, lazy } from "react";
+import { Suspense, useState as useState20, lazy } from "react";
 
 // src/core/editor/hooks/use-auto-save.ts
-import { useEffect as useEffect12, useRef as useRef4 } from "react";
+import { useEffect as useEffect14, useRef as useRef4 } from "react";
 var AUTO_SAVE_INTERVAL = 30 * 1e3;
 function useAutoSave() {
   const intervalRef = useRef4(null);
-  useEffect12(() => {
+  useEffect14(() => {
     intervalRef.current = setInterval(async () => {
       const { template, templateId, onSave, hasUnsavedChanges, markAsSaved, isSaving, setIsSaving } = useEditorStore.getState();
       if (isSaving || !templateId || !onSave || !hasUnsavedChanges()) {
@@ -7809,22 +8297,33 @@ function useAutoSave() {
 
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
-import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-F5E63TCH.mjs").then((module) => ({
+import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
+var Editor2 = lazy(() => import("./core-GBVVYXAB.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
   templateId,
   initialTemplate,
-  onSave
+  onSave,
+  onToast,
+  isPaidLevel = 0
 }) {
-  useState18(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave);
+  console.log("Template page rendered!");
+  if (isPaidLevel > MAX_PAID_LEVEL) {
+    console.warn("This paid level is invalid:", isPaidLevel);
+  } else {
+    console.log("This paid level is valid:", isPaidLevel);
+  }
+  useState20(() => {
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, isPaidLevel);
   });
   useAutoSave();
-  const [editorLoading, setEditorLoading] = useState18(false);
-  const [isPageHovered, setIsPageHovered] = useState18(false);
-  const { template, previewMode, focusIdx, setFocusIdx } = useEditorStore();
+  const [editorLoading, setEditorLoading] = useState20(false);
+  const [isPageHovered, setIsPageHovered] = useState20(false);
+  const template = useEditorStore((state) => state.template);
+  const previewMode = useEditorStore((state) => state.previewMode);
+  const focusIdx = useEditorStore((state) => state.focusIdx);
+  const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
   const canvasBackgroundColor = template?.content?.[0]?.attributes?.["background-color"] || "#ffffff";
   const handlePageClick = (e) => {
     if (!previewMode && e.target === e.currentTarget) {
@@ -7841,19 +8340,19 @@ function TemplatePage({
   const handlePageMouseLeave = () => {
     setIsPageHovered(false);
   };
-  return /* @__PURE__ */ jsx67(SidebarProvider, { children: /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsx69(SidebarProvider, { children: /* @__PURE__ */ jsxs54(
     "div",
     {
       className: "flex flex-col bg-background  overflow-hidden",
       children: [
-        /* @__PURE__ */ jsx67(TemplateHeader, { template }),
-        /* @__PURE__ */ jsxs52("div", { className: "flex flex-row h-full bg-background", children: [
-          /* @__PURE__ */ jsx67(TemplateSidebar, { editorLoading }),
-          /* @__PURE__ */ jsxs52("div", { className: "flex flex-col w-full overflow-hidden h-[calc(100vh-60px)] bg-background relative", children: [
-            /* @__PURE__ */ jsx67(Toolbar, {}),
-            /* @__PURE__ */ jsxs52("div", { className: "w-full h-[calc(100vh)] flex justify-center bg-accent overflow-scroll", children: [
-              editorLoading && /* @__PURE__ */ jsx67(Skeleton, { className: `min-h-[calc(70vh)] h-fit rounded-[12px] pt-8 pb-12 bg-white mt-24 mb-4 w-[600px] bg-muted` }),
-              /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx69(TemplateHeader, { template }),
+        /* @__PURE__ */ jsxs54("div", { className: "flex flex-row h-full bg-background", children: [
+          /* @__PURE__ */ jsx69(TemplateSidebar, { editorLoading }),
+          /* @__PURE__ */ jsxs54("div", { className: "flex flex-col w-full overflow-hidden h-[calc(100vh-60px)] bg-background relative", children: [
+            /* @__PURE__ */ jsx69(Toolbar, {}),
+            /* @__PURE__ */ jsxs54("div", { className: "w-full h-[calc(100vh)] flex justify-center bg-accent overflow-scroll", children: [
+              editorLoading && /* @__PURE__ */ jsx69(Skeleton, { className: `min-h-[calc(70vh)] h-fit rounded-[12px] pt-8 pb-12 bg-white mt-24 mb-4 w-[600px] bg-muted` }),
+              /* @__PURE__ */ jsx69(
                 "div",
                 {
                   className: cn(
@@ -7865,7 +8364,7 @@ function TemplatePage({
                   onClick: handlePageClick,
                   onMouseMove: handlePageMouseMove,
                   onMouseLeave: handlePageMouseLeave,
-                  children: /* @__PURE__ */ jsx67(Suspense, { children: /* @__PURE__ */ jsx67(
+                  children: /* @__PURE__ */ jsx69(Suspense, { children: /* @__PURE__ */ jsx69(
                     Editor2,
                     {
                       setEditorLoading,