# **Component** : **Graph explorer**

**Description**:
A hierarchical tree structure that organizes all website data, including file directories, component entries, CSS files, and JSON documents.

**Screenshots**:

**wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1539-242&t=gM2dMWC9TpujKaWi-4

**Explanation-video**:
https://youtu.be/wsfKMoLejCI

---

# **Component** : **Taskbar**

**Description**:
A command bar that enables you to execute actions, launch step-by-step wizards, access console history, close the entire theme widget, and open the guided tooltip assistance, close tabs and etc.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1539-242&t=gM2dMWC9TpujKaWi-4

---

## **Component** : **Action bar**
**Description**:
A bar that enables you to execute quick actions actions, access console history, run step wizard.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-3510&t=SFjO822pHRzXoRgi-4

---
### **Component** : **Quick actions**

**Description**:
A collection of actions that can be executed on a program, which users can customize and select as default actions.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-3510&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/17LD8Ykt6K4

---

#### **Component** : **Step wizard**

**Description**:
When an action is triggered, it runs through a step-by-step wizard that displays the action name, a list of steps involved, and provides options to cancel or confirm each step,also indications for error,progressing,optional steps.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-4304&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/qyNGRwY6t8Q

---

### **Component** : **Console history**

**Description**:
The console history provides a log of all activities within the theme_widget, including executed commands, link and unlink actions, tab additions or deletions, and other significant events.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-5708&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/64ElsvkyZ9Q

---

### **Component** : **Command list**

**Description**:
A set of executable commands that can be applied to programs, can also pin actions to remain top of the list or make actions as your default action.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-5082&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/JJD_8qM5DqM

---

## **Component** : **Tab bar**

**Description**:
The tab bar allows users to open files such as task.json, access the editor, add new tabs, and navigate to existing entries with ease.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-3510&t=0uOhtLuGbEJJPo5H-4

---

### **Component** : **Tabs**

**Description**:
A tab functions as a program where users can open and run files such as task.json or access the editor.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-5820&t=R31AvLUwjcSXdp1w-4
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-3788&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/N1-IIFkEKCE

---

### **Component** : **task.json**

**Description**:
Clicking the tabs icon opens the task.json file, which contains the state data for various files. From here, users can access state files associated with specific tabs or programs, allowing them to view and manage the current state of each file.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-5820&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/JDHsnL62H68

---

# **Component** : **Editor**

**Description**:
The editor allows users to modify files and also functions as a runtime environment for formats such as CSS, JSON, and others.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-3709&t=0uOhtLuGbEJJPo5H-4

**Explanation-video**:
https://youtu.be/DSczkMyEztY

---

# **Component** : **Doc Box**

**Description**:
A guidance tool that explains the functionality of features within the theme_widget.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1477-24977&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/Fjt9llNR_60

---

# **Component** : **Swipe gesture**

**Description**:
The swipe gesture (white line) allows users to collapse all visible elements within the theme_widget based on the currently selected program. Similar to the 'Show Desktop' feature in Windows, its behavior varies depending on the selected program—collapsing background processes, tabs, or other elements accordingly,leaving you just with quick actions.

**Screenshots**:

**Wireframe-link**:
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-4225&t=R31AvLUwjcSXdp1w-4
https://www.figma.com/design/HlH2j2oNcrJjeP7qPrWX1g/Design-theme_widget?node-id=1463-4277&t=R31AvLUwjcSXdp1w-4

**Explanation-video**:
https://youtu.be/IJO6248vb6w

---