{% comment %} Wrap JUST your nav in this component and bind link styling to `isActive('id')`. The ids it tracks are read from the nav's own links (their `#…` hrefs — `spy` items and manual links alike), so your sections only need a matching `id`, anywhere in your layout. The scroll container is detected automatically (the sections' nearest scrolling ancestor, else the page), so there's nothing else to mark. An optional `data-spy-section` lets you track a section that has no link. `root` is an optional CSS-selector escape hatch for the cases auto-detection can't resolve (sections spread across containers, a false-positive overflow ancestor, content that scrolls only after load): point it at the scrolling element to use, e.g. `root="#docs-panel"`. The active id is computed from scroll position and exposed as `active` on the Alpine component. Several scrollspies can share a page with no extra wiring — each tracks only its own links. The data factory is registered once and guarded so multiple includes never double-register. {% endcomment %}
{{ slot }}