@kgalexander/mcreate 0.0.16 → 1.0.0

package/dist/index.mjs

@@ -60,7 +60,7 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-L3OWFBEU.mjs";
+} from "./chunk-G7F7GRJC.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
@@ -81,11 +81,20 @@ function TemplateJsonView() {
 }
 
 // src/core/editor/components/template-size-indicator.tsx
+import { useEffect } from "react";
 import { jsxs as jsxs2 } from "react/jsx-runtime";
+var POLLING_INTERVAL_MS = 3e4;
 function TemplateSizeIndicator() {
   const templateSize = useEditorStore((state) => state.templateSize);
   const isAtSizeLimit = useEditorStore((state) => state.isAtSizeLimit);
-  console.log("templateSize", templateSize, isAtSizeLimit);
+  const sizeTrackingMode = useEditorStore((state) => state.sizeTrackingMode);
+  const recheckTemplateSize = useEditorStore((state) => state.recheckTemplateSize);
+  useEffect(() => {
+    if (sizeTrackingMode !== "polling") return;
+    const id = setInterval(recheckTemplateSize, POLLING_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [sizeTrackingMode, recheckTemplateSize]);
+  if (sizeTrackingMode === "polling") return null;
   const sizeKB = (templateSize / 1024).toFixed(0);
   const maxKB = (MAX_TEMPLATE_SIZE / 1024).toFixed(0);
   const percentage = templateSize / MAX_TEMPLATE_SIZE * 100;
@@ -203,6 +212,8 @@ function TemplateHeader() {
   const isSaving = useEditorStore((s) => s.isSaving);
   const setIsSaving = useEditorStore((s) => s.setIsSaving);
   const onExit = useEditorStore((s) => s.onExit);
+  const onDuplicate = useEditorStore((s) => s.onDuplicate);
+  const onDelete = useEditorStore((s) => s.onDelete);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
     console.log("handleExit - templateId:", templateId);
@@ -252,12 +263,12 @@ function TemplateHeader() {
             /* @__PURE__ */ jsx4(MegaphoneIcon, { className: "w-4 h-4" }),
             "Start new campaign"
           ] }),
-          /* @__PURE__ */ jsxs5(DropdownMenuItem, { className: "cursor-pointer", children: [
+          /* @__PURE__ */ jsxs5(DropdownMenuItem, { className: "cursor-pointer", onClick: () => templateId && onDuplicate?.(templateId, useEditorStore.getState().template), children: [
             /* @__PURE__ */ jsx4(CopyIcon, { className: "w-4 h-4" }),
             "Duplicate"
           ] }),
           /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs5(DropdownMenuItem, { variant: "destructive", className: "cursor-pointer", children: [
+          /* @__PURE__ */ jsxs5(DropdownMenuItem, { variant: "destructive", className: "cursor-pointer", onClick: () => templateId && onDelete?.(templateId), children: [
             /* @__PURE__ */ jsx4(TrashIcon, { className: "w-4 h-4" }),
             "Delete"
           ] })
@@ -272,7 +283,7 @@ function TemplateHeader() {
 }
 
 // src/core/editor/components/email-template-v2/sidebar/sidebar.tsx
-import { useCallback as useCallback18, useEffect as useEffect4, useRef as useRef6, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect5, useRef as useRef6, useMemo as useMemo7, useState as useState10 } from "react";
 import { BlocksIcon, Paintbrush, PanelLeftClose, PanelLeftOpen, FileIcon } from "lucide-react";
 
 // src/core/editor/components/email-template-v2/sidebar/view/elements/main.tsx
@@ -283,7 +294,7 @@ import { useCallback as useCallback3 } from "react";
 import { ArrowLeftIcon as ArrowLeftIcon2 } from "lucide-react";
 
 // src/core/editor/hooks/use-recently-used.ts
-import { useState as useState2, useCallback, useEffect } from "react";
+import { useState as useState2, useCallback, useEffect as useEffect2 } from "react";
 
 // src/pre-elements/columns.json
 var columns_default = [
@@ -1208,7 +1219,7 @@ function resolveAll(refs) {
 }
 function useRecentlyUsed() {
   const [refs, setRefs] = useState2(() => readRefs());
-  useEffect(() => {
+  useEffect2(() => {
     const handler = (e) => {
       if (e.key === STORAGE_KEY) {
         setRefs(readRefs());
@@ -1230,7 +1241,7 @@ function useRecentlyUsed() {
 }
 
 // src/core/editor/components/email-template-v2/sidebar/view/elements/_components/preview-section.tsx
-import { useRef, useState as useState3, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useRef, useState as useState3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
 function PreviewSection({
@@ -1251,7 +1262,7 @@ function PreviewSection({
     setCanGoLeft(el.scrollLeft > 0);
     setCanGoRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     updateScrollState();
     const el = scrollRef.current;
     if (!el) return;
@@ -2710,7 +2721,7 @@ import {
   memo,
   useCallback as useCallback15,
   useContext,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useMemo as useMemo4,
   useRef as useRef3,
   useState as useState6
@@ -2742,22 +2753,55 @@ var ColorPicker = ({
   );
   const [alpha, setAlpha] = useState6(selectedColor.alpha() * 100 || defaultColor.alpha() * 100);
   const [mode, setMode] = useState6("hex");
-  useEffect3(() => {
+  const hueRef = useRef3(hue);
+  const saturationRef = useRef3(saturation);
+  const lightnessRef = useRef3(lightness);
+  const alphaRef = useRef3(alpha);
+  hueRef.current = hue;
+  saturationRef.current = saturation;
+  lightnessRef.current = lightness;
+  alphaRef.current = alpha;
+  useEffect4(() => {
     if (value) {
-      const color = Color.rgb(value).rgb().object();
-      setHue(color.r);
-      setSaturation(color.g);
-      setLightness(color.b);
-      setAlpha(color.a);
+      const color = Color(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]);
-  useEffect3(() => {
+  const updateColor = useCallback15((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 = Color.hsl(hue, saturation, lightness).alpha(alpha / 100);
+      const color = Color.hsl(newH, newS, newL).alpha(newA / 100);
       const rgba = color.rgb().array();
-      onChange([rgba[0], rgba[1], rgba[2], alpha / 100]);
+      onChange([rgba[0], rgba[1], rgba[2], newA / 100]);
     }
-  }, [hue, saturation, lightness, alpha, onChange]);
+  }, [onChange]);
   return /* @__PURE__ */ jsx25(
     ColorPickerContext.Provider,
     {
@@ -2767,10 +2811,7 @@ var ColorPicker = ({
         lightness,
         alpha,
         mode,
-        setHue,
-        setSaturation,
-        setLightness,
-        setAlpha,
+        updateColor,
         setMode
       },
       children: /* @__PURE__ */ jsx25("div", { className: cn("flex size-full flex-col gap-4", className), ...props })
@@ -2782,7 +2823,7 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
   const [isDragging, setIsDragging] = useState6(false);
   const [positionX, setPositionX] = useState6(0);
   const [positionY, setPositionY] = useState6(0);
-  const { hue, setSaturation, setLightness } = useColorPicker();
+  const { hue, updateColor } = useColorPicker();
   const backgroundGradient = useMemo4(() => {
     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)),
@@ -2798,14 +2839,14 @@ var ColorPickerSelection = 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]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const handlePointerUp = () => setIsDragging(false);
     if (isDragging) {
       window.addEventListener("pointermove", handlePointerMove);
@@ -2846,13 +2887,13 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
 });
 ColorPickerSelection.displayName = "ColorPickerSelection";
 var ColorPickerHue = ({ className, ...props }) => {
-  const { hue, setHue } = useColorPicker();
+  const { hue, updateColor } = useColorPicker();
   return /* @__PURE__ */ jsxs23(
     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,
@@ -2864,17 +2905,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 = Color(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);
     }
@@ -3670,7 +3708,7 @@ function TemplateSidebar({ editorLoading }) {
   const previousFocusIdxRef = useRef6(null);
   const [openSidebar, setOpenSidebar] = useState10(true);
   const [updateCounter, forceUpdate] = useState10(0);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -3733,7 +3771,7 @@ function TemplateSidebar({ editorLoading }) {
         return null;
     }
   }, [colorTarget, focusIdx, focusedElementAttrs, parentElementAttrs, focusedElementType, pageBgColor, linkColor, tiptapEditor, updateCounter]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!focusIdx || !focusedElementType) {
       previousElementTypeRef.current = void 0;
       return;
@@ -4037,11 +4075,13 @@ function TemplateSidebar({ editorLoading }) {
       attributes: { ...element.attributes, [attributeName]: imageSrc }
     });
   }, [imageTarget]);
-  useEffect4(() => {
+  const prevActiveViewRef = useRef6(activeView);
+  if (activeView !== prevActiveViewRef.current) {
+    prevActiveViewRef.current = activeView;
     if (PICKER_VIEWS.has(activeView)) {
       setOpenSidebar(true);
     }
-  }, [activeView]);
+  }
   const handleCloseSidebar = () => setOpenSidebar(!openSidebar);
   const handleViewClick = (view) => {
     setActiveView(view);
@@ -4309,7 +4349,7 @@ var PlainToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/text/toolbar.tsx
-import { useEffect as useEffect10, useState as useState16, useCallback as useCallback26, useMemo as useMemo14 } from "react";
+import { useEffect as useEffect7, useState as useState17, useCallback as useCallback27, useMemo as useMemo14 } from "react";
 import { BoldIcon, BracesIcon, CaseUpperIcon, CheckIcon as CheckIcon5, EllipsisIcon, HighlighterIcon, ItalicIcon, Strikethrough, Underline } from "lucide-react";
 
 // src/core/editor/components/paragraph-text-settings.tsx
@@ -4377,13 +4417,79 @@ function Slider2({
 }
 
 // src/core/editor/components/paragraph-text-settings.tsx
-import { useState as useState11, useEffect as useEffect5, useMemo as useMemo11, useCallback as useCallback21, memo as memo2 } from "react";
+import { useState as useState12, useEffect as useEffect6, useMemo as useMemo11, useCallback as useCallback22, memo as memo2 } from "react";
+
+// src/core/editor/hooks/use-editable-value.ts
+import { useState as useState11, useCallback as useCallback21 } from "react";
+function useEditableValue(options) {
+  const { externalValue, onChange, toLocal, toExternal } = options;
+  const convert = toLocal ?? String;
+  const [localValue, setLocalValue] = useState11(convert(externalValue));
+  const [isFocused, setIsFocused] = useState11(false);
+  const displayValue = isFocused ? localValue : convert(externalValue);
+  const handleFocus = useCallback21(() => {
+    setLocalValue(convert(externalValue));
+    setIsFocused(true);
+  }, [externalValue, convert]);
+  const handleBlur = useCallback21(() => {
+    setIsFocused(false);
+    if (toExternal) {
+      const parsed = toExternal(localValue);
+      if (parsed !== null) {
+        onChange(parsed);
+      }
+    } else {
+      onChange(localValue);
+    }
+  }, [localValue, toExternal, onChange]);
+  const handleKeyDown = useCallback21((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
 import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
-  const [isOpen, setIsOpen] = useState11(false);
+  const [isOpen, setIsOpen] = useState12(false);
   const tiptapEditor = useEditorStore((s) => s.tiptapEditor);
-  const [updateCounter, forceUpdate] = useState11(0);
-  useEffect5(() => {
+  const [updateCounter, forceUpdate] = useState12(0);
+  useEffect6(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -4409,92 +4515,34 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
     }
     return DEFAULT_LINE_HEIGHT;
   }, [tiptapEditor, updateCounter]);
-  const [letterSpacingInputValue, setLetterSpacingInputValue] = useState11(
-    String(currentLetterSpacing)
-  );
-  const [isLetterSpacingInputFocused, setIsLetterSpacingInputFocused] = useState11(false);
-  const [lineHeightInputValue, setLineHeightInputValue] = useState11(
-    String(currentLineHeight)
-  );
-  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = useState11(false);
-  useEffect5(() => {
-    if (!isLetterSpacingInputFocused) {
-      setLetterSpacingInputValue(String(currentLetterSpacing));
-    }
-  }, [currentLetterSpacing, isLetterSpacingInputFocused]);
-  useEffect5(() => {
-    if (!isLineHeightInputFocused) {
-      setLineHeightInputValue(String(currentLineHeight));
-    }
-  }, [currentLineHeight, isLineHeightInputFocused]);
-  const handleLetterSpacingSliderChange = useCallback21((values) => {
+  const commitLetterSpacing = useCallback22((value) => {
     if (!tiptapEditor) return;
-    const value = values[0];
-    setLetterSpacingInputValue(String(value));
     tiptapEditor.chain().setLetterSpacing(`${value}px`).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleLetterSpacingInputChange = useCallback21((e) => {
-    setLetterSpacingInputValue(e.target.value);
-  }, []);
-  const applyLetterSpacing = useCallback21(() => {
-    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 = useCallback21(() => {
-    setIsLetterSpacingInputFocused(false);
-    applyLetterSpacing();
-  }, [applyLetterSpacing]);
-  const handleLetterSpacingInputKeyDown = useCallback21((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLetterSpacing();
-      e.target.blur();
-    }
-  }, [applyLetterSpacing]);
-  const handleLineHeightSliderChange = useCallback21((values) => {
+  const commitLineHeight = useCallback22((value) => {
     if (!tiptapEditor) return;
-    const value = values[0];
-    setLineHeightInputValue(String(value));
     tiptapEditor.chain().setLineHeight(String(value)).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleLineHeightInputChange = useCallback21((e) => {
-    setLineHeightInputValue(e.target.value);
-  }, []);
-  const applyLineHeight = useCallback21(() => {
-    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 = useCallback21(() => {
-    setIsLineHeightInputFocused(false);
-    applyLineHeight();
-  }, [applyLineHeight]);
-  const handleLineHeightInputKeyDown = useCallback21((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 = useCallback22((values) => {
+    commitLetterSpacing(values[0]);
+  }, [commitLetterSpacing]);
+  const handleLineHeightSliderChange = useCallback22((values) => {
+    commitLineHeight(values[0]);
+  }, [commitLineHeight]);
   return /* @__PURE__ */ jsxs31(Tooltip, { children: [
     /* @__PURE__ */ jsxs31(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx39(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(
@@ -4531,11 +4579,11 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
                   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,
@@ -4562,11 +4610,11 @@ var ParagraphTextSettings = memo2(function ParagraphTextSettings2() {
                   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,
@@ -4630,7 +4678,7 @@ var FontFamilyDropdown = ({
 };
 
 // src/core/editor/components/font-size-control.tsx
-import { useState as useState12, useEffect as useEffect6, useCallback as useCallback22, memo as memo3 } from "react";
+import { useState as useState13, useCallback as useCallback23, memo as memo3 } from "react";
 
 // src/components/ui/button-group.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
@@ -4772,59 +4820,37 @@ var FontSizeControl = memo3(function FontSizeControl2({
   max = MAX_FONT_SIZE,
   step = FONT_SIZE_STEP
 }) {
-  const [inputValue, setInputValue] = useState12(String(value));
-  const [isFocused, setIsFocused] = useState12(false);
-  const [isPopoverOpen, setIsPopoverOpen] = useState12(false);
-  useEffect6(() => {
-    if (!isFocused) {
-      setInputValue(String(value));
-    }
-  }, [value, isFocused]);
-  const applySize = useCallback22(() => {
-    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 = useCallback22(() => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState13(false);
+  const input = useEditableNumber({ value, onChange, min, max });
+  const handleIncrease = useCallback23(() => {
     const newSize = Math.min(value + step, max);
     onChange(newSize);
   }, [value, step, max, onChange]);
-  const handleDecrease = useCallback22(() => {
+  const handleDecrease = useCallback23(() => {
     const newSize = Math.max(value - step, min);
     onChange(newSize);
   }, [value, step, min, onChange]);
-  const handleInputChange = useCallback22((e) => {
-    setInputValue(e.target.value);
-  }, []);
-  const handleFocus = useCallback22(() => {
-    setIsFocused(true);
+  const handleFocus = useCallback23(() => {
+    input.handleFocus();
     setIsPopoverOpen(true);
-  }, []);
-  const handleBlur = useCallback22(() => {
-    setIsFocused(false);
-    applySize();
+  }, [input.handleFocus]);
+  const handleBlur = useCallback23(() => {
+    input.handleBlur();
     setTimeout(() => setIsPopoverOpen(false), 150);
-  }, [applySize]);
-  const handleKeyDown = useCallback22((e) => {
+  }, [input.handleBlur]);
+  const handleKeyDown = useCallback23((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 = useCallback22((size) => {
+  }, []);
+  const handlePresetSelect = useCallback23((size) => {
     onChange(size);
-    setInputValue(String(size));
     setIsPopoverOpen(false);
   }, [onChange]);
   return /* @__PURE__ */ jsx43("div", { className: "grid w-full max-w-sm gap-6", children: /* @__PURE__ */ jsxs33(ButtonGroup, { children: [
@@ -4851,8 +4877,8 @@ var FontSizeControl = memo3(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,
@@ -4907,44 +4933,22 @@ var FontSizeControl = memo3(function FontSizeControl2({
 });
 
 // src/core/editor/components/element-gear/column-styles.tsx
-import { useCallback as useCallback25, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo13 } from "react";
 
 // src/core/editor/components/border-radius.tsx
-import { useState as useState13, useEffect as useEffect7 } from "react";
+import { useState as useState14 } from "react";
 import { SquareRoundCorner } from "lucide-react";
 import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var BorderRadius = ({
   value,
   onChange,
   tooltipText = "Border Radius",
-  max = 100
+  max = 50
 }) => {
-  const [inputValue, setInputValue] = useState13(value.toString());
-  const [isOpen, setIsOpen] = useState13(false);
-  useEffect7(() => {
-    setInputValue(value.toString());
-  }, [value]);
+  const [isOpen, setIsOpen] = useState14(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__ */ jsxs34(Tooltip, { children: [
     /* @__PURE__ */ jsxs34(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
@@ -4974,10 +4978,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
@@ -4992,7 +4997,7 @@ var BorderRadius = ({
 
 // src/core/editor/components/stroke-weight.tsx
 import { BanIcon, MinusIcon as MinusIcon2 } from "lucide-react";
-import { useState as useState14, useEffect as useEffect8 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var StrokeWeight = ({
   width,
@@ -5002,32 +5007,10 @@ var StrokeWeight = ({
   tooltipText = "Stroke Weight",
   max = 50
 }) => {
-  const [isOpen, setIsOpen] = useState14(false);
-  const [inputValue, setInputValue] = useState14(width.toString());
-  useEffect8(() => {
-    setInputValue(width.toString());
-  }, [width]);
+  const [isOpen, setIsOpen] = useState15(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__ */ jsxs35(Tooltip, { children: [
     /* @__PURE__ */ jsxs35(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
@@ -5078,10 +5061,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
@@ -5128,10 +5112,10 @@ function CollapsibleContent2({
 
 // src/core/editor/components/better-padding.tsx
 import { ChevronDownIcon as ChevronDownIcon3, PanelBottomDashedIcon, PanelLeftDashedIcon, PanelRightDashedIcon, PanelTopDashedIcon, SquareSquare } from "lucide-react";
-import { useState as useState15, useEffect as useEffect9, useCallback as useCallback24 } from "react";
+import { useState as useState16, useCallback as useCallback25 } from "react";
 
 // src/core/editor/hooks/use-padding.ts
-import { useMemo as useMemo12, useCallback as useCallback23 } from "react";
+import { useMemo as useMemo12, useCallback as useCallback24 } from "react";
 import { get as lodashGet3 } from "lodash";
 
 // src/core/editor/utils/padding.ts
@@ -5200,7 +5184,7 @@ var usePadding = (options = {}) => {
   const uniformValue = useMemo12(() => {
     return getUniformValue(parsedPadding);
   }, [parsedPadding]);
-  const updatePadding = useCallback23((updates) => {
+  const updatePadding = useCallback24((updates) => {
     if (!effectiveIdx || !template || !element) return;
     const newPadding = {
       ...parsedPadding,
@@ -5213,19 +5197,19 @@ var usePadding = (options = {}) => {
       }
     });
   }, [effectiveIdx, template, element, parsedPadding, updateElement, attributeName]);
-  const setTop = useCallback23((value) => {
+  const setTop = useCallback24((value) => {
     updatePadding({ top: value });
   }, [updatePadding]);
-  const setRight = useCallback23((value) => {
+  const setRight = useCallback24((value) => {
     updatePadding({ right: value });
   }, [updatePadding]);
-  const setBottom = useCallback23((value) => {
+  const setBottom = useCallback24((value) => {
     updatePadding({ bottom: value });
   }, [updatePadding]);
-  const setLeft = useCallback23((value) => {
+  const setLeft = useCallback24((value) => {
     updatePadding({ left: value });
   }, [updatePadding]);
-  const setUniform = useCallback23((value) => {
+  const setUniform = useCallback24((value) => {
     updatePadding({ top: value, right: value, bottom: value, left: value });
   }, [updatePadding]);
   return {
@@ -5255,19 +5239,19 @@ var BetterPadding = ({
   targetIdx,
   tooltipText = "Padding"
 }) => {
-  const [isOpen, setIsOpen] = useState15(false);
-  const [openSection, setOpenSection] = useState15(null);
+  const [isOpen, setIsOpen] = useState16(false);
+  const [openSection, setOpenSection] = useState16(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 = useCallback24((section) => {
+  const handleToggle = useCallback25((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleToggleNormal = useCallback24(() => handleToggle("normal"), [handleToggle]);
-  const handleToggleInner = useCallback24(() => handleToggle("inner"), [handleToggle]);
-  const handleToggleIcon = useCallback24(() => handleToggle("icon"), [handleToggle]);
-  const handleToggleText = useCallback24(() => handleToggle("text"), [handleToggle]);
+  const handleToggleNormal = useCallback25(() => handleToggle("normal"), [handleToggle]);
+  const handleToggleInner = useCallback25(() => handleToggle("inner"), [handleToggle]);
+  const handleToggleIcon = useCallback25(() => handleToggle("icon"), [handleToggle]);
+  const handleToggleText = useCallback25(() => handleToggle("text"), [handleToggle]);
   return /* @__PURE__ */ jsxs36(Tooltip, { children: [
     /* @__PURE__ */ jsxs36(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
@@ -5322,105 +5306,14 @@ var BetterPadding = ({
   ] });
 };
 var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
-  const [sliderValue, setSliderValue] = useState15(data.uniformValue ?? data.top);
-  const [sliderInputValue, setSliderInputValue] = useState15((data.uniformValue ?? data.top).toString());
-  const [topInput, setTopInput] = useState15(data.top.toString());
-  const [rightInput, setRightInput] = useState15(data.right.toString());
-  const [bottomInput, setBottomInput] = useState15(data.bottom.toString());
-  const [leftInput, setLeftInput] = useState15(data.left.toString());
-  useEffect9(() => {
-    setSliderValue(data.uniformValue ?? data.top);
-    setSliderInputValue((data.uniformValue ?? data.top).toString());
-  }, [data.uniformValue, data.top]);
-  useEffect9(() => {
-    setTopInput(data.top.toString());
-  }, [data.top]);
-  useEffect9(() => {
-    setRightInput(data.right.toString());
-  }, [data.right]);
-  useEffect9(() => {
-    setBottomInput(data.bottom.toString());
-  }, [data.bottom]);
-  useEffect9(() => {
-    setLeftInput(data.left.toString());
-  }, [data.left]);
-  const handleKeyDown = useCallback24((e) => {
-    if (e.key === "Enter") {
-      e.currentTarget.blur();
-    }
-  }, []);
-  const handleSliderChange = useCallback24((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 = useCallback25((values) => {
+    data.setUniform(values[0]);
   }, [data]);
-  const handleSliderInputChange = useCallback24((e) => {
-    setSliderInputValue(e.target.value);
-  }, []);
-  const handleSliderInputBlur = useCallback24(() => {
-    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 = useCallback24((e) => {
-    setTopInput(e.target.value);
-  }, []);
-  const handleTopBlur = useCallback24(() => {
-    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 = useCallback24((e) => {
-    setRightInput(e.target.value);
-  }, []);
-  const handleRightBlur = useCallback24(() => {
-    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 = useCallback24((e) => {
-    setBottomInput(e.target.value);
-  }, []);
-  const handleBottomBlur = useCallback24(() => {
-    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 = useCallback24((e) => {
-    setLeftInput(e.target.value);
-  }, []);
-  const handleLeftBlur = useCallback24(() => {
-    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__ */ jsxs36(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
     /* @__PURE__ */ jsx47(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx47(Button, { variant: "outline", className: "w-full shadow-none rounded-[12px]", children: /* @__PURE__ */ jsxs36("div", { className: "w-full flex flex-row items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsx47("p", { children: label }),
@@ -5431,7 +5324,7 @@ var PaddingSectionUI = ({ label, isOpen, onToggle, data }) => {
         /* @__PURE__ */ jsx47(
           Slider2,
           {
-            value: [sliderValue],
+            value: [data.uniformValue ?? data.top],
             onValueChange: handleSliderChange,
             min: 0,
             max: PADDING_MAX,
@@ -5442,10 +5335,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
@@ -5460,10 +5354,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
@@ -5476,10 +5371,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
@@ -5494,10 +5390,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
@@ -5510,10 +5407,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
@@ -5597,24 +5495,24 @@ var ColumnStyles = () => {
   const paddingUniformValue = useMemo13(() => {
     return getUniformValue(padding);
   }, [padding]);
-  const handleOpenBgColorPicker = useCallback25(() => {
+  const handleOpenBgColorPicker = useCallback26(() => {
     setColorType("Column color");
     setColorTarget("columnBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback25(() => {
+  const handleOpenStrokeColorPicker = useCallback26(() => {
     setColorType("Column Stroke");
     setColorTarget("columnStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleStrokeWidthChange = useCallback25((width) => {
+  const handleStrokeWidthChange = useCallback26((width) => {
     if (!columnIdx || !column) return;
     const newBorder = formatBorder({ ...border, width });
     updateElement(columnIdx, {
       attributes: { ...column.attributes, border: newBorder }
     });
   }, [columnIdx, column, border, updateElement]);
-  const handleStrokeEnabledChange = useCallback25((enabled) => {
+  const handleStrokeEnabledChange = useCallback26((enabled) => {
     if (!columnIdx || !column) return;
     const newBorder = formatBorder({
       ...border,
@@ -5624,32 +5522,32 @@ var ColumnStyles = () => {
       attributes: { ...column.attributes, border: newBorder }
     });
   }, [columnIdx, column, border, updateElement]);
-  const handleBorderRadiusChange = useCallback25((value) => {
+  const handleBorderRadiusChange = useCallback26((value) => {
     if (!columnIdx || !column) return;
     updateElement(columnIdx, {
       attributes: { ...column.attributes, "border-radius": formatBorderRadius(value) }
     });
   }, [columnIdx, column, updateElement]);
-  const updatePadding = useCallback25((updates) => {
+  const updatePadding = useCallback26((updates) => {
     if (!columnIdx || !column) return;
     const newPadding = { ...padding, ...updates };
     updateElement(columnIdx, {
       attributes: { ...column.attributes, padding: formatPadding(newPadding) }
     });
   }, [columnIdx, column, padding, updateElement]);
-  const handlePaddingTopChange = useCallback25((value) => {
+  const handlePaddingTopChange = useCallback26((value) => {
     updatePadding({ top: value });
   }, [updatePadding]);
-  const handlePaddingRightChange = useCallback25((value) => {
+  const handlePaddingRightChange = useCallback26((value) => {
     updatePadding({ right: value });
   }, [updatePadding]);
-  const handlePaddingBottomChange = useCallback25((value) => {
+  const handlePaddingBottomChange = useCallback26((value) => {
     updatePadding({ bottom: value });
   }, [updatePadding]);
-  const handlePaddingLeftChange = useCallback25((value) => {
+  const handlePaddingLeftChange = useCallback26((value) => {
     updatePadding({ left: value });
   }, [updatePadding]);
-  const handlePaddingUniformChange = useCallback25((value) => {
+  const handlePaddingUniformChange = useCallback26((value) => {
     updatePadding({ top: value, right: value, bottom: value, left: value });
   }, [updatePadding]);
   return /* @__PURE__ */ jsxs38(Fragment3, { children: [
@@ -5737,8 +5635,8 @@ var TextToolbar = () => {
   const template = useEditorStore((s) => s.template);
   const mergeFields = useEditorStore((s) => s.mergeFields);
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [updateCounter, forceUpdate] = useState16(0);
-  const [overflowOpen, setOverflowOpen] = useState16(false);
+  const [updateCounter, forceUpdate] = useState17(0);
+  const [overflowOpen, setOverflowOpen] = useState17(false);
   const isInSectionColumn = useMemo14(() => {
     if (!focusIdx || !template) return false;
     const columnIdx = getParentIdx(focusIdx);
@@ -5748,7 +5646,7 @@ var TextToolbar = () => {
     const section = getValueByIdx(template, sectionIdx);
     return section?.type === "section-column";
   }, [focusIdx, template]);
-  useEffect10(() => {
+  useEffect7(() => {
     if (!tiptapEditor) return;
     const handler = () => forceUpdate((n) => n + 1);
     tiptapEditor.on("selectionUpdate", handler);
@@ -5783,7 +5681,7 @@ var TextToolbar = () => {
     const multiplier = HEADING_MULTIPLIERS[activeType] || 1;
     return Math.round(baseFontSize * multiplier);
   }, [tiptapEditor, updateCounter, activeType, baseFontSize]);
-  const handleFontSizeChange = useCallback26((size) => {
+  const handleFontSizeChange = useCallback27((size) => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().setFontSize(`${size}px`).run();
     forceUpdate((n) => n + 1);
@@ -5794,7 +5692,7 @@ var TextToolbar = () => {
     if (paragraphAttrs.textAlign) return paragraphAttrs.textAlign;
     return "left";
   }, [tiptapEditor, updateCounter]);
-  const handleCycleAlignment = useCallback26(() => {
+  const handleCycleAlignment = useCallback27(() => {
     if (!tiptapEditor) return;
     const currentIndex = ALIGNMENTS.indexOf(currentAlignment);
     const nextIndex = (currentIndex + 1) % ALIGNMENTS.length;
@@ -5802,30 +5700,30 @@ var TextToolbar = () => {
     tiptapEditor.chain().focus().setTextAlign(nextAlignment).run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor, currentAlignment]);
-  const handleCycleList = useCallback26(() => {
+  const handleCycleList = useCallback27(() => {
   }, [tiptapEditor]);
   const isInHeading = useMemo14(() => {
     if (!tiptapEditor) return false;
     const paragraphAttrs = tiptapEditor.getAttributes("paragraph");
     return (paragraphAttrs.headingLevel || 0) > 0;
   }, [tiptapEditor, updateCounter]);
-  const handleToggleBold = useCallback26(() => {
+  const handleToggleBold = useCallback27(() => {
     if (!tiptapEditor) return;
     if (isInHeading) return;
     tiptapEditor.chain().focus().toggleBold().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor, isInHeading]);
-  const handleToggleItalic = useCallback26(() => {
+  const handleToggleItalic = useCallback27(() => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().toggleItalic().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleToggleUnderline = useCallback26(() => {
+  const handleToggleUnderline = useCallback27(() => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().toggleUnderline().run();
     forceUpdate((n) => n + 1);
   }, [tiptapEditor]);
-  const handleToggleStrike = useCallback26(() => {
+  const handleToggleStrike = useCallback27(() => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().toggleStrike().run();
     forceUpdate((n) => n + 1);
@@ -5847,7 +5745,7 @@ var TextToolbar = () => {
     if (!tiptapEditor) return false;
     return tiptapEditor.isActive("strike");
   }, [tiptapEditor, updateCounter]);
-  const handleSetType = useCallback26((type) => {
+  const handleSetType = useCallback27((type) => {
     if (!tiptapEditor) return;
     const levelMap = {
       paragraph: 0,
@@ -5867,12 +5765,12 @@ var TextToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenTextColorPicker = useCallback26(() => {
+  const handleOpenTextColorPicker = useCallback27(() => {
     setColorType("Text color");
     setColorTarget("textColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenHighlightColorPicker = useCallback26(() => {
+  const handleOpenHighlightColorPicker = useCallback27(() => {
     setColorType("Highlight color");
     setColorTarget("highlightColor");
     setActiveView("color");
@@ -5885,7 +5783,7 @@ var TextToolbar = () => {
     if (!tiptapEditor) return "transparent";
     return tiptapEditor.getAttributes("textStyle").backgroundColor || "transparent";
   }, [tiptapEditor, updateCounter]);
-  const extractKnownFont = useCallback26((fontStack) => {
+  const extractKnownFont = useCallback27((fontStack) => {
     if (!fontStack) return "Arial";
     const fonts = fontStack.split(",").map((f) => f.trim().replace(/['"]/g, ""));
     for (const font of fonts) {
@@ -5902,7 +5800,7 @@ var TextToolbar = () => {
     }
     return extractKnownFont(textEditingStyles?.fontFamily);
   }, [tiptapEditor, updateCounter, textEditingStyles?.fontFamily, extractKnownFont]);
-  const handleSetFontFamily = useCallback26((font) => {
+  const handleSetFontFamily = useCallback27((font) => {
     if (!tiptapEditor) return;
     tiptapEditor.chain().focus().setFontFamily(font).run();
     forceUpdate((n) => n + 1);
@@ -6442,12 +6340,12 @@ var MergeFieldItem = ({ isResponsive, isInSectionColumn, tiptapEditor, mergeFiel
 };
 
 // src/core/editor/components/element-gear/button/toolbar.tsx
-import { useCallback as useCallback31, useMemo as useMemo19 } from "react";
+import { useCallback as useCallback32, useMemo as useMemo19 } from "react";
 import { get as lodashGet7 } from "lodash";
 import { BoldIcon as BoldIcon2, CaseUpperIcon as CaseUpperIcon2, ItalicIcon as ItalicIcon2, Strikethrough as Strikethrough2, Underline as Underline2 } from "lucide-react";
 
 // src/core/editor/hooks/use-border-radius.ts
-import { useMemo as useMemo15, useCallback as useCallback27 } from "react";
+import { useMemo as useMemo15, useCallback as useCallback28 } from "react";
 import { get as lodashGet4 } from "lodash";
 var useBorderRadius = (options = {}) => {
   const { focusIdx, updateElement, template } = useEditorStore();
@@ -6459,7 +6357,7 @@ var useBorderRadius = (options = {}) => {
     const rawValue = element?.attributes?.[attributeName];
     return parseBorderRadius(rawValue);
   }, [focusIdx, template, attributeName]);
-  const handleChange = useCallback27((value) => {
+  const handleChange = useCallback28((value) => {
     if (!focusIdx || !template) return;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = lodashGet4(template, path);
@@ -6478,7 +6376,7 @@ var useBorderRadius = (options = {}) => {
 };
 
 // src/core/editor/hooks/use-border.ts
-import { useMemo as useMemo16, useCallback as useCallback28 } from "react";
+import { useMemo as useMemo16, useCallback as useCallback29 } from "react";
 import { get as lodashGet5 } from "lodash";
 var useBorder = (options = {}) => {
   const { focusIdx, updateElement, template } = useEditorStore();
@@ -6495,7 +6393,7 @@ var useBorder = (options = {}) => {
   const width = parsedBorder.width;
   const color = parsedBorder.color;
   const isEnabled = width > 0;
-  const updateBorder = useCallback28((updates) => {
+  const updateBorder = useCallback29((updates) => {
     if (!focusIdx || !template || !element) return;
     const newBorder = {
       ...parsedBorder,
@@ -6508,13 +6406,13 @@ var useBorder = (options = {}) => {
       }
     });
   }, [focusIdx, template, element, parsedBorder, updateElement, attributeName]);
-  const setWidth = useCallback28((newWidth) => {
+  const setWidth = useCallback29((newWidth) => {
     updateBorder({ width: newWidth });
   }, [updateBorder]);
-  const setColor = useCallback28((newColor) => {
+  const setColor = useCallback29((newColor) => {
     updateBorder({ color: newColor });
   }, [updateBorder]);
-  const setEnabled = useCallback28((enabled) => {
+  const setEnabled = useCallback29((enabled) => {
     if (enabled) {
       updateBorder({ width: parsedBorder.width === 0 ? 1 : parsedBorder.width });
     } else {
@@ -6532,7 +6430,7 @@ var useBorder = (options = {}) => {
 };
 
 // src/core/editor/hooks/use-size.ts
-import { useMemo as useMemo17, useCallback as useCallback29 } from "react";
+import { useMemo as useMemo17, useCallback as useCallback30 } from "react";
 import { get as lodashGet6 } from "lodash";
 var parseSize = (value, defaultValue) => {
   if (!value) return defaultValue;
@@ -6560,13 +6458,13 @@ var useSize = (options = {}) => {
       height: parseSize(el?.attributes?.[heightAttribute], defaultHeight)
     };
   }, [focusIdx, template, widthAttribute, heightAttribute, defaultWidth, defaultHeight]);
-  const setWidth = useCallback29((value) => {
+  const setWidth = useCallback30((value) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [widthAttribute]: formatSize(value, widthUnit) }
     });
   }, [focusIdx, template, element, updateElement, widthAttribute, widthUnit]);
-  const setHeight = useCallback29((value) => {
+  const setHeight = useCallback30((value) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [heightAttribute]: formatSize(value, heightUnit) }
@@ -6577,10 +6475,10 @@ var useSize = (options = {}) => {
 
 // src/core/editor/components/button-text-settings.tsx
 import { TypeIcon as TypeIcon2 } from "lucide-react";
-import { useState as useState17, useEffect as useEffect11, useMemo as useMemo18, useCallback as useCallback30, memo as memo4 } from "react";
+import { useState as useState18, useMemo as useMemo18, useCallback as useCallback31, memo as memo4 } from "react";
 import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var ButtonTextSettings = memo4(function ButtonTextSettings2() {
-  const [isOpen, setIsOpen] = useState17(false);
+  const [isOpen, setIsOpen] = useState18(false);
   const focusIdx = useEditorStore((s) => s.focusIdx);
   const template = useEditorStore((s) => s.template);
   const updateElement = useEditorStore((s) => s.updateElement);
@@ -6597,114 +6495,40 @@ var ButtonTextSettings = memo4(function ButtonTextSettings2() {
     const parsed = parseFloat(buttonElement.attributes["line-height"]);
     return isNaN(parsed) ? DEFAULT_LINE_HEIGHT : parsed;
   }, [buttonElement]);
-  const [letterSpacingInputValue, setLetterSpacingInputValue] = useState17(
-    String(currentLetterSpacing)
-  );
-  const [isLetterSpacingInputFocused, setIsLetterSpacingInputFocused] = useState17(false);
-  const [lineHeightInputValue, setLineHeightInputValue] = useState17(
-    String(currentLineHeight)
-  );
-  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = useState17(false);
-  useEffect11(() => {
-    if (!isLetterSpacingInputFocused) {
-      setLetterSpacingInputValue(String(currentLetterSpacing));
-    }
-  }, [currentLetterSpacing, isLetterSpacingInputFocused]);
-  useEffect11(() => {
-    if (!isLineHeightInputFocused) {
-      setLineHeightInputValue(String(currentLineHeight));
-    }
-  }, [currentLineHeight, isLineHeightInputFocused]);
-  const handleLetterSpacingSliderChange = useCallback30((values) => {
+  const commitLetterSpacing = useCallback31((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 = useCallback30((e) => {
-    setLetterSpacingInputValue(e.target.value);
-  }, []);
-  const applyLetterSpacing = useCallback30(() => {
+  const commitLineHeight = useCallback31((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 = useCallback30(() => {
-    setIsLetterSpacingInputFocused(false);
-    applyLetterSpacing();
-  }, [applyLetterSpacing]);
-  const handleLetterSpacingInputKeyDown = useCallback30((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      applyLetterSpacing();
-      e.target.blur();
-    }
-  }, [applyLetterSpacing]);
-  const handleLineHeightSliderChange = useCallback30((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 = useCallback30((e) => {
-    setLineHeightInputValue(e.target.value);
-  }, []);
-  const applyLineHeight = useCallback30(() => {
-    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 = useCallback30(() => {
-    setIsLineHeightInputFocused(false);
-    applyLineHeight();
-  }, [applyLineHeight]);
-  const handleLineHeightInputKeyDown = useCallback30((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 = useCallback31((values) => {
+    commitLetterSpacing(values[0]);
+  }, [commitLetterSpacing]);
+  const handleLineHeightSliderChange = useCallback31((values) => {
+    commitLineHeight(values[0]);
+  }, [commitLineHeight]);
   return /* @__PURE__ */ jsxs40(Tooltip, { children: [
     /* @__PURE__ */ jsxs40(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
@@ -6741,11 +6565,11 @@ var ButtonTextSettings = memo4(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,
@@ -6772,11 +6596,11 @@ var ButtonTextSettings = memo4(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,
@@ -6845,36 +6669,36 @@ var ButtonToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = useCallback31(() => {
+  const handleOpenBgColorPicker = useCallback32(() => {
     setColorType("Button Color");
     setColorTarget("buttonBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback31(() => {
+  const handleOpenStrokeColorPicker = useCallback32(() => {
     setColorType("Stroke Color");
     setColorTarget("buttonStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = useCallback31(() => {
+  const handleOpenTextColorPicker = useCallback32(() => {
     setColorType("Text Color");
     setColorTarget("buttonTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = useCallback31(() => {
+  const handleToggleBold = useCallback32(() => {
     if (!focusIdx || !currentElement) return;
     const newWeight = isBold ? "normal" : "bold";
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-weight": newWeight }
     });
   }, [focusIdx, currentElement, isBold, updateElement]);
-  const handleToggleItalic = useCallback31(() => {
+  const handleToggleItalic = useCallback32(() => {
     if (!focusIdx || !currentElement) return;
     const newStyle = isItalic ? "normal" : "italic";
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-style": newStyle }
     });
   }, [focusIdx, currentElement, isItalic, updateElement]);
-  const handleToggleUnderline = useCallback31(() => {
+  const handleToggleUnderline = useCallback32(() => {
     if (!focusIdx || !currentElement) return;
     const currentDecoration = currentElement.attributes?.["text-decoration"] || "";
     let newDecoration;
@@ -6887,7 +6711,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-decoration": newDecoration || "none" }
     });
   }, [focusIdx, currentElement, isUnderline, updateElement]);
-  const handleToggleStrike = useCallback31(() => {
+  const handleToggleStrike = useCallback32(() => {
     if (!focusIdx || !currentElement) return;
     const currentDecoration = currentElement.attributes?.["text-decoration"] || "";
     let newDecoration;
@@ -6900,7 +6724,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-decoration": newDecoration || "none" }
     });
   }, [focusIdx, currentElement, isStrikethrough, updateElement]);
-  const handleCycleAlignment = useCallback31(() => {
+  const handleCycleAlignment = useCallback32(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentAlignment);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -6909,7 +6733,7 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "text-align": nextAlignment }
     });
   }, [focusIdx, currentElement, currentAlignment, updateElement]);
-  const handleCycleButtonAlign = useCallback31(() => {
+  const handleCycleButtonAlign = useCallback32(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentButtonAlign);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -6918,13 +6742,13 @@ var ButtonToolbar = () => {
       attributes: { ...currentElement.attributes, "align": nextAlign }
     });
   }, [focusIdx, currentElement, currentButtonAlign, updateElement]);
-  const handleSetFontFamily = useCallback31((font) => {
+  const handleSetFontFamily = useCallback32((font) => {
     if (!focusIdx || !currentElement) return;
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-family": font }
     });
   }, [focusIdx, currentElement, updateElement]);
-  const handleFontSizeChange = useCallback31((size2) => {
+  const handleFontSizeChange = useCallback32((size2) => {
     if (!focusIdx || !currentElement) return;
     updateElement(focusIdx, {
       attributes: { ...currentElement.attributes, "font-size": `${size2}px` }
@@ -7112,15 +6936,15 @@ var ButtonToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/section/toolbar.tsx
-import { useCallback as useCallback33, useMemo as useMemo21 } from "react";
+import { useCallback as useCallback34, useMemo as useMemo21 } from "react";
 import { get as lodashGet9 } from "lodash";
 
 // src/core/editor/components/image-menu.tsx
 import { ImageIcon, TrashIcon as TrashIcon4, UploadIcon } from "lucide-react";
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 
 // src/core/editor/hooks/use-image.ts
-import { useMemo as useMemo20, useCallback as useCallback32 } from "react";
+import { useMemo as useMemo20, useCallback as useCallback33 } from "react";
 import { get as lodashGet8 } from "lodash";
 var useImage = (options = {}) => {
   const { type = "background" } = options;
@@ -7152,13 +6976,13 @@ var useImage = (options = {}) => {
       height: el?.attributes?.["height"] || "auto"
     };
   }, [focusIdx, template, attributeName]);
-  const setUrl = useCallback32((newUrl) => {
+  const setUrl = useCallback33((newUrl) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, [attributeName]: newUrl }
     });
   }, [focusIdx, element, updateElement, attributeName]);
-  const removeUrl = useCallback32(() => {
+  const removeUrl = useCallback33(() => {
     if (!focusIdx || !element) return;
     if (type === "background") {
       const newAttributes = { ...element.attributes };
@@ -7171,37 +6995,37 @@ var useImage = (options = {}) => {
       });
     }
   }, [focusIdx, element, updateElement, attributeName, type]);
-  const setPositionX = useCallback32((value) => {
+  const setPositionX = useCallback33((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-position-x": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setPositionY = useCallback32((value) => {
+  const setPositionY = useCallback33((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-position-y": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setBackgroundSize = useCallback32((value) => {
+  const setBackgroundSize = useCallback33((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-size": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setBackgroundRepeat = useCallback32((value) => {
+  const setBackgroundRepeat = useCallback33((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, "background-repeat": value }
     });
   }, [focusIdx, element, updateElement]);
-  const setWidth = useCallback32((value) => {
+  const setWidth = useCallback33((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, width: value }
     });
   }, [focusIdx, element, updateElement]);
-  const setHeight = useCallback32((value) => {
+  const setHeight = useCallback33((value) => {
     if (!focusIdx || !element) return;
     updateElement(focusIdx, {
       attributes: { ...element.attributes, height: value }
@@ -7357,7 +7181,7 @@ var BgImgOptions = () => {
 // src/core/editor/components/image-menu.tsx
 import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var ImageMenu = ({ type }) => {
-  const [isOpen, setIsOpen] = useState18(false);
+  const [isOpen, setIsOpen] = useState19(false);
   const { setActiveView, setImageTarget } = useSidebarContext();
   const { url, removeUrl } = useImage({ type });
   const handleSelectImage = () => {
@@ -7376,9 +7200,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__ */ jsx55("img", { src: url, alt: "Background Image", className: "w-full h-full object-cover rounded-[12px]" }) : /* @__PURE__ */ jsx55(ImageIcon, { className: "w-4 h-4" })
+          children: url && !url.includes("placeholder_image.png") && url !== DEFAULT_PROPERTY_PLACEHOLDER_IMAGE ? /* @__PURE__ */ jsx55("img", { src: url, alt: "Background Image", className: "w-full h-full object-cover rounded-[8px]" }) : /* @__PURE__ */ jsx55(ImageIcon, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ jsxs44(PopoverContent, { className: "w-64 z-51 mt-1 rounded-[12px] p-3", children: [
@@ -7418,12 +7242,12 @@ var SectionToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = useCallback33(() => {
+  const handleOpenBgColorPicker = useCallback34(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback33(() => {
+  const handleOpenStrokeColorPicker = useCallback34(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
@@ -7486,7 +7310,7 @@ var SectionToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/section-column/toolbar.tsx
-import { useCallback as useCallback34, useMemo as useMemo22, useState as useState19 } from "react";
+import { useCallback as useCallback35, useMemo as useMemo22, useState as useState20 } from "react";
 import { CheckIcon as CheckIcon6, Columns2Icon, Columns3Icon, Columns4Icon } from "lucide-react";
 import { get as lodashGet10 } from "lodash";
 import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
@@ -7494,8 +7318,8 @@ 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] = useState19(false);
-  const [verticalAlignOpen, setVerticalAlignOpen] = useState19(false);
+  const [columnCountOpen, setColumnCountOpen] = useState20(false);
+  const [verticalAlignOpen, setVerticalAlignOpen] = useState20(false);
   const element = useMemo22(() => {
     if (!focusIdx || !template) return null;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
@@ -7515,17 +7339,17 @@ var SectionColumnToolbar = () => {
       deleteElement(focusIdx);
     }
   };
-  const handleOpenBgColorPicker = useCallback34(() => {
+  const handleOpenBgColorPicker = useCallback35(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback34(() => {
+  const handleOpenStrokeColorPicker = useCallback35(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleVerticalAlignChange = useCallback34((align) => {
+  const handleVerticalAlignChange = useCallback35((align) => {
     if (!focusIdx || !element?.children) return;
     const updatedChildren = element.children.map((child) => ({
       ...child,
@@ -7640,7 +7464,7 @@ var SectionColumnToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/page/toolbar.tsx
-import { useCallback as useCallback35, useMemo as useMemo23 } from "react";
+import { useCallback as useCallback36, useMemo as useMemo23 } from "react";
 import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var PageToolbar = () => {
   const { focusIdx, template } = useEditorStore();
@@ -7650,7 +7474,7 @@ var PageToolbar = () => {
     const page = template.content?.[0];
     return page?.attributes?.["background-color"];
   }, [focusIdx, template]);
-  const handleOpenBgColorPicker = useCallback35(() => {
+  const handleOpenBgColorPicker = useCallback36(() => {
     setColorType("Background Color");
     setColorTarget("sectionBgColor");
     setActiveView("color");
@@ -7671,10 +7495,10 @@ var PageToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/spacer/toolbar.tsx
-import { useCallback as useCallback37, useMemo as useMemo25 } from "react";
+import { useCallback as useCallback38, useMemo as useMemo25 } from "react";
 
 // src/core/editor/hooks/use-height.ts
-import { useMemo as useMemo24, useCallback as useCallback36 } from "react";
+import { useMemo as useMemo24, useCallback as useCallback37 } from "react";
 import { get as lodashGet11 } from "lodash";
 var useHeight = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
@@ -7687,7 +7511,7 @@ var useHeight = () => {
     const parsed = parseInt(rawValue.replace("px", ""), 10);
     return isNaN(parsed) ? 12 : Math.max(4, parsed);
   }, [focusIdx, template]);
-  const handleChange = useCallback36((value) => {
+  const handleChange = useCallback37((value) => {
     if (!focusIdx || !template) return;
     const path = focusIdx.startsWith("content.") ? focusIdx.replace("content.", "content[0].").replace(/\.\[(\d+)\]/g, "[$1]") : focusIdx;
     const element = lodashGet11(template, path);
@@ -7719,7 +7543,7 @@ var SpacerToolbar = () => {
     const element = lodashGet12(template, path);
     return element?.attributes?.["container-background-color"];
   }, [focusIdx, template]);
-  const handleOpenBgColorPicker = useCallback37(() => {
+  const handleOpenBgColorPicker = useCallback38(() => {
     setColorType("Background Color");
     setColorTarget("spacerBgColor");
     setActiveView("color");
@@ -7743,14 +7567,14 @@ var SpacerToolbar = () => {
 
 // src/core/editor/components/element-gear/social/toolbar.tsx
 import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon as BoldIcon3, CaseUpperIcon as CaseUpperIcon3, CheckIcon as CheckIcon7, ItalicIcon as ItalicIcon3, Scan, Strikethrough as Strikethrough3, Underline as Underline3 } from "lucide-react";
-import { useCallback as useCallback39, useMemo as useMemo27 } from "react";
+import { useCallback as useCallback40, useMemo as useMemo27 } from "react";
 
 // src/core/editor/components/social-line-spacing.tsx
 import { TypeIcon as TypeIcon3 } from "lucide-react";
-import { useState as useState20, useEffect as useEffect12, useMemo as useMemo26, useCallback as useCallback38, memo as memo5 } from "react";
+import { useState as useState21, useMemo as useMemo26, useCallback as useCallback39, memo as memo5 } from "react";
 import { jsx as jsx60, jsxs as jsxs49 } from "react/jsx-runtime";
 var SocialLineSpacing = memo5(function SocialLineSpacing2() {
-  const [isOpen, setIsOpen] = useState20(false);
+  const [isOpen, setIsOpen] = useState21(false);
   const focusIdx = useEditorStore((s) => s.focusIdx);
   const template = useEditorStore((s) => s.template);
   const updateElement = useEditorStore((s) => s.updateElement);
@@ -7762,60 +7586,23 @@ var SocialLineSpacing = memo5(function SocialLineSpacing2() {
     const parsed = parseFloat(socialElement.attributes["line-height"]);
     return isNaN(parsed) ? DEFAULT_LINE_HEIGHT : parsed;
   }, [socialElement]);
-  const [lineHeightInputValue, setLineHeightInputValue] = useState20(
-    String(currentLineHeight)
-  );
-  const [isLineHeightInputFocused, setIsLineHeightInputFocused] = useState20(false);
-  useEffect12(() => {
-    if (!isLineHeightInputFocused) {
-      setLineHeightInputValue(String(currentLineHeight));
-    }
-  }, [currentLineHeight, isLineHeightInputFocused]);
-  const handleLineHeightSliderChange = useCallback38((values) => {
+  const commitLineHeight = useCallback39((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 = useCallback38((e) => {
-    setLineHeightInputValue(e.target.value);
-  }, []);
-  const applyLineHeight = useCallback38(() => {
-    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 = useCallback38(() => {
-    setIsLineHeightInputFocused(false);
-    applyLineHeight();
-  }, [applyLineHeight]);
-  const handleLineHeightInputKeyDown = useCallback38((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 = useCallback39((values) => {
+    commitLineHeight(values[0]);
+  }, [commitLineHeight]);
   return /* @__PURE__ */ jsxs49(Tooltip, { children: [
     /* @__PURE__ */ jsxs49(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx60(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(
@@ -7851,11 +7638,11 @@ var SocialLineSpacing = memo5(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,
@@ -7927,12 +7714,12 @@ var SocialToolbar = () => {
     const firstChild = socialElement?.children?.[0];
     return firstChild?.attributes?.["align"] || "center";
   }, [socialElement]);
-  const handleOpenBgColorPicker = useCallback39(() => {
+  const handleOpenBgColorPicker = useCallback40(() => {
     setColorType("Background Color");
     setColorTarget("socialBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleSocialStyleChange = useCallback39((value) => {
+  const handleSocialStyleChange = useCallback40((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -7947,7 +7734,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconSizeChange = useCallback39((value) => {
+  const handleIconSizeChange = useCallback40((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -7962,7 +7749,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconStyleChange = useCallback39((value) => {
+  const handleIconStyleChange = useCallback40((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -7977,7 +7764,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleIconColorChange = useCallback39((value) => {
+  const handleIconColorChange = useCallback40((value) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -7992,7 +7779,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleSetFontFamily = useCallback39((font) => {
+  const handleSetFontFamily = useCallback40((font) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8003,7 +7790,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleFontSizeChange = useCallback39((size) => {
+  const handleFontSizeChange = useCallback40((size) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8014,12 +7801,12 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleOpenTextColorPicker = useCallback39(() => {
+  const handleOpenTextColorPicker = useCallback40(() => {
     setColorType("Text Color");
     setColorTarget("socialTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = useCallback39(() => {
+  const handleToggleBold = useCallback40(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8031,7 +7818,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isBold, updateElement]);
-  const handleToggleItalic = useCallback39(() => {
+  const handleToggleItalic = useCallback40(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8043,7 +7830,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isItalic, updateElement]);
-  const handleToggleUnderline = useCallback39(() => {
+  const handleToggleUnderline = useCallback40(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8061,7 +7848,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isUnderline, updateElement]);
-  const handleToggleStrike = useCallback39(() => {
+  const handleToggleStrike = useCallback40(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8079,7 +7866,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, isStrikethrough, updateElement]);
-  const handleModeChange = useCallback39((mode) => {
+  const handleModeChange = useCallback40((mode) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8090,7 +7877,7 @@ var SocialToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleCycleAlign = useCallback39(() => {
+  const handleCycleAlign = useCallback40(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8109,7 +7896,7 @@ var SocialToolbar = () => {
       children: updatedChildren
     });
   }, [focusIdx, currentAlign, updateElement]);
-  const handleCycleSocialItemAlign = useCallback39(() => {
+  const handleCycleSocialItemAlign = useCallback40(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8353,7 +8140,7 @@ var SocialToolbar = () => {
 
 // src/core/editor/components/element-gear/social-item/toolbar.tsx
 import { AlignCenterIcon as AlignCenterIcon2, AlignLeftIcon as AlignLeftIcon2, AlignRightIcon as AlignRightIcon2, BoldIcon as BoldIcon4, CaseUpperIcon as CaseUpperIcon4, ItalicIcon as ItalicIcon4, RemoveFormatting, Strikethrough as Strikethrough4, Underline as Underline4 } from "lucide-react";
-import { useCallback as useCallback40, useMemo as useMemo28 } from "react";
+import { useCallback as useCallback41, useMemo as useMemo28 } from "react";
 import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs51 } from "react/jsx-runtime";
 var ALIGNMENTS3 = ["left", "center", "right"];
 var SOCIAL_ITEM_ALIGNMENT_ICONS2 = {
@@ -8395,7 +8182,7 @@ var SocialItemToolbar = () => {
   const currentAlign = useMemo28(() => {
     return socialItemElement?.attributes?.["align"] || "center";
   }, [socialItemElement]);
-  const handleSetFontFamily = useCallback40((font) => {
+  const handleSetFontFamily = useCallback41((font) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8406,7 +8193,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleFontSizeChange = useCallback40((size) => {
+  const handleFontSizeChange = useCallback41((size) => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8417,12 +8204,12 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, updateElement]);
-  const handleOpenTextColorPicker = useCallback40(() => {
+  const handleOpenTextColorPicker = useCallback41(() => {
     setColorType("Text Color");
     setColorTarget("socialItemTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggleBold = useCallback40(() => {
+  const handleToggleBold = useCallback41(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8434,7 +8221,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isBold, updateElement]);
-  const handleToggleItalic = useCallback40(() => {
+  const handleToggleItalic = useCallback41(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8446,7 +8233,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isItalic, updateElement]);
-  const handleToggleUnderline = useCallback40(() => {
+  const handleToggleUnderline = useCallback41(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8464,7 +8251,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isUnderline, updateElement]);
-  const handleToggleStrike = useCallback40(() => {
+  const handleToggleStrike = useCallback41(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8482,7 +8269,7 @@ var SocialItemToolbar = () => {
       }
     });
   }, [focusIdx, isStrikethrough, updateElement]);
-  const handleRemoveFormatting = useCallback40(() => {
+  const handleRemoveFormatting = useCallback41(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8500,7 +8287,7 @@ var SocialItemToolbar = () => {
       attributes: restAttributes
     });
   }, [focusIdx, updateElement]);
-  const handleCycleAlign = useCallback40(() => {
+  const handleCycleAlign = useCallback41(() => {
     if (!focusIdx) return;
     const currentTemplate = useEditorStore.getState().template;
     const element = getValueByIdx(currentTemplate, focusIdx);
@@ -8646,7 +8433,7 @@ var SocialItemToolbar = () => {
 
 // src/core/editor/components/element-gear/divider/_components/stroke-weight.tsx
 import { MinusIcon as MinusIcon4 } from "lucide-react";
-import { useState as useState21, useEffect as useEffect13, useCallback as useCallback41 } from "react";
+import { useState as useState22, useCallback as useCallback42 } from "react";
 import { jsx as jsx63, jsxs as jsxs52 } from "react/jsx-runtime";
 var StrokeWeight2 = ({
   width,
@@ -8655,34 +8442,11 @@ var StrokeWeight2 = ({
   onStyleChange,
   tooltipText = "Stroke Weight"
 }) => {
-  const [isOpen, setIsOpen] = useState21(false);
-  const [inputValue, setInputValue] = useState21(width.toString());
-  useEffect13(() => {
-    setInputValue(width.toString());
-  }, [width]);
-  const handleSliderChange = useCallback41((values) => {
-    const newWidth = values[0];
-    setInputValue(newWidth.toString());
-    onWidthChange(newWidth);
+  const [isOpen, setIsOpen] = useState22(false);
+  const input = useEditableNumber({ value: width, onChange: onWidthChange, min: 1, max: 50 });
+  const handleSliderChange = useCallback42((values) => {
+    onWidthChange(values[0]);
   }, [onWidthChange]);
-  const handleInputChange = useCallback41((e) => {
-    setInputValue(e.target.value);
-  }, []);
-  const handleInputBlur = useCallback41(() => {
-    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 = useCallback41((e) => {
-    if (e.key === "Enter") {
-      handleInputBlur();
-    }
-  }, [handleInputBlur]);
   return /* @__PURE__ */ jsxs52(Tooltip, { children: [
     /* @__PURE__ */ jsxs52(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx63(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
@@ -8748,10 +8512,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
@@ -8766,7 +8531,7 @@ var StrokeWeight2 = ({
 };
 
 // src/core/editor/hooks/use-divider-border.ts
-import { useMemo as useMemo29, useCallback as useCallback42 } from "react";
+import { useMemo as useMemo29, useCallback as useCallback43 } from "react";
 var useDividerBorder = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
   const { element, width, style, color } = useMemo29(() => {
@@ -8787,7 +8552,7 @@ var useDividerBorder = () => {
       color: rawColor
     };
   }, [focusIdx, template]);
-  const setWidth = useCallback42((newWidth) => {
+  const setWidth = useCallback43((newWidth) => {
     if (!focusIdx || !template || !element) return;
     const clampedWidth = Math.max(1, Math.min(50, newWidth));
     updateElement(focusIdx, {
@@ -8797,7 +8562,7 @@ var useDividerBorder = () => {
       }
     });
   }, [focusIdx, template, element, updateElement]);
-  const setStyle = useCallback42((newStyle) => {
+  const setStyle = useCallback43((newStyle) => {
     if (!focusIdx || !template || !element) return;
     updateElement(focusIdx, {
       attributes: {
@@ -8816,7 +8581,7 @@ var useDividerBorder = () => {
 };
 
 // src/core/editor/hooks/use-width.ts
-import { useMemo as useMemo30, useCallback as useCallback43 } from "react";
+import { useMemo as useMemo30, useCallback as useCallback44 } from "react";
 var useWidth = () => {
   const { focusIdx, updateElement, template } = useEditorStore();
   const currentValue = useMemo30(() => {
@@ -8827,7 +8592,7 @@ var useWidth = () => {
     const parsed = parseFloat(rawValue.replace("%", ""));
     return isNaN(parsed) ? 100 : Math.max(10, Math.min(100, parsed));
   }, [focusIdx, template]);
-  const handleChange = useCallback43((value) => {
+  const handleChange = useCallback44((value) => {
     if (!focusIdx || !template) return;
     const element = getValueByIdx(template, focusIdx);
     if (!element) return;
@@ -8846,7 +8611,7 @@ var useWidth = () => {
 };
 
 // src/core/editor/components/element-gear/divider/toolbar.tsx
-import { useCallback as useCallback44, useMemo as useMemo31 } from "react";
+import { useCallback as useCallback45, useMemo as useMemo31 } from "react";
 import lodashGet13 from "lodash/get";
 import { jsx as jsx64, jsxs as jsxs53 } from "react/jsx-runtime";
 var DIVIDER_ALIGNMENTS = ["left", "center", "right"];
@@ -8863,17 +8628,17 @@ var DividerToolbar = () => {
   }, [focusIdx, template]);
   const currentAlign = currentElement?.attributes?.align || "center";
   const currentBgColor = currentElement?.attributes?.["container-background-color"];
-  const handleOpenBgColorPicker = useCallback44(() => {
+  const handleOpenBgColorPicker = useCallback45(() => {
     setColorType("Background Color");
     setColorTarget("dividerBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback44(() => {
+  const handleOpenStrokeColorPicker = useCallback45(() => {
     setColorType("Stroke Color");
     setColorTarget("dividerBorderColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleCycleAlign = useCallback44(() => {
+  const handleCycleAlign = useCallback45(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = DIVIDER_ALIGNMENTS.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % DIVIDER_ALIGNMENTS.length;
@@ -8946,7 +8711,7 @@ var DividerToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/image/toolbar.tsx
-import { useCallback as useCallback45, useMemo as useMemo32 } from "react";
+import { useCallback as useCallback46, useMemo as useMemo32 } from "react";
 import { get as lodashGet14 } from "lodash";
 import { jsx as jsx65, jsxs as jsxs54 } from "react/jsx-runtime";
 var ImageToolbar = () => {
@@ -8966,17 +8731,17 @@ var ImageToolbar = () => {
   const border = useBorder();
   const borderRadius = useBorderRadius();
   const padding = usePadding();
-  const handleOpenBgColorPicker = useCallback45(() => {
+  const handleOpenBgColorPicker = useCallback46(() => {
     setColorType("Background Color");
     setColorTarget("imageBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback45(() => {
+  const handleOpenStrokeColorPicker = useCallback46(() => {
     setColorType("Stroke Color");
     setColorTarget("strokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleCycleAlign = useCallback45(() => {
+  const handleCycleAlign = useCallback46(() => {
     if (!focusIdx || !currentElement) return;
     const currentIndex = BUTTON_ALIGNMENTS.indexOf(currentAlign);
     const nextIndex = (currentIndex + 1) % BUTTON_ALIGNMENTS.length;
@@ -9059,11 +8824,11 @@ var ImageToolbar = () => {
 };
 
 // src/core/editor/components/element-gear/property/toolbar.tsx
-import { useMemo as useMemo34, useCallback as useCallback47 } from "react";
+import { useMemo as useMemo34, useCallback as useCallback48 } from "react";
 
 // src/core/editor/components/property-edit-menu.tsx
-import { ChevronDownIcon as ChevronDownIcon4, CircleCheckIcon, HouseIcon } from "lucide-react";
-import { useState as useState22, useCallback as useCallback46, useMemo as useMemo33, useEffect as useEffect14 } from "react";
+import { ChevronDownIcon as ChevronDownIcon4, CircleCheckIcon, SquarePen } from "lucide-react";
+import { useState as useState23, useCallback as useCallback47, useMemo as useMemo33 } from "react";
 
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
@@ -9144,12 +8909,16 @@ var CARD_FEATURES = {
 var PropertyEditMenu = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
   const { activeView, colorTarget, setActiveView, setColorType, setColorTarget } = useSidebarContext();
-  const [isOpen, setIsOpen] = useState22(false);
-  const [openSection, setOpenSection] = useState22(null);
-  const [openhouseEnabled, setOpenhouseEnabled] = useState22(true);
-  const [openhouseDate, setOpenhouseDate] = useState22(/* @__PURE__ */ new Date());
-  const [openhouseStartTime, setOpenhouseStartTime] = useState22("12:00");
-  const [openhouseEndTime, setOpenhouseEndTime] = useState22("13:00");
+  const [isOpen, setIsOpen] = useState23(false);
+  const [openSection, setOpenSection] = useState23(null);
+  const [openhouseDate, setOpenhouseDate] = useState23(/* @__PURE__ */ new Date());
+  const [openhouseStartTime, setOpenhouseStartTime] = useState23("12:00");
+  const [openhouseEndTime, setOpenhouseEndTime] = useState23("13:00");
+  const [addressLine1Input, setAddressLine1Input] = useState23("");
+  const [addressLine2Input, setAddressLine2Input] = useState23("");
+  const [cityInput, setCityInput] = useState23("");
+  const [stateInput, setStateInput] = useState23("");
+  const [zipInput, setZipInput] = useState23("");
   const propertyElement = useMemo33(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
@@ -9160,20 +8929,6 @@ var PropertyEditMenu = () => {
     const rawPrice = propertyElement?.attributes?.["price"] || "";
     return parsePrice(rawPrice);
   }, [propertyElement]);
-  const [priceInput, setPriceInput] = useState22(currentPrice);
-  useEffect14(() => {
-    setPriceInput(currentPrice);
-  }, [currentPrice]);
-  const handlePriceBlur = useCallback46(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (priceInput === currentPrice) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "price": priceInput
-      }
-    });
-  }, [focusIdx, propertyElement, priceInput, currentPrice, updateElement]);
   const currentBeds = useMemo33(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
   const currentBaths = useMemo33(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
   const currentSqft = useMemo33(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
@@ -9191,200 +8946,57 @@ var PropertyEditMenu = () => {
   const currentAddress = useMemo33(() => propertyElement?.attributes?.["address"] || "", [propertyElement]);
   const currentCity = useMemo33(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
   const currentCountry = useMemo33(() => propertyElement?.attributes?.["country"] || "USA", [propertyElement]);
-  const [bedsInput, setBedsInput] = useState22(currentBeds);
-  const [bathsInput, setBathsInput] = useState22(currentBaths);
-  const [sqftInput, setSqftInput] = useState22(currentSqft);
-  const [descriptionInput, setDescriptionInput] = useState22(currentDescription);
-  const [isDescriptionEnabled, setIsDescriptionEnabled] = useState22(!!currentIsDescription);
-  const [brokerageInput, setBrokerageInput] = useState22(currentBrokerage);
-  const [isBrokerageEnabled, setIsBrokerageEnabled] = useState22(!!currentIsBrokerage);
-  const [statusInput, setStatusInput] = useState22(currentStatus);
-  const [isStatusEnabled, setIsStatusEnabled] = useState22(!!currentIsStatus);
-  const [isNewEnabled, setIsNewEnabled] = useState22(!!currentIsNew);
-  const [addressLine1Input, setAddressLine1Input] = useState22("");
-  const [addressLine2Input, setAddressLine2Input] = useState22("");
-  const [cityInput, setCityInput] = useState22("");
-  const [stateInput, setStateInput] = useState22("");
-  const [zipInput, setZipInput] = useState22("");
-  const [countryInput, setCountryInput] = useState22("USA");
-  useEffect14(() => {
-    setBedsInput(currentBeds);
-  }, [currentBeds]);
-  useEffect14(() => {
-    setBathsInput(currentBaths);
-  }, [currentBaths]);
-  useEffect14(() => {
-    setSqftInput(currentSqft);
-  }, [currentSqft]);
-  useEffect14(() => {
-    setDescriptionInput(currentDescription);
-  }, [currentDescription]);
-  useEffect14(() => {
-    setIsDescriptionEnabled(!!currentIsDescription);
-  }, [currentIsDescription]);
-  useEffect14(() => {
-    setBrokerageInput(currentBrokerage);
-  }, [currentBrokerage]);
-  useEffect14(() => {
-    setIsBrokerageEnabled(!!currentIsBrokerage);
-  }, [currentIsBrokerage]);
-  useEffect14(() => {
-    setStatusInput(currentStatus);
-  }, [currentStatus]);
-  useEffect14(() => {
-    setIsStatusEnabled(!!currentIsStatus);
-  }, [currentIsStatus]);
-  useEffect14(() => {
-    setIsNewEnabled(!!currentIsNew);
-  }, [currentIsNew]);
-  useEffect14(() => {
-    setOpenhouseEnabled(!!currentIsOpenHouse);
-  }, [currentIsOpenHouse]);
-  useEffect14(() => {
-    if (currentOpenHouseDate) {
-      const parsed = new Date(currentOpenHouseDate);
-      if (!isNaN(parsed.getTime())) {
-        setOpenhouseDate(parsed);
-      }
-    }
-  }, [currentOpenHouseDate]);
-  useEffect14(() => {
-    if (currentOpenHouseTime) {
-      const [start, end] = currentOpenHouseTime.split("-");
-      if (start) setOpenhouseStartTime(start);
-      if (end) setOpenhouseEndTime(end);
-    }
-  }, [currentOpenHouseTime]);
-  useEffect14(() => {
-    setAddressLine1Input(currentAddress);
-    setAddressLine2Input("");
-  }, [currentAddress]);
-  useEffect14(() => {
-    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]);
-  useEffect14(() => {
-    setCountryInput(currentCountry);
-  }, [currentCountry]);
-  const handleBedsBlur = useCallback46(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (bedsInput === currentBeds) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "beds": bedsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bedsInput, currentBeds, updateElement]);
-  const handleBathsBlur = useCallback46(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (bathsInput === currentBaths) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "baths": bathsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bathsInput, currentBaths, updateElement]);
-  const handleSqftBlur = useCallback46(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (sqftInput === currentSqft) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "sqft": sqftInput
-      }
-    });
-  }, [focusIdx, propertyElement, sqftInput, currentSqft, updateElement]);
-  const handleDescriptionBlur = useCallback46(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (descriptionInput === currentDescription) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "description": descriptionInput
-      }
-    });
-  }, [focusIdx, propertyElement, descriptionInput, currentDescription, updateElement]);
-  const handleIsDescriptionChange = useCallback46((checked) => {
-    setIsDescriptionEnabled(checked);
+  const commitAttribute = useCallback47((key, value) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "is-description": checked ? "show" : ""
-      }
+      attributes: { ...propertyElement.attributes, [key]: value }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleBrokerageBlur = useCallback46(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (brokerageInput === currentBrokerage) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "brokerage": brokerageInput
-      }
-    });
-  }, [focusIdx, propertyElement, brokerageInput, currentBrokerage, updateElement]);
-  const handleIsBrokerageChange = useCallback46((checked) => {
-    setIsBrokerageEnabled(checked);
+  const commitPrice = useCallback47((v) => commitAttribute("price", v), [commitAttribute]);
+  const commitBeds = useCallback47((v) => commitAttribute("beds", v), [commitAttribute]);
+  const commitBaths = useCallback47((v) => commitAttribute("baths", v), [commitAttribute]);
+  const commitSqft = useCallback47((v) => commitAttribute("sqft", v), [commitAttribute]);
+  const commitDescription = useCallback47((v) => commitAttribute("description", v), [commitAttribute]);
+  const commitBrokerage = useCallback47((v) => commitAttribute("brokerage", v), [commitAttribute]);
+  const commitStatus = useCallback47((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 = useCallback47((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 = useCallback46(() => {
+  const handleIsBrokerageChange = useCallback47((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 = useCallback46((checked) => {
-    setIsStatusEnabled(checked);
+  }, [focusIdx, propertyElement, updateElement]);
+  const handleIsStatusChange = useCallback47((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 = useCallback46((checked) => {
-    setIsNewEnabled(checked);
+  const handleIsNewChange = useCallback47((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 = useCallback46((checked) => {
-    setOpenhouseEnabled(checked);
+  const handleIsOpenHouseChange = useCallback47((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 = useCallback46(() => {
+  const handleOpenHouseDateBlur = useCallback47(() => {
     if (!focusIdx || !propertyElement) return;
     const newDate = openhouseDate ? openhouseDate.toISOString().split("T")[0] : "";
     if (newDate === currentOpenHouseDate) return;
@@ -9395,7 +9007,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, openhouseDate, currentOpenHouseDate, updateElement]);
-  const handleOpenHouseTimeBlur = useCallback46(() => {
+  const handleOpenHouseTimeBlur = useCallback47(() => {
     if (!focusIdx || !propertyElement) return;
     const newTime = `${openhouseStartTime}-${openhouseEndTime}`;
     if (newTime === currentOpenHouseTime) return;
@@ -9406,7 +9018,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, openhouseStartTime, openhouseEndTime, currentOpenHouseTime, updateElement]);
-  const handleAddressBlur = useCallback46(() => {
+  const handleAddressBlur = useCallback47(() => {
     if (!focusIdx || !propertyElement) return;
     const newAddress = addressLine2Input ? `${addressLine1Input}, ${addressLine2Input}` : addressLine1Input;
     if (newAddress === currentAddress) return;
@@ -9417,7 +9029,7 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, addressLine1Input, addressLine2Input, currentAddress, updateElement]);
-  const handleCityBlur = useCallback46(() => {
+  const handleCityBlur = useCallback47(() => {
     if (!focusIdx || !propertyElement) return;
     const newCity = zipInput ? `${cityInput}, ${stateInput} ${zipInput}` : stateInput ? `${cityInput}, ${stateInput}` : cityInput;
     if (newCity === currentCity) return;
@@ -9428,41 +9040,68 @@ var PropertyEditMenu = () => {
       }
     });
   }, [focusIdx, propertyElement, cityInput, stateInput, zipInput, currentCity, updateElement]);
-  const handleCountryChange = useCallback46((value) => {
-    setCountryInput(value);
+  const handleCountryChange = useCallback47((value) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "country": value
-      }
+      attributes: { ...propertyElement.attributes, "country": value }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleOpenStatusColorPicker = useCallback46(() => {
+  const handleOpenStatusColorPicker = useCallback47(() => {
     setColorType("Status Color");
     setColorTarget("statusColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleToggle = useCallback46((section) => {
+  const handleToggle = useCallback47((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleTogglePrice = useCallback46(() => handleToggle("price"), [handleToggle]);
-  const handleToggleDetails = useCallback46(() => handleToggle("details"), [handleToggle]);
-  const handleToggleAddress = useCallback46(() => handleToggle("address"), [handleToggle]);
-  const handleToggleStatus = useCallback46(() => handleToggle("status"), [handleToggle]);
-  const handleToggleOpenhouse = useCallback46(() => handleToggle("openhouse"), [handleToggle]);
-  const handleToggleBrokerage = useCallback46(() => handleToggle("brokerage"), [handleToggle]);
-  const handleToggleDescription = useCallback46(() => handleToggle("description"), [handleToggle]);
-  const handleToggleMLS = useCallback46(() => handleToggle("mls"), [handleToggle]);
+  const handleTogglePrice = useCallback47(() => handleToggle("price"), [handleToggle]);
+  const handleToggleDetails = useCallback47(() => handleToggle("details"), [handleToggle]);
+  const handleToggleAddress = useCallback47(() => {
+    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 = useCallback47(() => handleToggle("status"), [handleToggle]);
+  const handleToggleOpenhouse = useCallback47(() => {
+    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 = useCallback47(() => handleToggle("brokerage"), [handleToggle]);
+  const handleToggleDescription = useCallback47(() => handleToggle("description"), [handleToggle]);
+  const handleToggleMLS = useCallback47(() => handleToggle("mls"), [handleToggle]);
   return /* @__PURE__ */ jsxs55(Tooltip, { children: [
     /* @__PURE__ */ jsxs55(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx68(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx68(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx68(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: /* @__PURE__ */ jsx68(HouseIcon, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx68(SquarePen, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ jsxs55(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
@@ -9480,9 +9119,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
             }
           ) }) })
         ] }),
@@ -9501,9 +9142,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__ */ jsx68(
@@ -9512,9 +9155,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__ */ jsx68(
@@ -9523,9 +9168,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
               }
             )
           ] }) })
@@ -9586,7 +9233,7 @@ var PropertyEditMenu = () => {
               )
             ] }),
             /* @__PURE__ */ jsxs55("div", { className: "flex flex-row items-start justify-start gap-2", children: [
-              /* @__PURE__ */ jsxs55(Select, { value: countryInput, onValueChange: handleCountryChange, children: [
+              /* @__PURE__ */ jsxs55(Select, { value: currentCountry, onValueChange: handleCountryChange, children: [
                 /* @__PURE__ */ jsx68(SelectTrigger, { className: "w-3/4 shadow-none rounded-[12px]", children: /* @__PURE__ */ jsx68(SelectValue, { placeholder: "Country" }) }),
                 /* @__PURE__ */ jsx68(SelectContent, { className: "w-full shadow-none rounded-[12px] z-50001", children: /* @__PURE__ */ jsx68(SelectItem, { value: "USA", children: "United States" }) })
               ] }),
@@ -9616,11 +9263,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__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: isStatusEnabled ? "Hide Status" : "Show Status" })
+                /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsStatus ? "Hide Status" : "Show Status" })
               ] }),
               /* @__PURE__ */ jsx68(
                 BackgroundColorBtn,
@@ -9634,13 +9281,15 @@ var PropertyEditMenu = () => {
               /* @__PURE__ */ jsx68(
                 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
                 }
               )
             ] }),
@@ -9651,7 +9300,7 @@ var PropertyEditMenu = () => {
                 "aria-label": "Toggle new label",
                 size: "sm",
                 variant: "outline",
-                pressed: isNewEnabled,
+                pressed: !!currentIsNew,
                 onPressedChange: handleIsNewChange,
                 children: [
                   /* @__PURE__ */ jsx68(CircleCheckIcon, { className: "group-aria-pressed/toggle:fill-foreground" }),
@@ -9673,16 +9322,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__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: openhouseEnabled ? "Disable Open House" : "Enable Open House" })
+                /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsOpenHouse ? "Disable Open House" : "Enable Open House" })
               ] }),
               /* @__PURE__ */ jsx68(
                 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),
@@ -9695,7 +9344,7 @@ var PropertyEditMenu = () => {
               /* @__PURE__ */ jsx68(
                 Input,
                 {
-                  disabled: !openhouseEnabled,
+                  disabled: !currentIsOpenHouse,
                   type: "time",
                   value: openhouseStartTime,
                   onChange: (e) => setOpenhouseStartTime(e.target.value),
@@ -9706,7 +9355,7 @@ var PropertyEditMenu = () => {
               /* @__PURE__ */ jsx68(
                 Input,
                 {
-                  disabled: !openhouseEnabled,
+                  disabled: !currentIsOpenHouse,
                   type: "time",
                   value: openhouseEndTime,
                   onChange: (e) => setOpenhouseEndTime(e.target.value),
@@ -9729,22 +9378,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__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: isBrokerageEnabled ? "Hide Brokerage" : "Show Brokerage" })
+                /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsBrokerage ? "Hide Brokerage" : "Show Brokerage" })
               ] }),
               /* @__PURE__ */ jsx68(
                 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
                 }
               )
             ] }),
@@ -9762,33 +9413,41 @@ var PropertyEditMenu = () => {
                 Checkbox,
                 {
                   className: "shadow-none rounded-[12px] w-9 h-9",
-                  checked: isDescriptionEnabled,
+                  checked: !!currentIsDescription,
                   onCheckedChange: (checked) => handleIsDescriptionChange(checked === "indeterminate" ? false : checked)
                 }
               ) }),
-              /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: isDescriptionEnabled ? "Hide Description" : "Show Description" })
+              /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: !!currentIsDescription ? "Hide Description" : "Show Description" })
             ] }),
-            /* @__PURE__ */ jsx68(
-              Textarea,
-              {
-                disabled: !isDescriptionEnabled,
-                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
-              }
-            )
+            /* @__PURE__ */ jsxs55("div", { className: "flex flex-col w-full gap-1", children: [
+              /* @__PURE__ */ jsx68(
+                Textarea,
+                {
+                  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",
+                  maxLength: 200,
+                  value: descriptionInput.displayValue,
+                  onChange: (e) => descriptionInput.setLocalValue(e.target.value.slice(0, 200)),
+                  onFocus: descriptionInput.handleFocus,
+                  onBlur: descriptionInput.handleBlur
+                }
+              ),
+              /* @__PURE__ */ jsxs55("p", { className: "text-xs text-muted-foreground text-right", children: [
+                (descriptionInput.displayValue || "").length,
+                "/200"
+              ] })
+            ] })
           ] }) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
+    /* @__PURE__ */ jsx68(TooltipContent, { side: "bottom", className: "z-50001", children: "Information" })
   ] });
 };
 
 // src/core/editor/components/element-gear/property/toolbar.tsx
-import { CaseUpperIcon as CaseUpperIcon6 } from "lucide-react";
+import { CaseUpperIcon as CaseUpperIcon5 } from "lucide-react";
 import { jsx as jsx69, jsxs as jsxs56 } from "react/jsx-runtime";
 function PropertyToolbar() {
   const { focusIdx, template, updateElement } = useEditorStore();
@@ -9822,22 +9481,22 @@ function PropertyToolbar() {
   const currentTextColor = useMemo34(() => {
     return propertyElement?.attributes?.["text-color"] || "#111116";
   }, [propertyElement]);
-  const handleOpenBgColorPicker = useCallback47(() => {
+  const handleOpenBgColorPicker = useCallback48(() => {
     setColorType("Background Color");
     setColorTarget("propertyBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback47(() => {
+  const handleOpenStrokeColorPicker = useCallback48(() => {
     setColorType("Stroke Color");
     setColorTarget("propertyStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = useCallback47(() => {
+  const handleOpenTextColorPicker = useCallback48(() => {
     setColorType("Text Color");
     setColorTarget("propertyTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleFontChange = useCallback47((font) => {
+  const handleFontChange = useCallback48((font) => {
     if (!focusIdx || !propertyElement) return;
     updateElement(focusIdx, {
       attributes: {
@@ -9846,7 +9505,7 @@ function PropertyToolbar() {
       }
     });
   }, [focusIdx, propertyElement, updateElement]);
-  const handleBorderWidthChange = useCallback47((width) => {
+  const handleBorderWidthChange = useCallback48((width) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const newBorder = { ...border, width };
     const formattedBorder = formatBorder(newBorder);
@@ -9863,7 +9522,7 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, border, updateElement]);
-  const handleBorderEnabledChange = useCallback47((enabled) => {
+  const handleBorderEnabledChange = useCallback48((enabled) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const newWidth = enabled ? border.width === 0 ? 1 : border.width : 0;
     const newBorder = { ...border, width: newWidth };
@@ -9881,7 +9540,7 @@ function PropertyToolbar() {
       }
     });
   }, [columnIdx, columnElement, focusIdx, propertyElement, border, updateElement]);
-  const handleBorderRadiusChange = useCallback47((value) => {
+  const handleBorderRadiusChange = useCallback48((value) => {
     if (!columnIdx || !columnElement || !focusIdx || !propertyElement) return;
     const formattedRadius = formatBorderRadius(value);
     updateElement(columnIdx, {
@@ -9911,6 +9570,7 @@ function PropertyToolbar() {
         }
       ),
       /* @__PURE__ */ jsx69(ImageMenu, { type: "property" }),
+      /* @__PURE__ */ jsx69(PropertyEditMenu, {}),
       /* @__PURE__ */ jsx69(ToolbarSeparator, {}),
       /* @__PURE__ */ jsx69(ToolbarContent, { children: /* @__PURE__ */ jsx69(
         FontFamilyDropdown,
@@ -9929,7 +9589,7 @@ function PropertyToolbar() {
             size: "icon",
             onClick: handleOpenTextColorPicker,
             children: [
-              /* @__PURE__ */ jsx69(CaseUpperIcon6, {}),
+              /* @__PURE__ */ jsx69(CaseUpperIcon5, {}),
               /* @__PURE__ */ jsx69(
                 "span",
                 {
@@ -9981,24 +9641,22 @@ function PropertyToolbar() {
           tooltipText: "Corner Rounding",
           max: 18
         }
-      ),
-      /* @__PURE__ */ jsx69(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx69(PropertyEditMenu, {})
+      )
     ] })
   ] });
 }
 
 // src/core/editor/components/element-gear/property/triple/toolbar.tsx
-import { useCallback as useCallback49, useMemo as useMemo36 } from "react";
+import { useCallback as useCallback50, useMemo as useMemo36 } from "react";
 
 // src/core/editor/components/property-triple-edit-menu.tsx
-import { ChevronDownIcon as ChevronDownIcon5, HouseIcon as HouseIcon2 } from "lucide-react";
-import { useState as useState23, useCallback as useCallback48, useMemo as useMemo35, useEffect as useEffect15 } from "react";
+import { ChevronDownIcon as ChevronDownIcon5, SquarePen as SquarePen2 } from "lucide-react";
+import { useState as useState24, useCallback as useCallback49, useMemo as useMemo35 } from "react";
 import { jsx as jsx70, jsxs as jsxs57 } from "react/jsx-runtime";
 var PropertyTripleEditMenu = () => {
   const { focusIdx, template, updateElement } = useEditorStore();
-  const [isOpen, setIsOpen] = useState23(false);
-  const [openSection, setOpenSection] = useState23(null);
+  const [isOpen, setIsOpen] = useState24(false);
+  const [openSection, setOpenSection] = useState24(null);
   const propertyElement = useMemo35(() => {
     if (!focusIdx || !template) return null;
     return getValueByIdx(template, focusIdx);
@@ -10007,95 +9665,41 @@ var PropertyTripleEditMenu = () => {
     const rawPrice = propertyElement?.attributes?.["price"] || "";
     return parsePrice(rawPrice);
   }, [propertyElement]);
-  const [priceInput, setPriceInput] = useState23(currentPrice);
-  useEffect15(() => {
-    setPriceInput(currentPrice);
-  }, [currentPrice]);
-  const handlePriceBlur = useCallback48(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (priceInput === currentPrice) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "price": priceInput
-      }
-    });
-  }, [focusIdx, propertyElement, priceInput, currentPrice, updateElement]);
   const currentBeds = useMemo35(() => propertyElement?.attributes?.["beds"] || "", [propertyElement]);
   const currentBaths = useMemo35(() => propertyElement?.attributes?.["baths"] || "", [propertyElement]);
   const currentSqft = useMemo35(() => propertyElement?.attributes?.["sqft"] || "", [propertyElement]);
   const currentCity = useMemo35(() => propertyElement?.attributes?.["city"] || "", [propertyElement]);
-  const [bedsInput, setBedsInput] = useState23(currentBeds);
-  const [bathsInput, setBathsInput] = useState23(currentBaths);
-  const [sqftInput, setSqftInput] = useState23(currentSqft);
-  const [cityInput, setCityInput] = useState23(currentCity);
-  useEffect15(() => {
-    setBedsInput(currentBeds);
-  }, [currentBeds]);
-  useEffect15(() => {
-    setBathsInput(currentBaths);
-  }, [currentBaths]);
-  useEffect15(() => {
-    setSqftInput(currentSqft);
-  }, [currentSqft]);
-  useEffect15(() => {
-    setCityInput(currentCity);
-  }, [currentCity]);
-  const handleBedsBlur = useCallback48(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (bedsInput === currentBeds) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "beds": bedsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bedsInput, currentBeds, updateElement]);
-  const handleBathsBlur = useCallback48(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (bathsInput === currentBaths) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "baths": bathsInput
-      }
-    });
-  }, [focusIdx, propertyElement, bathsInput, currentBaths, updateElement]);
-  const handleSqftBlur = useCallback48(() => {
+  const commitAttribute = useCallback49((key, value) => {
     if (!focusIdx || !propertyElement) return;
-    if (sqftInput === currentSqft) return;
     updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "sqft": sqftInput
-      }
+      attributes: { ...propertyElement.attributes, [key]: value }
     });
-  }, [focusIdx, propertyElement, sqftInput, currentSqft, updateElement]);
-  const handleCityBlur = useCallback48(() => {
-    if (!focusIdx || !propertyElement) return;
-    if (cityInput === currentCity) return;
-    updateElement(focusIdx, {
-      attributes: {
-        ...propertyElement.attributes,
-        "city": cityInput
-      }
-    });
-  }, [focusIdx, propertyElement, cityInput, currentCity, updateElement]);
-  const handleToggle = useCallback48((section) => {
+  }, [focusIdx, propertyElement, updateElement]);
+  const commitPrice = useCallback49((v) => commitAttribute("price", v), [commitAttribute]);
+  const commitBeds = useCallback49((v) => commitAttribute("beds", v), [commitAttribute]);
+  const commitBaths = useCallback49((v) => commitAttribute("baths", v), [commitAttribute]);
+  const commitSqft = useCallback49((v) => commitAttribute("sqft", v), [commitAttribute]);
+  const commitCity = useCallback49((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 = useCallback49((section) => {
     setOpenSection((prev) => prev === section ? null : section);
   }, []);
-  const handleTogglePrice = useCallback48(() => handleToggle("price"), [handleToggle]);
-  const handleToggleDetails = useCallback48(() => handleToggle("details"), [handleToggle]);
-  const handleToggleAddress = useCallback48(() => handleToggle("address"), [handleToggle]);
+  const handleTogglePrice = useCallback49(() => handleToggle("price"), [handleToggle]);
+  const handleToggleDetails = useCallback49(() => handleToggle("details"), [handleToggle]);
+  const handleToggleAddress = useCallback49(() => handleToggle("address"), [handleToggle]);
   return /* @__PURE__ */ jsxs57(Tooltip, { children: [
     /* @__PURE__ */ jsxs57(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx70(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx70(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx70(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
           className: "shadow-none transition-none cursor-pointer rounded-[12px]",
           size: "icon",
-          children: /* @__PURE__ */ jsx70(HouseIcon2, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx70(SquarePen2, { className: "w-4 h-4" })
         }
       ) }) }),
       /* @__PURE__ */ jsxs57(PopoverContent, { className: "w-84 z-51 mt-1 rounded-[12px] p-2 gap-2 flex flex-col z-50001", children: [
@@ -10113,9 +9717,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
             }
           ) }) })
         ] }),
@@ -10134,9 +9740,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__ */ jsx70(
@@ -10145,9 +9753,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__ */ jsx70(
@@ -10156,9 +9766,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
               }
             )
           ] }) })
@@ -10177,20 +9789,22 @@ 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__ */ jsx70(TooltipContent, { side: "bottom", className: "z-50001", children: "Edit" })
+    /* @__PURE__ */ jsx70(TooltipContent, { side: "bottom", className: "z-50001", children: "Information" })
   ] });
 };
 
 // src/core/editor/components/element-gear/property/triple/toolbar.tsx
-import { CaseUpperIcon as CaseUpperIcon7 } from "lucide-react";
+import { CaseUpperIcon as CaseUpperIcon6 } from "lucide-react";
 import { jsx as jsx71, jsxs as jsxs58 } from "react/jsx-runtime";
 var PropertyTripleItemToolbar = () => {
   const focusIdx = useEditorStore((state) => state.focusIdx);
@@ -10222,22 +9836,22 @@ var PropertyTripleItemToolbar = () => {
   const currentFontFamily = useMemo36(() => {
     return parentElement?.attributes?.["font-family"] || "Arial, sans-serif";
   }, [parentElement]);
-  const handleOpenBgColorPicker = useCallback49(() => {
+  const handleOpenBgColorPicker = useCallback50(() => {
     setColorType("Background Color");
     setColorTarget("propertyBgColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenStrokeColorPicker = useCallback49(() => {
+  const handleOpenStrokeColorPicker = useCallback50(() => {
     setColorType("Stroke Color");
     setColorTarget("propertyStrokeColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleOpenTextColorPicker = useCallback49(() => {
+  const handleOpenTextColorPicker = useCallback50(() => {
     setColorType("Text Color");
     setColorTarget("propertyTextColor");
     setActiveView("color");
   }, [setColorType, setColorTarget, setActiveView]);
-  const handleFontChange = useCallback49((font) => {
+  const handleFontChange = useCallback50((font) => {
     if (!parentIdx || !parentElement) return;
     updateElement(parentIdx, {
       attributes: {
@@ -10246,7 +9860,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, updateElement]);
-  const handleBorderWidthChange = useCallback49((width) => {
+  const handleBorderWidthChange = useCallback50((width) => {
     if (!parentIdx || !parentElement) return;
     const newBorder = { ...border, width };
     const formattedBorder = formatBorder(newBorder);
@@ -10257,7 +9871,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, border, updateElement]);
-  const handleBorderEnabledChange = useCallback49((enabled) => {
+  const handleBorderEnabledChange = useCallback50((enabled) => {
     if (!parentIdx || !parentElement) return;
     const newWidth = enabled ? border.width === 0 ? 1 : border.width : 0;
     const newBorder = { ...border, width: newWidth };
@@ -10269,7 +9883,7 @@ var PropertyTripleItemToolbar = () => {
       }
     });
   }, [parentIdx, parentElement, border, updateElement]);
-  const handleBorderRadiusChange = useCallback49((value) => {
+  const handleBorderRadiusChange = useCallback50((value) => {
     if (!parentIdx || !parentElement) return;
     const formattedRadius = formatBorderRadius(value);
     updateElement(parentIdx, {
@@ -10293,6 +9907,7 @@ var PropertyTripleItemToolbar = () => {
         }
       ),
       /* @__PURE__ */ jsx71(ImageMenu, { type: "property" }),
+      /* @__PURE__ */ jsx71(PropertyTripleEditMenu, {}),
       /* @__PURE__ */ jsx71(ToolbarSeparator, {}),
       /* @__PURE__ */ jsx71(
         FontFamilyDropdown,
@@ -10311,7 +9926,7 @@ var PropertyTripleItemToolbar = () => {
             size: "icon",
             onClick: handleOpenTextColorPicker,
             children: [
-              /* @__PURE__ */ jsx71(CaseUpperIcon7, {}),
+              /* @__PURE__ */ jsx71(CaseUpperIcon6, {}),
               /* @__PURE__ */ jsx71(
                 "span",
                 {
@@ -10363,9 +9978,7 @@ var PropertyTripleItemToolbar = () => {
           tooltipText: "Corner Rounding",
           max: 18
         }
-      ),
-      /* @__PURE__ */ jsx71(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx71(PropertyTripleEditMenu, {})
+      )
     ] })
   ] });
 };
@@ -10444,14 +10057,14 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/core/editor/components/email-template-v2/template-page.tsx
-import { Suspense, useState as useState24, lazy } from "react";
+import { Suspense, useState as useState25, lazy } from "react";
 
 // src/core/editor/hooks/use-auto-save.ts
-import { useEffect as useEffect16, useRef as useRef7 } from "react";
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
 var AUTO_SAVE_INTERVAL = 30 * 1e3;
 function useAutoSave() {
   const intervalRef = useRef7(null);
-  useEffect16(() => {
+  useEffect8(() => {
     intervalRef.current = setInterval(async () => {
       const { template, templateId, onSave, hasUnsavedChanges, markAsSaved, isSaving, setIsSaving } = useEditorStore.getState();
       if (isSaving || !templateId || !onSave || !hasUnsavedChanges()) {
@@ -10479,7 +10092,7 @@ function useAutoSave() {
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
 import { jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-AMEHYBIM.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-P3XCQRWR.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({
@@ -10489,14 +10102,16 @@ function TemplatePage({
   onToast,
   onExit,
   onImageUpload,
+  onDuplicate,
+  onDelete,
   data
 }) {
-  useState24(() => {
-    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload);
+  useState25(() => {
+    useEditorStore.getState().initializeWithTemplate(templateId, initialTemplate, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete);
   });
   useAutoSave();
-  const [editorLoading, setEditorLoading] = useState24(false);
-  const [isPageHovered, setIsPageHovered] = useState24(false);
+  const [editorLoading, setEditorLoading] = useState25(false);
+  const [isPageHovered, setIsPageHovered] = useState25(false);
   const previewMode = useEditorStore((state) => state.previewMode);
   const focusIdx = useEditorStore((state) => state.focusIdx);
   const setFocusIdx = useEditorStore((state) => state.setFocusIdx);