feat(widgets): 4×5 grid, allowed block sizes and corner resize

[TheGeniusOfEternity]

Step 2 of the grid refactor. Stacked on #21.

Draft — merge together with step 3 (block size variants). Until blocks get 1×1 / 2×1 variants, every block's smallest size is 2×2, so a new 4×5 widget fits only 4 blocks: a 2×2 block can't use the odd 5th row, and the limit of 8 isn't reachable.

Summary

Grid (shared/widget/geometry.ts): 4 columns × up to 5 editable rows, 129px cells, 12px gap and block padding, 16px block radius. 4×4 = 600×600, 4×5 = 600×741.

Block sizes (shared/widget/blockSizes.ts): each type declares its sizes. For now that's the old sizes doubled (2×2, 2×4, 4×2, 4×4), so blocks keep their current look; variants come in step 3. snapToAllowedSize drives the editor.

Server:

• validateLayouts rejects sizes the type doesn't support and layouts taller than 5 rows. Widgets migrated from the old grid that are already taller stay editable as long as a change doesn't make them taller.
• MAX_WIDGET_BLOCKS = 8.
• New blocks default to 2×2 at the first free spot; presets pack two per row.

Migration 20261003145347_grid_4_columns (data only):

• every block layout ×2, so widgets look the same;
• grid.columns = 4;
• heights recomputed.

Verified on local data: all 8 widgets doubled exactly, heights match the formula. 5 of 8 ended up taller than 5 rows, because old widgets often stacked blocks in one column.

Editor:

• corner resize with a snapped preview (size buttons removed);
• a notice when a change would exceed 5 rows;
• for migrated tall widgets, a notice with "Fit into 5 rows", which re-places blocks at their sizes or explains that they don't fit;
• draft cache key bumped to v5; limit 8.

Fixes:

• FLIP animation was lost in refactor(widgets): render widgets with one shared SVG renderer #21: blocks are no longer inside the grid layer;
• the page could shift sideways on scrollIntoView: .appShell uses overflow-x: clip.

Docs: docs/design/grid-and-blocks.md covers the grid spec, the planned variant matrix and plan tiers (free 8 / paid 16 / special 20; only free is implemented). AGENTS.md and CHANGELOG.md updated.

Test plan

• Migration on a local DB copy: layouts ×2, heights, columns (scripted before/after comparison)
• Browser: migrated widget renders the same layout; corner resize 4×2 → 2×2 with neighbours repacking; "Fit into 5 rows" reports when blocks can't fit; no sideways shift
• Tests: geometry (129px, 318/600/741 heights, free spot), block size snapping, server size/row rules incl. the migrated-widget exception, editor row limit and packing
• format:check, lint, typecheck, test (54 client + 69 server), build, typecheck:api

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
widgecode	Ignored	Preview	Oct 3, 2026 3:33pm UTC