Manifest Debugger: stable deep-link anchors so tooling can link to a specific component

[rachelslurs]

Is your feature request related to a problem? Please describe.

In components.html, each component card (<article class="card">) has no id attribute — the only per-card identifiers are numeric-index-based slugs (c-0-…, c-1-…) used internally for the CSS toggles, and those shift whenever components are added, removed, or renamed (cards are name-sorted). So there's no stable anchor to link to: an addon or tool that reads a component id from components.json cannot open components.html#example-button and land on that component. Anyone wanting to point a teammate (or an agent) at a specific component in the debugger has to scroll and search manually.

Describe the solution you'd like

Give each component card a stable id equal to its manifest id, the same value that keys components.json, so components.html# scrolls to (and highlights) that component's card.

Because the JSON manifest and the HTML debugger are generated from the same index in the same module, anchoring the card by the manifest id makes the anchor-to-id mapping guaranteed consistent. That's the key property: tooling can deep-link deterministically from a components.json entry straight to its section in the debugger.

Details, scoped to the debugger renderer:

• Set id="" on the primary grid card only. The error-group section re-renders the same components, so those stay un-anchored to avoid duplicate DOM ids.
• Add scroll-margin-top so a deep-linked card clears the sticky header, plus a :target highlight consistent with the page's existing :target styling.
• Fully backward compatible, with no change to the props/stories toggles or the #filter-* filters.

Describe alternatives you've considered

• Keeping the current numeric-index slugs as anchors. Rejected because they're unstable across renders, so a saved link breaks as soon as the component set or sort order changes.
• A separate lookup/JSON side-channel mapping component ids to anchors. This adds unnecessary indirection; using the manifest id directly as the anchor keeps the mapping consistent by construction and needs no extra artifact.
• Adding client-side JS to resolve/scroll to a component. The debugger is intentionally HTML/CSS only, and a plain id anchor plus CSS scroll-margin achieves this with no JS.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

I have a working implementation scoped to the debugger renderer (code/core/src/core-server/utils/manifests/render-components-manifest.ts) with tests, and verified in a browser that deep-linking scrolls to and highlights the target card while the props/stories toggles and #filter-* filters continue to work.