docs: update docs for various widgets

docs/user/widgets/bec_progressbar/bec_progressbar.md

@@ -3,7 +3,7 @@
 
 ```{tab} Overview
 
-The BEC Progressbar widget is a general purpose progress bar that follows the BEC theme and style. It can be embedded in any application to display the progress of a task or operation. 
+The [`BECProgressbar`](/api_reference/_autosummary/bec_widgets.cli.client.BECProgressBar) widget is a general purpose progress bar that follows the BEC theme and style. It can be embedded in any application to display the progress of a task or operation. 
 
 ## Key Features:
 - **Modern Design**: The BEC Progressbar widget is designed with a modern and sleek appearance, following the BEC theme.
@@ -25,8 +25,9 @@ The `BECProgressBar` widget can be integrated within a [`BECDockArea`](user.widg
 In this example, we demonstrate how to add a `BECProgressBar` widget to a `BECDockArea`, allowing users to manually set and update the progress states.
 
 ```python
-# Add a new dock with a BECStatusBox widget
-pb = gui.add_dock().add_widget("BECProgressBar")
+# Add a new dock with a BEC Progressbar widget
+dock_area = gui.new()
+pb = dock_area.new().new(gui.available_widgets.BECProgressBar)
 pb.set_value(50)
 ```
 
@@ -34,6 +35,6 @@ pb.set_value(50)
 
 ````{tab} API
 ```{eval-rst} 
-.. include:: /api_reference/_autosummary/bec_widgets.cli.client.BECProgressbar.rst
+.. include:: /api_reference/_autosummary/bec_widgets.cli.client.BECProgressBar.rst
 ```
 ````

docs/user/widgets/device_browser/device_browser.md

@@ -4,7 +4,7 @@
 
 ````{tab} Overview
 
-The `Device Browser` widget provides a user-friendly interface for browsing through all available devices in the current BEC session. As it supports drag functionality, users can easily drag and drop device into other widgets or applications. 
+The [`Device Browser`](/api_reference/_autosummary/bec_widgets.cli.client.DeviceBrowser) widget provides a user-friendly interface for browsing through all available devices in the current BEC session. As it supports drag functionality, users can easily drag and drop device into other widgets or applications. 
 
 ```{note}
 The `Device Browser` widget is currently under development. Other widgets may not support drag and drop functionality yet.
@@ -24,7 +24,10 @@ In this example, we demonstrate how to add a `DeviceBrowser` widget to a `BECDoc
 
 ```python
 # Add a new dock with a DeviceBrowser widget
-browser = gui.add_dock().add_widget("DeviceBrowser")
+dock_area = gui.new()
+browser = dock_area.new("device_browser").new(gui.available_widgets.DeviceBrowser)
+# You can also access the DeviceBrowser widget directly from the dock_area
+dock_area.device_browser.DeviceBrowser
 ```
 
 ````

docs/user/widgets/dock_area/bec_dock_area.md

@@ -9,7 +9,7 @@
 - **Flexible Dock Management**: Easily add, remove, and rearrange docks within `BECDockArea`, providing a customized layout for different tasks.
 - **State Persistence**: Save and restore the state of the dock area, enabling consistent user experiences across sessions.
 - **Dock Customization**: Add docks with customizable positions, names, and behaviors, such as floating or closable docks.
-- **Integration with Widgets**: Integrate various widgets like [`WaveformWidget`](user.widgets.waveform_widget), [`ImageWidget`](user.widgets.image_widget), and [`MotorMapWidget`](user.widgets.motor_map) into `BECDockArea`, either as standalone tools or as part of a more complex interface.
+- **Integration with Widgets**: Integrate various widgets like [`WaveformWidget`](user.widgets.waveform_widget), [`ImageWidget`](user.widgets.image_widget), and [`MotorMapWidget`](user.widgets.motor_map) into [`BECDockArea`](/api_reference/_autosummary/bec_widgets.cli.client.BECDockArea), either as standalone tools or as part of a more complex interface.
 
 **BEC Dock Area Components Schema**
 
@@ -24,14 +24,18 @@ In the following examples, we will use `BECIPythonClient` as the main object to
 In this example, we will demonstrate how to add different docks to a single `BECDockArea` widget. New docks are always added to the bottom of the dock area by default; however, you can specify the position of the dock by using the `position` and `relative_to` arguments.
 
 ```python
-# Add a new dock with a WaveformWidget to the BECDockArea
-dock1 = gui.add_dock(name="Waveform Dock", widget="BECWaveformWidget")
+# Create a new dock_area from GUI object
+dock_area = gui.new()
+
+# Add a new dock with a Waveform to the BECDockArea
+dock_area.new(name="waveform_dock", widget="Waveform")
+dock1 = dock_area.waveform_dock # dynamic namespace was created
 
 # Add a second dock with a MotorMapWidget to the BECDockArea to the right of the first dock
-dock2 = gui.add_dock(name="Motor Map Dock", widget="BECMotorMapWidget",relative_to="Waveform Dock", position="right")
+dock2 = dock_area.new(name="motor_dock", widget="MotorMap",relative_to="Waveform Dock", position="right")
 
 # Add a third dock with an ImageWidget to the BECDockArea, placing it on bottom of the dock area
-dock3 = gui.add_dock(name="Image Dock", widget="BECImageWidget")
+dock3 = dock_area.new(name="image_dock", widget="Image")
 ```
 
 ```{hint}
