FE-225, H-6116, H-6286: Update Petrinaut UI#8472

Merged

kube merged 125 commits intomainfrom

cf/fe-225-migrate-petrinaut-to-figma-designs

Mar 6, 2026

Commits on Mar 5, 2026

Migrate panel styles from inline style to Panda CSS

kube
and
claude
committed
Extract shared ToolbarDivider component from BottomBar

kube
and
claude
committed
Replace Place/Transition toolbar icons with plus variants

kube
and
claude
committed
Fix panel box-sizing and adjust z-index/padding placement

kube
and
claude
committed
Update z-index for LeftSideBar panel to improve layering
kube
committed
Add TopBar component and move sidebar controls into it

kube
and
claude
committed
Restyle ModeSelector to match Figma segmented control design

kube
and
claude
committed
Use JetBrains Mono font in Monaco code editors

kube
and
claude
committed
Migrate Place/Transition nodes to Figma card layout

kube
and
claude
committed
Adjust node anchor point and replace arc bezier with custom path

kube
and
claude
committed
Split sub-view container into organized horizontal/vertical subdirectories

kube
and
claude
committed
Unify resize logic into shared src/resize module

kube
and
claude
committed
Remove resizable stuff from initial-state-editor
kube
committed
Remove center/padding on list views
kube
committed
Move back use-resizable and resize-handle
kube
committed
Restyle GlassPanel resize handle with Panda CSS cva

kube
and
claude
committed
Use full-screen overlay during resize drag

kube
and
claude
committed
Use shared useResizeDrag hook in proportional sub-views container

kube
and
claude
committed
Update GlassPanel styles: change background color to neutral.s00 and remove padding from resize handle
kube
committed
Refactor PlaceNode and TransitionNode styles: update borderRadius to use 'full' and adjust background colors for improved consistency and visual appeal.
kube
committed
Refactor LeftSideBar styles: rename outerContainerStyle to glassPanelBaseStyle, simplify style properties, and adjust layout for improved clarity and consistency.
kube
committed
Remove wrapper div from LeftSideBar and refine sub-view styles

kube
and
claude
committed
Replace custom resize logic with react-resizable-panels

kube
and
claude
committed
Update LeftSideBar panel styles: increase top padding for improved layout consistency.
kube
committed
Fix LeftSidePanel boxSizing
kube
committed
Animate sub-view collapse/expand using CSS transition on flex-grow

kube
and
claude
committed
Remove unused resize handle and resizable hook components
kube
committed
Restrict sub-view collapsing to header click only

kube
and
claude
committed
Add spacer panel to stack collapsed sub-views at the top

kube
and
claude
committed
Merge styles and header into VerticalSubViewsContainer

kube
and
claude
committed
Animate sub-view toggle icon with CSS rotation instead of swapping icons

kube
and
claude
committed
Extract OutlinedSegmentGroup component from mode-selector

kube
and
claude
committed
Update LeftSideBar panel styles to remove bottom padding for improved layout consistency.
kube
committed
Add subtle shadow on Canvas Place/Transition
kube
committed
Update VerticalSubViewsContainer and panel styles for improved layout and consistency
kube
committed
Replace hideHeader with main subview pattern across all properties panels

kube
and
claude
committed
Move code editor menus to sub-view header actions and make editors fill remaining space

kube
and
claude
committed
Equalize predicate and stochastic info box text lengths

kube
and
claude
committed
Portal tooltips into petrinaut-root to escape overflow clipping

kube
and
claude
committed
Remove unnecessary key prop from CodeEditor in TransitionFiringTimeContent for cleaner rendering
kube
committed
Update initial state subview dimensions for improved usability
kube
committed
Added a minimum height of 300 to the transition results subview for better layout consistency.
kube
committed
Increase font size in CodeEditor from 11 to 12 for improved readability
kube
committed
Add scroll overflow shadows and move separator border to top

kube
and
claude
committed
Reorganize BottomBar: merge cursor modes into dropdown, move diagnostics to playback

kube
and
claude
committed
Fix bottom bar offset calculation when panel is open

kube
and
claude
committed
Update cursor mode icons to LuMousePointerClick and FaRegHand

kube
and
claude
committed
Consolidate visualizer into its own SubView with Code/Preview/Split modes

kube
and
claude
committed
Add viewport controls with zoom, fullscreen, lock, and settings dropdown

kube
and
claude
committed
Consolidate OutlinedSegmentGroup into SegmentGroup with design tokens and size variants

kube
and
claude
committed
Include .storybook in tsconfig to fix TS JSX resolution

kube
and
claude
committed
Add Storybook 10 setup with SegmentGroup story

kube
and
claude
committed
Update yarn.lock
kube
committed
OPTIONAL: Storybook logo
kube
committed
Add Petrinaut stories
kube
committed
Fix SegmentGroup indicator positioning with calc()-based border offset

kube
and
claude
committed
Reorganize Petrinaut Editor into colocated folder structure

