vectojs-responsive-layoutlisted

# VectoJS Responsive Layout Use this skill when a VectoJS UI must adapt to viewport size, browser zoom, density, content length, or resizable panels. ## Layout workflow 1. Define layout state in logical CSS pixels, not backing-store pixels. 2. Resize the `Scene` from the containing element, not blindly from `window`, when embedding in an app shell. 3. Compose with `Stack`, `Flow`, `Card`, `ScrollView`, `VirtualList`, `TreeView`, and resizable panels. 4. After direct child size changes, call the parent layout method and mark the scene dirty. 5. Keep one scroll owner per region; avoid nested wheel handlers without clear boundaries. 6. Use role labels and semantic regions even for canvas-rendered layout containers. Read `references/layout-recipes.md` for copyable patterns. For OS/browser/zoom/DPR consistency and text-selection alignment (embedded `scene.resize()` bridge, Firefox Range recalibration, web-font race, the DPR-1-vs-2 test matrix), read `references/cross-environment.md`. ## Design rules - Use `scene.resize(width, height)` for logical layout dimensions. - Let VectoJS/Canvas handle high-DPI backing stores; do not multiply layout coordinates by DPR. - Make breakpoint decisions from available logical width/height. - Prefer reflowing existing entities to destroying and recreating the full tree. - Reserve virtualization for long lists/tables/trees; do not render thousands of offscreen rows as regular children. - Treat browser zoom as a layout-input multiplier only whe