FE-1709: Revamp Petrinaut user settings

[kube]

Summary

Bring Petrinaut preferences into one movable, resizable User Settings dialog with General, Viewport, Simulation and Labs sections. Settings can be opened from the viewport controls, command palette, keyboard shortcut and navigation state.

The heading stays visible while settings scroll beneath progressive blur. The dialog keeps the canvas at its normal brightness and supports the same edge and corner resizing as the AI assistant.

user-settings--drag-scroll-resize.mp4

Links

• Ticket FE-1709
• Ticket Editor UX (FE-1706)
• Docs User Settings

Blocked by

• #9659

Changes

• Replace the viewport-only dialog and retain existing preferences, including Petricon and automatic arc connections
• Keep the heading and navigation fixed around one content scrollbar, with stacked 0.5, 1 and 2px blur layers and a gradient at each scroll edge
• Make the top area draggable and all eight edges and corners resizable, preserving size and position when changing sections
• Share movement, resize handles and viewport limits with the floating AI assistant
• Show Experimental badges inline without increasing normal row height, and disable text selection throughout the dialog
• Preserve the selected settings section in website navigation URLs
• Extend the design-system Dialog with a content ref and inline style support; update the user guide and package changesets

Known issues

User-guide screenshots pending for the visual-settings, drawing-a-net and compilation-output pages. A refreshed User Settings capture is prepared locally.

Test coverage

• Settings tests cover entry points, keyboard navigation, preferences, drag boundaries, all eight resize handles and size preservation between sections
• Shared geometry tests cover minimum and maximum dimensions, viewport limits, opposite-edge anchoring and custom Settings limits
• All 1,310 Petrinaut unit tests passed with two workers, including saved dimensions during constrained resizing and hiding unavailable optimization settings
• All 20 build, type-check and lint tasks passed, along with architecture and formatting checks
• All 85 design-system tests and 696 website tests passed on the final main-based revision 94a8255fcb
• Browser verification covered single scrolling, inline badges, non-selectable navigation, both blur edges, dragging while scrolled, corner resizing, minimum size, smaller-window containment and AI panel dragging, resizing, keyboard movement and docking

How to test

• Open User Settings through the viewport controls, command palette or keyboard shortcut
• Scroll Viewport settings and check the fixed heading and blur at both ends
• Drag the heading or empty top area, then resize an edge or corner
• Switch sections and check that the dialog keeps its size and position
• Drag across navigation text and check that it remains unselected
• Reopen the dialog and check that its initial size and position return
• Float the AI assistant, then drag, resize and dock it

[vercel]

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

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

1 Skipped Deployment

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

[drdma]

Looks awesome!