@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/use-element-resize.tsx

@@ -0,0 +1,732 @@
+/**
+ * @file       use-element-resize.tsx — feature-element-editing-robustness Stage D
+ * @scope      apps/studio/use-element-resize.tsx
+ * @purpose    On-canvas drag-resize for the single selected CANVAS ELEMENT
+ *             (an `[data-cd-id]` node in an artboard), the DOM counterpart of
+ *             `use-annotation-resize.tsx` (which targets the SVG annotation
+ *             model). Renders 8 screen-space handles (4 corner + 4 edge) that
+ *             stay a constant 8 px at any zoom, with FigJam modifier grammar:
+ *             Shift = lock aspect ratio, Alt = resize from center. On release it
+ *             commits `width`/`height` (+ `left`/`top` for a top/left-edge drag
+ *             on an out-of-flow element) through the SAME `reposition-request`-
+ *             style lane the coordinate drag uses (untrusted canvas REQUESTS,
+ *             main-origin shell WRITES via `/_api/edit-css` — DDR-054).
+ *
+ *             Composition with ReorderDrag: the handles are `position:fixed`
+ *             overlay divs OUTSIDE the artboard, so ReorderDrag's `el.contains
+ *             (target)` gate (canvas-shell) never fires for a handle pointerdown
+ *             — a body drag still moves via reorder/reposition, a handle drag
+ *             resizes.
+ *
+ *             In-flow elements resize by writing explicit `width`/`height` only
+ *             (NEVER convert-to-absolute — out of scope); an out-of-flow
+ *             (absolute/fixed) element additionally moves `left`/`top` when the
+ *             top/left edge is dragged, so the resize feels origin-correct.
+ */
+
+import { type ReactNode, useCallback, useEffect, useRef } from 'react';
+import { globalCdOccurrence, resolveSelectionEl } from './dom-selection.ts';
+import { isElementDragActive } from './drag-state.ts';
+import { useSelectionSet } from './use-selection-set.tsx';
+import { useToolMode } from './use-tool-mode.tsx';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Handle CSS — mirrors the `.dc-annot-resize-handle` recipe (DS `.sel-handle`:
+// accent square, accent-fg hairline border, radius-xs). Kept as its own class so
+// it doesn't depend on the annotation overlay being mounted. Comment must stay
+// backtick-free — it lives inside the template literal.
+
+const EL_RESIZE_CSS = `
+.dc-el-resize-handle {
+  position: fixed;
+  width: 8px;
+  height: 8px;
+  background: var(--maude-hud-accent, oklch(0.680 0.180 268));
+  border: 1px solid var(--maude-hud-accent-fg, oklch(0.180 0.030 268));
+  border-radius: 3px;
+  z-index: 6;
+  pointer-events: auto;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dc-el-resize-handle[data-corner="nw"], .dc-el-resize-handle[data-corner="se"] { cursor: nwse-resize !important; }
+.dc-el-resize-handle[data-corner="ne"], .dc-el-resize-handle[data-corner="sw"] { cursor: nesw-resize !important; }
+.dc-el-resize-handle[data-corner="n"], .dc-el-resize-handle[data-corner="s"] { cursor: ns-resize !important; width: 14px; height: 6px; }
+.dc-el-resize-handle[data-corner="e"], .dc-el-resize-handle[data-corner="w"] { cursor: ew-resize !important; width: 6px; height: 14px; }
+/* Rotation lives in INVISIBLE zones just outside each CORNER (FigJam / mirrors
+   the annotation .dc-annot-rotate-zone) — the cursor flips to a rotate glyph and
+   dragging turns the element. z-index BELOW the corner squares so the resize
+   square wins on the inner overlap; the surrounding ring rotates. */
+.dc-el-resize-handle[data-corner^="rot-"] {
+  width: 20px; height: 20px;
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  z-index: 5;
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='white' stroke-width='4' d='M4.8 13 A6 6 0 1 1 15.2 13 M2.2 10.8 L4.8 13 L7.4 10.9 M12.6 10.9 L15.2 13 L17.8 10.8'/%3E%3Cpath stroke='black' stroke-width='1.8' d='M4.8 13 A6 6 0 1 1 15.2 13 M2.2 10.8 L4.8 13 L7.4 10.9 M12.6 10.9 L15.2 13 L17.8 10.8'/%3E%3C/g%3E%3C/svg%3E") 10 10, alias !important;
+}
+/* Task L7 — live W×H (+ X,Y for an out-of-flow edge drag) readout pill, shown
+   only WHILE a resize is in flight (see the tick() gate below). */
+.dc-el-resize-readout {
+  position: fixed;
+  transform: translate(-50%, 12px);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-size: 11px;
+  padding: 3px 7px;
+  background: var(--maude-hud-accent, oklch(0.680 0.180 268));
+  color: var(--maude-hud-accent-fg, oklch(0.180 0.030 268));
+  border-radius: 4px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  z-index: 6;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* INV-2 — reveal/settle collapses to 1ms, same idiom as every other overlay
+   stylesheet in this codebase (equal-spacing-handles.tsx, etc). This overlay
+   is mounted inside the canvas iframe's OWN document, which never loads the
+   shell's 1-tokens-maude.css — the prefers-reduced-motion guard has to be
+   re-declared per injected stylesheet, it doesn't cascade in from the shell.
+   Comment stays backtick-free — it lives inside the template literal. */
+@media (prefers-reduced-motion: reduce) {
+  .dc-el-resize-handle, .dc-el-resize-readout { transition-duration: 1ms; }
+}
+`.trim();
+
+function ensureElementResizeStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-el-resize-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-el-resize-css';
+  s.textContent = EL_RESIZE_CSS;
+  document.head.appendChild(s);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pure resize math — unit-tested without a DOM.
+
+export type ElResizeCorner = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+
+/** The 8 handles in a stable render order. */
+export const EL_RESIZE_CORNERS: ElResizeCorner[] = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+
+export interface ElResizeStart {
+  /** World-px border-box dimensions at drag start. */
+  w: number;
+  h: number;
+  /** Authored inline `left`/`top` (world px), or NaN when not present. */
+  left: number;
+  top: number;
+}
+
+export interface ElResizeMods {
+  aspect: boolean; // Shift → lock start ratio
+  center: boolean; // Alt → resize from center
+}
+
+export interface ElResizeFlags {
+  /** True only for an out-of-flow element with an inline `left` — so a west-edge
+   *  drag may move the origin. In-flow elements resize from their layout origin
+   *  (width/height only), never moving left/top. */
+  canMoveLeft: boolean;
+  canMoveTop: boolean;
+}
+
+export interface ElResizeResult {
+  width: number;
+  height: number;
+  left?: number;
+  top?: number;
+}
+
+function edgeFlags(corner: ElResizeCorner) {
+  return {
+    movesLeft: corner === 'nw' || corner === 'w' || corner === 'sw',
+    movesRight: corner === 'ne' || corner === 'e' || corner === 'se',
+    movesTop: corner === 'nw' || corner === 'n' || corner === 'ne',
+    movesBottom: corner === 'sw' || corner === 's' || corner === 'se',
+  };
+}
+
+const round = (n: number) => Math.round(n * 100) / 100;
+const MIN_SIZE = 1;
+
+/**
+ * Compute the target box for a resize drag. `dxW`/`dyW` are the cursor deltas in
+ * WORLD units (screen delta ÷ the element's own render zoom). The result carries
+ * `left`/`top` ONLY when the corresponding edge moved AND the flag permits it
+ * (out-of-flow with an inline value) — so an in-flow element never gets a left/
+ * top write. Left/top are derived by holding the OPPOSITE edge fixed (Figma
+ * grammar), which is exact for both plain and aspect-locked resizes.
+ */
+export function computeElementResize(
+  corner: ElResizeCorner,
+  start: ElResizeStart,
+  dxW: number,
+  dyW: number,
+  mods: ElResizeMods,
+  flags: ElResizeFlags
+): ElResizeResult {
+  const { movesLeft, movesRight, movesTop, movesBottom } = edgeFlags(corner);
+  const center = mods.center;
+
+  let width = start.w;
+  let height = start.h;
+  if (movesRight) width = start.w + (center ? 2 * dxW : dxW);
+  else if (movesLeft) width = start.w - (center ? 2 * dxW : dxW);
+  if (movesBottom) height = start.h + (center ? 2 * dyW : dyW);
+  else if (movesTop) height = start.h - (center ? 2 * dyW : dyW);
+
+  // Aspect lock (Shift): keep the start ratio. Corner → drive by the axis with
+  // the larger relative change; single edge → scale the other dimension.
+  if (mods.aspect && start.w > 0 && start.h > 0) {
+    const ratio = start.w / start.h;
+    const isCorner = (movesLeft || movesRight) && (movesTop || movesBottom);
+    if (isCorner) {
+      const relW = Math.abs(width - start.w) / start.w;
+      const relH = Math.abs(height - start.h) / start.h;
+      if (relW >= relH) height = width / ratio;
+      else width = height * ratio;
+    } else if (movesLeft || movesRight) {
+      height = width / ratio;
+    } else if (movesTop || movesBottom) {
+      width = height * ratio;
+    }
+  }
+
+  if (width < MIN_SIZE) width = MIN_SIZE;
+  if (height < MIN_SIZE) height = MIN_SIZE;
+
+  const result: ElResizeResult = { width: round(width), height: round(height) };
+  // Derive left/top from the FINAL size by holding the opposite edge fixed.
+  if (center) {
+    if (flags.canMoveLeft && (movesLeft || movesRight))
+      result.left = round(start.left + (start.w - width) / 2);
+    if (flags.canMoveTop && (movesTop || movesBottom))
+      result.top = round(start.top + (start.h - height) / 2);
+  } else {
+    if (flags.canMoveLeft && movesLeft) result.left = round(start.left + start.w - width);
+    if (flags.canMoveTop && movesTop) result.top = round(start.top + start.h - height);
+  }
+  return result;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Rotation math (Task L8) — free-hand rotate handle. All pure, unit-tested.
+
+/** Rotation angle (deg) from a CSS `transform` matrix (`none`/`matrix(...)`). */
+export function rotationDegFromMatrix(transform: string | null | undefined): number {
+  if (!transform || transform === 'none') return 0;
+  const m = /matrix\(([^)]+)\)/.exec(transform);
+  if (!m) return 0;
+  const parts = m[1].split(',').map(Number);
+  const a = parts[0] ?? 1;
+  const b = parts[1] ?? 0;
+  return Math.round(Math.atan2(b, a) * (180 / Math.PI) * 100) / 100;
+}
+
+/** Uniform scale from a CSS `transform` matrix (the `.dc-world` zoom). 1 when none. */
+export function scaleFromMatrix(transform: string | null | undefined): number {
+  if (!transform || transform === 'none') return 1;
+  const m = /matrix\(([^)]+)\)/.exec(transform);
+  if (!m) return 1;
+  const parts = m[1].split(',').map(Number);
+  const a = parts[0] ?? 1;
+  const b = parts[1] ?? 0;
+  const s = Math.hypot(a, b);
+  return s > 0 ? s : 1;
+}
+
+/** Rotate a local offset (dx,dy) by `deg` — screen y is down, positive = CW. */
+export function rotatePointDeg(dx: number, dy: number, deg: number): [number, number] {
+  const r = (deg * Math.PI) / 180;
+  const cos = Math.cos(r);
+  const sin = Math.sin(r);
+  return [dx * cos - dy * sin, dx * sin + dy * cos];
+}
+
+/** Screen angle (radians) from the element center to a point. */
+export function pointerAngleRad(cx: number, cy: number, px: number, py: number): number {
+  return Math.atan2(py - cy, px - cx);
+}
+
+/**
+ * RELATIVE rotate (FigJam corner-zone model): the element's new angle after
+ * dragging from `startPointerRad` to `curPointerRad`, starting from
+ * `startElementDeg`. Grab any corner zone and turn — the delta is the change in
+ * the center→pointer angle, so the corner tracks the cursor. Snaps to 15° while
+ * Shift is held. Normalized to (-180, 180].
+ */
+export function rotateDeltaDeg(
+  startElementDeg: number,
+  startPointerRad: number,
+  curPointerRad: number,
+  snap: boolean
+): number {
+  let deg = startElementDeg + (curPointerRad - startPointerRad) * (180 / Math.PI);
+  while (deg > 180) deg -= 360;
+  while (deg <= -180) deg += 360;
+  if (snap) deg = Math.round(deg / 15) * 15;
+  return Math.round(deg * 100) / 100;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Overlay component — mounted once in CanvasShell alongside SelectionHalos.
+
+type RotCorner = 'rot-nw' | 'rot-ne' | 'rot-sw' | 'rot-se';
+
+interface ElResizeDrag {
+  pointerId: number;
+  corner: ElResizeCorner | RotCorner;
+  el: HTMLElement;
+  cdId: string;
+  /** GLOBAL DOM-occurrence index of `el` among same-cd-id nodes (Stage H3). For a
+   *  reused component the server maps it to the dragged instance's `<Component/>`
+   *  usage so resizing one instance stays local; 0 for a normal element. */
+  idIndex: number;
+  /** Stage D4 — set when this drag targets a whole ARTBOARD frame (`[data-dc-
+   *  screen]`, no data-cd-id) instead of a canvas element. Commits via
+   *  `resize-artboard-request` (numeric width/height PROPS, DDR-027) instead of
+   *  `resize-request`. Null for an ordinary element drag. */
+  artboardId: string | null;
+  startClientX: number;
+  startClientY: number;
+  elZoom: number; // rect.width / offsetWidth — the element's own render scale
+  /** Element rotation (deg) at drag start — resize deltas are un-rotated by it,
+   *  and it's the base angle a rotate drag turns FROM. */
+  angle: number;
+  /** Screen center of the element — the pivot for a rotate drag. */
+  cx: number;
+  cy: number;
+  /** center→pointer angle (rad) at rotate-drag start (relative rotation base). */
+  rotStartPointer: number;
+  start: ElResizeStart;
+  flags: ElResizeFlags;
+  /** Inline style values BEFORE the drag — the undo `before` + failure restore. */
+  before: {
+    width: string | null;
+    height: string | null;
+    left: string | null;
+    top: string | null;
+    transform: string | null;
+  };
+  lastResult: ElResizeResult | null;
+  /** Last previewed `transform` (rotate drag) — the commit value. */
+  lastTransform: string | null;
+}
+
+/** Post the committed resize to the main-origin shell. Split out so the message
+ *  shape stays in one place. `null` before = the prop was unset (reset on undo). */
+function postResizeRequest(drag: ElResizeDrag, r: ElResizeResult): void {
+  const patch: Record<string, string> = {
+    width: `${r.width}px`,
+    height: `${r.height}px`,
+  };
+  if (typeof r.left === 'number') patch.left = `${r.left}px`;
+  if (typeof r.top === 'number') patch.top = `${r.top}px`;
+  try {
+    window.parent.postMessage(
+      { dgn: 'resize-request', id: drag.cdId, patch, before: drag.before, idIndex: drag.idIndex },
+      '*'
+    );
+  } catch {
+    /* detached / cross-origin teardown */
+  }
+}
+
+/** Stage D4 — post a committed ARTBOARD resize. `width`/`height` are plain
+ *  NUMBERS (world px, not px strings) — the shell writes them as numeric JSX
+ *  attrs via `/_api/resize-artboard` (DDR-027: artboard size is JSX-authoritative,
+ *  not inline style). Never carries left/top — see the `artboardId` doc above. */
+function postResizeArtboardRequest(drag: ElResizeDrag, r: ElResizeResult): void {
+  if (!drag.artboardId) return;
+  try {
+    window.parent.postMessage(
+      {
+        dgn: 'resize-artboard-request',
+        artboardId: drag.artboardId,
+        width: r.width,
+        height: r.height,
+      },
+      '*'
+    );
+  } catch {
+    /* detached / cross-origin teardown */
+  }
+}
+
+/** Post a committed rotate (Task L8) — a `transform` patch on the same lane. */
+function postRotateRequest(drag: ElResizeDrag, transform: string): void {
+  try {
+    window.parent.postMessage(
+      {
+        dgn: 'resize-request',
+        id: drag.cdId,
+        patch: { transform },
+        before: drag.before,
+        idIndex: drag.idIndex,
+      },
+      '*'
+    );
+  } catch {
+    /* detached / cross-origin teardown */
+  }
+}
+
+export function ElementResizeOverlay(): ReactNode {
+  ensureElementResizeStyles();
+  const { selected } = useSelectionSet();
+  const { tool } = useToolMode();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const dragRef = useRef<ElResizeDrag | null>(null);
+  // Last committed { el, before } — restored if the shell reports the write
+  // failed (dgn:'resize-failed'), so a rejected resize doesn't leave a phantom
+  // inline box that the (suppressed / absent) HMR reload never corrects.
+  const lastCommitRef = useRef<{ el: HTMLElement; before: ElResizeDrag['before'] } | null>(null);
+
+  const one = selected.length === 1 ? selected[0] : null;
+  const cdId = one && typeof one.id === 'string' ? one.id : null;
+  // Stage D4 — a whole-ARTBOARD selection (chrome click: no data-cd-id, just the
+  // `data-dc-screen` host) also gets handles, restricted to E/S/SE (growth-only —
+  // see the `artboardId` doc on ElResizeDrag for why left/top never move).
+  const artboardOnly = one && !cdId && typeof one.artboardId === 'string' ? one.artboardId : null;
+  // A real element OR artboard selection with the move tool active gets handles.
+  const active = tool === 'move' && (!!cdId || !!artboardOnly);
+
+  // rAF loop — follow the selected element's screen box (pan/zoom + layout).
+  useEffect(() => {
+    const c = containerRef.current;
+    if (!c) return;
+    // INV-2 — opacity+pointer-events, not display:none, so a fresh selection's
+    // handles/readout FADE in rather than pop (the `transition` on both
+    // classes above). Interactivity (pointer-events) flips instantly — a
+    // handle is grabbable the moment it's selected, even mid-fade.
+    const hideAll = () => {
+      for (const child of Array.from(c.children)) {
+        const h = child as HTMLElement;
+        h.style.opacity = '0';
+        h.style.pointerEvents = 'none';
+      }
+    };
+    if (!active || !one) {
+      hideAll();
+      return;
+    }
+    const tick = () => {
+      rafRef.current = null;
+      // Dogfood 2026-07-07 — a live ReorderDrag is the canvas's most DOM-churn-
+      // heavy gesture (never true for OUR own resize drag — a handle grab
+      // stopPropagation()s before ReorderDrag's own pointerdown listener sees
+      // it); skip this overlay's per-frame work while one is in flight so it
+      // doesn't compound the jank ("hrozně zavaší ten toolbar").
+      if (isElementDragActive()) {
+        hideAll();
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      const el = resolveSelectionEl(document, one) as HTMLElement | null;
+      // Skip inline text runs where width/height are meaningless (no explicit box).
+      if (!el) {
+        hideAll();
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      if (r.width <= 0 && r.height <= 0) {
+        hideAll();
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      // Stage D4 — an artboard gets growth-only handles (E/S/SE) and NO rotate
+      // zones (artboards don't rotate); an element gets the full 8 + 4 rotate set.
+      const resizeCorners: ElResizeCorner[] = artboardOnly ? ['e', 's', 'se'] : EL_RESIZE_CORNERS;
+      const rotateZones: RotCorner[] = artboardOnly ? [] : ['rot-nw', 'rot-ne', 'rot-sw', 'rot-se'];
+      // +1 persistent slot (LAST child) for the Task L7 readout pill — always
+      // present, hidden via opacity outside an active drag.
+      const TOTAL = resizeCorners.length + rotateZones.length + 1;
+      while (c.children.length < TOTAL) c.appendChild(document.createElement('div'));
+      while (c.children.length > TOTAL) c.lastChild && c.removeChild(c.lastChild);
+
+      // Rotation-aware placement (Task L8): the element's AABB center is its true
+      // center (default transform-origin), so handles ride the ROTATED box. Read
+      // the element's own rotation + the .dc-world zoom from computed style (DOM
+      // reads — the overlay stays camera-agnostic, no viewport controller).
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const deg = rotationDegFromMatrix(getComputedStyle(el).transform);
+      const world = el.closest('.dc-world') as HTMLElement | null;
+      const zoom = world ? scaleFromMatrix(getComputedStyle(world).transform) : 1;
+      const hw = (el.offsetWidth * zoom) / 2;
+      const hh = (el.offsetHeight * zoom) / 2;
+      // Rotate zones sit ON each corner (same offset), 20×20, z-index below the
+      // 8×8 corner square — so the square wins the center + the ring rotates.
+      const localOffset: Record<string, [number, number]> = {
+        nw: [-hw, -hh],
+        n: [0, -hh],
+        ne: [hw, -hh],
+        e: [hw, 0],
+        se: [hw, hh],
+        s: [0, hh],
+        sw: [-hw, hh],
+        w: [-hw, 0],
+        'rot-nw': [-hw, -hh],
+        'rot-ne': [hw, -hh],
+        'rot-sw': [-hw, hh],
+        'rot-se': [hw, hh],
+      };
+      // Rotate zones FIRST (lower in the DOM / z-index 5), corners LAST so the
+      // 8×8 squares paint on top in the overlap.
+      const handles = [...rotateZones, ...resizeCorners];
+      for (let i = 0; i < handles.length; i++) {
+        const corner = handles[i];
+        const handle = c.children[i] as HTMLElement;
+        const [ox, oy] = localOffset[corner] ?? [0, 0];
+        const [rx, ry] = rotatePointDeg(ox, oy, deg);
+        const ax = cx + rx;
+        const ay = cy + ry;
+        const isRot = corner.startsWith('rot-');
+        const ns = corner === 'n' || corner === 's';
+        const ew = corner === 'e' || corner === 'w';
+        const halfW = isRot ? 10 : ns ? 7 : ew ? 3 : 4;
+        const halfH = isRot ? 10 : ns ? 3 : ew ? 7 : 4;
+        handle.className = 'dc-el-resize-handle';
+        handle.dataset.corner = corner;
+        handle.style.opacity = '1';
+        handle.style.pointerEvents = 'auto';
+        handle.style.left = `${Math.round(ax - halfW)}px`;
+        handle.style.top = `${Math.round(ay - halfH)}px`;
+        // Orient the edge pills with the element; rotate zones stay unrotated.
+        handle.style.transform = isRot ? '' : `rotate(${deg}deg)`;
+      }
+
+      // Task L7 — live W×H (+X,Y when an edge drag moves the origin) readout,
+      // shown only while THIS element's resize handle is actually being
+      // dragged (dragRef is set by the pointerdown handler below). World
+      // units — offsetWidth/Height + the drag's own left/top, unaffected by
+      // the .dc-world zoom transform (same invariant Stage A's camera fix
+      // relies on), so the number reads correctly at any zoom.
+      const readout = c.children[handles.length] as HTMLElement;
+      const drag = dragRef.current;
+      if (drag && drag.el === el && !drag.corner.startsWith('rot-')) {
+        const w = drag.lastResult?.width ?? el.offsetWidth;
+        const h = drag.lastResult?.height ?? el.offsetHeight;
+        let label = `${Math.round(w)} × ${Math.round(h)}`;
+        const lx = drag.lastResult?.left;
+        const ly = drag.lastResult?.top;
+        if (typeof lx === 'number' || typeof ly === 'number') {
+          label += `  ·  ${Math.round(lx ?? drag.start.left)}, ${Math.round(ly ?? drag.start.top)}`;
+        }
+        readout.className = 'dc-el-resize-readout';
+        readout.textContent = label;
+        readout.style.opacity = '1';
+        readout.style.left = `${Math.round(cx)}px`;
+        readout.style.top = `${Math.round(cy + hh)}px`;
+      } else {
+        readout.style.opacity = '0';
+      }
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [active, one, artboardOnly]);
+
+  // Live-apply a resize result to the element's inline style (instant preview,
+  // no source write). Commit on release.
+  const applyPreview = useCallback((d: ElResizeDrag, r: ElResizeResult) => {
+    d.el.style.width = `${r.width}px`;
+    d.el.style.height = `${r.height}px`;
+    if (typeof r.left === 'number') d.el.style.left = `${r.left}px`;
+    if (typeof r.top === 'number') d.el.style.top = `${r.top}px`;
+    d.lastResult = r;
+  }, []);
+
+  // Pointer handling — pointerdown on a handle starts the drag.
+  useEffect(() => {
+    const c = containerRef.current;
+    if (!c) return;
+
+    const computeFromEvent = (d: ElResizeDrag, ev: PointerEvent): ElResizeResult => {
+      // Un-rotate the screen delta into the element's LOCAL frame (so dragging a
+      // handle resizes along the element's own axes on a rotated element), then
+      // ÷ render zoom → world units.
+      const [ldx, ldy] = rotatePointDeg(
+        ev.clientX - d.startClientX,
+        ev.clientY - d.startClientY,
+        -d.angle
+      );
+      return computeElementResize(
+        d.corner as ElResizeCorner,
+        d.start,
+        ldx / d.elZoom,
+        ldy / d.elZoom,
+        // Stage D4 — Alt/center is ignored for an artboard: without a left/top
+        // write, "center" would just double the growth speed with no visual
+        // recentering (confusing). Aspect-lock (Shift) still applies to both.
+        { aspect: !!ev.shiftKey, center: !d.artboardId && !!ev.altKey },
+        d.flags
+      );
+    };
+
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (!t?.classList.contains('dc-el-resize-handle')) return;
+      const corner = t.dataset.corner as ElResizeCorner | RotCorner | undefined;
+      if (!corner || !one) return;
+      const elCdId = typeof one.id === 'string' ? one.id : null;
+      const elArtboardId = !elCdId && typeof one.artboardId === 'string' ? one.artboardId : null;
+      if (!elCdId && !elArtboardId) return;
+      const el = resolveSelectionEl(document, one) as HTMLElement | null;
+      if (!el) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = el.getBoundingClientRect();
+      const elZoom = el.offsetWidth ? rect.width / el.offsetWidth : 1;
+      const cs = getComputedStyle(el);
+      // Stage D4 — an artboard NEVER derives left/top from a resize drag (the
+      // route only writes width/height PROPS; layout.artboards[] x/y stays
+      // untouched — see the plan's Task D4 gotcha). Forcing outOfFlow=false here
+      // (even though an artboard IS position:absolute in the DOM) is what makes
+      // `flags.canMoveLeft/Top` false below; the growth-only E/S/SE handle set
+      // rendered above is the visual half of the same guarantee.
+      const outOfFlow = !elArtboardId && (cs.position === 'absolute' || cs.position === 'fixed');
+      const startLeft = elArtboardId ? Number.NaN : Number.parseFloat(el.style.left);
+      const startTop = elArtboardId ? Number.NaN : Number.parseFloat(el.style.top);
+      const angle = elArtboardId ? 0 : rotationDegFromMatrix(cs.transform);
+      const z = elZoom > 0 ? elZoom : 1;
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const drag: ElResizeDrag = {
+        pointerId: e.pointerId,
+        corner,
+        el,
+        cdId: elCdId ?? '',
+        artboardId: elArtboardId,
+        // Stage H3 — which instance (global same-cd-id DOM occurrence) so a
+        // reused-component resize routes to its own `<Component/>` usage (local).
+        // N/A (0) for an artboard drag.
+        idIndex: elCdId ? globalCdOccurrence(document, elCdId, el) : 0,
+        startClientX: e.clientX,
+        startClientY: e.clientY,
+        elZoom: z,
+        angle,
+        cx,
+        cy,
+        rotStartPointer: pointerAngleRad(cx, cy, e.clientX, e.clientY),
+        start: {
+          // World-px border box. rect is the AABB; for a rotated element that
+          // over-states w/h, so derive from offset dims when rotated.
+          w: (angle ? el.offsetWidth : rect.width / z) || rect.width / z,
+          h: (angle ? el.offsetHeight : rect.height / z) || rect.height / z,
+          left: startLeft,
+          top: startTop,
+        },
+        flags: {
+          canMoveLeft: outOfFlow && Number.isFinite(startLeft),
+          canMoveTop: outOfFlow && Number.isFinite(startTop),
+        },
+        before: {
+          width: el.style.width || null,
+          height: el.style.height || null,
+          left: el.style.left || null,
+          top: el.style.top || null,
+          transform: el.style.transform || null,
+        },
+        lastResult: null,
+        lastTransform: null,
+      };
+      dragRef.current = drag;
+      try {
+        t.setPointerCapture(e.pointerId);
+      } catch {
+        /* synthetic events may reject capture */
+      }
+    };
+
+    const onMove = (e: PointerEvent) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      e.preventDefault();
+      if (d.corner.startsWith('rot-')) {
+        // Rotate RELATIVE to the grabbed corner: turn by the change in the
+        // center→pointer angle from where the drag started. Shift snaps to 15°.
+        const deg = rotateDeltaDeg(
+          d.angle,
+          d.rotStartPointer,
+          pointerAngleRad(d.cx, d.cy, e.clientX, e.clientY),
+          !!e.shiftKey
+        );
+        const tf = `rotate(${deg}deg)`;
+        d.el.style.transform = tf;
+        d.lastTransform = tf;
+        return;
+      }
+      applyPreview(d, computeFromEvent(d, e));
+    };
+
+    const onUp = (e: PointerEvent) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      dragRef.current = null;
+      if (d.corner.startsWith('rot-')) {
+        const tf = d.lastTransform;
+        if (!tf || tf === d.before.transform) return; // no-op
+        lastCommitRef.current = { el: d.el, before: d.before };
+        postRotateRequest(d, tf);
+        return;
+      }
+      const r = d.lastResult ?? computeFromEvent(d, e);
+      // No-op guard: nothing changed → don't churn a source write / undo entry.
+      const changed =
+        `${r.width}px` !== d.before.width ||
+        `${r.height}px` !== d.before.height ||
+        (typeof r.left === 'number' && `${r.left}px` !== d.before.left) ||
+        (typeof r.top === 'number' && `${r.top}px` !== d.before.top);
+      if (!changed) return;
+      lastCommitRef.current = { el: d.el, before: d.before };
+      if (d.artboardId) postResizeArtboardRequest(d, r);
+      else postResizeRequest(d, r);
+    };
+
+    // Restore the pre-drag inline box if the shell reports the write failed.
+    // `resize-artboard-failed` (Stage D4) shares the same restore shape — an
+    // artboard drag's `before` never carries left/top (canMoveLeft/Top forced
+    // false), so the width/height-only branch below is already correct for it.
+    const onFail = (e: MessageEvent) => {
+      const m = e.data as { dgn?: string } | null;
+      if (m?.dgn !== 'resize-failed' && m?.dgn !== 'resize-artboard-failed') return;
+      if (e.source !== window.parent) return; // only the parent shell (DDR-054)
+      const last = lastCommitRef.current;
+      if (!last) return;
+      last.el.style.width = last.before.width ?? '';
+      last.el.style.height = last.before.height ?? '';
+      if (last.before.left !== null || last.el.style.left)
+        last.el.style.left = last.before.left ?? '';
+      if (last.before.top !== null || last.el.style.top) last.el.style.top = last.before.top ?? '';
+      if (last.before.transform !== null || last.el.style.transform)
+        last.el.style.transform = last.before.transform ?? '';
+      lastCommitRef.current = null;
+    };
+
+    c.addEventListener('pointerdown', onDown);
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    window.addEventListener('message', onFail);
+    return () => {
+      c.removeEventListener('pointerdown', onDown);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      window.removeEventListener('message', onFail);
+    };
+  }, [one, applyPreview]);
+
+  return <div ref={containerRef} aria-hidden="true" />;
+}