@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/canvas-shell.tsx

@@ -76,6 +76,7 @@ import {
   selectorIndex,
   shortText,
 } from './dom-selection.ts';
+import { setElementDragActive } from './drag-state.ts';
 import { EqualSpacingHandles } from './equal-spacing-handles.tsx';
 import { ExportDialogProvider } from './export-dialog.tsx';
 import {
@@ -85,6 +86,7 @@ import {
   useInputRouter,
 } from './input-router.tsx';
 import { ElementMarqueeOverlay } from './marquee-overlay.tsx';
+import { MeasureOverlay } from './measure-overlay.tsx';
 import { ParticipantsChrome } from './participants-chrome.tsx';
 import { ToolPalette } from './tool-palette.tsx';
 import { UndoHud } from './undo-hud.tsx';
@@ -94,15 +96,18 @@ import {
   useAnnotationSelectionOptional,
 } from './use-annotation-selection.tsx';
 import { AnnotationsVisibilityProvider } from './use-annotations-visibility.tsx';
+import { showCanvasToast } from './use-canvas-media-drop.tsx';
 import { ChromeVisibilityProvider, useChromeVisibility } from './use-chrome-visibility.tsx';
 import { useCollab } from './use-collab.tsx';
 import { useCursorModifiers } from './use-cursor-modifiers.tsx';
+import { ElementResizeOverlay } from './use-element-resize.tsx';
 import { useKeyboardDiscipline } from './use-keyboard-discipline.tsx';
 import {
   MaybeSelectionSetProvider,
   type Selection,
   useSelectionSet,
 } from './use-selection-set.tsx';
+import { SpacingHandlesOverlay } from './use-spacing-handles.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
 import { useUndoSinks, useUndoStack } from './use-undo-stack.tsx';
 
@@ -381,6 +386,11 @@ interface LayerNode {
   /** Occurrence index of this id within the artboard — matches the resolver's
    *  `querySelectorAll([data-dc-screen=…] [data-cd-id=…])[index]`. */
   index: number;
+  /** Authored `style.display === 'none'` — the Layers-panel eye icon's source
+   *  of truth. The panel's toggle persists through `/_api/edit-css` (same
+   *  route CssKnobs uses), so this must reflect the SOURCE value, not a
+   *  client-only preview flag (see app.jsx `toggleVisibility`). */
+  hidden: boolean;
   children: LayerNode[];
 }
 
@@ -422,6 +432,73 @@ function layerType(el: Element): string {
   return 'box';
 }
 
+// Task L6 — the stamped-ancestor chain from an artboard body down to `el`
+// (outermost first), mirroring `resolveHoverTarget`'s "top mode" climb
+// (input-router.tsx) but returning every rung instead of only the outermost —
+// deep-select needs the whole ladder to know what "one level deeper" means.
+function stampedChainToBody(el: Element): Element[] {
+  const bodyEl = el.closest('.dc-artboard-body');
+  const chain: Element[] = [];
+  let cur: Element | null = el;
+  while (cur && cur !== bodyEl) {
+    if (cur.hasAttribute('data-cd-id')) chain.push(cur);
+    cur = cur.parentElement;
+  }
+  return chain.reverse();
+}
+
+// Task L6 — "Select layer" submenu: every DISTINCT `[data-cd-id]` ancestor in
+// the full hit-stack under the cursor (topmost/frontmost first, matching
+// Layers-panel order), so overlapping/deeply-nested elements a single
+// elementFromPoint pick can't reach become individually selectable.
+// `elementsFromPoint` (unlike `elementFromPoint`) walks the WHOLE z-order
+// stack — including non-ancestor siblings visually underneath the frontmost
+// hit — so this also disambiguates true overlaps, not just nesting depth.
+function buildSelectLayerSubmenu(
+  target: ContextTarget,
+  selSet: { replace: (s: Selection | Selection[]) => void }
+): MenuItem[] {
+  if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function') {
+    return [];
+  }
+  const hits = document.elementsFromPoint(target.clientX, target.clientY);
+  const seen = new Set<Element>();
+  const candidates: Element[] = [];
+  for (const hit of hits) {
+    const stamped = hit.closest?.('[data-cd-id]') ?? null;
+    if (!stamped || seen.has(stamped)) continue;
+    seen.add(stamped);
+    candidates.push(stamped);
+  }
+  if (candidates.length === 0) {
+    return [
+      {
+        id: 'select-layer-empty',
+        label: 'No stamped elements here',
+        disabled: true,
+        onSelect: () => {},
+      },
+    ];
+  }
+  return candidates.map((el, i) => {
+    const cdId = el.getAttribute('data-cd-id') ?? '';
+    const artboardId =
+      (el.closest('[data-dc-screen]') as HTMLElement | null)?.getAttribute('data-dc-screen') ??
+      null;
+    return {
+      id: `select-layer-${i}`,
+      label: `${layerLabel(el)} · ${layerType(el)}`,
+      onSelect: () => {
+        // `hoverTargetToSelection` computes the occurrence index itself
+        // (`selectorIndex` against the scoped selector) — no need to pass one.
+        selSet.replace(
+          hoverTargetToSelection({ el, cdId: cdId || null, artboardId } as HoverTarget)
+        );
+      },
+    };
+  });
+}
+
 function serializeArtboardTree(root: Element): LayerNode[] {
   const seen = new Map<string, number>();
   function walk(el: Element): LayerNode[] {
@@ -439,6 +516,7 @@ function serializeArtboardTree(root: Element): LayerNode[] {
           label: layerLabel(child),
           type: layerType(child),
           index: idx,
+          hidden: (child as HTMLElement).style.display === 'none',
           children: walk(child),
         });
       } else {
@@ -1362,9 +1440,168 @@ function buildRegistry(deps: {
             }
           },
         },
