FE-1509: Add the notebook cell list as an experimental mode

[kube]

🌟 What is the purpose of this PR?

The Notebook view itself, stacked on #9406: the Notebook itself, as an experimental read-only mode that renders the net as a list of one-line expandable cells. Off by default behind a new Notebook view toggle in the viewport settings dialog.

🔗 Related links

• FE-1509 (internal)

🔍 What does this change?

• A fourth global mode in the top bar, present only while enableNotebookView is on. The view is read-only, including for the AI assistant (notebook-mode joins ReadOnlyReason).
• Cells read like declarations: kind keyword, name, one-line summary, direct → transitive dependent counts, an initial badge on places the net cannot seed itself,. Expanding shows the full definition, with code in read-only Monaco editors that reuse the LSP document URIs.
• Keyboard navigation (↑/↓ select, →/← expand and collapse), / fuzzy name search with per-character match highlighting, kind filter chips, and a Document/Topological order toggle where seed places are hoisted to the front of the flow.
• Selecting a cell draws angled gutter connector lines to its dependencies (left) and dependents (right), measured from the DOM and re-measured when rows move.
• The list rides the worksheet keyboard-flow layer (useFocusStops): every navigable row is a full-width stop, so vertical arrows walk exactly the rows a search leaves navigable, the whole list is one roving tab stop instead of a tab stop per row, and selection follows row focus. Rows own the horizontal arrows for expand/collapse; the search box's arrows still step the selection without leaving the input. Per the worksheet contract, edge moves stay put instead of wrapping.
• While a cell is expanded, its body parts join the flow as stops. A line with several values — an arc's place, weight and kind, a type field's name and type — is a sparse multi-column stop: horizontal arrows walk its cells one value at a time, vertical moves keep the column, and the focused thing is the cell, not the line. Enter acts on the focused value: buttons and checkboxes activate immediately (an arc's place jumps to its cell), text fields, selects and code editors follow the ARIA grid interaction-mode pattern — Enter engages the widget, its keys stay its own, Escape steps back out.
• The Notebook option sits directly after Edit in the mode selector.
• The effective global mode is derived in one shared hook (useEffectiveGlobalMode) used by both the editor view and useReadOnlyReason, so turning the flag off while the stored mode is "notebook" falls back to Edit consistently.

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

• Cell rows use role="button" with a nested caret button rather than listbox/option semantics — FE-1539.
• Expanded cells mount their Monaco editors with no cap — FE-1540.
• Subnets and component instances are not rendered as cells.

🐾 Next steps

• Component extraction and prop bundling — FE-1542.

🛡 What tests cover this?

The pure logic is covered by the layer below's suites; this layer's own behaviour (keyboard navigation, search, filters, gutter measurement) is exercised manually per the steps below.

❓ How to test this?

1. Run the Petrinaut storybook and open a story with a non-empty net (e.g. the SIR example).
2. Open the viewport settings dialog (gear button in the canvas controls), enable Notebook view, and pick Notebook in the top bar.
3. Try expanding cells (→/←), arrow-key navigation, / plus a fuzzy query, the kind filter chips, and the Document/Topological toggle.
4. Select cells and check the gutter lines track them, including after switching the order.

📹 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]

PR Summary

Medium Risk
Large new editing surface with many mutation and Monaco code paths; mitigated by an experimental flag and shared effective-mode/read-only logic, but regressions in net edits or focus/keyboard behavior are plausible.

Overview
Adds an experimental Notebook global mode (off by default via a persisted Notebook view toggle in viewport settings). When enabled, the top bar gains a Notebook segment after Edit; choosing it swaps the edit canvas for a cell list that represents places, transitions, types, equations, and parameters as one-line, expandable rows.

The notebook supports in-place editing through the same mutation hooks as the properties panel (names, arcs, types, Monaco code blocks with focus-guarded commits), plus fuzzy search, kind filters, document vs topological ordering, dependency gutter lines, worksheet-style keyboard focus, and Cmd/Ctrl+Z undo/redo because the canvas BottomBar is not mounted. Selection stays tied to EditorContext.

useEffectiveGlobalMode centralizes rendering when stored mode is notebook but the flag is off (falls back to Edit); useReadOnlyReason uses that hook so writability matches what is on screen. The editor shell layout under the top bar switches to flex: 1 / minHeight: 0 to avoid scrollIntoView pushing the top bar out of view.

^{Reviewed by Cursor Bugbot for commit 219faf0. Bugbot is set up for automated code reviews on this repo. Configure here.}

[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 219faf0. Configure here.}