FE-1702: Add experimental automatic arc connections

[kube]

Important

Experimental
Adds the Automatic arc connections feature flag in Viewport Settings.

Summary

Arcs attach to place and transition outlines, following the direction between nodes. Hovering a node reveals one outgoing handle; dragging it onto a valid target creates the arc.

The setting is off by default and saved per user. Turning it off restores the previous arc style and fixed handles.

automatic-arc-connections.mp4

Links

• Ticket FE-1706 (internal)
• Ticket FE-1702 (internal)
• Docs Drawing a net › Automatic arc connections
• Docs Visual settings › Automatic arc connections
• Design Canvas arcs (internal)
• Design Node exploration (internal)
• Design Hovered transition (internal)
• Design Subnet interaction (internal)
• Design Canvas settings (internal)
• Design Petrinaut v1.2 (internal)
• Reference React Flow floating edges
• Reference React Flow easy connect

Blocked by

• #9595

Changes

• Curves meet circles, capsules, and square transition outlines; reciprocal arcs use separate curves
• Whole-node drop targets support pointer, keyboard, and touch creation, with Escape cancellation
• Diagonal connections and target highlights match the square corners of both transition styles
• Weight labels, read and inhibitor markers, and existing subnet port arcs retain their behavior
• New subnet connections use the existing mode with the experiment off
• The user guide, Storybook examples, and patch changeset cover the experiment

Known issues

• Routing follows the endpoint shapes; an arc can cross an intervening node
• Screenshots pending for Drawing a net › Automatic arc connections and Visual settings › Automatic arc connections; both captures are prepared

Test coverage

• Geometry tests cover circle and rounded-corner intersections, reciprocal arcs, labels, and coincident nodes
• Settings tests cover the default and persistence; renderer tests cover switching modes, moving nodes, subnet fallback, and diagonal endpoints at square transition corners in both node styles
• On 15 September, browser checks passed for whole-node drag creation, reciprocal connections, node movement, keyboard creation, undo, and Escape cancellation
• The 20-second demo was recorded from the production build of 19e5292c79; its four check frames were inspected, and the recording reported no console or page errors
• Petrinaut and website builds, unit tests, type checks, and lint passed locally on 19e5292c79 (20 tasks). Both PR commits remain patch-equivalent after the final rebase to 92ac5993d1; formatting and diff checks passed on that head
• Final CI completed with 47 successful checks and no failures; review threads are resolved
• Real-input drops at far edges and corners passed for classic and compact targets, alongside keyboard creation, Escape, and empty-canvas cancellation

How to test

1. Open Viewport Settings and enable Automatic arc connections
2. Hover a place or transition, then drag its handle onto the opposite node type
3. Connect the same pair in reverse and move either node
4. Focus an outgoing handle with Tab, press Enter, then focus a target and press Space
5. Drop onto empty space or a subnet, or press Escape during a connection
6. Switch the experiment off and check that fixed handles and the previous arc style return

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 15, 2026 4:14pm UTC
petrinaut	Ready	Preview	Sep 15, 2026 4:14pm UTC
petrinaut-docs	Ready	Preview	Sep 15, 2026 4:14pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 15, 2026 4:14pm UTC

[cursor]

PR Summary

Medium Risk
Touches core canvas connection and arc rendering paths in React Flow; behavior is gated behind an experimental default-off setting, but bugs could affect arc creation or layout for users who enable it.

Overview
Adds an off-by-default experimental Automatic arc connections setting in Viewport Settings, persisted as enableAutomaticArcConnections alongside existing arc style preferences.

When enabled, place and transition nodes use a shared NodeHandles layer: fixed side handles are replaced by a hover-only outgoing handle and whole-node drop targets (pointer, keyboard, touch), with Escape cancelling in-progress connections on the React Flow canvas. New arcs are limited to ordinary place↔transition links (not subnet port handles); Arcs rendering is disabled while the experiment is on.

Arc geometry is computed in outline-arcs: endpoints attach to circle/capsule/rectangle outlines, curves update when nodes move, and reciprocal pairs get separated lanes. Existing arcs render via optional outlinePath on edge data; the drag preview uses OutlineConnectionLine. User docs, a changeset, Storybook stories, and unit tests cover settings persistence, outline math, and renderer toggling.

^{Reviewed by Cursor Bugbot for commit 92ac599. 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 92ac599. Configure here.}