Simulator MapPlayground Refactor Plan

Background

MapPlayground.vue had accumulated page composition, rendering lifecycle, cache persistence, and editor modal logic in one file, making iterative changes costly.

Goal And Scope

Refactor to align with Vue 3 composition practices while preserving behavior and UI.

In scope:

• Move simulator state and business logic into a composable.
• Move fullscreen editor modal into a standalone component.
• Keep existing render behavior, cache behavior, and interactions unchanged.

Out of scope:

• Functional redesign.
• New features.

Chosen Approach

• Reduced MapPlayground.vue to a page-level composition shell.
• Split rendering state and pipeline into usePlaygroundRender.ts.
• Kept page interaction state in useMapPlayground.ts.
• Extracted cache, summaries, default room demo generation, auto-render debounce, and map canvas lifecycle into focused utility modules.
• Extracted preview, tabs, input field, parsed panel, action bar, and editor dialog into standalone UI components.

Impacted Files Or Modules

• docs/.vitepress/theme/components/MapPlayground.vue
• docs/.vitepress/theme/components/simulator/SimulatorActionBar.vue
• docs/.vitepress/theme/components/simulator/useMapPlayground.ts
• docs/.vitepress/theme/components/simulator/SimulatorEditorDialog.vue
• docs/.vitepress/theme/components/simulator/SimulatorInputField.vue
• docs/.vitepress/theme/components/simulator/SimulatorParsedPanel.vue
• docs/.vitepress/theme/components/simulator/SimulatorPreviewPanel.vue
• docs/.vitepress/theme/components/simulator/SimulatorTabs.vue
• docs/.vitepress/theme/components/simulator/cache.ts
• docs/.vitepress/theme/components/simulator/constants.ts
• docs/.vitepress/theme/components/simulator/defaultRoomProperties.ts
• docs/.vitepress/theme/components/simulator/summaries.ts
• docs/.vitepress/theme/components/simulator/types.ts
• docs/.vitepress/theme/components/simulator/useAutoRender.ts
• docs/.vitepress/theme/components/simulator/useMapCanvas.ts
• docs/.vitepress/theme/components/simulator/usePlaygroundRender.ts

Verification Checklist

• npm run lint passes.
• npx tsc --noEmit passes.
• npm run docs:build passes.