v6.11.9 — Panel Architecture Redesign + Bug Fixes

Full Panel Architecture Redesign

Complete rewrite of the panel layout system based on 15-agent expert analysis (architecture strategist, best-practices researcher, performance oracle, design reviewer, Dooms-Enhancement-Suite analysis).

Architecture

• Flexbox column layout — panel uses display:flex; flex-direction:column; overflow:hidden
• Per-section scrolling — each section scrolls independently within max-height:70vh
• Content stops at last element — no wasted space below short sections
• Zero bleed — sections occupy non-overlapping flex regions by construction
• Zero JS height calculations — flexbox handles all sizing

Toolbar

• Features dropdown (4 toggles → 1 button with checkboxes)
• Button groups with pill backgrounds
• State-driven brand icon (idle/generating/error)
• Contextual subtitle with live scene info

Typography

• 12px minimum font floor with CSS variable scale system
• --sp-fs-base through --sp-fs-xl — override base to scale everything
• ~200 font-size declarations migrated to variables

New Features

• Section header icons (SVG per section type)
• Collapse/expand all button for Characters + Relationships
• Elapsed field in Scene Details
• Sparklines visible at all resolutions
• Story ideas positional slot ordering (guaranteed 5 unique types)

Bug Fixes

• Fix stuck scene transition overlay (#10) — replaced unreliable setTimeout with animationend event for cleanup. Card now removed from DOM entirely after animation.

Polish

• 40+ hardcoded colors → theme variables
• 10-item UX polish from design review
• Mobile/tablet mode fixes
• ~35 lines stale code removed

32 files changed, 900+ insertions, 710+ deletions