feat(core): multi-board layout — rows, vertical stacks, grids (0.4.0)

[daniellee-ux]

What

Multiple Scenes in one design could only auto-flow into a single horizontal row, so a design could not place a new version beneath an existing set of boards. This adds a configurable board arrangement.

export const layout: BoardLayout

Field	Default	Meaning
direction	'row'	Flow axis — row left→right, column top→bottom
wrap	none	Wrap onto a new line after N boards
gap / crossGap	96 / gap	Gap along the flow axis / between lines
align	'center'	Cross-axis alignment of unequal boards inside a line
justify	'start'	A short line's placement along the flow axis

Scene.break — start a new line at this board; the local alternative to a module-wide wrap, and the way to author uneven rows (6 then 5).

export const layout: BoardLayout = { wrap: 6 };   // 6 per row, the 7th drops below
// or, without touching the module layout:
V7.break = true;

Defaults reproduce the previous layout exactly: one row, 96px gaps, shorter boards vertically centered.

Notes

• Positions stay baked into the boards returned by layoutBoards, so the Stage render and zoom-to-board (viewport.fitTo) keep one source of truth.
• Lines stay in scene order, so DOM order — and therefore export order and the layers panel — are unchanged.
• Also bumps @opencanva/core and create-opencanva to 0.4.0 (wrapper dep → ^0.4.0). Not yet published to npm.

Verification

Ran a 7-board scratch design on the dev server:

• 6 in a row + the 7th directly below (via break, and via wrap: 6)
• wrap: 3 grid, direction: 'column' stack, direction: 'column', wrap: 4
• align: 'start', justify: 'center', custom gap/crossGap
• Measured offsets (0,60) (696,0) … (0,616) — the taller board still centers in its row; row 2 starts at 520 + 96
• Zoom-to-board from the layers panel frames a second-row board correctly
• window.__ox.lint() → 0 issues, no console errors

Local CI equivalents pass: core/demo/template typechecks, check:sync, check-template-scaffold.mjs.

🤖 Generated with Claude Code