Files
Maxim Dolgolyov 77ebe9e3e4 chore(plan): lab-split 5-phase plan
PLAN.md + 5 subplans + CONTEXT.md

Strategy: Incremental | Mode: Automated | Execution: Direct

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 22:33:41 +03:00

2.2 KiB

Feature Context: Lab.html Split

Current State

  • lab.html: 5180L total
    • Lines 10-866: inline <style> block (856L)
    • Lines 868-4303: HTML body with 39 sim-panels
    • Lines 4304-4326: external script tags (engine modules)
    • Lines 4327-5152: inline <script> block (825L glue)
    • Lines 5153+: more script tags
  • 39 engine modules already extracted in frontend/js/labs/*.js
  • lab-init.js (543L) is the orchestrator
  • 265 hardcoded brand colors throughout
  • 1017 inline style= attributes

Key Discoveries

  • Each sim has a <div id="sim-X" class="sim-proj-wrap" style="display:none"> pattern
  • Sim activation likely via sim-switcher element + JS that toggles display
  • Lab has its own large CSS scope that doesn't conflict with ls.css (verify)

Cross-Phase Dependencies

  • Phase 1 (extract style) — independent
  • Phase 2 (extract glue) — independent of Phase 1
  • Phase 3 (token purification) — can run after Phase 1 (CSS file becomes purification target)
  • Phase 4 (hash-router) — needs Phase 2 (router code in lab-glue.js easier to extend than inline)
  • Phase 5 (template lazy) — needs Phase 4 (router triggers template activation)

Temporary Workarounds

(пусто — заполняется implementer'ом)

Implementation Notes

Что НЕ трогаем

  • frontend/js/labs/*.js engine-классы (CollisionSim, ProjectileSim и т.д.) — они работают
  • frontend/js/labs/lab-init.js — orchestrator, может расширяться, но не переписываться целиком
  • <canvas> элементы и их id — engine-классы binds к ним по id

Безопасные паттерны (из прошлой работы)

  • Extract <style> → external file: добавить <link rel="stylesheet"> в head, скопировать содержимое в .css, удалить inline. Проверить визуал curl-200 + spot-check styles.
  • Extract <script> → external file: добавить <script src=> ПОСЛЕ engine-modules, переместить glue. Watch for global-leak (если inline relies on top-level vars).
  • Token purification: replace #9B5DE5var(--violet), keep tints (rgba(...)), keep curated palettes.