@kgalexander/mcreate 0.0.16 → 0.0.17

package/dist/index.js

@@ -3512,7 +3512,7 @@ function getEditorStyles(isDragButtonHovered, textEditingIdx) {
   
     background-color: var(--background);
     border-radius: 4px;
-    padding: 4px;
+    padding: 0px;
     border: 1px solid var(--border);
     color: #000000;
   }
@@ -11660,12 +11660,13 @@ var init_text_link_menu = __esm({
       const [isLinkTypeOpen, setIsLinkTypeOpen] = (0, import_react9.useState)(false);
       const currentHref = editor.getAttributes("link").href || "";
       const hasLink = !!currentHref;
-      (0, import_react9.useEffect)(() => {
-        if (isOpen) {
+      const handleOpenChange = (0, import_react9.useCallback)((open) => {
+        setIsOpen(open);
+        if (open) {
           setLinkType(detectLinkType(currentHref));
           setInputValue(stripPrefix(currentHref));
         }
-      }, [isOpen, currentHref]);
+      }, [currentHref]);
       const handleInputChange = (e) => {
         setInputValue(e.target.value);
       };
@@ -11702,7 +11703,7 @@ var init_text_link_menu = __esm({
         editor.chain().focus().unsetLink().run();
         setInputValue("");
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PopoverTrigger, { asChild: true, children: hasLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             Button,
@@ -12608,7 +12609,7 @@ var init_tiptap_overlay = __esm({
         .tiptap-overlay .ProseMirror .merge-field-tag {
           background-color: var(--background);
           border-radius: 4px;
-          padding: 4px;
+          padding: 0px;
           border: 1px solid var(--border);
           color: #000000;
         }
@@ -12957,13 +12958,14 @@ var init_href_menu = __esm({
         setInputValue(value);
         setIsPresetOpen(false);
       }, []);
-      (0, import_react14.useEffect)(() => {
-        if (isOpen) {
+      const handleOpenChange = (0, import_react14.useCallback)((open) => {
+        setIsOpen(open);
+        if (open) {
           setLinkType(detectLinkType(href));
           setInputValue(stripPrefix(href));
           setIsPresetOpen(true);
         }
-      }, [isOpen, href]);
+      }, [href]);
       const handleInputChange = (e) => {
         setInputValue(e.target.value);
         setIsPresetOpen(true);
@@ -13008,7 +13010,7 @@ var init_href_menu = __esm({
         setHref(buildHref(inputValue));
         setIsOpen(false);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Button,
@@ -13481,12 +13483,13 @@ var init_social_item_menu = __esm({
         return (0, import_lodash4.get)(template, path);
       }, [focusIdx, template]);
       const content = element?.data?.value?.content || "";
-      (0, import_react18.useEffect)(() => {
-        if (isOpen) {
+      const handleOpenChange = (0, import_react18.useCallback)((open) => {
+        setIsOpen(open);
+        if (open) {
           setHrefInputValue(href);
           setContentInputValue(content);
         }
-      }, [isOpen, href, content]);
+      }, [href, content]);
       const handleCopy = (0, import_react18.useCallback)(async () => {
         await copyHref();
         setShowCopied(true);
@@ -13506,7 +13509,7 @@ var init_social_item_menu = __esm({
         }
         setIsOpen(false);
       }, [hrefInputValue, contentInputValue, setHref, focusIdx, element, updateElement]);
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenuTrigger, { asChild: true, children: hasHref ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Button,
@@ -13662,11 +13665,12 @@ var init_float6 = __esm({
       const parentSocial = focusIdx ? getParentByIdx(template, focusIdx) : null;
       const childrenCount = parentSocial?.children?.length || 0;
       const canDelete = childrenCount > 1;
-      (0, import_react20.useEffect)(() => {
-        if (dropdownOpen) {
+      const handleDropdownOpenChange = (0, import_react20.useCallback)((open) => {
+        setDropdownOpen(open);
+        if (open) {
           setAltInputValue(alt);
         }
-      }, [dropdownOpen, alt]);
+      }, [alt]);
       const handleSaveAlt = () => {
         setAlt(altInputValue);
         setDropdownOpen(false);
@@ -13692,7 +13696,7 @@ var init_float6 = __esm({
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { side: "bottom", children: canDelete ? "Delete" : "Cannot delete last item" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DropdownMenu, { open: dropdownOpen, onOpenChange: handleDropdownOpenChange, children: [
           /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react24.MoreHorizontalIcon, { className: "w-4 h-4" }) }) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { side: "bottom", children: "More" })
@@ -13807,11 +13811,12 @@ var init_float8 = __esm({
         }
         updateElement(focusIdx, { attributes: newAttributes });
       }, [focusIdx, element, isFluidOnMobile, updateElement]);
-      (0, import_react21.useEffect)(() => {
-        if (dropdownOpen) {
+      const handleDropdownOpenChange = (0, import_react21.useCallback)((open) => {
+        setDropdownOpen(open);
+        if (open) {
           setAltInputValue(alt);
         }
-      }, [dropdownOpen, alt]);
+      }, [alt]);
       const handleSaveAlt = () => {
         setAlt(altInputValue);
         setDropdownOpen(false);
@@ -13821,7 +13826,7 @@ var init_float8 = __esm({
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HrefMenu, {}),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DuplicateButton, {}),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DeleteButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenu, { open: dropdownOpen, onOpenChange: handleDropdownOpenChange, children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { variant: "ghost", size: "icon", className: floatButtonVariants, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react25.MoreHorizontalIcon, { className: "w-4 h-4" }) }) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { side: "bottom", children: "More" })
@@ -15694,6 +15699,7 @@ function Editor({ setEditorLoading }) {
   const lastSyncedTemplateRef = (0, import_react37.useRef)(null);
   const prevTextEditingIdxRef = (0, import_react37.useRef)(null);
   const lastRenderSyncNeededRef = (0, import_react37.useRef)(0);
+  const hasNotifiedLoadedRef = (0, import_react37.useRef)(false);
   const imageReplaceTargetRef = (0, import_react37.useRef)(null);
   const imagePreviewOriginalSrcRef = (0, import_react37.useRef)(null);
   (0, import_react37.useEffect)(() => {
@@ -15711,15 +15717,14 @@ function Editor({ setEditorLoading }) {
       }
       if (!(0, import_lodash6.isEqual)(template, renderData)) {
         setRenderData((0, import_lodash6.cloneDeep)(template));
+        if (!hasNotifiedLoadedRef.current && setEditorLoading) {
+          hasNotifiedLoadedRef.current = true;
+          setEditorLoading(false);
+        }
       }
       lastSyncedTemplateRef.current = template;
     }
-  }, [template, renderData, isEditing, textEditing, renderSyncNeeded]);
-  (0, import_react37.useEffect)(() => {
-    if (renderData && setEditorLoading) {
-      setEditorLoading(false);
-    }
-  }, [renderData, setEditorLoading]);
+  }, [template, renderData, isEditing, textEditing, renderSyncNeeded, setEditorLoading]);
   (0, import_react37.useEffect)(() => {
     if (!pendingTextEditRequest || !shadowRootRef.current) return;
     const { idx, cursorPosition } = pendingTextEditRequest;
@@ -19484,22 +19489,55 @@ var ColorPicker = ({
   );
   const [alpha2, setAlpha] = (0, import_react55.useState)(selectedColor.alpha() * 100 || defaultColor.alpha() * 100);
   const [mode, setMode] = (0, import_react55.useState)("hex");
+  const hueRef = (0, import_react55.useRef)(hue);
+  const saturationRef = (0, import_react55.useRef)(saturation);
+  const lightnessRef = (0, import_react55.useRef)(lightness);
+  const alphaRef = (0, import_react55.useRef)(alpha2);
+  hueRef.current = hue;
+  saturationRef.current = saturation;
+  lightnessRef.current = lightness;
+  alphaRef.current = alpha2;
   (0, import_react55.useEffect)(() => {
     if (value) {
-      const color = import_color.default.rgb(value).rgb().object();
-      setHue(color.r);
-      setSaturation(color.g);
-      setLightness(color.b);
-      setAlpha(color.a);
+      const color = (0, import_color.default)(value);
+      const hsl = color.hsl().object();
+      setHue(hsl.h);
+      setSaturation(hsl.s);
+      setLightness(hsl.l);
+      setAlpha(color.alpha() * 100);
+      hueRef.current = hsl.h;
+      saturationRef.current = hsl.s;
+      lightnessRef.current = hsl.l;
+      alphaRef.current = color.alpha() * 100;
     }
   }, [value]);
-  (0, import_react55.useEffect)(() => {
+  const updateColor = (0, import_react55.useCallback)((updates) => {
+    const newH = updates.h ?? hueRef.current;
+    const newS = updates.s ?? saturationRef.current;
+    const newL = updates.l ?? lightnessRef.current;
+    const newA = updates.a ?? alphaRef.current;
+    if (updates.h !== void 0) {
+      setHue(updates.h);
+      hueRef.current = updates.h;
+    }
+    if (updates.s !== void 0) {
+      setSaturation(updates.s);
+      saturationRef.current = updates.s;
+    }
+    if (updates.l !== void 0) {
+      setLightness(updates.l);
+      lightnessRef.current = updates.l;
+    }
+    if (updates.a !== void 0) {
+      setAlpha(updates.a);
+      alphaRef.current = updates.a;
+    }
     if (onChange) {
-      const color = import_color.default.hsl(hue, saturation, lightness).alpha(alpha2 / 100);
+      const color = import_color.default.hsl(newH, newS, newL).alpha(newA / 100);
       const rgba = color.rgb().array();
-      onChange([rgba[0], rgba[1], rgba[2], alpha2 / 100]);
+      onChange([rgba[0], rgba[1], rgba[2], newA / 100]);
     }
-  }, [hue, saturation, lightness, alpha2, onChange]);
+  }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     ColorPickerContext.Provider,
     {
@@ -19509,10 +19547,7 @@ var ColorPicker = ({
         lightness,
         alpha: alpha2,
         mode,
-        setHue,
-        setSaturation,
-        setLightness,
-        setAlpha,
+        updateColor,
         setMode
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cn("flex size-full flex-col gap-4", className), ...props })
@@ -19524,7 +19559,7 @@ var ColorPickerSelection = (0, import_react55.memo)(({ className, ...props }) =>
   const [isDragging, setIsDragging] = (0, import_react55.useState)(false);
   const [positionX, setPositionX] = (0, import_react55.useState)(0);
   const [positionY, setPositionY] = (0, import_react55.useState)(0);
-  const { hue, setSaturation, setLightness } = useColorPicker();
+  const { hue, updateColor } = useColorPicker();
   const backgroundGradient = (0, import_react55.useMemo)(() => {
     return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
             linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
@@ -19540,12 +19575,12 @@ var ColorPickerSelection = (0, import_react55.memo)(({ className, ...props }) =>
       const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
       setPositionX(x);
       setPositionY(y);
-      setSaturation(x * 100);
+      const newSaturation = x * 100;
       const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
-      const lightness = topLightness * (1 - y);
-      setLightness(lightness);
+      const newLightness = topLightness * (1 - y);
+      updateColor({ s: newSaturation, l: newLightness });
     },
-    [isDragging, setSaturation, setLightness]
+    [isDragging, updateColor]
   );
   (0, import_react55.useEffect)(() => {
     const handlePointerUp = () => setIsDragging(false);
@@ -19588,13 +19623,13 @@ var ColorPickerSelection = (0, import_react55.memo)(({ className, ...props }) =>
 });
 ColorPickerSelection.displayName = "ColorPickerSelection";
 var ColorPickerHue = ({ className, ...props }) => {
-  const { hue, setHue } = useColorPicker();
+  const { hue, updateColor } = useColorPicker();
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     import_radix_ui.Slider.Root,
     {
       className: cn("relative flex h-4 w-full touch-none", className),
       max: 360,
-      onValueChange: ([hue2]) => setHue(hue2),
+      onValueChange: ([h]) => updateColor({ h }),
       step: 1,
       value: [hue],
       ...props,
@@ -19606,17 +19641,14 @@ var ColorPickerHue = ({ className, ...props }) => {
   );
 };
 var ColorPickerEyeDropper = ({ className, ...props }) => {
-  const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+  const { updateColor } = useColorPicker();
   const handleEyeDropper = async () => {
     try {
       const eyeDropper = new EyeDropper();
       const result = await eyeDropper.open();
       const color = (0, import_color.default)(result.sRGBHex);
       const [h, s, l] = color.hsl().array();
-      setHue(h);
-      setSaturation(s);
-      setLightness(l);
-      setAlpha(100);
+      updateColor({ h, s, l, a: 100 });
     } catch (error) {
       console.error("EyeDropper failed:", error);
     }
@@ -20791,11 +20823,13 @@ function TemplateSidebar({ editorLoading }) {
       attributes: { ...element.attributes, [attributeName]: imageSrc }
     });
   }, [imageTarget]);
-  (0, import_react59.useEffect)(() => {
+  const prevActiveViewRef = (0, import_react59.useRef)(activeView);
+  if (activeView !== prevActiveViewRef.current) {
+    prevActiveViewRef.current = activeView;
     if (PICKER_VIEWS2.has(activeView)) {
       setOpenSidebar(true);
     }
-  }, [activeView]);
+  }
   const handleCloseSidebar = () => setOpenSidebar(!openSidebar);
   const handleViewClick = (view) => {
     setActiveView(view);
@@ -21073,7 +21107,7 @@ var PlainToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/text/toolbar.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 init_dropdown_menu();
 init_popover();
 init_button();
@@ -21153,15 +21187,81 @@ function Slider2({
 
 // src/core/editor/components/paragraph-text-settings.tsx
 init_input();
-var import_react62 = require("react");
+var import_react63 = require("react");
 init_editor();
 init_configuration();
+
+// src/core/editor/hooks/use-editable-value.ts
+var import_react62 = require("react");
+function useEditableValue(options) {
+  const { externalValue, onChange, toLocal, toExternal } = options;
+  const convert = toLocal ?? String;
+  const [localValue, setLocalValue] = (0, import_react62.useState)(convert(externalValue));
+  const [isFocused, setIsFocused] = (0, import_react62.useState)(false);
+  const displayValue = isFocused ? localValue : convert(externalValue);
+  const handleFocus = (0, import_react62.useCallback)(() => {
+    setLocalValue(convert(externalValue));
+    setIsFocused(true);
+  }, [externalValue, convert]);
+  const handleBlur = (0, import_react62.useCallback)(() => {
+    setIsFocused(false);
+    if (toExternal) {
+      const parsed = toExternal(localValue);
+      if (parsed !== null) {
+        onChange(parsed);
+      }
+    } else {
+      onChange(localValue);
+    }
+  }, [localValue, toExternal, onChange]);
+  const handleKeyDown = (0, import_react62.useCallback)((e) => {
+    if (e.key === "Enter") {
+      e.currentTarget.blur();
+    }
+  }, []);
+  return {
+    displayValue,
+    setLocalValue,
+    handleFocus,
+    handleBlur,
+    handleKeyDown,
+    isFocused
+  };
+}
+function useEditableNumber(options) {
+  const { value, onChange, min = -Infinity, max = Infinity } = options;
+  return useEditableValue({
+    externalValue: value,
+    onChange,
+    toLocal: (n) => n.toString(),
+    toExternal: (s) => {
+      const parsed = parseInt(s, 10);
+      if (isNaN(parsed)) return null;
+      return Math.max(min, Math.min(max, parsed));
+    }
+  });
+}
+function useEditableFloat(options) {
+  const { value, onChange, min = -Infinity, max = Infinity } = options;
+  return useEditableValue({
+    externalValue: value,
+    onChange,
+    toLocal: (n) => n.toString(),
+    toExternal: (s) => {
+      const parsed = parseFloat(s);
+      if (isNaN(parsed) || s === "") return null;
+      return Math.max(min, Math.min(max, parsed));
+    }
+  });
+}
+
+// src/core/editor/components/paragraph-text-settings.tsx
 var import_jsx_runtime91 = require("react/jsx-runtime");
-var ParagraphTextSettings = (0, import_react62.memo)(function ParagraphTextSettings2() {
-  const [isOpen, setIsOpen] = (0, import_react62.useState)(false);
+var ParagraphTextSettings = (0, import_react63.memo)(function ParagraphTextSettings2() {
+  const [isOpen, setIsOpen] = (0, import_react63.useState)(false);
   const tiptapEditor = useEditorStore((s) => s.tiptapEditor);
-  const [updateCounter, forceUpdate] = (0, import_react62.useState)(0);
-  (0, import_react62.useEffect)(() => {
+  const [updateCounter, forceUpdate] = (0, import_react63.useState)(0);
+  (0, import_react63.useEffect)(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -21169,7 +21269,7 @@ var ParagraphTextSettings = (0, import_react62.memo)(function ParagraphTextSetti
       tiptapEditor.off("selectionUpdate", handler);
     };
   }, [tiptapEditor]);
-  const currentLetterSpacing = (0, import_react62.useMemo)(() => {
+  const currentLetterSpacing = (0, import_react63.useMemo)(() => {
     if (!tiptapEditor) return DEFAULT_LETTER_SPACING;
     const textStyleAttrs = tiptapEditor.getAttributes("textStyle");
     if (textStyleAttrs.letterSpacing) {
@@ -21178,7 +21278,7 @@ var ParagraphTextSettings = (0, import_react62.memo)(function ParagraphTextSetti
     }
     return DEFAULT_LETTER_SPACING;
   }, [tiptapEditor, updateCounter]);
-  const currentLineHeight = (0, import_react62.useMemo)(() => {
+  const currentLineHeight = (0, import_react63.useMemo)(() => {
     if (!tiptapEditor) return DEFAULT_LINE_HEIGHT;
     const textStyleAttrs = tiptapEditor.getAttributes("textStyle");
     if (textStyleAttrs.lineHeight) {
@@ -21187,92 +21287,34 @@ var ParagraphTextSettings = (0, import_react62.memo)(function ParagraphTextSetti
     }
     return DEFAULT_LINE_HEIGHT;
   }, [tiptapEditor, updateCounter]);
-  const [letterSpacingInputValue, setLetterSpacingInputValue] = (0, import_react62.useState)(
-    String(currentLetterSpacing)
-  );
-  const [isLetterSpacingInputFocused, setIsLetterSpacingInputFocused] = (0, import_react62.useState)(false);
-  const [lineHeightInputValue, setLineHeightInputValue] = (0, import_react62.useState)(
-    String(currentLineHeight)
-  );
-  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = (0, import_react62.useState)(false);
-  (0, import_react62.useEffect)(() => {
-    if (!isLetterSpacingInputFocused) {
-      setLetterSpacingInputValue(String(currentLetterSpacing));
-    }
-  }, [currentLetterSpacing, isLetterSpacingInputFocused]);
-  (0, import_react62.useEffect)(() => {
-    if (!isLineHeightInputFocused) {
-      setLineHeightInputValue(String(currentLineHeight));
-    }
-  }, [currentLineHeight, isLineHeightInputFocused]);
-  const handleLetterSpacingSliderChange = (0, import_react62.useCallback)((values) => {
+  const commitLetterSpacing = (0, import_react63.useCallback)((value) => {
     if (!tiptapEditor) return;
-    const value = values[0];
-    setLetterSpacingInputValue(String(value));
     tiptapEditor.chain().setLetterSpacing(`${value}px`).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleLetterSpacingInputChange = (0, import_react62.useCallback)((e) => {
-    setLetterSpacingInputValue(e.target.value);
-  }, []);
-  const applyLetterSpacing = (0, import_react62.useCallback)(() => {
-    if (!tiptapEditor) return;
-    const parsed = parseFloat(letterSpacingInputValue);
-    if (isNaN(parsed) || letterSpacingInputValue === "") {
-      setLetterSpacingInputValue(String(currentLetterSpacing));
-      tiptapEditor.chain().focus().run();
-      return;
-    }
-    const clampedValue = Math.max(MIN_LETTER_SPACING, Math.min(parsed, MAX_LETTER_SPACING));
-    setLetterSpacingInputValue(String(clampedValue));
-    tiptapEditor.chain().focus().setLetterSpacing(`${clampedValue}px`).run();
-    forceUpdate((n) => n + 1);
-  }, [tiptapEditor, letterSpacingInputValue, currentLetterSpacing]);
-  const handleLetterSpacingInputBlur = (0, import_react62.useCallback)(() => {
-    setIsLetterSpacingInputFocused(false);
-    applyLetterSpacing();
-  }, [applyLetterSpacing]);
-  const handleLetterSpacingInputKeyDown = (0, import_react62.useCallback)((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLetterSpacing();
-      e.target.blur();
-    }
-  }, [applyLetterSpacing]);
-  const handleLineHeightSliderChange = (0, import_react62.useCallback)((values) => {
+  const commitLineHeight = (0, import_react63.useCallback)((value) => {
     if (!tiptapEditor) return;
-    const value = values[0];
-    setLineHeightInputValue(String(value));
     tiptapEditor.chain().setLineHeight(String(value)).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleLineHeightInputChange = (0, import_react62.useCallback)((e) => {
-    setLineHeightInputValue(e.target.value);
-  }, []);
-  const applyLineHeight = (0, import_react62.useCallback)(() => {
-    if (!tiptapEditor) return;
-    const parsed = parseFloat(lineHeightInputValue);
-    if (isNaN(parsed) || lineHeightInputValue === "") {
-      setLineHeightInputValue(String(currentLineHeight));
-      tiptapEditor.chain().focus().run();
-      return;
-    }
-    const clampedValue = Math.max(MIN_LINE_HEIGHT, Math.min(parsed, MAX_LINE_HEIGHT));
-    setLineHeightInputValue(String(clampedValue));
-    tiptapEditor.chain().focus().setLineHeight(String(clampedValue)).run();
-    forceUpdate((n) => n + 1);
-  }, [tiptapEditor, lineHeightInputValue, currentLineHeight]);
-  const handleLineHeightInputBlur = (0, import_react62.useCallback)(() => {
-    setIsLineHeightInputFocused(false);
-    applyLineHeight();
-  }, [applyLineHeight]);
-  const handleLineHeightInputKeyDown = (0, import_react62.useCallback)((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLineHeight();
-      e.target.blur();
-    }
-  }, [applyLineHeight]);
+  const letterSpacingInput = useEditableFloat({
+    value: currentLetterSpacing,
+    onChange: commitLetterSpacing,
+    min: MIN_LETTER_SPACING,
+    max: MAX_LETTER_SPACING
+  });
+  const lineHeightInput = useEditableFloat({
+    value: currentLineHeight,
+    onChange: commitLineHeight,
+    min: MIN_LINE_HEIGHT,
+    max: MAX_LINE_HEIGHT
+  });
+  const handleLetterSpacingSliderChange = (0, import_react63.useCallback)((values) => {
+    commitLetterSpacing(values[0]);
+  }, [commitLetterSpacing]);
+  const handleLineHeightSliderChange = (0, import_react63.useCallback)((values) => {
+    commitLineHeight(values[0]);
+  }, [commitLineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
@@ -21309,11 +21351,11 @@ var ParagraphTextSettings = (0, import_react62.memo)(function ParagraphTextSetti
                   Input,
                   {
                     type: "number",
-                    value: letterSpacingInputValue,
-                    onChange: handleLetterSpacingInputChange,
-                    onFocus: () => setIsLetterSpacingInputFocused(true),
-                    onBlur: handleLetterSpacingInputBlur,
-                    onKeyDown: handleLetterSpacingInputKeyDown,
+                    value: letterSpacingInput.displayValue,
+                    onChange: (e) => letterSpacingInput.setLocalValue(e.target.value),
+                    onFocus: letterSpacingInput.handleFocus,
+                    onBlur: letterSpacingInput.handleBlur,
+                    onKeyDown: letterSpacingInput.handleKeyDown,
                     className: "w-25 shadow-none rounded-[12px]",
                     min: MIN_LETTER_SPACING,
                     max: MAX_LETTER_SPACING,
@@ -21340,11 +21382,11 @@ var ParagraphTextSettings = (0, import_react62.memo)(function ParagraphTextSetti
                   Input,
                   {
                     type: "number",
-                    value: lineHeightInputValue,
-                    onChange: handleLineHeightInputChange,
-                    onFocus: () => setIsLineHeightInputFocused(true),
-                    onBlur: handleLineHeightInputBlur,
-                    onKeyDown: handleLineHeightInputKeyDown,
+                    value: lineHeightInput.displayValue,
+                    onChange: (e) => lineHeightInput.setLocalValue(e.target.value),
+                    onFocus: lineHeightInput.handleFocus,
+                    onBlur: lineHeightInput.handleBlur,
+                    onKeyDown: lineHeightInput.handleKeyDown,
                     className: "w-25 shadow-none rounded-[12px]",
                     min: MIN_LINE_HEIGHT,
                     max: MAX_LINE_HEIGHT,
@@ -21412,7 +21454,7 @@ var FontFamilyDropdown = ({
 };
 
 // src/core/editor/components/font-size-control.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 init_button();
 
 // src/components/ui/button-group.tsx
@@ -21556,7 +21598,7 @@ var import_lucide_react56 = require("lucide-react");
 init_configuration();
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var PRESET_FONT_SIZES = [6, 8, 10, 12, 14, 16, 18, 21, 24, 28, 32, 36, 48, 64, 72];
-var FontSizeControl = (0, import_react63.memo)(function FontSizeControl2({
+var FontSizeControl = (0, import_react64.memo)(function FontSizeControl2({
   value,
   onChange,
   disabled = false,
@@ -21564,59 +21606,37 @@ var FontSizeControl = (0, import_react63.memo)(function FontSizeControl2({
   max = MAX_FONT_SIZE,
   step = FONT_SIZE_STEP
 }) {
-  const [inputValue, setInputValue] = (0, import_react63.useState)(String(value));
-  const [isFocused, setIsFocused] = (0, import_react63.useState)(false);
-  const [isPopoverOpen, setIsPopoverOpen] = (0, import_react63.useState)(false);
-  (0, import_react63.useEffect)(() => {
-    if (!isFocused) {
-      setInputValue(String(value));
-    }
-  }, [value, isFocused]);
-  const applySize = (0, import_react63.useCallback)(() => {
-    const parsed = parseInt(inputValue, 10);
-    if (isNaN(parsed) || inputValue === "") {
-      setInputValue(String(value));
-      return;
-    }
-    const clampedSize = Math.max(min, Math.min(parsed, max));
-    setInputValue(String(clampedSize));
-    onChange(clampedSize);
-  }, [inputValue, value, min, max, onChange]);
-  const handleIncrease = (0, import_react63.useCallback)(() => {
+  const [isPopoverOpen, setIsPopoverOpen] = (0, import_react64.useState)(false);
+  const input = useEditableNumber({ value, onChange, min, max });
+  const handleIncrease = (0, import_react64.useCallback)(() => {
     const newSize = Math.min(value + step, max);
     onChange(newSize);
   }, [value, step, max, onChange]);
-  const handleDecrease = (0, import_react63.useCallback)(() => {
+  const handleDecrease = (0, import_react64.useCallback)(() => {
     const newSize = Math.max(value - step, min);
     onChange(newSize);
   }, [value, step, min, onChange]);
-  const handleInputChange = (0, import_react63.useCallback)((e) => {
-    setInputValue(e.target.value);
-  }, []);
-  const handleFocus = (0, import_react63.useCallback)(() => {
-    setIsFocused(true);
+  const handleFocus = (0, import_react64.useCallback)(() => {
+    input.handleFocus();
     setIsPopoverOpen(true);
-  }, []);
-  const handleBlur = (0, import_react63.useCallback)(() => {
-    setIsFocused(false);
-    applySize();
+  }, [input.handleFocus]);
+  const handleBlur = (0, import_react64.useCallback)(() => {
+    input.handleBlur();
     setTimeout(() => setIsPopoverOpen(false), 150);
-  }, [applySize]);
-  const handleKeyDown = (0, import_react63.useCallback)((e) => {
+  }, [input.handleBlur]);
+  const handleKeyDown = (0, import_react64.useCallback)((e) => {
     if (e.key === "Enter") {
       e.preventDefault();
-      applySize();
       setIsPopoverOpen(false);
-      e.target.blur();
+      e.currentTarget.blur();
     }
     if (e.key === "Escape") {
       setIsPopoverOpen(false);
-      e.target.blur();
+      e.currentTarget.blur();
     }
-  }, [applySize]);
-  const handlePresetSelect = (0, import_react63.useCallback)((size) => {
+  }, []);
+  const handlePresetSelect = (0, import_react64.useCallback)((size) => {
     onChange(size);
-    setInputValue(String(size));
     setIsPopoverOpen(false);
   }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "grid w-full max-w-sm gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(ButtonGroup, { children: [
@@ -21643,8 +21663,8 @@ var FontSizeControl = (0, import_react63.memo)(function FontSizeControl2({
             type: "number",
             className: "text-center w-12 border-0 shadow-none px-0",
             placeholder: "--",
-            value: inputValue,
-            onChange: handleInputChange,
+            value: input.displayValue,
+            onChange: (e) => input.setLocalValue(e.target.value),
             onFocus: handleFocus,
             onBlur: handleBlur,
             onKeyDown: handleKeyDown,
@@ -21699,12 +21719,12 @@ var FontSizeControl = (0, import_react63.memo)(function FontSizeControl2({
 });
 
 // src/core/editor/components/element-gear/column-styles.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 init_button();
 init_tooltip();
 
 // src/core/editor/components/border-radius.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 init_popover();
 init_button();
 init_input();
@@ -21718,32 +21738,10 @@ var BorderRadius = ({
   tooltipText = "Border Radius",
   max = 100
 }) => {
-  const [inputValue, setInputValue] = (0, import_react64.useState)(value.toString());
-  const [isOpen, setIsOpen] = (0, import_react64.useState)(false);
-  (0, import_react64.useEffect)(() => {
-    setInputValue(value.toString());
-  }, [value]);
+  const [isOpen, setIsOpen] = (0, import_react65.useState)(false);
+  const input = useEditableNumber({ value, onChange, min: 0, max });
   const handleSliderChange = (values) => {
-    const newValue = values[0];
-    onChange(newValue);
-  };
-  const handleInputChange = (e) => {
-    setInputValue(e.target.value);
-  };
-  const handleInputBlur = () => {
-    const parsed = parseInt(inputValue, 10);
-    if (isNaN(parsed)) {
-      setInputValue(value.toString());
-    } else {
-      const clamped = Math.max(0, Math.min(max, parsed));
-      onChange(clamped);
-      setInputValue(clamped.toString());
-    }
-  };
-  const handleInputKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.currentTarget.blur();
-    }
+    onChange(values[0]);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
@@ -21773,10 +21771,11 @@ var BorderRadius = ({
             Input,
             {
               type: "number",
-              value: inputValue,
-              onChange: handleInputChange,
-              onBlur: handleInputBlur,
-              onKeyDown: handleInputKeyDown,
+              value: input.displayValue,
+              onChange: (e) => input.setLocalValue(e.target.value),
+              onFocus: input.handleFocus,
+              onBlur: input.handleBlur,
+              onKeyDown: input.handleKeyDown,
               className: "w-25 shadow-none rounded-[12px]",
               min: 0,
               max
@@ -21794,7 +21793,7 @@ init_button();
 init_tooltip();
 init_popover();
 var import_lucide_react58 = require("lucide-react");
-var import_react65 = require("react");
+var import_react66 = require("react");
 init_label();
 init_input();
 var import_jsx_runtime97 = require("react/jsx-runtime");
@@ -21806,32 +21805,10 @@ var StrokeWeight = ({
   tooltipText = "Stroke Weight",
   max = 50
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react65.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react65.useState)(width.toString());
-  (0, import_react65.useEffect)(() => {
-    setInputValue(width.toString());
-  }, [width]);
+  const [isOpen, setIsOpen] = (0, import_react66.useState)(false);
+  const input = useEditableNumber({ value: width, onChange: onWidthChange, min: 1, max });
   const handleSliderChange = (values) => {
-    const newWidth = values[0];
-    onWidthChange(newWidth);
-  };
-  const handleInputChange = (e) => {
-    setInputValue(e.target.value);
-  };
-  const handleInputBlur = () => {
-    const parsed = parseInt(inputValue, 10);
-    if (isNaN(parsed)) {
-      setInputValue(width.toString());
-    } else {
-      const clamped = Math.max(1, Math.min(max, parsed));
-      onWidthChange(clamped);
-      setInputValue(clamped.toString());
-    }
-  };
-  const handleInputKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.currentTarget.blur();
-    }
+    onWidthChange(values[0]);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
@@ -21882,10 +21859,11 @@ var StrokeWeight = ({
               Input,
               {
                 type: "number",
-                value: inputValue,
-                onChange: handleInputChange,
-                onBlur: handleInputBlur,
-                onKeyDown: handleInputKeyDown,
+                value: input.displayValue,
+                onChange: (e) => input.setLocalValue(e.target.value),
+                onFocus: input.handleFocus,
+                onBlur: input.handleBlur,
+                onKeyDown: input.handleKeyDown,
                 className: "w-25 shadow-none rounded-[12px]",
                 min: 1,
                 max
@@ -21937,11 +21915,11 @@ function CollapsibleContent2({
 var import_lucide_react59 = require("lucide-react");
 init_tooltip();
 init_popover();
-var import_react67 = require("react");
+var import_react68 = require("react");
 init_input();
 
 // src/core/editor/hooks/use-padding.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 init_editor();
 var import_lodash9 = require("lodash");
 
@@ -21996,7 +21974,7 @@ var usePadding = (options = {}) => {
   const { focusIdx, updateElement, template } = useEditorStore();
   const attributeName = options.attributeName || "padding";
   const effectiveIdx = options.targetIdx ?? focusIdx;
-  const { element, parsedPadding } = (0, import_react66.useMemo)(() => {
+  const { element, parsedPadding } = (0, import_react67.useMemo)(() => {
     if (!effectiveIdx || !template) {
       return {
         element: null,
@@ -22008,10 +21986,10 @@ var usePadding = (options = {}) => {
     const rawValue = el?.attributes?.[attributeName];
     return { element: el, parsedPadding: parsePadding(rawValue) };
   }, [effectiveIdx, template, attributeName]);
-  const uniformValue = (0, import_react66.useMemo)(() => {
+  const uniformValue = (0, import_react67.useMemo)(() => {
     return getUniformValue(parsedPadding);
   }, [parsedPadding]);
-  const updatePadding = (0, import_react66.useCallback)((updates) => {
+  const updatePadding = (0, import_react67.useCallback)((updates) => {
     if (!effectiveIdx || !template || !element) return;
     const newPadding = {
       ...parsedPadding,
@@ -22024,19 +22002,19 @@ var usePadding = (options = {}) => {
       }
     });
   }, [effectiveIdx, template, element, parsedPadding, updateElement, attributeName]);
-  const setTop = (0, import_react66.useCallback)((value) => {
+  const setTop = (0, import_react67.useCallback)((value) => {
     updatePadding({ top: value });
   }, [updatePadding]);
-  const setRight = (0, import_react66.useCallback)((value) => {
+  const setRight = (0, import_react67.useCallback)((value) => {
     updatePadding({ right: value });
   }, [updatePadding]);
-  const setBottom = (0, import_react66.useCallback)((value) => {
+  const setBottom = (0, import_react67.useCallback)((value) => {
     updatePadding({ bottom: value });
   }, [updatePadding]);
-  const setLeft = (0, import_react66.useCallback)((value) => {
+  const setLeft = (0, import_react67.useCallback)((value) => {
     updatePadding({ left: value });
   }, [updatePadding]);
-  const setUniform = (0, import_react66.useCallback)((value) => {
+  const setUniform = (0, import_react67.useCallback)((value) => {
     updatePadding({ top: value, right: value, bottom: value, left: value });
   }, [updatePadding]);
   return {
@@ -22066,19 +22044,19 @@ var BetterPadding = ({
   targetIdx,
   tooltipText = "Padding"
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react67.useState)(false);
-  const [openSection, setOpenSection] = (0, import_react67.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react68.useState)(false);
+  const [openSection, setOpenSection] = (0, import_react68.useState)(null);
   const padding = usePadding({ targetIdx });
   const innerPadding = usePadding({ attributeName: "inner-padding", targetIdx });
   const iconPadding = usePadding({ attributeName: "icon-padding", targetIdx });
   const textPadding = usePadding({ attributeName: "text-padding", targetIdx });
-  const handleToggle = (0, import_react67.useCallback)((section) => {
+  const handleToggle = (0, import_react68.useCallback)((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleToggleNormal = (0, import_react67.useCallback)(() => handleToggle("normal"), [handleToggle]);
-  const handleToggleInner = (0, import_react67.useCallback)(() => handleToggle("inner"), [handleToggle]);
-  const handleToggleIcon = (0, import_react67.useCallback)(() => handleToggle("icon"), [handleToggle]);
-  const handleToggleText = (0, import_react67.useCallback)(() => handleToggle("text"), [handleToggle]);
+  const handleToggleNormal = (0, import_react68.useCallback)(() => handleToggle("normal"), [handleToggle]);
+  const handleToggleInner = (0, import_react68.useCallback)(() => handleToggle("inner"), [handleToggle]);
+  const handleToggleIcon = (0, import_react68.useCallback)(() => handleToggle("icon"), [handleToggle]);
+  const handleToggleText = (0, import_react68.useCallback)(() => handleToggle("text"), [handleToggle]);
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
@@ -22133,105 +22111,14 @@ var BetterPadding = ({
   ] });
 };
 var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
-  const [sliderValue, setSliderValue] = (0, import_react67.useState)(data.uniformValue ?? data.top);
-  const [sliderInputValue, setSliderInputValue] = (0, import_react67.useState)((data.uniformValue ?? data.top).toString());
-  const [topInput, setTopInput] = (0, import_react67.useState)(data.top.toString());
-  const [rightInput, setRightInput] = (0, import_react67.useState)(data.right.toString());
-  const [bottomInput, setBottomInput] = (0, import_react67.useState)(data.bottom.toString());
-  const [leftInput, setLeftInput] = (0, import_react67.useState)(data.left.toString());
-  (0, import_react67.useEffect)(() => {
-    setSliderValue(data.uniformValue ?? data.top);
-    setSliderInputValue((data.uniformValue ?? data.top).toString());
-  }, [data.uniformValue, data.top]);
-  (0, import_react67.useEffect)(() => {
-    setTopInput(data.top.toString());
-  }, [data.top]);
-  (0, import_react67.useEffect)(() => {
-    setRightInput(data.right.toString());
-  }, [data.right]);
-  (0, import_react67.useEffect)(() => {
-    setBottomInput(data.bottom.toString());
-  }, [data.bottom]);
-  (0, import_react67.useEffect)(() => {
-    setLeftInput(data.left.toString());
-  }, [data.left]);
-  const handleKeyDown = (0, import_react67.useCallback)((e) => {
-    if (e.key === "Enter") {
-      e.currentTarget.blur();
-    }
-  }, []);
-  const handleSliderChange = (0, import_react67.useCallback)((values) => {
-    const newValue = values[0];
-    setSliderValue(newValue);
-    setSliderInputValue(newValue.toString());
-    data.setUniform(newValue);
+  const sliderInput = useEditableNumber({ value: data.uniformValue ?? data.top, onChange: data.setUniform, min: 0, max: PADDING_MAX });
+  const topInput = useEditableNumber({ value: data.top, onChange: data.setTop, min: 0, max: PADDING_MAX });
+  const rightInput = useEditableNumber({ value: data.right, onChange: data.setRight, min: 0, max: PADDING_MAX });
+  const bottomInput = useEditableNumber({ value: data.bottom, onChange: data.setBottom, min: 0, max: PADDING_MAX });
+  const leftInput = useEditableNumber({ value: data.left, onChange: data.setLeft, min: 0, max: PADDING_MAX });
+  const handleSliderChange = (0, import_react68.useCallback)((values) => {
+    data.setUniform(values[0]);
   }, [data]);
-  const handleSliderInputChange = (0, import_react67.useCallback)((e) => {
-    setSliderInputValue(e.target.value);
-  }, []);
-  const handleSliderInputBlur = (0, import_react67.useCallback)(() => {
-    const parsed = parseInt(sliderInputValue, 10);
-    if (isNaN(parsed) || sliderInputValue === "") {
-      setSliderInputValue(sliderValue.toString());
-    } else {
-      const clamped = Math.max(0, Math.min(PADDING_MAX, parsed));
-      setSliderValue(clamped);
-      setSliderInputValue(clamped.toString());
-      data.setUniform(clamped);
-    }
-  }, [sliderInputValue, sliderValue, data]);
-  const handleTopChange = (0, import_react67.useCallback)((e) => {
-    setTopInput(e.target.value);
-  }, []);
-  const handleTopBlur = (0, import_react67.useCallback)(() => {
-    const parsed = parseInt(topInput, 10);
-    if (isNaN(parsed)) {
-      setTopInput(data.top.toString());
-    } else {
-      const clamped = Math.max(0, Math.min(PADDING_MAX, parsed));
-      data.setTop(clamped);
-      setTopInput(clamped.toString());
-    }
-  }, [topInput, data]);
-  const handleRightChange = (0, import_react67.useCallback)((e) => {
-    setRightInput(e.target.value);
-  }, []);
-  const handleRightBlur = (0, import_react67.useCallback)(() => {
-    const parsed = parseInt(rightInput, 10);
-    if (isNaN(parsed)) {
-      setRightInput(data.right.toString());
-    } else {
-      const clamped = Math.max(0, Math.min(PADDING_MAX, parsed));
-      data.setRight(clamped);
-      setRightInput(clamped.toString());
-    }
-  }, [rightInput, data]);
-  const handleBottomChange = (0, import_react67.useCallback)((e) => {
-    setBottomInput(e.target.value);
-  }, []);
-  const handleBottomBlur = (0, import_react67.useCallback)(() => {
-    const parsed = parseInt(bottomInput, 10);
-    if (isNaN(parsed)) {
-      setBottomInput(data.bottom.toString());
-    } else {
-      const clamped = Math.max(0, Math.min(PADDING_MAX, parsed));
-      data.setBottom(clamped);
-      setBottomInput(clamped.toString());
-    }
-  }, [bottomInput, data]);
-  const handleLeftChange = (0, import_react67.useCallback)((e) => {
-    setLeftInput(e.target.value);
-  }, []);
-  const handleLeftBlur = (0, import_react67.useCallback)(() => {
-    const parsed = parseInt(leftInput, 10);
-    if (isNaN(parsed)) {
-      setLeftInput(data.left.toString());
-    } else {
-      const clamped = Math.max(0, Math.min(PADDING_MAX, parsed));
-      data.setLeft(clamped);
-      setLeftInput(clamped.toString());
-    }
-  }, [leftInput, data]);
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Button, { variant: "outline", className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { children: label }),
@@ -22242,7 +22129,7 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
         /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
           Slider2,
           {
-            value: [sliderValue],
+            value: [data.uniformValue ?? data.top],
             onValueChange: handleSliderChange,
             min: 0,
             max: PADDING_MAX,
@@ -22253,10 +22140,11 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
           Input,
           {
             type: "number",
-            value: sliderInputValue,
-            onChange: handleSliderInputChange,
-            onBlur: handleSliderInputBlur,
-            onKeyDown: handleKeyDown,
+            value: sliderInput.displayValue,
+            onChange: (e) => sliderInput.setLocalValue(e.target.value),
+            onFocus: sliderInput.handleFocus,
+            onBlur: sliderInput.handleBlur,
+            onKeyDown: sliderInput.handleKeyDown,
             className: "w-25 shadow-none rounded-[12px]",
             min: 0,
             max: PADDING_MAX
@@ -22271,10 +22159,11 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
               Input,
               {
                 type: "number",
-                value: topInput,
-                onChange: handleTopChange,
-                onBlur: handleTopBlur,
-                onKeyDown: handleKeyDown,
+                value: topInput.displayValue,
+                onChange: (e) => topInput.setLocalValue(e.target.value),
+                onFocus: topInput.handleFocus,
+                onBlur: topInput.handleBlur,
+                onKeyDown: topInput.handleKeyDown,
                 className: "w-20 shadow-none rounded-[12px]",
                 min: 0,
                 max: PADDING_MAX
@@ -22287,10 +22176,11 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
               Input,
               {
                 type: "number",
-                value: bottomInput,
-                onChange: handleBottomChange,
-                onBlur: handleBottomBlur,
-                onKeyDown: handleKeyDown,
+                value: bottomInput.displayValue,
+                onChange: (e) => bottomInput.setLocalValue(e.target.value),
+                onFocus: bottomInput.handleFocus,
+                onBlur: bottomInput.handleBlur,
+                onKeyDown: bottomInput.handleKeyDown,
                 className: "w-20 shadow-none rounded-[12px]",
                 min: 0,
                 max: PADDING_MAX
@@ -22305,10 +22195,11 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
               Input,
               {
                 type: "number",
-                value: leftInput,
-                onChange: handleLeftChange,
-                onBlur: handleLeftBlur,
-                onKeyDown: handleKeyDown,
+                value: leftInput.displayValue,
+                onChange: (e) => leftInput.setLocalValue(e.target.value),
+                onFocus: leftInput.handleFocus,
+                onBlur: leftInput.handleBlur,
+                onKeyDown: leftInput.handleKeyDown,
                 className: "w-20 shadow-none rounded-[12px]",
                 min: 0,
                 max: PADDING_MAX
@@ -22321,10 +22212,11 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
               Input,
               {
                 type: "number",
-                value: rightInput,
-                onChange: handleRightChange,
-                onBlur: handleRightBlur,
-                onKeyDown: handleKeyDown,
+                value: rightInput.displayValue,
+                onChange: (e) => rightInput.setLocalValue(e.target.value),
+                onFocus: rightInput.handleFocus,
+                onBlur: rightInput.handleBlur,
+                onKeyDown: rightInput.handleKeyDown,
                 className: "w-20 shadow-none rounded-[12px]",
                 min: 0,
                 max: PADDING_MAX
@@ -22395,45 +22287,45 @@ var import_jsx_runtime101 = require("react/jsx-runtime");
 var ColumnStyles = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const columnIdx = (0, import_react68.useMemo)(() => {
+  const columnIdx = (0, import_react69.useMemo)(() => {
     if (!focusIdx) return void 0;
     return getParentIdx(focusIdx);
   }, [focusIdx]);
-  const column = (0, import_react68.useMemo)(() => {
+  const column = (0, import_react69.useMemo)(() => {
     if (!columnIdx || !template) return void 0;
     return getValueByIdx(template, columnIdx);
   }, [columnIdx, template]);
   const currentBgColor = column?.attributes?.["background-color"];
-  const border = (0, import_react68.useMemo)(() => {
+  const border = (0, import_react69.useMemo)(() => {
     return parseBorder(column?.attributes?.border);
   }, [column]);
-  const borderRadiusValue = (0, import_react68.useMemo)(() => {
+  const borderRadiusValue = (0, import_react69.useMemo)(() => {
     return parseBorderRadius(column?.attributes?.["border-radius"]);
   }, [column]);
-  const padding = (0, import_react68.useMemo)(() => {
+  const padding = (0, import_react69.useMemo)(() => {
     return parsePadding(column?.attributes?.padding);
   }, [column]);
-  const paddingUniformValue = (0, import_react68.useMemo)(() => {
+  const paddingUniformValue = (0, import_react69.useMemo)(() => {
     return getUniformValue(padding);
   }, [padding]);
-  const handleOpenBgColorPicker = (0, import_react68.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react69.useCallback)(() => {
     setColorType("Column color");
     setColorTarget("columnBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react68.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react69.useCallback)(() => {
     setColorType("Column Stroke");
     setColorTarget("columnStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleStrokeWidthChange = (0, import_react68.useCallback)((width) => {
+  const handleStrokeWidthChange = (0, import_react69.useCallback)((width) => {
     if (!columnIdx || !column) return;
     const newBorder = formatBorder({ ...border, width });
     updateElement(columnIdx, {
       attributes: { ...column.attributes, border: newBorder }
     });
   }, [columnIdx, column, border, updateElement]);
-  const handleStrokeEnabledChange = (0, import_react68.useCallback)((enabled) => {
+  const handleStrokeEnabledChange = (0, import_react69.useCallback)((enabled) => {
     if (!columnIdx || !column) return;
     const newBorder = formatBorder({
       ...border,
@@ -22443,32 +22335,32 @@ var ColumnStyles = () => {
       attributes: { ...column.attributes, border: newBorder }
     });
   }, [columnIdx, column, border, updateElement]);
-  const handleBorderRadiusChange = (0, import_react68.useCallback)((value) => {
+  const handleBorderRadiusChange = (0, import_react69.useCallback)((value) => {
     if (!columnIdx || !column) return;
     updateElement(columnIdx, {
       attributes: { ...column.attributes, "border-radius": formatBorderRadius(value) }
     });
   }, [columnIdx, column, updateElement]);
-  const updatePadding = (0, import_react68.useCallback)((updates) => {
+  const updatePadding = (0, import_react69.useCallback)((updates) => {
     if (!columnIdx || !column) return;
     const newPadding = { ...padding, ...updates };
     updateElement(columnIdx, {
       attributes: { ...column.attributes, padding: formatPadding(newPadding) }
     });
   }, [columnIdx, column, padding, updateElement]);
-  const handlePaddingTopChange = (0, import_react68.useCallback)((value) => {
+  const handlePaddingTopChange = (0, import_react69.useCallback)((value) => {
     updatePadding({ top: value });
   }, [updatePadding]);
-  const handlePaddingRightChange = (0, import_react68.useCallback)((value) => {
+  const handlePaddingRightChange = (0, import_react69.useCallback)((value) => {
     updatePadding({ right: value });
   }, [updatePadding]);
-  const handlePaddingBottomChange = (0, import_react68.useCallback)((value) => {
+  const handlePaddingBottomChange = (0, import_react69.useCallback)((value) => {
     updatePadding({ bottom: value });
   }, [updatePadding]);
-  const handlePaddingLeftChange = (0, import_react68.useCallback)((value) => {
+  const handlePaddingLeftChange = (0, import_react69.useCallback)((value) => {
     updatePadding({ left: value });
   }, [updatePadding]);
-  const handlePaddingUniformChange = (0, import_react68.useCallback)((value) => {
+  const handlePaddingUniformChange = (0, import_react69.useCallback)((value) => {
     updatePadding({ top: value, right: value, bottom: value, left: value });
   }, [updatePadding]);
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(import_jsx_runtime101.Fragment, { children: [
@@ -22561,9 +22453,9 @@ var TextToolbar = () => {
   const template = useEditorStore((s) => s.template);
   const mergeFields = useEditorStore((s) => s.mergeFields);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [updateCounter, forceUpdate] = (0, import_react69.useState)(0);
-  const [overflowOpen, setOverflowOpen] = (0, import_react69.useState)(false);
-  const isInSectionColumn = (0, import_react69.useMemo)(() => {
+  const [updateCounter, forceUpdate] = (0, import_react70.useState)(0);
+  const [overflowOpen, setOverflowOpen] = (0, import_react70.useState)(false);
+  const isInSectionColumn = (0, import_react70.useMemo)(() => {
     if (!focusIdx || !template) return false;
     const columnIdx = getParentIdx(focusIdx);
     if (!columnIdx) return false;
@@ -22572,7 +22464,7 @@ var TextToolbar = () => {
     const section = getValueByIdx(template, sectionIdx);
     return section?.type === "section-column";
   }, [focusIdx, template]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -22582,7 +22474,7 @@ var TextToolbar = () => {
       window.removeEventListener("toolbar-refresh", handler);
     };
   }, [tiptapEditor]);
-  const activeType = (0, import_react69.useMemo)(() => {
+  const activeType = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return "paragraph";
     const paragraphAttrs = tiptapEditor.getAttributes("paragraph");
     const headingLevel = paragraphAttrs.headingLevel || 0;
@@ -22591,14 +22483,14 @@ var TextToolbar = () => {
     if (headingLevel === 3) return "h3";
     return "paragraph";
   }, [tiptapEditor, updateCounter]);
-  const currentTypeConfig = (0, import_react69.useMemo)(() => {
+  const currentTypeConfig = (0, import_react70.useMemo)(() => {
     return TEXT_TYPE_OPTIONS.find((t) => t.type === activeType) || TEXT_TYPE_OPTIONS[0];
   }, [activeType]);
-  const baseFontSize = (0, import_react69.useMemo)(() => {
+  const baseFontSize = (0, import_react70.useMemo)(() => {
     if (!textEditingStyles?.fontSize) return DEFAULT_FONT_SIZE;
     return parseFontSize(textEditingStyles.fontSize);
   }, [textEditingStyles?.fontSize]);
-  const currentFontSize = (0, import_react69.useMemo)(() => {
+  const currentFontSize = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return DEFAULT_FONT_SIZE;
     const textStyleAttrs = tiptapEditor.getAttributes("textStyle");
     if (textStyleAttrs.fontSize) {
@@ -22607,18 +22499,18 @@ var TextToolbar = () => {
     const multiplier = HEADING_MULTIPLIERS[activeType] || 1;
     return Math.round(baseFontSize * multiplier);
   }, [tiptapEditor, updateCounter, activeType, baseFontSize]);
-  const handleFontSizeChange = (0, import_react69.useCallback)((size) => {
+  const handleFontSizeChange = (0, import_react70.useCallback)((size) => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().setFontSize(`${size}px`).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const currentAlignment = (0, import_react69.useMemo)(() => {
+  const currentAlignment = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return "left";
     const paragraphAttrs = tiptapEditor.getAttributes("paragraph");
     if (paragraphAttrs.textAlign) return paragraphAttrs.textAlign;
     return "left";
   }, [tiptapEditor, updateCounter]);
-  const handleCycleAlignment = (0, import_react69.useCallback)(() => {
+  const handleCycleAlignment = (0, import_react70.useCallback)(() => {
     if (!tiptapEditor) return;
     const currentIndex = ALIGNMENTS.indexOf(currentAlignment);
     const nextIndex = (currentIndex + 1) % ALIGNMENTS.length;
@@ -22626,52 +22518,52 @@ var TextToolbar = () => {
     tiptapEditor.chain().focus().setTextAlign(nextAlignment).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor, currentAlignment]);
-  const handleCycleList = (0, import_react69.useCallback)(() => {
+  const handleCycleList = (0, import_react70.useCallback)(() => {
   }, [tiptapEditor]);
-  const isInHeading = (0, import_react69.useMemo)(() => {
+  const isInHeading = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return false;
     const paragraphAttrs = tiptapEditor.getAttributes("paragraph");
     return (paragraphAttrs.headingLevel || 0) > 0;
   }, [tiptapEditor, updateCounter]);
-  const handleToggleBold = (0, import_react69.useCallback)(() => {
+  const handleToggleBold = (0, import_react70.useCallback)(() => {
     if (!tiptapEditor) return;
     if (isInHeading) return;
     tiptapEditor.chain().focus().toggleBold().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor, isInHeading]);
-  const handleToggleItalic = (0, import_react69.useCallback)(() => {
+  const handleToggleItalic = (0, import_react70.useCallback)(() => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().toggleItalic().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleToggleUnderline = (0, import_react69.useCallback)(() => {
+  const handleToggleUnderline = (0, import_react70.useCallback)(() => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().toggleUnderline().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleToggleStrike = (0, import_react69.useCallback)(() => {
+  const handleToggleStrike = (0, import_react70.useCallback)(() => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().toggleStrike().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const isBoldActive = (0, import_react69.useMemo)(() => {
+  const isBoldActive = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return false;
     if (isInHeading) return true;
     return tiptapEditor.isActive("bold");
   }, [tiptapEditor, updateCounter, isInHeading]);
-  const isItalicActive = (0, import_react69.useMemo)(() => {
+  const isItalicActive = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return false;
     return tiptapEditor.isActive("italic");
   }, [tiptapEditor, updateCounter]);
-  const isUnderlineActive = (0, import_react69.useMemo)(() => {
+  const isUnderlineActive = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return false;
     return tiptapEditor.isActive("underline");
   }, [tiptapEditor, updateCounter]);
-  const isStrikeActive = (0, import_react69.useMemo)(() => {
+  const isStrikeActive = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return false;
     return tiptapEditor.isActive("strike");
   }, [tiptapEditor, updateCounter]);
-  const handleSetType = (0, import_react69.useCallback)((type) => {
+  const handleSetType = (0, import_react70.useCallback)((type) => {
     if (!tiptapEditor) return;
     const levelMap = {
       paragraph: 0,
@@ -22691,25 +22583,25 @@ var TextToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenTextColorPicker = (0, import_react69.useCallback)(() => {
+  const handleOpenTextColorPicker = (0, import_react70.useCallback)(() => {
     setColorType("Text color");
     setColorTarget("textColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenHighlightColorPicker = (0, import_react69.useCallback)(() => {
+  const handleOpenHighlightColorPicker = (0, import_react70.useCallback)(() => {
     setColorType("Highlight color");
     setColorTarget("highlightColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const currentTextColor = (0, import_react69.useMemo)(() => {
+  const currentTextColor = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return "#000000";
     return tiptapEditor.getAttributes("textStyle").color || "#000000";
   }, [tiptapEditor, updateCounter]);
-  const currentHighlightColor = (0, import_react69.useMemo)(() => {
+  const currentHighlightColor = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return "transparent";
     return tiptapEditor.getAttributes("textStyle").backgroundColor || "transparent";
   }, [tiptapEditor, updateCounter]);
-  const extractKnownFont = (0, import_react69.useCallback)((fontStack) => {
+  const extractKnownFont = (0, import_react70.useCallback)((fontStack) => {
     if (!fontStack) return "Arial";
     const fonts = fontStack.split(",").map((f) => f.trim().replace(/['"]/g, ""));
     for (const font of fonts) {
@@ -22718,7 +22610,7 @@ var TextToolbar = () => {
     }
     return "Arial";
   }, []);
-  const currentFontFamily = (0, import_react69.useMemo)(() => {
+  const currentFontFamily = (0, import_react70.useMemo)(() => {
     if (!tiptapEditor) return "Arial";
     const fontFamily = tiptapEditor.getAttributes("textStyle").fontFamily;
     if (fontFamily) {
@@ -22726,7 +22618,7 @@ var TextToolbar = () => {
     }
     return extractKnownFont(textEditingStyles?.fontFamily);
   }, [tiptapEditor, updateCounter, textEditingStyles?.fontFamily, extractKnownFont]);
-  const handleSetFontFamily = (0, import_react69.useCallback)((font) => {
+  const handleSetFontFamily = (0, import_react70.useCallback)((font) => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().setFontFamily(font).run();
     forceUpdate((n) => n + 1);
@@ -23266,7 +23158,7 @@ var MergeFieldItem = ({ isResponsive, isInSectionColumn, tiptapEditor, mergeFiel
 };
 
 // src/core/editor/components/element-gear/button/toolbar.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 init_editor();
 init_sidebar_context();
 var import_lodash13 = require("lodash");
@@ -23276,20 +23168,20 @@ var import_lucide_react62 = require("lucide-react");
 init_tooltip();
 
 // src/core/editor/hooks/use-border-radius.ts
-var import_react70 = require("react");
+var import_react71 = require("react");
 init_editor();
 var import_lodash10 = require("lodash");
 var useBorderRadius = (options = {}) => {
   const { focusIdx, updateElement, template } = useEditorStore();
   const attributeName = options.attributeName || "border-radius";
-  const currentValue = (0, import_react70.useMemo)(() => {
+  const currentValue = (0, import_react71.useMemo)(() => {
     if (!focusIdx || !template) return 0;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = (0, import_lodash10.get)(template, path);
     const rawValue = element?.attributes?.[attributeName];
     return parseBorderRadius(rawValue);
   }, [focusIdx, template, attributeName]);
-  const handleChange = (0, import_react70.useCallback)((value) => {
+  const handleChange = (0, import_react71.useCallback)((value) => {
     if (!focusIdx || !template) return;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = (0, import_lodash10.get)(template, path);
@@ -23308,14 +23200,14 @@ var useBorderRadius = (options = {}) => {
 };
 
 // src/core/editor/hooks/use-border.ts
-var import_react71 = require("react");
+var import_react72 = require("react");
 init_editor();
 var import_lodash11 = require("lodash");
 init_border();
 var useBorder = (options = {}) => {
   const { focusIdx, updateElement, template } = useEditorStore();
   const attributeName = options.attributeName || "border";
-  const { element, parsedBorder } = (0, import_react71.useMemo)(() => {
+  const { element, parsedBorder } = (0, import_react72.useMemo)(() => {
     if (!focusIdx || !template) {
       return { element: null, parsedBorder: { width: 0, style: "solid", color: "#000000" } };
     }
@@ -23327,7 +23219,7 @@ var useBorder = (options = {}) => {
   const width = parsedBorder.width;
   const color = parsedBorder.color;
   const isEnabled = width > 0;
-  const updateBorder = (0, import_react71.useCallback)((updates) => {
+  const updateBorder = (0, import_react72.useCallback)((updates) => {
     if (!focusIdx || !template || !element) return;
     const newBorder = {
       ...parsedBorder,
@@ -23340,13 +23232,13 @@ var useBorder = (options = {}) => {
       }
     });
   }, [focusIdx, template, element, parsedBorder, updateElement, attributeName]);
-  const setWidth = (0, import_react71.useCallback)((newWidth) => {
+  const setWidth = (0, import_react72.useCallback)((newWidth) => {
     updateBorder({ width: newWidth });
   }, [updateBorder]);
-  const setColor = (0, import_react71.useCallback)((newColor) => {
+  const setColor = (0, import_react72.useCallback)((newColor) => {
     updateBorder({ color: newColor });
   }, [updateBorder]);
-  const setEnabled = (0, import_react71.useCallback)((enabled) => {
+  const setEnabled = (0, import_react72.useCallback)((enabled) => {
     if (enabled) {
       updateBorder({ width: parsedBorder.width === 0 ? 1 : parsedBorder.width });
     } else {
@@ -23364,7 +23256,7 @@ var useBorder = (options = {}) => {
 };
 
 // src/core/editor/hooks/use-size.ts
-var import_react72 = require("react");
+var import_react73 = require("react");
 init_editor();
 var import_lodash12 = require("lodash");
 var parseSize = (value, defaultValue) => {
@@ -23381,7 +23273,7 @@ var useSize = (options = {}) => {
   const defaultHeight = options.defaultHeight ?? 40;
   const widthUnit = options.widthUnit || "%";
   const heightUnit = options.heightUnit || "px";
-  const { element, width, height } = (0, import_react72.useMemo)(() => {
+  const { element, width, height } = (0, import_react73.useMemo)(() => {
     if (!focusIdx || !template) {
       return { element: null, width: defaultWidth, height: defaultHeight };
     }
@@ -23393,13 +23285,13 @@ var useSize = (options = {}) => {
       height: parseSize(el?.attributes?.[heightAttribute], defaultHeight)
     };
   }, [focusIdx, template, widthAttribute, heightAttribute, defaultWidth, defaultHeight]);
-  const setWidth = (0, import_react72.useCallback)((value) => {
+  const setWidth = (0, import_react73.useCallback)((value) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [widthAttribute]: formatSize(value, widthUnit) }
     });
   }, [focusIdx, template, element, updateElement, widthAttribute, widthUnit]);
-  const setHeight = (0, import_react72.useCallback)((value) => {
+  const setHeight = (0, import_react73.useCallback)((value) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [heightAttribute]: formatSize(value, heightUnit) }
@@ -23415,137 +23307,63 @@ init_button();
 var import_lucide_react61 = require("lucide-react");
 init_label();
 init_input();
-var import_react73 = require("react");
+var import_react74 = require("react");
 init_editor();
 init_idx();
 init_configuration();
 var import_jsx_runtime103 = require("react/jsx-runtime");
-var ButtonTextSettings = (0, import_react73.memo)(function ButtonTextSettings2() {
-  const [isOpen, setIsOpen] = (0, import_react73.useState)(false);
+var ButtonTextSettings = (0, import_react74.memo)(function ButtonTextSettings2() {
+  const [isOpen, setIsOpen] = (0, import_react74.useState)(false);
   const focusIdx = useEditorStore((s) => s.focusIdx);
   const template = useEditorStore((s) => s.template);
   const updateElement = useEditorStore((s) => s.updateElement);
-  const buttonElement = (0, import_react73.useMemo)(() => {
+  const buttonElement = (0, import_react74.useMemo)(() => {
     return focusIdx ? getValueByIdx(template, focusIdx) : null;
   }, [focusIdx, template]);
-  const currentLetterSpacing = (0, import_react73.useMemo)(() => {
+  const currentLetterSpacing = (0, import_react74.useMemo)(() => {
     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 = (0, import_react73.useMemo)(() => {
+  const currentLineHeight = (0, import_react74.useMemo)(() => {
     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] = (0, import_react73.useState)(
-    String(currentLetterSpacing)
-  );
-  const [isLetterSpacingInputFocused, setIsLetterSpacingInputFocused] = (0, import_react73.useState)(false);
-  const [lineHeightInputValue, setLineHeightInputValue] = (0, import_react73.useState)(
-    String(currentLineHeight)
-  );
-  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = (0, import_react73.useState)(false);
-  (0, import_react73.useEffect)(() => {
-    if (!isLetterSpacingInputFocused) {
-      setLetterSpacingInputValue(String(currentLetterSpacing));
-    }
-  }, [currentLetterSpacing, isLetterSpacingInputFocused]);
-  (0, import_react73.useEffect)(() => {
-    if (!isLineHeightInputFocused) {
-      setLineHeightInputValue(String(currentLineHeight));
-    }
-  }, [currentLineHeight, isLineHeightInputFocused]);
-  const handleLetterSpacingSliderChange = (0, import_react73.useCallback)((values) => {
+  const commitLetterSpacing = (0, import_react74.useCallback)((value) => {
     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`
-      }
+      attributes: { ...element?.attributes, "letter-spacing": `${value}px` }
     });
   }, [focusIdx, updateElement]);
-  const handleLetterSpacingInputChange = (0, import_react73.useCallback)((e) => {
-    setLetterSpacingInputValue(e.target.value);
-  }, []);
-  const applyLetterSpacing = (0, import_react73.useCallback)(() => {
+  const commitLineHeight = (0, import_react74.useCallback)((value) => {
     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 = (0, import_react73.useCallback)(() => {
-    setIsLetterSpacingInputFocused(false);
-    applyLetterSpacing();
-  }, [applyLetterSpacing]);
-  const handleLetterSpacingInputKeyDown = (0, import_react73.useCallback)((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLetterSpacing();
-      e.target.blur();
-    }
-  }, [applyLetterSpacing]);
-  const handleLineHeightSliderChange = (0, import_react73.useCallback)((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)
-      }
+      attributes: { ...element?.attributes, "line-height": String(value) }
     });
   }, [focusIdx, updateElement]);
-  const handleLineHeightInputChange = (0, import_react73.useCallback)((e) => {
-    setLineHeightInputValue(e.target.value);
-  }, []);
-  const applyLineHeight = (0, import_react73.useCallback)(() => {
-    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 = (0, import_react73.useCallback)(() => {
-    setIsLineHeightInputFocused(false);
-    applyLineHeight();
-  }, [applyLineHeight]);
-  const handleLineHeightInputKeyDown = (0, import_react73.useCallback)((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLineHeight();
-      e.target.blur();
-    }
-  }, [applyLineHeight]);
+  const letterSpacingInput = useEditableFloat({
+    value: currentLetterSpacing,
+    onChange: commitLetterSpacing,
+    min: MIN_LETTER_SPACING,
+    max: MAX_LETTER_SPACING
+  });
+  const lineHeightInput = useEditableFloat({
+    value: currentLineHeight,
+    onChange: commitLineHeight,
+    min: MIN_LINE_HEIGHT,
+    max: MAX_LINE_HEIGHT
+  });
+  const handleLetterSpacingSliderChange = (0, import_react74.useCallback)((values) => {
+    commitLetterSpacing(values[0]);
+  }, [commitLetterSpacing]);
+  const handleLineHeightSliderChange = (0, import_react74.useCallback)((values) => {
+    commitLineHeight(values[0]);
+  }, [commitLineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
@@ -23582,11 +23400,11 @@ var ButtonTextSettings = (0, import_react73.memo)(function ButtonTextSettings2()
                   Input,
                   {
                     type: "number",
-                    value: letterSpacingInputValue,
-                    onChange: handleLetterSpacingInputChange,
-                    onFocus: () => setIsLetterSpacingInputFocused(true),
-                    onBlur: handleLetterSpacingInputBlur,
-                    onKeyDown: handleLetterSpacingInputKeyDown,
+                    value: letterSpacingInput.displayValue,
+                    onChange: (e) => letterSpacingInput.setLocalValue(e.target.value),
+                    onFocus: letterSpacingInput.handleFocus,
+                    onBlur: letterSpacingInput.handleBlur,
+                    onKeyDown: letterSpacingInput.handleKeyDown,
                     className: "w-25 shadow-none rounded-[12px]",
                     min: MIN_LETTER_SPACING,
                     max: MAX_LETTER_SPACING,
@@ -23613,11 +23431,11 @@ var ButtonTextSettings = (0, import_react73.memo)(function ButtonTextSettings2()
                   Input,
                   {
                     type: "number",
-                    value: lineHeightInputValue,
-                    onChange: handleLineHeightInputChange,
-                    onFocus: () => setIsLineHeightInputFocused(true),
-                    onBlur: handleLineHeightInputBlur,
-                    onKeyDown: handleLineHeightInputKeyDown,
+                    value: lineHeightInput.displayValue,
+                    onChange: (e) => lineHeightInput.setLocalValue(e.target.value),
+                    onFocus: lineHeightInput.handleFocus,
+                    onBlur: lineHeightInput.handleBlur,
+                    onKeyDown: lineHeightInput.handleKeyDown,
                     className: "w-25 shadow-none rounded-[12px]",
                     min: MIN_LINE_HEIGHT,
                     max: MAX_LINE_HEIGHT,
@@ -23644,41 +23462,41 @@ var ButtonToolbar = () => {
   const border = useBorder();
   const padding = usePadding();
   const size = useSize({ defaultWidth: 100, defaultHeight: 40, widthUnit: "%", heightUnit: "px" });
-  const currentElement = (0, import_react74.useMemo)(() => {
+  const currentElement = (0, import_react75.useMemo)(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return (0, import_lodash13.get)(template, path);
   }, [focusIdx, template]);
-  const currentBgColor = (0, import_react74.useMemo)(() => {
+  const currentBgColor = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["background-color"];
   }, [currentElement]);
-  const currentTextColor = (0, import_react74.useMemo)(() => {
+  const currentTextColor = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["color"] || "#ffffff";
   }, [currentElement]);
-  const isBold = (0, import_react74.useMemo)(() => {
+  const isBold = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["font-weight"] === "bold";
   }, [currentElement]);
-  const isItalic = (0, import_react74.useMemo)(() => {
+  const isItalic = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["font-style"] === "italic";
   }, [currentElement]);
-  const isUnderline = (0, import_react74.useMemo)(() => {
+  const isUnderline = (0, import_react75.useMemo)(() => {
     const decoration = currentElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("underline");
   }, [currentElement]);
-  const isStrikethrough = (0, import_react74.useMemo)(() => {
+  const isStrikethrough = (0, import_react75.useMemo)(() => {
     const decoration = currentElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("line-through");
   }, [currentElement]);
-  const currentAlignment = (0, import_react74.useMemo)(() => {
+  const currentAlignment = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["text-align"] || "left";
   }, [currentElement]);
-  const currentButtonAlign = (0, import_react74.useMemo)(() => {
+  const currentButtonAlign = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["align"] || "center";
   }, [currentElement]);
-  const currentFontFamily = (0, import_react74.useMemo)(() => {
+  const currentFontFamily = (0, import_react75.useMemo)(() => {
     return currentElement?.attributes?.["font-family"] || "Arial";
   }, [currentElement]);
-  const currentFontSize = (0, import_react74.useMemo)(() => {
+  const currentFontSize = (0, import_react75.useMemo)(() => {
     return parseFontSize(currentElement?.attributes?.["font-size"]);
   }, [currentElement]);
   const handleDelete = () => {
@@ -23686,36 +23504,36 @@ var ButtonToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = (0, import_react74.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react75.useCallback)(() => {
     setColorType("Button Color");
     setColorTarget("buttonBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react74.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react75.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("buttonStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = (0, import_react74.useCallback)(() => {
+  const handleOpenTextColorPicker = (0, import_react75.useCallback)(() => {
     setColorType("Text Color");
     setColorTarget("buttonTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = (0, import_react74.useCallback)(() => {
+  const handleToggleBold = (0, import_react75.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const newWeight = isBold ? "normal" : "bold";
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-weight": newWeight }
     });
   }, [focusIdx, currentElement, isBold, updateElement]);
-  const handleToggleItalic = (0, import_react74.useCallback)(() => {
+  const handleToggleItalic = (0, import_react75.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const newStyle = isItalic ? "normal" : "italic";
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-style": newStyle }
     });
   }, [focusIdx, currentElement, isItalic, updateElement]);
-  const handleToggleUnderline = (0, import_react74.useCallback)(() => {
+  const handleToggleUnderline = (0, import_react75.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const currentDecoration = currentElement.attributes?.["text-decoration"] || "";
     let newDecoration;
@@ -23728,7 +23546,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-decoration": newDecoration || "none" }
     });
   }, [focusIdx, currentElement, isUnderline, updateElement]);
-  const handleToggleStrike = (0, import_react74.useCallback)(() => {
+  const handleToggleStrike = (0, import_react75.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const currentDecoration = currentElement.attributes?.["text-decoration"] || "";
     let newDecoration;
@@ -23741,7 +23559,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-decoration": newDecoration || "none" }
     });
   }, [focusIdx, currentElement, isStrikethrough, updateElement]);
-  const handleCycleAlignment = (0, import_react74.useCallback)(() => {
+  const handleCycleAlignment = (0, import_react75.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentAlignment);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -23750,7 +23568,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-align": nextAlignment }
     });
   }, [focusIdx, currentElement, currentAlignment, updateElement]);
-  const handleCycleButtonAlign = (0, import_react74.useCallback)(() => {
+  const handleCycleButtonAlign = (0, import_react75.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentButtonAlign);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -23759,13 +23577,13 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "align": nextAlign }
     });
   }, [focusIdx, currentElement, currentButtonAlign, updateElement]);
-  const handleSetFontFamily = (0, import_react74.useCallback)((font) => {
+  const handleSetFontFamily = (0, import_react75.useCallback)((font) => {
     if (!focusIdx || !currentElement) return;
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-family": font }
     });
   }, [focusIdx, currentElement, updateElement]);
-  const handleFontSizeChange = (0, import_react74.useCallback)((size2) => {
+  const handleFontSizeChange = (0, import_react75.useCallback)((size2) => {
     if (!focusIdx || !currentElement) return;
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-size": `${size2}px` }
@@ -23953,7 +23771,7 @@ var ButtonToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/section/toolbar.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 init_button();
 init_tooltip();
 init_editor();
@@ -23965,11 +23783,11 @@ init_button();
 init_popover();
 init_tooltip();
 var import_lucide_react64 = require("lucide-react");
-var import_react76 = require("react");
+var import_react77 = require("react");
 init_sidebar_context();
 
 // src/core/editor/hooks/use-image.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 init_editor();
 var import_lodash14 = require("lodash");
 init_configuration();
@@ -23977,7 +23795,7 @@ 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 } = (0, import_react75.useMemo)(() => {
+  const { element, url, positionX, positionY, backgroundSize, backgroundRepeat, width, height } = (0, import_react76.useMemo)(() => {
     if (!focusIdx || !template) {
       return {
         element: null,
@@ -24003,13 +23821,13 @@ var useImage = (options = {}) => {
       height: el?.attributes?.["height"] || "auto"
     };
   }, [focusIdx, template, attributeName]);
-  const setUrl = (0, import_react75.useCallback)((newUrl) => {
+  const setUrl = (0, import_react76.useCallback)((newUrl) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [attributeName]: newUrl }
     });
   }, [focusIdx, element, updateElement, attributeName]);
-  const removeUrl = (0, import_react75.useCallback)(() => {
+  const removeUrl = (0, import_react76.useCallback)(() => {
     if (!focusIdx || !element) return;
     if (type === "background") {
       const newAttributes = { ...element.attributes };
@@ -24022,37 +23840,37 @@ var useImage = (options = {}) => {
       });
     }
   }, [focusIdx, element, updateElement, attributeName, type]);
-  const setPositionX = (0, import_react75.useCallback)((value) => {
+  const setPositionX = (0, import_react76.useCallback)((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-position-x": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setPositionY = (0, import_react75.useCallback)((value) => {
+  const setPositionY = (0, import_react76.useCallback)((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-position-y": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setBackgroundSize = (0, import_react75.useCallback)((value) => {
+  const setBackgroundSize = (0, import_react76.useCallback)((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-size": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setBackgroundRepeat = (0, import_react75.useCallback)((value) => {
+  const setBackgroundRepeat = (0, import_react76.useCallback)((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-repeat": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setWidth = (0, import_react75.useCallback)((value) => {
+  const setWidth = (0, import_react76.useCallback)((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, width: value }
     });
   }, [focusIdx, element, updateElement]);
-  const setHeight = (0, import_react75.useCallback)((value) => {
+  const setHeight = (0, import_react76.useCallback)((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, height: value }
@@ -24214,7 +24032,7 @@ init_separator();
 init_configuration();
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var ImageMenu = ({ type }) => {
-  const [isOpen, setIsOpen] = (0, import_react76.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react77.useState)(false);
   const { setActiveView, setImageTarget } = useSidebarContext();
   const { url, removeUrl } = useImage({ type });
   const handleSelectImage = () => {
@@ -24233,9 +24051,9 @@ var ImageMenu = ({ type }) => {
         Button,
         {
           variant: "outline",
-          className: "shadow-none transition-none cursor-pointer rounded-[12px]",
+          className: "shadow-none transition-none cursor-pointer rounded-[12px] p-0.5 ",
           size: "icon",
-          children: url && !url.includes("placeholder_image.png") && url !== DEFAULT_PROPERTY_PLACEHOLDER_IMAGE ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("img", { src: url, alt: "Background Image", className: "w-full h-full object-cover rounded-[12px]" }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react64.ImageIcon, { className: "w-4 h-4" })
+          children: url && !url.includes("placeholder_image.png") && url !== DEFAULT_PROPERTY_PLACEHOLDER_IMAGE ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("img", { src: url, alt: "Background Image", className: "w-full h-full object-cover rounded-[8px]" }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react64.ImageIcon, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-3", children: [
@@ -24261,7 +24079,7 @@ var import_jsx_runtime108 = require("react/jsx-runtime");
 var SectionToolbar = () => {
   const { focusIdx, deleteElement, template } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const currentBgColor = (0, import_react77.useMemo)(() => {
+  const currentBgColor = (0, import_react78.useMemo)(() => {
     if (!focusIdx || !template) return void 0;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = (0, import_lodash15.get)(template, path);
@@ -24275,12 +24093,12 @@ var SectionToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = (0, import_react77.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react78.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react77.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react78.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
@@ -24343,7 +24161,7 @@ var SectionToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/section-column/toolbar.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 init_dropdown_menu();
 init_button();
 var import_lucide_react65 = require("lucide-react");
@@ -24356,15 +24174,15 @@ var VERTICAL_ALIGNMENTS = ["top", "middle", "bottom"];
 var SectionColumnToolbar = () => {
   const { focusIdx, deleteElement, template, setColumnCount, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [columnCountOpen, setColumnCountOpen] = (0, import_react78.useState)(false);
-  const [verticalAlignOpen, setVerticalAlignOpen] = (0, import_react78.useState)(false);
-  const element = (0, import_react78.useMemo)(() => {
+  const [columnCountOpen, setColumnCountOpen] = (0, import_react79.useState)(false);
+  const [verticalAlignOpen, setVerticalAlignOpen] = (0, import_react79.useState)(false);
+  const element = (0, import_react79.useMemo)(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return (0, import_lodash16.get)(template, path);
   }, [focusIdx, template]);
   const columnCount = element?.children?.length || 2;
-  const currentVerticalAlign = (0, import_react78.useMemo)(() => {
+  const currentVerticalAlign = (0, import_react79.useMemo)(() => {
     const firstChild = element?.children?.[0];
     return firstChild?.attributes?.["vertical-align"] || "top";
   }, [element]);
@@ -24377,17 +24195,17 @@ var SectionColumnToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = (0, import_react78.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react79.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react78.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react79.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleVerticalAlignChange = (0, import_react78.useCallback)((align) => {
+  const handleVerticalAlignChange = (0, import_react79.useCallback)((align) => {
     if (!focusIdx || !element?.children) return;
     const updatedChildren = element.children.map((child) => ({
       ...child,
@@ -24502,19 +24320,19 @@ var SectionColumnToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/page/toolbar.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 init_sidebar_context();
 init_editor();
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var PageToolbar = () => {
   const { focusIdx, template } = useEditorStore();
   const { activeView, colorTarget, setColorType, setColorTarget, setActiveView } = useSidebarContext();
-  const currentBgColor = (0, import_react79.useMemo)(() => {
+  const currentBgColor = (0, import_react80.useMemo)(() => {
     if (!focusIdx || !template || focusIdx !== "content") return void 0;
     const page = template.content?.[0];
     return page?.attributes?.["background-color"];
   }, [focusIdx, template]);
-  const handleOpenBgColorPicker = (0, import_react79.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react80.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
@@ -24535,17 +24353,17 @@ var PageToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/spacer/toolbar.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 init_editor();
 init_sidebar_context();
 
 // src/core/editor/hooks/use-height.ts
-var import_react80 = require("react");
+var import_react81 = require("react");
 init_editor();
 var import_lodash17 = require("lodash");
 var useHeight = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const currentValue = (0, import_react80.useMemo)(() => {
+  const currentValue = (0, import_react81.useMemo)(() => {
     if (!focusIdx || !template) return 12;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = (0, import_lodash17.get)(template, path);
@@ -24554,7 +24372,7 @@ var useHeight = () => {
     const parsed = parseInt(rawValue.replace("px", ""), 10);
     return isNaN(parsed) ? 12 : Math.max(4, parsed);
   }, [focusIdx, template]);
-  const handleChange = (0, import_react80.useCallback)((value) => {
+  const handleChange = (0, import_react81.useCallback)((value) => {
     if (!focusIdx || !template) return;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = (0, import_lodash17.get)(template, path);
@@ -24580,13 +24398,13 @@ var SpacerToolbar = () => {
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
   const height = useHeight();
   const padding = usePadding();
-  const currentBgColor = (0, import_react81.useMemo)(() => {
+  const currentBgColor = (0, import_react82.useMemo)(() => {
     if (!focusIdx || !template) return void 0;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = (0, import_lodash18.get)(template, path);
     return element?.attributes?.["container-background-color"];
   }, [focusIdx, template]);
-  const handleOpenBgColorPicker = (0, import_react81.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react82.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("spacerBgColor");
     setActiveView("color");
@@ -24616,7 +24434,7 @@ var import_lucide_react67 = require("lucide-react");
 init_popover();
 init_editor();
 init_idx();
-var import_react83 = require("react");
+var import_react84 = require("react");
 init_sidebar_context();
 init_configuration();
 
@@ -24627,78 +24445,41 @@ init_button();
 var import_lucide_react66 = require("lucide-react");
 init_label();
 init_input();
-var import_react82 = require("react");
+var import_react83 = require("react");
 init_editor();
 init_idx();
 init_configuration();
 var import_jsx_runtime112 = require("react/jsx-runtime");
-var SocialLineSpacing = (0, import_react82.memo)(function SocialLineSpacing2() {
-  const [isOpen, setIsOpen] = (0, import_react82.useState)(false);
+var SocialLineSpacing = (0, import_react83.memo)(function SocialLineSpacing2() {
+  const [isOpen, setIsOpen] = (0, import_react83.useState)(false);
   const focusIdx = useEditorStore((s) => s.focusIdx);
   const template = useEditorStore((s) => s.template);
   const updateElement = useEditorStore((s) => s.updateElement);
-  const socialElement = (0, import_react82.useMemo)(() => {
+  const socialElement = (0, import_react83.useMemo)(() => {
     return focusIdx ? getValueByIdx(template, focusIdx) : null;
   }, [focusIdx, template]);
-  const currentLineHeight = (0, import_react82.useMemo)(() => {
+  const currentLineHeight = (0, import_react83.useMemo)(() => {
     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] = (0, import_react82.useState)(
-    String(currentLineHeight)
-  );
-  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = (0, import_react82.useState)(false);
-  (0, import_react82.useEffect)(() => {
-    if (!isLineHeightInputFocused) {
-      setLineHeightInputValue(String(currentLineHeight));
-    }
-  }, [currentLineHeight, isLineHeightInputFocused]);
-  const handleLineHeightSliderChange = (0, import_react82.useCallback)((values) => {
+  const commitLineHeight = (0, import_react83.useCallback)((value) => {
     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)
-      }
+      attributes: { ...element?.attributes, "line-height": String(value) }
     });
   }, [focusIdx, updateElement]);
-  const handleLineHeightInputChange = (0, import_react82.useCallback)((e) => {
-    setLineHeightInputValue(e.target.value);
-  }, []);
-  const applyLineHeight = (0, import_react82.useCallback)(() => {
-    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 = (0, import_react82.useCallback)(() => {
-    setIsLineHeightInputFocused(false);
-    applyLineHeight();
-  }, [applyLineHeight]);
-  const handleLineHeightInputKeyDown = (0, import_react82.useCallback)((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLineHeight();
-      e.target.blur();
-    }
-  }, [applyLineHeight]);
+  const lineHeightInput = useEditableFloat({
+    value: currentLineHeight,
+    onChange: commitLineHeight,
+    min: MIN_LINE_HEIGHT,
+    max: MAX_LINE_HEIGHT
+  });
+  const handleLineHeightSliderChange = (0, import_react83.useCallback)((values) => {
+    commitLineHeight(values[0]);
+  }, [commitLineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -24734,11 +24515,11 @@ var SocialLineSpacing = (0, import_react82.memo)(function SocialLineSpacing2() {
                 Input,
                 {
                   type: "number",
-                  value: lineHeightInputValue,
-                  onChange: handleLineHeightInputChange,
-                  onFocus: () => setIsLineHeightInputFocused(true),
-                  onBlur: handleLineHeightInputBlur,
-                  onKeyDown: handleLineHeightInputKeyDown,
+                  value: lineHeightInput.displayValue,
+                  onChange: (e) => lineHeightInput.setLocalValue(e.target.value),
+                  onFocus: lineHeightInput.handleFocus,
+                  onBlur: lineHeightInput.handleBlur,
+                  onKeyDown: lineHeightInput.handleKeyDown,
                   className: "w-25 shadow-none rounded-[12px]",
                   min: MIN_LINE_HEIGHT,
                   max: MAX_LINE_HEIGHT,
@@ -24774,48 +24555,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 = (0, import_react83.useMemo)(() => {
+  const currentBgColor = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["container-background-color"] || "transparent";
   }, [socialElement]);
-  const currentFontFamily = (0, import_react83.useMemo)(() => {
+  const currentFontFamily = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["font-family"] || "Arial";
   }, [socialElement]);
-  const currentFontSize = (0, import_react83.useMemo)(() => {
+  const currentFontSize = (0, import_react84.useMemo)(() => {
     return parseFontSize(socialElement?.attributes?.["font-size"]);
   }, [socialElement]);
-  const currentTextColor = (0, import_react83.useMemo)(() => {
+  const currentTextColor = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["color"] || "#000000";
   }, [socialElement]);
-  const isBold = (0, import_react83.useMemo)(() => {
+  const isBold = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["font-weight"] === "bold";
   }, [socialElement]);
-  const isItalic = (0, import_react83.useMemo)(() => {
+  const isItalic = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["font-style"] === "italic";
   }, [socialElement]);
-  const isUnderline = (0, import_react83.useMemo)(() => {
+  const isUnderline = (0, import_react84.useMemo)(() => {
     const decoration = socialElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("underline");
   }, [socialElement]);
-  const isStrikethrough = (0, import_react83.useMemo)(() => {
+  const isStrikethrough = (0, import_react84.useMemo)(() => {
     const decoration = socialElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("line-through");
   }, [socialElement]);
-  const currentMode = (0, import_react83.useMemo)(() => {
+  const currentMode = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["mode"] || "horizontal";
   }, [socialElement]);
-  const currentAlign = (0, import_react83.useMemo)(() => {
+  const currentAlign = (0, import_react84.useMemo)(() => {
     return socialElement?.attributes?.["align"] || "center";
   }, [socialElement]);
-  const currentSocialItemAlign = (0, import_react83.useMemo)(() => {
+  const currentSocialItemAlign = (0, import_react84.useMemo)(() => {
     const firstChild = socialElement?.children?.[0];
     return firstChild?.attributes?.["align"] || "center";
   }, [socialElement]);
-  const handleOpenBgColorPicker = (0, import_react83.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react84.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("socialBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleSocialStyleChange = (0, import_react83.useCallback)((value) => {
+  const handleSocialStyleChange = (0, import_react84.useCallback)((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24830,7 +24611,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconSizeChange = (0, import_react83.useCallback)((value) => {
+  const handleIconSizeChange = (0, import_react84.useCallback)((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24845,7 +24626,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconStyleChange = (0, import_react83.useCallback)((value) => {
+  const handleIconStyleChange = (0, import_react84.useCallback)((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24860,7 +24641,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconColorChange = (0, import_react83.useCallback)((value) => {
+  const handleIconColorChange = (0, import_react84.useCallback)((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24875,7 +24656,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleSetFontFamily = (0, import_react83.useCallback)((font) => {
+  const handleSetFontFamily = (0, import_react84.useCallback)((font) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24886,7 +24667,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleFontSizeChange = (0, import_react83.useCallback)((size) => {
+  const handleFontSizeChange = (0, import_react84.useCallback)((size) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24897,12 +24678,12 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleOpenTextColorPicker = (0, import_react83.useCallback)(() => {
+  const handleOpenTextColorPicker = (0, import_react84.useCallback)(() => {
     setColorType("Text Color");
     setColorTarget("socialTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = (0, import_react83.useCallback)(() => {
+  const handleToggleBold = (0, import_react84.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24914,7 +24695,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isBold, updateElement]);
-  const handleToggleItalic = (0, import_react83.useCallback)(() => {
+  const handleToggleItalic = (0, import_react84.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24926,7 +24707,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isItalic, updateElement]);
-  const handleToggleUnderline = (0, import_react83.useCallback)(() => {
+  const handleToggleUnderline = (0, import_react84.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24944,7 +24725,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isUnderline, updateElement]);
-  const handleToggleStrike = (0, import_react83.useCallback)(() => {
+  const handleToggleStrike = (0, import_react84.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24962,7 +24743,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isStrikethrough, updateElement]);
-  const handleModeChange = (0, import_react83.useCallback)((mode) => {
+  const handleModeChange = (0, import_react84.useCallback)((mode) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24973,7 +24754,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleCycleAlign = (0, import_react83.useCallback)(() => {
+  const handleCycleAlign = (0, import_react84.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -24992,7 +24773,7 @@ var SocialToolbar = () => {
       children: updatedChildren
     });
   }, [focusIdx, currentAlign, updateElement]);
-  const handleCycleSocialItemAlign = (0, import_react83.useCallback)(() => {
+  const handleCycleSocialItemAlign = (0, import_react84.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25240,7 +25021,7 @@ init_tooltip();
 var import_lucide_react68 = require("lucide-react");
 init_editor();
 init_idx();
-var import_react84 = require("react");
+var import_react85 = require("react");
 init_sidebar_context();
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var ALIGNMENTS3 = ["left", "center", "right"];
@@ -25257,33 +25038,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 = (0, import_react84.useMemo)(() => {
+  const currentFontFamily = (0, import_react85.useMemo)(() => {
     return socialItemElement?.attributes?.["font-family"] || "Arial";
   }, [socialItemElement]);
-  const currentFontSize = (0, import_react84.useMemo)(() => {
+  const currentFontSize = (0, import_react85.useMemo)(() => {
     return parseFontSize(socialItemElement?.attributes?.["font-size"]);
   }, [socialItemElement]);
-  const currentTextColor = (0, import_react84.useMemo)(() => {
+  const currentTextColor = (0, import_react85.useMemo)(() => {
     return socialItemElement?.attributes?.["color"] || "#000000";
   }, [socialItemElement]);
-  const isBold = (0, import_react84.useMemo)(() => {
+  const isBold = (0, import_react85.useMemo)(() => {
     return socialItemElement?.attributes?.["font-weight"] === "bold";
   }, [socialItemElement]);
-  const isItalic = (0, import_react84.useMemo)(() => {
+  const isItalic = (0, import_react85.useMemo)(() => {
     return socialItemElement?.attributes?.["font-style"] === "italic";
   }, [socialItemElement]);
-  const isUnderline = (0, import_react84.useMemo)(() => {
+  const isUnderline = (0, import_react85.useMemo)(() => {
     const decoration = socialItemElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("underline");
   }, [socialItemElement]);
-  const isStrikethrough = (0, import_react84.useMemo)(() => {
+  const isStrikethrough = (0, import_react85.useMemo)(() => {
     const decoration = socialItemElement?.attributes?.["text-decoration"] || "";
     return decoration.includes("line-through");
   }, [socialItemElement]);
-  const currentAlign = (0, import_react84.useMemo)(() => {
+  const currentAlign = (0, import_react85.useMemo)(() => {
     return socialItemElement?.attributes?.["align"] || "center";
   }, [socialItemElement]);
-  const handleSetFontFamily = (0, import_react84.useCallback)((font) => {
+  const handleSetFontFamily = (0, import_react85.useCallback)((font) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25294,7 +25075,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleFontSizeChange = (0, import_react84.useCallback)((size) => {
+  const handleFontSizeChange = (0, import_react85.useCallback)((size) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25305,12 +25086,12 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleOpenTextColorPicker = (0, import_react84.useCallback)(() => {
+  const handleOpenTextColorPicker = (0, import_react85.useCallback)(() => {
     setColorType("Text Color");
     setColorTarget("socialItemTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = (0, import_react84.useCallback)(() => {
+  const handleToggleBold = (0, import_react85.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25322,7 +25103,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isBold, updateElement]);
-  const handleToggleItalic = (0, import_react84.useCallback)(() => {
+  const handleToggleItalic = (0, import_react85.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25334,7 +25115,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isItalic, updateElement]);
-  const handleToggleUnderline = (0, import_react84.useCallback)(() => {
+  const handleToggleUnderline = (0, import_react85.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25352,7 +25133,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isUnderline, updateElement]);
-  const handleToggleStrike = (0, import_react84.useCallback)(() => {
+  const handleToggleStrike = (0, import_react85.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25370,7 +25151,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isStrikethrough, updateElement]);
-  const handleRemoveFormatting = (0, import_react84.useCallback)(() => {
+  const handleRemoveFormatting = (0, import_react85.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25388,7 +25169,7 @@ var SocialItemToolbar = () => {
       attributes: restAttributes
     });
   }, [focusIdx, updateElement]);
-  const handleCycleAlign = (0, import_react84.useCallback)(() => {
+  const handleCycleAlign = (0, import_react85.useCallback)(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -25544,7 +25325,7 @@ init_label();
 init_popover();
 init_tooltip();
 var import_lucide_react69 = require("lucide-react");
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 var StrokeWeight2 = ({
   width,
@@ -25553,34 +25334,11 @@ var StrokeWeight2 = ({
   onStyleChange,
   tooltipText = "Stroke Weight"
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react85.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react85.useState)(width.toString());
-  (0, import_react85.useEffect)(() => {
-    setInputValue(width.toString());
-  }, [width]);
-  const handleSliderChange = (0, import_react85.useCallback)((values) => {
-    const newWidth = values[0];
-    setInputValue(newWidth.toString());
-    onWidthChange(newWidth);
+  const [isOpen, setIsOpen] = (0, import_react86.useState)(false);
+  const input = useEditableNumber({ value: width, onChange: onWidthChange, min: 1, max: 50 });
+  const handleSliderChange = (0, import_react86.useCallback)((values) => {
+    onWidthChange(values[0]);
   }, [onWidthChange]);
-  const handleInputChange = (0, import_react85.useCallback)((e) => {
-    setInputValue(e.target.value);
-  }, []);
-  const handleInputBlur = (0, import_react85.useCallback)(() => {
-    const parsed = parseInt(inputValue, 10);
-    if (isNaN(parsed)) {
-      setInputValue(width.toString());
-      return;
-    }
-    const clamped = Math.max(1, Math.min(50, parsed));
-    setInputValue(clamped.toString());
-    onWidthChange(clamped);
-  }, [inputValue, width, onWidthChange]);
-  const handleInputKeyDown = (0, import_react85.useCallback)((e) => {
-    if (e.key === "Enter") {
-      handleInputBlur();
-    }
-  }, [handleInputBlur]);
   return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
@@ -25646,10 +25404,11 @@ var StrokeWeight2 = ({
               Input,
               {
                 type: "number",
-                value: inputValue,
-                onChange: handleInputChange,
-                onBlur: handleInputBlur,
-                onKeyDown: handleInputKeyDown,
+                value: input.displayValue,
+                onChange: (e) => input.setLocalValue(e.target.value),
+                onFocus: input.handleFocus,
+                onBlur: input.handleBlur,
+                onKeyDown: input.handleKeyDown,
                 className: "w-25 shadow-none rounded-[12px]",
                 min: 1,
                 max: 50
@@ -25664,12 +25423,12 @@ var StrokeWeight2 = ({
 };
 
 // src/core/editor/hooks/use-divider-border.ts
-var import_react86 = require("react");
+var import_react87 = require("react");
 init_editor();
 init_idx();
 var useDividerBorder = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const { element, width, style, color } = (0, import_react86.useMemo)(() => {
+  const { element, width, style, color } = (0, import_react87.useMemo)(() => {
     if (!focusIdx || !template) {
       return { element: null, width: 1, style: "solid", color: "#000000" };
     }
@@ -25687,7 +25446,7 @@ var useDividerBorder = () => {
       color: rawColor
     };
   }, [focusIdx, template]);
-  const setWidth = (0, import_react86.useCallback)((newWidth) => {
+  const setWidth = (0, import_react87.useCallback)((newWidth) => {
     if (!focusIdx || !template || !element) return;
     const clampedWidth = Math.max(1, Math.min(50, newWidth));
     updateElement(focusIdx, {
@@ -25697,7 +25456,7 @@ var useDividerBorder = () => {
       }
     });
   }, [focusIdx, template, element, updateElement]);
-  const setStyle = (0, import_react86.useCallback)((newStyle) => {
+  const setStyle = (0, import_react87.useCallback)((newStyle) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: {
@@ -25716,12 +25475,12 @@ var useDividerBorder = () => {
 };
 
 // src/core/editor/hooks/use-width.ts
-var import_react87 = require("react");
+var import_react88 = require("react");
 init_editor();
 init_idx();
 var useWidth = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
-  const currentValue = (0, import_react87.useMemo)(() => {
+  const currentValue = (0, import_react88.useMemo)(() => {
     if (!focusIdx || !template) return 100;
     const element = getValueByIdx(template, focusIdx);
     const rawValue = element?.attributes?.width;
@@ -25729,7 +25488,7 @@ var useWidth = () => {
     const parsed = parseFloat(rawValue.replace("%", ""));
     return isNaN(parsed) ? 100 : Math.max(10, Math.min(100, parsed));
   }, [focusIdx, template]);
-  const handleChange = (0, import_react87.useCallback)((value) => {
+  const handleChange = (0, import_react88.useCallback)((value) => {
     if (!focusIdx || !template) return;
     const element = getValueByIdx(template, focusIdx);
     if (!element) return;
@@ -25750,7 +25509,7 @@ var useWidth = () => {
 // src/core/editor/components/element-gear/divider/toolbar.tsx
 init_editor();
 init_sidebar_context();
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_get4 = __toESM(require("lodash/get"));
 init_configuration();
 var import_jsx_runtime116 = require("react/jsx-runtime");
@@ -25761,24 +25520,24 @@ var DividerToolbar = () => {
   const border = useDividerBorder();
   const padding = usePadding();
   const width = useWidth();
-  const currentElement = (0, import_react88.useMemo)(() => {
+  const currentElement = (0, import_react89.useMemo)(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return (0, import_get4.default)(template, path);
   }, [focusIdx, template]);
   const currentAlign = currentElement?.attributes?.align || "center";
   const currentBgColor = currentElement?.attributes?.["container-background-color"];
-  const handleOpenBgColorPicker = (0, import_react88.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react89.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("dividerBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react88.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react89.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("dividerBorderColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleCycleAlign = (0, import_react88.useCallback)(() => {
+  const handleCycleAlign = (0, import_react89.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = DIVIDER_ALIGNMENTS.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % DIVIDER_ALIGNMENTS.length;
@@ -25851,7 +25610,7 @@ var DividerToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/image/toolbar.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 init_button();
 init_tooltip();
 init_editor();
@@ -25862,31 +25621,31 @@ var import_jsx_runtime117 = require("react/jsx-runtime");
 var ImageToolbar = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const currentElement = (0, import_react89.useMemo)(() => {
+  const currentElement = (0, import_react90.useMemo)(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     return (0, import_lodash19.get)(template, path);
   }, [focusIdx, template]);
-  const currentBgColor = (0, import_react89.useMemo)(() => {
+  const currentBgColor = (0, import_react90.useMemo)(() => {
     return currentElement?.attributes?.["container-background-color"];
   }, [currentElement]);
-  const currentAlign = (0, import_react89.useMemo)(() => {
+  const currentAlign = (0, import_react90.useMemo)(() => {
     return currentElement?.attributes?.["align"] || "center";
   }, [currentElement]);
   const border = useBorder();
   const borderRadius = useBorderRadius();
   const padding = usePadding();
-  const handleOpenBgColorPicker = (0, import_react89.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react90.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("imageBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react89.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react90.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleCycleAlign = (0, import_react89.useCallback)(() => {
+  const handleCycleAlign = (0, import_react90.useCallback)(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -25969,7 +25728,7 @@ var ImageToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/property/toolbar.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 init_sidebar_context();
 init_editor();
 init_idx();
@@ -25982,7 +25741,7 @@ init_button();
 var import_lucide_react71 = require("lucide-react");
 init_popover();
 init_tooltip();
-var import_react90 = require("react");
+var import_react91 = require("react");
 init_input();
 init_textarea();
 
@@ -26071,247 +25830,94 @@ var CARD_FEATURES = {
 var PropertyEditMenu = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [isOpen, setIsOpen] = (0, import_react90.useState)(false);
-  const [openSection, setOpenSection] = (0, import_react90.useState)(null);
-  const [openhouseEnabled, setOpenhouseEnabled] = (0, import_react90.useState)(true);
-  const [openhouseDate, setOpenhouseDate] = (0, import_react90.useState)(/* @__PURE__ */ new Date());
-  const [openhouseStartTime, setOpenhouseStartTime] = (0, import_react90.useState)("12:00");
-  const [openhouseEndTime, setOpenhouseEndTime] = (0, import_react90.useState)("13:00");
-  const propertyElement = (0, import_react90.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react91.useState)(false);
+  const [openSection, setOpenSection] = (0, import_react91.useState)(null);
+  const [openhouseDate, setOpenhouseDate] = (0, import_react91.useState)(/* @__PURE__ */ new Date());
+  const [openhouseStartTime, setOpenhouseStartTime] = (0, import_react91.useState)("12:00");
+  const [openhouseEndTime, setOpenhouseEndTime] = (0, import_react91.useState)("13:00");
+  const [addressLine1Input, setAddressLine1Input] = (0, import_react91.useState)("");
+  const [addressLine2Input, setAddressLine2Input] = (0, import_react91.useState)("");
+  const [cityInput, setCityInput] = (0, import_react91.useState)("");
+  const [stateInput, setStateInput] = (0, import_react91.useState)("");
+  const [zipInput, setZipInput] = (0, import_react91.useState)("");
+  const propertyElement = (0, import_react91.useMemo)(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
   }, [focusIdx, template]);
   const cardType = propertyElement?.type;
   const features = cardType ? CARD_FEATURES[cardType] : null;
-  const currentPrice = (0, import_react90.useMemo)(() => {
+  const currentPrice = (0, import_react91.useMemo)(() => {
     const rawPrice = propertyElement?.attributes?.["price"] || "";
     return parsePrice(rawPrice);
   }, [propertyElement]);
-  const [priceInput, setPriceInput] = (0, import_react90.useState)(currentPrice);
-  (0, import_react90.useEffect)(() => {
-    setPriceInput(currentPrice);
-  }, [currentPrice]);
-  const handlePriceBlur = (0, import_react90.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (priceInput === currentPrice) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "price": priceInput
-      }
-    });
-  }, [focusIdx, propertyElement, priceInput, currentPrice, updateElement]);
-  const currentBeds = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
-  const currentBaths = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
-  const currentSqft = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
-  const currentDescription = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["description"] || "", [propertyElement]);
-  const currentIsDescription = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["is-description"] || "", [propertyElement]);
-  const currentBrokerage = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["brokerage"] || "", [propertyElement]);
-  const currentIsBrokerage = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["is-brokerage"] || "", [propertyElement]);
-  const currentStatus = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["status"] || "", [propertyElement]);
-  const currentIsStatus = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["is-status"] || "", [propertyElement]);
-  const currentIsNew = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["is-new"] || "", [propertyElement]);
-  const currentStatusColor = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["status-color"] || "#B8B8B8", [propertyElement]);
-  const currentIsOpenHouse = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["is-open-house"] || "", [propertyElement]);
-  const currentOpenHouseDate = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["open-house-date"] || "", [propertyElement]);
-  const currentOpenHouseTime = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["open-house-time"] || "", [propertyElement]);
-  const currentAddress = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["address"] || "", [propertyElement]);
-  const currentCity = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
-  const currentCountry = (0, import_react90.useMemo)(() => propertyElement?.attributes?.["country"] || "USA", [propertyElement]);
-  const [bedsInput, setBedsInput] = (0, import_react90.useState)(currentBeds);
-  const [bathsInput, setBathsInput] = (0, import_react90.useState)(currentBaths);
-  const [sqftInput, setSqftInput] = (0, import_react90.useState)(currentSqft);
-  const [descriptionInput, setDescriptionInput] = (0, import_react90.useState)(currentDescription);
-  const [isDescriptionEnabled, setIsDescriptionEnabled] = (0, import_react90.useState)(!!currentIsDescription);
-  const [brokerageInput, setBrokerageInput] = (0, import_react90.useState)(currentBrokerage);
-  const [isBrokerageEnabled, setIsBrokerageEnabled] = (0, import_react90.useState)(!!currentIsBrokerage);
-  const [statusInput, setStatusInput] = (0, import_react90.useState)(currentStatus);
-  const [isStatusEnabled, setIsStatusEnabled] = (0, import_react90.useState)(!!currentIsStatus);
-  const [isNewEnabled, setIsNewEnabled] = (0, import_react90.useState)(!!currentIsNew);
-  const [addressLine1Input, setAddressLine1Input] = (0, import_react90.useState)("");
-  const [addressLine2Input, setAddressLine2Input] = (0, import_react90.useState)("");
-  const [cityInput, setCityInput] = (0, import_react90.useState)("");
-  const [stateInput, setStateInput] = (0, import_react90.useState)("");
-  const [zipInput, setZipInput] = (0, import_react90.useState)("");
-  const [countryInput, setCountryInput] = (0, import_react90.useState)("USA");
-  (0, import_react90.useEffect)(() => {
-    setBedsInput(currentBeds);
-  }, [currentBeds]);
-  (0, import_react90.useEffect)(() => {
-    setBathsInput(currentBaths);
-  }, [currentBaths]);
-  (0, import_react90.useEffect)(() => {
-    setSqftInput(currentSqft);
-  }, [currentSqft]);
-  (0, import_react90.useEffect)(() => {
-    setDescriptionInput(currentDescription);
-  }, [currentDescription]);
-  (0, import_react90.useEffect)(() => {
-    setIsDescriptionEnabled(!!currentIsDescription);
-  }, [currentIsDescription]);
-  (0, import_react90.useEffect)(() => {
-    setBrokerageInput(currentBrokerage);
-  }, [currentBrokerage]);
-  (0, import_react90.useEffect)(() => {
-    setIsBrokerageEnabled(!!currentIsBrokerage);
-  }, [currentIsBrokerage]);
-  (0, import_react90.useEffect)(() => {
-    setStatusInput(currentStatus);
-  }, [currentStatus]);
-  (0, import_react90.useEffect)(() => {
-    setIsStatusEnabled(!!currentIsStatus);
-  }, [currentIsStatus]);
-  (0, import_react90.useEffect)(() => {
-    setIsNewEnabled(!!currentIsNew);
-  }, [currentIsNew]);
-  (0, import_react90.useEffect)(() => {
-    setOpenhouseEnabled(!!currentIsOpenHouse);
-  }, [currentIsOpenHouse]);
-  (0, import_react90.useEffect)(() => {
-    if (currentOpenHouseDate) {
-      const parsed = new Date(currentOpenHouseDate);
-      if (!isNaN(parsed.getTime())) {
-        setOpenhouseDate(parsed);
-      }
-    }
-  }, [currentOpenHouseDate]);
-  (0, import_react90.useEffect)(() => {
-    if (currentOpenHouseTime) {
-      const [start, end] = currentOpenHouseTime.split("-");
-      if (start) setOpenhouseStartTime(start);
-      if (end) setOpenhouseEndTime(end);
-    }
-  }, [currentOpenHouseTime]);
-  (0, import_react90.useEffect)(() => {
-    setAddressLine1Input(currentAddress);
-    setAddressLine2Input("");
-  }, [currentAddress]);
-  (0, import_react90.useEffect)(() => {
-    const match = currentCity.match(/^(.+),\s*(\w{2})\s*(\d{5})?$/);
-    if (match) {
-      setCityInput(match[1] || "");
-      setStateInput(match[2] || "");
-      setZipInput(match[3] || "");
-    } else {
-      setCityInput(currentCity);
-      setStateInput("");
-      setZipInput("");
-    }
-  }, [currentCity]);
-  (0, import_react90.useEffect)(() => {
-    setCountryInput(currentCountry);
-  }, [currentCountry]);
-  const handleBedsBlur = (0, import_react90.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (bedsInput === currentBeds) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "beds": bedsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bedsInput, currentBeds, updateElement]);
-  const handleBathsBlur = (0, import_react90.useCallback)(() => {
+  const currentBeds = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
+  const currentBaths = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
+  const currentSqft = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
+  const currentDescription = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["description"] || "", [propertyElement]);
+  const currentIsDescription = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["is-description"] || "", [propertyElement]);
+  const currentBrokerage = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["brokerage"] || "", [propertyElement]);
+  const currentIsBrokerage = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["is-brokerage"] || "", [propertyElement]);
+  const currentStatus = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["status"] || "", [propertyElement]);
+  const currentIsStatus = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["is-status"] || "", [propertyElement]);
+  const currentIsNew = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["is-new"] || "", [propertyElement]);
+  const currentStatusColor = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["status-color"] || "#B8B8B8", [propertyElement]);
+  const currentIsOpenHouse = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["is-open-house"] || "", [propertyElement]);
+  const currentOpenHouseDate = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["open-house-date"] || "", [propertyElement]);
+  const currentOpenHouseTime = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["open-house-time"] || "", [propertyElement]);
+  const currentAddress = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["address"] || "", [propertyElement]);
+  const currentCity = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
+  const currentCountry = (0, import_react91.useMemo)(() => propertyElement?.attributes?.["country"] || "USA", [propertyElement]);
+  const commitAttribute = (0, import_react91.useCallback)((key, value) => {
     if (!focusIdx || !propertyElement) return;
-    if (bathsInput === currentBaths) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "baths": bathsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bathsInput, currentBaths, updateElement]);
-  const handleSqftBlur = (0, import_react90.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (sqftInput === currentSqft) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "sqft": sqftInput
-      }
-    });
-  }, [focusIdx, propertyElement, sqftInput, currentSqft, updateElement]);
-  const handleDescriptionBlur = (0, import_react90.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (descriptionInput === currentDescription) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "description": descriptionInput
-      }
-    });
-  }, [focusIdx, propertyElement, descriptionInput, currentDescription, updateElement]);
-  const handleIsDescriptionChange = (0, import_react90.useCallback)((checked) => {
-    setIsDescriptionEnabled(checked);
-    if (!focusIdx || !propertyElement) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "is-description": checked ? "show" : ""
-      }
+      attributes: { ...propertyElement.attributes, [key]: value }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleBrokerageBlur = (0, import_react90.useCallback)(() => {
+  const commitPrice = (0, import_react91.useCallback)((v) => commitAttribute("price", v), [commitAttribute]);
+  const commitBeds = (0, import_react91.useCallback)((v) => commitAttribute("beds", v), [commitAttribute]);
+  const commitBaths = (0, import_react91.useCallback)((v) => commitAttribute("baths", v), [commitAttribute]);
+  const commitSqft = (0, import_react91.useCallback)((v) => commitAttribute("sqft", v), [commitAttribute]);
+  const commitDescription = (0, import_react91.useCallback)((v) => commitAttribute("description", v), [commitAttribute]);
+  const commitBrokerage = (0, import_react91.useCallback)((v) => commitAttribute("brokerage", v), [commitAttribute]);
+  const commitStatus = (0, import_react91.useCallback)((v) => commitAttribute("status", v), [commitAttribute]);
+  const priceInput = useEditableValue({ externalValue: currentPrice, onChange: commitPrice });
+  const bedsInput = useEditableValue({ externalValue: currentBeds, onChange: commitBeds });
+  const bathsInput = useEditableValue({ externalValue: currentBaths, onChange: commitBaths });
+  const sqftInput = useEditableValue({ externalValue: currentSqft, onChange: commitSqft });
+  const descriptionInput = useEditableValue({ externalValue: currentDescription, onChange: commitDescription });
+  const brokerageInput = useEditableValue({ externalValue: currentBrokerage, onChange: commitBrokerage });
+  const statusInput = useEditableValue({ externalValue: currentStatus, onChange: commitStatus });
+  const handleIsDescriptionChange = (0, import_react91.useCallback)((checked) => {
     if (!focusIdx || !propertyElement) return;
-    if (brokerageInput === currentBrokerage) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "brokerage": brokerageInput
-      }
-    });
-  }, [focusIdx, propertyElement, brokerageInput, currentBrokerage, updateElement]);
-  const handleIsBrokerageChange = (0, import_react90.useCallback)((checked) => {
-    setIsBrokerageEnabled(checked);
-    if (!focusIdx || !propertyElement) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "is-brokerage": checked ? "show" : ""
-      }
+      attributes: { ...propertyElement.attributes, "is-description": checked ? "show" : "" }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleStatusBlur = (0, import_react90.useCallback)(() => {
+  const handleIsBrokerageChange = (0, import_react91.useCallback)((checked) => {
     if (!focusIdx || !propertyElement) return;
-    if (statusInput === currentStatus) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "status": statusInput
-      }
+      attributes: { ...propertyElement.attributes, "is-brokerage": checked ? "show" : "" }
     });
-  }, [focusIdx, propertyElement, statusInput, currentStatus, updateElement]);
-  const handleIsStatusChange = (0, import_react90.useCallback)((checked) => {
-    setIsStatusEnabled(checked);
+  }, [focusIdx, propertyElement, updateElement]);
+  const handleIsStatusChange = (0, import_react91.useCallback)((checked) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "is-status": checked ? "show" : ""
-      }
+      attributes: { ...propertyElement.attributes, "is-status": checked ? "show" : "" }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleIsNewChange = (0, import_react90.useCallback)((checked) => {
-    setIsNewEnabled(checked);
+  const handleIsNewChange = (0, import_react91.useCallback)((checked) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "is-new": checked ? "show" : ""
-      }
+      attributes: { ...propertyElement.attributes, "is-new": checked ? "show" : "" }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleIsOpenHouseChange = (0, import_react90.useCallback)((checked) => {
-    setOpenhouseEnabled(checked);
+  const handleIsOpenHouseChange = (0, import_react91.useCallback)((checked) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "is-open-house": checked ? "show" : ""
-      }
+      attributes: { ...propertyElement.attributes, "is-open-house": checked ? "show" : "" }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleOpenHouseDateBlur = (0, import_react90.useCallback)(() => {
+  const handleOpenHouseDateBlur = (0, import_react91.useCallback)(() => {
     if (!focusIdx || !propertyElement) return;
     const newDate = openhouseDate ? openhouseDate.toISOString().split("T")[0] : "";
     if (newDate === currentOpenHouseDate) return;
@@ -26322,7 +25928,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, openhouseDate, currentOpenHouseDate, updateElement]);
-  const handleOpenHouseTimeBlur = (0, import_react90.useCallback)(() => {
+  const handleOpenHouseTimeBlur = (0, import_react91.useCallback)(() => {
     if (!focusIdx || !propertyElement) return;
     const newTime = `${openhouseStartTime}-${openhouseEndTime}`;
     if (newTime === currentOpenHouseTime) return;
@@ -26333,7 +25939,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, openhouseStartTime, openhouseEndTime, currentOpenHouseTime, updateElement]);
-  const handleAddressBlur = (0, import_react90.useCallback)(() => {
+  const handleAddressBlur = (0, import_react91.useCallback)(() => {
     if (!focusIdx || !propertyElement) return;
     const newAddress = addressLine2Input ? `${addressLine1Input}, ${addressLine2Input}` : addressLine1Input;
     if (newAddress === currentAddress) return;
@@ -26344,7 +25950,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, addressLine1Input, addressLine2Input, currentAddress, updateElement]);
-  const handleCityBlur = (0, import_react90.useCallback)(() => {
+  const handleCityBlur = (0, import_react91.useCallback)(() => {
     if (!focusIdx || !propertyElement) return;
     const newCity = zipInput ? `${cityInput}, ${stateInput} ${zipInput}` : stateInput ? `${cityInput}, ${stateInput}` : cityInput;
     if (newCity === currentCity) return;
@@ -26355,41 +25961,68 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, cityInput, stateInput, zipInput, currentCity, updateElement]);
-  const handleCountryChange = (0, import_react90.useCallback)((value) => {
-    setCountryInput(value);
+  const handleCountryChange = (0, import_react91.useCallback)((value) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "country": value
-      }
+      attributes: { ...propertyElement.attributes, "country": value }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleOpenStatusColorPicker = (0, import_react90.useCallback)(() => {
+  const handleOpenStatusColorPicker = (0, import_react91.useCallback)(() => {
     setColorType("Status Color");
     setColorTarget("statusColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggle = (0, import_react90.useCallback)((section) => {
+  const handleToggle = (0, import_react91.useCallback)((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleTogglePrice = (0, import_react90.useCallback)(() => handleToggle("price"), [handleToggle]);
-  const handleToggleDetails = (0, import_react90.useCallback)(() => handleToggle("details"), [handleToggle]);
-  const handleToggleAddress = (0, import_react90.useCallback)(() => handleToggle("address"), [handleToggle]);
-  const handleToggleStatus = (0, import_react90.useCallback)(() => handleToggle("status"), [handleToggle]);
-  const handleToggleOpenhouse = (0, import_react90.useCallback)(() => handleToggle("openhouse"), [handleToggle]);
-  const handleToggleBrokerage = (0, import_react90.useCallback)(() => handleToggle("brokerage"), [handleToggle]);
-  const handleToggleDescription = (0, import_react90.useCallback)(() => handleToggle("description"), [handleToggle]);
-  const handleToggleMLS = (0, import_react90.useCallback)(() => handleToggle("mls"), [handleToggle]);
+  const handleTogglePrice = (0, import_react91.useCallback)(() => handleToggle("price"), [handleToggle]);
+  const handleToggleDetails = (0, import_react91.useCallback)(() => handleToggle("details"), [handleToggle]);
+  const handleToggleAddress = (0, import_react91.useCallback)(() => {
+    const isOpening = openSection !== "address";
+    handleToggle("address");
+    if (isOpening) {
+      setAddressLine1Input(currentAddress);
+      setAddressLine2Input("");
+      const match = currentCity.match(/^(.+),\s*(\w{2})\s*(\d{5})?$/);
+      if (match) {
+        setCityInput(match[1] || "");
+        setStateInput(match[2] || "");
+        setZipInput(match[3] || "");
+      } else {
+        setCityInput(currentCity);
+        setStateInput("");
+        setZipInput("");
+      }
+    }
+  }, [handleToggle, openSection, currentAddress, currentCity]);
+  const handleToggleStatus = (0, import_react91.useCallback)(() => handleToggle("status"), [handleToggle]);
+  const handleToggleOpenhouse = (0, import_react91.useCallback)(() => {
+    const isOpening = openSection !== "openhouse";
+    handleToggle("openhouse");
+    if (isOpening) {
+      if (currentOpenHouseDate) {
+        const parsed = new Date(currentOpenHouseDate);
+        if (!isNaN(parsed.getTime())) setOpenhouseDate(parsed);
+      }
+      if (currentOpenHouseTime) {
+        const [start, end] = currentOpenHouseTime.split("-");
+        if (start) setOpenhouseStartTime(start);
+        if (end) setOpenhouseEndTime(end);
+      }
+    }
+  }, [handleToggle, openSection, currentOpenHouseDate, currentOpenHouseTime]);
+  const handleToggleBrokerage = (0, import_react91.useCallback)(() => handleToggle("brokerage"), [handleToggle]);
+  const handleToggleDescription = (0, import_react91.useCallback)(() => handleToggle("description"), [handleToggle]);
+  const handleToggleMLS = (0, import_react91.useCallback)(() => handleToggle("mls"), [handleToggle]);
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_lucide_react71.HouseIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_lucide_react71.SquarePen, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
@@ -26407,9 +26040,11 @@ var PropertyEditMenu = () => {
               type: "number",
               placeholder: "Price",
               className: "w-full shadow-none rounded-[12px]",
-              value: priceInput,
-              onChange: (e) => setPriceInput(e.target.value),
-              onBlur: handlePriceBlur
+              value: priceInput.displayValue,
+              onChange: (e) => priceInput.setLocalValue(e.target.value),
+              onFocus: priceInput.handleFocus,
+              onBlur: priceInput.handleBlur,
+              onKeyDown: priceInput.handleKeyDown
             }
           ) }) })
         ] }),
@@ -26428,9 +26063,11 @@ var PropertyEditMenu = () => {
                 type: "number",
                 placeholder: "Bd",
                 className: "w-1/3 shadow-none rounded-[12px]",
-                value: bedsInput,
-                onChange: (e) => setBedsInput(e.target.value),
-                onBlur: handleBedsBlur
+                value: bedsInput.displayValue,
+                onChange: (e) => bedsInput.setLocalValue(e.target.value),
+                onFocus: bedsInput.handleFocus,
+                onBlur: bedsInput.handleBlur,
+                onKeyDown: bedsInput.handleKeyDown
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
@@ -26439,9 +26076,11 @@ var PropertyEditMenu = () => {
                 type: "number",
                 placeholder: "Ba",
                 className: "w-1/3 shadow-none rounded-[12px]",
-                value: bathsInput,
-                onChange: (e) => setBathsInput(e.target.value),
-                onBlur: handleBathsBlur
+                value: bathsInput.displayValue,
+                onChange: (e) => bathsInput.setLocalValue(e.target.value),
+                onFocus: bathsInput.handleFocus,
+                onBlur: bathsInput.handleBlur,
+                onKeyDown: bathsInput.handleKeyDown
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
@@ -26450,9 +26089,11 @@ var PropertyEditMenu = () => {
                 type: "number",
                 placeholder: "Sqft",
                 className: "w-2/4 shadow-none rounded-[12px]",
-                value: sqftInput,
-                onChange: (e) => setSqftInput(e.target.value),
-                onBlur: handleSqftBlur
+                value: sqftInput.displayValue,
+                onChange: (e) => sqftInput.setLocalValue(e.target.value),
+                onFocus: sqftInput.handleFocus,
+                onBlur: sqftInput.handleBlur,
+                onKeyDown: sqftInput.handleKeyDown
               }
             )
           ] }) })
@@ -26513,7 +26154,7 @@ var PropertyEditMenu = () => {
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-row items-start justify-start gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(Select, { value: countryInput, onValueChange: handleCountryChange, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(Select, { value: currentCountry, onValueChange: handleCountryChange, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(SelectTrigger, { className: "w-3/4 shadow-none rounded-[12px]", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(SelectValue, { placeholder: "Country" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(SelectContent, { className: "w-full shadow-none rounded-[12px] z-50001", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(SelectItem, { value: "USA", children: "United States" }) })
               ] }),
@@ -26543,11 +26184,11 @@ var PropertyEditMenu = () => {
                   Checkbox,
                   {
                     className: " shadow-none rounded-[12px] w-9 h-9",
-                    checked: isStatusEnabled,
+                    checked: !!currentIsStatus,
                     onCheckedChange: (checked) => handleIsStatusChange(checked === "indeterminate" ? false : checked)
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: isStatusEnabled ? "Hide Status" : "Show Status" })
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsStatus ? "Hide Status" : "Show Status" })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 BackgroundColorBtn,
@@ -26561,13 +26202,15 @@ var PropertyEditMenu = () => {
               /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 Input,
                 {
-                  disabled: !isStatusEnabled,
+                  disabled: !currentIsStatus,
                   type: "text",
                   placeholder: "Just Listed",
                   className: "w-full shadow-none rounded-[12px]",
-                  value: statusInput,
-                  onChange: (e) => setStatusInput(e.target.value),
-                  onBlur: handleStatusBlur
+                  value: statusInput.displayValue,
+                  onChange: (e) => statusInput.setLocalValue(e.target.value),
+                  onFocus: statusInput.handleFocus,
+                  onBlur: statusInput.handleBlur,
+                  onKeyDown: statusInput.handleKeyDown
                 }
               )
             ] }),
@@ -26578,7 +26221,7 @@ var PropertyEditMenu = () => {
                 "aria-label": "Toggle new label",
                 size: "sm",
                 variant: "outline",
-                pressed: isNewEnabled,
+                pressed: !!currentIsNew,
                 onPressedChange: handleIsNewChange,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_lucide_react71.CircleCheckIcon, { className: "group-aria-pressed/toggle:fill-foreground" }),
@@ -26600,16 +26243,16 @@ var PropertyEditMenu = () => {
                   Checkbox,
                   {
                     className: "shadow-none rounded-[12px] w-9 h-9",
-                    checked: openhouseEnabled,
+                    checked: !!currentIsOpenHouse,
                     onCheckedChange: (checked) => handleIsOpenHouseChange(checked === "indeterminate" ? false : checked)
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: openhouseEnabled ? "Disable Open House" : "Enable Open House" })
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsOpenHouse ? "Disable Open House" : "Enable Open House" })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 Input,
                 {
-                  disabled: !openhouseEnabled,
+                  disabled: !currentIsOpenHouse,
                   type: "date",
                   value: openhouseDate ? openhouseDate.toISOString().split("T")[0] : "",
                   onChange: (e) => setOpenhouseDate(e.target.value ? new Date(e.target.value) : void 0),
@@ -26622,7 +26265,7 @@ var PropertyEditMenu = () => {
               /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 Input,
                 {
-                  disabled: !openhouseEnabled,
+                  disabled: !currentIsOpenHouse,
                   type: "time",
                   value: openhouseStartTime,
                   onChange: (e) => setOpenhouseStartTime(e.target.value),
@@ -26633,7 +26276,7 @@ var PropertyEditMenu = () => {
               /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 Input,
                 {
-                  disabled: !openhouseEnabled,
+                  disabled: !currentIsOpenHouse,
                   type: "time",
                   value: openhouseEndTime,
                   onChange: (e) => setOpenhouseEndTime(e.target.value),
@@ -26656,22 +26299,24 @@ var PropertyEditMenu = () => {
                   Checkbox,
                   {
                     className: "shadow-none rounded-[12px] w-9 h-9",
-                    checked: isBrokerageEnabled,
+                    checked: !!currentIsBrokerage,
                     onCheckedChange: (checked) => handleIsBrokerageChange(checked === "indeterminate" ? false : checked)
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: isBrokerageEnabled ? "Hide Brokerage" : "Show Brokerage" })
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsBrokerage ? "Hide Brokerage" : "Show Brokerage" })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 Input,
                 {
-                  disabled: !isBrokerageEnabled,
+                  disabled: !currentIsBrokerage,
                   type: "text",
                   placeholder: "New Era Real Estate",
                   className: "w-full shadow-none rounded-[12px]",
-                  value: brokerageInput,
-                  onChange: (e) => setBrokerageInput(e.target.value),
-                  onBlur: handleBrokerageBlur
+                  value: brokerageInput.displayValue,
+                  onChange: (e) => brokerageInput.setLocalValue(e.target.value),
+                  onFocus: brokerageInput.handleFocus,
+                  onBlur: brokerageInput.handleBlur,
+                  onKeyDown: brokerageInput.handleKeyDown
                 }
               )
             ] }),
@@ -26689,28 +26334,29 @@ var PropertyEditMenu = () => {
                 Checkbox,
                 {
                   className: "shadow-none rounded-[12px] w-9 h-9",
-                  checked: isDescriptionEnabled,
+                  checked: !!currentIsDescription,
                   onCheckedChange: (checked) => handleIsDescriptionChange(checked === "indeterminate" ? false : checked)
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: isDescriptionEnabled ? "Hide Description" : "Show Description" })
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsDescription ? "Hide Description" : "Show Description" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
               Textarea,
               {
-                disabled: !isDescriptionEnabled,
+                disabled: !currentIsDescription,
                 placeholder: "Beautiful home in the heart of the New Jersey Shore",
                 className: "w-full shadow-none rounded-[12px] min-h-fit max-h-34",
-                value: descriptionInput,
-                onChange: (e) => setDescriptionInput(e.target.value),
-                onBlur: handleDescriptionBlur
+                value: descriptionInput.displayValue,
+                onChange: (e) => descriptionInput.setLocalValue(e.target.value),
+                onFocus: descriptionInput.handleFocus,
+                onBlur: descriptionInput.handleBlur
               }
             )
           ] }) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: "Information" })
   ] });
 };
 
@@ -26720,51 +26366,51 @@ var import_jsx_runtime121 = require("react/jsx-runtime");
 function PropertyToolbar() {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const columnIdx = (0, import_react91.useMemo)(() => {
+  const columnIdx = (0, import_react92.useMemo)(() => {
     if (!focusIdx) return null;
     return getParentIdx(focusIdx);
   }, [focusIdx]);
-  const columnElement = (0, import_react91.useMemo)(() => {
+  const columnElement = (0, import_react92.useMemo)(() => {
     if (!columnIdx || !template) return null;
     return getValueByIdx(template, columnIdx);
   }, [columnIdx, template]);
-  const propertyElement = (0, import_react91.useMemo)(() => {
+  const propertyElement = (0, import_react92.useMemo)(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
   }, [focusIdx, template]);
-  const currentBgColor = (0, import_react91.useMemo)(() => {
+  const currentBgColor = (0, import_react92.useMemo)(() => {
     return columnElement?.attributes?.["background-color"] || "transparent";
   }, [columnElement]);
-  const border = (0, import_react91.useMemo)(() => {
+  const border = (0, import_react92.useMemo)(() => {
     const rawBorder = columnElement?.attributes?.["border"];
     return parseBorder(rawBorder);
   }, [columnElement]);
-  const borderRadiusValue = (0, import_react91.useMemo)(() => {
+  const borderRadiusValue = (0, import_react92.useMemo)(() => {
     const rawRadius = columnElement?.attributes?.["border-radius"];
     return parseBorderRadius(rawRadius);
   }, [columnElement]);
-  const currentFontFamily = (0, import_react91.useMemo)(() => {
+  const currentFontFamily = (0, import_react92.useMemo)(() => {
     return propertyElement?.attributes?.["font-family"] || "Arial, sans-serif";
   }, [propertyElement]);
-  const currentTextColor = (0, import_react91.useMemo)(() => {
+  const currentTextColor = (0, import_react92.useMemo)(() => {
     return propertyElement?.attributes?.["text-color"] || "#111116";
   }, [propertyElement]);
-  const handleOpenBgColorPicker = (0, import_react91.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react92.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("propertyBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react91.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react92.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("propertyStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = (0, import_react91.useCallback)(() => {
+  const handleOpenTextColorPicker = (0, import_react92.useCallback)(() => {
     setColorType("Text Color");
     setColorTarget("propertyTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleFontChange = (0, import_react91.useCallback)((font) => {
+  const handleFontChange = (0, import_react92.useCallback)((font) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
       attributes: {
@@ -26773,7 +26419,7 @@ function PropertyToolbar() {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleBorderWidthChange = (0, import_react91.useCallback)((width) => {
+  const handleBorderWidthChange = (0, import_react92.useCallback)((width) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const newBorder = { ...border, width };
     const formattedBorder = formatBorder(newBorder);
@@ -26790,7 +26436,7 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, border, updateElement]);
-  const handleBorderEnabledChange = (0, import_react91.useCallback)((enabled) => {
+  const handleBorderEnabledChange = (0, import_react92.useCallback)((enabled) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const newWidth = enabled ? border.width === 0 ? 1 : border.width : 0;
     const newBorder = { ...border, width: newWidth };
@@ -26808,7 +26454,7 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, border, updateElement]);
-  const handleBorderRadiusChange = (0, import_react91.useCallback)((value) => {
+  const handleBorderRadiusChange = (0, import_react92.useCallback)((value) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const formattedRadius = formatBorderRadius(value);
     updateElement(columnIdx, {
@@ -26838,6 +26484,7 @@ function PropertyToolbar() {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ImageMenu, { type: "property" }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PropertyEditMenu, {}),
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ToolbarSeparator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ToolbarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
         FontFamilyDropdown,
@@ -26908,15 +26555,13 @@ function PropertyToolbar() {
           tooltipText: "Corner Rounding",
           max: 18
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ToolbarSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PropertyEditMenu, {})
+      )
     ] })
   ] });
 }
 
 // src/core/editor/components/element-gear/property/triple/toolbar.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 init_sidebar_context();
 init_editor();
 init_idx();
@@ -26927,7 +26572,7 @@ init_button();
 var import_lucide_react73 = require("lucide-react");
 init_popover();
 init_tooltip();
-var import_react92 = require("react");
+var import_react93 = require("react");
 init_input();
 init_editor();
 init_idx();
@@ -26935,105 +26580,51 @@ init_format();
 var import_jsx_runtime122 = require("react/jsx-runtime");
 var PropertyTripleEditMenu = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const [isOpen, setIsOpen] = (0, import_react92.useState)(false);
-  const [openSection, setOpenSection] = (0, import_react92.useState)(null);
-  const propertyElement = (0, import_react92.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react93.useState)(false);
+  const [openSection, setOpenSection] = (0, import_react93.useState)(null);
+  const propertyElement = (0, import_react93.useMemo)(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
   }, [focusIdx, template]);
-  const currentPrice = (0, import_react92.useMemo)(() => {
+  const currentPrice = (0, import_react93.useMemo)(() => {
     const rawPrice = propertyElement?.attributes?.["price"] || "";
     return parsePrice(rawPrice);
   }, [propertyElement]);
-  const [priceInput, setPriceInput] = (0, import_react92.useState)(currentPrice);
-  (0, import_react92.useEffect)(() => {
-    setPriceInput(currentPrice);
-  }, [currentPrice]);
-  const handlePriceBlur = (0, import_react92.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (priceInput === currentPrice) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "price": priceInput
-      }
-    });
-  }, [focusIdx, propertyElement, priceInput, currentPrice, updateElement]);
-  const currentBeds = (0, import_react92.useMemo)(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
-  const currentBaths = (0, import_react92.useMemo)(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
-  const currentSqft = (0, import_react92.useMemo)(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
-  const currentCity = (0, import_react92.useMemo)(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
-  const [bedsInput, setBedsInput] = (0, import_react92.useState)(currentBeds);
-  const [bathsInput, setBathsInput] = (0, import_react92.useState)(currentBaths);
-  const [sqftInput, setSqftInput] = (0, import_react92.useState)(currentSqft);
-  const [cityInput, setCityInput] = (0, import_react92.useState)(currentCity);
-  (0, import_react92.useEffect)(() => {
-    setBedsInput(currentBeds);
-  }, [currentBeds]);
-  (0, import_react92.useEffect)(() => {
-    setBathsInput(currentBaths);
-  }, [currentBaths]);
-  (0, import_react92.useEffect)(() => {
-    setSqftInput(currentSqft);
-  }, [currentSqft]);
-  (0, import_react92.useEffect)(() => {
-    setCityInput(currentCity);
-  }, [currentCity]);
-  const handleBedsBlur = (0, import_react92.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (bedsInput === currentBeds) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "beds": bedsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bedsInput, currentBeds, updateElement]);
-  const handleBathsBlur = (0, import_react92.useCallback)(() => {
+  const currentBeds = (0, import_react93.useMemo)(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
+  const currentBaths = (0, import_react93.useMemo)(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
+  const currentSqft = (0, import_react93.useMemo)(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
+  const currentCity = (0, import_react93.useMemo)(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
+  const commitAttribute = (0, import_react93.useCallback)((key, value) => {
     if (!focusIdx || !propertyElement) return;
-    if (bathsInput === currentBaths) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "baths": bathsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bathsInput, currentBaths, updateElement]);
-  const handleSqftBlur = (0, import_react92.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (sqftInput === currentSqft) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "sqft": sqftInput
-      }
-    });
-  }, [focusIdx, propertyElement, sqftInput, currentSqft, updateElement]);
-  const handleCityBlur = (0, import_react92.useCallback)(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (cityInput === currentCity) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "city": cityInput
-      }
+      attributes: { ...propertyElement.attributes, [key]: value }
     });
-  }, [focusIdx, propertyElement, cityInput, currentCity, updateElement]);
-  const handleToggle = (0, import_react92.useCallback)((section) => {
+  }, [focusIdx, propertyElement, updateElement]);
+  const commitPrice = (0, import_react93.useCallback)((v) => commitAttribute("price", v), [commitAttribute]);
+  const commitBeds = (0, import_react93.useCallback)((v) => commitAttribute("beds", v), [commitAttribute]);
+  const commitBaths = (0, import_react93.useCallback)((v) => commitAttribute("baths", v), [commitAttribute]);
+  const commitSqft = (0, import_react93.useCallback)((v) => commitAttribute("sqft", v), [commitAttribute]);
+  const commitCity = (0, import_react93.useCallback)((v) => commitAttribute("city", v), [commitAttribute]);
+  const priceInput = useEditableValue({ externalValue: currentPrice, onChange: commitPrice });
+  const bedsInput = useEditableValue({ externalValue: currentBeds, onChange: commitBeds });
+  const bathsInput = useEditableValue({ externalValue: currentBaths, onChange: commitBaths });
+  const sqftInput = useEditableValue({ externalValue: currentSqft, onChange: commitSqft });
+  const cityInput = useEditableValue({ externalValue: currentCity, onChange: commitCity });
+  const handleToggle = (0, import_react93.useCallback)((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleTogglePrice = (0, import_react92.useCallback)(() => handleToggle("price"), [handleToggle]);
-  const handleToggleDetails = (0, import_react92.useCallback)(() => handleToggle("details"), [handleToggle]);
-  const handleToggleAddress = (0, import_react92.useCallback)(() => handleToggle("address"), [handleToggle]);
+  const handleTogglePrice = (0, import_react93.useCallback)(() => handleToggle("price"), [handleToggle]);
+  const handleToggleDetails = (0, import_react93.useCallback)(() => handleToggle("details"), [handleToggle]);
+  const handleToggleAddress = (0, import_react93.useCallback)(() => handleToggle("address"), [handleToggle]);
   return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_lucide_react73.HouseIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_lucide_react73.SquarePen, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
@@ -27051,9 +26642,11 @@ var PropertyTripleEditMenu = () => {
               type: "number",
               placeholder: "Price",
               className: "w-full shadow-none rounded-[12px]",
-              value: priceInput,
-              onChange: (e) => setPriceInput(e.target.value),
-              onBlur: handlePriceBlur
+              value: priceInput.displayValue,
+              onChange: (e) => priceInput.setLocalValue(e.target.value),
+              onFocus: priceInput.handleFocus,
+              onBlur: priceInput.handleBlur,
+              onKeyDown: priceInput.handleKeyDown
             }
           ) }) })
         ] }),
@@ -27072,9 +26665,11 @@ var PropertyTripleEditMenu = () => {
                 type: "number",
                 placeholder: "Bd",
                 className: "w-1/3 shadow-none rounded-[12px]",
-                value: bedsInput,
-                onChange: (e) => setBedsInput(e.target.value),
-                onBlur: handleBedsBlur
+                value: bedsInput.displayValue,
+                onChange: (e) => bedsInput.setLocalValue(e.target.value),
+                onFocus: bedsInput.handleFocus,
+                onBlur: bedsInput.handleBlur,
+                onKeyDown: bedsInput.handleKeyDown
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
@@ -27083,9 +26678,11 @@ var PropertyTripleEditMenu = () => {
                 type: "number",
                 placeholder: "Ba",
                 className: "w-1/3 shadow-none rounded-[12px]",
-                value: bathsInput,
-                onChange: (e) => setBathsInput(e.target.value),
-                onBlur: handleBathsBlur
+                value: bathsInput.displayValue,
+                onChange: (e) => bathsInput.setLocalValue(e.target.value),
+                onFocus: bathsInput.handleFocus,
+                onBlur: bathsInput.handleBlur,
+                onKeyDown: bathsInput.handleKeyDown
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
@@ -27094,9 +26691,11 @@ var PropertyTripleEditMenu = () => {
                 type: "number",
                 placeholder: "Sqft",
                 className: "w-2/4 shadow-none rounded-[12px]",
-                value: sqftInput,
-                onChange: (e) => setSqftInput(e.target.value),
-                onBlur: handleSqftBlur
+                value: sqftInput.displayValue,
+                onChange: (e) => sqftInput.setLocalValue(e.target.value),
+                onFocus: sqftInput.handleFocus,
+                onBlur: sqftInput.handleBlur,
+                onKeyDown: sqftInput.handleKeyDown
               }
             )
           ] }) })
@@ -27115,15 +26714,17 @@ var PropertyTripleEditMenu = () => {
               type: "text",
               placeholder: "Egg Harbor City",
               className: "w-full shadow-none rounded-[12px]",
-              value: cityInput,
-              onChange: (e) => setCityInput(e.target.value),
-              onBlur: handleCityBlur
+              value: cityInput.displayValue,
+              onChange: (e) => cityInput.setLocalValue(e.target.value),
+              onFocus: cityInput.handleFocus,
+              onBlur: cityInput.handleBlur,
+              onKeyDown: cityInput.handleKeyDown
             }
           ) }) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(TooltipContent, { side: "bottom", className: "z-50001", children: "Information" })
   ] });
 };
 
@@ -27137,47 +26738,47 @@ var PropertyTripleItemToolbar = () => {
   const template = useEditorStore((state) => state.template);
   const updateElement = useEditorStore((state) => state.updateElement);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const parentIdx = (0, import_react93.useMemo)(() => {
+  const parentIdx = (0, import_react94.useMemo)(() => {
     if (!focusIdx) return null;
     return getParentIdx(focusIdx);
   }, [focusIdx]);
-  const parentElement = (0, import_react93.useMemo)(() => {
+  const parentElement = (0, import_react94.useMemo)(() => {
     if (!parentIdx || !template) return null;
     return getValueByIdx(template, parentIdx);
   }, [parentIdx, template]);
-  const currentBgColor = (0, import_react93.useMemo)(() => {
+  const currentBgColor = (0, import_react94.useMemo)(() => {
     return parentElement?.attributes?.["background-color"] || "transparent";
   }, [parentElement]);
-  const border = (0, import_react93.useMemo)(() => {
+  const border = (0, import_react94.useMemo)(() => {
     const rawBorder = parentElement?.attributes?.["border"];
     return parseBorder(rawBorder);
   }, [parentElement]);
-  const borderRadiusValue = (0, import_react93.useMemo)(() => {
+  const borderRadiusValue = (0, import_react94.useMemo)(() => {
     const rawRadius = parentElement?.attributes?.["border-radius"];
     return parseBorderRadius(rawRadius);
   }, [parentElement]);
-  const currentTextColor = (0, import_react93.useMemo)(() => {
+  const currentTextColor = (0, import_react94.useMemo)(() => {
     return parentElement?.attributes?.["text-color"] || "#111116";
   }, [parentElement]);
-  const currentFontFamily = (0, import_react93.useMemo)(() => {
+  const currentFontFamily = (0, import_react94.useMemo)(() => {
     return parentElement?.attributes?.["font-family"] || "Arial, sans-serif";
   }, [parentElement]);
-  const handleOpenBgColorPicker = (0, import_react93.useCallback)(() => {
+  const handleOpenBgColorPicker = (0, import_react94.useCallback)(() => {
     setColorType("Background Color");
     setColorTarget("propertyBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = (0, import_react93.useCallback)(() => {
+  const handleOpenStrokeColorPicker = (0, import_react94.useCallback)(() => {
     setColorType("Stroke Color");
     setColorTarget("propertyStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = (0, import_react93.useCallback)(() => {
+  const handleOpenTextColorPicker = (0, import_react94.useCallback)(() => {
     setColorType("Text Color");
     setColorTarget("propertyTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleFontChange = (0, import_react93.useCallback)((font) => {
+  const handleFontChange = (0, import_react94.useCallback)((font) => {
     if (!parentIdx || !parentElement) return;
     updateElement(parentIdx, {
       attributes: {
@@ -27186,7 +26787,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, updateElement]);
-  const handleBorderWidthChange = (0, import_react93.useCallback)((width) => {
+  const handleBorderWidthChange = (0, import_react94.useCallback)((width) => {
     if (!parentIdx || !parentElement) return;
     const newBorder = { ...border, width };
     const formattedBorder = formatBorder(newBorder);
@@ -27197,7 +26798,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, border, updateElement]);
-  const handleBorderEnabledChange = (0, import_react93.useCallback)((enabled) => {
+  const handleBorderEnabledChange = (0, import_react94.useCallback)((enabled) => {
     if (!parentIdx || !parentElement) return;
     const newWidth = enabled ? border.width === 0 ? 1 : border.width : 0;
     const newBorder = { ...border, width: newWidth };
@@ -27209,7 +26810,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, border, updateElement]);
-  const handleBorderRadiusChange = (0, import_react93.useCallback)((value) => {
+  const handleBorderRadiusChange = (0, import_react94.useCallback)((value) => {
     if (!parentIdx || !parentElement) return;
     const formattedRadius = formatBorderRadius(value);
     updateElement(parentIdx, {
@@ -27233,6 +26834,7 @@ var PropertyTripleItemToolbar = () => {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ImageMenu, { type: "property" }),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(PropertyTripleEditMenu, {}),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ToolbarSeparator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         FontFamilyDropdown,
@@ -27303,9 +26905,7 @@ var PropertyTripleItemToolbar = () => {
           tooltipText: "Corner Rounding",
           max: 18
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ToolbarSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(PropertyTripleEditMenu, {})
+      )
     ] })
   ] });
 };
@@ -27387,17 +26987,17 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/core/editor/components/email-template-v2/template-page.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 init_sidebar_context();
 init_editor();
 
 // src/core/editor/hooks/use-auto-save.ts
-var import_react94 = require("react");
+var import_react95 = require("react");
 init_editor();
 var AUTO_SAVE_INTERVAL = 30 * 1e3;
 function useAutoSave() {
-  const intervalRef = (0, import_react94.useRef)(null);
-  (0, import_react94.useEffect)(() => {
+  const intervalRef = (0, import_react95.useRef)(null);
+  (0, import_react95.useEffect)(() => {
     intervalRef.current = setInterval(async () => {
       const { template, templateId, onSave, hasUnsavedChanges, markAsSaved, isSaving, setIsSaving } = useEditorStore.getState();
       if (isSaving || !templateId || !onSave || !hasUnsavedChanges()) {
@@ -27426,7 +27026,7 @@ function useAutoSave() {
 init_utils();
 var import_dist = require("react-json-view-lite/dist/index.css");
 var import_jsx_runtime126 = require("react/jsx-runtime");
-var Editor2 = (0, import_react95.lazy)(() => Promise.resolve().then(() => (init_core(), core_exports)).then((module2) => ({
+var Editor2 = (0, import_react96.lazy)(() => Promise.resolve().then(() => (init_core(), core_exports)).then((module2) => ({
   default: module2.Editor
 })));
 function TemplatePage({
@@ -27438,12 +27038,12 @@ function TemplatePage({
   onImageUpload,
   data
 }) {
-  (0, import_react95.useState)(() => {
+  (0, import_react96.useState)(() => {
     useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload);
   });
   useAutoSave();
-  const [editorLoading, setEditorLoading] = (0, import_react95.useState)(false);
-  const [isPageHovered, setIsPageHovered] = (0, import_react95.useState)(false);
+  const [editorLoading, setEditorLoading] = (0, import_react96.useState)(false);
+  const [isPageHovered, setIsPageHovered] = (0, import_react96.useState)(false);
   const previewMode = useEditorStore((state) => state.previewMode);
   const focusIdx = useEditorStore((state) => state.focusIdx);
   const setFocusIdx = useEditorStore((state) => state.setFocusIdx);
@@ -27487,7 +27087,7 @@ function TemplatePage({
                   onClick: handlePageClick,
                   onMouseMove: handlePageMouseMove,
                   onMouseLeave: handlePageMouseLeave,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react95.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react96.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
                     Editor2,
                     {
                       setEditorLoading,