@@ -44,18 +48,26 @@ Docks can be accessed by their name or by the dock object. The dock object can b
 
 ```python
 # All docks can be accessed by their name from the panels dictionary
-gui.panels
+dock_area.panels
 
 # Output
-{'Waveform Dock': <BECDock object at 0x168b983d0>,
- 'Motor Map Dock': <BECDock object at 0x13a969250>,
- 'Image Dock': <BECDock object at 0x13f267950>}
- 
-# Access the dock by its name
-dock1 = gui.panels["Waveform Dock"]
+{'waveform_dock': <BECDock with name: waveform_dock>,
+ 'motor_dock': <BECDock with name: motor_dock>,
+ 'image_dock': <BECDock with name: image_dock>}
+# Access all docks from the dock area via list
+dock_area.panel_list
 
-# Access the widget object of the dock
-waveform_widget = dock1.widget_list[0]
+# Access through dynamic namespace mapping
+dock_area.waveform_dock
+dock_area.motor_dock
+dock_area.image_dock
+
+# If objects were closed, we will keep a refernce that will indicate that the dock was deleted
+# Try closing the window with the dock_area via mouse click on x
+
+dock_area
+# Output
+<Deleted widget with gui_id BECDockArea_2025_04_24_14_28_11_742887>
 ```
 
 ## Example 3 - Detaching and Attaching Docks in BECDockArea
@@ -64,11 +76,10 @@ Docks in `BECDockArea` can be detached (floated) or reattached to the main dock
 
 ```python
 # Detach the dock named "Waveform Dock"
-gui.detach_dock(dock_name="Waveform Dock")
-
-# Docks can be also detached by the dock object
-dock2.detach()
-dock3.detach()
+dock_area.detach_dock("waveform_dock")
+# Alternatively, you can use the dock object to detach the dock
+dock1 = dock_area.waveform_dock
+dock1.detach()
 
 # Docks can be individually reattached to the main dock area
 dock2.attach()
@@ -87,13 +98,13 @@ Docks can be removed from the dock area by their name or by the dock object. The
 
 ```python
 # Removing docks by their name
-gui.remove_dock(dock_name="Waveform Dock")
-
-# Removing docks by the dock object
-dock2.remove()
+dock_area.delete("waveform_dock")
+# Alternatively, you can use the dock object to remove the dock
+dock1 = dock_area.motor_dock
+dock1.remove()
 
 # Removing all docks from the dock area
-gui.clear_all()
+gui.delete_all()
 ```
 
 ```{warning}

docs/user/widgets/queue/queue.md

@@ -4,7 +4,7 @@
 
 ````{tab} Overview
 
-The [`BEC Queue Widget`](/api_reference/_autosummary/bec_widgets.cli.client.BECQueue) provides a real-time display and control of the BEC scan queue, allowing users to monitor, manage, and control the status of ongoing and pending scans. The widget automatically updates to reflect the current state of the scan queue, displaying critical information such as scan numbers, types, and statuses. Additionally, it provides control options to stop individual scans, stop the entire queue, resume, and reset the queue, making it a powerful tool for managing scan operations in the BEC environment.
+The [`BEC Queue`](/api_reference/_autosummary/bec_widgets.cli.client.BECQueue) widget provides a real-time display and control of the BEC scan queue, allowing users to monitor, manage, and control the status of ongoing and pending scans. The widget automatically updates to reflect the current state of the scan queue, displaying critical information such as scan numbers, types, and statuses. Additionally, it provides control options to stop individual scans, stop the entire queue, resume, and reset the queue, making it a powerful tool for managing scan operations in the BEC environment.
 
 ## Key Features:
 - **Real-Time Queue Monitoring**: Displays the current state of the BEC scan queue, with automatic updates as the queue changes.
@@ -25,7 +25,9 @@ In this example, we demonstrate how to add a `BECQueue` widget to a `BECDockArea
 
 ```python
 # Add a new dock with a BECQueue widget
-bec_queue = gui.add_dock().add_widget("BECQueue")
+dock_area = gui.new()
+dock_area.new("queue").new(gui.available_widgets.BECQueue)
+queue = dock_area.queue.BECQueue
 ```
 
 ```{hint}

docs/user/widgets/scan_control/scan_control.md

@@ -22,7 +22,7 @@ By default, this widget supports scans that are derived from the following base
 ```
 
 ```{hint}
-The full procedure how to design `gui_config` for your custom scan class is described in the [Scan GUI Configuration](https://bec.readthedocs.io/en/latest/developer/scans/scan_gui_config.html) tutorial.
+The full procedure how to design `gui_config` for your custom scan class is described in the [Scan GUI Configuration](https://bec.readthedocs.io/en/latest/developer/scans/tutorials/scan_gui_config.html) tutorial.
 ```
 
 ## BECDesigner Customization
@@ -52,7 +52,8 @@ In this example, we demonstrate how to add a `ScanControl` widget to a `BECDockA
 
 ```python
 # Add a new dock with a ScanControl widget
-scan_control = gui.add_dock().add_widget("ScanControl")
+dock_area = gui.new()
+scan_control = dock_area.new().new(gui.available_widgets.ScanControl)
 ```
 ````
 

docs/user/widgets/website/website.md

@@ -23,7 +23,8 @@ In this example, we demonstrate how to add a `WebsiteWidget` to a `BECDockArea`
 
 ```python
 # Add a new dock with a WebsiteWidget
-web = gui.add_dock().add_widget("WebsiteWidget")
+dock_area = gui.new()
+web = dock_area.new().new(gui.available_widgets.WebsiteWidget)
 
 # Set the URL of the website to display
 web.set_url("https://bec.readthedocs.io/en/latest/")
@@ -32,6 +33,7 @@ web.set_url("https://bec.readthedocs.io/en/latest/")
 ## Example 2 - Navigating within the Website Widget
 
 The `WebsiteWidget` allows users to navigate back and forward through the website’s history. This example shows how to implement these navigation controls.
+If you click on a link in the website, you can use the back and forward buttons to navigate through the history.
 
 ```python
 # Go back in the website history