feat: write docs for info box

Author: devvaannsh

docs/05-file-management.md~

@@ -21,3 +21,27 @@ To switch to Edit Mode, click the **mode selector dropdown** in the Live Preview
 Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` setting in the preferences file. See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
 
 ---
+
+## Info Box
+
+The **Info Box** displays information about an element. It is normally shown at the top-left of the element, but if there is not enough space, Phoenix Code may display it on another side where sufficient space is available. Phoenix Code attempts to position the Info Box as close to the element as possible while keeping it visible.
+
+> By default, the Info Box appears when you hover over an element in the Live Preview, but this behavior can be changed. See the **Edit Highlights on Hover** section for more details.
+
+<!-- TODO: add image showing Info Box -->
+
+The Info Box displays:
+- **Tag name and dimensions**: The element type (for example, `div`, `p`, `img`) and its size in pixels (width × height)
+- **ID**: The element’s ID attribute (if present), shown with a `#` prefix
+- **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
+
+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.
+
+<!-- TODO: add image showing the gray Info Box -->
+
+---
+
+

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

@@ -0,0 +1,47 @@
+---
+title: Live Preview Edit Mode
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+**Edit Mode** turns the Live Preview interface into a full-fledged editing environment. It lets you modify elements directly in the preview.
+You can edit text, drag and drop elements, change images and links, inspect elements with precise measurements, and a lot more, right in the Live Preview. **Phoenix Code** automatically updates the source code.
+
+**Edit Mode** also has all the capabilities of **Highlight Mode**, such as moving your cursor in the editor when an element is clicked, and highlighting the corresponding element in Live Preview. It also works in reverse: moving your cursor in the editor highlights the corresponding element in Live Preview.
+
+---
+
+## Enabling Edit Mode
+
+To switch to Edit Mode, click the **mode selector dropdown** in the Live Preview toolbar and select **Edit Mode**.
+
+<!-- TODO: add image showing the mode selector dropdown with Edit Mode selected -->
+
+Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` setting in the preferences file. See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
+
+---
+
+## Info Box
+
+The **Info Box** displays information about an element. It is normally shown at the top-left of the element, but if there is not enough space, Phoenix Code may display it on another side where sufficient space is available. Phoenix Code always tries to keep the Info Box visible near the 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 **Edit Highlights on Hover** section for more details.
+
+<!-- TODO: add image showing Info Box -->
+
+The Info Box displays:
+- **Tag name and dimensions**: The element type (for example, `div`, `p`, `img`) and its size in pixels (width × height)
+- **ID**: The element’s ID attribute (if present), shown with a `#` prefix
+- **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
+
+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.
+
+<!-- TODO: add image showing the gray Info Box -->
+
+---
+
+