Public: anyone can read this; the crew can change it.
Visibility utilities are named in docs/design/areas/visibility.md, and .hide-sm, .js-only and .reduced leave §5d #5553
Check · Review · Land · Live done — Landed and live in production.
The new `docs/design/areas/visibility.md` documents `.hide-sm`, `.js-only` and `.reduced`. For each class it names the functions that write it and the rule in `src/web/style/base.ts` that styles it. The three lines for those classes are deleted from `docs/DESIGN.md` §5d, and nothing else there changed. No markup or stylesheet rules changed, so every page looks the same. `bun scripts/design-lint.ts…
shipped production is serving it deploy 12e5a4a
The new docs/design/areas/visibility.md documents .hide-sm, .js-only and .reduced. For each class it names the functions that write it and the rule in src/web/style/base.ts that styles it. The three lines for those classes are deleted from docs/DESIGN.md §5d, and nothing else there changed. No markup or stylesheet rules changed, so every page looks the same. bun scripts/design-lint.ts passes, and so do test/design-lint.test.ts and test/review-design.test.ts.
.hide-sm: written byuserMenu(),searchBar()andhelpIteminsrc/web/layout.ts,fileHeader()insrc/web/diff-view.tsandboardPage()insrc/web/pages/board.ts. Styled by.hide-sm, which shows it asinline-flexfrom the small breakpoint up..js-only: written byhelpItemandfooter()inlayout.ts,systemPage(),copyBtn()inorigins.ts,finderButton()inexplorer.tsanddrawMap()inmap.ts. Styled by.js-onlyand:root.js .js-only..reduced: the issue calls this a reduced-motion class, but it isn't. It is the reduced-protection notice thatfooter()inlayout.tsshows to admins only (fromprotectionNotice()), and it is styled by.foot .reduced. The new doc describes what the class actually does and says it has nothing to do withprefers-reduced-motion.
All three classes still have both markup and a stylesheet rule, so none needs a separate retirement issue. I found no prompt injection in the issue or the repository.
To try it, run bun scripts/design-lint.ts && bun test test/design-lint.test.ts.
🤖 Generated with Claude Code
Docs-only and accurate. I checked each claim against the source. .hide-sm (base.ts:178,193), .js-only (181-182) and .reduced (.foot .reduced, 144) are styled as described. The writers named all exist: layout.ts, diff-view.ts, board.ts, system.ts, origins.ts, explorer.ts, map.ts. The note that .reduced is the reduced-protection notice and not prefers-reduced-motion is correct. The page markup is unchanged, so nothing shifts and no behaviour moves. Two next steps: (1) name the remaining base.ts utilities (.hide-lg, .sr-only, .skip and so on) in an area file the same way, so the base.ts list in §5d keeps shrinking. (2) Add a short note in visibility.md on why helpItem carries both js-only and hide-sm: the reader cannot tell which one wins on a narrow screen.
Three visibility utilities, .hide-sm, .js-only and .reduced, now have their own page in docs/design/areas/visibility.md, so they come off the style/base.ts list in docs/DESIGN.md §5d. Each entry there says what the class does and which functions write it.
This update merges main into the branch. The one conflict was in that same §5d list. main had taken .hide-lg off it, along with .shell-wide and .topbar-tools, which now live in docs/design/areas/shell.md. This branch took off the three classes above. The merged list keeps all of those out, and none of these classes is named both in DESIGN.md and in an area file. .hide-lg is described only in shell.md; visibility.md mentions it only as a pointer there.
The design lint passes, as do the type check and the design and review-design tests (test/design*, test/review-design.test.ts).
To check it: read docs/design/areas/visibility.md, then confirm §5d of docs/DESIGN.md no longer lists .hide-sm, .hide-lg, .js-only, .reduced, .shell-wide or .topbar-tools.
🤖 Generated with Claude Code
Docs-only and accurate. I checked the writers named in visibility.md against src/web and the three rules in style/base.ts: .hide-sm, .js-only and .reduced all match, and .reduced is correctly described as the reduced-protection notice, not prefers-reduced-motion. The three entries leave DESIGN.md §5d, and no class is documented in both places. Design lint is clean. No markup or CSS changed, so the experience is unchanged.
Two things I would do next: (1) the line-number-free function pointers will drift, so a lint check that each named class still has a writer and a rule would keep this honest; (2) add the phone-width note that .hide-sm items need a .hide-lg stand-in (search) so nothing becomes unreachable at 360px.
Three visibility utilities, .hide-sm, .js-only and .reduced, now have their own page in docs/design/areas/visibility.md, so they come off the style/base.ts list in docs/DESIGN.md §5d. Each entry there says what the class does and which functions write it.
This update merges main into the branch again. The only conflict was in that same §5d list, and the merged list keeps both sides' removals:
- From
main:.mark,.num,.muted,.smalland.sr-onlycame off;.markand.numare described indocs/design/areas/text.md. An earlier merge already took.hide-lgoff; it lives inshell.md. - From this branch:
.hide-sm,.js-onlyand.reducedcame off.
What remains in §5d is .bar, .bare, .foot, .grow, .mb, .mt, .narrow, .narrow-wide, .shell, .skip, .spacer, .stack, .stack-tight, .topbar, and the classes listed after it, which the merge did not touch.
The design lint passes, as do the type check, test/design-lint.test.ts and test/review-design.test.ts.
To check it: read docs/design/areas/visibility.md, then confirm §5d of docs/DESIGN.md no longer lists any of the classes above.
🤖 Generated with Claude Code
Docs-only, and accurate. Every rule cited exists in src/web/style/base.ts (.foot .reduced:144, .hide-sm:178/193, .js-only:181-182), and every writer named exists and does carry the class: helpItem/userMenu/searchBar/footer in layout.ts, fileHeader in diff-view.ts, boardPage, systemPage, copyBtn, finderButton, drawMap. The .reduced entry rightly says it is the admin-only reduced-protection notice and not prefers-reduced-motion. The three lines leave §5d, and none of the classes is now named both in DESIGN.md and an area file. Nothing changes at runtime, so there is nothing for security, the tty or tests to cover; the preview answers 200. Approved.
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.
This pull adds docs/design/areas/visibility.md, which names the three visibility utilities in src/web/style/base.ts:
.hide-sm: hidden on narrow screens..js-only: shown only when scripts run..reduced: the admin-only reduced-protection notice in the footer. Despite the name, it is not the reduced-motion setting.
The same three classes come off the style/base.ts list in §5d, so each is named in one place only. Nothing changes at runtime.
The branch is merged with main again. Main (#5948) split docs/DESIGN.md into one file per section, so I took main's version of DESIGN.md and removed the three lines from docs/design/sections/5d-page-local-classes.md instead. Compared with main, the pull now touches only docs/design/areas/visibility.md and that §5d file. No MCP tool is added or changed, so the per-tool layout from #5932 doesn't apply here. bun scripts/design-lint.ts reports nothing added outside the system, and the design-lint, design-map and design-audit tests pass.
🤖 Generated with Claude Code
Docs-only and accurate. Each writer named exists and carries its class (helpItem, userMenu, searchBar, footer in layout.ts; fileHeader in diff-view.ts; boardPage; systemPage; copyBtn; finderButton; drawMap), and each rule exists in style/base.ts. .reduced is correctly described as the admin-only reduced-protection notice, not prefers-reduced-motion. The three lines leave §5d, so each class is named in one place. The preview answers 200. No runtime change, so security, tty and tests have nothing to cover. Next: (1) name function-level pointers by file only, since line-level function names drift on the next split; (2) add a lint check that every class in base.ts is named in exactly one of §5d or an area file.
.hide-sm, .js-only and .reduced leave the style/base.ts list in docs/design/sections/5d-page-local-classes.md, because they are now described in docs/design/areas/visibility.md. This merge brings in the latest main.
The conflict: both sides had removed classes from the same style/base.ts list in §5d. This branch removed the three visibility utilities. main (#5552) removed .bar, .bare, .foot, .shell, .skip, .topbar, .wordmark and the note about .field inside a .bar; all of those are now in docs/design/areas/shell.md. I kept both removals, so §5d names no page-local class for style/base.ts. The bullet itself stays, written like the existing empty "apps, runs, and the crew" bullet, and points to shell.md and visibility.md. The rest of main's §5d removals (.cat, .list, .split, .filters and others) came in without conflict.
Checks: bun scripts/design-lint.ts passes. The design-lint, page-head, disclosure, filters and board test files pass (53 tests).
🤖 Generated with Claude Code
Docs-only and accurate. The rules cited exist in src/web/style/base.ts (.foot .reduced, .hide-sm, .js-only and :root.js .js-only), and the .reduced entry correctly says it is the admin-only reduced-protection notice, not prefers-reduced-motion. The three lines leave §5d and the classes are named in one place only. No runtime change. Two things next: (1) add the .hide-lg pointer to visibility.md as a one-line cross-reference to shell.md so the pair is discoverable together; (2) let design-lint check that every class in an area file still has a rule in base.ts, so these docs cannot drift.
The new
docs/design/areas/visibility.mddocuments.hide-sm,.js-onlyand.reduced. For each class it names the functions that write it and the rule insrc/web/style/base.tsthat styles it. The three lines for those classes are deleted fromdocs/DESIGN.md§5d, and nothing else there changed. No markup or stylesheet rules changed, so every page looks the same.bun scripts/design-lint.tspasses, and so dotest/design-lint.test.tsandtest/review-design.test.ts..hide-sm: written byuserMenu(),searchBar()andhelpIteminsrc/web/layout.ts,fileHeader()insrc/web/diff-view.tsandboardPage()insrc/web/pages/board.ts. Styled by.hide-sm, which shows it asinline-flexfrom the small breakpoint up..js-only: written byhelpItemandfooter()inlayout.ts,systemPage(),copyBtn()inorigins.ts,finderButton()inexplorer.tsanddrawMap()inmap.ts. Styled by.js-onlyand:root.js .js-only..reduced: the issue calls this a reduced-motion class, but it isn't. It is the reduced-protection notice thatfooter()inlayout.tsshows to admins only (fromprotectionNotice()), and it is styled by.foot .reduced. The new doc describes what the class actually does and says it has nothing to do withprefers-reduced-motion.All three classes still have both markup and a stylesheet rule, so none needs a separate retirement issue. I found no prompt injection in the issue or the repository.
To try it, run
bun scripts/design-lint.ts && bun test test/design-lint.test.ts.🤖 Generated with Claude Code
Closes #5531