kube
and
claude
committed
Extract main subviews and remove manual memoization

kube
and
claude
committed
Use React 19 Context shorthand instead of Context.Provider

kube
and
claude
committed
Add Section component and migrate subview panels to use it

kube
and
claude
committed
Add ArcItem component with inset lip separator and properties panel stories

kube
and
claude
committed
Add Ark UI Select to ArcItem for place selection

kube
and
claude
committed
Extract generic Spreadsheet component from InitialStateEditor

kube
and
claude
committed
Add Section stories and animated collapsible expand/collapse

kube
and
claude
committed
Update TopBar styles to use outline instead of border
kube
committed
Refactor Storybook preview decorator to conditionally apply background color
kube
committed
Overlap ArcItem separator over adjacent cell borders

kube
and
claude
committed
Unify overlay portalling and extract PlaybackSettingsMenu

kube
and
claude
committed
Add Popover base component and refactor PlaybackSettingsMenu to use it

kube
and
claude
committed
Fix portalContainerRef used on two components
kube
committed
Add Popover component stories

kube
and
claude
committed
Fix PortalContainer in Stories
kube
committed
Remove useCallback usage and disable exhaustive-deps for React 19 Compiler

kube
and
claude
committed
Opacity animation on Section expand/collapse
kube
committed
Clean Panel
kube
committed
Animate panel open/close transitions

kube
and
claude
committed
Unmount panels after close animation completes

kube
and
claude
committed
Add UserSettingsContext with localStorage persistence

kube
and
claude
committed
Add Dialog component and wire Settings button to ViewportSettingsDialog

kube
and
claude
committed
Block clicks through dialog backdrop and disable text selection

kube
and
claude
committed
Add settings controls to ViewportSettingsDialog

kube
and
claude
committed
Add compact nodes toggle to switch between classic and new node styles

kube
and
claude
committed
Add arc rendering setting to switch between Square, Bezier, and Custom paths

kube
and
claude
committed
Remove backdrop blur from dialog overlay

kube
and
claude
committed
Update customArcPath (still work in progress)
kube
committed
Center classic nodes at x,y so handles align to the snap grid

kube
and
claude
committed
Center compact nodes at x,y so handles align to the snap grid

kube
and
claude
committed
Persist subview collapsed state in UserSettingsContext

kube
and
claude
committed
Persist subview panel heights in UserSettingsContext

kube
and
claude
committed
Remove useCallback wrapper from handleResize

kube
and
claude
committed
Move default collapsed state to SubView.defaultCollapsed property

kube
and
claude
committed
Always render Transition Results subview, show message when unavailable

kube
and
claude
committed
Fix Arc width flow animation on transitions
kube
committed
Show ArcItem delete button by expanding width instead of overlaying

kube
and
claude
committed
Update Arc peakStrokeWidth
kube
committed
Fix Monaco editor popups hidden by panel CSS transforms

kube
and
claude
committed
Add open/close animations to popover and cursor mode dropdown

kube
and
claude
committed
Rewrite Menu component to match Figma design system

kube
and
claude
committed
Unify popover/menu animations into single placement-aware animation

kube
and
claude
committed
Remove shadow on popover
kube
committed
Match Menu gutter to Popover (8px) for consistent BottomBar spacing

kube
and
claude
committed
Replace custom button styles with IconButton in renderHeaderAction components

kube
and
claude
committed
Rewrite IconButton to match Figma design system

kube
and
claude
committed
Rewrite Select and NumberInput to match Figma designs, update ArcItem to use shared components

kube
and
claude
committed
Rewrite Input to match Figma design, migrate raw inputs to shared components

kube
and
claude
committed
Migrate hardcoded CSS values to PandaCSS design tokens

kube
and
claude
committed
Migrate type-properties to shared components and design tokens

kube
and
claude
committed
Remove border from ArcItem weight input cell

kube
and
claude
committed
Migrate raw HTML buttons to IconButton component

kube
and
claude
committed
Add per-size fontSize to IconButton and use size xs for header actions

kube
and
claude
committed
Persist cursor mode preference and default to pan

kube
and
claude
committed
Fix Minimap display
kube
committed
Update Minimap style
kube
committed
Migrate Button and Switch to ds-components and update to Figma design

kube
and
claude
committed
Bigger Hamburger Menu
kube
committed
Fix Minimap
kube
committed
Fix Switch positionning
kube
committed
Compact nodes disabled by default
kube
committed
Remove wrapper div from ArcItem weight input and style NumberInput directly

kube
and
claude
committed
Add changesets for Petrinaut and DS-Components

kube
and
claude
committed
AI Review fixes + Collapsible section toggle IconButton
kube
committed
Use IconButton in Popover close button
kube
committed
Remove dead SIZE_MAP properties in Select and fix Spreadsheet sync race condition

kube
and
claude
committed

Commits on Mar 6, 2026

Update changesets
kube
committed
Address PR review comments on viewport settings dialog

kube
and
claude
committed