diff --git a/src/components/canvas-context-menu.tsx b/src/components/canvas-context-menu.tsx
index cb6bf484..545786b8 100644
--- a/src/components/canvas-context-menu.tsx
+++ b/src/components/canvas-context-menu.tsx
@@ -8,7 +8,7 @@ import {
   getUniqueName,
 } from "@/lib/form-element-model";
 import { formatShortcut } from "@/lib/shortcuts";
-import { useEditorStore } from "@/stores/editor-store";
+import { getDisplayElements, useEditorStore } from "@/stores/editor-store";
 import {
   AlignLeft,
   ChevronDown,
@@ -119,7 +119,7 @@ export function CanvasContextMenu({
           label: t("contextMenu.selectAll"),
           shortcut: formatShortcut("selectAll"),
           action: () => {
-            const pageElements = store.elements.filter(
+            const pageElements = getDisplayElements(store).filter(
               (el) => el.pageNumber === context.pageNumber,
             );
             store.selectElements(new Set(pageElements.map((el) => el.id)));
@@ -129,7 +129,7 @@ export function CanvasContextMenu({
     }
 
     if (context.type === "canvas") {
-      const elements = store.elements;
+      const elements = getDisplayElements(store);
       const result: MenuEntry[] = [];
 
       if (clipboard.length > 0) {
@@ -228,7 +228,10 @@ export function CanvasContextMenu({
               x: context.pdfX,
               y: context.pdfY,
               pageNumber: context.pageNumber,
-              name: getUniqueName(`optionlist_${elements.length + 1}`, elements),
+              name: getUniqueName(
+                `optionlist_${elements.length + 1}`,
+                elements,
+              ),
             });
             store.addElement(newEl);
             store.selectElements(new Set([newEl.id]));
@@ -255,7 +258,7 @@ export function CanvasContextMenu({
         label: t("contextMenu.selectAll"),
         shortcut: formatShortcut("selectAll"),
         action: () => {
-          const pageElements = store.elements.filter(
+          const pageElements = getDisplayElements(store).filter(
             (el) => el.pageNumber === context.pageNumber,
           );
           store.selectElements(new Set(pageElements.map((el) => el.id)));
@@ -386,7 +389,13 @@ export function CanvasContextMenu({
     >
       {entries.map((entry, i) => {
         if ("separator" in entry) {
-          return <div key={`sep-${i}`} role="separator" className="-mx-1 my-1 h-px bg-border" />;
+          return (
+            <div
+              key={`sep-${i}`}
+              role="separator"
+              className="-mx-1 my-1 h-px bg-border"
+            />
+          );
         }
 
         const Icon = entry.icon;
diff --git a/src/components/canvas-overlay.tsx b/src/components/canvas-overlay.tsx
index efef7d04..e2eccded 100644
--- a/src/components/canvas-overlay.tsx
+++ b/src/components/canvas-overlay.tsx
@@ -39,7 +39,11 @@ import {
   type PageLayout,
 } from "@/lib/page-layout";
 import type { SnapContext } from "@/lib/snap-engine";
-import { useEditorStore } from "@/stores/editor-store";
+import {
+  getDisplayElements,
+  getDisplayGuides,
+  useEditorStore,
+} from "@/stores/editor-store";
 import {
   memo,
   useCallback,
@@ -57,19 +61,43 @@ interface ElementOverlayListProps {
   visiblePages: Set<number>;
   layouts: Map<number, PageLayout>;
   selectedIds: Set<string>;
-  dragLivePositions: Map<string, { x: number; y: number; width: number; height: number }> | null;
+  dragLivePositions: Map<
+    string,
+    { x: number; y: number; width: number; height: number }
+  > | null;
   snapTargetIds: Set<string>;
   zoom: number;
   dragOffset: { dx: number; dy: number } | null;
   dragDraggingIdRef: RefObject<string | null>;
   dragSnapCorrection: { dx: number; dy: number } | null;
   resizeResizingIdRef: RefObject<string | null>;
-  resizeSnapCorrection: { dx: number; dy: number; dw: number; dh: number } | null;
+  resizeSnapCorrection: {
+    dx: number;
+    dy: number;
+    dw: number;
+    dh: number;
+  } | null;
   multiResizeActiveRef: RefObject<boolean>;
   onDragStart: (el: FormElement, e: React.MouseEvent) => void;
-  onDrag: (el: FormElement, screen: { x: number; y: number }, d: { x: number; y: number }, me: MouseEvent) => void;
-  onDragStop: (el: FormElement, screen: { x: number; y: number }, d: { x: number; y: number }, me: MouseEvent) => void;
-  onResize: (el: FormElement, dir: string, ref: HTMLElement, position: { x: number; y: number }, me: MouseEvent) => void;
+  onDrag: (
+    el: FormElement,
+    screen: { x: number; y: number },
+    d: { x: number; y: number },
+    me: MouseEvent,
+  ) => void;
+  onDragStop: (
+    el: FormElement,
+    screen: { x: number; y: number },
+    d: { x: number; y: number },
+    me: MouseEvent,
+  ) => void;
+  onResize: (
+    el: FormElement,
+    dir: string,
+    ref: HTMLElement,
+    position: { x: number; y: number },
+    me: MouseEvent,
+  ) => void;
   onResizeStop: (el: FormElement) => void;
   onResetResize: () => void;
 }
@@ -103,7 +131,9 @@ const ElementOverlayList = memo(function ElementOverlayList({
         if (!layout) return null;
 
         const isSelected = selectedIds.has(el.id);
-        const livePos = isSelected ? dragLivePositions?.get(el.id) ?? null : null;
+        const livePos = isSelected
+          ? (dragLivePositions?.get(el.id) ?? null)
+          : null;
         const isMultiResize =
           multiResizeActiveRef.current &&
           !!livePos &&
@@ -124,9 +154,7 @@ const ElementOverlayList = memo(function ElementOverlayList({
             isMultiResize={isMultiResize}
             isSnapTarget={snapTargetIds.has(el.id)}
             effectiveDragOffset={
-              !isMultiResize && isSelected && !isDragging
-                ? dragOffset
-                : null
+              !isMultiResize && isSelected && !isDragging ? dragOffset : null
             }
             isDragging={isDragging}
             isResizing={isResizing}
@@ -148,14 +176,14 @@ const ElementOverlayList = memo(function ElementOverlayList({
 export function CanvasOverlay() {
   const { t } = useTranslation();
   const scrollRef = useScrollContainerRef();
-  const elements = useEditorStore((s) => s.elements);
+  const elements = useEditorStore(getDisplayElements);
   const activeTool = useEditorStore((s) => s.activeTool);
   const zoom = useEditorStore((s) => s.zoom);
   const pages = useEditorStore((s) => s.pages);
   const pdfBytes = useEditorStore((s) => s.pdfBytes);
   const selectedIds = useEditorStore((s) => s.selectedIds);
   const gridSize = useEditorStore((s) => s.gridSize);
-  const guides = useEditorStore((s) => s.guides);
+  const guides = useEditorStore(getDisplayGuides);
   const previewGuide = useEditorStore((s) => s.previewGuide);
   const visiblePages = useVisiblePages();
 
@@ -522,7 +550,12 @@ export function CanvasOverlay() {
       };
 
       if (drawing.drawStartRef.current) {
-        drawing.updateDraw(currentX, currentY, modifiers, HORIZONTAL_DRAW_TOOLS.has(activeTool));
+        drawing.updateDraw(
+          currentX,
+          currentY,
+          modifiers,
+          HORIZONTAL_DRAW_TOOLS.has(activeTool),
+        );
         return;
       }
 
@@ -582,9 +615,9 @@ export function CanvasOverlay() {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (
         e.target instanceof HTMLElement &&
-        (e.target.closest(
+        e.target.closest(
           "input, textarea, select, [role='menu'], [role='menuitem']",
-        ) !== null)
+        ) !== null
       ) {
         return;
       }
@@ -596,7 +629,7 @@ export function CanvasOverlay() {
         const state = useEditorStore.getState();
         const page = getPageAtViewportCenter(scrollEl, state.pages, zoom);
         if (page === undefined) return;
-        const pageIds = state.elements
+        const pageIds = getDisplayElements(state)
           .filter((el) => el.pageNumber === page)
           .map((el) => el.id);
         selectElements(new Set(pageIds));
@@ -616,7 +649,7 @@ export function CanvasOverlay() {
 
       e.preventDefault();
       const updates: Array<{ id: string; x: number; y: number }> = [];
-      for (const el of store.elements) {
+      for (const el of getDisplayElements(store)) {
         if (store.selectedIds.has(el.id)) {
           updates.push({ id: el.id, x: el.x + dx, y: el.y + dy });
         }
@@ -642,7 +675,9 @@ export function CanvasOverlay() {
         if (!store.selectedIds.has(elementId)) {
           selectElements(new Set([elementId]));
         }
-        const el = store.elements.find((el) => el.id === elementId);
+        const el = getDisplayElements(store).find(
+          (element) => element.id === elementId,
+        );
         const rect = e.currentTarget.getBoundingClientRect();
         const screenX = e.clientX - rect.left;
         const screenY = e.clientY - rect.top;
@@ -706,8 +741,7 @@ export function CanvasOverlay() {
   );
 
   const totalContentHeight = useMemo(
-    () =>
-      getTotalContentHeight(pages, zoom, scrollViewportHeight || undefined),
+    () => getTotalContentHeight(pages, zoom, scrollViewportHeight || undefined),
     [pages, zoom, scrollViewportHeight],
   );
 
@@ -726,7 +760,12 @@ export function CanvasOverlay() {
     if (multiResize.isActive.current && multiResize.currentBbox.current) {
       return multiResize.currentBbox.current;
     }
-    const items: Array<{ x: number; y: number; width: number; height: number }> = [];
+    const items: Array<{
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    }> = [];
     for (const el of elements) {
       if (!selectedIds.has(el.id)) continue;
       const layout = layouts.get(el.pageNumber);
@@ -736,11 +775,17 @@ export function CanvasOverlay() {
       const py = live?.y ?? el.y;
       const pw = live?.width ?? el.width;
       const ph = live?.height ?? el.height;
-      const tl = pdfToScreen({ x: px, y: py }, { zoom, pageX: layout.xOffset, pageY: layout.yOffset });
+      const tl = pdfToScreen(
+        { x: px, y: py },
+        { zoom, pageX: layout.xOffset, pageY: layout.yOffset },
+      );
       items.push({ x: tl.x, y: tl.y, width: pw * zoom, height: ph * zoom });
     }
     if (items.length < 2) return null;
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    let minX = Infinity,
+      minY = Infinity,
+      maxX = -Infinity,
+      maxY = -Infinity;
     for (const r of items) {
       if (r.x < minX) minX = r.x;
       if (r.y < minY) minY = r.y;
@@ -748,7 +793,14 @@ export function CanvasOverlay() {
       if (r.y + r.height > maxY) maxY = r.y + r.height;
     }
     return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-  }, [selectedIds, elements, layouts, zoom, dragLivePositions, multiResize.snapCorrection]);
+  }, [
+    selectedIds,
+    elements,
+    layouts,
+    zoom,
+    dragLivePositions,
+    multiResize.snapCorrection,
+  ]);
 
   const anyHeightLocked = useMemo(() => {
     if (selectedIds.size < 2) return false;
diff --git a/src/components/properties-panel.tsx b/src/components/properties-panel.tsx
index 15a4ec59..d15823ea 100644
--- a/src/components/properties-panel.tsx
+++ b/src/components/properties-panel.tsx
@@ -35,7 +35,17 @@ import {
   type TextField,
 } from "@/lib/form-element-model";
 import { resolveElementPosition } from "@/lib/page-coordinates";
-import { useEditorStore, type GuideLine } from "@/stores/editor-store";
+import {
+  createPropertyEditKey,
+  getDisplayElements,
+  getDisplayGuides,
+  getPropertyEditInputValue,
+  useEditorStore,
+  type ElementPropertyUpdate,
+  type EditorState,
+  type PropertyEditChanges,
+  type PropertyEditKey,
+} from "@/stores/editor-store";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import {
   AlignCenterHorizontal,
@@ -77,99 +87,88 @@ const BASE_FONT_FAMILIES = [
   { value: "ZapfDingbats", label: "Zapf Dingbats" },
 ];
 
-function useDeferredValue(
+function usePropertyInput(
+  identity: PropertyEditKey,
   storeValue: string | number,
-  onCommit: (raw: string) => void,
+  getChanges: (raw: string) => PropertyEditChanges,
 ) {
-  const [local, setLocal] = useState(String(storeValue ?? ""));
-  const activeRef = useRef(false);
-  const preEditRef = useRef<{
-    elements: FormElement[];
-    guides: GuideLine[];
-  } | null>(null);
-  const originalValueRef = useRef(String(storeValue ?? ""));
-  const onCommitRef = useRef(onCommit);
-  onCommitRef.current = onCommit;
+  const value = useEditorStore((state) =>
+    getPropertyEditInputValue(state, identity, storeValue),
+  );
+  const beginPropertyEdit = useEditorStore((s) => s.beginPropertyEdit);
+  const previewPropertyEdit = useEditorStore((s) => s.previewPropertyEdit);
+  const commitPropertyEdit = useEditorStore((s) => s.commitPropertyEdit);
+  const discardPropertyEdit = useEditorStore((s) => s.discardPropertyEdit);
 
-  useEffect(() => {
-    if (!activeRef.current) {
-      setLocal(String(storeValue ?? ""));
-    }
-  }, [storeValue]);
+  const startEdit = useCallback(() => {
+    beginPropertyEdit(identity, String(storeValue ?? ""));
+  }, [beginPropertyEdit, identity, storeValue]);
 
   const onFocus = useCallback(() => {
-    if (activeRef.current) return;
-    activeRef.current = true;
-    originalValueRef.current = String(storeValue ?? "");
-    preEditRef.current = {
-      elements: useEditorStore.getState().elements,
-      guides: useEditorStore.getState().guides,
-    };
-    useEditorStore.temporal.getState().pause();
-  }, [storeValue]);
-
-  const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setLocal(e.target.value);
-    onCommitRef.current(e.target.value);
-  }, []);
-
-  const finishEdit = useCallback((revert: boolean) => {
-    if (!activeRef.current) return;
-    activeRef.current = false;
-    const preEdit = preEditRef.current;
-    preEditRef.current = null;
-
-    if (revert && preEdit) {
-      useEditorStore.setState({
-        elements: preEdit.elements,
-        guides: preEdit.guides,
-      });
-      setLocal(originalValueRef.current);
-    }
-
-    useEditorStore.temporal.getState().resume();
+    startEdit();
+  }, [startEdit]);
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      startEdit();
+      const inputValue = e.target.value;
+      previewPropertyEdit(inputValue, getChanges(inputValue));
+    },
+    [getChanges, previewPropertyEdit, startEdit],
+  );
 
-    if (!revert && preEdit) {
-      const current = {
-        elements: useEditorStore.getState().elements,
-        guides: useEditorStore.getState().guides,
-      };
-      if (
-        preEdit.elements !== current.elements ||
-        preEdit.guides !== current.guides
-      ) {
-        const ts = useEditorStore.temporal.getState();
-        const past = [...ts.pastStates, preEdit];
-        if (past.length > 50) past.splice(0, past.length - 50);
-        useEditorStore.temporal.setState({
-          pastStates: past,
-          futureStates: [],
-        });
-      }
-    }
-  }, []);
+  useEffect(() => {
+    return () => commitPropertyEdit(identity);
+  }, [commitPropertyEdit, identity]);
 
   const onBlur = useCallback(() => {
-    finishEdit(false);
-  }, [finishEdit]);
+    commitPropertyEdit(identity);
+  }, [commitPropertyEdit, identity]);
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter") {
         e.preventDefault();
-        finishEdit(false);
+        commitPropertyEdit(identity);
         (e.target as HTMLInputElement).select();
       }
       if (e.key === "Escape") {
         e.preventDefault();
-        finishEdit(true);
+        discardPropertyEdit(identity);
         (e.target as HTMLInputElement).blur();
       }
     },
-    [finishEdit],
+    [commitPropertyEdit, discardPropertyEdit, identity],
+  );
+
+  return { value, onFocus, onChange, onBlur, onKeyDown };
+}
+
+function useElementPropertyChanges(elementId: string) {
+  return useCallback(
+    (changes: Partial<FormElement>) =>
+      ({
+        elementUpdates: [{ id: elementId, changes }],
+      }) satisfies PropertyEditChanges,
+    [elementId],
   );
+}
 
-  return { value: local, onFocus, onChange, onBlur, onKeyDown };
+function useBatchPropertyChanges() {
+  return useCallback(
+    (elementUpdates: ElementPropertyUpdate[]) =>
+      ({ elementUpdates }) satisfies PropertyEditChanges,
+    [],
+  );
+}
+
+function useDisplayElement(elementId: string) {
+  const selectElement = useCallback(
+    (state: EditorState) =>
+      getDisplayElements(state).find((element) => element.id === elementId),
+    [elementId],
+  );
+  return useEditorStore(selectElement);
 }
 
 function PropertyField({
@@ -530,19 +529,25 @@ function AppearanceSection({
 function TypographySection({
   element,
   onUpdate,
+  onPreview,
 }: {
   element: ElementWithTypography;
   onUpdate: (updates: Partial<ElementWithTypography>) => void;
+  onPreview: (updates: Partial<ElementWithTypography>) => PropertyEditChanges;
 }) {
   const { t } = useTranslation();
-  const fontSizeField = useDeferredValue(element.fontSize, (v) => {
-    const fs = Number(v);
-    const updates: Partial<ElementWithTypography> = { fontSize: fs };
-    if (isTextField(element) && !element.multiline) {
-      (updates as Partial<TextField>).height = heightFromFontSize(fs);
-    }
-    onUpdate(updates);
-  });
+  const fontSizeField = usePropertyInput(
+    createPropertyEditKey("fontSize", [element.id]),
+    element.fontSize,
+    (v) => {
+      const fs = Number(v);
+      const updates: Partial<ElementWithTypography> = { fontSize: fs };
+      if (isTextField(element) && !element.multiline) {
+        (updates as Partial<TextField>).height = heightFromFontSize(fs);
+      }
+      return onPreview(updates);
+    },
+  );
   return (
     <>
       <FontFamilySelect
@@ -569,23 +574,26 @@ function TypographySection({
 function TextFieldProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
   const requiredId = useId();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
+  const element = useDisplayElement(elementId);
   const updateElement = useEditorStore((s) => s.updateElement);
+  const getElementChanges = useElementPropertyChanges(elementId);
 
   if (!element || !isTextField(element)) return null;
 
-  const nameField = useDeferredValue(element.name, (v) =>
-    updateElement(element.id, { name: v }),
+  const nameField = usePropertyInput(
+    createPropertyEditKey("name", [element.id]),
+    element.name,
+    (v) => getElementChanges({ name: v }),
   );
-  const defaultValueField = useDeferredValue(element.defaultValue, (v) =>
-    updateElement(element.id, { defaultValue: v }),
+  const defaultValueField = usePropertyInput(
+    createPropertyEditKey("defaultValue", [element.id]),
+    element.defaultValue,
+    (v) => getElementChanges({ defaultValue: v }),
   );
-  const maxLengthField = useDeferredValue(element.maxLength ?? "", (v) =>
-    updateElement(element.id, {
-      maxLength: v ? Number(v) : undefined,
-    }),
+  const maxLengthField = usePropertyInput(
+    createPropertyEditKey("maxLength", [element.id]),
+    element.maxLength ?? "",
+    (v) => getElementChanges({ maxLength: v ? Number(v) : undefined }),
   );
 
   return (
@@ -629,6 +637,7 @@ function TextFieldProperties({ elementId }: { elementId: string }) {
         <TypographySection
           element={element}
           onUpdate={(updates) => updateElement(element.id, updates)}
+          onPreview={getElementChanges}
         />
         {!element.multiline && (
           <div className="flex items-center justify-between">
@@ -656,15 +665,16 @@ function TextFieldProperties({ elementId }: { elementId: string }) {
 function CheckboxProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
   const defaultCheckedId = useId();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
+  const element = useDisplayElement(elementId);
   const updateElement = useEditorStore((s) => s.updateElement);
+  const getElementChanges = useElementPropertyChanges(elementId);
 
   if (!element || !isCheckbox(element)) return null;
 
-  const nameField = useDeferredValue(element.name, (v) =>
-    updateElement(element.id, { name: v }),
+  const nameField = usePropertyInput(
+    createPropertyEditKey("name", [element.id]),
+    element.name,
+    (v) => getElementChanges({ name: v }),
   );
 
   return (
@@ -700,21 +710,25 @@ function CheckboxProperties({ elementId }: { elementId: string }) {
 
 function RadioButtonProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
-  const updateElement = useEditorStore((s) => s.updateElement);
+  const element = useDisplayElement(elementId);
+  const getElementChanges = useElementPropertyChanges(elementId);
 
   if (!element || !isRadioButton(element)) return null;
 
-  const groupNameField = useDeferredValue(element.groupName, (v) =>
-    updateElement(element.id, { groupName: v }),
+  const groupNameField = usePropertyInput(
+    createPropertyEditKey("groupName", [element.id]),
+    element.groupName,
+    (v) => getElementChanges({ groupName: v }),
   );
-  const valueField = useDeferredValue(element.value, (v) =>
-    updateElement(element.id, { value: v }),
+  const valueField = usePropertyInput(
+    createPropertyEditKey("value", [element.id]),
+    element.value,
+    (v) => getElementChanges({ value: v }),
   );
-  const labelField = useDeferredValue(element.label, (v) =>
-    updateElement(element.id, { label: v }),
+  const labelField = usePropertyInput(
+    createPropertyEditKey("label", [element.id]),
+    element.label,
+    (v) => getElementChanges({ label: v }),
   );
 
   return (
@@ -900,15 +914,16 @@ function DropdownProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
   const requiredId = useId();
   const editableId = useId();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
+  const element = useDisplayElement(elementId);
   const updateElement = useEditorStore((s) => s.updateElement);
+  const getElementChanges = useElementPropertyChanges(elementId);
 
   if (!element || !isDropdownField(element)) return null;
 
-  const nameField = useDeferredValue(element.name, (v) =>
-    updateElement(element.id, { name: v }),
+  const nameField = usePropertyInput(
+    createPropertyEditKey("name", [element.id]),
+    element.name,
+    (v) => getElementChanges({ name: v }),
   );
 
   const addOption = () => {
@@ -968,6 +983,7 @@ function DropdownProperties({ elementId }: { elementId: string }) {
         <TypographySection
           element={element}
           onUpdate={(updates) => updateElement(element.id, updates)}
+          onPreview={getElementChanges}
         />
         <div className="flex items-center justify-between">
           <Label className="text-[11px] text-muted-foreground">
@@ -1027,18 +1043,21 @@ function DropdownProperties({ elementId }: { elementId: string }) {
 
 function ButtonProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
+  const element = useDisplayElement(elementId);
   const updateElement = useEditorStore((s) => s.updateElement);
+  const getElementChanges = useElementPropertyChanges(elementId);
 
   if (!element || !isButtonField(element)) return null;
 
-  const nameField = useDeferredValue(element.name, (v) =>
-    updateElement(element.id, { name: v }),
+  const nameField = usePropertyInput(
+    createPropertyEditKey("name", [element.id]),
+    element.name,
+    (v) => getElementChanges({ name: v }),
   );
-  const labelField = useDeferredValue(element.label, (v) =>
-    updateElement(element.id, { label: v }),
+  const labelField = usePropertyInput(
+    createPropertyEditKey("label", [element.id]),
+    element.label,
+    (v) => getElementChanges({ label: v }),
   );
 
   return (
@@ -1062,6 +1081,7 @@ function ButtonProperties({ elementId }: { elementId: string }) {
         <TypographySection
           element={element}
           onUpdate={(updates) => updateElement(element.id, updates)}
+          onPreview={getElementChanges}
         />
       </CollapsibleSection>
 
@@ -1079,15 +1099,16 @@ function ButtonProperties({ elementId }: { elementId: string }) {
 function OptionListProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
   const requiredId = useId();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
+  const element = useDisplayElement(elementId);
   const updateElement = useEditorStore((s) => s.updateElement);
+  const getElementChanges = useElementPropertyChanges(elementId);
 
   if (!element || !isOptionListField(element)) return null;
 
-  const nameField = useDeferredValue(element.name, (v) =>
-    updateElement(element.id, { name: v }),
+  const nameField = usePropertyInput(
+    createPropertyEditKey("name", [element.id]),
+    element.name,
+    (v) => getElementChanges({ name: v }),
   );
 
   const addOption = () => {
@@ -1154,6 +1175,7 @@ function OptionListProperties({ elementId }: { elementId: string }) {
         <TypographySection
           element={element}
           onUpdate={(updates) => updateElement(element.id, updates)}
+          onPreview={getElementChanges}
         />
         <div className="flex items-center justify-between">
           <Label className="text-[11px] text-muted-foreground">
@@ -1200,11 +1222,9 @@ function OptionListProperties({ elementId }: { elementId: string }) {
 
 function SinglePositionProperties({ elementId }: { elementId: string }) {
   const { t } = useTranslation();
-  const element = useEditorStore((s) =>
-    s.elements.find((el) => el.id === elementId),
-  );
+  const element = useDisplayElement(elementId);
   const livePos = useEditorStore((s) => s.dragLivePositions.get(elementId));
-  const updateElement = useEditorStore((s) => s.updateElement);
+  const getElementChanges = useElementPropertyChanges(elementId);
   const pages = useEditorStore((s) => s.pages);
 
   if (!element) return null;
@@ -1222,35 +1242,47 @@ function SinglePositionProperties({ elementId }: { elementId: string }) {
     isDropdownField(element) ||
     isOptionListField(element);
 
-  const xField = useDeferredValue(displayX, (v) => {
-    const resolved = resolveElementPosition(
-      pages,
-      element.pageNumber,
-      Number(v),
-      element.y,
-    );
-    updateElement(element.id, {
-      x: resolved.x,
-      pageNumber: resolved.pageNumber,
-    });
-  });
-  const yField = useDeferredValue(displayY, (v) => {
-    const resolved = resolveElementPosition(
-      pages,
-      element.pageNumber,
-      element.x,
-      Number(v),
-    );
-    updateElement(element.id, {
-      y: resolved.y,
-      pageNumber: resolved.pageNumber,
-    });
-  });
-  const wField = useDeferredValue(displayW, (v) =>
-    updateElement(element.id, { width: Number(v) }),
+  const xField = usePropertyInput(
+    createPropertyEditKey("x", [element.id]),
+    displayX,
+    (v) => {
+      const resolved = resolveElementPosition(
+        pages,
+        element.pageNumber,
+        Number(v),
+        element.y,
+      );
+      return getElementChanges({
+        x: resolved.x,
+        pageNumber: resolved.pageNumber,
+      });
+    },
   );
-  const hField = useDeferredValue(displayH, (v) =>
-    updateElement(element.id, { height: Number(v) }),
+  const yField = usePropertyInput(
+    createPropertyEditKey("y", [element.id]),
+    displayY,
+    (v) => {
+      const resolved = resolveElementPosition(
+        pages,
+        element.pageNumber,
+        element.x,
+        Number(v),
+      );
+      return getElementChanges({
+        y: resolved.y,
+        pageNumber: resolved.pageNumber,
+      });
+    },
+  );
+  const wField = usePropertyInput(
+    createPropertyEditKey("width", [element.id]),
+    displayW,
+    (v) => getElementChanges({ width: Number(v) }),
+  );
+  const hField = usePropertyInput(
+    createPropertyEditKey("height", [element.id]),
+    displayH,
+    (v) => getElementChanges({ height: Number(v) }),
   );
 
   return (
@@ -1282,6 +1314,7 @@ function MultiTypographySection({
 }) {
   const { t } = useTranslation();
   const batchUpdateElements = useEditorStore((s) => s.batchUpdateElements);
+  const getBatchChanges = useBatchPropertyChanges();
 
   const allSameFontFamily = elements.every(
     (el) => el.fontFamily === elements[0].fontFamily,
@@ -1297,11 +1330,15 @@ function MultiTypographySection({
     (el) => el.fontWeight === elements[0].fontWeight,
   );
 
-  const fontSizeField = useDeferredValue(
+  const fontSizeField = usePropertyInput(
+    createPropertyEditKey(
+      "fontSize",
+      elements.map((el) => el.id),
+    ),
     allSameFontSize ? elements[0].fontSize : "",
     (v) => {
       const val = Number(v);
-      batchUpdateElements(
+      return getBatchChanges(
         elements.map((el) => {
           const changes: Partial<FormElement> & { fontSize: number } = {
             fontSize: val,
@@ -1403,12 +1440,18 @@ function MultiNameField({
   elements: { name: string; id: string }[];
 }) {
   const { t } = useTranslation();
-  const batchUpdateElements = useEditorStore((s) => s.batchUpdateElements);
+  const getBatchChanges = useBatchPropertyChanges();
   const allSame = elements.every((el) => el.name === elements[0].name);
-  const nameField = useDeferredValue(allSame ? elements[0].name : "", (v) =>
-    batchUpdateElements(
-      elements.map((el) => ({ id: el.id, changes: { name: v } })),
+  const nameField = usePropertyInput(
+    createPropertyEditKey(
+      "name",
+      elements.map((el) => el.id),
     ),
+    allSame ? elements[0].name : "",
+    (v) =>
+      getBatchChanges(
+        elements.map((el) => ({ id: el.id, changes: { name: v } })),
+      ),
   );
   return (
     <PropertyField label={t("properties.name")}>
@@ -1455,7 +1498,7 @@ function MultiRequiredSwitch({
 
 function MultiTextFieldProperties({ elements }: { elements: TextField[] }) {
   const { t } = useTranslation();
-  const batchUpdateElements = useEditorStore((s) => s.batchUpdateElements);
+  const getBatchChanges = useBatchPropertyChanges();
 
   if (elements.length === 0) return null;
 
@@ -1466,18 +1509,26 @@ function MultiTextFieldProperties({ elements }: { elements: TextField[] }) {
     (el) => el.maxLength === elements[0].maxLength,
   );
 
-  const defaultValueField = useDeferredValue(
+  const defaultValueField = usePropertyInput(
+    createPropertyEditKey(
+      "defaultValue",
+      elements.map((el) => el.id),
+    ),
     allSameDefaultValue ? elements[0].defaultValue : "",
     (v) =>
-      batchUpdateElements(
+      getBatchChanges(
         elements.map((el) => ({ id: el.id, changes: { defaultValue: v } })),
       ),
   );
 
-  const maxLengthField = useDeferredValue(
+  const maxLengthField = usePropertyInput(
+    createPropertyEditKey(
+      "maxLength",
+      elements.map((el) => el.id),
+    ),
     allSameMaxLength ? (elements[0].maxLength ?? "") : "",
     (v) =>
-      batchUpdateElements(
+      getBatchChanges(
         elements.map((el) => ({
           id: el.id,
           changes: { maxLength: v ? Number(v) : undefined },
@@ -1544,17 +1595,21 @@ function MultiCheckboxProperties({ elements }: { elements: Checkbox[] }) {
 
 function MultiRadioProperties({ elements }: { elements: RadioButton[] }) {
   const { t } = useTranslation();
-  const batchUpdateElements = useEditorStore((s) => s.batchUpdateElements);
+  const getBatchChanges = useBatchPropertyChanges();
 
   if (elements.length === 0) return null;
 
   const allSameGroup = elements.every(
     (el) => el.groupName === elements[0].groupName,
   );
-  const groupNameField = useDeferredValue(
+  const groupNameField = usePropertyInput(
+    createPropertyEditKey(
+      "groupName",
+      elements.map((el) => el.id),
+    ),
     allSameGroup ? elements[0].groupName : "",
     (v) => {
-      batchUpdateElements(
+      return getBatchChanges(
         elements.map((el) => ({ id: el.id, changes: { groupName: v } })),
       );
     },
@@ -1609,16 +1664,20 @@ function MultiDropdownProperties({ elements }: { elements: DropdownField[] }) {
 
 function MultiButtonProperties({ elements }: { elements: ButtonField[] }) {
   const { t } = useTranslation();
-  const batchUpdateElements = useEditorStore((s) => s.batchUpdateElements);
+  const getBatchChanges = useBatchPropertyChanges();
 
   if (elements.length === 0) return null;
 
   const allSameLabel = elements.every((el) => el.label === elements[0].label);
 
-  const labelField = useDeferredValue(
+  const labelField = usePropertyInput(
+    createPropertyEditKey(
+      "label",
+      elements.map((el) => el.id),
+    ),
     allSameLabel ? elements[0].label : "",
     (v) =>
-      batchUpdateElements(
+      getBatchChanges(
         elements.map((el) => ({ id: el.id, changes: { label: v } })),
       ),
   );
@@ -1636,7 +1695,7 @@ function MultiButtonProperties({ elements }: { elements: ButtonField[] }) {
 
 function MultiPositionProperties({ elements }: { elements: FormElement[] }) {
   const { t } = useTranslation();
-  const batchUpdateElements = useEditorStore((s) => s.batchUpdateElements);
+  const getBatchChanges = useBatchPropertyChanges();
   const pages = useEditorStore((s) => s.pages);
 
   if (elements.length === 0) return null;
@@ -1670,11 +1729,15 @@ function MultiPositionProperties({ elements }: { elements: FormElement[] }) {
       isOptionListField(el),
   );
 
-  const xField = useDeferredValue(
+  const xField = usePropertyInput(
+    createPropertyEditKey(
+      "x",
+      elements.map((el) => el.id),
+    ),
     allSameX ? Math.round(elements[0].x) : "",
     (v) => {
       const newX = Number(v);
-      batchUpdateElements(
+      return getBatchChanges(
         elements.map((el) => {
           const resolved = resolveElementPosition(
             pages,
@@ -1690,11 +1753,15 @@ function MultiPositionProperties({ elements }: { elements: FormElement[] }) {
       );
     },
   );
-  const yField = useDeferredValue(
+  const yField = usePropertyInput(
+    createPropertyEditKey(
+      "y",
+      elements.map((el) => el.id),
+    ),
     allSameY ? Math.round(elements[0].y) : "",
     (v) => {
       const newY = Number(v);
-      batchUpdateElements(
+      return getBatchChanges(
         elements.map((el) => {
           const resolved = resolveElementPosition(
             pages,
@@ -1710,24 +1777,30 @@ function MultiPositionProperties({ elements }: { elements: FormElement[] }) {
       );
     },
   );
-  const wField = useDeferredValue(
+  const wField = usePropertyInput(
+    createPropertyEditKey(
+      "width",
+      elements.map((el) => el.id),
+    ),
     allSameW ? Math.round(elements[0].width) : "",
     (v) =>
-      batchUpdateElements(
+      getBatchChanges(
         elements.map((el) => ({ id: el.id, changes: { width: Number(v) } })),
       ),
   );
-  const hField = useDeferredValue(heightDisplayValue, (v) =>
-    batchUpdateElements(
-      elements
-        .filter(
-          (el) =>
-            !(isTextField(el) && !el.multiline) &&
-            !isDropdownField(el) &&
-            !isOptionListField(el),
-        )
-        .map((el) => ({ id: el.id, changes: { height: Number(v) } })),
+  const hField = usePropertyInput(
+    createPropertyEditKey(
+      "height",
+      resizableElements.map((el) => el.id),
     ),
+    heightDisplayValue,
+    (v) =>
+      getBatchChanges(
+        resizableElements.map((el) => ({
+          id: el.id,
+          changes: { height: Number(v) },
+        })),
+      ),
   );
 
   return (
@@ -1999,10 +2072,11 @@ export function PropertiesPanel() {
 
 function GuideProperties({ guideId }: { guideId: string }) {
   const { t } = useTranslation();
-  const guide = useEditorStore((s) => s.guides.find((g) => g.id === guideId));
+  const guide = useEditorStore((s) =>
+    getDisplayGuides(s).find((g) => g.id === guideId),
+  );
   const previewGuide = useEditorStore((s) => s.previewGuide);
   const selectedGuideId = useEditorStore((s) => s.selectedGuideId);
-  const updateGuidePosition = useEditorStore((s) => s.updateGuidePosition);
   const removeGuide = useEditorStore((s) => s.removeGuide);
   const pages = useEditorStore((s) => s.pages);
 
@@ -2019,10 +2093,21 @@ function GuideProperties({ guideId }: { guideId: string }) {
     ? (pages[0]?.height ?? Infinity)
     : (pages[0]?.width ?? Infinity);
 
-  const posField = useDeferredValue(Math.round(livePosition), (v) => {
-    if (guide)
-      updateGuidePosition(guide.id, Math.max(0, Math.min(Number(v), maxPos)));
-  });
+  const posField = usePropertyInput(
+    createPropertyEditKey("position", [guideId]),
+    Math.round(livePosition),
+    (v) =>
+      guide
+        ? {
+            guideUpdates: [
+              {
+                id: guide.id,
+                position: Math.max(0, Math.min(Number(v), maxPos)),
+              },
+            ],
+          }
+        : {},
+  );
 
   if (!guide) return null;
 
@@ -2063,7 +2148,7 @@ function PropertiesPanelContent() {
   const { t } = useTranslation();
   const selectedGuideId = useEditorStore((s) => s.selectedGuideId);
   const selectedIds = useEditorStore((s) => s.selectedIds);
-  const elements = useEditorStore((s) => s.elements);
+  const elements = useEditorStore(getDisplayElements);
   const pages = useEditorStore((s) => s.pages);
   const updateElement = useEditorStore((s) => s.updateElement);
 
diff --git a/src/components/ruler.tsx b/src/components/ruler.tsx
index a9db7214..47c0cfbe 100644
--- a/src/components/ruler.tsx
+++ b/src/components/ruler.tsx
@@ -9,7 +9,7 @@ import { lockCursor, unlockCursor } from "@/lib/cursor";
 import { getLayoutContentWidth } from "@/lib/page-layout";
 import { RULER_SIZE_PX } from "@/lib/shell-layout";
 import { snapToGrid } from "@/lib/snap-engine";
-import { useEditorStore } from "@/stores/editor-store";
+import { getDisplayGuides, useEditorStore } from "@/stores/editor-store";
 import {
   useCallback,
   useEffect,
@@ -47,8 +47,7 @@ function resolveRulerColors(canvas: HTMLCanvasElement): RulerColors {
   if (cachedColors) return cachedColors;
   const style = getComputedStyle(canvas);
   cachedColors = {
-    bg:
-      style.getPropertyValue("--ruler-bg").trim() || FALLBACKS["--ruler-bg"],
+    bg: style.getPropertyValue("--ruler-bg").trim() || FALLBACKS["--ruler-bg"],
     majorColor:
       style.getPropertyValue("--ruler-tick-major").trim() ||
       FALLBACKS["--ruler-tick-major"],
@@ -119,7 +118,11 @@ function drawHorizontalRuler(
     const isMinor = px % MINOR_INTERVAL === 0;
 
     const startY = isMajor ? 0 : isMinor ? H * 0.5 : H * 0.65;
-    ctx.strokeStyle = isMajor ? colors.majorColor : isMinor ? colors.minorColor : colors.subColor;
+    ctx.strokeStyle = isMajor
+      ? colors.majorColor
+      : isMinor
+        ? colors.minorColor
+        : colors.subColor;
     ctx.lineWidth = isMajor ? 1 : 0.5;
     ctx.beginPath();
     ctx.moveTo(screenX, startY);
@@ -173,7 +176,11 @@ function drawVerticalRuler(
       const isMinor = py % MINOR_INTERVAL === 0;
 
       const startX = isMajor ? 0 : isMinor ? W * 0.5 : W * 0.65;
-      ctx.strokeStyle = isMajor ? colors.majorColor : isMinor ? colors.minorColor : colors.subColor;
+      ctx.strokeStyle = isMajor
+        ? colors.majorColor
+        : isMinor
+          ? colors.minorColor
+          : colors.subColor;
       ctx.lineWidth = isMajor ? 1 : 0.5;
       ctx.beginPath();
       ctx.moveTo(startX, screenY);
@@ -209,7 +216,7 @@ export function HorizontalRuler({
   const pages = useEditorStore((s) => s.pages);
   const committedZoom = useEditorStore((s) => s.zoom);
   const pdfBytes = useEditorStore((s) => s.pdfBytes);
-  const guides = useEditorStore((s) => s.guides);
+  const guides = useEditorStore(getDisplayGuides);
   const addGuide = useEditorStore((s) => s.addGuide);
   const removeGuide = useEditorStore((s) => s.removeGuide);
   const setPreviewGuide = useEditorStore((s) => s.setPreviewGuide);
@@ -358,7 +365,7 @@ export function HorizontalRuler({
           e.preventDefault();
           if (!pdfBytes || pages.length === 0) return;
           const page = pages[0];
-          addGuide("vertical", Math.round(page.width / 2 * 10) / 10);
+          addGuide("vertical", Math.round((page.width / 2) * 10) / 10);
         }
       }}
     >
@@ -387,7 +394,7 @@ export function VerticalRuler({
   const pages = useEditorStore((s) => s.pages);
   const committedZoom = useEditorStore((s) => s.zoom);
   const pdfBytes = useEditorStore((s) => s.pdfBytes);
-  const guides = useEditorStore((s) => s.guides);
+  const guides = useEditorStore(getDisplayGuides);
   const addGuide = useEditorStore((s) => s.addGuide);
   const removeGuide = useEditorStore((s) => s.removeGuide);
   const setPreviewGuide = useEditorStore((s) => s.setPreviewGuide);
@@ -546,7 +553,7 @@ export function VerticalRuler({
           e.preventDefault();
           if (!pdfBytes || pages.length === 0) return;
           const page = pages[0];
-          addGuide("horizontal", Math.round(page.height / 2 * 10) / 10);
+          addGuide("horizontal", Math.round((page.height / 2) * 10) / 10);
         }
       }}
     >
@@ -567,4 +574,3 @@ export function RulerCorner() {
     />
   );
 }
-
diff --git a/src/hooks/use-drawing-tool.ts b/src/hooks/use-drawing-tool.ts
index 9ff648bc..3f2f3929 100644
--- a/src/hooks/use-drawing-tool.ts
+++ b/src/hooks/use-drawing-tool.ts
@@ -16,7 +16,7 @@ import {
   type SnapContext,
   type SnapGuide,
 } from "@/lib/snap-engine";
-import { useEditorStore } from "@/stores/editor-store";
+import { getDisplayElements, useEditorStore } from "@/stores/editor-store";
 import { useCallback, useRef, useState } from "react";
 
 interface DrawRect {
@@ -165,6 +165,7 @@ export function useDrawingTool(deps: {
       const width = Math.abs(drawRect.currentX - drawRect.startX);
 
       const state = useEditorStore.getState();
+      const elements = getDisplayElements(state);
       let newEl: FormElement | null = null;
 
       if (HORIZONTAL_DRAW_TOOLS.has(activeTool) && width > 5) {
@@ -179,7 +180,7 @@ export function useDrawingTool(deps: {
             x: pdfTopLeft.x,
             y: pdfTopLeft.y,
             pageNumber: start.pageNumber,
-            name: `dropdown_${state.elements.length + 1}`,
+            name: `dropdown_${elements.length + 1}`,
             width: pdfWidth,
           });
         } else if (activeTool === "optionlist") {
@@ -187,7 +188,7 @@ export function useDrawingTool(deps: {
             x: pdfTopLeft.x,
             y: pdfTopLeft.y,
             pageNumber: start.pageNumber,
-            name: `optionlist_${state.elements.length + 1}`,
+            name: `optionlist_${elements.length + 1}`,
             width: pdfWidth,
           });
         } else {
@@ -195,7 +196,7 @@ export function useDrawingTool(deps: {
             x: pdfTopLeft.x,
             y: pdfTopLeft.y,
             pageNumber: start.pageNumber,
-            name: `text_${state.elements.length + 1}`,
+            name: `text_${elements.length + 1}`,
             multiline: false,
             width: pdfWidth,
           });
@@ -214,7 +215,7 @@ export function useDrawingTool(deps: {
             x: pdfTopLeft.x,
             y: pdfTopLeft.y,
             pageNumber: start.pageNumber,
-            name: `text_${state.elements.length + 1}`,
+            name: `text_${elements.length + 1}`,
             multiline: true,
             width: pdfWidth,
             height: pdfHeight,
diff --git a/src/hooks/use-element-drag.ts b/src/hooks/use-element-drag.ts
index 1f2e1bb6..0098b7a3 100644
--- a/src/hooks/use-element-drag.ts
+++ b/src/hooks/use-element-drag.ts
@@ -8,7 +8,7 @@ import {
   type SnapContext,
   type SnapGuide,
 } from "@/lib/snap-engine";
-import { useEditorStore } from "@/stores/editor-store";
+import { getDisplayElements, useEditorStore } from "@/stores/editor-store";
 import { useCallback, useRef, useState } from "react";
 
 interface ElementDragConfig {
@@ -75,7 +75,7 @@ export function useElementDrag(config: ElementDragConfig) {
       lockCursor("grab");
 
       const positions = new Map<string, { x: number; y: number }>();
-      for (const e of store.elements) {
+      for (const e of getDisplayElements(store)) {
         positions.set(e.id, { x: e.x, y: e.y });
       }
       dragStartPositions.current = positions;
@@ -107,6 +107,7 @@ export function useElementDrag(config: ElementDragConfig) {
       const rawDy = deltaY / zoom;
 
       const store = useEditorStore.getState();
+      const elements = getDisplayElements(store);
       const currentSelectedIds = store.selectedIds;
       const isMultiDrag =
         currentSelectedIds.size > 1 && currentSelectedIds.has(el.id);
@@ -134,7 +135,6 @@ export function useElementDrag(config: ElementDragConfig) {
           : undefined;
 
         if (isMultiDrag) {
-          const elements = store.elements;
           const selectedOnPage = elements.filter(
             (e) =>
               currentSelectedIds.has(e.id) && e.pageNumber === el.pageNumber,
@@ -213,7 +213,6 @@ export function useElementDrag(config: ElementDragConfig) {
         snapCtx.snapToGrid ? guides.filter((g) => g.type !== "grid") : guides,
       );
 
-      const elements = store.elements;
       if (isMultiDrag) {
         for (const selEl of elements) {
           if (!currentSelectedIds.has(selEl.id)) continue;
@@ -274,7 +273,7 @@ export function useElementDrag(config: ElementDragConfig) {
       if (currentSelectedIds.size > 1 && currentSelectedIds.has(el.id)) {
         const rawDx = (d.x - screen.x) / zoom;
         const rawDy = (d.y - screen.y) / zoom;
-        const elements = store.elements;
+        const elements = getDisplayElements(store);
         const selectedOnPage = elements.filter(
           (e) => currentSelectedIds.has(e.id) && e.pageNumber === el.pageNumber,
         );
diff --git a/src/hooks/use-marquee-selection.ts b/src/hooks/use-marquee-selection.ts
index 2a4e605c..c820e5e5 100644
--- a/src/hooks/use-marquee-selection.ts
+++ b/src/hooks/use-marquee-selection.ts
@@ -1,7 +1,7 @@
 import { pdfToScreen } from "@/lib/coordinates";
 import { rectsOverlap, type Rect } from "@/lib/geometry";
 import type { PageLayout } from "@/lib/page-layout";
-import { useEditorStore } from "@/stores/editor-store";
+import { getDisplayElements, useEditorStore } from "@/stores/editor-store";
 import { useCallback, useRef, useState } from "react";
 
 interface MarqueeRect {
@@ -51,7 +51,7 @@ export function useMarqueeSelection(deps: {
         const marqueeRect: Rect = { x: left, y: top, width, height };
         const state = useEditorStore.getState();
 
-        for (const el of state.elements) {
+        for (const el of getDisplayElements(state)) {
           const layout = layouts.get(el.pageNumber);
           if (!layout) continue;
           const screen = pdfToScreen(
diff --git a/src/hooks/use-multi-resize.ts b/src/hooks/use-multi-resize.ts
index f189fce1..5f52ae83 100644
--- a/src/hooks/use-multi-resize.ts
+++ b/src/hooks/use-multi-resize.ts
@@ -7,7 +7,7 @@ import {
   type SnapContext,
   type SnapGuide,
 } from "@/lib/snap-engine";
-import { useEditorStore } from "@/stores/editor-store";
+import { getDisplayElements, useEditorStore } from "@/stores/editor-store";
 import { useCallback, useRef, useState } from "react";
 
 const MIN_SCREEN = 10;
@@ -82,7 +82,7 @@ export function useMultiResize(config: MultiResizeConfig) {
 
   const handleResizeStart = useCallback(() => {
     const store = useEditorStore.getState();
-    const selected = store.elements.filter((el) =>
+    const selected = getDisplayElements(store).filter((el) =>
       store.selectedIds.has(el.id),
     );
     if (selected.length < 2) return;
@@ -160,7 +160,9 @@ export function useMultiResize(config: MultiResizeConfig) {
       const primaryLayout = config.layouts.get(primaryPageRef.current);
 
       const isHorizontal = _dir === "left" || _dir === "right";
-      lockCursor(anyHeightLockedRef.current || isHorizontal ? "ew" : dirToCursor(_dir));
+      lockCursor(
+        anyHeightLockedRef.current || isHorizontal ? "ew" : dirToCursor(_dir),
+      );
 
       let sx = position.x;
       let sy = position.y;
@@ -216,7 +218,12 @@ export function useMultiResize(config: MultiResizeConfig) {
               pageY: primaryLayout.yOffset,
             },
           );
-          snappedBbox = { x: snScreen.x, y: snScreen.y, width: snW * zoom, height: snH * zoom };
+          snappedBbox = {
+            x: snScreen.x,
+            y: snScreen.y,
+            width: snW * zoom,
+            height: snH * zoom,
+          };
           sx = snScreen.x;
           sy = snScreen.y;
           sw = snW * zoom;
diff --git a/src/lib/file-io/adapters/tauri.ts b/src/lib/file-io/adapters/tauri.ts
index 0b3526b5..bbf0365b 100644
--- a/src/lib/file-io/adapters/tauri.ts
+++ b/src/lib/file-io/adapters/tauri.ts
@@ -1,4 +1,5 @@
 import {
+  getDisplayElements,
   isDirty as storeIsDirty,
   markClean as storeMarkClean,
   useEditorStore,
@@ -56,7 +57,7 @@ export const zustandStore: StorePort = {
   getPdfBytes: () => useEditorStore.getState().pdfBytes,
   getPdfFilePath: () => useEditorStore.getState().pdfFilePath,
   getPdfFileName: () => useEditorStore.getState().pdfFileName,
-  getElements: () => useEditorStore.getState().elements,
+  getElements: () => getDisplayElements(useEditorStore.getState()),
   getPages: () => useEditorStore.getState().pages,
   setPdf: (name, bytes, pages) =>
     useEditorStore.getState().setPdf(name, bytes, pages),
diff --git a/src/stores/editor-store.ts b/src/stores/editor-store.ts
index 4cd05ea8..15afe07e 100644
--- a/src/stores/editor-store.ts
+++ b/src/stores/editor-store.ts
@@ -24,7 +24,7 @@ import type { PageInfo } from "@/lib/pdf-loader";
 import { announce } from "@/stores/announcement-store";
 import i18n from "@/i18n";
 import { temporal } from "zundo";
-import { create } from "zustand";
+import { create, type StoreApi } from "zustand";
 
 const NUMERIC_KEYS: ReadonlySet<string> = new Set([
   "x",
@@ -36,9 +36,7 @@ const NUMERIC_KEYS: ReadonlySet<string> = new Set([
   "maxLength",
 ]);
 
-function sanitizePartial(
-  updates: Partial<FormElement>,
-): Partial<FormElement> {
+function sanitizePartial(updates: Partial<FormElement>): Partial<FormElement> {
   const result: Record<string, unknown> = {};
   for (const [key, val] of Object.entries(updates)) {
     if (NUMERIC_KEYS.has(key) && typeof val === "number") {
@@ -78,6 +76,70 @@ function mergeElement(
   return { ...el, ...sanitizePartial(updates) } as FormElement;
 }
 
+export type PropertyEditKey = string & {
+  readonly propertyEditKey: unique symbol;
+};
+
+export interface ElementPropertyUpdate {
+  id: string;
+  changes: Partial<FormElement>;
+}
+
+export interface GuidePositionUpdate {
+  id: string;
+  position: number;
+}
+
+export interface PropertyEditChanges {
+  elementUpdates?: ElementPropertyUpdate[];
+  guideUpdates?: GuidePositionUpdate[];
+}
+
+interface PropertyEditSession {
+  identity: PropertyEditKey;
+  inputValue: string;
+  elements: FormElement[];
+  guides: GuideLine[];
+}
+
+function applyElementChanges(
+  elements: FormElement[],
+  updates: ElementPropertyUpdate[],
+): FormElement[] {
+  const updateMap = new Map(
+    updates.map((update) => [update.id, update.changes]),
+  );
+  let changed = false;
+  const next = elements.map((element) => {
+    const elementUpdates = updateMap.get(element.id);
+    if (!elementUpdates) return element;
+    const hasChanges = (
+      Object.keys(elementUpdates) as (keyof FormElement)[]
+    ).some((key) => valuesDiffer(element[key], elementUpdates[key]));
+    if (!hasChanges) return element;
+    changed = true;
+    return mergeElement(element, elementUpdates);
+  });
+  return changed ? next : elements;
+}
+
+function applyGuideChanges(
+  guides: GuideLine[],
+  updates: GuidePositionUpdate[],
+): GuideLine[] {
+  const updateMap = new Map(
+    updates.map((update) => [update.id, update.position]),
+  );
+  let changed = false;
+  const next = guides.map((guide) => {
+    const position = updateMap.get(guide.id);
+    if (position === undefined || numEq(guide.position, position)) return guide;
+    changed = true;
+    return { ...guide, position };
+  });
+  return changed ? next : guides;
+}
+
 function resolvePasteSources(
   clipboard: FormElement[],
   pasteStackByPage: Record<number, FormElement[]>,
@@ -153,6 +215,7 @@ const PDF_RESET_STATE = {
   clipboard: [] as FormElement[],
   pasteStackByPage: {} as Record<number, FormElement[]>,
   guides: [] as GuideLine[],
+  propertyEditSession: null as PropertyEditSession | null,
   selectedGuideId: null as string | null,
   previewGuide: null as {
     orientation: "horizontal" | "vertical";
@@ -167,6 +230,13 @@ const PDF_RESET_STATE = {
 
 export type { PageInfo };
 
+export function createPropertyEditKey(
+  property: string,
+  subjectIds: readonly string[],
+): PropertyEditKey {
+  return `${property}:${[...subjectIds].sort().join("|")}` as PropertyEditKey;
+}
+
 let nextPasteId = 1;
 function generatePastedId(): string {
   return `el_paste_${nextPasteId++}_${Date.now().toString(36)}`;
@@ -199,7 +269,8 @@ function valuesDiffer(a: unknown, b: unknown): boolean {
 const PASTE_OFFSET = 10;
 
 function getTypeLabelKey(el: FormElement): string {
-  if (el.type === "text" && "multiline" in el && el.multiline) return "fieldTypes.multiline";
+  if (el.type === "text" && "multiline" in el && el.multiline)
+    return "fieldTypes.multiline";
   const map: Record<string, string> = {
     text: "fieldTypes.textField",
     checkbox: "fieldTypes.checkbox",
@@ -239,6 +310,7 @@ export interface EditorState {
   pasteStackByPage: Record<number, FormElement[]>;
   gridSize: number;
   guides: GuideLine[];
+  propertyEditSession: PropertyEditSession | null;
   previewGuide: {
     orientation: "horizontal" | "vertical";
     position: number;
@@ -261,6 +333,13 @@ export interface EditorState {
   setRenderPdfBytes: (bytes: Uint8Array) => void;
   setInitialElements: (elements: FormElement[]) => void;
   replaceFormElements: (elements: FormElement[]) => void;
+  beginPropertyEdit: (identity: PropertyEditKey, inputValue: string) => void;
+  previewPropertyEdit: (
+    inputValue: string,
+    changes: PropertyEditChanges,
+  ) => void;
+  commitPropertyEdit: (identity?: PropertyEditKey) => void;
+  discardPropertyEdit: (identity?: PropertyEditKey) => void;
   addElement: (element: FormElement) => void;
   updateElement: (id: string, updates: Partial<FormElement>) => void;
   moveElements: (
@@ -282,9 +361,7 @@ export interface EditorState {
   addGuide: (orientation: "horizontal" | "vertical", position: number) => void;
   removeGuide: (id: string) => void;
   updateGuidePosition: (id: string, position: number) => void;
-  batchUpdateElements: (
-    updates: Array<{ id: string; changes: Partial<FormElement> }>,
-  ) => void;
+  batchUpdateElements: (updates: ElementPropertyUpdate[]) => void;
   setPreviewGuide: (
     guide: { orientation: "horizontal" | "vertical"; position: number } | null,
   ) => void;
@@ -309,6 +386,25 @@ export interface EditorState {
   setDragFileValid: (valid: boolean) => void;
 }
 
+export function getDisplayElements(state: EditorState): FormElement[] {
+  return state.propertyEditSession?.elements ?? state.elements;
+}
+
+export function getDisplayGuides(state: EditorState): GuideLine[] {
+  return state.propertyEditSession?.guides ?? state.guides;
+}
+
+export function getPropertyEditInputValue(
+  state: EditorState,
+  identity: PropertyEditKey,
+  fallback: string | number,
+): string {
+  const session = state.propertyEditSession;
+  return session?.identity === identity
+    ? session.inputValue
+    : String(fallback ?? "");
+}
+
 function guidesEqual(a: GuideLine[], b: GuideLine[]): boolean {
   if (a === b) return true;
   if (a.length !== b.length) return false;
@@ -373,6 +469,30 @@ function pasteStackEqual(
   return true;
 }
 
+type PersistentStateUpdate =
+  | Partial<EditorState>
+  | ((state: EditorState) => Partial<EditorState>);
+
+function setPersistent(
+  set: StoreApi<EditorState>["setState"],
+  get: StoreApi<EditorState>["getState"],
+  update: PersistentStateUpdate,
+) {
+  get().commitPropertyEdit();
+  if (typeof update === "function") {
+    set((state) => update(state));
+  } else {
+    set(update);
+  }
+}
+
+function commitPropertyEditAndGetState(
+  get: StoreApi<EditorState>["getState"],
+): EditorState {
+  get().commitPropertyEdit();
+  return get();
+}
+
 export const useEditorStore = create<EditorState>()(
   temporal(
     (set, get) => ({
@@ -390,6 +510,7 @@ export const useEditorStore = create<EditorState>()(
       pasteStackByPage: {},
       gridSize: 5,
       guides: [],
+      propertyEditSession: null,
       previewGuide: null,
       selectedGuideId: null,
       dragLivePositions: new Map(),
@@ -426,7 +547,7 @@ export const useEditorStore = create<EditorState>()(
       setRenderPdfBytes: (bytes) => set({ renderPdfBytes: bytes }),
 
       setInitialElements: (elements: FormElement[]) => {
-        set({ elements });
+        set({ elements, propertyEditSession: null });
         useEditorStore.temporal.getState().clear();
         _cleanSnapshot = {
           elements: elements.map((el) => ({ ...el })),
@@ -440,24 +561,90 @@ export const useEditorStore = create<EditorState>()(
           selectedIds: new Set<string>(),
           clipboard: [],
           pasteStackByPage: {},
+          propertyEditSession: null,
         });
         announce(
           i18n.t("announcements.fieldsImported", { count: elements.length }),
         );
       },
 
+      beginPropertyEdit: (identity, inputValue) => {
+        const activeSession = get().propertyEditSession;
+        if (activeSession?.identity === identity) return;
+        if (activeSession) get().commitPropertyEdit();
+        const state = get();
+        set({
+          propertyEditSession: {
+            identity,
+            inputValue,
+            elements: state.elements,
+            guides: state.guides,
+          },
+        });
+      },
+
+      previewPropertyEdit: (inputValue, changes) => {
+        set((state) => {
+          const session = state.propertyEditSession;
+          if (!session) return state;
+          const elements = changes.elementUpdates
+            ? applyElementChanges(session.elements, changes.elementUpdates)
+            : session.elements;
+          const guides = changes.guideUpdates
+            ? applyGuideChanges(session.guides, changes.guideUpdates)
+            : session.guides;
+          if (
+            inputValue === session.inputValue &&
+            elements === session.elements &&
+            guides === session.guides
+          ) {
+            return state;
+          }
+          return {
+            propertyEditSession: {
+              ...session,
+              inputValue,
+              elements,
+              guides,
+            },
+          };
+        });
+      },
+
+      commitPropertyEdit: (identity) => {
+        const session = get().propertyEditSession;
+        if (!session || (identity && session.identity !== identity)) return;
+        set({
+          elements: session.elements,
+          guides: session.guides,
+          propertyEditSession: null,
+        });
+      },
+
+      discardPropertyEdit: (identity) => {
+        const session = get().propertyEditSession;
+        if (!session || (identity && session.identity !== identity)) return;
+        set({ propertyEditSession: null });
+      },
+
       addElement: (element) => {
-        set((s) => ({ elements: [...s.elements, element] }));
-        announce(i18n.t("announcements.elementAdded", { type: i18n.t(getTypeLabelKey(element)) }));
+        setPersistent(set, get, (s) => ({
+          elements: [...s.elements, element],
+        }));
+        announce(
+          i18n.t("announcements.elementAdded", {
+            type: i18n.t(getTypeLabelKey(element)),
+          }),
+        );
       },
 
       updateElement: (id, updates) => {
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const el = s.elements.find((e) => e.id === id);
           if (!el) return s;
-          const changed = (
-            Object.keys(updates) as (keyof FormElement)[]
-          ).some((k) => valuesDiffer(el[k], updates[k]));
+          const changed = (Object.keys(updates) as (keyof FormElement)[]).some(
+            (k) => valuesDiffer(el[k], updates[k]),
+          );
           if (!changed) return s;
           return {
             elements: s.elements.map((e) =>
@@ -468,7 +655,7 @@ export const useEditorStore = create<EditorState>()(
       },
 
       moveElements: (updates) => {
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const changed = updates.some((u) => {
             const el = s.elements.find((e) => e.id === u.id);
             if (!el) return false;
@@ -486,7 +673,11 @@ export const useEditorStore = create<EditorState>()(
               if (!u) return el;
               return u.pageNumber !== undefined &&
                 u.pageNumber !== el.pageNumber
-                ? mergeElement(el, { x: u.x, y: u.y, pageNumber: u.pageNumber })
+                ? mergeElement(el, {
+                    x: u.x,
+                    y: u.y,
+                    pageNumber: u.pageNumber,
+                  })
                 : { ...el, x: u.x, y: u.y };
             }),
           };
@@ -495,7 +686,7 @@ export const useEditorStore = create<EditorState>()(
 
       removeElements: (ids) => {
         let didRemove = false;
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const remaining = s.elements.filter((el) => !ids.includes(el.id));
           if (remaining.length === s.elements.length) return s;
           didRemove = true;
@@ -507,21 +698,29 @@ export const useEditorStore = create<EditorState>()(
           };
         });
         if (didRemove) {
-          announce(i18n.t("announcements.elementsDeleted", { count: ids.length }));
+          announce(
+            i18n.t("announcements.elementsDeleted", { count: ids.length }),
+          );
         }
       },
 
-      selectElements: (ids) => set({ selectedIds: ids, selectedGuideId: null }),
+      selectElements: (ids) => {
+        setPersistent(set, get, {
+          selectedIds: ids,
+          selectedGuideId: null,
+        });
+      },
 
-      clearSelection: () =>
-        set({
+      clearSelection: () => {
+        setPersistent(set, get, {
           selectedIds: new Set<string>(),
           selectedGuideId: null,
           dragLivePositions: new Map(),
-        }),
+        });
+      },
 
-      toggleInSelection: (id) =>
-        set((s) => {
+      toggleInSelection: (id) => {
+        setPersistent(set, get, (s) => {
           const next = new Set(s.selectedIds);
           if (next.has(id)) {
             next.delete(id);
@@ -529,36 +728,38 @@ export const useEditorStore = create<EditorState>()(
             next.add(id);
           }
           return { selectedIds: next };
-        }),
+        });
+      },
 
-      addToSelection: (ids) =>
-        set((s) => {
+      addToSelection: (ids) => {
+        setPersistent(set, get, (s) => {
           const next = new Set(s.selectedIds);
           for (const id of ids) {
             next.add(id);
           }
           return { selectedIds: next };
-        }),
+        });
+      },
 
-      copySelection: () =>
-        set((s) => {
+      copySelection: () => {
+        setPersistent(set, get, (s) => {
           const selected = s.elements.filter((el) => s.selectedIds.has(el.id));
           if (selected.length === 0) return s;
           return {
             clipboard: structuredClone(selected),
             pasteStackByPage: {},
           };
-        }),
+        });
+      },
 
       pasteClipboard: (
         targetPage?: number,
         targetX?: number,
         targetY?: number,
       ) => {
-        set((s) => {
+        setPersistent(set, get, (s) => {
           if (s.clipboard.length === 0) return s;
-          const pasteAtPoint =
-            targetX !== undefined && targetY !== undefined;
+          const pasteAtPoint = targetX !== undefined && targetY !== undefined;
           const sourcePage = s.clipboard[0].pageNumber;
           const { sources, applyOffset, resolvedPage } = pasteAtPoint
             ? {
@@ -567,11 +768,7 @@ export const useEditorStore = create<EditorState>()(
                   targetPage === undefined || targetPage === sourcePage,
                 resolvedPage: targetPage ?? sourcePage,
               }
-            : resolvePasteSources(
-                s.clipboard,
-                s.pasteStackByPage,
-                targetPage,
-              );
+            : resolvePasteSources(s.clipboard, s.pasteStackByPage, targetPage);
           const { cloned, newIds } = cloneElementsWithNewIds(
             sources,
             s.elements,
@@ -598,7 +795,7 @@ export const useEditorStore = create<EditorState>()(
       },
 
       cutSelection: () => {
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const selected = s.elements.filter((el) => s.selectedIds.has(el.id));
           if (selected.length === 0) return s;
           return {
@@ -612,7 +809,7 @@ export const useEditorStore = create<EditorState>()(
 
       duplicateSelection: (targetPage?: number) => {
         let count = 0;
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const selected = s.elements.filter((el) => s.selectedIds.has(el.id));
           if (selected.length === 0) return s;
           const { cloned, newIds } = cloneElementsWithNewIds(
@@ -635,7 +832,7 @@ export const useEditorStore = create<EditorState>()(
       },
 
       addGuide: (orientation, position) => {
-        set((s) => ({
+        setPersistent(set, get, (s) => ({
           guides: [
             ...s.guides,
             { id: generateGuideId(), orientation, position },
@@ -644,7 +841,7 @@ export const useEditorStore = create<EditorState>()(
       },
 
       removeGuide: (id) => {
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const remaining = s.guides.filter((g) => g.id !== id);
           if (remaining.length === s.guides.length) return s;
           return {
@@ -656,48 +853,35 @@ export const useEditorStore = create<EditorState>()(
       },
 
       updateGuidePosition: (id, position) => {
-        set((s) => {
+        setPersistent(set, get, (s) => {
           const guide = s.guides.find((g) => g.id === id);
           if (!guide || numEq(guide.position, position)) return s;
           return {
-            guides: s.guides.map((g) =>
-              g.id === id ? { ...g, position } : g,
-            ),
+            guides: s.guides.map((g) => (g.id === id ? { ...g, position } : g)),
           };
         });
       },
 
-      batchUpdateElements: (
-        updates: Array<{ id: string; changes: Partial<FormElement> }>,
-      ) => {
-        set((s) => {
-          const map = new Map(updates.map((u) => [u.id, u.changes]));
-          let anyChanged = false;
-          const newElements = s.elements.map((el) => {
-            const changes = map.get(el.id);
-            if (!changes) return el;
-            const changed = (
-              Object.keys(changes) as (keyof FormElement)[]
-            ).some((k) => valuesDiffer(el[k], changes[k]));
-            if (!changed) return el;
-            anyChanged = true;
-            return mergeElement(el, changes);
-          });
-          if (!anyChanged) return s;
-          return { elements: newElements };
-        });
+      batchUpdateElements: (updates) => {
+        setPersistent(set, get, (s) => ({
+          elements: applyElementChanges(s.elements, updates),
+        }));
       },
 
       setPreviewGuide: (guide) => set({ previewGuide: guide }),
 
-      selectGuide: (id) =>
-        set({ selectedGuideId: id, selectedIds: new Set<string>() }),
+      selectGuide: (id) => {
+        setPersistent(set, get, {
+          selectedGuideId: id,
+          selectedIds: new Set<string>(),
+        });
+      },
 
       setDragLivePositions: (positions) =>
         set({ dragLivePositions: positions ?? new Map() }),
 
       alignElements: (type) => {
-        const state = get();
+        const state = commitPropertyEditAndGetState(get);
         if (state.selectedIds.size < 2) return;
         let updates: Array<{ id: string; x: number; y: number }> = [];
         switch (type) {
@@ -721,27 +905,35 @@ export const useEditorStore = create<EditorState>()(
             break;
         }
         if (updates.length > 0) {
-          set((s) => ({ elements: applyPositionUpdates(s.elements, updates) }));
+          set((s) => ({
+            elements: applyPositionUpdates(s.elements, updates),
+          }));
         }
       },
 
       distributeElements: (direction) => {
-        const state = get();
+        const state = commitPropertyEditAndGetState(get);
         if (state.selectedIds.size < 3) return;
         const updates =
           direction === "horizontal"
             ? distributeH(state.elements, state.selectedIds)
             : distributeV(state.elements, state.selectedIds);
         if (updates.length > 0) {
-          set((s) => ({ elements: applyPositionUpdates(s.elements, updates) }));
+          set((s) => ({
+            elements: applyPositionUpdates(s.elements, updates),
+          }));
         }
       },
 
       centerSelectionOnPage: () => {
-        const state = get();
+        const state = commitPropertyEditAndGetState(get);
         if (state.selectedIds.size === 0 || state.pages.length === 0) return;
-        const firstSelected = state.elements.find((el) => state.selectedIds.has(el.id));
-        const pageIdx = firstSelected ? Math.min(firstSelected.pageNumber - 1, state.pages.length - 1) : 0;
+        const firstSelected = state.elements.find((el) =>
+          state.selectedIds.has(el.id),
+        );
+        const pageIdx = firstSelected
+          ? Math.min(firstSelected.pageNumber - 1, state.pages.length - 1)
+          : 0;
         const page = state.pages[pageIdx];
         const updates = centerOnPage(
           state.elements,
@@ -750,15 +942,21 @@ export const useEditorStore = create<EditorState>()(
           page.height,
         );
         if (updates.length > 0) {
-          set((s) => ({ elements: applyPositionUpdates(s.elements, updates) }));
+          set((s) => ({
+            elements: applyPositionUpdates(s.elements, updates),
+          }));
         }
       },
 
       centerSelectionOnPageH: () => {
-        const state = get();
+        const state = commitPropertyEditAndGetState(get);
         if (state.selectedIds.size === 0 || state.pages.length === 0) return;
-        const firstSelected = state.elements.find((el) => state.selectedIds.has(el.id));
-        const pageIdx = firstSelected ? Math.min(firstSelected.pageNumber - 1, state.pages.length - 1) : 0;
+        const firstSelected = state.elements.find((el) =>
+          state.selectedIds.has(el.id),
+        );
+        const pageIdx = firstSelected
+          ? Math.min(firstSelected.pageNumber - 1, state.pages.length - 1)
+          : 0;
         const page = state.pages[pageIdx];
         const updates = centerOnPageH(
           state.elements,
@@ -766,15 +964,21 @@ export const useEditorStore = create<EditorState>()(
           page.width,
         );
         if (updates.length > 0) {
-          set((s) => ({ elements: applyPositionUpdates(s.elements, updates) }));
+          set((s) => ({
+            elements: applyPositionUpdates(s.elements, updates),
+          }));
         }
       },
 
       centerSelectionOnPageV: () => {
-        const state = get();
+        const state = commitPropertyEditAndGetState(get);
         if (state.selectedIds.size === 0 || state.pages.length === 0) return;
-        const firstSelected = state.elements.find((el) => state.selectedIds.has(el.id));
-        const pageIdx = firstSelected ? Math.min(firstSelected.pageNumber - 1, state.pages.length - 1) : 0;
+        const firstSelected = state.elements.find((el) =>
+          state.selectedIds.has(el.id),
+        );
+        const pageIdx = firstSelected
+          ? Math.min(firstSelected.pageNumber - 1, state.pages.length - 1)
+          : 0;
         const page = state.pages[pageIdx];
         const updates = centerOnPageV(
           state.elements,
@@ -782,7 +986,9 @@ export const useEditorStore = create<EditorState>()(
           page.height,
         );
         if (updates.length > 0) {
-          set((s) => ({ elements: applyPositionUpdates(s.elements, updates) }));
+          set((s) => ({
+            elements: applyPositionUpdates(s.elements, updates),
+          }));
         }
       },
 
@@ -791,7 +997,7 @@ export const useEditorStore = create<EditorState>()(
       setDragFileValid: (valid) => set({ isDragFileValid: valid }),
 
       matchElementSize: (type) => {
-        const state = get();
+        const state = commitPropertyEditAndGetState(get);
         if (state.selectedIds.size < 2) return;
         let updates: Array<{ id: string; width?: number; height?: number }> =
           [];
@@ -860,12 +1066,14 @@ function pruneSelectionAfterUndoRedo() {
 
 export function undo() {
   if (!useEditorStore.getState().pdfBytes) return;
+  useEditorStore.getState().commitPropertyEdit();
   useEditorStore.temporal.getState().undo();
   pruneSelectionAfterUndoRedo();
 }
 
 export function redo() {
   if (!useEditorStore.getState().pdfBytes) return;
+  useEditorStore.getState().commitPropertyEdit();
   useEditorStore.temporal.getState().redo();
   pruneSelectionAfterUndoRedo();
 }
@@ -880,19 +1088,23 @@ export function canRedo(): boolean {
   return useEditorStore.temporal.getState().futureStates.length > 0;
 }
 
-let _cleanSnapshot: { elements: FormElement[]; guides: GuideLine[] } | null = null;
+let _cleanSnapshot: { elements: FormElement[]; guides: GuideLine[] } | null =
+  null;
 
 export function isDirty(): boolean {
   const state = useEditorStore.getState();
   if (!state.pdfBytes) return false;
-  if (!_cleanSnapshot) return state.elements.length > 0 || state.guides.length > 0;
+  const elements = getDisplayElements(state);
+  const guides = getDisplayGuides(state);
+  if (!_cleanSnapshot) return elements.length > 0 || guides.length > 0;
   return (
-    !elementsEqual(state.elements, _cleanSnapshot.elements) ||
-    !guidesEqual(state.guides, _cleanSnapshot.guides)
+    !elementsEqual(elements, _cleanSnapshot.elements) ||
+    !guidesEqual(guides, _cleanSnapshot.guides)
   );
 }
 
 export function markClean(): void {
+  useEditorStore.getState().commitPropertyEdit();
   const state = useEditorStore.getState();
   _cleanSnapshot = {
     elements: state.elements.map((el) => ({ ...el })),
diff --git a/tests/components/properties-panel.test.tsx b/tests/components/properties-panel.test.tsx
new file mode 100644
index 00000000..28ec322a
--- /dev/null
+++ b/tests/components/properties-panel.test.tsx
@@ -0,0 +1,145 @@
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@tauri-apps/plugin-opener", () => ({
+  openUrl: vi.fn(),
+}));
+
+import { PropertiesPanel } from "@/components/properties-panel";
+import { createTextField } from "@/lib/form-element-model";
+import {
+  canUndo,
+  getDisplayElements,
+  undo,
+  useEditorStore,
+} from "@/stores/editor-store";
+
+describe("PropertiesPanel", () => {
+  beforeEach(() => {
+    useEditorStore.getState().clearPdf();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("shows the selected field properties when changing selection from a focused editor", async () => {
+    const first = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "first-field",
+    });
+    const second = createTextField({
+      x: 50,
+      y: 50,
+      pageNumber: 1,
+      name: "second-field",
+    });
+
+    useEditorStore
+      .getState()
+      .setPdf("test.pdf", new Uint8Array([1]), [
+        { pageNumber: 1, width: 612, height: 792 },
+      ]);
+    useEditorStore.getState().setInitialElements([first, second]);
+    useEditorStore.getState().selectElements(new Set([first.id]));
+
+    render(<PropertiesPanel />);
+
+    const nameInput = screen.getByDisplayValue("first-field");
+    nameInput.focus();
+    fireEvent.change(nameInput, { target: { value: "renamed-first" } });
+
+    useEditorStore.getState().selectElements(new Set([second.id]));
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("second-field")).toBeInTheDocument();
+    });
+    expect(screen.queryByDisplayValue("renamed-first")).not.toBeInTheDocument();
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      id: first.id,
+      name: "renamed-first",
+    });
+    expect(canUndo()).toBe(true);
+    act(() => undo());
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      id: first.id,
+      name: "first-field",
+    });
+  });
+
+  it("discards a focused property preview on Escape", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "field",
+    });
+
+    useEditorStore
+      .getState()
+      .setPdf("test.pdf", new Uint8Array([1]), [
+        { pageNumber: 1, width: 612, height: 792 },
+      ]);
+    useEditorStore.getState().setInitialElements([field]);
+    useEditorStore.getState().selectElements(new Set([field.id]));
+
+    render(<PropertiesPanel />);
+
+    const nameInput = screen.getByDisplayValue("field");
+    nameInput.focus();
+    fireEvent.change(nameInput, { target: { value: "preview" } });
+
+    expect(getDisplayElements(useEditorStore.getState())[0]).toMatchObject({
+      name: "preview",
+    });
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "field",
+    });
+
+    fireEvent.keyDown(nameInput, { key: "Escape" });
+
+    expect(screen.getByDisplayValue("field")).toBeInTheDocument();
+    expect(getDisplayElements(useEditorStore.getState())[0]).toMatchObject({
+      name: "field",
+    });
+    expect(canUndo()).toBe(false);
+  });
+
+  it("does not restore edit history after the PDF is cleared", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "field",
+    });
+
+    useEditorStore
+      .getState()
+      .setPdf("test.pdf", new Uint8Array([1]), [
+        { pageNumber: 1, width: 612, height: 792 },
+      ]);
+    useEditorStore.getState().setInitialElements([field]);
+    useEditorStore.getState().selectElements(new Set([field.id]));
+
+    render(<PropertiesPanel />);
+
+    const nameInput = screen.getByDisplayValue("field");
+    nameInput.focus();
+    fireEvent.change(nameInput, { target: { value: "edited-field" } });
+
+    act(() => {
+      useEditorStore.getState().clearPdf();
+    });
+
+    expect(canUndo()).toBe(false);
+  });
+});
diff --git a/tests/hooks/use-element-drag.test.ts b/tests/hooks/use-element-drag.test.ts
new file mode 100644
index 00000000..e5bd2f61
--- /dev/null
+++ b/tests/hooks/use-element-drag.test.ts
@@ -0,0 +1,101 @@
+import { act, renderHook } from "@testing-library/react";
+import { createTextField } from "@/lib/form-element-model";
+import type { PageLayout } from "@/lib/page-layout";
+import type { SnapContext } from "@/lib/snap-engine";
+import { useElementDrag } from "@/hooks/use-element-drag";
+import {
+  createPropertyEditKey,
+  getDisplayElements,
+  useEditorStore,
+} from "@/stores/editor-store";
+import { beforeEach, describe, expect, it } from "vitest";
+
+describe("useElementDrag", () => {
+  beforeEach(() => {
+    useEditorStore.getState().clearPdf();
+  });
+
+  it("starts a multi-drag from focused property preview geometry", () => {
+    const first = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "first",
+    });
+    const second = createTextField({
+      x: 20,
+      y: 20,
+      pageNumber: 1,
+      name: "second",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([first, second]);
+    store.selectElements(new Set([first.id, second.id]));
+    store.beginPropertyEdit(
+      createPropertyEditKey("x", [first.id, second.id]),
+      "100",
+    );
+    store.previewPropertyEdit("100", {
+      elementUpdates: [
+        { id: first.id, changes: { x: 100 } },
+        { id: second.id, changes: { x: 100 } },
+      ],
+    });
+
+    const layouts = new Map<number, PageLayout>([
+      [
+        1,
+        {
+          xOffset: 0,
+          yOffset: 0,
+          screenWidth: 612,
+          screenHeight: 792,
+        },
+      ],
+    ]);
+    const noSnapContext: SnapContext = {
+      gridSize: 10,
+      snapThreshold: 5,
+      pageWidth: 612,
+      pageHeight: 792,
+      otherElements: [],
+      rulerGuides: [],
+      snapToGrid: false,
+      snapToPageEdges: false,
+      snapToElements: false,
+      snapToGuides: false,
+      hasAnySnap: false,
+    };
+    const { result } = renderHook(() =>
+      useElementDrag({
+        zoom: 1,
+        layouts,
+        pages: [{ pageNumber: 1, width: 612, height: 792 }],
+        buildSnapContext: () => noSnapContext,
+        resolveTargetPage: () => 1,
+        setActiveGuides: () => {},
+        setDragLivePositions: () => {},
+      }),
+    );
+    const previewFirst = getDisplayElements(useEditorStore.getState())[0];
+
+    act(() => {
+      result.current.handleDragStart(previewFirst, {
+        shiftKey: false,
+        ctrlKey: false,
+        metaKey: false,
+      } as React.MouseEvent);
+      result.current.handleDragStop(
+        previewFirst,
+        { x: 100, y: 10 },
+        { x: 105, y: 10 },
+        new MouseEvent("mouseup"),
+      );
+    });
+
+    expect(useEditorStore.getState().elements).toEqual([
+      expect.objectContaining({ id: first.id, x: 105 }),
+      expect.objectContaining({ id: second.id, x: 105 }),
+    ]);
+  });
+});
diff --git a/tests/stores/editor-store-property-edit.test.ts b/tests/stores/editor-store-property-edit.test.ts
new file mode 100644
index 00000000..83f49e61
--- /dev/null
+++ b/tests/stores/editor-store-property-edit.test.ts
@@ -0,0 +1,211 @@
+import { createTextField } from "@/lib/form-element-model";
+import {
+  createPropertyEditKey,
+  getDisplayElements,
+  getDisplayGuides,
+  isDirty,
+  undo,
+  useEditorStore,
+} from "@/stores/editor-store";
+import { beforeEach, describe, expect, it } from "vitest";
+
+describe("property edit sessions", () => {
+  beforeEach(() => {
+    useEditorStore.getState().clearPdf();
+    useEditorStore
+      .getState()
+      .setPdf("test.pdf", new Uint8Array([1]), [
+        { pageNumber: 1, width: 612, height: 792 },
+      ]);
+  });
+
+  it("previews an element change without mutating the document or history", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "original",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([field]);
+
+    store.beginPropertyEdit(
+      createPropertyEditKey("name", [field.id]),
+      "original",
+    );
+    store.previewPropertyEdit("preview", {
+      elementUpdates: [{ id: field.id, changes: { name: "preview" } }],
+    });
+
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "original",
+    });
+    expect(getDisplayElements(useEditorStore.getState())[0]).toMatchObject({
+      name: "preview",
+    });
+    expect(useEditorStore.temporal.getState().pastStates).toHaveLength(0);
+  });
+
+  it("commits a preview as one undoable document change", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "original",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([field]);
+
+    store.beginPropertyEdit(
+      createPropertyEditKey("name", [field.id]),
+      "original",
+    );
+    store.previewPropertyEdit("preview", {
+      elementUpdates: [{ id: field.id, changes: { name: "preview" } }],
+    });
+    store.previewPropertyEdit("committed", {
+      elementUpdates: [{ id: field.id, changes: { name: "committed" } }],
+    });
+    store.commitPropertyEdit();
+
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "committed",
+    });
+    undo();
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "original",
+    });
+  });
+
+  it("discards a preview without changing the document", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "original",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([field]);
+
+    store.beginPropertyEdit(
+      createPropertyEditKey("name", [field.id]),
+      "original",
+    );
+    store.previewPropertyEdit("preview", {
+      elementUpdates: [{ id: field.id, changes: { name: "preview" } }],
+    });
+    store.discardPropertyEdit();
+
+    expect(getDisplayElements(useEditorStore.getState())[0]).toMatchObject({
+      name: "original",
+    });
+    expect(useEditorStore.temporal.getState().pastStates).toHaveLength(0);
+  });
+
+  it("commits the active preview before a persistent edit", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "original",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([field]);
+
+    store.beginPropertyEdit(
+      createPropertyEditKey("name", [field.id]),
+      "original",
+    );
+    store.previewPropertyEdit("committed", {
+      elementUpdates: [{ id: field.id, changes: { name: "committed" } }],
+    });
+    store.moveElements([{ id: field.id, x: 20, y: 20 }]);
+
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "committed",
+      x: 20,
+      y: 20,
+    });
+    undo();
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "committed",
+      x: 10,
+      y: 10,
+    });
+    undo();
+    expect(useEditorStore.getState().elements[0]).toMatchObject({
+      name: "original",
+      x: 10,
+      y: 10,
+    });
+  });
+
+  it("previews and commits guide changes through the same interface", () => {
+    const store = useEditorStore.getState();
+    store.addGuide("horizontal", 25);
+    useEditorStore.temporal.getState().clear();
+    const guide = useEditorStore.getState().guides[0];
+
+    store.beginPropertyEdit(
+      createPropertyEditKey("position", [guide.id]),
+      "25",
+    );
+    store.previewPropertyEdit("50", {
+      guideUpdates: [{ id: guide.id, position: 50 }],
+    });
+
+    expect(useEditorStore.getState().guides[0].position).toBe(25);
+    expect(getDisplayGuides(useEditorStore.getState())[0].position).toBe(50);
+
+    store.commitPropertyEdit();
+    expect(useEditorStore.getState().guides[0].position).toBe(50);
+    undo();
+    expect(useEditorStore.getState().guides[0].position).toBe(25);
+  });
+
+  it("drops a preview when the PDF is cleared", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "original",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([field]);
+    store.beginPropertyEdit(
+      createPropertyEditKey("name", [field.id]),
+      "original",
+    );
+    store.previewPropertyEdit("preview", {
+      elementUpdates: [{ id: field.id, changes: { name: "preview" } }],
+    });
+
+    store.clearPdf();
+
+    expect(getDisplayElements(useEditorStore.getState())).toEqual([]);
+    expect(useEditorStore.temporal.getState().pastStates).toHaveLength(0);
+  });
+
+  it("treats an uncommitted preview as a dirty document", () => {
+    const field = createTextField({
+      x: 10,
+      y: 10,
+      pageNumber: 1,
+      name: "original",
+    });
+    const store = useEditorStore.getState();
+    store.setInitialElements([field]);
+
+    store.beginPropertyEdit(
+      createPropertyEditKey("name", [field.id]),
+      "original",
+    );
+    store.previewPropertyEdit("preview", {
+      elementUpdates: [{ id: field.id, changes: { name: "preview" } }],
+    });
+
+    expect(isDirty()).toBe(true);
+    store.discardPropertyEdit();
+    expect(isDirty()).toBe(false);
+  });
+});