Learn_System/plans/lab-split/PLAN.md

Feature: Lab.html Split

Branch: feature/lab-split Base branch: master Created: 2026-05-22 Status: 🟡 In Progress Strategy: Incremental Mode: Automated Execution: Direct

Summary

Расщепить frontend/lab.html (5180L монолит UI-shell) на модульную структуру: extract inline CSS + inline JS-glue, token purification (265 hardcodes → vars), hash-router для deep-links, optional <template> lazy-mount.

Discovery: симуляции уже extracted в frontend/js/labs/*.js (39 engine-классов). lab.html — это HTML shell с 856L inline CSS + 3435L DOM + 825L inline glue-JS.

Цели:

• lab.html structure clearer (CSS / JS вынесены, HTML только DOM)
• Хардкодов ≤ 30 (от 265)
• Deep-link #sim/projectile работает
• Все 39 симуляций без регрессий
• Pre-commit hook проходит на каждой фазе

Build & Test Commands

• Start: cd backend && npm start (vanilla JS — нет билда)
• Test: cd backend && npm test (66 tests / 63 pass / 3 baseline-fail)
• Lint: cd backend && npm run lint:routes
• Smoke: curl -sI http://localhost:3000/lab → 200; манульно открыть несколько sim
• Pre-commit hook активен — runs all of the above automatically

Phases

• Phase 1: Extract inline <style> → frontend/css/lab.css [domain: frontend] → subplan
• Phase 2: Extract inline glue <script> → frontend/js/labs/lab-glue.js [domain: frontend] → subplan
• Phase 3: Token purification (265 hardcodes) [domain: frontend] → subplan (parallelizable with 1 или 2)
• Phase 4: Hash-router for sim deep-links [domain: frontend] → subplan
• Phase 5: <template> lazy-mount (stretch) [domain: frontend] → subplan

Phase Progress Log

Phase	Domain	Status	Review	Build	Committed
Phase 1: Extract style	frontend	✅ Done	(pre-commit hook)	✅	✅ 46e6d82
Phase 2: Extract glue	frontend	✅ Done	(pre-commit hook)	✅	✅ 92b5c39
Phase 3: Token purify	frontend	✅ Done	(pre-commit hook)	✅	✅ 6792a4a
Phase 4: Hash-router	frontend	✅ Done	(pre-commit hook)	✅	✅ 0b9685b
Phase 5: Template lazy	frontend	🟡 Deferred (post-merge)	—	—	—

Final Review

• Comprehensive code review
• All 39 simulations smoke-tested
• No console errors on /lab
• pre-commit hook passes
• Merged to master

Acceptance Criteria (whole feature)

• lab.html без inline <style> блока (856L moved out)
• lab.html без inline glue <script> блока (825L moved out)
• Хардкодов brand colors ≤ 30 (curated palettes сохраняются)
• #sim/projectile, #sim/newton и др. — deep-link работают, F5 восстанавливает
• 39 симуляций функциональны (canvas рендерится, кнопки работают)
• Pre-commit hook чистый на каждом коммите

Tech Stack & Conventions Reference

• vanilla JS, no bundler, Express static serve
• window.LS.* namespace (api.js)
• LS.modal, LS.confirm, LS.toast
• ls.css design tokens (--violet/--cyan/--green/--pink/--amber + --text/--text-2/--text-3 + spacing + radii)
• Lucide icons (CDN) + inline SVG .ic
• No emoji в коде (pre-commit блокирует)
• No grep tool, только ast-index для search
• Existing labs/*.js engine-классы НЕ трогаем — они уже extracted