FE-1595: Polish properties-panel controls

[kube]

Summary

Properties panels now use the editor's shared form fields and compact controls. Place options have clickable labels, definition navigation uses smaller arrows, and State and Visualizer have visible expansion controls.

Links

• Ticket FE-1595 (internal)
• Ticket FE-1596 (internal)
• Reference Full-screen and panel code editor layouts

Blocked by

• #9725: Polish experiment creation, results, and optimizer controls

Changes

• Component port, Token capacity, and Default starting place share an Options section with readable 14px checkbox labels and adjacent help tooltips
• Enabling Token capacity animates a compact, indented Maximum tokens field into view; disabled and reduced-motion settings are respected
• Place Name and Description use the shared fields used elsewhere in the editor, including entity-name validation
• View type and View equation use small ghost buttons with standard trailing icons and remain available in read-only mode; the duplicate equation shortcut is removed
• Dynamics and Visualizer switches and the type/equation selectors have accessible names
• Place, transition, arc, and component-instance delete buttons have consistent sizes and specific accessible names
• Shared section dividers have more contrast, and subsection chevrons remain visible without hovering
• The Visualizer switch stays available when its subsection is collapsed
• Entity-list text is smaller and lighter, hint colors use semantic tokens, and the initial token-count input matches other small inputs
• Properties Panel stories use the real editor provider and the same navigation as the application
• The user guide describes the updated controls, and a patch changeset covers the published package

Next steps

• Evaluate a single scrolling properties panel to give State and Visualizer more room, as proposed in FE-1596 (internal)
• Replace the affected properties-panel screenshots in the user guide

Test coverage

Eight new place-properties interaction tests cover label clicks for all three options, disabled edits in read-only mode, conditional capacity-field visibility, assigned type/equation navigation in editable and read-only modes, and Name/Description label associations.

The combined branch includes FE-601, FE-1716, FE-1717, and the combined FE-1718/FE-1719 changes. The final combined branch passed all 23 build, unit-test, TypeScript, and lint tasks with no cached results: 1,949 core tests, 1,405 editor tests, and 831 website tests. Formatting passed across 223 changed files. Architecture validation and the documentation site build also passed. Browser checks verified option labels, animated capacity controls, single equation navigation, ad-hoc scenario generators, fullscreen navigation, reversible metric selection, and state expressions. A real two-step optimization completed with all state constraints passing and no simulation errors. Published screenshot replacements remain pending.

How to test

• Open this branch's editor with an editable net and select a place
• Click each label in Options, then focus each checkbox and press Space

  Each action toggles the corresponding setting.

• Enable Token capacity, enter a maximum, then disable it

  The labelled input appears with an initial value of 1 and disappears when the limit is disabled.

• Edit Name and Description, then select a transition

  The fields use consistent spacing and retain their values after committing edits.

• Select a place with an assigned type and differential equation, with Dynamics enabled
• Click View type, return to the place, then click View equation

  Each button opens the assigned definition. The icons fit the compact buttons.

• Collapse State and Visualizer, then resize and reopen their sections

  The chevrons stay visible, and the Visualizer switch remains available while collapsed.

• Inspect the delete controls for a place, transition, arc, and component instance

  Their sizes match, and each tooltip names the entity it deletes.

• Open the same net in read-only mode and repeat the option and navigation checks

  Options remain disabled, while View type and View equation still navigate.

Pre-Merge Checklist

Publishing

• Modifies an npm-publishable library and includes patch changesets

Documentation

• Required user guide changes are included

Turbo Graph

• Does not affect the execution graph

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 16, 2026 2:48am UTC
petrinaut	Ready	Preview	Sep 16, 2026 2:48am UTC
petrinaut-docs	Ready	Preview	Sep 16, 2026 2:48am UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 16, 2026 2:48am UTC