FE-1702: Add experimental automatic arc connections

[kube]

Important

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

Summary

Arcs can attach anywhere along 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.

Links

• Ticket FE-1702
• 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

Changes

• Curves meet circles, capsules, and transition outlines; reciprocal arcs use separate curves
• Whole-node drop targets support pointer, keyboard, and touch creation, with Escape cancellation
• 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; a local capture and demo 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, and subnet fallback
• Browser checks passed for drag creation, undo, invalid drops, Escape, keyboard, compact nodes, zoom, touch, and read-only mode
• Petrinaut and website builds, unit tests, type checks, lint, formatting, and architecture checks passed locally

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. Drop onto empty space or a subnet, or press Escape during a valid drag
5. 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 11, 2026 11:55pm UTC
petrinaut	Ready	Preview	Sep 11, 2026 11:55pm UTC
petrinaut-docs	Ready	Preview	Sep 11, 2026 11:55pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 11, 2026 11:55pm UTC