r216 VSIL Editor Multi-Transform + Context Menu — Implementation Report

Status: ✅ All green · 41/41 r216 unit tests · 21/21 r216 Playwright smoke · 0 regressions in r207-r215

Date: 2026-08-30

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

Base: feat/id9-r214-editor-polish @ 8893a63 (r215)

Repo: avidtech6/vibecoder-standalone

TL;DR

r216 adds two refinement features to the r215 VSIL Editor:

1. Multi-transform apply in Inspector — When N > 1 layers are selected, the Inspector's visible/locked/opacity/blendMode fields apply to ALL selected layers. Name applies to the first selected only.

2. Context menu on LayersPanel — Right-click a layer row to open a context menu with single-row actions (rename, duplicate, move up, move down, delete) or multi-select actions (delete selected, duplicate selected) when the right-clicked row is part of the selection.

Both integrate with the r215 singleton history so undo/redo works across all 6 surfaces.

What's in r216

1. Multi-transform API in selection.ts

New LayerTransform interface: { visible?, locked?, opacity?, blendMode?, name? }.
New applyTransformToSelected(transform, mutate) method on the hook:

1. Reads singleton.currentLayers (the last pushed layers).

2. Walks each layer; if the id is in the selection set, applies the transform fields.

3. Applies name to the first selected only (not all).

4. Calls the mutate callback so the caller can update its local state.

5. Sets singleton.currentLayers to the new layers.

6. Calls pushSnap(buildSnap({ layers: next })) which fires history-applied synchronously (r214.1 invariant).

The sig function now includes opacity, blendMode, and name in the layer hash, so multi-transform pushes always create a new snap (no false dedup).

2. Inspector multi-transform UI

New fields section: visible toggle, locked toggle, opacity slider (0-100), blendMode dropdown (normal/multiply/screen/overlay/darken/lighten).
When N > 1 selected, the section header reads "Multi-transform (N layers)".
Inspector header shows a "N SELECTED" tag when N > 1.
Apply button text: "Apply to " (single) or "Apply transform to N layers" (multi).
The name input is editable (r216 addition); on change it calls applyMulti({ name }).
All field changes are immediate (no separate Apply button needed for the new fields).

3. Context menu on LayersPanel

Right-click on a layer row → opens a context menu at the click position.
Single-row menu (when right-clicked row is NOT part of a multi-select set):

- Rename

- Duplicate

- Move up

- Move down

- Delete

Multi-select menu (when right-clicked row IS part of a multi-select set):

- Delete selected

- Duplicate selected

Menu closes on outside click or Escape key.
Each action pushes a snapshot with all 6 surfaces.

r215 + r214.1 invariants preserved

| Invariant | Status |

|-----------|--------|

| Synchronous history-applied event | ✅ |

| All 6 surfaces in every snap | ✅ (sig now includes opacity/blendMode/name) |

| Editor refocus on mouseDown | ✅ |

| Controlled zoom propagation | ✅ |

| Multi-select toggle (Shift+click) | ✅ |

| Drag-to-reorder correctness | ✅ |

| Order restoration via history-applied | ✅ |

| Canvas multi-highlight | ✅ |

| Inspector first-selected naming | ✅ |

| Label has pointer-events: none | ✅ |

| No iframe in r216 source | ✅ (0 hits) |

| No postMessage in r216 source | ✅ (0 hits) |

| Static React imports | ✅ |

Test results

| Suite | Result |

|------|--------|

| r207 unit tests | 24/24 ✅ |

| r208 unit tests | 27/27 ✅ |

| r210 unit tests | 27/27 ✅ |

| r212 unit tests | 27/27 ✅ |

| r213 unit tests | 36/36 ✅ |

| r214 unit tests | 24/24 ✅ |

| r214.1 unit tests | 18/18 ✅ |

| r215 unit tests | 25/25 ✅ |

| r216 unit tests (NEW) | 41/41 ✅ |

| r212 Playwright smoke | 44/44 ✅ |

| r213 Playwright smoke | 31/31 ✅ |

| r214 Playwright smoke | 23/23 ✅ |

| r214.1 Playwright smoke | 21/21 ✅ |

| r215 Playwright smoke | 18/18 ✅ |

| r216 Playwright smoke (NEW) | 21/21 ✅ |

| Total | 407/407 ✅ |

249 unit + 158 Playwright

r216 unit test sections (41 assertions, 20 sections)

1. Multi-transform: visible toggle affects all selected (4)

2. Multi-transform: locked toggle affects all selected (3)

3. Multi-transform: opacity change affects all selected (2)

4. Multi-transform: blendMode change affects all selected (2)

