@1agh/maude 0.37.0 → 0.38.0

package/apps/studio/client/app.jsx

@@ -5148,38 +5148,123 @@ const LAYER_TYPE_ICON = {
   box: 'box',
 };
 
+
+// Optimistic layers-tree reorder — move the node with `draggedId` relative to
+// `refId` (before / after a sibling, or inside-end as a last child). Pure: clones
+// the node array and returns a new one, so React re-renders. Ids are distinct
+// here (repeated/list nodes can't be dragged), so first-match-by-id is safe.
+// Returns the input unchanged if either node isn't found (the HMR rebuild will
+// reconcile).
+function moveLayerNode(nodes, draggedId, refId, position) {
+  if (!Array.isArray(nodes) || draggedId === refId) return nodes;
+  const clone = JSON.parse(JSON.stringify(nodes));
+  let dragged = null;
+  const remove = (arr) => {
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i].id === draggedId) {
+        dragged = arr[i];
+        arr.splice(i, 1);
+        return true;
+      }
+      if (arr[i].children && remove(arr[i].children)) return true;
+    }
+    return false;
+  };
+  remove(clone);
+  if (!dragged) return nodes;
+  const insert = (arr) => {
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i].id === refId) {
+        if (position === 'inside-start' || position === 'inside-end') {
+          arr[i].children = arr[i].children || [];
+          if (position === 'inside-start') arr[i].children.unshift(dragged);
+          else arr[i].children.push(dragged);
+        } else {
+          arr.splice(position === 'before' ? i : i + 1, 0, dragged);
+        }
+        return true;
+      }
+      if (arr[i].children && insert(arr[i].children)) return true;
+    }
+    return false;
+  };
+  return insert(clone) ? clone : nodes;
+}
+
+// Void / self-closing tags can't hold children → not a nest target. Everything
+// else (div, section, span, …) can be nested into (matches "drop into any div").
+const LAYER_VOID_TAGS = new Set([
+  'img', 'input', 'br', 'hr', 'area', 'base', 'col', 'embed', 'link', 'meta',
+  'param', 'source', 'track', 'wbr',
+]);
+
 function LayerRow({
   node,
   depth,
   selectedId,
+  selectedIndex,
   collapsed,
   hidden,
   onToggle,
   onSelect,
   onHover,
   onToggleVisibility,
+  onReorder,
+  onRowPointerDown,
+  dragState,
 }) {
   const key = `${node.id}:${node.index}`;
   const hasKids = node.children && node.children.length > 0;
   const isCollapsed = collapsed.has(key);
-  const isSel = node.id === selectedId;
+  // Match the specific INSTANCE (id + occurrence index), not every element that
+  // shares this source id — otherwise a `.map`ed element highlights all its
+  // clones at once. Fall back to id-only when the selection carries no index.
+  const isSel =
+    node.id === selectedId && (selectedIndex == null || node.index === selectedIndex);
   const isHidden = hidden?.has(key);
+  // A shared data-cd-id (reused component instance) IS reorderable now — the
+  // server maps the occurrence index to the parent <Component> usage — so these
+  // are no longer greyed/blocked. A `.map()`ed single-usage element still can't
+  // split; that move is refused server-side and reverts.
+  const canDrag = !!onReorder;
+  // Phase 12.1 — the row being dragged FLOATS with the cursor (same model as the
+  // in-canvas drag): a transform follows the pointer, its layout box stays
+  // reserved (empty slot at the origin), and pointer-events:none lets the row
+  // under the pointer be hit-tested. A blue divider (rendered by the tree) marks
+  // where it drops — indented to show the depth it will nest at (Figma-style).
+  const isDragging = dragState?.key === key;
+  const dragStyle = isDragging
+    ? {
+        transform: `translate(${dragState.dx}px, ${dragState.dy}px)`,
+        opacity: 0.9,
+        zIndex: 20,
+        position: 'relative',
+        pointerEvents: 'none',
+        cursor: 'grabbing',
+        boxShadow: '0 6px 18px rgba(0, 0, 0, 0.28)',
+      }
+    : null;
   return (
     <>
       <div
         className={
           'st-layer st-layer--row' + (isSel ? ' is-sel' : '') + (isHidden ? ' is-hidden' : '')
         }
-        style={{ paddingLeft: 6 + depth * 14 }}
+        style={{ paddingLeft: 6 + depth * 14, ...dragStyle }}
         role="treeitem"
         aria-selected={isSel}
         aria-expanded={hasKids ? !isCollapsed : undefined}
+        aria-grabbed={canDrag ? isDragging : undefined}
         tabIndex={0}
         title={`${node.tag} · ${node.type}`}
+        data-layer-key={key}
         onClick={() => onSelect(node)}
         onMouseEnter={() => onHover(node)}
         onMouseLeave={() => onHover(null)}
+        onPointerDown={canDrag ? (e) => onRowPointerDown(e, node, key) : undefined}
         onKeyDown={(e) => {
+          // Enter/Space select; ↑/↓ (+ modifiers) are handled at the tree
+          // container (selection-driven — survives the HMR re-render).
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             onSelect(node);
@@ -5221,18 +5306,22 @@ function LayerRow({
         ) : null}
       </div>
       {hasKids && !isCollapsed
-        ? node.children.map((c) => (
+        ? node.children.map((c, ci) => (
             <LayerRow
               key={`${c.id}:${c.index}`}
               node={c}
               depth={depth + 1}
               selectedId={selectedId}
+              selectedIndex={selectedIndex}
               collapsed={collapsed}
               hidden={hidden}
               onToggle={onToggle}
               onSelect={onSelect}
               onHover={onHover}
               onToggleVisibility={onToggleVisibility}
+              onReorder={onReorder}
+              onRowPointerDown={onRowPointerDown}
+              dragState={dragState}
             />
           ))
         : null}
@@ -5311,6 +5400,8 @@ function InspectorPanel({
   layersTree,
   onSelectLayer,
   onHoverLayer,
+  onReorderLayer,
+  layersBusyRef,
   cfg,
   onOptimistic,
   onRecordEdit,
@@ -5334,6 +5425,237 @@ function InspectorPanel({
   // Phase 12.3 (W3.1) — per-layer visibility toggle. Live-only (display:none via
   // the optimistic apply bus); not persisted to source. Keyed by `${id}:${index}`.
   const [hiddenLayers, setHiddenLayers] = useState(() => new Set());
+  // Phase 12.1 (DDR-138) — drag-to-reorder state (lifted so every row sees the
+  // same drop target) + an aria-live announcement for keyboard moves.
+  const [dragState, setDragState] = useState(null);
+  const [reorderMsg, setReorderMsg] = useState('');
+  const handleReorder = onReorderLayer
+    ? (dragged, ref, position) => {
+        // Gate keyboard + drop moves while a prior reorder is still landing — the
+        // write churns positional ids, so acting on the stale tree would misfire.
+        if (layersBusyRef?.current) return;
+        const verb =
+          position === 'before'
+            ? `before ${ref.label}`
+            : position === 'after'
+              ? `after ${ref.label}`
+              : `into ${ref.label}`;
+        setReorderMsg(`Moved ${dragged.label} ${verb}`);
+        // Pass occurrence indices so a reused-component instance maps to its
+        // parent <Component> usage server-side (same-id instances are distinct).
+        onReorderLayer(dragged.id, ref.id, position, {
+          idIndex: dragged.index,
+          refIndex: ref.index,
+        });
+      }
+    : undefined;
+  // Flatten the VISIBLE tree (respecting collapse) with each node's depth,
+  // parent, siblings, and index — the basis for keyboard nav + moves.
+  const flattenVisibleLayers = () => {
+    const flat = [];
+    (function walk(nodes, depth, parentNode) {
+      (nodes || []).forEach((n, i) => {
+        flat.push({ node: n, depth, parentNode, siblings: nodes, pos: i });
+        if (n.children && n.children.length && !collapsed.has(`${n.id}:${n.index}`))
+          walk(n.children, depth + 1, n);
+      });
+    })(layersTree?.nodes, 0, null);
+    return flat;
+  };
+  // The keyboard cursor is the SELECTED element (NOT DOM focus, which the HMR
+  // re-render churns). ↑/↓ move the selection through the flattened tree;
+  // Alt+↑/↓ reorder within the parent; Alt+Shift+↑/↓ reorder across the parent
+  // boundary (out at first/last, into an adjacent open container). After a move
+  // the reorder re-selects the moved element (movedId), so the cursor follows
+  // and the next press keeps working — the fix for "Alt+arrow works once".
+  const onTreeKeyDown = (e) => {
+    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+    if (!el) return;
+    const flat = flattenVisibleLayers();
+    const i = flat.findIndex((f) => f.node.id === el.id && f.node.index === el.index);
+    if (i < 0) return;
+    const dir = e.key === 'ArrowDown' ? 1 : -1;
+    const cur = flat[i];
+    if (!e.altKey) {
+      const t = flat[i + dir];
+      if (t) {
+        e.preventDefault();
+        onSelectLayer?.(t.node);
+      }
+      return;
+    }
+    if (!handleReorder || !Array.isArray(cur.siblings)) return;
+    e.preventDefault();
+    const expanded = (n) =>
+      n && n.children && n.children.length && !collapsed.has(`${n.id}:${n.index}`);
+    if (!e.shiftKey) {
+      // Within-parent reorder; stop at the first/last sibling.
+      if (dir < 0 && cur.pos > 0) handleReorder(cur.node, cur.siblings[cur.pos - 1], 'before');
+      else if (dir > 0 && cur.pos < cur.siblings.length - 1)
+        handleReorder(cur.node, cur.siblings[cur.pos + 1], 'after');
+      return;
+    }
+    // Cross-parent reorder (flattened traversal).
+    if (dir > 0) {
+      const next = cur.siblings[cur.pos + 1];
+      if (next) handleReorder(cur.node, next, expanded(next) ? 'inside-start' : 'after');
+      else if (cur.parentNode) handleReorder(cur.node, cur.parentNode, 'after');
+    } else {
+      const prev = cur.siblings[cur.pos - 1];
+      if (prev) handleReorder(cur.node, prev, expanded(prev) ? 'inside-end' : 'before');
+      else if (cur.parentNode) handleReorder(cur.node, cur.parentNode, 'before');
+    }
+  };
+  // Pointer-based drag-to-reorder in the Layers tree — same model as the
+  // in-canvas drag: the row FLOATS with the cursor (transform, slot reserved), a
+  // blue divider (or nest ring) marks the drop, and the move commits only on
+  // release. Same-origin shell, so it's all local (no dgn bus).
+  const layerDragRef = useRef(null);
+  const layerTreeRef = useRef(null);
+  const startLayerDrag = (e, node, key) => {
+    if (!handleReorder || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (layersBusyRef?.current) return; // a prior reorder is still landing (ids churning)
+    const startX = e.clientX;
+    const startY = e.clientY;
+    // Forbid dropping a node into itself or its own subtree.
+    const forbidden = new Set([key]);
+    (function walk(n) {
+      (n.children || []).forEach((c) => {
+        forbidden.add(`${c.id}:${c.index}`);
+        walk(c);
+      });
+    })(node);
+    // Flatten the VISIBLE tree (respecting collapse) with depth. The drop is
+    // computed dnd-kit-tree style: a GAP between rows + a DEPTH from the pointer's
+    // X — so you can nest into any container (even an empty one) and the divider
+    // INDENTS to show it's going into that nested list (Figma-style).
+    const INDENT = 14;
+    const BASE = 6;
+    const flat = [];
+    (function walk(nodes, depth) {
+      (nodes || []).forEach((n) => {
+        const k = `${n.id}:${n.index}`;
+        flat.push({ node: n, key: k, id: n.id, depth, tag: n.tag });
+        if (n.children && n.children.length && !collapsed.has(k)) walk(n.children, depth + 1);
+      });
+    })(layersTree?.nodes, 0);
+    const flatByKey = new Map(flat.map((it) => [it.key, it]));
+    let started = false;
+    const onMove = (ev) => {
+      if (!started) {
+        if (Math.hypot(ev.clientX - startX, ev.clientY - startY) < 4) return;
+        started = true;
+      }
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      let target = null;
+      // Visible rows in DOM (== flat) order, minus the dragged one (its rect is
+      // floated, so it's meaningless for gap math).
+      const rows = [].slice
+        .call(document.querySelectorAll('.st-layer--row[data-layer-key]'))
+        .map((el) => ({ rect: el.getBoundingClientRect(), it: flatByKey.get(el.getAttribute('data-layer-key')) }))
+        .filter((r) => r.it && r.it.key !== key);
+      if (rows.length) {
+        const rowLeft = rows[0].rect.left;
+        const rowRight = rows[0].rect.right;
+        // Gap = index of the first row whose vertical midpoint is below the pointer.
+        let gap = rows.length;
+        for (let i = 0; i < rows.length; i++) {
+          if (ev.clientY < rows[i].rect.top + rows[i].rect.height / 2) {
+            gap = i;
+            break;
+          }
+        }
+        const prev = rows[gap - 1]?.it || null;
+        const nextIt = rows[gap]?.it || null;
+        // Depth from pointer X. Clamp between the row below (min) and one level
+        // under the row above (max, if it can hold children).
+        const raw = Math.round((ev.clientX - rowLeft - BASE) / INDENT);
+        const maxDepth = prev ? prev.depth + (LAYER_VOID_TAGS.has(prev.tag) ? 0 : 1) : 0;
+        const minDepth = nextIt ? nextIt.depth : 0;
+        const depth = Math.max(minDepth, Math.min(raw, maxDepth));
+        // Resolve (prev, depth) → { refId, position, refNode, targetDepth }.
+        let refIt = null;
+        let position = 'before';
+        let targetDepth = 0;
+        if (!prev) {
+          if (nextIt) {
+            refIt = nextIt;
+            position = 'before';
+            targetDepth = nextIt.depth;
+          }
+        } else if (depth > prev.depth) {
+          refIt = prev; // nest as prev's FIRST child
+          position = 'inside-start';
+          targetDepth = prev.depth + 1;
+        } else if (depth === prev.depth) {
+          refIt = prev;
+          position = 'after';
+          targetDepth = prev.depth;
+        } else {
+          for (let i = gap - 1; i >= 0; i--) {
+            if (rows[i].it.depth === depth) {
+              refIt = rows[i].it;
+              break;
+            }
+          }
+          if (!refIt) refIt = prev;
+          position = 'after';
+          targetDepth = depth;
+        }
+        // Guard: no self, no dragged-subtree, no repeated (list) target.
+        // forbidden already holds the dragged node's own key + its subtree, so a
+        // different INSTANCE of the same reused component (same id, other key) is
+        // still a valid target.
+        if (refIt && refIt.key !== key && !forbidden.has(refIt.key)) {
+          const y = prev ? rows[gap - 1].rect.bottom : rows[0].rect.top;
+          const left = rowLeft + BASE + targetDepth * INDENT;
+          target = { refId: refIt.id, position, node: refIt.node, y, left, w: Math.max(24, rowRight - left) };
+        }
+      }
+      const next = { key, node, dx, dy, target };
+      layerDragRef.current = next;
+      setDragState(next);
+    };
+    const teardown = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('keydown', onKey, true);
+    };
+    // Swallow the click that trails a drag so it doesn't also select a row.
+    const suppressClick = () => {
+      const sup = (ce) => {
+        ce.preventDefault();
+        ce.stopImmediatePropagation();
+        document.removeEventListener('click', sup, true);
+      };
+      document.addEventListener('click', sup, true);
+      setTimeout(() => document.removeEventListener('click', sup, true), 300);
+    };
+    const onUp = () => {
+      teardown();
+      const d = layerDragRef.current;
+      layerDragRef.current = null;
+      setDragState(null);
+      if (started && d?.target) {
+        suppressClick();
+        handleReorder(d.node, d.target.node, d.target.position);
+      }
+    };
+    // Esc — abort the drag: the row snaps back, nothing commits.
+    const onKey = (ke) => {
+      if (ke.key !== 'Escape') return;
+      ke.preventDefault();
+      ke.stopImmediatePropagation();
+      teardown();
+      layerDragRef.current = null;
+      setDragState(null);
+      if (started) suppressClick();
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('keydown', onKey, true);
+  };
   const toggleCollapse = (key) =>
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -5454,22 +5776,58 @@ function InspectorPanel({
           <>
             <div className="st-rp-hd">Layers{layersTree?.nodes?.length ? '' : ' · ancestry'}</div>
             {layersTree?.nodes?.length ? (
-              <div role="tree" aria-label="Artboard layers">
-                {layersTree.nodes.map((n) => (
-                  <LayerRow
-                    key={`${n.id}:${n.index}`}
-                    node={n}
-                    depth={0}
-                    selectedId={el.id}
-                    collapsed={collapsed}
-                    hidden={hiddenLayers}
-                    onToggle={toggleCollapse}
-                    onSelect={(node) => onSelectLayer?.(node)}
-                    onHover={(node) => onHoverLayer?.(node)}
-                    onToggleVisibility={toggleVisibility}
+              <>
+                {handleReorder ? (
+                  <div className="st-rp-hint" aria-hidden="true">
+                    Drag or ↑/↓ select · Alt+↑/↓ move · Alt+Shift+↑/↓ move across
+                  </div>
+                ) : null}
+                {/* Keyboard nav/move handled at the container (tabIndex=0), driven
+                    by the SELECTION not row focus — survives the HMR re-render. */}
+                <div
+                  role="tree"
+                  aria-label="Artboard layers"
+                  tabIndex={0}
+                  ref={layerTreeRef}
+                  onKeyDown={onTreeKeyDown}
+                >
+                  {layersTree.nodes.map((n, ni) => (
+                    <LayerRow
+                      key={`${n.id}:${n.index}`}
+                      node={n}
+                      depth={0}
+                      selectedId={el.id}
+                      selectedIndex={el.index}
+                      collapsed={collapsed}
+                      hidden={hiddenLayers}
+                      onToggle={toggleCollapse}
+                      onSelect={(node) => {
+                        onSelectLayer?.(node);
+                        layerTreeRef.current?.focus();
+                      }}
+                      onHover={(node) => onHoverLayer?.(node)}
+                      onToggleVisibility={toggleVisibility}
+                      onReorder={handleReorder}
+                      onRowPointerDown={startLayerDrag}
+                      dragState={dragState}
+                    />
+                  ))}
+                </div>
+                {dragState?.target ? (
+                  <div
+                    className="st-layer-divider"
+                    aria-hidden="true"
+                    style={{
+                      left: dragState.target.left,
+                      top: dragState.target.y - 1,
+                      width: dragState.target.w,
+                    }}
                   />
-                ))}
-              </div>
+                ) : null}
+                <div className="sr-only" role="status" aria-live="polite">
+                  {reorderMsg}
+                </div>
+              </>
             ) : Array.isArray(el.dom_path) && el.dom_path.length ? (
               el.dom_path.map((node, i) => (
                 <div
@@ -5516,6 +5874,56 @@ function App() {
   useEffect(() => {
     selectedRef.current = selected;
   }, [selected]);
+  // feature-acp-context-hardening — halo re-apply retry ladder. A single
+  // select-by-id post races the fresh iframe: dgn:'loaded' fires from the
+  // inline inspector script at HTML-parse time, BEFORE the React canvas-shell
+  // mounts its message listener (module fetch + mount takes 100ms–seconds), so
+  // a one-shot post silently evaporates and the restored selection never gets
+  // its halo back. Re-post on a fixed ladder; each attempt aborts when the
+  // user meanwhile selected something else. select-by-id is idempotent
+  // (replace-same → select-set echo → ws guard sees same id → no re-schedule),
+  // so the ladder can't loop.
+  const haloRestoreTimersRef = useRef([]);
+  const scheduleHaloRestore = useCallback((one) => {
+    if (!one?.id || !one.file) return;
+    for (const t of haloRestoreTimersRef.current) clearTimeout(t);
+    haloRestoreTimersRef.current = [50, 450, 1200, 2500, 5000].map((delay) =>
+      setTimeout(() => {
+        const cur = selectedRef.current;
+        const c1 = Array.isArray(cur) ? cur[0] : cur;
+        if (!c1 || c1.id !== one.id || c1.file !== one.file) return; // superseded
+        const frame = iframesRef.current.get(one.file);
+        if (!frame?.contentWindow) return;
+        try {
+          frame.contentWindow.postMessage(
+            {
+              dgn: 'select-by-id',
+              id: one.id,
+              artboardId: one.artboardId ?? null,
+              index: one.index ?? 0,
+            },
+            '*'
+          );
+        } catch {}
+      }, delay)
+    );
+  }, []);
+  // Phase 12.1 (DDR-138) — after a reorder writes source, the HMR reload remounts
+  // the canvas and the positional data-cd-id of the moved element (and everything
+  // after it) renumbers. Stash the re-settle target { file, movedId, artboardId }
+  // so the dgn:'loaded' handler re-selects the moved element by its NEW id.
+  const pendingReorderRef = useRef(null);
+  // Latest `reorderLayer` (defined far below), read from the stale-closure
+  // onMessage handler when the in-canvas grip posts dgn:'reorder-request'
+  // (same freshness idiom as selectedRef; avoids a render-time TDZ on the
+  // later useCallback).
+  const reorderLayerRef = useRef(null);
+  // Phase 12.1 — true between a layers-panel reorder and the fresh layers-tree
+  // landing. A reorder churns positional data-cd-ids, so a rapid 2nd drag would
+  // target stale ids; the Layers tree gates new drags on this until the rebuilt
+  // tree (with correct ids) arrives. Cleared by the layers-tree message.
+  const layersBusyRef = useRef(false);
+  const layersBusyTimerRef = useRef(null);
   // Phase 12 Task 4 — Layers tree for the active artboard (posted by canvas-shell).
   const [layersTree, setLayersTree] = useState(null);
   const [wsConnected, setWsConnected] = useState(false);
@@ -6108,7 +6516,25 @@ function App() {
           if (m.type === 'snapshot' && m.state) {
             setSelected((prev) => mergeSelClientFields(m.state.selected, prev));
           } else if (m.type === 'selected') {
-            setSelected((prev) => mergeSelClientFields(m.selected, prev));
+            // feature-acp-context-hardening — a canvas switch RESTORES the
+            // per-canvas selection server-side and broadcasts it here. The
+            // dgn:'loaded' re-select (Phase 12.3 path below) only works when
+            // this frame lands BEFORE the new iframe loads; on a fast cached
+            // mount it lands after, so re-apply the halo from THIS edge too.
+            // Guarded to restore-transitions (prev missing / different id or
+            // file) so the select-set echo of our own re-select can't loop.
+            const incoming = m.selected;
+            const one = Array.isArray(incoming) ? incoming[0] : incoming;
+            const prevSel = selectedRef.current;
+            const prevOne = Array.isArray(prevSel) ? prevSel[0] : prevSel;
+            setSelected((prev) => mergeSelClientFields(incoming, prev));
+            if (
+              one?.id &&
+              one.file &&
+              (!prevOne || prevOne.id !== one.id || prevOne.file !== one.file)
+            ) {
+              scheduleHaloRestore(one);
+            }
           } else if (m.type === 'comments' && typeof m.file === 'string') {
             setCommentsByFile((prev) => ({ ...prev, [m.file]: m.comments || [] }));
           } else if (m.type === 'ai-activity' && typeof m.file === 'string') {
@@ -6546,6 +6972,24 @@ function App() {
         }
         return;
       }
+      // SECURITY (attacker Finding 2, mirrors the phase-28 F-2 reorder/present
+      // gate at the handlers below): selection posts are honored ONLY from the
+      // ACTIVE canvas's window. Every open canvas iframe shares one
+      // `canvasOrigin`, so the origin check above can't tell the foreground
+      // canvas from a background/synced one — and a selection carries an
+      // attacker-chosen `file` that the server trusts verbatim and write-throughs
+      // into the persistent per-canvas `selections` map, then rides into the
+      // auto-approving ACP agent's frozen context. A background (untrusted, DDR-054)
+      // canvas must not be able to plant a selection with no user gesture. The
+      // user can only click the visible active canvas, so a non-active source is
+      // never a legitimate selection.
+      if (m.dgn === 'select' || m.dgn === 'select-set' || m.dgn === 'clear-select') {
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+      }
       if (m.dgn === 'select' && m.selection) {
         wsSend({ type: 'select', selection: m.selection });
         setSelected(m.selection);
@@ -6631,6 +7075,88 @@ function App() {
       } else if (m.dgn === 'layers-tree') {
         // Phase 12 Task 4 — browsable layers tree for the active artboard.
         setLayersTree({ artboardId: m.artboardId, nodes: Array.isArray(m.tree) ? m.tree : [] });
+        // fresh tree (correct ids) landed — drags OK again
+        layersBusyRef.current = false;
+        if (layersBusyTimerRef.current) {
+          clearTimeout(layersBusyTimerRef.current);
+          layersBusyTimerRef.current = null;
+        }
+        // Phase 12.1 — a reorder writes source → SOFT HMR (no dgn:'loaded' fires,
+        // so the loaded-handler re-select never runs). The live observer's fresh
+        // tree is our signal instead: re-select the moved element by its NEW
+        // positional id (movedId) so the selection halo + the keyboard cursor
+        // follow it. Without this the next Alt+arrow acts on the STALE id, which
+        // positionally now points at a different element. Only act once the tree
+        // actually CONTAINS movedId — an in-canvas drag posts a PREVIEW tree
+        // first (old ids, pre-write); consuming then would re-select nothing and
+        // burn the pending ref before the real post-HMR tree lands.
+        const pend = pendingReorderRef.current;
+        if (pend && pend.movedId) {
+          const has = (function find(nodes) {
+            return (nodes || []).some((n) => n.id === pend.movedId || find(n.children));
+          })(m.tree);
+          if (has) {
+            pendingReorderRef.current = null;
+            const win = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+            if (win) {
+              try {
+                win.postMessage(
+                  { dgn: 'select-by-id', id: pend.movedId, artboardId: m.artboardId ?? null, index: 0 },
+                  '*'
+                );
+              } catch {}
+            }
+          }
+        }
+      } else if (m.dgn === 'reorder-revert') {
+        // Phase 12.1 follow-up — Cmd+Z/Cmd+Shift+Z on a reorder. The canvas undo
+        // stack (untrusted iframe) can't reach the main-origin-only
+        // /_api/reorder-revert, so it REQUESTS; the shell writes. Active canvas
+        // only. SECURITY (adversarial F4): pin the target to `activePath` — do NOT
+        // forward m.canvas (an untrusted iframe could name a different canvas); the
+        // undo stack is per active canvas anyway, and the server's seq→entry.abs +
+        // 409 content-match are the backstop.
+        const rvWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const rvShape = typeof m.seq === 'number' && (m.dir === 'undo' || m.dir === 'redo');
+        if (e.source === rvWin && rvShape && activePath) {
+          layersBusyRef.current = true;
+          if (layersBusyTimerRef.current) clearTimeout(layersBusyTimerRef.current);
+          layersBusyTimerRef.current = setTimeout(() => {
+            layersBusyRef.current = false;
+            layersBusyTimerRef.current = null;
+          }, 700);
+          fetch('/_api/reorder-revert', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ canvas: activePath, seq: m.seq, dir: m.dir }),
+          })
+            .then((r) => r.json().catch(() => ({})))
+            .then((j) => {
+              if (!j.ok) console.warn('[reorder-revert]', j.error || 'failed');
+            })
+            .catch(() => {});
+        }
+      } else if (m.dgn === 'reorder-request') {
+        // Phase 12.1 (DDR-138) — the in-canvas ReorderGrip (untrusted canvas
+        // iframe) can't reach the main-origin-only /_api/reorder (DDR-054), so it
+        // REQUESTS a move; the shell performs the privileged write via reorderLayer
+        // (same lane as edit-text → /_api/edit-text). Honor it ONLY from the ACTIVE
+        // canvas (a background tab's untrusted canvas must not mutate source), and
+        // only for well-formed ids/position (reorderLayer + the server re-validate).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.id === 'string' &&
+          typeof m.refId === 'string' &&
+          (m.position === 'before' ||
+            m.position === 'after' ||
+            m.position === 'inside-start' ||
+            m.position === 'inside-end');
+        if (e.source === activeWin && okShape) {
+          reorderLayerRef.current?.(m.id, m.refId, m.position, {
+            idIndex: Number.isInteger(m.idIndex) ? m.idIndex : undefined,
+            refIndex: Number.isInteger(m.refIndex) ? m.refIndex : undefined,
+          });
+        }
       } else if (m.dgn === 'open-inspector') {
         // Phase 12 — context-menu "Inspect" / tool-palette Inspect opens the right panel.
         openRightPanel('inspector');
@@ -6749,25 +7275,48 @@ function App() {
               el.contentWindow.postMessage({ dgn: 'comment-focus', id: focusedCommentId }, '*');
             } catch {}
           }
-          // Phase 12.3 (W1.1) — an edit-css/edit-attr commit triggers the file
-          // watcher's HMR reload, which remounts the canvas and drops the
-          // in-canvas selection halo. Re-select the same element by its stable
-          // data-cd-id so the user keeps focus on what they're editing. The
-          // canvas-shell `select-by-id` handler re-emits select-set, which keeps
-          // the Inspector panel + halo in sync. Guarded to the active file.
-          const sel = selectedRef.current;
-          if (sel && sel.id && sel.file === m.file) {
+          // Phase 12.1 (DDR-138) — a reorder just wrote source: the moved
+          // element's positional data-cd-id renumbered, so re-selecting by the
+          // PRE-move id would land on the wrong node. Re-select by the recomputed
+          // movedId instead (null ⇒ leave selection to the user, never guess), and
+          // rebuild the layers tree so the panel reflects the new order.
+          const pend = pendingReorderRef.current;
+          if (pend && pend.file === m.file) {
+            pendingReorderRef.current = null;
             try {
               el.contentWindow.postMessage(
-                {
-                  dgn: 'select-by-id',
-                  id: sel.id,
-                  artboardId: sel.artboardId ?? null,
-                  index: sel.index ?? 0,
-                },
+                { dgn: 'request-layers', artboardId: pend.artboardId ?? null },
                 '*'
               );
             } catch {}
+            if (pend.movedId) {
+              try {
+                el.contentWindow.postMessage(
+                  {
+                    dgn: 'select-by-id',
+                    id: pend.movedId,
+                    artboardId: pend.artboardId ?? null,
+                    index: 0,
+                  },
+                  '*'
+                );
+              } catch {}
+            }
+          } else {
+            // Phase 12.3 (W1.1) — an edit-css/edit-attr commit triggers the file
+            // watcher's HMR reload, which remounts the canvas and drops the
+            // in-canvas selection halo. Re-select the same element by its stable
+            // data-cd-id so the user keeps focus on what they're editing. The
+            // canvas-shell `select-by-id` handler re-emits select-set, which keeps
+            // the Inspector panel + halo in sync. Guarded to the active file.
+            // Retry-laddered: dgn:'loaded' fires from the inline inspector script
+            // BEFORE the React canvas-shell mounts its listener, so a one-shot
+            // post is lost on fresh iframes (canvas-switch restore case).
+            const sel0 = selectedRef.current;
+            const sel = Array.isArray(sel0) ? sel0[0] : sel0;
+            if (sel && sel.id && sel.file === m.file) {
+              scheduleHaloRestore(sel);
+            }
           }
         }
       } else if (m.dgn === 'export-request' && m.id && m.payload) {
@@ -6903,6 +7452,104 @@ function App() {
   // iframe sink is fire-and-forget, so without this the POSTs could race).
   const editApplyChainRef = useRef(Promise.resolve());
 
+  // Phase 12.1 (DDR-138) — commit a Layers-panel drag/keyboard reorder. The shell
+  // is main-origin, so it calls the privileged /_api/reorder directly (the CSS/
+  // text edits go the other way — canvas requests, shell writes; here the gesture
+  // originates in the shell). Serialized on the same chain as apply-edit so a
+  // reorder can't race an in-flight edit write to the same file.
+  const reorderLayer = useCallback(
+    (draggedId, refId, position, occ) => {
+      const idIndex = Number.isInteger(occ?.idIndex) ? occ.idIndex : undefined;
+      const refIndex = Number.isInteger(occ?.refIndex) ? occ.refIndex : undefined;
+      // A same-id move is valid for two INSTANCES of a reused component (distinct
+      // occurrence indices → distinct usages); only a true self-move is a no-op.
+      if (!draggedId || !refId) return;
+      if (draggedId === refId && (idIndex ?? 0) === (refIndex ?? 0)) return;
+      const sel = selectedRef.current;
+      const one = Array.isArray(sel) ? sel[0] : sel;
+      // SECURITY (DDR-139 / adversarial F1): a reorder ALWAYS applies to the
+      // ACTIVE canvas — both the in-canvas drag and the Layers panel operate on
+      // what the user is viewing. Pin the target to `activePath`; never derive it
+      // from `selection.canvas`, which an untrusted iframe can spoof (an ungated
+      // dgn:'select' followed by dgn:'reorder-request') to retarget the write to
+      // a DIFFERENT canvas (confused deputy, breaks DDR-054/DDR-138 containment).
+      const canvas = activePath;
+      if (!canvas) return;
+      const file = activePath;
+      const artboardId = layersTree?.artboardId ?? one?.artboardId ?? null;
+      // Optimistically reorder the layers tree so the panel reflects the move
+      // instantly; the HMR rebuild (request-layers, dgn:'loaded') confirms it a
+      // beat later. Ids here are distinct (repeated/list nodes are non-draggable).
+      setLayersTree((prev) =>
+        prev ? { ...prev, nodes: moveLayerNode(prev.nodes, draggedId, refId, position) } : prev
+      );
+      // Gate the next layers-panel drag until the rebuilt tree lands — the write
+      // churns positional ids, so a rapid 2nd drag on the optimistic tree would
+      // carry stale ids. Cleared by the incoming layers-tree message, with a
+      // hard timeout fallback so the list can NEVER stay frozen if that message
+      // doesn't arrive (a no-op reorder, no HMR, etc.).
+      layersBusyRef.current = true;
+      if (layersBusyTimerRef.current) clearTimeout(layersBusyTimerRef.current);
+      layersBusyTimerRef.current = setTimeout(() => {
+        layersBusyRef.current = false;
+        layersBusyTimerRef.current = null;
+      }, 700);
+      editApplyChainRef.current = editApplyChainRef.current
+        .catch(() => {})
+        .then(() =>
+          fetch('/_api/reorder', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ canvas, id: draggedId, refId, position, idIndex, refIndex }),
+          })
+            .then((r) => r.json().catch(() => ({})))
+            .then((j) => {
+              if (!j.ok) {
+                console.warn('[reorder]', j.error || 'failed');
+                // The move was REJECTED (e.g. a .map()ed/looped element, or a
+                // reparent that would break the JSX) — but the canvas already
+                // applied it optimistically (applyDrop) and the layers panel via
+                // moveLayerNode. Nothing was written, so without a revert the user
+                // sees a phantom change that vanishes on the next canvas switch
+                // ("it didn't save") and Cmd+Z has no entry to undo. Tell the
+                // canvas to put the node back; its observer re-posts the tree, so
+                // the panel reverts too. For a LAYERS-panel reorder (no canvas DOM
+                // move to observe) also re-request the tree to drop the optimistic
+                // moveLayerNode.
+                postToActiveCanvas({ dgn: 'reorder-failed' });
+                postToActiveCanvas({ dgn: 'request-layers', artboardId });
+                layersBusyRef.current = false;
+                if (layersBusyTimerRef.current) {
+                  clearTimeout(layersBusyTimerRef.current);
+                  layersBusyTimerRef.current = null;
+                }
+                return;
+              }
+              // The write triggers an HMR reload; the dgn:'loaded' handler
+              // re-selects the moved element by its recomputed id + rebuilds the
+              // tree. movedId is best-effort — null means "leave selection to the
+              // user" (never re-select by the stale pre-move id).
+              pendingReorderRef.current = { file, movedId: j.movedId || null, artboardId };
+              // Record onto the canvas undo stack so Cmd+Z reverts the move via
+              // the server's reorder log (id-churn-proof whole-file swap).
+              if (typeof j.seq === 'number') {
+                postToActiveCanvas({
+                  dgn: 'record-edit',
+                  payload: { op: 'reorder', canvas, seq: j.seq, label: 'move element' },
+                });
+              }
+            })
+            .catch(() => {})
+        );
+    },
+    [activePath, layersTree, postToActiveCanvas]
+  );
+  // Keep the ref the (stale-closure) onMessage reorder-request handler reads
+  // pointed at the latest reorderLayer.
+  useEffect(() => {
+    reorderLayerRef.current = reorderLayer;
+  }, [reorderLayer]);
+
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -7531,6 +8178,8 @@ function App() {
                   index: n ? n.index : 0,
                 })
               }
+              onReorderLayer={reorderLayer}
+              layersBusyRef={layersBusyRef}
               width={rpSize.w}
               resizing={dragSide === 'rp'}
             />
@@ -7560,6 +8209,7 @@ function App() {
                   ? activePath
                   : null
               }
+              selected={selected}
               width={rpSize.w}
               resizing={dragSide === 'rp'}
               onClose={() => setAssistantOpen(false)}