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