feat: add control box and hover box docs

Author: devvaannsh

docs/07-Pro Features/01-live-preview-edit.md

@@ -9,7 +9,7 @@ import VideoPlayer from '@site/src/components/Video/player';
 [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
 :::
 
-**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, rearrange elements, and update images and links. You can also duplicate, delete, and inspect elements with precise measurements.  
+**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, change element tags, update classes and IDs, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more.  
 **Phoenix Code** updates your source code automatically as you make changes.
 
 <VideoPlayer
@@ -28,84 +28,95 @@ Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` set
 
 ---
 
-## Info Box
+## Control Box
 
-The **Info Box** displays information about an element.
-> By default, the Info Box appears when you hover over an element in the Live Preview, but this behavior can be changed. See the [Inspect Element on Hover](#inspect-element-on-hover) section for more details.
+When you click an element in the Live Preview (or select it through the source code), a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it.
 
-![Info Box](./images/info-box.png "Info Box")
+<!-- Add an image here showing the Control Box with the info section and tools section visible -->
 
-The Info Box displays:
-- **Tag name and dimensions**: The element type (for example, `div`, `p`, `img`) and its size in pixels (width × height)
+> The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript.
+
+### Element Info
+
+The left side of the Control Box displays information about the selected element:
+- **Tag name**: The element type (for example, `div`, `p`, `img`)
 - **ID**: The element’s ID attribute (if present), shown with a `#` prefix
+- **Dimensions**: The element’s size in pixels (width × height)
 - **CSS classes**: The element’s classes, shown with a `.` prefix. If the element has more than three classes, only the first three are shown, followed by a “+N more” indicator
-- **Link URL**: The element’s `href` attribute (if present). This is shown only for anchor (`<a>`) elements
 
-#### Visual Indicators
+<!-- Add an image here showing the info section of the Control Box with tag name, ID, dimensions, and classes -->
 
-The Info Box normally has a *blue* background for standard HTML elements (for example, `<div>`, `<p>`, `<img>`). For dynamically created (JavaScript-rendered) elements, it appears with a *gray* background, indicating that these elements cannot be edited.
+Clicking on the info section opens the [Element Properties](#element-properties) editor, where you can edit the element’s tag name, classes, and ID.
 
-![Info Box non-editable](./images/info-box-gray.png "Info Box non editable")
-
----
+### Select Parent
 
-## Tool Box
+The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element.
 
-The **Tool Box** displays a set of tools you can use to modify elements in the Live Preview.
-> The Tool Box appears only when you click an element or select it through the source code.
+*This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).*
 
-![Tool Box](./images/tool-box.png "Tool Box")
+### Tools
 
-### Tool Box Options
+The right side of the Control Box displays a set of tools you can use to modify the selected element. The available tools depend on the element type. Some buttons are shown for all elements, while others appear only for specific element types.
 
-The Tool Box displays different options depending on the selected element type. Some buttons are available for all elements, while others are specific to certain element types.
+<!-- Add an image here showing the tools section of the Control Box -->
 
-- **Select Parent** *(up-arrow icon)*: Selects the parent of the currently selected element.  
-  *This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).*
-
-- **Edit Text** *(pen icon)*: Opens inline text editing for the selected element. You can edit text directly in the Live Preview, and Phoenix Code automatically updates the source code.  
-  *This button appears only for elements that can contain text (it is not available for `<img>`, `<video>`, `<br>`, etc.).*  
-  See the [Inline Text Editing](#inline-text-editing) section for more details.  
+- **Insert Element** *(plus icon)*: Opens a panel where you can insert a new HTML element before, after, or inside the selected element.  
+  *This option is available for all elements.*  
+  See the [Insert Element](#insert-element) section for more details.
 
-- **Edit Hyperlink** *(link icon)*: Opens a floating input box that lets you edit the element's `href` attribute.  
+- **Edit Hyperlink** *(chain icon)*: Opens a panel that lets you edit the element’s `href` attribute.  
   *This button appears only for `<a>` elements.*  
   See the [Edit Hyperlink](#edit-hyperlink) section for more details.
 
-- **Image Gallery** *(image icon)*: Opens an image gallery at the bottom of the Live Preview, where you can browse and select an image. You can also choose an image from your computer. Phoenix Code automatically saves the image to your project folder and updates the src attribute of the element.  
+- **Change Image** *(image icon)*: Opens an image gallery at the bottom of the Live Preview, where you can browse and select an image. You can also choose an image from your computer. Phoenix Code automatically saves the image to your project folder and updates the `src` attribute of the element.  
   *This button appears only for `<img>` elements.*  
-  See [Image Gallery](./02-image-gallery.md) for more details.  
+  See [Image Gallery](./02-image-gallery.md) for more details.
+
+- **Edit Text** *(pen icon)*: Opens inline text editing for the selected element. You can edit text directly in the Live Preview, and Phoenix Code automatically updates the source code.  
+  *This button appears only for elements that can contain text (it is not available for `<img>`, `<video>`, `<br>`, etc.).*  
+  See the [Inline Text Editing](#inline-text-editing) section for more details.
 
 - **Duplicate** *(copy icon)*: Copies the selected element and places it below. You can also duplicate elements using `Ctrl/Cmd + D` after clicking an element.  
   *This option is available for all elements.*
 
 - **Delete** *(trash icon)*: Deletes the selected element. You can also delete elements using the `Delete` key after clicking an element.  
   *This option is available for all elements.*
 
-- **More Options** *(three-dots icon)*: Opens a menu with additional actions. You can also open this menu by right-clicking anywhere in the live preview, but only in Edit Mode.  
+- **More Options** *(three-dots icon)*: Opens a menu with additional actions. You can also open this menu by right-clicking anywhere in the Live Preview, but only in Edit Mode.  
   *This option is available for all elements.*  
-  See [Cut, Copy, and Paste](#cut-copy-and-paste) for more details. 
+  See [Cut, Copy, and Paste](#cut-copy-and-paste) for more details.
+
+---
+
+## Hover Box
+
+The **Hover Box** is a small tooltip that appears when you hover over an element in Edit Mode. It shows an icon and a label that describe the element type (for example, “Image”, “Button”, “Container”, “Paragraph”).
+
+<!-- Add an image here showing the Hover Box tooltip on an element -->
+
+The Hover Box helps you quickly identify elements as you move your cursor over the page, without needing to click on them.
 
-> The Tool Box is never shown for non-editable elements that are dynamically created by JavaScript.
+> The Hover Box uses a different color for editable and non-editable elements. Standard HTML elements appear in blue, while dynamically created (JavaScript-rendered) elements appear in gray.
 
 ---
 
 ## Inspect Element on Hover
 
-By default, in Edit Mode, hovering over elements in the Live Preview highlights them and displays the Info Box. You can change this behavior to show highlights only when you click elements instead.
+By default, in Edit Mode, hovering over elements in the Live Preview highlights them and displays the [Hover Box](#hover-box). You can change this behavior to show highlights only when you click elements instead.
 
 To toggle this setting, click the **mode selector dropdown** in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked.
 
-![Inspect Element on Hover](./images/inspect-element-hover.png "Inspect Element on Hover")
+<!-- Add an image here showing the Inspect Element on Hover option in the mode selector dropdown -->
 
 When **Inspect Element on Hover** is checked (default):
-- Hovering over elements shows highlights and the Info Box
-- Clicking an element selects it and displays the Tool Box along with the Info Box
+- Hovering over elements shows highlights and the Hover Box
+- Clicking an element selects it and displays the Control Box
 
 When **Inspect Element on Hover** is unchecked:
 - Hovering over elements has no effect
-- Clicking an element shows highlights, the Info Box, and the Tool Box
+- Clicking an element shows highlights and the Control Box
 
-Alternatively, you can change this setting by updating the `livePreviewElementHighlights` preference in the preferences file. Set it to `"hover"` (default) or `"click"`.  
+Alternatively, you can change this setting by updating the `livePreviewInspectElement` preference in the preferences file. Set it to `”hover”` (default) or `”click”`.  
 See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
 
 ---
@@ -114,7 +125,7 @@ See [Editing Preferences](../editing-text#editing-preferences) to learn how to e
 
 The **Inline Text Editing** feature lets you modify text content directly in the Live Preview, with all changes automatically synced to the source code.
 
-To start editing, **double-click** an element in the Live Preview or click the **Edit Text** button *(pen icon)* in the Tool Box.  
+To start editing, **double-click** an element in the Live Preview or click the **Edit Text** button *(pen icon)* in the Control Box.  
 Edit the text as needed, then press `Enter` to save or `Esc` to cancel.  
 To insert a line break, press `Shift + Enter`.
 
@@ -174,7 +185,7 @@ To cancel a drag, press `Esc`.
 
 The **Edit Hyperlink** feature lets you modify the URL and behavior of anchor (`<a>`) elements directly in the Live Preview.
 
-To edit a hyperlink, select an `<a>` element and click the **Edit Hyperlink** button *(link icon)* in the Tool Box. A floating input box appears near the element.
+To edit a hyperlink, select an `<a>` element and click the **Edit Hyperlink** button *(chain icon)* in the Control Box. An editing panel appears near the element.
 
 The input box includes:
 - **URL input**: Edit the link's destination (`href` attribute). Press `Enter` to save your changes or `Esc` to cancel.
@@ -195,7 +206,7 @@ The **Measurements** feature displays ruler lines from the edges of a selected e
 
 ## Cut, Copy, and Paste
 
-You can cut, copy, and paste elements in Edit Mode using standard keyboard shortcuts or the Tool Box **More Options** menu *(three-dots icon)*.
+You can cut, copy, and paste elements in Edit Mode using standard keyboard shortcuts or the Control Box **More Options** menu *(three-dots icon)*.
 
 ### Using Keyboard Shortcuts
 
@@ -207,7 +218,7 @@ When you click an element in the Live Preview, keyboard focus moves to the Live
 ### Using the More Options Menu
 ![More Options dropdown](./images/more-options-dropdown.png "More Options Dropdown")
 
-Click the **More Options** button *(three-dots icon)* in the Tool Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu.
+Click the **More Options** button *(three-dots icon)* in the Control Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu.
 
 > Keyboard shortcuts apply to elements only when focus is in the Live Preview. When editing source code, the shortcuts affect the code instead.
 

docs/07-Pro Features/02-image-gallery.md

@@ -13,7 +13,7 @@ The **Image Gallery** is a panel that appears at the bottom of the Live Preview.
 
 > The Image Gallery is available only for `<img>` elements.
 
-By default, the Image Gallery appears when you select an `<img>` element. You can close it by clicking the Image Gallery button in the Tool Box or the close button in the gallery. To reopen it, click the Image Gallery button again.
+By default, the Image Gallery appears when you select an `<img>` element. You can close it by clicking the Change Image button in the Control Box or the close button in the gallery. To reopen it, click the Change Image button again.
 
 ![Image Gallery](./images/image-gallery.png "Image Gallery")
 

docs/07-Pro Features/03-measurements.md

@@ -20,7 +20,7 @@ To enable measurements, click the **mode selector dropdown** in the Live Preview
 
 ![Enable Show Measurements](./images/enable-show-measurements.png "Enable Show Measurements")
 
-Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Tool Box. Select **Show Measurements** to toggle it on or off.
+Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Control Box. Select **Show Measurements** to toggle it on or off.
 
 You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default).  
 See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.