✨ Add automatic sidebar sync with canvas updates

[rabea-al]

Description

This PR introduces automatic synchronization between the Component Preview sidebar and the canvas state.

The sidebar’s Inputs and Outputs sections now update immediately when nodes or links change — such as when connections are added, removed, or modified — without requiring a manual refresh.

Pull Request Type

• Xircuits Core (Jupyterlab Related changes)
• Xircuits Canvas (Custom RD Related changes)
• Xircuits Component Library
• Xircuits Project Template
• Testing Automation
• Documentation
• Others (Please Specify)

Type of Change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Tests

1. Node and I/O synchronization

Steps:

1. Open a workflow and select a node.
2. Add or remove inputs/outputs or modify parameter values.

Expected:

• The Inputs and Outputs sections in the sidebar update immediately.
• The toolbar buttons remain functional and update correctly.

2. Link connection and removal

Steps:

1. Start dragging a link from a node output.
2. Drop it on a valid input port, then remove the link again.

Expected:

• While dragging, the sidebar does not flicker or clear sections.
• After connecting or removing the link, the sidebar updates automatically to reflect the new state.

Tested on? Specify Version.

• Windows
• Linux Fedora
• Mac
• Others (State here -> xxx )

[github-actions]

👈 Launch a binder notebook on branch rabea-al/xircuits/feature/sidebar-auto-sync

[MFA-X-AI]

Thanks for the PR!
The current way it's implemented, if I understood it correctly, for each small drag it fires the event for the sidebar to listen.
Try firing the event from here:

https://github.com/XpressAI/xircuits/blob/master/src/components/XircuitsBodyWidget.tsx#L454-L459C6