FE-1509: Add the notebook's whole-net graph explorer

[kube]

🌟 What is the purpose of this PR?

Third layer of the Notebook view stack, stacked on #9407: the whole-net graph explorer on the right of the notebook, with cycle and initial-place markers, selection highlighting, and an animated focus mode.

🔗 Related links

• FE-1509 (internal)

🔍 What does this change?

• A resizable right-hand pane drawing the whole net as a layered flow graph of places (pills, with their token type's colour dot) and transitions (boxes), laid out from the arc structure alone — canvas positions are ignored.
• Selecting a place or transition highlights its dependencies (blue), dependents (orange), and both-direction neighbours (purple); clicking a node selects its cell, revealing its kind in the list if a filter hides it. Cycle members carry tinted dashed rings that light up together on hover, and places needing initial tokens carry a hollow token marker.
• A focus mode re-layers the graph around the selection by hop distance; unreachable components keep their own layered band below. Re-layouts animate FLIP-style: React renders the target once and a write-only requestAnimationFrame loop interpolates node transforms and edge paths before paint, honouring prefers-reduced-motion and the animations setting.
• The notebook is one horizontal worksheet flow (FocusStack): the cell list and the connection lists are sibling members, so ArrowLeft at the lists' edge crosses back into the cell list at its remembered row. The connection lists form a single-column useFocusGrid — vertical arrows walk every row across both sections, the pair is one roving tab stop — remounted per selection so the focus memory never points at a vanished row.
• Below the graph, the selected cell's dependencies and dependents are listed across all five kinds, with a draggable split between graph and lists.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• does not modify any publishable blocks or libraries, or modifications do not need publishing
  • one patch changeset for the whole stack ships in the top PR

📜 Does this require a change to the docs?

The changes in this PR:

• are in a state where docs changes are not yet required but will be
  • this is tracked in: the user-docs PR at the top of this stack

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

⚠️ Known issues

• In focus mode the topological cell order keeps following the default layout; focus is a transient lens on the same net.
• The siphon analysis drops groups overlapping an already-reported one, so an overlapping genuine siphon can go unmarked.

🛡 What tests cover this?

net-graph-animation.test.ts covers the interpolation and layout-signature helpers; the layered and focused layouts are covered by net-graph-layout.test.ts in the layer below. The animation timing and hover behaviour are exercised manually.

❓ How to test this?

1. In the notebook (flag on, see the PR below), select places and transitions and check the graph highlighting and the lists under it.
2. Hover a ↻ badge in the list or a ringed node in the graph; the whole cycle should light up in both.
3. Toggle the bullseye focus button and watch the animated re-layout; toggle it back.
4. Drag the explorer's left edge and the divider above the lists.

📹 Demo

Screenshot pending — to be added before review.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview	Aug 30, 2026 1:16pm
petrinaut	Ready	Preview	Aug 30, 2026 1:16pm
petrinaut-docs	Ready	Preview	Aug 30, 2026 1:16pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	Aug 30, 2026 1:16pm

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d8884e8. Configure here.}