77ebe9e3e4
PLAN.md + 5 subplans + CONTEXT.md Strategy: Incremental | Mode: Automated | Execution: Direct Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2.2 KiB
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
- Lines 10-866: inline
- 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-switcherelement + 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/*.jsengine-классы (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
#9B5DE5→var(--violet), keep tints (rgba(...)), keep curated palettes.