feat(frame): draw the page as a grid with rails, joins and cells

[datlechin]

Brings the grid-line look of Laravel, Vercel and Tailwind to tablepro.app, as the owner decided on 2026-10-06 (design-system §4.7). It reverses the rebuild's "gutter rails" removal, in a form built so the old frame's defects cannot come back: the rails are drawn on the Container's own box, so they cannot detach; nothing uses vw; nothing clips overflow.

What changes

• Rails (FrameRails): two 1px --rule lines on the wide Container's outer edge, from 1280px. At 1280 they sit on the screen edges. Drawn over the page, and again inside the sticky header because the header is opaque. Below 1280 there are no rails.

• Joins: a full-bleed hairline between every two blocks of <main>, drawn in app.css by position. Every block pads half the section rhythm on each side, which replaces the data-rhythm collapse. Top-level Containers now sit inside full-width blocks, so every join reaches the screen edge. Anchor jumps land behind the header's rule, so /#pricing shows one line.

• Marks: an 11px neutral cross where the frame starts and where it ends, plus the homepage's #pricing join. At most six per page, shown from 82rem, and hidden in forced colours and in print.

• Cells (CellGrid): shared 1px lines that reach the rails. Cells are used for:

  • on the homepage: the actions, engines, sponsors, workflow rows, safety, platforms, plans and closing actions;
  • the /pricing plans;
  • the feature pages' docs/related row.

  #ai, #switch and articles stay unlined.

• A list that ends a block drops its last rule, so two lines never stack just above a join. A list inside a card keeps its rule.

• design-system.md gains §4.7 Page frame and updates the decisions table, §4.3, §4.5, §4.6, §5.1, §5.3.18, §8.1, §10 and §11.

Verification

• php artisan test: 1556 passed, 1 skipped.

• npm run test:js: 185/185 passed.

• tsc clean, and the shared files are unchanged.

• New PageFrameTest covers 15 templates: the rails, a full-width block for every join, no doubled rule, the mark count, cell grids only in wide sections, and the CSS.

• Browser measurement (Chrome) on 20 templates at 390, 768, 1024, 1280, 1366, 1440 and 1920px:

  • no horizontal scroll;
  • rails on the Container edge, and the header's stretch on the same columns;
  • every cell grid's outer lines on the rails from 1280, and at the screen edge below;
  • one join per block boundary;
  • at most six marks.

  The only rules still sitting just above a join are boxes with their own edge: callouts, placeholders, the database facts card and form inputs.

Not checked:

• Safari and Firefox: not run.
• Crisp launcher: it does not load headless. By arithmetic, the right rail passes behind the launcher at about 1326–1446px.

Screenshots

Each image puts the live site today (left) beside this PR's build (right). Light theme at 1440px unless noted. Click an image for full size.

Hero: the two download actions become a row of cells; rails appear from 1280px.

Databases: the featured engines become a wall of cells, and the list by type runs from rail to rail. The marks show where the frame starts.

Sponsors and workflows: the logos become a wall of cells that closes on the next join, and each workflow row is a cell.

Safety: the detail row becomes two cells, split 5 / 7.

Platforms: the Mac and iPhone cards become cells on the band.

Pricing: three joined cells, with a marked join. The prices are unchanged.

Closing actions and footer: the actions close on the footer's rule, where the frame's end marks sit.

Dark theme

/pricing: a join under the page header, and the plans as cells.

Phone, 390px: no rails. Cells run to the screen edge, so only horizontal lines remain.