Appearance
Simulator runtime controls plan
Background
The simulator page already supports source-data debugging for mapHex, pathHex, and roomProperties, but it does not expose the SDK runtime surface. Developers cannot validate runtime-only behavior such as room selection, visibility toggles, or interaction gates from the docs UI.
Goal and scope
This iteration adds a runtime control console to the simulator page.
In scope:
- cover every
RuntimeConfigfield in the docs UI - group fields by behavior and dependency
- keep unsupported fields visible but disabled
- support bidirectional room selection between controls and map clicks
- update runtime incrementally through
mapApi.updateRuntime()
Out of scope:
- full editing workflows for zones, carpets, furniture, spots, or waypoints
- persistence of runtime state across page reloads
- raw JSON runtime editing as the primary input mode
Chosen approach
Use a dedicated runtime console in the left control column, separate from the existing source-data tabs. Model simulator state in three layers:
- source data state for
mapHex,pathHex, androomProperties - derived map state for rooms and runtime support
- runtime draft state for live incremental updates
Use a dedicated room-selection sub-panel for the only strong map-driven interaction. All runtime updates go through updateRuntime(partial) rather than the full render pipeline.
Impacted files or modules
Expected implementation targets:
docs/.vitepress/theme/components/MapPlayground.vuedocs/.vitepress/theme/components/simulator/useMapPlayground.tsdocs/.vitepress/theme/components/simulator/usePlaygroundRender.tsdocs/.vitepress/theme/components/simulator/useMapCanvas.tsdocs/.vitepress/theme/components/simulator/types.ts- new runtime composables under
docs/.vitepress/theme/components/simulator/ - new runtime UI components under
docs/.vitepress/theme/components/simulator/
Verification checklist
- [x]
RuntimeConfigfields are all represented in the simulator UI. - [x] Runtime changes update the live map without full re-render.
- [x]
selectRoomIdsstays synchronized between checklist and map clicks. - [x] Dependency rules disable or normalize invalid child fields.
- [x] Unsupported runtime fields show disabled state with a reason.
- [x]
npm run lintpasses. - [x]
npx tsc --noEmitpasses. - [x]
npm run docs:buildpasses.