Restyle the Docs reader + Technical|Product outline tree

[AndresL230]

Reworks the Docs page end to end: the reader's markdown rendering (styled with the theme vars, holds in dark/light/midnight) and a rebuilt left tree organized around the real Sapling documentation.

Stacked on feat/mywork-grid-seed-docs (#24). Base this PR there, not main.

Reader

• Centered reading column (~730px measure), wrap-safe title, mono SPACE / SECTION eyebrow.
• Markdown: stronger reading ink, real heading hierarchy (h2 hairline rule, distinct h3, mono h4), language-tagged code panels, callout blockquotes, crisp inline-code, accent-numbered ordered lists, editorial ledger tables. Tables scroll-wrap; headings get anchor ids.

Sidebar — Technical | Product

• The space toggle is now Technical | Product (data-driven, so prod's Sapling|Canopy still works). Canopy tooling docs are dropped from the dev seed; DocSpace widened to string.
• Technical: Architecture · AI & Learning Engine · Engineering Guide · Decisions.
• Product: Overview · Roadmap · Brand & Marketing.
• Section names are static group labels; each page is the collapsible unit — expand it (chevron) to reveal its own in-page headings, and clicking a heading opens the doc if needed and scrolls the reader to that section. Opening a page shows only its outline (others collapse); the chevron still lets you peek another page's outline.

Data

• fixtures/dev/docs.json is rebuilt from the real Sapling docs pulled verbatim from the prod store (+ Roadmap from the Sapling repo), reshaped into the Technical/Product taxonomy. One agent-proposed edit is left staged so the Triage/proposals queue stays populated.
• scripts/seed/build.mjs auto-registers the sections the fixtures use (the docs.section → sections.name FK) — local seed only, never remote.

New / notable

• web/src/outline.ts: shared slugifyHeading + extractOutline so tree links resolve to reader heading anchors.
• Scroll-to-heading is instant (smooth is a silent no-op on this nested overflow container) and deferred one frame so it lands after the render swap.

Verification

• Driven in-browser across dark / light / midnight in both Technical and Product spaces: toggle, per-page outlines, chevron peek, and scroll-to-heading (early headings land at the top; every color resolves from theme vars).
• npm run typecheck green · npm test 418/418.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 14a39b55-7a41-4599-8ac0-50acc65802ec

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/docs-reader-restyle

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	canopy	65a2310	Commit Preview URL Branch Preview URL	Jul 07 2026, 05:38 AM