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

Merged opened this

Check · Review · Land · Live done — Landed and live in production.

Merged

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 cc21c84

opened this

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 by userMenu(), searchBar() and helpItem in src/web/layout.ts, fileHeader() in src/web/diff-view.ts and boardPage() in src/web/pages/board.ts. Styled by .hide-sm, which shows it as inline-flex from the small breakpoint up.
  • .js-only: written by helpItem and footer() in layout.ts, systemPage(), copyBtn() in origins.ts, finderButton() in explorer.ts and drawMap() in map.ts. Styled by .js-only and :root.js .js-only.
  • .reduced: the issue calls this a reduced-motion class, but it isn't. It is the reduced-protection notice that footer() in layout.ts shows to admins only (from protectionNotice()), and it is styled by .foot .reduced. The new doc describes what the class actually does and says it has nothing to do with prefers-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

commented

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 by userMenu(), searchBar() and helpItem in src/web/layout.ts, fileHeader() in src/web/diff-view.ts and boardPage() in src/web/pages/board.ts. Styled by .hide-sm, which shows it as inline-flex from the small breakpoint up.
  • .js-only: written by helpItem and footer() in layout.ts, systemPage(), copyBtn() in origins.ts, finderButton() in explorer.ts and drawMap() in map.ts. Styled by .js-only and :root.js .js-only.
  • .reduced: the issue calls this a reduced-motion class, but it isn't. It is the reduced-protection notice that footer() in layout.ts shows to admins only (from protectionNotice()), and it is styled by .foot .reduced. The new doc describes what the class actually does and says it has nothing to do with prefers-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

Approved — before the latest push

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.

commented

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

Approved — before the latest push

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.

commented

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, .small and .sr-only came off; .mark and .num are described in docs/design/areas/text.md. An earlier merge already took .hide-lg off; it lives in shell.md.
  • From this branch: .hide-sm, .js-only and .reduced came 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

Approved — before the latest push

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.

commented

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.

commented

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

Approved — before the latest push

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.

commented

.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

Approved

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.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs