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

[kube]

🌟 What is the purpose of this PR?

First pass at migrating the Petrinaut editor UI toward Figma design specs. This doesn't fully complete the migration but establishes the structural foundation — shared components, design tokens, layout patterns — that the remaining work builds on.

🔗 Related links

• FE-225
• H-6116
• H-6286

🔍 What does this change?

Layout & panels

• Migrate panel styles from inline CSS to Panda CSS; fix box-sizing, z-index layering
• Add TopBar component, move sidebar controls into it
• Replace custom resize logic with react-resizable-panels for vertical sub-views
• Animate panel open/close and sub-view collapse/expand transitions
• Add scroll overflow shadows to scrollable sub-view content
• Reorganize BottomBar: merge cursor modes into dropdown, move diagnostics to playback area

Shared components

• Add Popover, Dialog, Menu, Section, SegmentGroup, IconButton, Tooltip, Spreadsheet, Stack components
• Rewrite Select from native <select> to Ark UI with Figma styling
• Rewrite NumberInput and Input with Figma tokens and size variants
• Add ArcItem component with inset separators and inline editing
• Add GlassPanel resize handle restyling with Panda CSS cva
• Migrate Button and Switch to shared @hashintel/ds-components library
• Rewrite ds-components Button with all Figma variants (primary, secondary, ghost, error) and color schemes (brand, neutral, critical, subtle)
• Add inline-flex alignment fix to ds-components Switch for proper vertical centering in flex containers

Canvas & nodes

• Migrate Place/Transition nodes to Figma card layout with classic/compact toggle
• Center nodes at x,y so handles align to snap grid
• Add viewport controls (zoom, fullscreen, lock, settings)
• Add arc rendering setting (Square/Bezier/Custom paths)
• Restyle Minimap with updated positioning and styles

Design tokens

• Migrate hardcoded px values, hex colors, and raw CSS across 43 files to PandaCSS tokens (fontSize, fontWeight, fontFamily, borderRadius, spacing, backgroundColor, color, zIndex)
• Split border shorthand into borderWidth/borderStyle/borderColor with semantic tokens
• Use neutral.fg.*, neutral.bg.*, neutral.bd.* semantic color tokens throughout
• Include @hashintel/ds-components source in petrinaut's PandaCSS config for shared component style generation

Editor state & cursor persistence

• Split editionMode into editionMode ("cursor" | "add-place" | "add-transition") and cursorMode ("select" | "pan") in EditorContext
• Persist cursor mode preference to localStorage via UserSettingsContext; default to pan
• Cursor dropdown retains last-used cursor icon when switching to add-place/add-transition modes
• Migrate raw HTML buttons to IconButton component; migrate type-properties to shared components and design tokens

Infrastructure

• Add Storybook 10 setup with component stories
• Add UserSettingsContext with localStorage persistence for animations, compact nodes, arc rendering, and sub-view panel state
• Portal all tooltips/popovers/menus into petrinaut-root to escape overflow clipping
• Reorganize editor into colocated folder structure

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

📜 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

⚠️ Known issues

• Not all hardcoded CSS values are migrated — font sizes without exact token matches (9px, 10px, 11px, 13px, 15px) and some component-specific hex colors remain as escape hatches
• Custom arc path rendering is still work in progress

🐾 Next steps

• Complete remaining token migrations for non-standard font sizes and colors
• Implement remaining Figma design specs for individual components
• Add visual regression tests

🛡 What tests cover this?

• TypeScript type-checking passes with 0 errors
• Manual visual testing against Figma designs

❓ How to test this?

1. Checkout the branch
2. Open the Petrinaut editor
3. Verify panels, toolbars, and components render correctly
4. Test viewport settings dialog, playback settings menu, and sub-view collapse/expand

📹 Demo

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Mar 6, 2026 4:55pm
petrinaut	Ready	Preview	Mar 6, 2026 4:55pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Mar 6, 2026 4:55pm
hashdotdesign-tokens	Ignored	Preview	Mar 6, 2026 4:55pm

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
petrinaut	Building	Preview	Feb 23, 2026 3:34pm

