r215 VSIL Editor Multi-Select + Drag-to-Reorder — AI Summary

Status: ✅ All green · 25/25 r215 unit · 18/18 r215 Playwright · 0 regressions

Branch: feat/id9-r214-editor-polish @ 8893a63 (pushed to origin, on top of bc3c338)

Base: feat/id9-r214-editor-polish @ bc3c338 (r214.1)

TL;DR

• r215 adds 2 refinement features to the r214.1 VSIL Editor: multi-select + drag-to-reorder for LayersPanel.
• Multi-select: Shift+click toggles a row in the selection set; plain click replaces the set with the single row.
• Drag-to-reorder: pointer down/move/up swaps layers vertically; up/down buttons still work as a deterministic alternate path.
• Both integrate with the r214.1 singleton history so undo/redo works across all 6 surfaces.
• 345/345 total tests pass: 208 unit + 137 Playwright. 0 iframes, 0 postMessage.

The 4 r215 changes

1. Multi-select in selection.ts — singleton gains currentSelected: RegionId[]; SelectionSnapshot gains selectedRegionIds: RegionId[]; hook exposes setSelectedRegionIds(ids, opts) with opts.replace (default) or opts.toggle (Shift+click).

2. LayersPanel multi-select — click handler reads event.shiftKey; rows with data-active=1 reflect the selected set; footer shows "N selected".

3. LayersPanel drag-to-reorder — onPointerDown/Move/Up tracks the drop target via document.elementFromPoint; pointerUp swaps the dragged row with the drop target + pushes a snap. Action buttons stopPropagation so they don't trigger drag.

4. LayersPanel history-applied listener restored order — r214.1 only updated visible/locked; r215 now restores the layer ORDER from the snap (when all ids match), so undo of a drag actually reorders the rows.

What this means

• The Editor now has the 2 features any world-class creative app needs: multi-select (Photoshop/Figma/Sketch all have it) and drag-to-reorder.
• Both are wired into the unified history, so Cmd+Z / Cmd+Shift+Z work exactly as expected.
• The Layers panel feels like a real layer panel, not a list of rows.
• All r214.1 stability guarantees preserved (synchronous event, full-state snapshots, refocus on mouseDown, controlled zoom, static imports, 0 iframes, 0 postMessage).

The 3 critical r215 details

1. Selection model is a RegionId[] on the singleton, not a single activeRegionId — the singleton has currentSelected: RegionId[]. setActiveRegionId(id) is now a shortcut for setSelectedRegionIds([id], { replace: true }). activeRegionId is derived as selectedRegionIds[0] ?? null for backward compat.

2. Drag-to-reorder snapshot includes selectedRegionIds — every snap now has { activeAssetId, activeRegionId, selectedRegionIds, layers, zoom, tool } — 6 surfaces. Undo restores all 6.

3. history-applied listener restores the snap's order, not just fields — when all snap ids match prev, use the snap's order. Otherwise fall back to updating fields and preserving order.

Test results

• 24 r207 + 27 r208 + 27 r210 + 27 r212 + 36 r213 + 24 r214 + 18 r214.1 + 25 r215 unit = 208/208 unit
• 44 r212 + 31 r213 + 23 r214 + 21 r214.1 + 18 r215 Playwright = 137/137 Playwright
• Total: 345/345

What's next

1. Operator review of the r215 multi-select + drag in the dev server (port 5301)

2. Operator decision on merge (r213 + r214 + r214.1 + r215 = the full ID9 chrome + Editor + polish + stability + multi-select + drag)

3. Multi-transform apply — Inspector's "Apply" should affect all selected layers (currently applies to the first)

4. Context menu on layer boxes (right-click for delete/duplicate/etc)

5. Production deploy — npm run build + scp to 185.249.73.178?

Open questions

1. Merge r215 (8893a63) to main now, or wait for multi-transform apply (r216)?

2. Production deploy — npm run build + scp to 185.249.73.178?

3. Context menu on layer boxes — high priority, or wait?

4. Inspector → AI integration (Phase 4.3 Step 2)?

Verification

cd /workspace/vibecoder-standalone-r214
npx tsx src/host/editor/__tests__/editor-r215.test.tsx  # 25/25
R215_BASE=http://localhost:5301 node scripts/smoke/r215-smoke.spec.cjs  # 18/18
grep -l "