FE-1635: Give the default canvas nodes the compact nodes' surface

[kube]

Summary

Give default canvas nodes a compact surface while keeping circular Places and rectangular Transitions. Place circles are 104px, and Transitions are 180 × 60px with an icon on the left, a wrapped name, and the transition type below it. Both names use the same 13px medium weight, with soft shadows and muted 1.5px outlines.

9595.mp4

Links

• Ticket FE-1706 (internal)
• Ticket FE-1635 (internal)
• Docs Visual settings

Blocked by

• #9696

Changes

• Keep three-line Place names and token counts inside the smaller circles
• Preserve every character when adding wrap points to sentence and PascalCase names
• Retain the classic outline during transition firing flashes and compose it with focus effects
• Soften default outlines with neutral gray while retaining token-type colors
• Use canvas dimensions and positions for minimap rectangles and center Place glyphs on their nodes
• Add patch changesets for Petrinaut and core and update the visual-settings guide

Known issues

Canvas screenshots in drawing-a-net, examples, petri-net-extensions, and simulation still need refreshing. Existing React Compiler diagnostics remain nonfatal under the inherited configuration.

Test coverage

Label-wrapping tests cover sentence names, PascalCase, acronyms, and digits. All 23 local build, unit-test, type-check, and lint tasks passed for Petrinaut, core, and the website, including a full website rerun after an asynchronous chat-history test race. All three commits remain patch-equivalent on the final rebased head 249f73dcc6; CI completed with 63 successful checks and no failures.

Browser checks covered classic and compact node dimensions and minimap positions. The final rebased SIR demo verifies selection, firing flashes, token counts, and switching to Compact Nodes, with no recorded console or page errors. Earlier checks also covered three-line Place names with token counts, matching typography, and plain and colored outlines; all three commits remained patch-equivalent through the final rebase.

How to test

• Open the SIR and supply-chain examples with Compact nodes disabled
• Inspect wrapped names, token colors, selection, and neighboring-node dimming
• Run a simulation and check token counts fit and transition flashes return to the resting surface
• Enable Compact nodes and compare focus, counts, and playback

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 15, 2026 4:15pm UTC
petrinaut	Ready	Preview	Sep 15, 2026 4:15pm UTC
petrinaut-docs	Ready	Preview	Sep 15, 2026 4:15pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 15, 2026 4:15pm UTC

[cursor]

PR Summary

Low Risk
Changes are limited to canvas rendering, label wrapping, minimap drawing, and layout constants; simulation logic and data are untouched, with some visual regression risk on classic nodes and the minimap.

Overview
Classic (default) canvas nodes get a visual refresh aligned with compact cards: soft elevation, a 1.5px muted outline drawn via --node-outline-ring, and shared layout tokens. Places stay circular on a 104×104 footprint with a three-row layout (dynamics icon, wrapped name, token badge). Transitions use a 180×60 white card with a left icon, up to two lines of name, and a Transition / Stochastic / Predicate subtitle; the stochastic λ badge moves onto the icon.

Label handling switches from splitPascalCase to withLabelWrapPoints, which inserts zero-width break opportunities at PascalCase, acronym, and digit boundaries while leaving normal sentence labels unchanged (with tests).

Focus and firing: nodeFocusStyle layers the outline ring with focus glow and elevation; the transition firing flash keeps the outline ring in its keyframe boxShadow.

The minimap draws shapes at each node’s real width / height and position instead of a fixed 90px template.

Docs describe the updated classic vs compact appearance; changesets note the dimension and styling bumps for @hashintel/petrinaut-core and @hashintel/petrinaut.

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

[Copilot]

🟡 Changes recommended

The completed firing animation continues overriding the transition’s hover shadow.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Unifies classic and compact canvas node surfaces while improving classic transition sizing and label wrapping. Documentation screenshots remain pending.

Changes:

• Adds shared node surface, selection, and firing-animation logic.
• Makes classic transitions square and supports three-line labels.
• Updates tests, documentation, and package changesets.

File summaries

File	Description
.changeset/classic-transition-dimensions.md	Records the core dimension change.
.changeset/default-nodes-compact-surface.md	Records Petrinaut’s visual changes.
libs/@hashintel/petrinaut/docs/visual-settings.md	Documents both node styles.
libs/@hashintel/petrinaut/src/ui/lib/label-wrap-points.test.ts	Tests label boundaries.
libs/@hashintel/petrinaut/src/ui/lib/label-wrap-points.ts	Adds non-destructive wrap points.
libs/@hashintel/petrinaut/src/ui/lib/split-pascal-case.test.ts	Removes superseded tests.
libs/@hashintel/petrinaut/src/ui/lib/split-pascal-case.ts	Removes superseded helper.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/hooks/use-firing-animation.ts	Shares transition firing animation.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/hooks/use-selection-variant.ts	Centralizes selection-state mapping.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-place-node.tsx	Applies shared surface and wrapping.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-transition-node.tsx	Adds square layout and shared surface.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/component-instance-node.tsx	Reuses selection-state logic.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/node-card.tsx	Composes shared surface styling.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/place-node.tsx	Adopts shared selection handling.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/transition-node.tsx	Adopts shared surface and animation.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/styles/node-surface.ts	Defines common node styling.
libs/@hashintel/petrinaut-core/src/layout/dimensions.ts	Changes classic transitions to 120×120.

Review details

• Files reviewed: 17/17 changed files
• Comments generated: 1
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cursor]

Stale Bugbot comment from a previous run.

[cursor]

Stale Bugbot comment from a previous run.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (codex/fe-1708-petricon@dc5c004). Learn more about missing BASE report.

Additional details and impacted files

@@                    Coverage Diff                    @@
##             codex/fe-1708-petricon    #9595   +/-   ##
=========================================================
  Coverage                          ?   15.35%           
=========================================================
  Files                             ?      210           
  Lines                             ?     6677           
  Branches                          ?     1154           
=========================================================
  Hits                              ?     1025           
  Misses                            ?     5551           
  Partials                          ?      101           

Flag	Coverage Δ
apps.hash-api	15.35% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cursor]

Stale Bugbot comment from a previous run.

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

^{Reviewed by Cursor Bugbot for commit 5a8eec8. Configure here.}