[kube]

• FE-225, H-6116, H-6286: Update Petrinaut UI #8472 : 2 dependent PRs (#8463 , #8509 ) 👈 (View in Graphite)
• H-5839, FE-488: Petrinaut: LSP-like interface for Diagnostics and Code Editor #8300
• FE-223, H-5780, H-6227: Setup Petrinaut inside HASH + Build with Vite 8 and TypeScript 7 #8369
• main

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

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[CiaranMn]

Looks great! Just a few small comments

[github-actions]

Benchmark results

@rust/hash-graph-benches – Integrations

policy_resolution_large

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 2002	$$28.0 \mathrm{ms} \pm 214 \mathrm{μs}\left({\color{gray}-0.841 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.48 \mathrm{ms} \pm 17.3 \mathrm{μs}\left({\color{gray}-0.031 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 1001	$$12.3 \mathrm{ms} \pm 81.8 \mathrm{μs}\left({\color{gray}-1.572 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 3314	$$43.4 \mathrm{ms} \pm 325 \mathrm{μs}\left({\color{gray}1.25 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$14.9 \mathrm{ms} \pm 95.7 \mathrm{μs}\left({\color{gray}0.433 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 1526	$$24.7 \mathrm{ms} \pm 197 \mathrm{μs}\left({\color{gray}1.75 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 2078	$$28.3 \mathrm{ms} \pm 165 \mathrm{μs}\left({\color{gray}-3.355 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.78 \mathrm{ms} \pm 16.2 \mathrm{μs}\left({\color{gray}-0.376 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 1033	$$13.3 \mathrm{ms} \pm 91.3 \mathrm{μs}\left({\color{gray}-1.596 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_medium

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 102	$$3.88 \mathrm{ms} \pm 19.4 \mathrm{μs}\left({\color{gray}0.263 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.06 \mathrm{ms} \pm 14.5 \mathrm{μs}\left({\color{gray}-0.084 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 51	$$3.41 \mathrm{ms} \pm 17.1 \mathrm{μs}\left({\color{gray}-0.310 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 269	$$5.31 \mathrm{ms} \pm 25.6 \mathrm{μs}\left({\color{gray}0.205 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$3.64 \mathrm{ms} \pm 15.2 \mathrm{μs}\left({\color{gray}-0.504 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 107	$$4.26 \mathrm{ms} \pm 24.7 \mathrm{μs}\left({\color{gray}0.254 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 133	$$4.58 \mathrm{ms} \pm 30.5 \mathrm{μs}\left({\color{gray}-0.701 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.52 \mathrm{ms} \pm 16.5 \mathrm{μs}\left({\color{gray}-2.519 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 63	$$4.16 \mathrm{ms} \pm 21.9 \mathrm{μs}\left({\color{gray}-1.359 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_none

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 2	$$2.80 \mathrm{ms} \pm 12.1 \mathrm{μs}\left({\color{gray}-0.289 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$2.74 \mathrm{ms} \pm 14.8 \mathrm{μs}\left({\color{gray}-0.248 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 1	$$2.85 \mathrm{ms} \pm 14.6 \mathrm{μs}\left({\color{gray}-0.455 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 8	$$3.14 \mathrm{ms} \pm 15.8 \mathrm{μs}\left({\color{gray}0.077 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$2.92 \mathrm{ms} \pm 11.8 \mathrm{μs}\left({\color{gray}-0.800 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 3	$$3.22 \mathrm{ms} \pm 13.6 \mathrm{μs}\left({\color{gray}-0.690 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_small

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 52	$$3.15 \mathrm{ms} \pm 18.9 \mathrm{μs}\left({\color{gray}-0.178 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$2.86 \mathrm{ms} \pm 13.3 \mathrm{μs}\left({\color{gray}-0.947 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 25	$$3.03 \mathrm{ms} \pm 18.3 \mathrm{μs}\left({\color{gray}0.186 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 94	$$3.58 \mathrm{ms} \pm 17.1 \mathrm{μs}\left({\color{gray}-1.096 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$3.14 \mathrm{ms} \pm 13.4 \mathrm{μs}\left({\color{gray}-1.562 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 26	$$3.37 \mathrm{ms} \pm 15.1 \mathrm{μs}\left({\color{gray}-0.883 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 66	$$3.51 \mathrm{ms} \pm 17.9 \mathrm{μs}\left({\color{gray}-0.250 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.13 \mathrm{ms} \pm 13.2 \mathrm{μs}\left({\color{gray}-0.509 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 29	$$3.42 \mathrm{ms} \pm 17.2 \mathrm{μs}\left({\color{gray}-0.298 \mathrm{\%}}\right) $$	Flame Graph

read_scaling_complete

Function	Value	Mean	Flame graphs
entity_by_id;one_depth	1 entities	$$41.2 \mathrm{ms} \pm 188 \mathrm{μs}\left({\color{gray}-1.375 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	10 entities	$$79.1 \mathrm{ms} \pm 327 \mathrm{μs}\left({\color{gray}-1.422 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	25 entities	$$45.0 \mathrm{ms} \pm 208 \mathrm{μs}\left({\color{gray}-1.138 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	5 entities	$$48.0 \mathrm{ms} \pm 200 \mathrm{μs}\left({\color{gray}-0.663 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	50 entities	$$55.1 \mathrm{ms} \pm 277 \mathrm{μs}\left({\color{gray}-1.866 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	1 entities	$$43.2 \mathrm{ms} \pm 260 \mathrm{μs}\left({\color{gray}-0.493 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	10 entities	$$425 \mathrm{ms} \pm 1.09 \mathrm{ms}\left({\color{gray}-0.410 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	25 entities	$$97.5 \mathrm{ms} \pm 518 \mathrm{μs}\left({\color{gray}-1.408 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	5 entities	$$86.8 \mathrm{ms} \pm 414 \mathrm{μs}\left({\color{gray}-0.924 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	50 entities	$$284 \mathrm{ms} \pm 723 \mathrm{μs}\left({\color{lightgreen}-10.368 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	1 entities	$$15.4 \mathrm{ms} \pm 91.3 \mathrm{μs}\left({\color{gray}-3.076 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	10 entities	$$15.8 \mathrm{ms} \pm 108 \mathrm{μs}\left({\color{gray}-0.412 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	25 entities	$$16.0 \mathrm{ms} \pm 77.0 \mathrm{μs}\left({\color{gray}1.09 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	5 entities	$$15.7 \mathrm{ms} \pm 87.4 \mathrm{μs}\left({\color{gray}0.442 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	50 entities	$$18.7 \mathrm{ms} \pm 135 \mathrm{μs}\left({\color{gray}1.08 \mathrm{\%}}\right) $$	Flame Graph

read_scaling_linkless

Function	Value	Mean	Flame graphs
entity_by_id	1 entities	$$15.4 \mathrm{ms} \pm 65.3 \mathrm{μs}\left({\color{gray}-1.632 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	10 entities	$$15.5 \mathrm{ms} \pm 94.7 \mathrm{μs}\left({\color{gray}-0.992 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	100 entities	$$15.5 \mathrm{ms} \pm 76.5 \mathrm{μs}\left({\color{gray}0.320 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	1000 entities	$$16.1 \mathrm{ms} \pm 81.4 \mathrm{μs}\left({\color{gray}-0.187 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	10000 entities	$$23.3 \mathrm{ms} \pm 195 \mathrm{μs}\left({\color{gray}0.838 \mathrm{\%}}\right) $$	Flame Graph

representative_read_entity

Function	Value	Mean	Flame graphs
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/block/v/1	$$29.7 \mathrm{ms} \pm 274 \mathrm{μs}\left({\color{gray}-2.401 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/book/v/1	$$30.9 \mathrm{ms} \pm 255 \mathrm{μs}\left({\color{gray}-0.774 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/building/v/1	$$31.2 \mathrm{ms} \pm 311 \mathrm{μs}\left({\color{gray}1.51 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/organization/v/1	$$29.9 \mathrm{ms} \pm 263 \mathrm{μs}\left({\color{gray}-0.902 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/page/v/2	$$31.4 \mathrm{ms} \pm 266 \mathrm{μs}\left({\color{gray}-0.212 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/person/v/1	$$31.3 \mathrm{ms} \pm 273 \mathrm{μs}\left({\color{gray}1.08 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/playlist/v/1	$$31.5 \mathrm{ms} \pm 315 \mathrm{μs}\left({\color{gray}3.07 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/song/v/1	$$30.7 \mathrm{ms} \pm 295 \mathrm{μs}\left({\color{gray}0.190 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/uk-address/v/1	$$31.5 \mathrm{ms} \pm 312 \mathrm{μs}\left({\color{gray}-0.879 \mathrm{\%}}\right) $$	Flame Graph

representative_read_entity_type

Function	Value	Mean	Flame graphs
get_entity_type_by_id	Account ID: bf5a9ef5-dc3b-43cf-a291-6210c0321eba	$$8.62 \mathrm{ms} \pm 48.2 \mathrm{μs}\left({\color{gray}-0.357 \mathrm{\%}}\right) $$	Flame Graph

representative_read_multiple_entities

Function	Value	Mean	Flame graphs
entity_by_property	traversal_paths=0	0	$$89.9 \mathrm{ms} \pm 559 \mathrm{μs}\left({\color{gray}0.604 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=255	1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true	$$141 \mathrm{ms} \pm 520 \mathrm{μs}\left({\color{gray}0.319 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false	$$97.1 \mathrm{ms} \pm 398 \mathrm{μs}\left({\color{gray}-0.114 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true	$$106 \mathrm{ms} \pm 471 \mathrm{μs}\left({\color{gray}0.987 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true	$$115 \mathrm{ms} \pm 620 \mathrm{μs}\left({\color{gray}1.60 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true	$$121 \mathrm{ms} \pm 564 \mathrm{μs}\left({\color{gray}0.499 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=0	0	$$87.0 \mathrm{ms} \pm 429 \mathrm{μs}\left({\color{gray}-1.203 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=255	1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true	$$116 \mathrm{ms} \pm 495 \mathrm{μs}\left({\color{gray}1.59 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false	$$95.5 \mathrm{ms} \pm 470 \mathrm{μs}\left({\color{gray}0.583 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true	$$102 \mathrm{ms} \pm 502 \mathrm{μs}\left({\color{gray}0.160 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true	$$105 \mathrm{ms} \pm 536 \mathrm{μs}\left({\color{gray}0.127 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true	$$105 \mathrm{ms} \pm 511 \mathrm{μs}\left({\color{gray}0.063 \mathrm{\%}}\right) $$

scenarios

Function	Value	Mean	Flame graphs
full_test	query-limited	$$131 \mathrm{ms} \pm 632 \mathrm{μs}\left({\color{gray}1.50 \mathrm{\%}}\right) $$	Flame Graph
full_test	query-unlimited	$$129 \mathrm{ms} \pm 505 \mathrm{μs}\left({\color{gray}0.064 \mathrm{\%}}\right) $$	Flame Graph
linked_queries	query-limited	$$105 \mathrm{ms} \pm 563 \mathrm{μs}\left({\color{gray}0.636 \mathrm{\%}}\right) $$	Flame Graph
linked_queries	query-unlimited	$$565 \mathrm{ms} \pm 1.15 \mathrm{ms}\left({\color{lightgreen}-5.547 \mathrm{\%}}\right) $$	Flame Graph