Simulator style tokenization plan (2026-03-11)

Background

The simulator UI had repeated hardcoded style values across multiple Vue components. This made global visual adjustments slow and error-prone.

Goal and scope

This iteration standardizes simulator styling by consolidating visual values into shared CSS variables and updating components to consume those tokens.

In scope:

• Tokenize colors, typography, spacing, radius, shadows, and transitions.
• Replace component-level hardcoded values with --mp-* variables.
• Keep existing interaction behavior and layout intent unchanged.

Out of scope:

• Functional changes in map rendering/runtime/event logic.
• Broad redesign of non-simulator surfaces.

Chosen approach

1. Extend the token set in SimulatorMapPlayground.vue root to define a single source of truth for simulator visual language.
2. Refactor simulator component style blocks to reference shared tokens for controls, chips, panels, inputs, dialogs, and empty states.
3. Add explicit token-first guidance to AGENTS.md to prevent future style-value drift.

Impacted files/modules

• src/simulator/components/SimulatorMapPlayground.vue
• src/simulator/components/SimulatorActionBar.vue
• src/simulator/components/SimulatorEditorDialog.vue
• src/simulator/components/SimulatorEventItem.vue
• src/simulator/components/SimulatorEventsPanel.vue
• src/simulator/components/SimulatorInputField.vue
• src/simulator/components/SimulatorInspectorPanel.vue
• src/simulator/components/SimulatorParsedPanel.vue
• src/simulator/components/SimulatorPreviewPanel.vue
• src/simulator/components/SimulatorRoomSelectionPanel.vue
• src/simulator/components/SimulatorRuntimeField.vue
• src/simulator/components/SimulatorRuntimeGroup.vue
• src/simulator/components/SimulatorRuntimePanel.vue
• src/simulator/components/SimulatorTabs.vue
• AGENTS.md

Verification checklist

• [ ] Run npm run lint.
• [ ] Run npx tsc --noEmit.
• [ ] Confirm simulator buttons/chips/panels still render with expected states.
• [ ] Confirm logger toggle and session import/export controls keep behavior.