Skip to content

FE-225: Update Petrinaut UI#8472

Draft
kube wants to merge 109 commits intographite-base/8472from
cf/fe-225-migrate-petrinaut-to-figma-designs
Draft

FE-225: Update Petrinaut UI#8472
kube wants to merge 109 commits intographite-base/8472from
cf/fe-225-migrate-petrinaut-to-figma-designs

Conversation

@kube
Copy link
Collaborator

@kube kube commented Feb 23, 2026

🌟 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
  • 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

@vercel
Copy link

vercel bot commented Feb 23, 2026

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

Project Deployment Actions Updated (UTC)
hash Error Error Mar 3, 2026 7:34pm
petrinaut Ready Ready Preview Mar 3, 2026 7:34pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
hashdotdesign Ignored Ignored Preview Mar 3, 2026 7:34pm
hashdotdesign-tokens Ignored Ignored Preview Mar 3, 2026 7:34pm

@vercel
Copy link

vercel bot commented Feb 23, 2026

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

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

Copy link
Collaborator Author

kube commented Feb 23, 2026

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

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

overlay.style.inset = "0";
overlay.style.zIndex = "99999";
overlay.style.cursor = getCursor(direction);
overlay.style.userSelect = "none";

Check warning

Code scanning / Semgrep PRO

Semgrep Finding: ajinabraham.njsscan.generic.hardcoded_secrets.node_username

A hardcoded username in plain text is identified. Store it properly in an environment variable.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…piler

React Compiler handles memoization automatically, making useCallback
unnecessary. Also extracts panel transition logic into a useTransientTransition
hook and disables react-hooks/exhaustive-deps ESLint rule.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
kube and others added 3 commits March 3, 2026 17:15
Add smooth CSS transitions when toggling LeftSideBar, BottomPanel, and
PropertiesPanel. Panels now slide in/out instead of abruptly mounting/
unmounting. Adjacent UI elements (BottomBar, ViewportControls, MiniMap)
also transition their positions smoothly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Panels now stay mounted during the exit animation (while isPanelAnimating
is true), then unmount once the animation window ends.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Persist panel display settings (sidebar width, open state, bottom panel
height/tab, timeline chart type) across sessions via localStorage.
Introduce two behavior toggles: showAnimations (skip CSS transitions when
false) and keepPanelsMounted (keep closed panels in the DOM).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
kube and others added 9 commits March 3, 2026 19:25
Replace the placeholder Menu on the viewport Settings button with a proper
Dialog built on Ark UI. The Dialog follows the Figma design system (two-layer
structure: outer gray frame + inner white card, footer outside the card) and
the compound-component pattern established by Popover.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Wire Animations and Keep Panels Mounted switches to UserSettingsContext.
Add placeholder Modern Nodes Look switch and Arcs Rendering select.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy the main-branch PlaceNode and TransitionNode as classic variants.
Add a compactNodes user setting (persisted to localStorage) and wire it
to the "Compact nodes" switch in the Settings dialog. SDCPNView swaps
between compact and classic ReactFlow node types based on the setting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…m paths

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/apps > hash* Affects HASH (a `hash-*` app) area/apps area/deps Relates to third-party dependencies (area) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

1 participant