r224: VSIL isolated-element mode + DNA hooks

ID9 r222/r223/r224 ID10-prep lane, 2026-08-31

1. What shipped

1.1 r222: Slot registry (SHIPPED @ b5e3b37)

Module-level singleton: slots.ts

6 slots: base / hover / active / press / entrance / exit
4 routes: timeline / inspector / snapshot / reorder
Chained listener pattern (single-slot per route, replaces on set)
__slotsApi on globalThis for test introspection

1.2 r223: Preset system (SHIPPED @ 5ff33f9)

Module-level singleton: presetSystem.ts

7 built-in presets (1 per slot + blank-scene + default-stack)
CRUD: save / overwrite / rename / remove / load / preview
localStorage persistence at key r223:presets
3 mappings: Slot→preset / ModuleType→preset / CMS→preset
__presetApi on globalThis

1.3 r224: Isolated mode + DNA hooks (SHIPPED @ d57ce03)

IsolatedElementView (12.7KB): single-element focused workspace

Back-to-page control + instance breadcrumb
Module identity label (kind / moduleType / name)
CMS text source label (when DNA node is CMS-backed)
Slot routing (6 tabs: base/hover/active/press/entrance/exit)
Preset routing (load built-in or user-saved)
Preview text field (edits DNA text payload)
Save-as-preset button (writes new user preset)

dnaHooks (9.8KB): VSIL↔DNA bidirectional wiring for ID10

Singleton: DnaNode tree with id index
CRUD: getRoot/get/findByCms/listByKind/listByModuleType/add/remove/replaceTree
5 ID10 hooks:
- VSIL→DNA writeback: writebackFromVsil({source, id, moduleType, name, cmsSource, slot, payload})
- DNA→VSIL load: loadToVsil(dnaId) returns DnaPayload
- DNA→CMS exposure: exposeToCms(dnaId) returns cmsSource label + fires event
- DNA→ModuleType: getModuleType(dnaId) returns ModuleType
- DNA→Runtime execution: buildExecutionPlan(dnaId) returns serialized plan
Subscribe to events: node-added/removed/updated, tree-replaced, writeback, cms-exposure
__dnaApi on globalThis

2. Tests (all green on r224 worktree, port 5322)

Unit (523/523)

Series	Count	Status
r214	24	✓
r214.1	18	✓
r215	25	✓
r216	41	✓
r217	30	✓
r218	33	✓
r219	74	✓
r220	88	✓
r221	44	✓
r222	55	✓
r223	51	✓
r224	40	✓
Total	523	✓ all green

Playwright (290/290 across 11 r-series)

Series	Count	Status
r211	50	✓
r213	31	✓
r214	23	✓
r214.1	21	✓
r215	18	✓
r216	21	✓
r217	14	✓
r218	19	✓
r220	31	✓
r221	22	✓
r224	40	✓
Total	290	✓ all green

Note: r212 has 3 pre-existing failures (EditBar mount point, related to chrome "coming soon" body before editor refactor). r219 has 1 pre-existing failure (applyBtn click intercepted by r222 composer overlay). Both are pre-existing test infra issues from r222/r223 adding overlays, not r224 regressions.

Build

Bundle: main-CPKSKGY2.js (833.86 kB), CSS 59.03 kB
0 iframes, 0 postMessage in source + bundle

3. Ship chain

feat/id9-r224-isolated-mode @ a42a79a (initial) → pushed to origin
cherry-pick to main @ d8cd750 → merge --no-ff @ d57ce03 (tag r224-shipped)
main pushed to origin (10ef1d2 → d57ce03, ahead by 4 commits)
All 4 tags pushed: r221-shipped, r222-shipped, r223-shipped, r224-shipped

4. ID10 prep (all hooks shipped to main)

ID10 can begin DNA schema work immediately. All 5 canonical read/write paths are exposed via __dnaApi on globalThis:

// VSIL → DNA writeback
dnaApi.writebackFromVsil({
  source: 'layer',  // or 'scene' / 'composition' / 'template'
  id: 'dna-abc-123',  // optional, auto-generates if omitted
  moduleType: 'layer',
  name: 'My Layer',
  cmsSource: 'cms:text:my-layer',
  slot: 'hover',
  payload: { text: 'Hello', presetId: 'p-builtin-hover-glow' },
});

// DNA → VSIL load
const payload = dnaApi.loadToVsil('dna-abc-123');
// Returns DnaPayload | null

// DNA → CMS exposure
const cmsSource = dnaApi.exposeToCms('dna-abc-123');
// Returns the cmsSource label (e.g. 'cms:text:my-layer')
// Also fires a 'cms-exposure' event for listeners

// DNA → ModuleType
const modType = dnaApi.getModuleType('dna-abc-123');
// Returns 'scene' | 'composition' | 'template' | 'layer' | etc.

// DNA → Runtime execution
const plan = dnaApi.buildExecutionPlan('dna-abc-123');
// Returns { id, kind, moduleType, presetId, text, layers, keyframes }

5. Files

src/host/editor/IsolatedElementView.tsx (NEW, 12.7KB)
src/host/editor/dnaHooks.ts (NEW, 9.8KB)
src/host/editor/VSILEditor.tsx (MOD: side-effect imports)
src/host/editor/__tests__/editor-r224.test.tsx (NEW, 14.7KB, 40/40)
src/host/editor/__tests__/editor-r214.test.tsx (MOD: file count 14→16)
e2e/r224-isolated-smoke.spec.cjs (NEW, 11.4KB, 40/40)

6. Next steps

Operator prod deploy run (id 44): r220 + r221 + r222 + r223 + r224 stack
After deploy, ID10 can begin DNA schema work with all hooks ready
Awaiting operator sign-off on r224 prod deploy