[do-io]

Summary

With all 29 slot types editable (#7), the sidebar was a flat list of 29 text rows that pushed the Structure list below the fold. This redesigns the left panel:

• Tile grid: a 2-column grid of tiles, each with a Heroicons outline icon and a short label ("Quote", "Logo wall", "Sidebar split"). The full label and description are in the tooltip and the accessible name.
• Groups: Structure, Content, Columns & layout, Commerce, Engagement, Data & feeds.
• Search: matches every word against the label, short label, description and group name.
• Blocks / Structure tabs: the Structure list is one click away. The tabs use tab roles and arrow-key navigation.
• Click-to-add and drag-to-place use the same handlers as before.

Schema changes

The schema export gains groups and, on each slot, short_label, group and description. SlotSchemaRegistry::VERSION is now 3. Additive, so it fits a minor release.

Five blocks that shared an icon now have distinct ones, which Filament picks up too: three_column (squares-plus), order_receipt (receipt-percent), dynamic_feed (arrow-path), labeled_divider (ellipsis-horizontal).

Icons

resources/js/editor/icons.js holds the path data of the 29 icons, copied from Heroicons v2 (MIT). No new dependency, about 10 KB in the unminified bundle. A test fails if a schema icon has no path data.

Test plan

• vendor/bin/pest (115 tests), npm run test:js (27), vendor/bin/phpstan analyse, vendor/bin/pint --test
• Workbench demo: 29 tiles in 6 groups; search for "price" returns only Catalog; a click adds a block with no preview error; the tabs switch; dragging a tile inserts exactly one block at the drop position
• Not checked: mobile width, and the Filament field

🤖 Generated with Claude Code