r214 VSIL Editor Polish + Wiring — AI Summary

Status: ✅ All green · 24/24 r214 unit · 23/23 r214 Playwright · 0 regressions

Branch: feat/id9-r214-editor-polish @ cc216ec (pushed to origin)

Base: feat/id9-r213-vsil-editor @ 3d51f99

TL;DR

• r214 wires the 3 selection surfaces (Canvas, Layers, Inspector) through a shared singleton history with bus-driven sync.
• Adds 12+ keyboard shortcuts (Cmd+Z undo, +/-, V/B/T, Space, [/]).
• Adds drag-to-zoom/pan in Canvas and drag-scrub + keyframe-drag in Timeline.
• Preset pick calls ctx.inspector.vsil.asset.bind(...) to render real VSIL scenes.
• 232/232 total tests pass: 165 unit + 67 Playwright.
• 0 iframes, 0 postMessage in r214 source.
• a788 READ-ONLY invariant preserved.

The 5 polish streams

1. Selection wiring — Canvas click → Layers highlight → Inspector name (via useEditorSelection singleton + bus events)

2. Undo/Redo — singleton history stack (50 entries) shared across components; setCurrentLayers embeds layer state in every push

3. Keyboard shortcuts — Cmd+Z, +/-, V/B/T, Space, [/], etc. (12+ shortcuts)

4. Canvas drag — wheel = zoom, drag = pan, click = select layer

5. Timeline drag — drag-scrub, click+drag keyframes

What this means

The operator opens the Editor (workspace icon → timeline tile → Edit) and now has a real creative tool. Click a layer in the Canvas and it highlights in the Layers panel and populates the Inspector's name. Press V to switch to the move tool, B for brush, T for text. Press Cmd+Z to undo the last action (works across eye toggle, lock toggle, layer reorder, layer select, preset pick). Pick a preset from the bottom-left and the asset gets bound via ctx.inspector.vsil.asset.bind, triggering the r207 PreviewHostVSIL to render. The Timeline supports drag-scrub and click+drag keyframes for fine editing.

The 3 critical r214 details

1. Singleton history with setCurrentLayers — every setActive* push embeds the current layer state, so undo can roll back layer visibility/lock state. This required the LayersPanel to call selection.setCurrentLayers(layers) on every render.

2. queueMicrotask notify — defers subscriber updates to avoid "Cannot update a component while rendering a different component" warnings when one hook triggers a notification during another's setState.

3. Static imports for shortcuts — useShortcuts is a hook that attaches the keydown listener to the editor's outer div via ref. No dynamic imports needed (Vite dual-React trap avoided).

Test results

• 24/24 r207 + 27/27 r208 + 27/27 r210 + 27/27 r212 + 36/36 r213 + 24/24 r214 unit = 165/165 unit
• 23/23 r214 Playwright + 44/44 r212 Playwright = 67/67 Playwright
• Total: 232/232

What's next

1. Operator review of the r214 polish in the dev server (port 5298)

2. Operator decision on merge (r213 + r214 = the full ID9 chrome + Editor + polish)

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

4. Layer drag-to-reorder in Layers panel

5. Multi-select layers (Shift+click)

6. Context menu on layer boxes (right-click)

Open questions

1. Merge r214 to main now, or wait for r215 (multi-select, drag-to-reorder)?

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

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

4. Layer drag-to-reorder — high priority, or wait for r215?

Verification

cd /workspace/vibecoder-standalone-r214
npx tsx src/host/editor/__tests__/editor-r214.test.tsx  # 24/24
npx vite --port 5298 --host 0.0.0.0 &
R214_BASE=http://localhost:5298 node scripts/smoke/r214-smoke.spec.cjs  # 23/23
grep -l "