feat(workflow-builder): add smooth auto-focus and zoom-out transition…

[krishna9358]

Summary

Issue: When selecting a node in the workflow builder, the configuration sidebar often obscured the node, requiring the user to manually pan the canvas. Furthermore, closing the sidebar left the view locked on the specific area rather than restoring the global view of the workflow, making navigation cumbersome.

Solution:

• Implemented smooth auto-centering using React Flow's fitView when a node is selected. This ensures the node is perfectly framed and not blocked by the sidebar.
• Added a 200ms delay on selection to account for the sidebar opening animation, ensuring the centering calculation is accurate.
• Implemented an automatic "zoom to fit" behavior when deselecting a node (closing the sidebar), smoothly returning the view to show the entire workflow.
• Added a 300ms delay on sidebar close to ensure the viewport calculation uses the full available canvas width.
• Configured transitions with an 800ms duration for a fluid, premium interaction feel.

Testing

• bun run test
• bun run lint
• bun run typecheck
• Additional notes:

Documentation

• Updated the relevant doc(s) (see docs/guide.md) or checked that no updates are needed.
• Recorded contract/architecture changes in both public docs and .ai logs when applicable.

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.