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

[kube]

🌟 What is the purpose of this PR?

Modernizes styling by extracting inline styles into css/cva utilities across the editor to improve consistency, reuse, and theming.

• Converts all components to class-based styles
• Adds style variants (e.g., isSelected, isDisabled, isReadOnly) and consolidates repeated patterns (spacing, borders, z-index, hover/focus states)
• Minor UI polish (layout, paddings, shadows); no functional or API changes intended

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

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

The changes in this PR:

• do not affect the execution graph

🐾 Next steps

• Continue refactoring by progressively cleaning styles, and find a common way to organize them.
• Adapt/Migrate UI to match Figma mockups

❓ How to test this?

Use latest Petrinaut deployment

[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: Simulation Timeline Visualizer #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

Modernizes styling by extracting inline styles into reusable css/cva classes across the editor.

• Migrates components (e.g., LeftSideBar, BottomPanel, PropertiesPanel, SegmentGroup, Tooltip, Menu, SDCPN arc) to class-based styles
• Adds style variants (isSelected, isDisabled, isReadOnly, etc.) and centralizes spacing, borders, shadows, and z-index
• Minor visual refinements (padding, hover/focus, positioning) while preserving behavior and APIs
• Includes a changeset for @hashintel/petrinaut (patch)

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

[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.