[AnayDhawan]

Summary

The page list in the Brand Guidelines studio was 24 switches in one column. It is now grouped into the eight sections of the book: Foundation, Logo, Color, Type, Imagery, UI, Voice and Tokens.

• Every GuidelinePage has a section (a new field, typed from guidelineSections in lib/guidelines/types.ts). It is separate from the label each page draws in its running header, so the pages themselves look exactly as before.
• Each section folds (a disclosure button with aria-expanded and aria-controls) and has a switch for the whole section. A folded section still shows how many of its pages are on, as 3/5 (read out as "3 of 5 pages on").
• A section switch writes its pages into the same excluded list the PDF, the website and the Markdown export already read, so numbering, the contents and the PDF bookmarks follow as they do today. The exports needed no change.
• The cover has no switch and stays in the book, so switching Foundation off leaves the cover.
• A section switch is on while any page it can turn off is on. Turning it off switches all of them off. Turning it on from off switches all of them on.
• The grouping and switching logic is pure and lives in lib/guidelines/sections.ts. The list is split into guideline-page-list.tsx (state) and guideline-section-group.tsx (one section).
• While checking the list with axe in a mixed state, a switched-off page title failed color-contrast because it was dimmed with opacity-50. This was already true before this change, and the existing axe scan never sees it because it only opens the studio with every page on. A switched-off title now uses text-subtle-foreground.
• Docs: docs/guidelines-pages.md explains the section field and the new test. CHANGELOG.md has an entry under Unreleased.

Closes #423

Screenshots

Screenshots to be attached: the page list in light and dark at desktop width, and at 375 px, each with every section open and with some sections folded and some pages and a whole section switched off.

What changed visually:

• The single column of switches is now eight groups. Each group has a chevron, the section name, a n/total count and its own switch on the right, in line with the page switches below it.
• Folded sections hide their pages and keep the count and the section switch.
• Switched-off pages show -- instead of a number and a dimmer title that still meets 4.5:1 in both themes.
• The cover switch is still disabled.

Checklist

• pnpm typecheck, pnpm test, pnpm lint, pnpm check:dashes and pnpm build pass
• Conventional commit messages (feat:, fix:, docs:, chore:)
• Tested in dark and light themes and at mobile width (375 px)
• Works with keyboard only
• No any, no console.log, no new external services without a note in .env.example
• Docs and CHANGELOG.md updated if behavior changed

Breaking changes

None. The switched-off list in the persisted guidelines store keeps its shape (a list of page ids), so saved projects and stored state open as before. GuidelinePage has a new required section field, which only matters to code that builds its own GuidelinePage (all 24 registered pages are updated).

Testing completed

Run on Windows with Node 24 and pnpm 11:

• pnpm typecheck, pnpm lint (one existing warning in lib/color/matrix.test.ts), pnpm format:check and pnpm build pass.
• pnpm test: 2480 tests pass. The first box above is left unticked because 18 tests in lib/background/merge.test.ts fail on my machine. They compare generated CSS with fixture files, and the fixtures are checked out with CRLF line endings on Windows (core.autocrlf=true). I did not touch that file or its fixtures. I expect CI on Linux to pass but have not seen it run.
• pnpm check:dashes reports two hits, both inside untracked packages/cli/node_modules/vite/dist files that pnpm install created on my machine. No file in this change has a dash.
• New tests in lib/guidelines/sections.test.ts: every registered page has a known section, the sections come out in order and each page once, a section's pages are one run in book order, grouping and switching on and off (other entries kept, no duplicates, the cover never added), and page numbers follow. For each of the eight sections switched off, the website has no page or art for its pages, the Markdown export has no art and its headings still count 1, 2, 3, and the contents numbering follows. A new test in lib/guidelines/outline.test.ts checks the PDF bookmarks skip a switched-off section. The PDF itself is not rasterized in unit tests (it needs a canvas); it uses the same filtered page list, which is what the tests cover.
• Browser checks with Playwright and headless Chromium against pnpm start on a production build: tests/e2e/axe.spec.ts for Brand Guidelines passes in light and dark, and so do the Brand Guidelines route and g shortcut tests. A separate script ran axe in light and dark at 1280 px and 375 px with some sections folded and some pages and one whole section off (no serious or critical violations after the contrast fix), and checked there is no horizontal page scroll at 375 px.
• Keyboard only (Tab, Shift+Tab, Space, Enter, scripted): fold and unfold a section, switch a section off and see its count and -- numbers, see later pages renumber, switch one page back on, select a page, and confirm the cover switch stays disabled and Foundation off leaves 1 of 3.
• Not done: I did not click through it by hand in a headed browser or on a real phone (375 px is an emulated viewport), I did not download and open a real PDF, website or Markdown ZIP from the UI, and I did not run the Lighthouse workflow or the other e2e specs.

[vercel]

@AnayDhawan is attempting to deploy a commit to the yashkewlani2020-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[yakew7]

@AnayDhawan Fix CI Fail