+        {
+          id: 'select-layer',
+          label: 'Select layer',
+          // Task L6 — every DISTINCT stamped ancestor in the cursor's full hit
+          // stack (elementsFromPoint sees through overlapping/nested elements a
+          // single elementFromPoint pick can't reach), Layers-order (topmost
+          // first), so overlapping/deeply-nested TSX becomes grabbable. A
+          // function submenu — resolved per-click against `target`, since the
+          // candidate set depends on where the user right-clicked.
+          //
+          // v1 scope: no live Stage-H local/shared badge on each candidate —
+          // that resolver is server-side/main-origin-only (`GET /_api/edit-scope`,
+          // canvas-edit.ts), unreachable from this iframe without a new
+          // request/reply round-trip; deferred rather than blocking this task.
+          onSelect: () => {
+            /* parent of a submenu — never invoked directly */
+          },
+          submenu: (t) => buildSelectLayerSubmenu(t, selSet),
+        },
+      ],
+      [
+        {
+          id: 'insert-element',
+          label: 'Insert',
+          // feature-element-editing-robustness Stage I3 — insert a synthesized
+          // element AFTER the right-clicked one (main-origin write: request it
+          // from the parent shell). Image insert needs an asset src (the Stage-F
+          // AssetPicker), so only Div/Text are offered here for now.
+          submenu: [
+            {
+              id: 'insert-div',
+              label: 'Div',
+              onSelect: (target) => {
+                if (!target.cdId) return;
+                try {
+                  window.parent.postMessage(
+                    { dgn: 'insert-request', refId: target.cdId, position: 'after', kind: 'div' },
+                    '*'
+                  );
+                } catch {
+                  /* detached */
+                }
+              },
+            },
+            {
+              id: 'insert-text',
+              label: 'Text',
+              onSelect: (target) => {
+                if (!target.cdId) return;
+                try {
+                  window.parent.postMessage(
+                    { dgn: 'insert-request', refId: target.cdId, position: 'after', kind: 'text' },
+                    '*'
+                  );
+                } catch {
+                  /* detached */
+                }
+              },
+            },
+            {
+              id: 'insert-image',
+              label: 'Image…',
+              // Image needs a contained asset src — the shell opens the AssetPicker.
+              onSelect: (target) => {
+                if (!target.cdId) return;
+                try {
+                  window.parent.postMessage(
+                    { dgn: 'insert-image-request', refId: target.cdId, position: 'after' },
+                    '*'
+                  );
+                } catch {
+                  /* detached */
+                }
+              },
+            },
+          ],
+          onSelect: () => {},
+        },
+        {
+          id: 'replace-media',
+          label: 'Replace image…',
+          // Stage F2 — re-point an authored <img>/<video> src. Only meaningful on
+          // a media element; on anything else it's a no-op (the shell's edit-attr
+          // will refuse a non-media / expression src). The Media inspector section
+          // carries the primary, always-gated "Replace…" button.
+          onSelect: (target) => {
+            const tag = target.el?.tagName?.toLowerCase();
+            if (!target.cdId || (tag !== 'img' && tag !== 'video')) return;
+            // Read the authored src straight off the element so the shell has the
+            // undo before-value (getAttribute is the literal content attr, not the
+            // resolved URL).
+            const before = target.el?.getAttribute('src') ?? null;
+            try {
+              window.parent.postMessage(
+                { dgn: 'replace-media-request', id: target.cdId, before },
+                '*'
+              );
+            } catch {
+              /* detached */
+            }
+          },
+        },
       ],
       [exportItem('export-selection', 'Export selection…', 'selection', '⌘E')],
       [
+        {
+          id: 'duplicate-element',
+          label: 'Duplicate',
+          shortcut: '⌘D',
+          // Task L3 — main-origin source duplicate; post to the parent shell.
+          onSelect: (target) => {
+            if (!target.cdId) return;
+            try {
+              window.parent.postMessage({ dgn: 'duplicate-request', id: target.cdId }, '*');
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
+        {
+          id: 'copy-style',
+          label: 'Copy style',
+          shortcut: '⌘⌥C',
+          // Task L4 — the shell captures the current selection's authored style.
+          onSelect: () => {
+            try {
+              window.parent.postMessage({ dgn: 'copy-style' }, '*');
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
+        {
+          id: 'paste-style',
+          label: 'Paste style',
+          shortcut: '⌘⌥V',
+          onSelect: (target) => {
+            if (!target.cdId) return;
+            try {
+              window.parent.postMessage({ dgn: 'paste-style', id: target.cdId }, '*');
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
+        {
+          id: 'delete-element',
+          label: 'Delete',
+          shortcut: '⌫',
+          destructive: true,
+          // feature-element-editing-robustness Stage I — request a source delete.
+          // The write is main-origin-only (DDR-054): post to the parent shell,
+          // which performs it (pinned to the active canvas) + records undo.
+          onSelect: (target) => {
+            if (!target.cdId) return;
+            try {
+              window.parent.postMessage({ dgn: 'delete-request', id: target.cdId }, '*');
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
         {
           id: 'hide',
           label: 'Hide',
@@ -1454,6 +1691,28 @@ function buildRegistry(deps: {
         },
       ],
       [themeItem],
+      [
+        {
+          id: 'delete-artboard',
+          label: 'Delete artboard',
+          shortcut: '⌫',
+          destructive: true,
+          // Main-origin-only source delete (DDR-054): post to the parent shell,
+          // which performs it (pinned to the active canvas) + records undo. The
+          // engine refuses to delete the last artboard.
+          onSelect: (target) => {
+            if (!target.artboardId) return;
+            try {
+              window.parent.postMessage(
+                { dgn: 'delete-artboard-request', artboardId: target.artboardId },
+                '*'
+              );
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
+      ],
       [exportItem('export-artboard', 'Export this artboard…', 'artboard')],
     ],
     world: [
@@ -1477,6 +1736,63 @@ function boundsOf(el: HTMLElement) {
   };
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Task A1 (feature-element-editing-robustness) — camera-aware reveal.
+//
+// The `select-by-id` channel (Layers-panel click, restored/echoed selection,
+// post-edit reselect) used to `scrollIntoView({block:'nearest'})` to reveal the
+// selected element. But `.dc-canvas` / `.dc-artboard-body` are `overflow:hidden`
+// engine clip layers, and the camera is the `.dc-world` transform — so a host
+// scroll shifted the layout out from under the camera model (a phantom right
+// strip, and the pan reset after an absolute-element move: Bugs A + B). Reveal
+// THROUGH the camera instead: measure the element's live screen box and, only
+// when it's off-screen, pan the world transform the minimal amount to bring the
+// nearest out-of-view edge in. Screen-space deltas → `controller.panBy` (which
+// reads the exact live viewport), so it's self-correcting regardless of any
+// model lag and never touches host scroll.
+
+/** Distance (screen px) a canvas element is allowed to sit from the viewport
+ *  edge after a reveal — a small inset so a just-revealed element isn't flush
+ *  against the frame. */
+export const REVEAL_MARGIN_PX = 40;
+
+/** Minimal 1-axis delta (screen px) to bring `[elStart, elEnd]` inside
+ *  `[viewStart + margin, viewEnd - margin]`. Returns 0 when already visible OR
+ *  when the element spans the viewport (bigger than the view — don't move,
+ *  matching `scrollIntoView({block:'nearest'})`). Sign matches `panBy`: a
+ *  positive delta pans the world content toward the end (down / right). */
+export function revealAxisDelta(
+  elStart: number,
+  elEnd: number,
+  viewStart: number,
+  viewEnd: number,
+  margin: number
+): number {
+  const vs = viewStart + margin;
+  const ve = viewEnd - margin;
+  if (elStart >= vs && elEnd <= ve) return 0; // fully visible
+  if (elStart <= vs && elEnd >= ve) return 0; // spans the viewport — leave it
+  if (elStart < vs) return vs - elStart; // off the start edge → pan toward end
+  if (elEnd > ve) return ve - elEnd; // off the end edge → pan toward start
+  return 0;
+}
+
+/** Pan the camera the minimal amount so `target` is visible inside `host`,
+ *  entirely through the world transform (never host scroll). No-op when the
+ *  element is already on-screen. Exported for the Task A3 regression test. */
+export function revealElementViaCamera(
+  host: HTMLElement,
+  target: HTMLElement,
+  controller: ViewportControllerHandle
+): void {
+  const hostRect = host.getBoundingClientRect();
+  const r = target.getBoundingClientRect();
+  if (r.width <= 0 && r.height <= 0) return; // detached / display:none — nothing to reveal
+  const dx = revealAxisDelta(r.left, r.right, hostRect.left, hostRect.right, REVEAL_MARGIN_PX);
+  const dy = revealAxisDelta(r.top, r.bottom, hostRect.top, hostRect.bottom, REVEAL_MARGIN_PX);
+  if (dx !== 0 || dy !== 0) controller.panBy(dx, dy);
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Router wire-up
 
@@ -1541,6 +1857,36 @@ function CanvasRouter({
   // consumes.
   const chromeCtx = useChromeVisibility();
 
+  // Task A2 (feature-element-editing-robustness) — host-scroll-0 invariant.
+  // `.dc-canvas` (overflow:hidden) and each `.dc-artboard-body` are the engine's
+  // clip layers; the camera lives entirely in the `.dc-world` transform, and
+  // both `writeTransform` and `__maudeCanvasRects` assume these hosts sit at
+  // scroll 0. A stray programmatic scroll (a residual scrollIntoView, focus()
+  // auto-scroll of an overflow:hidden ancestor) would shift the layout and
+  // desync the camera model — the Bug A/B class. Clamp any scroll on an ENGINE
+  // clip layer straight back to 0. Author scroll containers deeper inside a mock
+  // are left alone (the target check excludes them). `scroll` events don't
+  // bubble, so capture:true is what lets the host observe a descendant clip's
+  // scroll without also intercepting author-content scrolls (those fail the
+  // engine-clip test and pass through).
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const clamp = (e: Event) => {
+      const t = e.target;
+      if (!(t instanceof HTMLElement)) return;
+      const isEngineClip =
+        t === host ||
+        t.classList.contains('dc-artboard-body') ||
+        t.classList.contains('dc-artboard');
+      if (!isEngineClip) return;
+      if (t.scrollLeft !== 0) t.scrollLeft = 0;
+      if (t.scrollTop !== 0) t.scrollTop = 0;
+    };
+    host.addEventListener('scroll', clamp, true);
+    return () => host.removeEventListener('scroll', clamp, true);
+  }, [hostRef]);
+
   // Hover state drives the floating .dc-cv-halo--hover overlay. The overlay
   // itself reads getBoundingClientRect on every rAF tick to follow pan/zoom.
   const [hoverEl, setHoverEl] = useState<Element | null>(null);
@@ -1624,7 +1970,15 @@ function CanvasRouter({
                 artboardId: mm.artboardId ?? null,
               } as HoverTarget)
             );
-            (target as HTMLElement).scrollIntoView?.({ block: 'nearest', behavior: 'smooth' });
+            // Task A1 — reveal THROUGH the camera, not host scroll. The old
+            // `scrollIntoView` scrolled the overflow:hidden `.dc-canvas` /
+            // `.dc-artboard-body` clip layers, desyncing the `.dc-world`
+            // transform (Bugs A + B). `revealElementViaCamera` pans the world
+            // the minimal amount only when the element is off-screen.
+            const host = hostRef.current;
+            if (host && zoomController) {
+              revealElementViaCamera(host, target as HTMLElement, zoomController);
+            }
           }
         }
         return;
@@ -1766,7 +2120,7 @@ function CanvasRouter({
     };
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [selSet, annotSel, setTool, undoStack, zoomController, chromeCtx]);
+  }, [selSet, annotSel, setTool, undoStack, zoomController, chromeCtx, hostRef]);
 
   // Phase 12 (DDR-103) — double-click a LEAF-TEXT element (children all text
   // nodes) to edit its copy in place. Commit (blur / Enter) posts `dgn:edit-text`
@@ -1780,6 +2134,11 @@ function CanvasRouter({
     if (!host) return;
     let editing: HTMLElement | null = null;
     let original = '';
+    // DDR-150 P1 — the committed-but-unconfirmed edit, so a shell rejection
+    // (dynamic/mixed content the engine refuses) can revert the optimistic
+    // contenteditable text instead of letting it silently vanish on the next
+    // reload. Mirrors the reorder-failed revert below. Cleared on revert.
+    let lastTextCommit: { el: HTMLElement; original: string } | null = null;
     const onBlur = (): void => commitEdit(true);
     const onKey = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
@@ -1815,6 +2174,8 @@ function CanvasRouter({
       } catch {
         /* detached / cross-origin */
       }
+      // Stash the optimistic edit so a shell rejection can revert it (DDR-150 P1).
+      lastTextCommit = { el: elx, original };
       // Record onto the in-canvas undo stack so Cmd+Z reverts the rewrite. The
       // edit already posted above (record, don't re-run do()). before/after are
       // the trimmed bodies the edit-text endpoint persists.
@@ -1835,7 +2196,37 @@ function CanvasRouter({
       const stamped = (t?.closest?.('[data-cd-id]') as HTMLElement | null) ?? null;
       if (!stamped) return;
       const kids = Array.from(stamped.childNodes);
-      if (kids.length === 0 || !kids.every((n) => n.nodeType === 3)) return; // leaf-text only
+      const isLeafText = kids.length > 0 && kids.every((n) => n.nodeType === 3);
+      if (!isLeafText) {
+        // Task L6 — deep-select: a container (anything that isn't leaf-text)
+        // double-clicked here used to just bail — this is the exact gap the
+        // plan's deep-select task targets. Drill ONE level past whatever's
+        // currently selected along this click's own stamped-ancestor chain
+        // (Figma parity: repeated double-clicks walk progressively deeper);
+        // default to the outermost rung when nothing in the chain is
+        // currently selected. Mutually exclusive with text-edit below by
+        // construction — same capture-phase listener, same branch gate.
+        const chain = stampedChainToBody(stamped);
+        if (chain.length > 0) {
+          const sel = selSet.selected;
+          const currentId = sel.length === 1 ? sel[0]?.id : undefined;
+          const curIdx = currentId
+            ? chain.findIndex((n) => n.getAttribute('data-cd-id') === currentId)
+            : -1;
+          const next = curIdx >= 0 && curIdx + 1 < chain.length ? chain[curIdx + 1] : chain[0];
+          if (next) {
+            e.preventDefault();
+            e.stopPropagation();
+            const cdId = next.getAttribute('data-cd-id');
+            const artboardId =
+              (next.closest('[data-dc-screen]') as HTMLElement | null)?.getAttribute(
+                'data-dc-screen'
+              ) ?? null;
+            selSet.replace(hoverTargetToSelection({ el: next, cdId, artboardId } as HoverTarget));
+          }
+        }
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       editing = stamped;
@@ -1855,13 +2246,32 @@ function CanvasRouter({
         /* selection API unavailable */
       }
     };
+    // The shell rejected the last inline text edit — revert the optimistic
+    // contenteditable text so the canvas reflects the true (unsaved) source
+    // rather than a change that silently disappears on the next reload (DDR-150 P1).
+    const onEditReverted = (e: MessageEvent): void => {
+      if (e.source !== window.parent) return;
+      const m = e.data as { dgn?: string; op?: string; reason?: string } | null;
+      if (m?.dgn !== 'edit-reverted' || m.op !== 'text' || !lastTextCommit) return;
+      try {
+        lastTextCommit.el.textContent = lastTextCommit.original;
+      } catch {
+        /* detached — a subsequent reload re-syncs */
+      }
+      showCanvasToast(
+        `Couldn't save that text — ${m.reason || 'not editable inline'}. Edit it via chat.`
+      );
+      lastTextCommit = null;
+    };
     // Capture phase so we beat the fit-to-view dblclick handler.
     host.addEventListener('dblclick', onDbl, true);
+    window.addEventListener('message', onEditReverted);
     return () => {
       host.removeEventListener('dblclick', onDbl, true);
+      window.removeEventListener('message', onEditReverted);
       if (editing) teardown(editing);
     };
-  }, [hostRef]);
+  }, [hostRef, selSet]);
 
   // Cleanup any pending rAF on unmount.
   useEffect(
@@ -1955,10 +2365,13 @@ function CanvasRouter({
       <ElementMarqueeOverlay />
       <HoverHalo el={hoverEl} />
       <SelectionHalos />
+      <ElementResizeOverlay />
+      <SpacingHandlesOverlay />
       <ReorderDrag />
       <LayersLiveSync />
       <GroupBbox />
       <EqualSpacingHandles />
+      <MeasureOverlay />
       <ContextualToolbar />
       <MultiArtboardToolbar
         distributeArtboards={distributeArtboards}
@@ -2500,6 +2913,15 @@ function ReorderDrag() {
       /** Stamped [data-cd-id] nodes in their ORIGINAL order — for computing a
        *  reused instance's occurrence index even after the DOM reflowed. */
       snapshot: Element[] | null;
+      /** True when the dragged element is `position: absolute|fixed` — reorder
+       *  (sibling order) never changes where an out-of-flow element paints, so
+       *  these drags commit `left`/`top` instead of a tree move (see the
+       *  "absolute element snaps back" RCA). */
+      outOfFlow: boolean;
+      /** Pre-drag `left`/`top` (px, resolved via computed style) — only
+       *  meaningful when `outOfFlow`. */
+      originLeft: number;
+      originTop: number;
     };
     // Hover a stable spot this long and the layout reflows LIVE (the node moves
     // there while still floating with the cursor) — you see the result before
@@ -2511,6 +2933,9 @@ function ReorderDrag() {
     // The last committed drop, kept so a shell 'reorder-failed' can undo the
     // optimistic DOM move (the write was rejected → nothing persisted).
     let lastCommit: { el: HTMLElement; parent: HTMLElement; next: Element | null } | null = null;
+    // The last committed out-of-flow reposition, kept so a shell
+    // 'reposition-failed' can restore the pre-drag inline style.
+    let lastPosition: { el: HTMLElement; prevStyle: string | null } | null = null;
 
     const setHighlight = (el: HTMLElement | null) => {
       if (highlightEl === el) return;
@@ -2742,6 +3167,7 @@ function ReorderDrag() {
       hideDivider();
       suppressNextCanvasClick();
       drag = null;
+      setElementDragActive(false);
     };
 
     const onKeyDown = (e: KeyboardEvent) => {
@@ -2764,6 +3190,7 @@ function ReorderDrag() {
       if (!(t instanceof Node) || !el.contains(t)) return;
       // Candidate — do NOT claim yet (a plain click must still work). We only
       // become a drag once the pointer crosses the threshold in onMove.
+      const outOfFlowPos = getComputedStyle(el).position;
       drag = {
         pointerId: e.pointerId,
         startX: e.clientX,
@@ -2783,6 +3210,9 @@ function ReorderDrag() {
         settleKey: null,
         applied: null,
         snapshot: null,
+        outOfFlow: outOfFlowPos === 'absolute' || outOfFlowPos === 'fixed',
+        originLeft: 0,
+        originTop: 0,
       };
     };
 
@@ -2792,6 +3222,7 @@ function ReorderDrag() {
       if (!d.dragging) {
         if (!crossedDragThreshold(d.startX, d.startY, e.clientX, e.clientY)) return;
         d.dragging = true;
+        setElementDragActive(true);
         // Start floating: the element tracks the cursor via `transform`, so its
         // layout box stays reserved (origin shows empty space) and it stays in
         // the zoomed world (styling + scale intact). Divide the screen delta by
@@ -2807,7 +3238,18 @@ function ReorderDrag() {
         // reflect the pre-drag layout, not the reflowed one.
         d.snapshot = [...document.querySelectorAll('[data-cd-id]')];
         d.prevStyle = d.el.getAttribute('style');
-        if (getComputedStyle(d.el).position === 'static') d.el.style.position = 'relative';
+        if (d.outOfFlow) {
+          // Resolved (used) value in px — matches the unit space `left`/`top`
+          // are written back in, regardless of an ancestor's zoom transform
+          // (a CSS `transform: scale()` on the world doesn't change a
+          // descendant's own box-model values). `auto` (e.g. positioned via
+          // `right`/`bottom` instead) falls back to 0 — a known v1 limit.
+          const cs = getComputedStyle(d.el);
+          d.originLeft = Number.parseFloat(cs.left) || 0;
+          d.originTop = Number.parseFloat(cs.top) || 0;
+        } else if (getComputedStyle(d.el).position === 'static') {
+          d.el.style.position = 'relative';
+        }
         d.el.style.zIndex = '9990';
         d.el.style.pointerEvents = 'none'; // so elementFromPoint sees what's beneath
         d.el.style.opacity = '0.9';
@@ -2821,6 +3263,11 @@ function ReorderDrag() {
       const tx = (e.clientX - d.startX) / d.zoom;
       const ty = (e.clientY - d.startY) / d.zoom;
       d.el.style.transform = `translate(${tx}px, ${ty}px)`;
+      // Out-of-flow elements free-move with the cursor — there's no sibling
+      // "before/after" to hunt for (reordering an absolute/fixed element's
+      // JSX siblings wouldn't change where it paints), so skip the reorder
+      // target/divider/settle machinery entirely; onUp commits `left`/`top`.
+      if (d.outOfFlow) return;
       // Indicator + settle scheduling only — the DOM moves when a target stays
       // stable for SETTLE_MS (the live-reflow preview), never per-mousemove.
       const target = computeTarget(e.clientX, e.clientY, d);
@@ -2853,11 +3300,59 @@ function ReorderDrag() {
     const onUp = (e: PointerEvent) => {
       const d = drag;
       drag = null;
+      setElementDragActive(false);
       setHighlight(null);
       hideDivider();
       if (!d || e.pointerId !== d.pointerId) return;
       if (!d.dragging) return; // a plain click — leave it to native handlers
       clearSettle(d);
+      // Occurrence index of a node among its like-id siblings, read from the
+      // PRE-drag snapshot (the live DOM already reflowed for an in-flow drop). For
+      // a reused component (many DOM nodes share one internal id) the server maps
+      // this to the parent's distinct <Component> USAGE; 0 for a normal element.
+      // Shared by the reposition (Stage H3 — instance move stays local) + reorder
+      // posts below, so both anchor to the same instance the user dragged.
+      const occ = (node: Element | null): number => {
+        if (!node || !d.snapshot) return 0;
+        const nid = node.getAttribute('data-cd-id');
+        const at = d.snapshot.indexOf(node);
+        if (!nid || at < 0) return 0;
+        let c = 0;
+        for (let k = 0; k < at; k++) {
+          if (d.snapshot[k]?.getAttribute('data-cd-id') === nid) c++;
+        }
+        return c;
+      };
+      if (d.outOfFlow) {
+        // Un-float: restore the pre-drag inline style (drops the drag-only
+        // props AND the cursor-follow transform), then overlay the new
+        // left/top — same "unfloat" step as reorder, but the position
+        // sticks instead of reverting to `prevStyle`'s original left/top.
+        if (d.prevStyle == null) d.el.removeAttribute('style');
+        else d.el.setAttribute('style', d.prevStyle);
+        const dx = (d.lastX - d.startX) / d.zoom;
+        const dy = (d.lastY - d.startY) / d.zoom;
+        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return; // negligible — nothing to persist
+        const left = Math.round(d.originLeft + dx);
+        const top = Math.round(d.originTop + dy);
+        d.el.style.left = `${left}px`;
+        d.el.style.top = `${top}px`;
+        lastPosition = { el: d.el, prevStyle: d.prevStyle };
+        suppressNextCanvasClick();
+        window.parent.postMessage(
+          {
+            dgn: 'reposition-request',
+            id: d.cdId,
+            left,
+            top,
+            beforeLeft: Math.round(d.originLeft),
+            beforeTop: Math.round(d.originTop),
+            idIndex: occ(d.el),
+          },
+          '*'
+        );
+        return;
+      }
       // Un-float: restore the element's exact original inline style.
       if (d.prevStyle == null) d.el.removeAttribute('style');
       else d.el.setAttribute('style', d.prevStyle);
@@ -2876,21 +3371,6 @@ function ReorderDrag() {
       // never persisted doesn't linger until the next canvas switch.
       lastCommit = d.origin ? { el: d.el, parent: d.origin.parent, next: d.origin.next } : null;
       suppressNextCanvasClick();
-      // Occurrence index of each node among its like-id siblings, read from the
-      // PRE-drag snapshot (the live DOM already reflowed). For a reused component
-      // (many DOM nodes share one internal id) the server maps this to the
-      // parent's distinct <Component> usage; 0 for a normal element.
-      const occ = (node: Element | null): number => {
-        if (!node || !d.snapshot) return 0;
-        const id = node.getAttribute('data-cd-id');
-        const at = d.snapshot.indexOf(node);
-        if (!id || at < 0) return 0;
-        let c = 0;
-        for (let k = 0; k < at; k++) {
-          if (d.snapshot[k]?.getAttribute('data-cd-id') === id) c++;
-        }
-        return c;
-      };
       const refNode = d.target?.kind === 'inside' ? d.target.container : (d.target?.el ?? null);
       window.parent.postMessage(
         {
@@ -2918,15 +3398,29 @@ function ReorderDrag() {
       lastCommit = null;
     };
 
+    // The shell rejected the last reposition write — revert the optimistic
+    // left/top back to the pre-drag inline style.
+    const onRepositionFailed = (e: MessageEvent) => {
+      if (e.source !== window.parent) return;
+      const m = e.data as { dgn?: string } | null;
+      if (m?.dgn !== 'reposition-failed' || !lastPosition) return;
+      if (lastPosition.prevStyle == null) lastPosition.el.removeAttribute('style');
+      else lastPosition.el.setAttribute('style', lastPosition.prevStyle);
+      lastPosition = null;
+    };
+
     document.addEventListener('pointerdown', onDown, true);
     window.addEventListener('pointermove', onMove);
     window.addEventListener('pointerup', onUp);
     window.addEventListener('keydown', onKeyDown, true);
     window.addEventListener('message', onReorderFailed);
+    window.addEventListener('message', onRepositionFailed);
     return () => {
       if (drag) clearSettle(drag);
       setHighlight(null);
+      setElementDragActive(false);
       window.removeEventListener('message', onReorderFailed);
+      window.removeEventListener('message', onRepositionFailed);
       if (dividerEl) {
         dividerEl.remove();
         dividerEl = null;