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, including Best Parameters and the View best action. The rebased combined branch passed build, unit-test, TypeScript, and lint checks on the complete feature set. Formatting passed across 231 changed files. Architecture validation and the documentation site build also passed. Local test runs needed isolated retries for load-related timeouts, a dependency rebuild during an import, and an intermittent fake-timer assertion in unchanged website code; those retries 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 10:28pm UTC
petrinaut	Ready	Preview	Sep 16, 2026 10:28pm UTC
petrinaut-docs	Ready	Preview	Sep 16, 2026 10:28pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 16, 2026 10:28pm UTC

[cursor]

PR Summary

Low Risk
UI-only styling and properties-panel layout changes in the editor; behavior is covered by new tests and Storybook interactions, with no auth, data, or simulation engine changes.

Overview
Polishes Petrinaut properties panel UX and visual consistency without changing net or simulation behavior.

Place panel is reorganized: Name and Description use shared DraftFieldInput / DescriptionField; Component port, Token capacity, and Default starting place move into one Options section with labeled checkboxes (label clicks toggle), inline HelpTooltips, and an animated Maximum tokens row when capacity is enabled. View type and View equation replace “Jump to…” / Open equation code with compact ghost navigation that still works in read-only mode.

Panel chrome: section and resize dividers use stronger neutral.a40 borders; subsection expand chevrons stay visible (no hover-only reveal); collapsed subviews can still show header actions when alwaysShowHeaderAction (e.g. Visualizer toggle). Delete actions are sm with entity-specific labels across place, transition, arc, and component instance. Left-sidebar list text is lighter/smaller; hint colors use semantic tokens.

Quality: new Vitest coverage for place option labels, capacity visibility, navigation, and field labeling; Properties Panel Storybook stories run through PetrinautProvider / SelectedItemProperties with a play test for option toggles. User docs and a patch changeset for @hashintel/petrinaut are included.

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