SolidJS Editor Host for a Phaser game engine, built to a .pen design spec

What they did

The author finished ticket COD-80 in the codogma-engine repo: a standalone SolidJS + TypeScript/TSX Editor Host under `src/editor/`, replacing the legacy Colibri editor UI while keeping existing backend and data contracts intact. They scaffolded a Vite + SolidJS + Tailwind CSS 4 app on loopback `127.0.0.1:5173`, proxying relative `/editor/*` requests to the existing Node backend on `127.0.0.1:3000` with a strict Origin allow-list. The workbench was built against the canonical `src/editor/codogma-editor.pen` artboards (Dark/Light and Compact): menu, toolbar, Scene/Game viewport, Hierarchy, Inspector, Project/Assets, Animation, Components, Console, Godot SVG icons, semantic design tokens, and persisted responsive layout. They implemented splitters and resize, Console dock/undock, moving Hierarchy and Inspector into a Bottom Dock with home-slot restore via an Undock button, pointer-drag tab reordering, and state persistence across reload. A focus/command model scopes W/E/R/Q and F2/Delete to Scene/Hierarchy context so Inspector inputs don't swallow shortcuts, and the Command Palette traps Tab and restores focus. The Scene Canvas is Phaser-backed with a local project runtime, selection, and Move/Rotate/Scale gestures synced to Inspector and Undo/Redo. Open/save/reopen of `.scene` files, add/remove Image/Text/Container, transform/label/Text editing, dirty-state confirmation, and stale async response guards were added. Game View loads the existing generated `index.html` in an iframe rather than duplicating the serializer. The production Node server serves hashed Vite assets from `src/editor/dist/assets/` at `/editor/assets/*`. Sprite Sheet descriptors were aligned with Phaser grid math and frame ranges, malformed template literals in three domain modules were fixed, and a `minimatch` audit blocker was pinned to 11.0.3 via a root override. All five domain models (Scene, Animation, Prefab, User Components, Sprite Asset) moved from JS plus `.d.mts` sidecars to real TypeScript, with `allowJs: false` and the full ADR-0002 strict profile in `src/editor/tsconfig.json`. Tests are TypeScript + Vitest (6 files) and Playwright acceptance specs with an isolated backend fixture launcher. Docs updated: spec, ADR-0002/0005, migration plan, code quality baseline, agent instructions, changelog.

How it went

CI Fast run #475 passed both jobs (`fast-checks` and `editor-host`) at HEAD `8417a66`. The host passed full ADR-0002 strict typecheck and a Vite production build; Vitest reported 6 files, 36 passed, 0 failed; Chromium Playwright acceptance reported 9 passed. `fast-checks` also passed root/editor build, regression suite, server/security smoke tests, mini-services security, localization acceptance, and MCP package tests. The slice is deliberately scoped: docking covers Console plus Hierarchy/Inspector bottom-dock moves and tab reordering, not universal floating windows or free-split zones. Scene Canvas is an authoring preview, not a full Prefab/component runtime reconstruction, and editing `.scene` does not regenerate `game.js`. Animation covers basic Phaser JSON clip/frame ops only; timeline tracks, curves, keyframes, events, and state graphs are deferred. User Components and Prefab have base models only; script lifecycle/codegen, nested Prefab overrides, and full parity are separate slices. Sprite/Spine/Tilemap/Physics/FX/importer workflows, session-aware MCP SSE routing, production cutover, rollback window, and Colibri removal are out of scope.

Worth knowing

The Host package still installs with `npm install --no-audit --no-fund` and the generated lockfile is uploaded as a workflow artifact; `src/editor/package-lock.json` must be synced and committed before switching to `npm ci`, and the post does not claim that check is done. The TypeScript-only policy is a migration boundary, not a blanket rewrite: existing `server/*.mjs`, legacy `source/editor/`, generated/vendored code, and repo-level smoke/security scripts stay as-is, and new feature logic must go into TS with documented exceptions. Legacy Colibri remains available until a separate cutover on branch `feat/cod-80-solidjs-editor-host-20261101` into `dev`. The audit threshold was not weakened, but the pin is an override rather than an upstream fix.

Wiring

Order of operations: (1) scaffold `src/editor/` as a Vite + SolidJS + Tailwind 4 package with its own `tsconfig.json` (`allowJs: false`, `strict`, `noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`, `noImplicitOverride`, `noImplicitReturns`, `noFallthroughCasesInSwitch`, `forceConsistentCasingInFileNames`, `noUnusedLocals`, `noUnusedParameters`); (2) configure the Vite dev server on `127.0.0.1:5173` with a proxy for `/editor/*` to `127.0.0.1:3000` and an Origin allow-list; (3) build the workbench components against the `.pen` artboards, wiring design tokens and layout persistence; (4) implement the focus/command model as a context-scoped key handler so editable inputs opt out, and the Command Palette as a focus-trapping dialog; (5) mount the Phaser Scene Canvas against the local project runtime and bind selection/gestures to Inspector state and an Undo/Redo stack; (6) wire `.scene` open/save/reopen through the existing backend contracts, adding dirty-state confirmation and request-sequence guards for stale responses; (7) point Game View at the generated `index.html` via iframe; (8) update the production Node server to serve `src/editor/dist/assets/*` at `/editor/assets/*`; (9) convert the five domain models to TS and delete `.d.mts` sidecars; (10) add Vitest config and 6 test files, Playwright config plus acceptance specs and an isolated backend fixture launcher; (11) pin `minimatch` to 11.0.3 via a root override and regenerate the lockfile; (12) add CI jobs `fast-checks` and `editor-host` running typecheck, Vite build, Vitest, and Playwright.

Try it yourself

In this repo, build a standalone SolidJS + TypeScript editor host under `src/editor/` that mirrors the artboards in `src/editor/codogma-editor.pen`. Requirements: (1) Vite + SolidJS + Tailwind CSS 4 app on `127.0.0.1:5173` proxying `/editor/*` to the existing Node backend on `127.0.0.1:3000` with a strict Origin allow-list; (2) workbench with menu, toolbar, Scene/Game viewport, Hierarchy, Inspector, Project/Assets, Animation, Components, Console, semantic design tokens, and persisted responsive layout; (3) splitters, Console dock/undock, Hierarchy/Inspector move to Bottom Dock with home-slot restore, pointer-drag tab reorder, state persisted across reload; (4) focus/command model where W/E/R/Q and F2/Delete only fire in Scene/Hierarchy context and the Command Palette traps Tab and restores focus; (5) Phaser-backed Scene Canvas with selection and Move/Rotate/Scale synced to Inspector and Undo/Redo; (6) open/save/reopen `.scene`, add/remove Image/Text/Container, edit transform/label/Text, dirty-state confirmation, stale async guards; (7) Game View loads the existing generated `index.html` in an iframe without duplicating the serializer; (8) production Node server serves hashed Vite assets from `src/editor/dist/assets/` at `/editor/assets/*`. Convert all five domain models (Scene, Animation, Prefab, User Components, Sprite Asset) to real TypeScript, set `allowJs: false` and the full ADR-0002 strict profile in `src/editor/tsconfig.json`, and write Vitest unit/integration tests plus Playwright acceptance specs in TypeScript. Do not rewrite `server/*.mjs`, legacy `source/editor/`, or generated code.