[rubenvdlinde]

Part of #3099, on top of #3212 (tabs model). The first frontend pull request for grid pages: the canvas and the three widgets that render on it. Nothing uses them yet; #3214 adds the dialog to add and configure widgets and #3215 puts the grid on a page. The whole stack is listed in #3211. None of it needs the menu (#3135 to #3138).

Size: 1313 lines: 1082 code (17 of them in package-lock.json) and 231 tests.

What changes

• The grid canvas places widgets on 12 columns with GridStack (MIT, no dependencies of its own). In edit mode widgets can be dragged and resized; every change is emitted as the whole layout and the page decides when to save it. On a narrower screen the grid reflows to 6 columns or one, and that reflow is never saved, so widgets are only arranged at full width.
• Three widgets: a header (heading, subheading, alignment start, center or end, and colours), a text and a table or view. The table or view widget shows the rows with the same components as the start page, and only tables and views of its own application. A widget of a type this frontend can't render says so instead of failing.
• Every widget has an optional title, icon and description. The icon is a named icon; NamedIcon shows an icon by name, and pages and menu items can use it too.
• Keyboard: moving and resizing are also actions in the widget's menu (move left, right, up, down, wider, narrower, taller, shorter), so a grid can be arranged without a mouse.
• The store loads the widget types from GET /api/2/widget-types once, shared by all widgets that mount together; the card uses them for its type label.

How it was tested

• Cypress component tests: GridCanvas.cy.js (placing widgets, edit mode on a wide and a narrow screen, a widget added later), GridWidget.cy.js (title, icon, description and header alignment, the empty states of a data widget, moving from the menu) and gridLayout.cy.js (reading a page into a grid and saving it back, including icon and description)
• npm run lint, npm run stylelint and npm run build
• no PHP changes

🖼️ Screenshots

No screen yet: #3215 puts the grid on a page, its pull request has the screenshots.

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not needed
• 🔙 Backport requests are created or not needed: /backport to stableX.X
• 📅 Milestone is set
• 🌸 PR title is meaningful (if it should be in the changelog: is it meaningful to users?)

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI

[rubenvdlinde]

Following @jancborchardt's feedback on #3099: a table widget shows its title once, a widget keeps the same size in view and edit mode, and the edit mode outline uses var(--color-border).

View	Edit