H-5768: Extract styles from all component files in Petrinaut

[kube]

🌟 What is the purpose of this PR?

🔗 Related links

• ...

🚫 Blocked by

• ...

🔍 What does this change?

• ...

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• does not modify any publishable blocks or libraries, or modifications do not need publishing
• modifies an npm-publishable library and I have added a changeset file(s)
• modifies a Cargo-publishable library and I have amended the version
• modifies a Cargo-publishable library, but it is not yet ready to publish
• modifies a block that will need publishing via GitHub action once merged
• I am unsure / need advice

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change
• are in a state where docs changes are not yet required but will be
  • this is tracked in: Insert Link Here
• require changes to docs which are made as part of this PR
• require changes to docs which are not made in this PR
  • Provide more detail here
• I am unsure / need advice

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph
• affected the execution graph, and the turbo.json's have been updated to reflect this
• I am unsure / need advice

⚠️ Known issues

🐾 Next steps

🛡 What tests cover this?

❓ How to test this?

1. Checkout the branch / view the deployment
2. Try X
3. Confirm that Y

📹 Demo

[kube]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• H-5691: Update Broken Machines example to have some global parameters #8211
• H-5884: Add Panel SubView, with Horizontal and Vertical SubViews containers #8209
• H-5768: Extract styles from all component files in Petrinaut #8205 👈 (View in Graphite)
• H-5768: Quick Simulation in Edit Mode, and disable Simulate temporarily #8195
• H-5850: Fix PandaCSS and single vite.config #8194
• H-5840: SDCPN diagnostics panel with global type-checker #8171
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[cursor]

PR Summary

Standardizes styling by migrating inline styles to css/cva utilities across the editor.

• Refactors LeftSideBar sections, BottomPanel, and numerous PropertiesPanel components (place, transition, type, differential-equation, color-select, initial-state-editor, sortable-arc-item) to use class-based styles and variants
• Updates core canvas components (SDCPNView, TransitionNode, Arc) and layout (EditorView) to class-based styling; preserves behavior
• Converts shared UI elements (Menu, SegmentGroup, Tooltip) to extracted styles; minor tweaks (e.g., submenu arrow class, hover/focus states, z-index)
• Adds small style helpers/variants (cva) for selected/disabled states; centralizes paddings, borders, and shadows
• No business logic changes; visual consistency and maintainability improved

^{Written by Cursor Bugbot for commit 5e05299. This will update automatically on new commits. Configure here.}

[graphite-app]

There appears to be a numeric value that needs to be converted to a string with brackets to satisfy the ConditionalValue type requirement. Any numeric values in this style definition should be wrapped in brackets like '[value]'.

Spotted by Graphite Agent (based on CI logs)



Is this helpful? React 👍 or 👎 to let us know.

[cursor]

Missing background property on entity toggle button

The entityButtonStyle is missing a background property. The old inline style included background: "none" which was lost during the refactoring. Without this, the button will render with the browser's default button background styling instead of being transparent, causing a visual regression in the diagnostics panel's collapsible entity headers.

 

[cursor]

Hover effect overrides selection glow on transition nodes

The transitionBoxStyle CVA has a _hover rule with boxShadow in the base and selection-specific boxShadow values in the variants. Previously, the selection boxShadow was applied via inline style prop which had higher specificity than CSS :hover rules. Now both are CSS classes, so hovering over a selected transition node causes the selection glow (blue for resource selection, orange for ReactFlow selection) to be temporarily replaced by the weaker generic hover glow, reducing the visual indication that the node is selected.