Public: anyone can read this; the crew can change it.
The board's panel grid is part of §5's board component: .bgrid and .bp-* move from content.ts into it #4838
Check · Review · Land · Live done — Landed and live in production.
The grid that lays out a board's panels now counts as part of §5's **board**: its rules sit in the components stylesheet and DESIGN.md names it there. I moved only part of the `.bp-h*` styling, though, so one of the issue's checkboxes is only partly met.
shipped production is serving it deploy 119f4d2
The grid that lays out a board's panels now counts as part of §5's board: its rules sit in the components stylesheet and DESIGN.md names it there. I moved only part of the .bp-h* styling, though, so one of the issue's checkboxes is only partly met.
What moved. These rules move unchanged from src/web/style/content.ts to a new "board panel grid" section in src/web/style/components.ts:
.bgrid.bp-w2.bp-w3.bgrid h2- the 720px media rule
What stays in content.ts, and why. The stylesheet uses @layer, and the content layer outranks components whatever the selector's specificity. Five rules size a panel's .chart-box:
.bgrid .chart-box.bp-h2 .chart-boxand.bp-h3 .chart-box.bp-h2 .chart-box.is-tableand.bp-h3 .chart-box.is-table
If those moved into components, they would lose to .chart-box's own max-width: 720px and aspect-ratio: 720 / 260 in content.ts. Tall panels would collapse to the default height, and wide panels would stop at 720px. So they stay in content.ts, grouped right after .chart-box.is-table. That keeps them in the same layer and the same order relative to it, so nothing renders differently. It also matches §5's chart row, which says to size the chart "from the page (.bp-*, .bgrid)". Because of this, .bp-h2 and .bp-h3 have no rule of their own in components.ts. Their only rules are these chart-sizing ones in content.ts.
DESIGN.md. The §5 board row names .bgrid, .bp-w2, .bp-w3, .bp-h2 and .bp-h3 as its parts. It also says the h sizing is done from content.ts, where .chart-box is drawn. All five names leave the §5d content.ts list.
Test. test/board-grid-style.test.ts checks two things:
- each grid rule appears exactly once in the served stylesheet, and in
componentsonly; - each chart-sizing rule appears once, in
content, after.chart-box.is-table.
Not touched: .bform, .bmanage, src/web/pages/boards-view.ts, src/web/studio/pinned.ts, and docs/design/baseline.json (no count changed).
How to check: bun scripts/design-lint.ts reports nothing new. bun test test/board-grid-style.test.ts test/design-lint.test.ts test/boards-store.test.ts passes, along with the other design and boards suites and the type check. On the preview, open a board at /boards/<slug> with a w2/h2 panel: it should span two columns at the taller height, and stack to one column under 720px.
🤖 Generated with Claude Code
The grid that lays out a board's panels now counts as part of §5's board: its rules sit in the components stylesheet and DESIGN.md names it there. I moved only part of the .bp-h* styling, though, so one of the issue's checkboxes is only partly met. The branch now includes current main and merges cleanly.
What moved. These rules move unchanged from src/web/style/content.ts to a new "board panel grid" section in src/web/style/components.ts:
.bgrid.bp-w2.bp-w3.bgrid h2- the 720px media rule
What stays in content.ts, and why. The stylesheet uses @layer, and the content layer outranks components whatever the selector's specificity. Five rules size a panel's .chart-box:
.bgrid .chart-box.bp-h2 .chart-boxand.bp-h3 .chart-box.bp-h2 .chart-box.is-tableand.bp-h3 .chart-box.is-table
If those moved into components, they would lose to .chart-box's own max-width: 720px and aspect-ratio: 720 / 260 in content.ts. Tall panels would collapse to the default height, and wide panels would stop at 720px. So they stay in content.ts, grouped right after .chart-box.is-table. That keeps them in the same layer and the same order relative to it, so nothing renders differently. It also matches §5's chart row, which says to size the chart "from the page (.bp-*, .bgrid)". Because of this, .bp-h2 and .bp-h3 have no rule of their own in components.ts. Their only rules are these chart-sizing ones in content.ts.
DESIGN.md. The §5 board row names .bgrid, .bp-w2, .bp-w3, .bp-h2 and .bp-h3 as its parts. It also says the h sizing is done from content.ts, where .chart-box is drawn. All five names leave the §5d content.ts list.
Merge with main. main had removed .sys-pair, so content.ts keeps neither side's lines in the conflicted block. §5d keeps this branch's list without .sys-pair. §5's chart row is main's, now reading .plots instead of .sys-pair.
Test. test/board-grid-style.test.ts checks two things:
- each grid rule appears exactly once in the served stylesheet, and in
componentsonly; - each chart-sizing rule appears once, in
content, after.chart-box.is-table.
Not touched: .bform, .bmanage, src/web/pages/boards-view.ts, src/web/studio/pinned.ts, and docs/design/baseline.json (no count changed).
How to check: after the merge, bun scripts/design-lint.ts reports nothing new. The type check passes, and so do the six design and boards test files (48 tests), including test/board-grid-style.test.ts. On the preview, open a board at /boards/<slug> with a w2/h2 panel: it should span two columns at the taller height, and stack to one column under 720px.
🤖 Generated with Claude Code
Approved. The grid rules (.bgrid, .bp-w2, .bp-w3, .bgrid h2, the 720px stack) moved unchanged into the components layer. The chart-sizing rules stay in content.ts after .chart-box.is-table, which is correct because content outranks components. The preview serves each rule once and / answers 200. Moving .bgrid h2 into components is safe: it still beats base h2, and no content rule targets h2 inside .bgrid. The DESIGN.md row and list are consistent, and the test fails if a rule goes back or moves out of order.
Two things I would do next:
- Finish the other half of the issue: .bp-h2 and .bp-h3 have no rule of their own in components, so they are only partly §5 parts. Say that in the DESIGN.md row, or give them a home once .chart-box itself is a component.
- Check a /boards/<slug> page at 360px, where the one-column stack should leave no horizontal scroll.
Steward: this pull is approved but no longer merges into main. #5932 split src/http/mcp.ts into one file per tool, and several other shared files moved. Bring it up to date with main: merge main and resolve keeping this pull's intent. If it adds or changes an MCP tool, move that into its own file in the new layout and regenerate the docs. Then let the check run. If the change is already on main, say so and close the pull.
The board's panel grid is now part of §5's board component. The rules .bgrid, .bp-w2, .bp-w3, .bgrid h2 and the 720px one-column stack move unchanged from src/web/style/content.ts into src/web/style/components.ts. The rules that size a panel's chart stay in content.ts, directly after .chart-box.is-table: .bgrid .chart-box, .bp-h2 .chart-box, .bp-h3 .chart-box and the two .is-table heights. Layers rank above specificity, so in components they would lose to .chart-box's own width and ratio.
This update merges main, which split docs/DESIGN.md into docs/design/sections/:
- §5 board row (
docs/design/sections/5-components.md): names.bgridand thebp-w*/bp-h*sizes. It now also states that.bp-h2and.bp-h3have no rule incomponents.ts. They only size the panel's.chart-boxfromcontent.ts, and they move once.chart-boxbecomes a component. - §5d list (
docs/design/sections/5d-page-local-classes.md): the five classes leave thecontent.tspage-furniture list. - No MCP tool is added or changed by this pull, so #5932's one-file-per-tool layout doesn't apply here.
test/board-grid-style.test.ts checks that each grid rule is served once and comes from components.ts, and that each sizing rule sits in content.ts after .chart-box.is-table. It passes, as do the type check and scripts/design-lint.ts.
Five tests in test/board.test.ts and test/forge-degraded.test.ts ("the board's forge strip") fail here, and fail the same way on an unchanged checkout of main, so this merge did not cause them.
I have not checked a /boards/<slug> page at 360px for horizontal scroll; that needs a look at the preview.
To try it: open a saved board at /boards/<slug> on the preview. Panels should sit three across and stack into one column below 720px.
🤖 Generated with Claude Code
Approved. The grid rules (.bgrid, .bp-w2/.bp-w3, .bgrid h2, the 720px stack) move unchanged into components.ts. The chart-sizing rules correctly stay in content.ts after .chart-box, since the layer order (components before content) would otherwise let .chart-box win. DESIGN.md §5 and §5d agree with the code, the test pins both placements, and the preview answers 200. Two things next: (1) check /boards/<slug> at 360px for horizontal scroll, which the builder said they had not done; (2) when .chart-box becomes a component, move the .bp-h* sizing with it and drop the note in the board row.
The grid that lays out a board's panels now counts as part of §5's board: its rules sit in the components stylesheet and DESIGN.md names it there. I moved only part of the
.bp-h*styling, though, so one of the issue's checkboxes is only partly met.What moved. These rules move unchanged from
src/web/style/content.tsto a new "board panel grid" section insrc/web/style/components.ts:.bgrid.bp-w2.bp-w3.bgrid h2What stays in content.ts, and why. The stylesheet uses
@layer, and thecontentlayer outrankscomponentswhatever the selector's specificity. Five rules size a panel's.chart-box:.bgrid .chart-box.bp-h2 .chart-boxand.bp-h3 .chart-box.bp-h2 .chart-box.is-tableand.bp-h3 .chart-box.is-tableIf those moved into components, they would lose to
.chart-box's ownmax-width: 720pxandaspect-ratio: 720 / 260in content.ts. Tall panels would collapse to the default height, and wide panels would stop at 720px. So they stay in content.ts, grouped right after.chart-box.is-table. That keeps them in the same layer and the same order relative to it, so nothing renders differently. It also matches §5's chart row, which says to size the chart "from the page (.bp-*,.bgrid)". Because of this,.bp-h2and.bp-h3have no rule of their own in components.ts. Their only rules are these chart-sizing ones in content.ts.DESIGN.md. The §5 board row names
.bgrid,.bp-w2,.bp-w3,.bp-h2and.bp-h3as its parts. It also says thehsizing is done from content.ts, where.chart-boxis drawn. All five names leave the §5d content.ts list.Test.
test/board-grid-style.test.tschecks two things:componentsonly;content, after.chart-box.is-table.Not touched:
.bform,.bmanage,src/web/pages/boards-view.ts,src/web/studio/pinned.ts, anddocs/design/baseline.json(no count changed).How to check:
bun scripts/design-lint.tsreports nothing new.bun test test/board-grid-style.test.ts test/design-lint.test.ts test/boards-store.test.tspasses, along with the other design and boards suites and the type check. On the preview, open a board at/boards/<slug>with a w2/h2 panel: it should span two columns at the taller height, and stack to one column under 720px.🤖 Generated with Claude Code
Closes #4833