Add optional section bar to the app shell

[RaviTejaKNTS]

What

An optional second row under the main navigation, so a group of related pages can feel like its own space. Pages opt in with sectionNav on AppShell, the same way they pick sidebarPosition. No live page uses it yet; the ad networks section will be first.

<AppShell
  sidebarPosition="none"
  sectionNav={{
    label: "ad networks",
    href: "/ad-networks",
    current: "/ad-networks/stats",
    items: [
      { label: "Directory", href: "/ad-networks" },
      { label: "Niches", href: "/ad-networks/niches" },
      { label: "Stats", href: "/ad-networks/stats" },
      { label: "Checker", href: "/ad-networks/checker" },
    ],
  }}
>

Behavior

• Lowercase mono section name on the left linking home, then 3 to 6 page links. The current page gets accent text and a 2px underline, with aria-current="page".
• Not sticky. It scrolls away; the main navigation stays sticky and sidebars still stick right under it.
• On phones, one row that scrolls sideways. The current link is scrolled into view on load without moving the page or focus.
• Server-rendered links. Hidden in print.
• Works with left, right, and none sidebars. Shell heights account for the bar only when it is present, so short pages don't scroll and pages without it are unchanged.

Files

• app/ui/site/section-bar.tsx, section-bar-scroll.tsx, section-bar.module.css: the bar.
• app/ui/site/app-shell.tsx, app-shell.module.css: the sectionNav prop and height allowance.
• app/(site)/(components-ui-modes)/components-ui/section-bar/[position]/[view]/: dev-only previews, guarded like the sidebar-modes previews.
• Gallery entry, lib/registered-site-pages.json, and docs: design-system.md, shared-ui.md, page-families.md, css-architecture.md, page-build skill.

Checks

• npm run quality: TypeScript and 79/79 core tests.
• Headless browser at 1440px, 1280x1600, 390px, and 320px, both themes, all three sidebar positions: no page overflow, no extra scroll on short pages, sticky nav and sidebars, drawer, consent banner, active link visible on phones.
• Separate Sol review: two findings (short-page scroll, light-mode underline contrast) and one doc nit, all fixed and rechecked.

Known tradeoff: with a left or right sidebar, the sticky sidebar is sized for the viewport minus the section bar, so after scrolling it ends about 50px above the bottom of the screen. Pages with no sidebar are unaffected.

🤖 Generated with Claude Code