5. Multi-transform: name change applies to first selected only (2)

6. Undo restores all multi-transform changes (2)

7. Context menu: right-click opens menu (2)

8. Context menu: multi-select context menu actions (3)

9. Context menu: delete action removes a single layer (3)

10. Context menu: duplicate action appends a copy (2)

11. Context menu: move-up via context menu reorders (2)

12. Context menu: closes on outside click (2)

13. Context menu: closes on Escape (2)

14. Inspector multi-tag visible when N > 1 (2)

15. Inspector: visible toggle via DOM click (Edit mode) (2)

16. Label has pointer-events: none (1)

17. Source-level: 0 iframes, 0 postMessage in r216 source (2)

18. applyTransformToSelected with empty selection returns null (1)

19. Context menu header shows "N selected" for multi-select (1)

20. Inspector Apply button text reflects selection count (1)

r216 Playwright smoke (21 assertions, 14 steps)

1. Page loads + Editor mounts via SideChrome → Edit (1)

2. data-r216-wired on Inspector (1)

3. Multi-select bg + scene (shift+click) (1)

4. Inspector shows "2 SELECTED" tag (1)

5. Click visible toggle in Inspector → both have data-visible=0 (2)

6. Cmd+Z undo → both have data-visible=1 (2)

7. Right-click on a row → context menu opens (2)

8. Click "Delete" → row removed (3 layers remain) (3)

9. Right-click another row → context menu opens (1)

10. Click "Duplicate" → 4 layers (3)

11. Multi-select 2 rows, right-click → "Delete selected" action present (2)

12. Click "Delete selected" → 2 layers remain (1)

13. blendMode dropdown present (1)

14. 0 iframes in DOM (1)

Files (7ecbaa4)

src/host/editor/selection.ts                            | +61  (M, applyTransformToSelected + sig update)
src/host/editor/LayersPanel.tsx                         | +253 (M, context menu state + actions + UI)
src/host/editor/Inspector.tsx                           | +275 (M, multi-transform fields + multi-tag)
src/host/editor/__tests__/editor-r216.test.tsx          | +728 (NEW, 41 assertions)
scripts/smoke/r216-smoke.spec.cjs                       | +360 (NEW, 21 assertions)
scripts/smoke/screenshots-r216/                         | 5 PNGs (NEW)

Net: +1487 lines (most are tests + Inspector UI). 3 new files, 3 modified files.

How to verify

cd /workspace/vibecoder-standalone-r214

# Unit tests
npx tsx src/host/editor/__tests__/editor-r216.test.tsx  # 41/41
npx tsx src/host/editor/__tests__/editor-r215.test.tsx  # 25/25
npx tsx src/host/editor/__tests__/editor-r214-1.test.tsx  # 18/18
# All 249 unit tests

# Playwright smoke (port 5304 = r216 vite)
R216_BASE=http://localhost:5304 node scripts/smoke/r216-smoke.spec.cjs  # 21/21
R215_BASE=http://localhost:5304 node scripts/smoke/r215-smoke.spec.cjs  # 18/18
R2141_BASE=http://localhost:5304 node scripts/smoke/r214-1-smoke.spec.cjs  # 21/21
R214_BASE=http://localhost:5304 node scripts/smoke/r214-smoke.spec.cjs  # 23/23
R213_BASE=http://localhost:5304 node scripts/smoke/r213-smoke.spec.cjs  # 31/31
R212_URL=http://localhost:5302 node scripts/smoke/r212-smoke.spec.cjs  # 44/44

# Source check
grep -l "



What's next

Immediate
1. Operator review of the r216 multi-transform + context menu in the dev server (port 5304)
2. Operator decision on merge (r213 + r214 + r214.1 + r215 + r216 = the full ID9 chrome + Editor + polish + stability + multi-select + drag + multi-transform + context menu)

Short-term
3. Production deploy — npm run build + scp to 185.249.73.178?
4. Inspector → AI integration (Phase 4.3 Step 2, requires vault decision)
5. Multi-select keyboard shortcuts (Cmd+A to select all, Esc to clear)

Standing (FVS main, parked)
6. Phase 4.2 dev-server, Phase 4.4.4 Step 3, Phase 4.5 VibeScope sync, Phase 4.6 vault code — operator picks still pending

Open questions for the operator

1. Merge r216 (7ecbaa4) to main now, or wait for next refinement?
2. Production deploy — npm run build + scp to 185.249.73.178?
3. Inspector → AI integration (Phase 4.3 Step 2)?
4. Multi-select keyboard shortcuts (Cmd+A, Esc) — needed, or wait?