Public: anyone can read this; the crew can change it.
The page shell's top bar and wide mode are named in docs/design/areas/shell.md, and their classes leave §5d #5515
Check · Review · Land · Live done — Landed and live in production.
The page shell's top bar and wide mode now have their own area file. The new `docs/design/areas/shell.md` describes the shell: `page()` in `src/web/layout.ts` draws it, `topbar()` draws the top bar and `searchBar()` draws the search. Its rules live in `src/web/style/base.ts`, and the search field's rules in `src/web/style/components.ts`. The file names each of the four classes in a code span with…
shipped production is serving it deploy 1f09d72
The page shell's top bar and wide mode now have their own area file. The new docs/design/areas/shell.md describes the shell: page() in src/web/layout.ts draws it, topbar() draws the top bar and searchBar() draws the search. Its rules live in src/web/style/base.ts, and the search field's rules in src/web/style/components.ts. The file names each of the four classes in a code span with what it is for:
.topbar-tools: the right-hand group of the top bar..topbar-search: the search pill, shown from 720px wide..hide-lg: the narrow-screen stand-in for.hide-sm, used for the search icon button..shell-wide: from 1200px wide, lets the main column use the full width with a 24px margin.
The descriptions match what the stylesheet rules currently do.
In docs/DESIGN.md §5d, only those four classes' own lines are deleted: two from the style/base.ts list and two from the style/components.ts list. Every other line is untouched. No markup or stylesheet rule changed, so every page looks the same as before.
bun scripts/design-lint.ts passes. test/design-lint.test.ts and test/review-design.test.ts, which cover the documented-class check, pass (18 tests).
🤖 Generated with Claude Code
Docs-only move, and it is accurate. I checked each description against the stylesheet and the markup. .topbar-tools is a flex row that shrinks but does not wrap, with 44px bare a.small links (base.ts:121-122). .topbar-search is a bordered pill with an accent border on focus (components.ts:622-635). .hide-lg hides at the wide breakpoint, and layout.ts:265 uses it on the search icon button. .shell-wide applies from 1200px with a 24px gutter, set when a page passes wide (layout.ts:532). Only the four class lines left §5d, and the new file is in the form docs/design/areas/README.md asks for. No markup or CSS changed, so the preview is unchanged. Two things I would do next: (1) in shell.md, state the 720px breakpoint once in a single place instead of in two bullets, so it cannot drift from base.ts; (2) move the other shell classes still in §5d (.shell, .topbar, .foot, .skip, .hide-sm) into shell.md, so the file becomes the whole vocabulary of the area.
The page shell's top bar and wide mode now have their own area file. The new
docs/design/areas/shell.mddescribes the shell:page()insrc/web/layout.tsdraws it,topbar()draws the top bar andsearchBar()draws the search. Its rules live insrc/web/style/base.ts, and the search field's rules insrc/web/style/components.ts. The file names each of the four classes in a code span with what it is for:.topbar-tools: the right-hand group of the top bar..topbar-search: the search pill, shown from 720px wide..hide-lg: the narrow-screen stand-in for.hide-sm, used for the search icon button..shell-wide: from 1200px wide, lets the main column use the full width with a 24px margin.The descriptions match what the stylesheet rules currently do.
In
docs/DESIGN.md§5d, only those four classes' own lines are deleted: two from thestyle/base.tslist and two from thestyle/components.tslist. Every other line is untouched. No markup or stylesheet rule changed, so every page looks the same as before.bun scripts/design-lint.tspasses.test/design-lint.test.tsandtest/review-design.test.ts, which cover the documented-class check, pass (18 tests).🤖 Generated with Claude Code
Closes #5496