feat: ship website audit fixes and interactive component demos

[smiggleworth]

Summary

• implement the existing ComponentDemoDefinition seam in the docs renderer
• add interactive demos for 14 behavior-heavy component pages
• keep demos statically renderable and hydration-safe
• include the existing website audit fixes recorded in todo.md

TDD

• Red: added a catalog regression requiring demos for Dialog, Select, Combobox, Calendar, Tabs, Accordion, Switch, Slider, Checkbox, Radio Group, Popover, Tooltip, Menu, and Toast.
• Green: added the demo registry and rendered direct components under each page's existing live-examples section.

Validation

• npm test
• npm run lint
• npm run fmt:check
• npm run typecheck
• npm run build
• git diff --check

Squash merge requested.

[Copilot]

Pull request overview

This PR upgrades the website/docs experience by adding interactive component demos to behavior-heavy docs pages, tightening the docs “worked example”/TOC behavior, and applying a set of marketing-page + audit-driven layout/content improvements (including new reusable marketing visual patterns and a package/peer-dependency table).

Changes:

• Add a component demo registry and render interactive demos in docs pages.
• Refactor docs usage-guide/example generation (including optional example sections and improved static verification).
• Refresh marketing pages and shared components/styles (SequenceList, FlowMap, PackageTable, CTA updates), plus workflow hardening (pinned GitHub Actions) and CODEOWNERS.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
todo.md	Adds the audit TODO list and context referenced by this PR.
tests/docs-catalog.test.ts	Updates catalog tests for optional usage guides and asserts demo coverage.
src/styles.css	Replaces older marketing-specific list/map styling with shared Sequence/Flow/PackageTable styles and adds visually-hidden utility.
src/pages/marketing/tooling.tsx	Switches starter list to SequenceList and adds EditorialCTA.
src/pages/marketing/themes.tsx	Switches relationship list to SequenceList, tweaks link copy, adds EditorialCTA.
src/pages/marketing/rendering.tsx	Replaces custom rendering diagram with FlowMap and adds EditorialCTA.
src/pages/marketing/production.tsx	Replaces production diagram with FlowMap and adds EditorialCTA.
src/pages/marketing/platform.tsx	Adds generated package dependency table and migrates journey UI to SequenceList; updates CTA.
src/pages/marketing/home.tsx	Updates hero CTA destinations/copy and refines route-registry messaging.
src/pages/marketing/full-stack.tsx	Replaces composition diagram with FlowMap and adds EditorialCTA.
src/pages/marketing/components.tsx	Adds routing-safe CTA link behavior, and introduces SequenceList/FlowMap/PackageTable components.
src/pages/marketing/application-model.tsx	Replaces concept list with SequenceList and adds EditorialCTA.
src/pages/marketing/_routes.tsx	Updates marketing metadata title formatting for /.
src/pages/docs/usage-guide.ts	Centralizes per-route examples, pins CLI version usage, and makes usage guides optional.
src/pages/docs/types.ts	Extends ComponentDemoDefinition to include a direct component reference.
src/pages/docs/page.tsx	Renders optional “Example” section and adds component demo rendering.
src/pages/docs/package-versions.ts	Adds generated package peer-dependency data used by marketing/platform.
src/pages/docs/content-overrides.ts	Updates copy to match the new example/demo behavior and adds description overrides + late heading overrides.
src/pages/docs/component-demos.tsx	New: interactive demo implementations and registry lookup helpers.
src/pages/docs/catalog.ts	Adds per-section meta descriptions, late overrides, and makes TOC “Example” conditional.
scripts/verify-static-output.ts	Tightens static checks around example anchors/wording.
scripts/generate-api-snapshot.ts	Extends generator to emit package peer-dependency map.
.github/workflows/deploy.yml	Pins GitHub Actions to SHAs for supply-chain hardening.
.github/workflows/ci.yml	Pins GitHub Actions to SHAs for supply-chain hardening.
.github/CODEOWNERS	Adds repository-wide code ownership.

Comments suppressed due to low confidence (7)

src/pages/docs/component-demos.tsx:93

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

  const value = state('maya');
  return (
    <DemoFrame>
      <Combobox value={value()} onValueChange={value.set}>
        <ComboboxInput

src/pages/docs/component-demos.tsx:111

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

  const value = state('overview');
  return (
    <DemoFrame>
      <Tabs value={value()} onValueChange={value.set}>
        <TabsList aria-label="Project sections">

src/pages/docs/component-demos.tsx:147

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

      <Switch
        checked={checked()}
        onCheckedChange={checked.set}

src/pages/docs/component-demos.tsx:163

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

      <Slider
        aria-label="Capacity"
        min={0}
        max={100}
        value={value()}
        onValueChange={value.set}
      />

src/pages/docs/component-demos.tsx:174

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

      <Checkbox
        checked={checked()}
        onCheckedChange={checked.set}
        aria-label="Email updates"

src/pages/docs/component-demos.tsx:190

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

  const value = state('team');
  return (
    <DemoFrame>
      <RadioGroup value={value()} onValueChange={value.set} aria-label="Plan">

src/pages/docs/component-demos.tsx:243

• state() is used as if it returns a callable with a .set property, but the rest of the codebase (and the catalog tests) treat state() as a [getter, setter] tuple that must be destructured. As written, this demo is likely to break at runtime/compile time.

  const open = state(true);
  return (
    <DemoFrame>
      <ToastHost>
        <Toast open={open()} onOpenChange={open.set}>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.