@agent-native/core 0.131.5 → 0.131.7

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -16,13 +16,7 @@ import {
   RecentEditHighlights,
 } from "@agent-native/toolkit/collab-ui";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
-import {
-  IconAlertTriangle,
-  IconMaximize,
-  IconX,
-  IconZoomIn,
-  IconZoomOut,
-} from "@tabler/icons-react";
+import { IconMaximize, IconZoomIn, IconZoomOut } from "@tabler/icons-react";
 import {
   useState,
   useCallback,
@@ -55,13 +49,14 @@ import {
   CanvasCommentPins,
   MultiSelectChip,
 } from "@/components/visual-editor";
-import type { Slide } from "@/context/DeckContext";
+import type { Slide, UpdateSlideOptions } from "@/context/DeckContext";
 import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import {
   computeCanvasFitZoom,
   MAX_CANVAS_ZOOM,
   MIN_CANVAS_ZOOM,
 } from "@/lib/canvas-zoom";
+import { extractMermaidBlocks } from "@/lib/mermaid-blocks";
 import {
   createPlaceholderImageTarget,
   imageFileLooksSupported,
@@ -71,6 +66,12 @@ import { enterSelectionMode } from "@/root";
 
 import type { DesignSystemData } from "../../../shared/api";
 import { BlockBubbleMenu } from "./BlockBubbleMenu";
+import {
+  createSlidesCanvasGestureController,
+  isWithinSlidesCanvasEdgeMoveBand,
+  resolveSlidesCanvasPointerIntent,
+  slidesCanvasInteractionCore,
+} from "./canvas-interactions";
 import ImageOverlay from "./ImageOverlay";
 import {
   applyInlineTextStyle,
@@ -81,29 +82,45 @@ import {
   type InlineTextStylePatch,
   type InlineTextStyleSnapshot,
 } from "./rich-text-selection";
+import {
+  createSelectionOverlayAutofitKey,
+  createSelectionOverlayMeasurementKey,
+  currentSelectionOverlayRect,
+  isSelectionOverlayAutofitSettled,
+  isSelectionOverlayOnActiveSlide,
+  type SelectionOverlayMeasurement,
+} from "./selection-overlay-measurement";
 import { decideSlideEscape } from "./slide-escape-arbiter";
 import {
+  applySlideObjectMoveDelta,
+  buildPastedSlideObjects,
   clientPointToSlideCoordinates,
   cloneSlideObject,
+  collectMovableSlideObjects,
+  copySlideObjects,
+  computeSlideObjectZOrder,
   createSlidesSelectionState,
   ensureSlideObjectId,
-  escapedEditingSelection,
+  ensureSlideTextBoxCanvas,
   findSlideObjectById,
   freezeSlideElementForFreeform,
-  getSelectedObjectDragStart,
+  getSlideTextBoxDefaultColor,
   getSlideSelectionIdentity,
   getSlideSelectionMode,
   removeSlideObjectAndLayoutSpacer,
   resolveSlideObjectContainingBlock,
-  resizeSlideObject,
+  type CopiedSlideObjects,
   type ResizeHandle,
   type SlideObjectGeometry,
+  type SlideObjectZOrderTarget,
   type SlidesSelectionMode,
   type SlidesSelectionState as BaseSlidesSelectionState,
   type SlidesSelectionTool,
 } from "./slide-object-interactions";
 import { getPassiveSlidePresenceUsers } from "./slide-presence";
+import { SlideOverflowWarning } from "./SlideOverflowWarning";
 import {
+  SlideBackgroundInspector,
   SlideStyleInspector,
   type SlideStylePatch,
   type SlideStyleSnapshot,
@@ -112,35 +129,17 @@ import { SpeakerNotesPanel } from "./SpeakerNotesPanel";
 
 let builderIdCounter = 0;
 const CANVAS_ZOOM_PRESETS = [10, 25, 50, 75, 100, 125, 150, 200] as const;
-// Keep the text itself a normal click-to-edit surface. Only the slim perimeter
-// is reserved for object movement, matching the familiar Slides interaction.
-const ELEMENT_EDGE_MOVE_BAND = 8;
-
-function isWithinElementEdgeMoveBand(
-  rect: DOMRect,
-  clientX: number,
-  clientY: number,
-): boolean {
-  // Tiny labels still need a usable center click target. Cap the move band at
-  // one quarter of either dimension so its opposite edges never consume it.
-  const edgeBand = Math.min(
-    ELEMENT_EDGE_MOVE_BAND,
-    rect.width / 4,
-    rect.height / 4,
-  );
-  const outerBand = edgeBand / 2;
-  const withinExpandedBounds =
-    clientX >= rect.left - outerBand &&
-    clientX <= rect.right + outerBand &&
-    clientY >= rect.top - outerBand &&
-    clientY <= rect.bottom + outerBand;
-  if (!withinExpandedBounds) return false;
 
+/**
+ * Object operations are intentionally narrower than ordinary canvas
+ * selection. A flow-layout node may be selectable for inspection, but must
+ * never be copied, reordered, deleted, or moved as though it were a canvas
+ * object.
+ */
+function isPersistedFreeformObject(element: HTMLElement): boolean {
   return (
-    Math.abs(clientX - rect.left) <= edgeBand ||
-    Math.abs(clientX - rect.right) <= edgeBand ||
-    Math.abs(clientY - rect.top) <= edgeBand ||
-    Math.abs(clientY - rect.bottom) <= edgeBand
+    Boolean(element.getAttribute("data-slide-object-id")) &&
+    window.getComputedStyle(element).position === "absolute"
   );
 }
 
@@ -440,6 +439,8 @@ function buildStyleSnapshot(
   const paddingRight = cssPx(computed.paddingRight);
   const paddingTop = cssPx(computed.paddingTop);
   const paddingBottom = cssPx(computed.paddingBottom);
+  const parsedZIndex = Number(computed.zIndex);
+  const zIndex = Number.isFinite(parsedZIndex) ? parsedZIndex : 0;
 
   const selectedTextStyle =
     inlineTextStyle?.scope === "selection" ? inlineTextStyle : null;
@@ -477,6 +478,7 @@ function buildStyleSnapshot(
     borderColor: normalizedColor(computed.borderTopColor),
     paddingX: Math.round((paddingLeft + paddingRight) / 2),
     paddingY: Math.round((paddingTop + paddingBottom) / 2),
+    zIndex,
     textStyleScope: inlineTextStyle?.scope ?? "block",
     mixedTextStyles: selectedTextStyle?.mixed ?? [],
     isAbsolute,
@@ -556,6 +558,7 @@ interface SlideEditorProps {
   onUpdateSlide: (
     updates: Partial<Omit<Slide, "id">>,
     slideIdOverride?: string,
+    options?: UpdateSlideOptions,
   ) => void;
   /** When true, all inline-edit affordances are disabled — the slide is
    *  navigable but contentEditable / image overlays don't activate.
@@ -781,17 +784,15 @@ function ElementSelectionOutline({
   onResizeStart?: (handle: ResizeHandle, e: React.PointerEvent) => void;
 }) {
   const pad = 2;
-  const handle = 7;
-  const handleClass =
-    "absolute size-[7px] touch-none rounded-sm border border-background bg-[#609FF8] shadow-sm";
+  const handleClass = "absolute touch-none rounded-sm";
   const edgeHandleClass =
     "absolute flex touch-none items-center justify-center bg-transparent p-0";
-  const edgeBarClass =
-    "rounded-sm border border-background bg-[#609FF8] shadow-sm";
+  const edgeBarClass = "rounded-sm";
   return (
     <SelectionOverlayPortal viewportRect={viewportRect} zIndex={51}>
       <div
         data-slide-selection-outline="true"
+        data-slide-selection-chrome="true"
         style={{
           position: "absolute",
           top: rect.top - pad,
@@ -799,7 +800,7 @@ function ElementSelectionOutline({
           width: rect.width + pad * 2,
           height: rect.height + pad * 2,
           pointerEvents: "none",
-          border: "1.5px solid #609FF8",
+          border: "1px solid #609FF8",
           borderRadius: 3,
           boxShadow: "0 0 0 1px rgba(96, 159, 248, 0.2)",
         }}
@@ -809,8 +810,6 @@ function ElementSelectionOutline({
           onPointerDown={(e) => onResizeStart?.("nw", e)}
           className={handleClass}
           style={{
-            left: -handle / 2,
-            top: -handle / 2,
             pointerEvents: "auto",
             cursor: "nwse-resize",
             zIndex: 2,
@@ -821,8 +820,6 @@ function ElementSelectionOutline({
           onPointerDown={(e) => onResizeStart?.("ne", e)}
           className={handleClass}
           style={{
-            right: -handle / 2,
-            top: -handle / 2,
             pointerEvents: "auto",
             cursor: "nesw-resize",
             zIndex: 2,
@@ -833,8 +830,6 @@ function ElementSelectionOutline({
           onPointerDown={(e) => onResizeStart?.("sw", e)}
           className={handleClass}
           style={{
-            left: -handle / 2,
-            bottom: -handle / 2,
             pointerEvents: "auto",
             cursor: "nesw-resize",
             zIndex: 2,
@@ -845,8 +840,6 @@ function ElementSelectionOutline({
           onPointerDown={(e) => onResizeStart?.("se", e)}
           className={handleClass}
           style={{
-            right: -handle / 2,
-            bottom: -handle / 2,
             pointerEvents: "auto",
             cursor: "nwse-resize",
             zIndex: 2,
@@ -857,68 +850,48 @@ function ElementSelectionOutline({
           onPointerDown={(e) => onResizeStart?.("n", e)}
           className={edgeHandleClass}
           style={{
-            width: 22,
-            height: 12,
-            left: "50%",
-            top: -6,
-            transform: "translateX(-50%)",
             pointerEvents: "auto",
             cursor: "ns-resize",
             zIndex: 1,
           }}
         >
-          <span className={`${edgeBarClass} h-1 w-3.5`} />
+          <span data-slide-resize-handle-bar="true" className={edgeBarClass} />
         </span>
         <span
           data-slide-resize-handle="e"
           onPointerDown={(e) => onResizeStart?.("e", e)}
           className={edgeHandleClass}
           style={{
-            width: 12,
-            height: 22,
-            right: -6,
-            top: "50%",
-            transform: "translateY(-50%)",
             pointerEvents: "auto",
             cursor: "ew-resize",
             zIndex: 1,
           }}
         >
-          <span className={`${edgeBarClass} h-3.5 w-1`} />
+          <span data-slide-resize-handle-bar="true" className={edgeBarClass} />
         </span>
         <span
           data-slide-resize-handle="s"
           onPointerDown={(e) => onResizeStart?.("s", e)}
           className={edgeHandleClass}
           style={{
-            width: 22,
-            height: 12,
-            left: "50%",
-            bottom: -6,
-            transform: "translateX(-50%)",
             pointerEvents: "auto",
             cursor: "ns-resize",
             zIndex: 1,
           }}
         >
-          <span className={`${edgeBarClass} h-1 w-3.5`} />
+          <span data-slide-resize-handle-bar="true" className={edgeBarClass} />
         </span>
         <span
           data-slide-resize-handle="w"
           onPointerDown={(e) => onResizeStart?.("w", e)}
           className={edgeHandleClass}
           style={{
-            width: 12,
-            height: 22,
-            left: -6,
-            top: "50%",
-            transform: "translateY(-50%)",
             pointerEvents: "auto",
             cursor: "ew-resize",
             zIndex: 1,
           }}
         >
-          <span className={`${edgeBarClass} h-3.5 w-1`} />
+          <span data-slide-resize-handle-bar="true" className={edgeBarClass} />
         </span>
       </div>
     </SelectionOverlayPortal>
@@ -1130,17 +1103,53 @@ export default function SlideEditor({
   const [multiSelectionRects, setMultiSelectionRects] = useState<
     Map<string, { rect: DOMRect; text: string; selector: string }>
   >(() => new Map());
+  const copiedObjectClipboardRef = useRef<{
+    copied: CopiedSlideObjects;
+    deckId?: string;
+    slideId: string;
+    sourceObjectId: string;
+  } | null>(null);
   const [selectedElementPath, setSelectedElementPath] = useState<
     number[] | null
   >(null);
   const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null);
+  const [selectedElementSlideId, setSelectedElementSlideId] = useState<
+    string | null
+  >(null);
   const [selectedElementSelector, setSelectedElementSelector] = useState<
     string | null
   >(null);
-  const [selectedElementRect, setSelectedElementRect] =
-    useState<DOMRect | null>(null);
+  const [selectedElementMeasurement, setSelectedElementMeasurement] =
+    useState<SelectionOverlayMeasurement | null>(null);
+  const [selectionMeasurementRevision, setSelectionMeasurementRevision] =
+    useState(0);
+  const canvasAutofitKey = createSelectionOverlayAutofitKey(slide.id, content);
+  const [settledAutofitKey, setSettledAutofitKey] = useState<string | null>(
+    null,
+  );
   const [selectedStyleSnapshot, setSelectedStyleSnapshot] =
     useState<SlideStyleSnapshot | null>(null);
+  const selectionOverlayMeasurementKey = createSelectionOverlayMeasurementKey({
+    slideId: slide.id,
+    content,
+    objectId: selectedObjectId,
+    selector: selectedElementSelector,
+    path: selectedElementPath,
+    canvasZoom,
+    stylePanelOpen,
+    revision: selectionMeasurementRevision,
+  });
+  const selectedElementRect = currentSelectionOverlayRect(
+    selectedElementMeasurement,
+    selectionOverlayMeasurementKey,
+  );
+  const invalidateSelectionOverlayMeasurement = useCallback(() => {
+    setSelectedElementMeasurement(null);
+    setSelectionMeasurementRevision((revision) => revision + 1);
+  }, []);
+  const handleAutofitSettled = useCallback(() => {
+    setSettledAutofitKey(canvasAutofitKey);
+  }, [canvasAutofitKey]);
   /** Anchor rect for the floating chip (the slide canvas) */
   const [chipAnchorRect, setChipAnchorRect] = useState<DOMRect | null>(null);
   /** Active marquee rectangle (viewport coords). null = not dragging. */
@@ -1158,6 +1167,8 @@ export default function SlideEditor({
     null,
   );
   const [isAskingAgentToFix, setIsAskingAgentToFix] = useState(false);
+  const [isOverflowWarningDismissed, setIsOverflowWarningDismissed] =
+    useState(false);
   const dims = getAspectRatioDims(aspectRatio);
   const [fitCanvasZoom, setFitCanvasZoom] = useState(100);
   const userSetCanvasZoomRef = useRef(false);
@@ -1276,6 +1287,7 @@ export default function SlideEditor({
   useEffect(() => {
     setOverflowInfo(null);
     setIsAskingAgentToFix(false);
+    setIsOverflowWarningDismissed(false);
     syncOverflowToAppState(null);
   }, [slide.id, slide.content]);
 
@@ -1386,8 +1398,53 @@ export default function SlideEditor({
     const slideContent = containerRef.current?.querySelector(
       ".slide-content",
     ) as HTMLElement | null;
-    return slideContent ? stripBuilderIds(slideContent.innerHTML) : null;
-  }, []);
+    if (!slideContent) return null;
+    // SlideRenderer swaps each `<div class="mermaid">` for a
+    // `data-mermaid-index` placeholder and renders the diagram as SVG via
+    // MermaidRenderer — the live DOM never contains the original mermaid
+    // syntax. Serializing it as-is here would permanently bake the rendered
+    // SVG into slide.content and turn a diagram edited or moved alongside
+    // (e.g. another text block on the same slide) into inert markup that can
+    // never be resized, edited, or re-rendered again. Restore the original
+    // `<div class="mermaid">` markup from slide.content — the untouched
+    // source of truth — before saving.
+    const clone = slideContent.cloneNode(true) as HTMLElement;
+    const placeholders = clone.querySelectorAll("[data-mermaid-index]");
+    // Look up source blocks by index before touching the DOM. If slide.content
+    // changed since this placeholder last rendered (e.g. a concurrent update),
+    // its index may no longer have a matching block — leave that placeholder's
+    // node untouched rather than swapping in a marker with nothing to restore
+    // it, which would otherwise persist as inert marker text.
+    const { blocks } = extractMermaidBlocks(slide.content);
+    // Swap each rendered node for a plain-text marker now, and splice the
+    // real `<div class="mermaid">` markup back in as a raw string AFTER
+    // stripBuilderIds() below. stripBuilderIds round-trips through
+    // DOMParser + innerHTML, which HTML-escapes `>` in text nodes (mangling
+    // `A --> B` into `A --&gt; B`) — the same reason SlideRenderer extracts
+    // mermaid blocks before its own sanitization pass. Doing the real
+    // substitution as a plain string replace, after all DOM round-trips,
+    // avoids that entirely.
+    const nonce = Math.random().toString(36).slice(2);
+    const markerFor = (idx: number) => `__mermaid_${nonce}_${idx}__`;
+    const restorable = new Map<number, string>();
+    placeholders.forEach((placeholder) => {
+      const idx = Number(placeholder.getAttribute("data-mermaid-index"));
+      const definition = blocks[idx];
+      if (definition === undefined) return;
+      restorable.set(idx, definition);
+      placeholder.replaceWith(
+        clone.ownerDocument.createTextNode(markerFor(idx)),
+      );
+    });
+    let html = stripBuilderIds(clone.innerHTML);
+    restorable.forEach((definition, idx) => {
+      html = html.replace(
+        markerFor(idx),
+        `<div class="mermaid">${definition}</div>`,
+      );
+    });
+    return html;
+  }, [slide.content]);
 
   const captureInlineEditDraft = useCallback(
     (slideId = slide.id) => {
@@ -1414,27 +1471,80 @@ export default function SlideEditor({
    * the rest of the slide does not reflow when Escape selects the block.
    */
   const freezeElementForFreeformSelection = useCallback(
-    (element: HTMLElement): HTMLElement => {
+    (
+      element: HTMLElement,
+    ): { element: HTMLElement; restoreMarkdownTree?: () => void } | null => {
       if (window.getComputedStyle(element).position === "absolute") {
         ensureSlideObjectId(element);
-        return element;
+        return { element };
       }
 
-      const fmdSlide = element.closest(".fmd-slide") as HTMLElement | null;
-      const positioningLayer = fmdSlide
-        ? (Array.from(fmdSlide.children).find(
+      // Markdown slides normally render directly into their AutoFit root. Take
+      // the visual snapshot before promotion, then use the same fmd canvas as
+      // manually placed text boxes. Persisting a bare absolute Markdown node
+      // would switch the renderer to raw HTML without its coordinate root.
+      const originalRect = element.getBoundingClientRect();
+      const originalComputed = window.getComputedStyle(element);
+      let fmdSlide = element.closest(".fmd-slide") as HTMLElement | null;
+      let positioningLayer: HTMLElement | null = null;
+      let restoreMarkdownTree: (() => void) | undefined;
+      if (fmdSlide) {
+        positioningLayer =
+          Array.from(fmdSlide.children).find(
             (child): child is HTMLElement =>
               child instanceof HTMLElement &&
               child.hasAttribute("data-fmd-autofit-content"),
-          ) ?? fmdSlide)
-        : null;
-      if (!positioningLayer) return element;
+          ) ?? fmdSlide;
+      } else {
+        const markdownRoot = element.closest(".slide-content");
+        const originalChildren = markdownRoot
+          ? Array.from(markdownRoot.childNodes)
+          : [];
+        const originalClassName = element.className;
+        const originalStyle = element.getAttribute("style");
+        const originalContentEditable = element.getAttribute("contenteditable");
+        const originalEditingBlock = element.getAttribute("data-editing-block");
+        const promoted = containerRef.current
+          ? ensureSlideTextBoxCanvas(containerRef.current)
+          : null;
+        // Two-column Markdown has independent AutoFit roots. Do not save one
+        // column as raw HTML and silently discard the other one.
+        if (!promoted) return null;
+        fmdSlide = promoted.fmdSlide;
+        positioningLayer = promoted.positioningLayer;
+        // The promotion moves ReactMarkdown's live child nodes. Restore its
+        // original tree after serializing the raw fmd HTML and before the
+        // parent state write, otherwise React tries to delete a child that we
+        // already moved and the Markdown-to-raw rerender can fail.
+        restoreMarkdownTree = () => {
+          if (!markdownRoot) return;
+          for (const child of originalChildren) markdownRoot.append(child);
+          fmdSlide?.remove();
+          element.className = originalClassName;
+          if (originalStyle === null) element.removeAttribute("style");
+          else element.setAttribute("style", originalStyle);
+          if (originalContentEditable === null) {
+            element.removeAttribute("contenteditable");
+          } else {
+            element.setAttribute("contenteditable", originalContentEditable);
+          }
+          if (originalEditingBlock === null) {
+            element.removeAttribute("data-editing-block");
+          } else {
+            element.setAttribute("data-editing-block", originalEditingBlock);
+          }
+        };
+      }
+
+      // Markdown blocks become persisted raw HTML when Escape makes them
+      // freeform, so their renderer canvas is the initial positioning layer.
+      if (!positioningLayer) return { element };
 
       const containingBlock = resolveSlideObjectContainingBlock(
         element,
         positioningLayer,
       );
-      const elementRect = element.getBoundingClientRect();
+      const elementRect = originalRect;
       const layerRect = containingBlock.getBoundingClientRect();
       if (
         !elementRect.width ||
@@ -1444,7 +1554,7 @@ export default function SlideEditor({
         !containingBlock.offsetWidth ||
         !containingBlock.offsetHeight
       ) {
-        return element;
+        return { element, restoreMarkdownTree };
       }
 
       const { x, y } = clientPointToSlideCoordinates(
@@ -1456,7 +1566,6 @@ export default function SlideEditor({
       );
       const scaleX = containingBlock.offsetWidth / layerRect.width;
       const scaleY = containingBlock.offsetHeight / layerRect.height;
-      const computed = window.getComputedStyle(element);
       freezeSlideElementForFreeform(
         element,
         {
@@ -1466,14 +1575,30 @@ export default function SlideEditor({
           height: Math.round(elementRect.height * scaleY),
         },
         {
-          display: computed.display,
-          flexGrow: computed.flexGrow,
-          flexShrink: computed.flexShrink,
-          flexBasis: computed.flexBasis,
-          alignSelf: computed.alignSelf,
+          display: originalComputed.display,
+          flexGrow: originalComputed.flexGrow,
+          flexShrink: originalComputed.flexShrink,
+          flexBasis: originalComputed.flexBasis,
+          alignSelf: originalComputed.alignSelf,
+        },
+        {
+          color: originalComputed.color,
+          direction: originalComputed.direction,
+          fontFamily: originalComputed.fontFamily,
+          fontSize: originalComputed.fontSize,
+          fontStyle: originalComputed.fontStyle,
+          fontWeight: originalComputed.fontWeight,
+          letterSpacing: originalComputed.letterSpacing,
+          lineHeight: originalComputed.lineHeight,
+          textAlign: originalComputed.textAlign,
+          textDecoration: originalComputed.textDecoration,
+          textShadow: originalComputed.textShadow,
+          textTransform: originalComputed.textTransform,
+          whiteSpace: originalComputed.whiteSpace,
+          wordSpacing: originalComputed.wordSpacing,
         },
       );
-      return element;
+      return { element, restoreMarkdownTree };
     },
     [],
   );
@@ -1513,11 +1638,33 @@ export default function SlideEditor({
     richTextSelectionRef.current = null;
     setSelectedElementPath(null);
     setSelectedObjectId(null);
+    setSelectedElementSlideId(null);
     setSelectedElementSelector(null);
-    setSelectedElementRect(null);
+    setSelectedElementMeasurement(null);
     setSelectedStyleSnapshot(null);
   }, []);
 
+  // `slide.background` paints the canvas wrapper, but a generated `.fmd-slide`
+  // root usually carries its own inline background that covers the whole
+  // canvas. Writing only the field would leave the picker looking broken on
+  // exactly the slides the agent produces, so repaint the root as well when it
+  // declares one.
+  const applySlideBackground = useCallback(
+    (background: string) => {
+      const updates: Partial<Omit<Slide, "id">> = { background };
+      const root = getSlideContent()?.querySelector(
+        ".fmd-slide",
+      ) as HTMLElement | null;
+      if (root && (root.style.background || root.style.backgroundColor)) {
+        root.style.background = background;
+        const html = readCurrentSlideContentHtml();
+        if (html !== null) updates.content = html;
+      }
+      onUpdateSlideRef.current(updates);
+    },
+    [getSlideContent, readCurrentSlideContentHtml],
+  );
+
   const selectElementForStyling = useCallback(
     (
       element: HTMLElement,
@@ -1531,8 +1678,12 @@ export default function SlideEditor({
       const snapshot = buildStyleSnapshot(element, selector);
       setSelectedElementPath(path);
       setSelectedObjectId(element.getAttribute("data-slide-object-id"));
+      setSelectedElementSlideId(slide.id);
       setSelectedElementSelector(selector);
-      setSelectedElementRect(element.getBoundingClientRect());
+      // Geometry can be invalidated by an async slide-content commit or
+      // AutoFit transform. Reveal the portal only after the layout effect
+      // measures this exact rendered selection.
+      invalidateSelectionOverlayMeasurement();
       setSelectedStyleSnapshot(snapshot);
       syncSelectionToAppState(
         buildSelectionState(getSlideSelectionMode(snapshot, selectionMode), [
@@ -1540,7 +1691,12 @@ export default function SlideEditor({
         ]),
       );
     },
-    [buildSelectionState, getSlideContent],
+    [
+      buildSelectionState,
+      getSlideContent,
+      invalidateSelectionOverlayMeasurement,
+      slide.id,
+    ],
   );
 
   /** Exit edit mode, saving changes to slide.content */
@@ -1552,18 +1708,26 @@ export default function SlideEditor({
     el.contentEditable = "false";
     el.removeAttribute("data-editing-block");
 
-    const selected = freezeElementForFreeformSelection(el);
-    const selector = getBuilderSelector(selected);
+    const frozen = freezeElementForFreeformSelection(el);
+    const selected = frozen?.element ?? null;
+    const selector = selected ? getBuilderSelector(selected) : null;
 
-    const html = readCurrentSlideContentHtml();
+    const html = selected ? readCurrentSlideContentHtml() : null;
+    frozen?.restoreMarkdownTree?.();
     if (html !== null) {
       onUpdateSlideRef.current({ content: html });
     }
     inlineEditDraftRef.current = null;
-    const next = escapedEditingSelection(selected, resolveSelectedElement());
-    setEditingEl(next.editing);
-    if (next.selected && selector) {
-      selectElementForStyling(next.selected, selector);
+    const escape = slidesCanvasInteractionCore.escape({
+      editingObjectId: "inline-editing",
+      selectedObjectIds: resolveSelectedElement() ? ["selected"] : [],
+    });
+    setEditingEl(null);
+    if (escape.action === "select-object" && selected && selector) {
+      selectElementForStyling(selected, selector);
+    } else if (escape.action === "clear-selection") {
+      clearSelectedElement();
+      syncSelectionToAppState(null);
     } else {
       syncSelectionToAppState(null);
     }
@@ -1572,6 +1736,8 @@ export default function SlideEditor({
     resolveSelectedElement,
     selectElementForStyling,
     freezeElementForFreeformSelection,
+    clearSelectedElement,
+    syncSelectionToAppState,
   ]);
 
   /** Enter edit mode on a smart block (text leaf or smart group) */
@@ -1583,7 +1749,7 @@ export default function SlideEditor({
       // Keep the inspector selection mounted while text is being edited. The
       // inspector is a stable dock, so clearing it here would make the canvas
       // resize and auto-fit again on the second click.
-      setSelectedElementRect(null);
+      setSelectedElementMeasurement(null);
       captureInlineEditDraft(slide.id);
       // Mark the deck dirty immediately so SSE/poll refreshes do not replace
       // the deck under an active contentEditable edit, even before the user
@@ -1794,7 +1960,21 @@ export default function SlideEditor({
   }, [selectedImg]);
 
   useLayoutEffect(() => {
-    if (!selectedElementPath || !selectedElementSelector) return;
+    if (
+      !selectedElementPath ||
+      !selectedElementSelector ||
+      !isSelectionOverlayOnActiveSlide(selectedElementSlideId, slide.id)
+    ) {
+      return;
+    }
+    if (
+      !isSelectionOverlayAutofitSettled(settledAutofitKey, canvasAutofitKey)
+    ) {
+      // AutoFit changes the element's viewport rect in a rAF. Do not publish
+      // pre-fit coordinates into the portal while the renderer is settling.
+      setSelectedElementMeasurement(null);
+      return;
+    }
     let observedElement: HTMLElement | null = null;
     const update = () => {
       const element = resolveSelectedElement();
@@ -1815,7 +1995,10 @@ export default function SlideEditor({
         selectedElementSelector,
         inlineTextStyle,
       );
-      setSelectedElementRect(element.getBoundingClientRect());
+      setSelectedElementMeasurement({
+        key: selectionOverlayMeasurementKey,
+        rect: element.getBoundingClientRect(),
+      });
       setSelectedStyleSnapshot(snapshot);
       syncSelectionToAppState(
         buildSelectionState(getSlideSelectionMode(snapshot), [
@@ -1839,7 +2022,13 @@ export default function SlideEditor({
     const mutationObserver =
       typeof MutationObserver === "undefined" || !positioningLayer
         ? null
-        : new MutationObserver(update);
+        : new MutationObserver(() => {
+            // The transform has already changed. Drop the old viewport rect
+            // before publishing a fresh one so portal chrome cannot paint at
+            // the element's pre-AutoFit coordinates.
+            setSelectedElementMeasurement(null);
+            update();
+          });
     if (mutationObserver && positioningLayer) {
       mutationObserver.observe(positioningLayer, {
         attributes: true,
@@ -1859,7 +2048,11 @@ export default function SlideEditor({
     clearSelectedElement,
     resolveSelectedElement,
     selectedElementPath,
+    selectedElementSlideId,
     selectedElementSelector,
+    canvasAutofitKey,
+    settledAutofitKey,
+    selectionOverlayMeasurementKey,
     slide.content,
   ]);
 
@@ -1944,6 +2137,47 @@ export default function SlideEditor({
     applyMultiSelection(new Set());
   }, [applyMultiSelection, multiSelection.size]);
 
+  /**
+   * A group move/paste writes new slide content, which replaces the live DOM
+   * (the saved HTML has no data-builder-id attributes — see stripBuilderIds).
+   * `multiSelection` is keyed by those transient ids, so it goes stale the
+   * instant the content commits. Stash the durable data-slide-object-ids here
+   * and re-derive the (freshly stamped) builder ids once the new content has
+   * actually rendered, so the on-canvas selection survives its own commit.
+   */
+  const pendingMultiSelectionResyncRef = useRef<string[] | null>(null);
+
+  const commitMultiObjectChange = useCallback(
+    (objectIds: string[]) => {
+      pendingMultiSelectionResyncRef.current = objectIds;
+      const html = readCurrentSlideContentHtml();
+      if (html !== null) onUpdateSlideRef.current({ content: html });
+    },
+    [readCurrentSlideContentHtml],
+  );
+
+  useEffect(() => {
+    const objectIds = pendingMultiSelectionResyncRef.current;
+    pendingMultiSelectionResyncRef.current = null;
+    if (!objectIds) {
+      // Undo/redo, agent reconciliation, and external updates replace the DOM
+      // without preserving transient builder ids. Never leave stale ids in a
+      // multi-selection that could later target unrelated newly-stamped nodes.
+      applyMultiSelection(new Set());
+      return;
+    }
+    const slideContent = getSlideContent();
+    if (!slideContent) return;
+    stampBuilderIds(slideContent);
+    const ids = new Set<string>();
+    for (const objectId of objectIds) {
+      const element = findSlideObjectById(slideContent, objectId);
+      const builderId = element?.getAttribute("data-builder-id");
+      if (builderId) ids.add(builderId);
+    }
+    applyMultiSelection(ids);
+  }, [slide.content, getSlideContent, applyMultiSelection]);
+
   // One Escape owner for the HTML editor. Radix dialogs/popovers and native
   // form controls retain their own Escape behavior before we arbitrate canvas
   // state. Gesture cancellation is deliberately ahead of selection clearing.
@@ -2062,17 +2296,15 @@ export default function SlideEditor({
     [getPlaceholderTarget],
   );
 
-  // Keep cached rects fresh on scroll/resize so outlines + chip stay aligned
-  useEffect(() => {
-    if (multiSelection.size === 0) return;
-    const update = () => {
+  const refreshMultiSelectionRects = useCallback(
+    (ids: Set<string>) => {
       const slideContent = getSlideContent();
       if (!slideContent) return;
       const next = new Map<
         string,
         { rect: DOMRect; text: string; selector: string }
       >();
-      multiSelection.forEach((id) => {
+      ids.forEach((id) => {
         const el = slideContent.querySelector(
           `[data-builder-id="${id}"]`,
         ) as HTMLElement | null;
@@ -2088,6 +2320,17 @@ export default function SlideEditor({
         ".slide-image-clickable",
       ) as HTMLElement | null;
       setChipAnchorRect(canvas?.getBoundingClientRect() || null);
+    },
+    [getSlideContent],
+  );
+
+  // Keep cached rects fresh on scroll/resize so outlines + chip stay aligned.
+  // Group drag calls the same helper every pointer move so its outlines do not
+  // lag behind the objects until the next scroll or resize.
+  useEffect(() => {
+    if (multiSelection.size === 0) return;
+    const update = () => {
+      refreshMultiSelectionRects(multiSelection);
     };
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
@@ -2095,10 +2338,10 @@ export default function SlideEditor({
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
     };
-  }, [multiSelection, getSlideContent]);
+  }, [multiSelection, refreshMultiSelectionRects]);
 
   // Clear multi-selection when slide changes (and clear app state too)
-  useEffect(() => {
+  useLayoutEffect(() => {
     setMultiSelection(new Set());
     setMultiSelectionRects(new Map());
     setChipAnchorRect(null);
@@ -2122,19 +2365,39 @@ export default function SlideEditor({
 
       const slideContent = getSlideContent();
       if (!slideContent) return;
-      e.preventDefault();
 
       if (multiSelection.size > 0) {
-        for (const id of multiSelection) {
-          const element = slideContent.querySelector(
-            `[data-builder-id="${id}"]`,
-          ) as HTMLElement | null;
-          if (element) removeSlideObjectAndLayoutSpacer(element);
+        const selected = Array.from(multiSelection)
+          .map(
+            (id) =>
+              slideContent.querySelector(
+                `[data-builder-id="${id}"]`,
+              ) as HTMLElement | null,
+          )
+          .filter((element): element is HTMLElement => element !== null);
+        const roots = selected.filter(
+          (element) =>
+            !selected.some(
+              (candidate) =>
+                candidate !== element && candidate.contains(element),
+            ),
+        );
+        if (
+          roots.length === 0 ||
+          roots.some((element) => !isPersistedFreeformObject(element))
+        ) {
+          return;
+        }
+        e.preventDefault();
+        for (const element of roots) {
+          removeSlideObjectAndLayoutSpacer(element);
         }
         clearMultiSelection();
       } else {
         const element = resolveSelectedElement();
-        if (element) removeSlideObjectAndLayoutSpacer(element);
+        if (!element || !isPersistedFreeformObject(element)) return;
+        e.preventDefault();
+        removeSlideObjectAndLayoutSpacer(element);
         clearSelectedElement();
       }
 
@@ -2203,8 +2466,83 @@ export default function SlideEditor({
     [],
   );
 
-  const placeTextBoxAt = useCallback(
-    (clientX: number, clientY: number) => {
+  /**
+   * Return the current selection only when every selected root is a persisted
+   * canvas object in one coordinate space. This deliberately refuses mixed
+   * flow/freeform and cross-container selections: pretending their local
+   * left/top values share a coordinate system would silently corrupt layout.
+   */
+  const getObjectOperationSelection = useCallback(() => {
+    const slideContent = getSlideContent();
+    if (!slideContent) return null;
+
+    const selectedElements =
+      multiSelection.size > 0
+        ? Array.from(multiSelection)
+            .map(
+              (id) =>
+                slideContent.querySelector(
+                  `[data-builder-id="${id}"]`,
+                ) as HTMLElement | null,
+            )
+            .filter((element): element is HTMLElement => element !== null)
+        : (() => {
+            const element = resolveSelectedElement();
+            return element ? [element] : [];
+          })();
+    if (selectedElements.length === 0) return null;
+
+    const roots = selectedElements.filter(
+      (element) =>
+        !selectedElements.some(
+          (candidate) => candidate !== element && candidate.contains(element),
+        ),
+    );
+    if (
+      roots.length === 0 ||
+      roots.some((element) => !isPersistedFreeformObject(element))
+    ) {
+      return null;
+    }
+
+    const fmdSlide = roots[0].closest(".fmd-slide") as HTMLElement | null;
+    if (
+      !fmdSlide ||
+      roots.some((element) => element.closest(".fmd-slide") !== fmdSlide)
+    ) {
+      return null;
+    }
+    const positioningLayer =
+      Array.from(fmdSlide.children).find(
+        (child): child is HTMLElement =>
+          child instanceof HTMLElement &&
+          child.hasAttribute("data-fmd-autofit-content"),
+      ) ?? fmdSlide;
+    const containingBlock = resolveSlideObjectContainingBlock(
+      roots[0],
+      positioningLayer,
+    );
+    if (
+      roots.some(
+        (element) =>
+          resolveSlideObjectContainingBlock(element, positioningLayer) !==
+          containingBlock,
+      )
+    ) {
+      return null;
+    }
+
+    return { elements: roots, positioningLayer, containingBlock };
+  }, [getSlideContent, multiSelection, resolveSelectedElement]);
+
+  /**
+   * Paste (or duplicate-via-copy+paste) `copied` into the slide, anchored to
+   * the same containing block as `anchorElement` (the object that was
+   * selected when the shortcut fired) rather than always the slide root, so
+   * an object nested inside a positioned group pastes back into that group.
+   */
+  const pasteSlideObjects = useCallback(
+    (copied: CopiedSlideObjects, anchorElement: HTMLElement) => {
       const fmdSlide = containerRef.current?.querySelector(
         ".fmd-slide",
       ) as HTMLElement | null;
@@ -2215,6 +2553,151 @@ export default function SlideEditor({
             child instanceof HTMLElement &&
             child.hasAttribute("data-fmd-autofit-content"),
         ) ?? fmdSlide;
+      const containingBlock = resolveSlideObjectContainingBlock(
+        anchorElement,
+        positioningLayer,
+      );
+
+      const pasted = buildPastedSlideObjects(copied, document);
+      if (pasted.length === 0) return;
+
+      const objectIds: string[] = [];
+      for (const element of pasted) {
+        containingBlock.appendChild(element);
+        ensureBuilderId(element);
+        stampBuilderIds(element);
+        objectIds.push(ensureSlideObjectId(element));
+      }
+
+      // A single pasted object gets the richer single-selection treatment
+      // (resize handles, style inspector) instead of the multi-select outline.
+      if (pasted.length === 1) {
+        const selector = getBuilderSelector(pasted[0]);
+        if (selector) selectElementForStyling(pasted[0], selector);
+        const html = readCurrentSlideContentHtml();
+        if (html !== null) onUpdateSlideRef.current({ content: html });
+        return;
+      }
+
+      const ids = new Set<string>();
+      for (const element of pasted) {
+        const builderId = element.getAttribute("data-builder-id");
+        if (builderId) ids.add(builderId);
+      }
+      applyMultiSelection(ids);
+      commitMultiObjectChange(objectIds);
+    },
+    [
+      applyMultiSelection,
+      commitMultiObjectChange,
+      readCurrentSlideContentHtml,
+      selectElementForStyling,
+    ],
+  );
+
+  // Object clipboard contents are editor-local. It intentionally does not
+  // survive a deck switch, unlike the browser's native text clipboard.
+  useEffect(() => {
+    copiedObjectClipboardRef.current = null;
+  }, [deckId]);
+
+  // One window listener for object copy/paste/duplicate. Native text
+  // copy/paste must always win: bail the instant a text edit is active or
+  // focus is on any form control, BEFORE touching the clipboard or selection,
+  // so ordinary Cmd/Ctrl+C/V/D typing is never hijacked.
+  useEffect(() => {
+    if (readOnly) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey)) return;
+      const key = e.key.toLowerCase();
+      if (key !== "c" && key !== "v" && key !== "d") return;
+
+      const active = document.activeElement;
+      const isTextSurface =
+        active instanceof HTMLInputElement ||
+        active instanceof HTMLTextAreaElement ||
+        active instanceof HTMLSelectElement ||
+        (active instanceof HTMLElement && active.isContentEditable);
+      if (editingEl || isTextSurface) return;
+
+      const selection = getObjectOperationSelection();
+      // Only claim the shortcut for persisted freeform roots which share a
+      // containing block. Everything else remains native browser behavior.
+      if (!selection) return;
+
+      const copySelection = () => {
+        const copied = copySlideObjects(selection.elements);
+        const sourceObjectId = selection.elements[0].getAttribute(
+          "data-slide-object-id",
+        );
+        if (!sourceObjectId) return null;
+        copiedObjectClipboardRef.current = {
+          copied,
+          deckId,
+          slideId: slide.id,
+          sourceObjectId,
+        };
+        return copiedObjectClipboardRef.current;
+      };
+
+      if (key === "c") {
+        e.preventDefault();
+        copySelection();
+        return;
+      }
+
+      if (key === "v") {
+        const clipboard = copiedObjectClipboardRef.current;
+        if (
+          !clipboard ||
+          clipboard.deckId !== deckId ||
+          clipboard.slideId !== slide.id
+        ) {
+          return;
+        }
+        const slideContent = getSlideContent();
+        const source =
+          slideContent &&
+          findSlideObjectById(slideContent, clipboard.sourceObjectId);
+        if (
+          !source ||
+          resolveSlideObjectContainingBlock(
+            source,
+            selection.positioningLayer,
+          ) !== selection.containingBlock
+        ) {
+          return;
+        }
+        e.preventDefault();
+        pasteSlideObjects(clipboard.copied, selection.elements[0]);
+        return;
+      }
+
+      // Duplicate re-copies the live selection so it duplicates what's
+      // currently selected regardless of what's on the clipboard.
+      e.preventDefault();
+      const clipboard = copySelection();
+      if (clipboard) pasteSlideObjects(clipboard.copied, selection.elements[0]);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [
+    deckId,
+    editingEl,
+    getSlideContent,
+    getObjectOperationSelection,
+    pasteSlideObjects,
+    readOnly,
+    slide.id,
+  ]);
+
+  const placeTextBoxAt = useCallback(
+    (clientX: number, clientY: number, target: HTMLElement | null) => {
+      const canvas = containerRef.current
+        ? ensureSlideTextBoxCanvas(containerRef.current)
+        : null;
+      if (!canvas) return;
+      const { fmdSlide, positioningLayer } = canvas;
       const rect = positioningLayer.getBoundingClientRect();
       const { x, y } = clientPointToSlideCoordinates(
         clientX,
@@ -2237,7 +2720,7 @@ export default function SlideEditor({
       box.style.top = `${y}px`;
       box.style.width = "320px";
       box.style.fontSize = "24px";
-      box.style.color = "#fff";
+      box.style.color = getSlideTextBoxDefaultColor(target, positioningLayer);
       box.style.fontFamily = "'Poppins', sans-serif";
       box.style.lineHeight = "1.3";
       box.textContent = ZERO_WIDTH_SPACE;
@@ -2290,14 +2773,16 @@ export default function SlideEditor({
       }: { preserveClickWithoutMove?: boolean } = {},
     ) => {
       if (readOnly) return;
-      const fmdSlide = element.closest(".fmd-slide") as HTMLElement | null;
-      if (!fmdSlide || getComputedStyle(element).position !== "absolute") {
+      const slideCanvas = element.closest(
+        ".fmd-slide, [data-slide-canvas]",
+      ) as HTMLElement | null;
+      if (!slideCanvas || getComputedStyle(element).position !== "absolute") {
         return;
       }
 
-      const slideRect = fmdSlide.getBoundingClientRect();
-      const slideWidth = fmdSlide.offsetWidth;
-      const slideHeight = fmdSlide.offsetHeight;
+      const slideRect = slideCanvas.getBoundingClientRect();
+      const slideWidth = slideCanvas.offsetWidth;
+      const slideHeight = slideCanvas.offsetHeight;
       if (
         !slideRect.width ||
         !slideRect.height ||
@@ -2319,12 +2804,8 @@ export default function SlideEditor({
 
       const origin = getObjectGeometry(element);
       const originalObjectId = element.getAttribute("data-slide-object-id");
-      const startClientX = e.clientX;
-      const startClientY = e.clientY;
-      const duplicateRequested = e.altKey;
       let activeElement = element;
       let clone: HTMLElement | null = null;
-      let moved = false;
 
       const stop = () => {
         window.removeEventListener("pointermove", onMove);
@@ -2350,44 +2831,91 @@ export default function SlideEditor({
         if (selector) selectElementForStyling(element, selector);
       };
 
-      const onMove = (moveEvent: PointerEvent) => {
-        let dx =
-          ((moveEvent.clientX - startClientX) / slideRect.width) * slideWidth;
-        let dy =
-          ((moveEvent.clientY - startClientY) / slideRect.height) * slideHeight;
-        if (!moved && Math.hypot(dx, dy) < 2) return;
-        if (moveEvent.shiftKey) {
-          if (Math.abs(dx) >= Math.abs(dy)) dy = 0;
-          else dx = 0;
-        }
-        if (!moved) {
-          moved = true;
+      const controller = createSlidesCanvasGestureController({
+        preview: (gesture) => {
           // React still receives a click after a pointer drag. Suppress that
           // trailing click so a moved text box does not immediately reopen
           // inline editing.
           suppressNextClickRef.current = true;
           ensureSlideObjectId(element);
-          if (duplicateRequested && moveEvent.altKey) {
+          if (!clone && gesture.duplicate) {
             clone = cloneSlideObject(element);
             element.after(clone);
             ensureBuilderId(clone);
             stampBuilderIds(clone);
             activeElement = clone;
           }
-        }
-        moveEvent.preventDefault();
-        applyObjectGeometry(activeElement, {
-          ...origin,
-          x: origin.x + dx,
-          y: origin.y + dy,
+          applyObjectGeometry(activeElement, {
+            ...origin,
+            x: origin.x + gesture.canvasDelta.x,
+            y: origin.y + gesture.canvasDelta.y,
+          });
+          const selector = getBuilderSelector(activeElement);
+          if (selector) selectElementForStyling(activeElement, selector);
+          return { handled: true };
+        },
+        commit: (gesture) => {
+          // Keeping Option pressed is the explicit duplicate commit. If it
+          // was released before drop, turn the gesture back into a normal move.
+          if (clone && !gesture.duplicate) {
+            applyObjectGeometry(element, getObjectGeometry(clone));
+            clone.remove();
+            activeElement = element;
+          }
+          const html = readCurrentSlideContentHtml();
+          if (html !== null) {
+            onUpdateSlideRef.current({ content: html }, undefined, {
+              persistence: "immediate",
+            });
+          }
+          const selector = getBuilderSelector(activeElement);
+          if (selector) selectElementForStyling(activeElement, selector);
+          return { handled: true };
+        },
+        cancel: () => {
+          restore();
+          return { handled: true };
+        },
+      });
+      controller.pointerDown({
+        kind: "move",
+        objectIds: [originalObjectId ?? getBuilderSelector(element) ?? ""],
+        pointer: {
+          x: e.clientX,
+          y: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+        },
+        viewport: slideRect,
+        canvas: { width: slideWidth, height: slideHeight },
+      });
+
+      const onMove = (moveEvent: PointerEvent) => {
+        const update = controller.pointerMove({
+          x: moveEvent.clientX,
+          y: moveEvent.clientY,
+          shiftKey: moveEvent.shiftKey,
+          altKey: moveEvent.altKey,
+          metaKey: moveEvent.metaKey,
+          ctrlKey: moveEvent.ctrlKey,
         });
-        const selector = getBuilderSelector(activeElement);
-        if (selector) selectElementForStyling(activeElement, selector);
+        if (update.phase !== "active") return;
+        moveEvent.preventDefault();
       };
 
       const onUp = (upEvent: PointerEvent) => {
         stop();
-        if (!moved) {
+        const result = controller.pointerUp({
+          x: upEvent.clientX,
+          y: upEvent.clientY,
+          shiftKey: upEvent.shiftKey,
+          altKey: upEvent.altKey,
+          metaKey: upEvent.metaKey,
+          ctrlKey: upEvent.ctrlKey,
+        });
+        if (!result.committed) {
           if (preserveClickWithoutMove) return;
           // Pointer-up can occur outside the canvas, where React will not see
           // the click that normally clears this flag.
@@ -2402,23 +2930,12 @@ export default function SlideEditor({
         window.setTimeout(function clearDragClickSuppression() {
           suppressNextClickRef.current = false;
         }, 0);
-        // Keeping Option pressed is the explicit duplicate commit. If it was
-        // released before drop, turn the gesture back into a normal move.
-        if (clone && !upEvent.altKey) {
-          applyObjectGeometry(element, getObjectGeometry(clone));
-          clone.remove();
-          activeElement = element;
-        }
-        const html = readCurrentSlideContentHtml();
-        if (html !== null) onUpdateSlideRef.current({ content: html });
-        const selector = getBuilderSelector(activeElement);
-        if (selector) selectElementForStyling(activeElement, selector);
       };
 
       const onCancel = () => {
         stop();
         suppressNextClickRef.current = false;
-        restore();
+        controller.cancel();
       };
 
       window.addEventListener("pointermove", onMove);
@@ -2439,10 +2956,12 @@ export default function SlideEditor({
     (handle: ResizeHandle, e: React.PointerEvent) => {
       if (readOnly) return;
       const element = resolveSelectedElement();
-      const fmdSlide = element?.closest(".fmd-slide") as HTMLElement | null;
+      const slideCanvas = element?.closest(
+        ".fmd-slide, [data-slide-canvas]",
+      ) as HTMLElement | null;
       if (
         !element ||
-        !fmdSlide ||
+        !slideCanvas ||
         getComputedStyle(element).position !== "absolute"
       ) {
         return;
@@ -2450,9 +2969,9 @@ export default function SlideEditor({
       e.preventDefault();
       e.stopPropagation();
 
-      const slideRect = fmdSlide.getBoundingClientRect();
-      const slideWidth = fmdSlide.offsetWidth;
-      const slideHeight = fmdSlide.offsetHeight;
+      const slideRect = slideCanvas.getBoundingClientRect();
+      const slideWidth = slideCanvas.offsetWidth;
+      const slideHeight = slideCanvas.offsetHeight;
       if (
         !slideRect.width ||
         !slideRect.height ||
@@ -2464,9 +2983,6 @@ export default function SlideEditor({
 
       const origin = getObjectGeometry(element);
       const originalObjectId = element.getAttribute("data-slide-object-id");
-      const startClientX = e.clientX;
-      const startClientY = e.clientY;
-      let resized = false;
       const selector = getBuilderSelector(element);
       if (selector) selectElementForStyling(element, selector, "resizing");
 
@@ -2479,48 +2995,92 @@ export default function SlideEditor({
         }
       };
 
+      const controller = createSlidesCanvasGestureController({
+        preview: (gesture) => {
+          if (gesture.kind !== "resize")
+            return { handled: false, reason: "unhandled" };
+          ensureSlideObjectId(element);
+          applyObjectGeometry(element, gesture.rect);
+          const currentSelector = getBuilderSelector(element);
+          if (currentSelector) {
+            selectElementForStyling(element, currentSelector, "resizing");
+          }
+          return { handled: true };
+        },
+        commit: () => {
+          const currentSelector = getBuilderSelector(element);
+          if (currentSelector)
+            selectElementForStyling(element, currentSelector);
+          const html = readCurrentSlideContentHtml();
+          if (html !== null) {
+            onUpdateSlideRef.current({ content: html }, undefined, {
+              persistence: "immediate",
+            });
+          }
+          return { handled: true };
+        },
+        cancel: () => {
+          applyObjectGeometry(element, origin);
+          if (originalObjectId) {
+            element.setAttribute("data-slide-object-id", originalObjectId);
+          } else {
+            element.removeAttribute("data-slide-object-id");
+          }
+          const currentSelector = getBuilderSelector(element);
+          if (currentSelector)
+            selectElementForStyling(element, currentSelector);
+          return { handled: true };
+        },
+      });
+      controller.pointerDown({
+        kind: "resize",
+        objectIds: [originalObjectId ?? selector ?? ""],
+        pointer: {
+          x: e.clientX,
+          y: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+        },
+        viewport: slideRect,
+        canvas: { width: slideWidth, height: slideHeight },
+        handle,
+        rect: origin,
+      });
+
       const onMove = (moveEvent: PointerEvent) => {
-        const dx =
-          ((moveEvent.clientX - startClientX) / slideRect.width) * slideWidth;
-        const dy =
-          ((moveEvent.clientY - startClientY) / slideRect.height) * slideHeight;
-        if (!resized && Math.hypot(dx, dy) < 1) return;
-        resized = true;
-        ensureSlideObjectId(element);
-        applyObjectGeometry(
-          element,
-          resizeSlideObject(origin, {
-            handle,
-            dx,
-            dy,
-            preserveAspectRatio: moveEvent.shiftKey,
-          }),
-        );
-        const currentSelector = getBuilderSelector(element);
-        if (currentSelector) {
-          selectElementForStyling(element, currentSelector, "resizing");
-        }
+        const update = controller.pointerMove({
+          x: moveEvent.clientX,
+          y: moveEvent.clientY,
+          shiftKey: moveEvent.shiftKey,
+          altKey: moveEvent.altKey,
+          metaKey: moveEvent.metaKey,
+          ctrlKey: moveEvent.ctrlKey,
+        });
+        if (update.phase === "active") moveEvent.preventDefault();
       };
 
-      const onUp = () => {
+      const onUp = (upEvent: PointerEvent) => {
         stop();
+        const result = controller.pointerUp({
+          x: upEvent.clientX,
+          y: upEvent.clientY,
+          shiftKey: upEvent.shiftKey,
+          altKey: upEvent.altKey,
+          metaKey: upEvent.metaKey,
+          ctrlKey: upEvent.ctrlKey,
+        });
         const currentSelector = getBuilderSelector(element);
         if (currentSelector) selectElementForStyling(element, currentSelector);
-        if (!resized) return;
-        const html = readCurrentSlideContentHtml();
-        if (html !== null) onUpdateSlideRef.current({ content: html });
+        if (!result.committed) return;
       };
 
       const onCancel = () => {
         stop();
-        applyObjectGeometry(element, origin);
-        if (originalObjectId) {
-          element.setAttribute("data-slide-object-id", originalObjectId);
-        } else {
-          element.removeAttribute("data-slide-object-id");
-        }
-        const selector = getBuilderSelector(element);
-        if (selector) selectElementForStyling(element, selector);
+        controller.cancel();
+        const currentSelector = getBuilderSelector(element);
+        if (currentSelector) selectElementForStyling(element, currentSelector);
       };
 
       window.addEventListener("pointermove", onMove);
@@ -2538,15 +3098,177 @@ export default function SlideEditor({
     ],
   );
 
+  /**
+   * Same gesture shape as startElementDrag (2px threshold, Shift axis lock,
+   * commit-once-on-pointerup, Escape-cancel restore), but moves every
+   * absolutely-positioned member of the multi-selection by one shared delta
+   * instead of a single element.
+   */
+  const startGroupDrag = useCallback(
+    (e: React.PointerEvent, ids: Set<string>) => {
+      if (readOnly) return;
+      const slideContent = getSlideContent();
+      if (!slideContent) return;
+      const elements = Array.from(ids)
+        .map(
+          (id) =>
+            slideContent.querySelector(
+              `[data-builder-id="${id}"]`,
+            ) as HTMLElement | null,
+        )
+        .filter((el): el is HTMLElement => el !== null);
+      if (elements.some((element) => !isPersistedFreeformObject(element))) {
+        return;
+      }
+      const members = collectMovableSlideObjects(elements, getObjectGeometry);
+      if (members.length === 0) return;
+
+      // Resolve the slide from a member, the way startElementDrag does.
+      // `.fmd-slide` is a DESCENDANT of `.slide-content`, so walking up from
+      // the container never finds it and the whole gesture aborts silently.
+      const fmdSlide = members[0].element.closest(
+        ".fmd-slide",
+      ) as HTMLElement | null;
+      if (!fmdSlide) return;
+      const positioningLayer =
+        Array.from(fmdSlide.children).find(
+          (child): child is HTMLElement =>
+            child instanceof HTMLElement &&
+            child.hasAttribute("data-fmd-autofit-content"),
+        ) ?? fmdSlide;
+      const containingBlock = resolveSlideObjectContainingBlock(
+        members[0].element,
+        positioningLayer,
+      );
+      if (
+        members.some(
+          (member) =>
+            member.element.closest(".fmd-slide") !== fmdSlide ||
+            resolveSlideObjectContainingBlock(
+              member.element,
+              positioningLayer,
+            ) !== containingBlock,
+        )
+      ) {
+        return;
+      }
+      const slideRect = fmdSlide.getBoundingClientRect();
+      const slideWidth = fmdSlide.offsetWidth;
+      const slideHeight = fmdSlide.offsetHeight;
+      if (
+        !slideRect.width ||
+        !slideRect.height ||
+        !slideWidth ||
+        !slideHeight
+      ) {
+        return;
+      }
+
+      const stop = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onCancel);
+        if (activeGestureCancelRef.current === onCancel) {
+          activeGestureCancelRef.current = null;
+        }
+      };
+
+      const controller = createSlidesCanvasGestureController({
+        preview: (gesture) => {
+          // Claim the click only once a real drag starts, so a click without
+          // movement on a multi-selected object remains normal editor input.
+          suppressNextClickRef.current = true;
+          applySlideObjectMoveDelta(
+            members,
+            gesture.canvasDelta.x,
+            gesture.canvasDelta.y,
+            applyObjectGeometry,
+          );
+          refreshMultiSelectionRects(ids);
+          return { handled: true };
+        },
+        commit: () => {
+          commitMultiObjectChange(members.map((member) => member.objectId));
+          return { handled: true };
+        },
+        cancel: () => {
+          applySlideObjectMoveDelta(members, 0, 0, applyObjectGeometry);
+          refreshMultiSelectionRects(ids);
+          return { handled: true };
+        },
+      });
+      controller.pointerDown({
+        kind: "move",
+        objectIds: members.map((member) => member.objectId),
+        pointer: {
+          x: e.clientX,
+          y: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+        },
+        viewport: slideRect,
+        canvas: { width: slideWidth, height: slideHeight },
+      });
+
+      const onMove = (moveEvent: PointerEvent) => {
+        const update = controller.pointerMove({
+          x: moveEvent.clientX,
+          y: moveEvent.clientY,
+          shiftKey: moveEvent.shiftKey,
+          altKey: moveEvent.altKey,
+          metaKey: moveEvent.metaKey,
+          ctrlKey: moveEvent.ctrlKey,
+        });
+        if (update.phase === "active") moveEvent.preventDefault();
+      };
+
+      const onUp = (upEvent: PointerEvent) => {
+        stop();
+        const result = controller.pointerUp({
+          x: upEvent.clientX,
+          y: upEvent.clientY,
+          shiftKey: upEvent.shiftKey,
+          altKey: upEvent.altKey,
+          metaKey: upEvent.metaKey,
+          ctrlKey: upEvent.ctrlKey,
+        });
+        if (!result.committed) {
+          window.setTimeout(function clearEdgeClickSuppression() {
+            suppressNextClickRef.current = false;
+          }, 0);
+          return;
+        }
+        window.setTimeout(function clearDragClickSuppression() {
+          suppressNextClickRef.current = false;
+        }, 0);
+      };
+
+      const onCancel = () => {
+        stop();
+        suppressNextClickRef.current = false;
+        controller.cancel();
+      };
+
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onCancel);
+      activeGestureCancelRef.current = onCancel;
+    },
+    [
+      applyObjectGeometry,
+      commitMultiObjectChange,
+      refreshMultiSelectionRects,
+      getObjectGeometry,
+      getSlideContent,
+      readOnly,
+    ],
+  );
+
   useEffect(() => {
-    if (
-      readOnly ||
-      editingEl ||
-      multiSelection.size > 0 ||
-      !selectedElementSelector
-    ) {
-      return;
-    }
+    if (readOnly || editingEl) return;
+    if (multiSelection.size === 0 && !selectedElementSelector) return;
     const onKey = (e: KeyboardEvent) => {
       if (!e.key.startsWith("Arrow")) return;
       const active = document.activeElement;
@@ -2558,20 +3280,65 @@ export default function SlideEditor({
       ) {
         return;
       }
-      const element = resolveSelectedElement();
-      if (!element || getComputedStyle(element).position !== "absolute") {
+      const nudge = slidesCanvasInteractionCore.nudge(e);
+      if (!nudge) return;
+      const { x: dx, y: dy } = nudge.delta;
+
+      if (multiSelection.size > 0) {
+        const slideContent = getSlideContent();
+        if (!slideContent) return;
+        const elements = Array.from(multiSelection)
+          .map(
+            (id) =>
+              slideContent.querySelector(
+                `[data-builder-id="${id}"]`,
+              ) as HTMLElement | null,
+          )
+          .filter((el): el is HTMLElement => el !== null);
+        if (elements.some((element) => !isPersistedFreeformObject(element))) {
+          return;
+        }
+        const members = collectMovableSlideObjects(elements, getObjectGeometry);
+        if (members.length === 0) return;
+        const fmdSlide = members[0].element.closest(
+          ".fmd-slide",
+        ) as HTMLElement | null;
+        if (!fmdSlide) return;
+        const positioningLayer =
+          Array.from(fmdSlide.children).find(
+            (child): child is HTMLElement =>
+              child instanceof HTMLElement &&
+              child.hasAttribute("data-fmd-autofit-content"),
+          ) ?? fmdSlide;
+        const containingBlock = resolveSlideObjectContainingBlock(
+          members[0].element,
+          positioningLayer,
+        );
+        if (
+          members.some(
+            (member) =>
+              member.element.closest(".fmd-slide") !== fmdSlide ||
+              resolveSlideObjectContainingBlock(
+                member.element,
+                positioningLayer,
+              ) !== containingBlock,
+          )
+        ) {
+          return;
+        }
+        e.preventDefault();
+        applySlideObjectMoveDelta(members, dx, dy, applyObjectGeometry);
+        refreshMultiSelectionRects(multiSelection);
+        commitMultiObjectChange(members.map((member) => member.objectId));
         return;
       }
-      const amount = e.shiftKey ? 10 : 1;
-      const geometry = getObjectGeometry(element);
-      if (e.key === "ArrowLeft") geometry.x -= amount;
-      else if (e.key === "ArrowRight") geometry.x += amount;
-      else if (e.key === "ArrowUp") geometry.y -= amount;
-      else if (e.key === "ArrowDown") geometry.y += amount;
-      else return;
 
+      const element = resolveSelectedElement();
+      if (!element || !isPersistedFreeformObject(element)) return;
       e.preventDefault();
-      ensureSlideObjectId(element);
+      const geometry = getObjectGeometry(element);
+      geometry.x += dx;
+      geometry.y += dy;
       applyObjectGeometry(element, geometry);
       const html = readCurrentSlideContentHtml();
       if (html !== null) onUpdateSlideRef.current({ content: html });
@@ -2582,11 +3349,14 @@ export default function SlideEditor({
     return () => window.removeEventListener("keydown", onKey);
   }, [
     applyObjectGeometry,
+    commitMultiObjectChange,
     editingEl,
     getObjectGeometry,
-    multiSelection.size,
+    getSlideContent,
+    multiSelection,
     readCurrentSlideContentHtml,
     readOnly,
+    refreshMultiSelectionRects,
     resolveSelectedElement,
     selectElementForStyling,
     selectedElementSelector,
@@ -2608,7 +3378,7 @@ export default function SlideEditor({
       const shouldShowMoveCursor =
         selected !== null &&
         getComputedStyle(selected).position === "absolute" &&
-        isWithinElementEdgeMoveBand(
+        isWithinSlidesCanvasEdgeMoveBand(
           selected.getBoundingClientRect(),
           e.clientX,
           e.clientY,
@@ -2629,7 +3399,7 @@ export default function SlideEditor({
       if (!slideContent) return;
       const target = e.target as HTMLElement;
 
-      if (textBoxMode && isHtmlSlide) {
+      if (textBoxMode) {
         // Unlike the marquee/select flow below, the text-box tool places a
         // box on the very next click no matter what it lands on (mirroring
         // Google Slides / PowerPoint). Gating this on "whitespace" left the
@@ -2639,27 +3409,47 @@ export default function SlideEditor({
         e.preventDefault();
         if (editingEl) exitInlineEdit();
         suppressNextClickRef.current = true;
-        placeTextBoxAt(e.clientX, e.clientY);
+        placeTextBoxAt(e.clientX, e.clientY, target);
         onExitTextBoxMode?.();
         return;
       }
       if (editingEl) return; // avoid interfering with an active inline edit
 
+      // Pointer-down on a member of the current multi-selection drags the
+      // whole group instead of the single-object flow below.
+      if (multiSelection.size > 0) {
+        const id = findSelectableId(target, slideContent);
+        if (id && multiSelection.has(id)) {
+          startGroupDrag(e, multiSelection);
+          return;
+        }
+      }
+
       const selected = resolveSelectedElement();
-      const dragStart =
-        selected && getComputedStyle(selected).position === "absolute"
-          ? getSelectedObjectDragStart({
-              targetWithinSelectedObject: selected.contains(target),
-              pointerWithinMoveBand: isWithinElementEdgeMoveBand(
-                selected.getBoundingClientRect(),
-                e.clientX,
-                e.clientY,
-              ),
-            })
-          : null;
-      if (dragStart && selected) {
+      const pointerIntent = resolveSlidesCanvasPointerIntent({
+        hasSelectedObject:
+          selected !== null &&
+          getComputedStyle(selected).position === "absolute",
+        targetWithinSelectedObject: selected?.contains(target) ?? false,
+        targetContainsSelectedObject: selected
+          ? target.contains(selected)
+          : false,
+        pointerWithinMoveBand:
+          selected !== null &&
+          isWithinSlidesCanvasEdgeMoveBand(
+            selected.getBoundingClientRect(),
+            e.clientX,
+            e.clientY,
+          ),
+        targetIsEditableText: Boolean(findSmartBlock(target, slideContent)),
+      });
+      if (
+        selected &&
+        (pointerIntent === "move-object-body" ||
+          pointerIntent === "move-object-perimeter")
+      ) {
         startElementDrag(e, selected, {
-          preserveClickWithoutMove: dragStart === "body",
+          preserveClickWithoutMove: pointerIntent === "move-object-body",
         });
         return;
       }
@@ -2687,19 +3477,19 @@ export default function SlideEditor({
     },
     [
       editingEl,
+      findSelectableId,
       getSlideContent,
       isSlideWhitespaceTarget,
       multiSelection,
       applyMultiSelection,
       clearSelectedElement,
       textBoxMode,
-      isHtmlSlide,
       exitInlineEdit,
       placeTextBoxAt,
       onExitTextBoxMode,
-      getSelectedObjectDragStart,
       resolveSelectedElement,
       startElementDrag,
+      startGroupDrag,
     ],
   );
 
@@ -2938,9 +3728,15 @@ export default function SlideEditor({
       // leaf, or an entire bullet list) — not the individual line — so typing,
       // highlighting, shortcuts, and Enter-to-add-bullet all work, and the
       // style dock targets the same block being edited.
-      if (!readOnly && isHtmlSlide && slideContent) {
+      if (!readOnly && slideContent) {
         const block = findSmartBlock(target, slideContent);
-        if (block) {
+        if (
+          block &&
+          slidesCanvasInteractionCore.textActivation({
+            clickCount: 1,
+            textEditable: true,
+          }) === "edit"
+        ) {
           const blockSelector = getBuilderSelector(block);
           if (blockSelector) {
             selectElementForStyling(block, blockSelector);
@@ -3082,7 +3878,7 @@ export default function SlideEditor({
         inlineTextStyle,
       );
       if (!editing) {
-        setSelectedElementRect(element.getBoundingClientRect());
+        invalidateSelectionOverlayMeasurement();
       }
       setSelectedStyleSnapshot(snapshot);
       if (!editing) {
@@ -3096,6 +3892,7 @@ export default function SlideEditor({
     [
       buildSelectionState,
       captureInlineEditDraft,
+      invalidateSelectionOverlayMeasurement,
       readCurrentSlideContentHtml,
       resolveSelectedElement,
       selectedElementSelector,
@@ -3103,6 +3900,45 @@ export default function SlideEditor({
     ],
   );
 
+  /** Bring-to-front / send-to-back for the selected freeform object. */
+  const handleArrangeSelected = useCallback(
+    (target: SlideObjectZOrderTarget) => {
+      const element = resolveSelectedElement();
+      if (!element) return;
+      const fmdSlide = element.closest(".fmd-slide") as HTMLElement | null;
+      const positioningLayer = fmdSlide
+        ? (Array.from(fmdSlide.children).find(
+            (child): child is HTMLElement =>
+              child instanceof HTMLElement &&
+              child.hasAttribute("data-fmd-autofit-content"),
+          ) ?? fmdSlide)
+        : null;
+      if (!positioningLayer) return;
+
+      const containingBlock = resolveSlideObjectContainingBlock(
+        element,
+        positioningLayer,
+      );
+      const change = computeSlideObjectZOrder(element, containingBlock, target);
+      if (!change) return;
+
+      element.style.zIndex = String(change.value);
+      for (const shift of change.shiftPeers) {
+        shift.element.style.zIndex = String(shift.value);
+      }
+
+      const html = readCurrentSlideContentHtml();
+      if (html !== null) onUpdateSlideRef.current({ content: html });
+      const selector = getBuilderSelector(element);
+      if (selector) selectElementForStyling(element, selector);
+    },
+    [
+      readCurrentSlideContentHtml,
+      resolveSelectedElement,
+      selectElementForStyling,
+    ],
+  );
+
   // --- Pending visual updates ---
   const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
 
@@ -3167,7 +4003,6 @@ export default function SlideEditor({
   const isSelectedElementDraggable = selectedForDrag
     ? getComputedStyle(selectedForDrag).position === "absolute"
     : false;
-
   return (
     <div
       className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"
@@ -3272,6 +4107,7 @@ export default function SlideEditor({
                         designSystem={designSystem}
                         aspectRatio={aspectRatio}
                         onOverflowChange={handleOverflowChange}
+                        onAutofitSettled={handleAutofitSettled}
                       />
                       {/* Fading "AI edited" ring around the canvas when the
                           agent just edited THIS slide (component handles fade). */}
@@ -3292,27 +4128,20 @@ export default function SlideEditor({
                           )}
                         </div>
                       )}
-                      {overflowInfo && !readOnly && !agentActive && (
-                        <div className="absolute top-3 left-3 z-20 flex items-center gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 backdrop-blur px-2.5 py-1.5 text-xs text-amber-100 shadow-lg">
-                          <IconAlertTriangle
-                            className="h-3.5 w-3.5 flex-shrink-0"
-                            stroke={2}
+                      {overflowInfo &&
+                        !readOnly &&
+                        !agentActive &&
+                        !isOverflowWarningDismissed && (
+                          <SlideOverflowWarning
+                            verticalOverflow={overflowInfo.verticalOverflow}
+                            isAskingAgentToFix={isAskingAgentToFix}
+                            dismissLabel={t("deckEditor.dismissLayoutWarning")}
+                            onFix={handleAskAgentToFixLayout}
+                            onDismiss={() =>
+                              setIsOverflowWarningDismissed(true)
+                            }
                           />
-                          <span className="leading-tight">
-                            Layout overflows by {overflowInfo.verticalOverflow}
-                            px
-                          </span>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="ml-1 h-6 cursor-pointer px-2 text-[11px] font-medium text-amber-100 hover:bg-amber-500/20 hover:text-white"
-                            onClick={handleAskAgentToFixLayout}
-                            disabled={isAskingAgentToFix}
-                          >
-                            {isAskingAgentToFix ? "Asking…" : "Fix with AI"}
-                          </Button>
-                        </div>
-                      )}
+                        )}
                     </div>
                   </div>
                 </div>
@@ -3333,6 +4162,7 @@ export default function SlideEditor({
                 designSystem={designSystem}
                 className="h-full w-full rounded-none border-0 bg-transparent shadow-none"
                 onChange={applySelectedStylePatch}
+                onArrange={handleArrangeSelected}
                 onClose={() => {
                   clearSelectedElement();
                   syncSelectionToAppState(null);
@@ -3340,26 +4170,13 @@ export default function SlideEditor({
                 }}
               />
             ) : (
-              <div className="flex h-11 items-center justify-between border-b border-border/70 px-3">
-                <span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/70">
-                  {t("styleInspector.title")}
-                </span>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="size-7 cursor-pointer text-muted-foreground hover:text-foreground"
-                      onClick={onCloseStylePanel}
-                      aria-label={t("styleInspector.close")}
-                    >
-                      <IconX className="size-3.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("styleInspector.close")}</TooltipContent>
-                </Tooltip>
-              </div>
+              <SlideBackgroundInspector
+                background={slide.background}
+                designSystem={designSystem}
+                className="h-full w-full rounded-none border-0 bg-transparent shadow-none"
+                onChange={applySlideBackground}
+                onClose={onCloseStylePanel}
+              />
             )}
           </div>
         )}
@@ -3370,6 +4187,7 @@ export default function SlideEditor({
         onChange={(notes) => onUpdateSlide({ notes })}
         slideIndex={slideIndex}
         slideCount={slideCount}
+        readOnly={readOnly}
       />
 
       {selectionRect && (