FE-706: Add design system components to Petrinaut

[alex-e-leon]

🌟 What is the purpose of this PR?

Replaces all Buttons, IconButtons and Icons with DS components.

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	May 15, 2026 4:30pm
petrinaut	Ready	Preview, Comment	May 15, 2026 4:30pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored		May 15, 2026 4:30pm

[cursor]

PR Summary

Medium Risk
Broad UI refactor replacing react-icons/custom IconButton with DS Button/Icon, plus changes to DS icon assets/build pipeline; risk is mainly visual regressions and subtle behavior/typing differences in many interactive controls.

Overview
Migrates Petrinaut UI controls from react-icons and a custom IconButton to DS components (Button, Icon) across dialogs, drawers, popovers, toolbars, panels, and node renderers, standardizing icon names, tones/variants, and tooltip usage.

Updates @hashintel/ds-components to build SVG imports via esbuild-plugin-svgr, relaxes Button typing around onClick, and refreshes/expands the Icon set (new icon names + filled variants like playFilled, pauseFilled, circleFilled, stopFilled, etc.), including moving several icons to consistent regular assets and removing unused light variants.

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

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

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

^{Reviewed by Cursor Bugbot for commit 88f23bd. Configure here.}

[augmentcode]

🤖 Augment PR Summary

Summary: This PR migrates Petrinaut’s UI to the new @hashintel/ds-components design system primitives, replacing legacy buttons and react-icons usage with DS Button/Icon.

Changes:

• Replaces many Petrinaut <button>/IconButton usages with the DS Button wrapper (including consistent tooltip support).
• Swaps react-icons imports across Petrinaut for DS Icon names (e.g. chevrons, trash, play/pause, settings, etc.).
• Removes Petrinaut’s react-icons dependency.
• Updates DS icon set/mappings and adds additional icons needed by Petrinaut (including filled variants).
• Updates @hashintel/ds-components build pipeline to use esbuild-plugin-svgr (and removes @svgr/rollup).

Technical Notes: DS Button already defaults type to "button"; Petrinaut also introduces a wrapper to widen typing for data-* attributes and Ark UI asChild patterns.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 2 suggestions posted.

Comment augment review to trigger a new review at any time.

[kube]

👍
Thanks!

Cool to know that these are all in the Design System now.

A little remark: name in <Icon name="" is a bit strange because you could think it is the HTML property, where it is actually the id of the icon (id wouldn't be better though)

[alex-e-leon]

👍
Thanks!

Cool to know that these are all in the Design System now.

A little remark: name in <Icon name="" is a bit strange because you could think it is the HTML property, where it is actually the id of the icon (id wouldn't be better though)

Agree it's not perfect - I'll mull over it and see if I can come up with anything better, or if you think of anything let me know. I took a look at what some of the other major design systems use in case any of them have a better property name, but the only one which uses an api I've found so far is Atlaskit and they also use the term "name".