@1agh/maude 0.37.0 → 0.38.0

package/apps/studio/canvas-shell.tsx

@@ -54,6 +54,7 @@ import {
   type EditSourcePayload,
 } from './commands/edit-source-command.ts';
 import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
+import { buildReorderRecord, type ReorderRevertFn } from './commands/reorder-command.ts';
 import {
   ContextMenuProvider,
   type ContextRegistry,
@@ -77,7 +78,12 @@ import {
 } from './dom-selection.ts';
 import { EqualSpacingHandles } from './equal-spacing-handles.tsx';
 import { ExportDialogProvider } from './export-dialog.tsx';
-import { type HoverTarget, resolveHoverTarget, useInputRouter } from './input-router.tsx';
+import {
+  crossedDragThreshold,
+  type HoverTarget,
+  resolveHoverTarget,
+  useInputRouter,
+} from './input-router.tsx';
 import { ElementMarqueeOverlay } from './marquee-overlay.tsx';
 import { ParticipantsChrome } from './participants-chrome.tsx';
 import { ToolPalette } from './tool-palette.tsx';
@@ -317,6 +323,30 @@ const HALO_CSS = `
   border-radius: 1px;
   cursor: text;
 }
+/* Phase 12.1 (DDR-138) — in-canvas drag-to-reorder (Figma-style). Dragging a
+   SELECTED element floats it with the cursor (via transform, applied inline —
+   its box stays reserved so the origin shows empty space, and it stays in the
+   zoomed world so styling + scale are preserved). A blue DIVIDER shows the
+   insertion point between siblings; a dashed RING shows a container it will nest
+   into. The DOM only changes on drop (no mid-drag reflow → no jank).
+   NOTE: keep this comment backtick-free — it is inside the HALO_CSS template
+   literal and a stray backtick closes it (DDR-067 §6). */
+.dc-cv-reorder-divider {
+  position: fixed;
+  z-index: 8;
+  pointer-events: none;
+  display: none;
+  background: var(--maude-hud-accent, #0d99ff);
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px var(--maude-chrome-bg-0, #ffffff);
+}
+/* Drop-target container ring — shown while the pointer is over the middle of a
+   container the dragged node would nest INTO. Outline only — no layout shift. */
+[data-cd-id].dc-cv-reorder-into {
+  outline: 2px dashed var(--maude-hud-accent, #0d99ff);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
 `.trim();
 
 function ensureHaloStyles(): void {
@@ -421,10 +451,36 @@ function serializeArtboardTree(root: Element): LayerNode[] {
   return walk(root);
 }
 
+// The artboard whose Layers tree the shell is currently showing. Set every time
+// we post a tree (request-layers / selection); the live MutationObserver
+// (LayersLiveSync) re-posts THIS artboard whenever its DOM structure changes, so
+// the panel mirrors the canvas both ways (drag/keyboard reorder + HMR reload)
+// with FRESH data-cd-ids — no stale-optimistic-tree drift.
+//
+// Stored on `window` (NOT a module `let`): a source edit triggers a SOFT HMR
+// that re-evaluates this module — a module-scoped var would reset to null and
+// the observer would bail right when it matters (post-reorder). The iframe
+// window survives the soft HMR, so the tracked artboard persists across it.
+function getLastLayersArtboardId(): string | null {
+  try {
+    return (
+      (window as unknown as { __maudeLastLayersArt?: string | null }).__maudeLastLayersArt ?? null
+    );
+  } catch {
+    return null;
+  }
+}
+
 function postLayersTree(artboardId: string | null | undefined): void {
   if (typeof document === 'undefined' || !artboardId) return;
   const root = document.querySelector(`[data-dc-screen="${CSS.escape(artboardId)}"]`);
   if (!root) return;
+  try {
+    (window as unknown as { __maudeLastLayersArt?: string | null }).__maudeLastLayersArt =
+      artboardId;
+  } catch {
+    /* no window */
+  }
   try {
     window.parent.postMessage(
       { dgn: 'layers-tree', artboardId, tree: serializeArtboardTree(root) },
@@ -435,6 +491,45 @@ function postLayersTree(artboardId: string | null | undefined): void {
   }
 }
 
+// Live-sync the Layers panel to the canvas DOM. A structural change anywhere in
+// the artboard (an in-canvas reorder's live reflow, a drop, or the HMR remount
+// after ANY source write) re-serializes + re-posts the tracked artboard's tree.
+// Chrome-only churn (halo / divider / pins / activity rim, all appended to body)
+// is ignored so we don't thrash. Debounced; the tree walk skips dev-server chrome
+// already (serializeArtboardTree).
+const LAYERS_CHROME_SEL =
+  '.dc-cv-halo, .dc-cv-group-bbox, .dgn-pin, .dc-cv-reorder-divider, .dc-cv-reorder-into, .dc-activity-rim, .dc-activity-scan, .dc-cv-reorder-lift';
+
+function LayersLiveSync() {
+  useEffect(() => {
+    if (typeof MutationObserver === 'undefined' || typeof document === 'undefined') return;
+    const isChrome = (n: Node): boolean =>
+      n.nodeType === 1 && !!(n as Element).closest?.(LAYERS_CHROME_SEL);
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const obs = new MutationObserver((records) => {
+      let structural = false;
+      for (const r of records) {
+        if (r.type !== 'childList') continue;
+        if (r.target.nodeType === 1 && (r.target as Element).closest?.(LAYERS_CHROME_SEL)) continue;
+        const touched = [...r.addedNodes, ...r.removedNodes];
+        if (touched.length && touched.every(isChrome)) continue; // pure chrome churn
+        structural = true;
+        break;
+      }
+      const art = getLastLayersArtboardId();
+      if (!structural || !art) return;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => postLayersTree(art), 90);
+    });
+    obs.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      if (timer) clearTimeout(timer);
+      obs.disconnect();
+    };
+  }, []);
+  return null;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Shell
 
@@ -837,14 +932,23 @@ function CanvasCore({
 // inverse — artboards kept their own DS theme and following was opt-in — which
 // produced the recurring "canvas dark / chrome light" mismatch.)
 //
-// DS theme-wrapper conventions vary (`.mdcc[data-theme]`, `.app[data-theme]`,
-// bare `[data-theme]`, …) and there's no reliable config flag, so we DETECT it
-// with a hidden computed-style probe: stamp a throwaway nested <div> with each
-// candidate `<class>[data-theme=light|dark]` and keep the first whose resolved
-// `--bg-0` differs between light and dark. Because the probe tests a NON-root
-// element, "supported" is exactly "stamping one artboard will work" — a DS that
-// only themes `:root[data-theme]` correctly reports unsupported (you genuinely
-// can't theme a single artboard there).
+// DS theme-wrapper conventions vary (`.maude[data-theme]`, `.mdcc[data-theme]`,
+// `.app[data-theme]`, bare `[data-theme]`, …) and there's no reliable config
+// flag, so we DETECT it with a hidden computed-style probe: stamp a throwaway
+// nested <div> with each candidate `<class>[data-theme=light|dark]` and keep the
+// first whose resolved `--bg-0` differs between light and dark. Because the probe
+// tests a NON-root element, "supported" is exactly "stamping one artboard will
+// work" — a DS that only themes `:root[data-theme]` correctly reports unsupported
+// (you genuinely can't theme a single artboard there).
+//
+// Candidate classes are DERIVED FROM THE LIVE DOM (2026-07-02): the DS's own
+// rootClass wrapper is already in the artboard content carrying `[data-theme]`
+// (e.g. `<div class="maude" data-theme="dark">`), so we read those class strings
+// straight off the page instead of guessing. A hardcoded guess list (`['', 'mdcc',
+// 'app']`) missed EVERY DS whose rootClass wasn't in it — including this repo's own
+// `.maude` — which greyed out Light/Dark on a DS that fully ships both themes. The
+// historical guesses stay as a trailing fallback for a canvas whose wrapper hasn't
+// mounted yet at probe time.
 
 interface DsThemeSupport {
   supported: boolean;
@@ -873,9 +977,23 @@ function detectDsThemeSupport(): DsThemeSupport {
       host.removeChild(el);
       return v;
     };
-    // Bare attribute first (cleanest), then the common class conventions.
+    // Derive candidate wrapper classes from the DS wrappers already in the DOM
+    // (elements carrying `data-theme` are the DS rootClass wrappers), trying both
+    // the full className ("maude di-root") and each individual token ("maude",
+    // "di-root"). Bare `''` first (cleanest), historical guesses last as a
+    // pre-mount fallback. A Set de-dupes; insertion order keeps DOM-derived first.
+    const candidates = new Set<string>(['']);
+    for (const el of Array.from(document.querySelectorAll('[data-theme]'))) {
+      const cn = (el as HTMLElement).className;
+      if (typeof cn === 'string' && cn.trim()) {
+        candidates.add(cn.trim());
+        for (const tok of cn.trim().split(/\s+/)) candidates.add(tok);
+      }
+    }
+    candidates.add('mdcc');
+    candidates.add('app');
     let found = fallback;
-    for (const cls of ['', 'mdcc', 'app']) {
+    for (const cls of candidates) {
       const light = read(cls, 'light');
       const dark = read(cls, 'dark');
       if (light && dark && light !== dark) {
@@ -1400,6 +1518,21 @@ function CanvasRouter({
     return () => undoSinks.setSink('editSourceApplyFn', undefined);
   }, [undoSinks]);
 
+  // Phase 12.1 — reorder undo. Same origin-split shape as editSourceApplyFn:
+  // the reorder-revert write is main-origin-only, so the command's do()/undo()
+  // posts `dgn:'reorder-revert'` and the shell calls /_api/reorder-revert.
+  useEffect(() => {
+    const revertFn: ReorderRevertFn = (revert) => {
+      try {
+        window.parent.postMessage({ dgn: 'reorder-revert', ...revert }, '*');
+      } catch {
+        /* detached / cross-origin teardown — nothing to revert */
+      }
+    };
+    undoSinks.setSink('reorderRevertFn', revertFn);
+    return () => undoSinks.setSink('reorderRevertFn', undefined);
+  }, [undoSinks]);
+
   // Shell View-menu zoom bridge (dgn:'zoom') — same controller the zoom pill uses.
   const zoomController = useViewportControllerContext();
   // Shell View-menu chrome-visibility bridge (dgn:'view-chrome') — minimap /
@@ -1557,7 +1690,21 @@ function CanvasRouter({
       // a hostile canvas self-post must not be able to plant fake undo entries.
       if (m.dgn === 'record-edit') {
         if (e.source !== window.parent) return;
-        const p = (m as { payload?: Partial<EditSourcePayload> }).payload;
+        const p = (m as { payload?: Partial<EditSourcePayload> & { seq?: number; label?: string } })
+          .payload;
+        // Phase 12.1 — a landed reorder (drag / keyboard move). The shell POSTed
+        // /_api/reorder already; record so Cmd+Z reverts via the server's log.
+        if (p && (p as { op?: string }).op === 'reorder') {
+          if (typeof p.canvas === 'string' && typeof p.seq === 'number') {
+            undoStack.record(
+              buildReorderRecord(
+                { canvas: p.canvas, seq: p.seq },
+                typeof p.label === 'string' ? p.label : undefined
+              )
+            );
+          }
+          return;
+        }
         if (
           p &&
           (p.op === 'css' || p.op === 'text' || p.op === 'attr') &&
@@ -1808,6 +1955,8 @@ function CanvasRouter({
       <ElementMarqueeOverlay />
       <HoverHalo el={hoverEl} />
       <SelectionHalos />
+      <ReorderDrag />
+      <LayersLiveSync />
       <GroupBbox />
       <EqualSpacingHandles />
       <ContextualToolbar />
@@ -2269,6 +2418,529 @@ function SelectionHalos() {
   return <div ref={containerRef} aria-hidden="true" />;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// ReorderDrag (Phase 12.1, DDR-138) — in-canvas drag-to-reorder, Figma-style.
+// Grab the SELECTED element and drag: it FLOATS with the cursor (a `transform`
+// applied inline, so its layout box stays reserved — the origin shows empty
+// space — and it stays inside the zoomed world, keeping its styling + scale; we
+// divide the screen delta by the element's own zoom so it tracks 1:1). The drop
+// zone is the WHOLE hovered element split 50/50 — top/left half inserts BEFORE,
+// bottom/right half AFTER (axis = parent flex direction) — so there's a wide hit
+// area, not a thin divider to aim at; a blue DIVIDER marks the resulting seam, a
+// dashed RING marks an EMPTY container it would nest INTO. Hover a stable target
+// for SETTLE_MS and the layout reflows LIVE
+// (the node moves there, still floating — you see the result before committing);
+// per-mousemove the DOM never changes, so there's no jank / ping-pong. DROP
+// commits via `dgn:'reorder-request'` to the shell (DDR-054: untrusted canvas
+// REQUESTS, main-origin shell WRITES → source write → HMR remount renders the
+// committed order); ESC aborts and restores the origin.
+//
+// Headless: a document-capture pointerdown that only ACTS when a bare drag
+// starts on the single selected element with the move tool — a plain click and
+// every other gesture (Cmd-select, marquee, pan, annotation, native button
+// clicks) pass through untouched. Threshold-gated so a click is never a drag.
+
+/** Read a usable `data-cd-id` off a live node, skipping dev-server chrome. */
+function reorderCdId(node: Node | null): string | null {
+  if (node?.nodeType !== 1) return null;
+  const el = node as Element;
+  if (el.closest('.dc-cv-halo, .dc-cv-group-bbox, .dgn-pin')) return null;
+  return el.getAttribute('data-cd-id');
+}
+
+/** Suppress the synthetic click that fires after a drag so the drag doesn't
+ *  also activate a button / link inside the dragged element. */
+function suppressNextCanvasClick(): void {
+  const onClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    cleanup();
+  };
+  const cleanup = () => {
+    document.removeEventListener('click', onClick, true);
+    clearTimeout(t);
+  };
+  const t = setTimeout(cleanup, 350);
+  document.addEventListener('click', onClick, true);
+}
+
+function ReorderDrag() {
+  const { selected } = useSelectionSet();
+  const { tool } = useToolMode();
+  // The document pointerdown listener is stable; it reads the latest selection +
+  // tool from refs so it doesn't need re-attaching on every selection change.
+  const selRef = useRef(selected);
+  selRef.current = selected;
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
+
+  useEffect(() => {
+    type Target = { kind: 'before' | 'after' | 'inside'; el: HTMLElement; container: HTMLElement };
+    type Drag = {
+      pointerId: number;
+      startX: number;
+      startY: number;
+      lastX: number;
+      lastY: number;
+      grabDX: number;
+      grabDY: number;
+      el: HTMLElement;
+      cdId: string;
+      zoom: number;
+      prevStyle: string | null;
+      dragging: boolean;
+      target: Target | null;
+      /** Where the node lived at lift — for the Esc restore. */
+      origin: { parent: HTMLElement; next: Element | null } | null;
+      /** Pending settle timer — fires the live-reflow preview. */
+      settle: ReturnType<typeof setTimeout> | null;
+      settleKey: string | null;
+      /** The last PREVIEWED (already reflowed) drop, committed on release. */
+      applied: { refId: string; position: 'before' | 'after' | 'inside-end' } | null;
+      /** 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;
+    };
+    // 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
+    // committing. Drop commits; Esc restores the origin.
+    const SETTLE_MS = 500;
+    let drag: Drag | null = null;
+    let highlightEl: HTMLElement | null = null;
+    let dividerEl: HTMLDivElement | null = null;
+    // 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;
+
+    const setHighlight = (el: HTMLElement | null) => {
+      if (highlightEl === el) return;
+      if (highlightEl) highlightEl.classList.remove('dc-cv-reorder-into');
+      highlightEl = el;
+      if (highlightEl) highlightEl.classList.add('dc-cv-reorder-into');
+    };
+
+    const hideDivider = () => {
+      if (dividerEl) dividerEl.style.display = 'none';
+    };
+    const showDivider = (t: Target) => {
+      if (!dividerEl) {
+        dividerEl = document.createElement('div');
+        dividerEl.className = 'dc-cv-reorder-divider';
+        dividerEl.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(dividerEl);
+      }
+      const r = t.el.getBoundingClientRect();
+      const pcs = getComputedStyle(t.container);
+      const isRow = pcs.display.includes('flex') && pcs.flexDirection.startsWith('row');
+      const el = dividerEl;
+      el.style.display = 'block';
+      if (isRow) {
+        const cx = t.kind === 'before' ? r.left : r.right;
+        el.style.left = `${Math.round(cx) - 1}px`;
+        el.style.top = `${Math.round(r.top)}px`;
+        el.style.width = '2px';
+        el.style.height = `${Math.round(r.height)}px`;
+      } else {
+        const cy = t.kind === 'before' ? r.top : r.bottom;
+        el.style.left = `${Math.round(r.left)}px`;
+        el.style.top = `${Math.round(cy) - 1}px`;
+        el.style.width = `${Math.round(r.width)}px`;
+        el.style.height = '2px';
+      }
+    };
+
+    // A genuinely EMPTY container (no element children, no text) is the only case
+    // where before/after can't express "put it in here" — so the whole box nests
+    // inside. Everything else splits 50/50 (see computeTarget).
+    const isEmptyContainer = (el: HTMLElement): boolean =>
+      el.childElementCount === 0 && !el.textContent?.trim();
+
+    // Where would the node drop right now? Pure read — never mutates the DOM
+    // (that only happens on drop), which is what keeps the drag jank-free.
+    // The drop zone is the WHOLE element split 50/50: top/left half → before,
+    // bottom/right half → after (axis follows the parent's flex direction). No
+    // thin central "nest" band eating the target — the entire element is an easy,
+    // wide hit. (Nesting into a container that HAS content = drop onto one of its
+    // children; nesting into an EMPTY one = drop anywhere on it; deep nesting =
+    // the Layers panel's Alt+Shift+↑/↓.)
+    const computeTarget = (x: number, y: number, d: Drag): Target | null => {
+      let E = document.elementFromPoint(x, y)?.closest('[data-cd-id]') as HTMLElement | null;
+      while (E && (E === d.el || d.el.contains(E))) {
+        E = E.parentElement
+          ? (E.parentElement.closest('[data-cd-id]') as HTMLElement | null)
+          : null;
+      }
+      if (!E || !reorderCdId(E)) return null;
+      // While inside the dragged node's own parent, climb to that parent's direct
+      // child so hovering a sibling's inner content still targets the sibling
+      // (no deep-hit). Outside it, E stays deep → reparent OUT / INTO others.
+      let anchor: HTMLElement = E;
+      const sib = d.el.parentElement;
+      if (sib?.contains(E)) {
+        let s: HTMLElement | null = E;
+        while (s && s.parentElement !== sib) s = s.parentElement as HTMLElement | null;
+        if (s && s !== d.el && reorderCdId(s)) anchor = s;
+      }
+      if (isEmptyContainer(anchor) && !d.el.contains(anchor)) {
+        return { kind: 'inside', el: anchor, container: anchor };
+      }
+      const parent = anchor.parentElement;
+      const r = anchor.getBoundingClientRect();
+      const pcs = parent ? getComputedStyle(parent) : null;
+      const isRow = !!pcs && pcs.display.includes('flex') && pcs.flexDirection.startsWith('row');
+      const frac = isRow ? (x - r.left) / (r.width || 1) : (y - r.top) / (r.height || 1);
+      // Nest zone: the middle third of a CONTAINER (element that holds children)
+      // nests INTO it. This is the only way to drop a node into a non-empty
+      // container — before/after only ever inserts as a SIBLING, so without it a
+      // node accidentally lifted to the root could never be dragged back into a
+      // child div. Leaves keep the full 50/50 (no nest band eating the target).
+      if (anchor.childElementCount > 0 && frac >= 0.34 && frac <= 0.66 && !d.el.contains(anchor)) {
+        return { kind: 'inside', el: anchor, container: anchor };
+      }
+      if (!parent || parent === d.el || d.el.contains(parent)) return null;
+      return { kind: frac < 0.5 ? 'before' : 'after', el: anchor, container: parent };
+    };
+
+    const targetToDrop = (
+      t: Target
+    ): { refId: string; position: 'before' | 'after' | 'inside-end' } | null => {
+      if (t.kind === 'inside') {
+        const id = reorderCdId(t.container);
+        return id ? { refId: id, position: 'inside-end' } : null;
+      }
+      const id = reorderCdId(t.el);
+      return id ? { refId: id, position: t.kind } : null;
+    };
+
+    // FLIP the siblings a reflow displaces so they GLIDE to their new slots
+    // instead of jumping: record first-positions, run the DOM move, invert via
+    // transform, then play to zero. Scoped to direct children of the affected
+    // parent(s); descendants ride along. The dragged node is excluded — it has
+    // its own cursor-following transform. Deltas divide by each element's own
+    // zoom (screen px → world px), same math as the float. Respects
+    // prefers-reduced-motion (skips straight to the end state).
+    const REFLOW_MS = 180;
+    const animateReflow = (moved: HTMLElement, act: () => void) => {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        act();
+        return;
+      }
+      const first = new Map<HTMLElement, DOMRect>();
+      const collect = (parent: Element | null) => {
+        if (!parent) return;
+        for (const c of Array.from(parent.children)) {
+          const el = c as HTMLElement;
+          if (el === moved || first.has(el)) continue;
+          first.set(el, el.getBoundingClientRect());
+        }
+      };
+      collect(moved.parentElement);
+      act();
+      collect(moved.parentElement); // reparent case — new siblings shift too
+      const anims: Array<{ el: HTMLElement; prevTransform: string; prevTransition: string }> = [];
+      for (const [el, r0] of first) {
+        if (!el.isConnected) continue;
+        const r1 = el.getBoundingClientRect();
+        const dx = r0.left - r1.left;
+        const dy = r0.top - r1.top;
+        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;
+        const zoom = el.offsetWidth ? r1.width / el.offsetWidth : 1;
+        anims.push({ el, prevTransform: el.style.transform, prevTransition: el.style.transition });
+        el.style.transition = 'none';
+        el.style.transform = `translate(${dx / zoom}px, ${dy / zoom}px)`;
+      }
+      if (!anims.length) return;
+      void document.body.offsetWidth; // flush the inverted state
+      for (const a of anims) {
+        a.el.style.transition = `transform ${REFLOW_MS}ms ease`;
+        a.el.style.transform = 'translate(0px, 0px)';
+      }
+      setTimeout(() => {
+        for (const a of anims) {
+          if (!a.el.isConnected) continue;
+          a.el.style.transition = a.prevTransition;
+          a.el.style.transform = a.prevTransform;
+        }
+      }, REFLOW_MS + 40);
+    };
+
+    // Move the node to match the target (used by the settle preview AND the
+    // final drop); the source write + HMR remount then re-render the committed
+    // order.
+    const applyDrop = (el: HTMLElement, t: Target) => {
+      try {
+        if (t.kind === 'inside') t.container.appendChild(el);
+        else if (t.kind === 'before') t.container.insertBefore(el, t.el);
+        else {
+          let ref = t.el.nextElementSibling;
+          if (ref === el) ref = el.nextElementSibling;
+          t.container.insertBefore(el, ref);
+        }
+      } catch {
+        /* detached — remount re-syncs */
+      }
+    };
+
+    // Is the target where the node ALREADY sits? True after a settle preview
+    // moved it — without this the timer would re-fire forever and the divider
+    // would point at the node's own slot.
+    const isCurrentPosition = (t: Target, d: Drag): boolean => {
+      if (t.kind === 'before')
+        return t.container === d.el.parentElement && t.el === d.el.nextElementSibling;
+      if (t.kind === 'after')
+        return t.container === d.el.parentElement && t.el === d.el.previousElementSibling;
+      return t.container === d.el.parentElement && t.container.lastElementChild === d.el;
+    };
+
+    const clearSettle = (d: Drag) => {
+      if (d.settle != null) clearTimeout(d.settle);
+      d.settle = null;
+      d.settleKey = null;
+    };
+
+    // The live reflow: move the node to the hovered target NOW (the origin gap
+    // closes, a gap opens at the target) while it keeps floating under the
+    // cursor — re-anchor the transform to the node's new layout slot so it
+    // doesn't visually jump.
+    const applyPreview = (d: Drag) => {
+      d.settle = null;
+      d.settleKey = null;
+      const t = d.target;
+      if (!t?.el.isConnected) return;
+      const drop = targetToDrop(t);
+      if (!drop) return;
+      animateReflow(d.el, () => applyDrop(d.el, t));
+      d.applied = drop;
+      d.el.style.transform = 'none';
+      const rect = d.el.getBoundingClientRect();
+      d.zoom = d.el.offsetWidth ? rect.width / d.el.offsetWidth : 1;
+      const tx = (d.lastX - d.grabDX - rect.left) / d.zoom;
+      const ty = (d.lastY - d.grabDY - rect.top) / d.zoom;
+      d.el.style.transform = `translate(${tx}px, ${ty}px)`;
+      // Keep onMove's (client - start)/zoom math consistent from the new anchor.
+      d.startX = d.lastX - tx * d.zoom;
+      d.startY = d.lastY - ty * d.zoom;
+      setHighlight(null);
+      hideDivider();
+    };
+
+    // Esc — abort the drag: put the node back where it was lifted from and
+    // restore its exact inline style. Nothing is committed.
+    const cancelDrag = (d: Drag) => {
+      clearSettle(d);
+      const origin = d.origin;
+      if (d.applied && origin) {
+        try {
+          animateReflow(d.el, () => origin.parent.insertBefore(d.el, origin.next));
+        } catch {
+          /* origin gone — remount re-syncs */
+        }
+      }
+      if (d.prevStyle == null) d.el.removeAttribute('style');
+      else d.el.setAttribute('style', d.prevStyle);
+      setHighlight(null);
+      hideDivider();
+      suppressNextCanvasClick();
+      drag = null;
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || !drag || !drag.dragging) return;
+      e.preventDefault();
+      e.stopImmediatePropagation(); // don't also clear the selection
+      cancelDrag(drag);
+    };
+
+    const onDown = (e: PointerEvent) => {
+      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      if (toolRef.current !== 'move') return;
+      const sel = selRef.current;
+      const one = sel && sel.length === 1 ? sel[0] : null;
+      const cdId = one && typeof one.id === 'string' ? one.id : null;
+      if (!cdId || !one) return;
+      const el = resolveSelectionEl(document, one) as HTMLElement | null;
+      if (!el) return;
+      const t = e.target;
+      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.
+      drag = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        lastX: e.clientX,
+        lastY: e.clientY,
+        grabDX: 0,
+        grabDY: 0,
+        el,
+        cdId,
+        zoom: 1,
+        prevStyle: null,
+        dragging: false,
+        target: null,
+        origin: null,
+        settle: null,
+        settleKey: null,
+        applied: null,
+        snapshot: null,
+      };
+    };
+
+    const onMove = (e: PointerEvent) => {
+      const d = drag;
+      if (!d || e.pointerId !== d.pointerId) return;
+      if (!d.dragging) {
+        if (!crossedDragThreshold(d.startX, d.startY, e.clientX, e.clientY)) return;
+        d.dragging = 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
+        // the element's own zoom (screen size / natural size) so it tracks 1:1.
+        const rect = d.el.getBoundingClientRect();
+        d.zoom = d.el.offsetWidth ? rect.width / d.el.offsetWidth : 1;
+        d.grabDX = d.startX - rect.left;
+        d.grabDY = d.startY - rect.top;
+        d.origin = d.el.parentElement
+          ? { parent: d.el.parentElement, next: d.el.nextElementSibling }
+          : null;
+        // Snapshot the original stamped-node order NOW — occurrence indices must
+        // 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';
+        d.el.style.zIndex = '9990';
+        d.el.style.pointerEvents = 'none'; // so elementFromPoint sees what's beneath
+        d.el.style.opacity = '0.9';
+        d.el.style.cursor = 'grabbing';
+        d.el.style.boxShadow = '0 10px 28px rgba(0, 0, 0, 0.28)';
+        d.el.style.willChange = 'transform';
+        d.el.style.transition = 'none';
+      }
+      d.lastX = e.clientX;
+      d.lastY = e.clientY;
+      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)`;
+      // 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);
+      const current = target ? isCurrentPosition(target, d) : false;
+      d.target = target && !current ? target : null;
+      if (!d.target) {
+        clearSettle(d);
+        setHighlight(null);
+        hideDivider();
+      } else {
+        const t = d.target;
+        if (t.kind === 'inside') {
+          hideDivider();
+          setHighlight(t.container);
+        } else {
+          setHighlight(null);
+          showDivider(t);
+        }
+        const key = `${t.kind}:${reorderCdId(t.kind === 'inside' ? t.container : t.el) ?? ''}`;
+        if (key !== d.settleKey) {
+          if (d.settle != null) clearTimeout(d.settle);
+          d.settleKey = key;
+          d.settle = setTimeout(() => {
+            if (drag === d && d.dragging) applyPreview(d);
+          }, SETTLE_MS);
+        }
+      }
+    };
+
+    const onUp = (e: PointerEvent) => {
+      const d = drag;
+      drag = null;
+      setHighlight(null);
+      hideDivider();
+      if (!d || e.pointerId !== d.pointerId) return;
+      if (!d.dragging) return; // a plain click — leave it to native handlers
+      clearSettle(d);
+      // 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);
+      // Commit priority: a fresh (un-settled) target under the cursor wins;
+      // otherwise the last settled preview (the layout the user is LOOKING at).
+      let drop = d.target ? targetToDrop(d.target) : null;
+      if (drop && d.target) {
+        const t = d.target;
+        animateReflow(d.el, () => applyDrop(d.el, t)); // immediate result; the remount confirms it
+      } else if (d.applied) {
+        drop = d.applied; // DOM already sits there from the preview
+      }
+      if (!drop) return; // dropped on empty space, never previewed — no move
+      // Remember where this node came FROM: if the shell reports the write was
+      // rejected (dgn:'reorder-failed'), we put it back so a phantom move that
+      // 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(
+        {
+          dgn: 'reorder-request',
+          id: d.cdId,
+          refId: drop.refId,
+          position: drop.position,
+          idIndex: occ(d.el),
+          refIndex: occ(refNode),
+        },
+        '*'
+      );
+    };
+
+    // The shell rejected the last reorder — revert the optimistic DOM move.
+    const onReorderFailed = (e: MessageEvent) => {
+      if (e.source !== window.parent) return;
+      const m = e.data as { dgn?: string } | null;
+      if (m?.dgn !== 'reorder-failed' || !lastCommit) return;
+      try {
+        lastCommit.parent.insertBefore(lastCommit.el, lastCommit.next);
+      } catch {
+        /* origin detached — a subsequent load re-syncs */
+      }
+      lastCommit = null;
+    };
+
+    document.addEventListener('pointerdown', onDown, true);
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('message', onReorderFailed);
+    return () => {
+      if (drag) clearSettle(drag);
+      setHighlight(null);
+      window.removeEventListener('message', onReorderFailed);
+      if (dividerEl) {
+        dividerEl.remove();
+        dividerEl = null;
+      }
+      document.removeEventListener('pointerdown', onDown, true);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, []);
+
+  return null;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // GroupBbox — dashed outline around the union of selected elements when N > 1.