feat(web): add scroll-spy active indicator to TOC

[sebassg]

Description

Use IntersectionObserver to track the currently visible heading and highlight it in the MetaBar table of contents. Passes activeSlug via Context
to a custom ActiveLink component rendered through the existing 'as' prop of MetaBar, requiring no changes to @node-core/ui-components.

Validation

• Navigate a page with multiple headings and verify the active TOC item updates as you scroll
• The active link should be visually highlighted in the MetaBar TOC
• Unit tests cover the useScrollSpy hook: src/generators/web/ui/hooks/__tests__/useScrollSpy.test.mjs

Related Issues

Closes #529

Check List

• I have read the Contributing Guidelines and made commit messages
  that follow the guideline.
• I have run node --run test and all tests passed.
• I have check code formatting with node --run format & node --run lint.
• I've covered new added functionality with unit tests if necessary.

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
api-docs-tooling	Ready	Preview	Mar 8, 2026 4:24am

[Copilot]

Pull request overview

This PR implements a scroll-spy feature for the Table of Contents (TOC) in the MetaBar component. It uses IntersectionObserver to track which heading is currently visible in the viewport and highlights the corresponding TOC entry with a visual indicator (bold text, primary color, and a left border).

Changes:

• Added a useScrollSpy hook that tracks the currently visible heading via IntersectionObserver with a 30% viewport detection zone
• Created an ActiveLink component that uses React Context to conditionally apply active styles to TOC links matching the visible heading
• Added CSS styles and unit tests for the getActiveSlug helper function

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/generators/web/ui/hooks/useScrollSpy.mjs	New hook using IntersectionObserver to track the active heading slug
src/generators/web/ui/hooks/__tests__/useScrollSpy.test.mjs	Unit tests for the getActiveSlug pure function
src/generators/web/ui/components/MetaBar/index.module.css	New .tocActive CSS class for highlighting the active TOC item
src/generators/web/ui/components/MetaBar/index.jsx	Integrates scroll-spy via Context + ActiveLink component passed as as prop to upstream MetaBar

---

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

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

The .tocActive class adds border-left: 2px solid and padding-left: 0.25rem only to the active item. When the active heading changes during scrolling, the newly active link gains this border+padding while the previously active link loses it, causing a visible horizontal layout shift. Consider adding a transparent border (e.g., border-left: 2px solid transparent) and the same padding-left to the default/non-active link state so that only the border color changes on activation.

Suggested change

	border-left: 2px solid var(--color-primary, #0078d4);
	padding-left: 0.25rem;
	box-shadow: inset 2px 0 0 var(--color-primary, #0078d4);