Tile manager
CSS-grid dashboard with draggable + resizable tiles. The WC owns the layout math (collision-aware reflow via a 2D bin-packer); consumers project content into named slots and listen for tilelayoutchange.
Keyboard shortcuts
- Tab — focus the tile board. Exactly one tile is in the tab order (roving tabindex), so Tab again leaves the board.
- → / ↓ — focus the next tile · ← / ↑ — the previous one. The order is row-major (top-to-bottom, then left-to-right) and it wraps around the ends; the arrows step through that sequence rather than moving geometrically, so ↓ does not necessarily land on the tile below.
- Home / End — first / last tile in row-major order
- M — enter move mode on the focused tile. Ignored on a tile that has both
disableMove and disableResize. - In move mode: ↑ / ↓ / ← / → move the tile by one grid cell, Shift + arrow grows or shrinks its span by one column / row. Each step reflows the other tiles through the packer and emits
tilelayoutchange; a step the packer can't place is announced as “Move blocked” and changes nothing. - Enter — commit and leave move mode · Esc — leave move mode and restore the layout as it was when move mode was entered
- Esc during a pointer drag or resize — cancel that gesture
4 tiles, 4-column grid
Weather
Sunny · 22 °C · 5 km/h NW
Inbox
3 unread · 2 starred
Stats
1.2k visits · ↑12% week-over-week
Calendar
Next: Standup at 10:00
Latest layout
Drag a tile to capture a layout.