Appearance
Simulator events console plan
Background
The simulator page already helps developers validate source data input and runtime configuration, but it does not expose SDK callback activity. Developers can interact with the map yet still need custom code to inspect which callbacks fire and what payloads they receive.
Goal and scope
This iteration adds a developer-facing Events console to the simulator.
In scope:
- record SDK public callbacks only
- start with
onClickRoomandonClickRoomProperties - show callback names, times, summaries, and expandable JSON payloads
- add pause, clear, copy, and filter actions
- place the console near the map preview
- introduce
reka-uias a lightweight primitive layer for new overlays and collapsible UI
Out of scope:
- logging simulator-internal actions
- toast notifications for each callback
- a generic SDK logging framework
- a full migration of simulator controls to
reka-ui
Chosen approach
Use a dedicated Events console placed with the map preview. Record events by wrapping the SDK MapCallbacks passed into the map instance. Persist only a bounded in-memory event list, with lightweight helpers for summaries, filtering, and JSON export.
Introduce reka-ui only for the new interaction primitives that need stronger accessibility and structure, such as collapsible payload details and event filter controls.
Impacted files or modules
Expected implementation targets:
docs/.vitepress/theme/components/MapPlayground.vuedocs/.vitepress/theme/components/simulator/useMapPlayground.tsdocs/.vitepress/theme/components/simulator/useMapCanvas.tsdocs/.vitepress/theme/components/simulator/usePlaygroundRender.tsdocs/.vitepress/theme/components/simulator/types.tsdocs/.vitepress/theme/components/simulator/sdkTypes.ts- new event composables under
docs/.vitepress/theme/components/simulator/ - new event UI components under
docs/.vitepress/theme/components/simulator/ package.jsonand lockfile for the new UI primitive dependency
Verification checklist
- [ ] Clicking a room appends an
onClickRoomrecord. - [ ] Clicking a room property appends an
onClickRoomPropertiesrecord. - [ ] Event rows show exact callback names and readable summaries.
- [ ] Pause stops new records without clearing the list.
- [ ] Clear resets only the event log.
- [ ] Copy exports valid JSON.
- [ ] The event list is bounded to the latest
100entries. - [ ]
npm run lintpasses. - [ ]
npx tsc --noEmitpasses. - [ ]
npm run docs:buildpasses.