feat(apollo-react): add CanvasModeToolbar and CanvasZoomControls

[1980computer]

Summary

• CanvasModeToolbar — mode switcher (design / debug / evaluate) with undo/redo controls, debug run controls (step, continue, restart, stop), upgrade-node action badge, and an optional add-panel slot. All Flow-app-specific dependencies (Zustand store, internal hooks, telemetry, i18n) replaced with explicit props and inline string defaults.
• CanvasZoomControls — zoom in / zoom out / fit-to-screen / tidy-up buttons. Supports vertical (default) and horizontal orientations. forwardRef added for external DOM access (e.g. overlap detection). Removes useTranslation/CANVAS_NAMESPACE.
• Both components exported from canvas/components/index.ts with Storybook stories covering all key states.
• useElementsOverlap hook added and exported from canvas/hooks — ResizeObserver-based detection of whether two DOM elements overlap, intended for wiring CanvasModeToolbar ↔ CanvasZoomControls auto-orientation.
• Fixed isTerminalDebugStatus to use the correct DebugStatus values ('success' | 'error'); previous values ('completed' | 'failed' | 'cancelled') would have left the canvas locked after debug completion and broken the Restart button.
• Removed dead initializing prop (was never referenced in the component body).

Storybook stories

Component	Stories
CanvasModeToolbar	Default, WithEvaluateToggle, DebugRunning, DebugPaused, WithUpgradeAction, ReadOnly
CanvasZoomControls	Vertical, Horizontal, WithOrganize

Test plan

• Open Storybook → Canvas / Components / CanvasModeToolbar — verify all 6 stories render and mode toggle / debug controls are interactive
• Open Storybook → Canvas / Components / CanvasZoomControls — verify all 3 stories render and zoom/fit buttons work against a live ReactFlow canvas
• TypeScript: pnpm --filter @uipath/apollo-react tsc --noEmit passes
• No new Emotion/MUI imports introduced — all styling via Tailwind + @uipath/apollo-wind
• pnpm --filter @uipath/apollo-react run format:check passes

🤖 Generated with Claude Code

[github-actions]

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

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	May 26, 2026, 10:29:47 AM
apollo-docs	🟢 Ready	Preview, Logs	May 26, 2026, 10:29:47 AM
apollo-landing	🟢 Ready	Preview, Logs	May 26, 2026, 10:29:47 AM
apollo-ui-react	🟢 Ready	Preview, Logs	May 26, 2026, 10:29:47 AM
apollo-vertex	🟢 Ready	Preview, Logs	May 26, 2026, 10:29:47 AM

[github-actions]

Dependency License Review

• ✅ 1901 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1671
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[1980computer]

Good feedback @BenGSchulz, all three addressed:

ToolbarButton — extracted a shared ToolbarButton component (canvas/components/ToolbarButton.tsx) that wraps the Tooltip → Button pattern. Both CanvasModeToolbar and CanvasZoomControls now import it. Each file keeps its own icon-size class constant so the sizing stays context-specific.

CountBadge — added a variant prop ('default' | 'destructive'). The upgrade node badge now uses instead of the inline span — same visual output, consistent with how undo/redo badges are handled.

i18n — wired useSafeLingui into both components and wrapped all user-visible strings. Used the same pattern as Toolbox and StageNode. The hook falls back to the English message string when no provider is mounted so there's no risk of regression for consumers who haven't added ApI18nProvider yet.

[BenGSchulz]

Thanks for addressing my earlier comments. Sorry I missed raising this one earlier. I think we are moving away from the upgrade UX in this toolbar.

But want to confirm with @soomin-uipath first since he has more context on the upgrade UX.

[BenGSchulz]

Yeah, confirmed with Soomin that it has been removed via https://github.com/UiPath/flow-workbench/pull/1697. So we can remove this I think.

It actually raises another point to consider though... These components lock the UI library into flow-implementation-specific behavior (i.e. Build vs Evaluate modes and having the add sticky/node actions, and debug status handling). I wonder if it might make sense to have these components act more as a standard formatter / shell for any XYZ actions/modes that a consumer might want to add. So rather than accepting explicit props like showEvaluateToggle or onAddNode, we just render children that the consumer provides like the mode toggle (which can be its own helper component) or ToolbarButtons. The consumer is responsible for figuring out how they want to expose and handle modes / actions while we handle the presentation.