diff --git a/.gitignore b/.gitignore
index 87096ce0..dc69e03b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,6 @@ phoenix
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+
+# Working notes for in-progress docs overhaul (local scratchpad)
+DOCS_NOTES.md
diff --git a/api/01-getting-started.md b/api/01-getting-started.md
index c3199fab..306cb805 100644
--- a/api/01-getting-started.md
+++ b/api/01-getting-started.md
@@ -11,33 +11,21 @@ The Phoenix Code API documentation is organized into sections for easy navigatio
### [Creating Themes](./creating-themes)
This page provides guidelines on how to create custom Themes for **Phoenix Code**.
----
-
### [Creating Extensions](./creating-extensions)
This page provides guidelines on how to write Extensions for **Phoenix Code**.
----
-
### [Use Node.js from extension](./creating-node-extensions)
This page explains how to use Node.js inside **Phoenix Code** extensions.
----
-
### [Debugging Extensions](./debugging-extensions)
This page provides a detailed guide on efficiently debugging your **Phoenix Code** extensions.
----
-
### [Publishing Themes & Extensions](./publishing-extensions)
This page provides guidelines on how to publish Themes/Extensions to **Phoenix Code**.
----
-
### [Available Standard Libraries](./available-standard-libs)
This page lists all the standard libraries that are available for use inside **Phoenix Code**.
----
-
## API Reference
The API-Reference directory contains detailed reference documentation for each part of the Phoenix Code API. Each page here corresponds to different components, functions, or modules of the API, providing explanations, usage examples, and detailed parameter descriptions.
diff --git a/api/08-How-To/Dialogs.md b/api/08-How-To/Dialogs.md
index 556f74ee..ff31a975 100644
--- a/api/08-How-To/Dialogs.md
+++ b/api/08-How-To/Dialogs.md
@@ -8,8 +8,6 @@ This document outlines the basic features of working with Dialogs, including:
* [How to create custom Dialog Box](#creating-custom-dialog-boxes)
* [How to handle the button clicks](#handle-button-clicks)
----
-
## Adding a Dialog Box and Buttons
To add a dialog box, follow these steps:
diff --git a/api/08-How-To/Menus.md b/api/08-How-To/Menus.md
index e9dcfa0c..4ba1a595 100644
--- a/api/08-How-To/Menus.md
+++ b/api/08-How-To/Menus.md
@@ -10,8 +10,6 @@ This document outlines the basic features of working with Menus, including:
* [How to position a Menu item](#position-the-menu-item)
* [How to add a keyboard shortcut to a Menu item](#attach-a-keyboard-shortcut-to-a-menu-item)
----
-
## Adding a Menu
diff --git a/api/08-How-To/Panels.md b/api/08-How-To/Panels.md
index 552a1cca..7901d706 100644
--- a/api/08-How-To/Panels.md
+++ b/api/08-How-To/Panels.md
@@ -22,8 +22,6 @@ This document outlines the basic features of working with Panels.
* [How to manage Bottom Panel state](#managing-bottom-panel-state)
* [Best Practices for Panels](#best-practices)
----
-
## Creating a Plugin Panel
To create a plugin panel, follow these steps:
diff --git a/api/08-How-To/StatusBar.md b/api/08-How-To/StatusBar.md
index ca05eb0e..e5440c6a 100644
--- a/api/08-How-To/StatusBar.md
+++ b/api/08-How-To/StatusBar.md
@@ -6,8 +6,6 @@ This document outlines the basic features of working with Status Bar, including:
* [How to add a button on Status Bar](#adding-a-button-on-status-bar)
----
-
## Adding a button on Status Bar
1. Import the `StatusBar` module.
diff --git a/app-links.js b/app-links.js
index e3cae9fd..151627ba 100644
--- a/app-links.js
+++ b/app-links.js
@@ -74,11 +74,11 @@ export const appLinks = [
},
{
from: '/app-links/indent-guide-lines',
- to: '/docs/editing-text#indent-guide-lines',
+ to: '/docs/customizing-editor#indent-guide-lines',
},
{
from: '/app-links/emmet',
- to: '/docs/editing-text#emmet',
+ to: '/docs/Features/emmet',
},
{
from: '/app-links/git',
@@ -106,7 +106,7 @@ export const appLinks = [
},
{
from: '/app-links/editor-rulers',
- to: '/docs/Features/editor-rulers',
+ to: '/docs/customizing-editor#editor-rulers',
},
{
from: '/app-links/find-in-files',
@@ -130,30 +130,30 @@ export const appLinks = [
},
{
from: '/app-links/claude-code-integration',
- to: '/docs/file-management',
+ to: '/docs/Pro Features/ai-chat',
},
{
from: '/app-links/claude-code-config',
- to: '/docs/file-management',
+ to: '/docs/Pro Features/ai-chat',
},
{
from: '/app-links/design-mode',
- to: '/docs/file-management',
+ to: '/docs/design-mode',
},
{
from: '/app-links/ai-chat',
- to: '/docs/file-management',
+ to: '/docs/Pro Features/ai-chat',
},
{
from: '/app-links/markdown-editor',
- to: '/docs/file-management',
+ to: '/docs/Pro Features/markdown-editor',
},
{
from: '/app-links/resize-ruler',
- to: '/docs/file-management',
+ to: '/docs/Pro Features/device-preview',
},
{
- from: '/app-links//terminal',
- to: '/docs/file-management',
+ from: '/app-links/terminal',
+ to: '/docs/Features/terminal',
}
];
diff --git a/blog/2026-03-04-phoenix-code-vs-brackets/index.md b/blog/2026-03-04-phoenix-code-vs-brackets/index.md
index 4f4c9b3f..c063b1a7 100644
--- a/blog/2026-03-04-phoenix-code-vs-brackets/index.md
+++ b/blog/2026-03-04-phoenix-code-vs-brackets/index.md
@@ -70,19 +70,19 @@ These are the features the Brackets community asked for — and we finally built
Brackets' live preview was view-only. You could see changes reflected in real time, but you always had to make edits in the code. With [Phoenix Pro](/docs/Pro%20Features/live-preview-edit), you can click on any element in the live preview and edit it right there — change text, swap images by dragging, rearrange elements visually. The source code updates automatically.
-
+
### Visual CSS Editing
Brackets had inline color pickers — Phoenix Code keeps those and adds number dials you can scrub to adjust CSS values like margins, padding, font sizes, and more. Hover over a number, drag to adjust, and see the result update in live preview instantly.
-
+
### Built-in Git
Phoenix Code ships with native Git support based on the familiar Brackets Git extension, addressing many of its earlier limitations with a simpler UX and improved reliability. Commit, push, pull, diff, and branch management, all built in.
-
+
### Runs in Your Browser
@@ -92,7 +92,7 @@ Open [phcode.dev](https://phcode.dev) and start editing — no install or admin
Inspect spacing between elements, measure distances, and check alignment directly in the live preview. If you work from design mockups, this replaces the constant back-and-forth between your editor and a separate design tool.
-
+
---
@@ -139,6 +139,6 @@ If you've been waiting for the update Brackets deserved, this is it.
- **[Open Phoenix Code in your browser](https://phcode.dev)** — no install, start immediately
- [Download the desktop app](https://phcode.dev/download)
-- [Live Preview documentation](/docs/Features/Live%20Preview/live-preview)
+- [Live Preview documentation](/docs/Features/Live%20Preview/)
- [Edit Mode (Pro)](/docs/Pro%20Features/live-preview-edit)
- [Read more about the Brackets legacy](/blog/Blog-Legacy)
diff --git a/docs/02-Linux.md b/docs/03-Linux.md
similarity index 100%
rename from docs/02-Linux.md
rename to docs/03-Linux.md
diff --git a/docs/03-editing-text.md b/docs/03-editing-text.md
deleted file mode 100644
index 6f72ac52..00000000
--- a/docs/03-editing-text.md
+++ /dev/null
@@ -1,315 +0,0 @@
----
-title: Editing Text
----
-
-import React from 'react';
-import VideoPlayer from '@site/src/components/Video/player';
-
-This section provides an overview of the core text and code editing features in **Phoenix Code**.
-
----
-
-## Multi Cursor
-Using **Multi-Cursor**, you can place multiple cursors in different locations, allowing you to edit text simultaneously. This feature is especially useful for making quick, consistent changes across multiple lines or sections of a file.
-
-### Creating multiple cursors
-#### **Using Mouse** :
-Hold the `Alt` key on Windows/Linux (`Option` key on macOS) and `Click` on the desired locations to place additional cursors. To quickly place cursors across multiple lines, drag the mouse while holding the same key.
-
-
-#### **Using Keyboard** :
-If you want the cursor to be placed in the line above, use `Alt + Shift + Up Arrow` on Windows/Linux and `Option + Shift + Up Arrow` on MacOS.
-If you want the cursor to be placed in the line below, use `Alt + Shift + Down Arrow` on Windows/Linux and `Option + Shift + Down Arrow` on MacOS.
-
-### Switching back to single cursor
-To revert back to a single cursor, just press the `Esc` key.
-
----
-
-## Custom Snippets
-With **Custom Snippets**, you can define your own custom code hints. You can write short abbreviations that, when typed in the editor, expand into complete code blocks upon selection.
-
-[Read More](./Features/custom-snippets)
-
----
-
-## Quick Edit
-With **Quick Edit**, you can edit your CSS file directly within HTML files.
-
-[Read More](./Features/quick-edit)
-
----
-
-## Quick Docs
-**Quick Docs** provides immediate access to documentation for code elements directly within the editor.
-
-### Accessing Quick Docs
-1. Right click on the element you want details about.
-2. A context menu will appear, click on **Quick Docs** or simply press `F1` to bring up Quick Docs directly.
-
-
-
----
-
-## Find in Files
-With **Find in Files**, you can search for specific text across multiple files within a project.
-
-[Read More](./Features/find-in-files)
-
----
-
-## Auto Rename Tag
-The **Auto Rename Tag** feature updates matching tags automatically when you rename one. It works with HTML, XHTML, HTM, XML, SVG, PHP, and JSP files.
-
-### How It Works
-When you rename an opening or closing tag, the corresponding tag updates instantly.
-
-
-
-### Enabling/Disabling Auto Rename Tag feature
-#### Toggle the Feature
-To enable or disable the **Auto Rename Tag** feature, go to `Edit` > `Auto Rename HTML Tags`.
-
-
-
-*The **Auto Rename HTML Tags** feature is enabled by default.*
-
-#### Temporary Disabling
-To temporarily disable tag synchronization for the current tag:
-Press `ESC`.
-
-To re-enable synchronization:
-Move your cursor out of the tag and then back into the tag.
-
-
-
----
-
-## Emmet
-With **Emmet**, you can write HTML and CSS faster using shorthand abbreviations. If an abbreviation is Emmet-compatible, Phoenix Code Editor shows code hints and expands it into complete code structures when selected.
-
-[Read More](./Features/emmet)
-
----
-
-## Zoom and Font Size Adjustments
-The **Zoom UI and Fonts** options allow you to adjust the overall interface scale and font size.
-
-### Zoom UI
-**Zoom In** :- Enlarges the overall UI, making all elements larger.
-
-**Zoom Out** :- Reduces the overall UI, making all elements smaller.
-
-### Font Size Adjustment
-**Increase Font Size** :- Enlarges the text in the editor without affecting other UI elements.
-
-**Decrease Font Size** :- Reduces the text size in the editor without affecting other UI elements.
-
-**Restore Font Size** :- Resets the editor text to its default size.
-
-
-### Using Zoom UI and Fonts Options
-#### Using Menu
-
-
-1. Click on "View" in the menu bar.
-2. Hover over "Zoom UI and Fonts".
-3. Select the desired option from the submenu.
-
-#### Using Keyboard Shortcuts
-* **Zoom In**: `Ctrl + +` (`Cmd + +` on MacOs)
-* **Zoom Out**: `Ctrl + -` (`Cmd + -` on MacOs)
-* **Increase Font Size**: `Ctrl + Shift + +` (`Cmd + Shift + +` on MacOs)
-* **Decrease Font Size**: `Ctrl + Shift + -` (`Cmd + Shift + -` on MacOs)
-* **Restore Font Size**: `Ctrl + Shift + (` (`Cmd + Shift + (` on MacOs)
-
-*Note :- The current zoom level is displayed next to the **Zoom In** option.*
-
----
-
-## Line Height
-
-The **Line Height** feature lets you customize the vertical spacing between lines of text in the editor.
-
-### Adjusting Line Height
-
-To adjust line height:
-1. Click on `View` in the menu bar.
-2. Navigate to the `Themes...` option.
-3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5.
-
-
-Adjustments apply instantly, updating the editor dynamically.
-
-### Modifying Line Height via Preferences
-
-You can also modify the line height by updating the `themes.editorLineHeight` property in the preferences file. [Click Here](#editing-preferences) to read on how to edit the preferences.
-
----
-
-## Indent Guide Lines
-
-
-**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability.
-
-### Enabling/Disabling Indent Guide Lines
-
-
-To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`.
-
-### Editor Preferences for Indent Guides
-You can customize indent guide behavior in the editor preferences with the following options:
-
-[Click here](#editing-preferences) to read on how to edit the preferences.
-
-**editor.indentGuides**: Set to `true` to display indent guide lines; set to `false` to hide them.
-**editor.indentHideFirst**: Set to `true` to hide the first indent guide line; set to `false` to display it.
-
----
-
-## File Encoding
-**File encoding** is the method used to represent text in a file by converting characters into bytes. We need it to ensure that text is displayed correctly across different platforms and to handle special characters or symbols. Phoenix Code Editor supports multiple file encoding formats.
-
-*`UTF-8`* is the default encoding format in Phoenix.
-
-### Set Encoding of a file
-1. Click on the `utf8` button on the status bar. (UTF-8 represents the default encoding format).
-2. A list of available encoding formats will appear. Select your desired format, or start typing to filter and find matching options in the drop-down menu.
-
-
-
----
-
-## File Type Associations
-**File Type Associations** *(Associating a file type with a language)* allows Phoenix Code Editor to provide language-specific features, such as syntax highlighting, code completion, and error checking, based on the file extension. This ensures that your files are treated according to their intended programming or markup language.
-
-*When you create a new file, if the file extension is recognized, it is associated with the default language. If the extension is unknown, a generic text file is opened.*
-
-### Associate a new file type with a language
-To associate a new file type with a specific language in Phoenix Code Editor, use the Language dropdown button in the status bar. For example, if you want files with `.myjs` extension to be treated as JavaScript files, follow these steps:
-1. Create a new file with the desired extension. For our example, we create (newfile.myjs). By default, it will be associated with a Text file.
-2. Click on `Text` button on the status bar.
-3. A list of all the supported languages will appear. Select the language you want to associate with the file type. For our example, we select `JavaScript`.
-
-
-
-4. At the top of the popup box, you’ll find an option labeled `Set as default for .myjs files`. Click on it.
-
-Now, files with `.myjs` extension will be treated as JavaScript files.
-
-
-
----
-
-## Beautify Code
-With **Beautify Code**, you can format your code to follow consistent styling rules, improving readability and making it easier to maintain.
-
-[Read More](./Features/beautify-code)
-
----
-
-## Insert and Overwrite Mode
-Users can toggle between **Insert Mode** and **Overwrite Mode** for different text input behaviors.
-
-*Insert Mode is enabled by default when you begin typing in a file.*
-
-### Understanding Insert Mode
-When in **Insert Mode**, any text you type is inserted at the current cursor position, pushing the existing text to the right.
-
-
-
-### Understanding Overwrite Mode
-**Overwrite Mode** replaces the existing text at the cursor position with the new text you type. Instead of pushing text to the right, it overwrites the characters directly under the cursor.
-
-
-
-
-### Toggle between Insert Mode & Overwrite Mode
-
-#### **Using Editor Interface**
-Click on the `INS(OVR)` button on the status bar to toggle between Insert Mode and Overwrite Mode. `INS` represents Insert Mode. `OVR` represents Overwrite Mode.
-
-
-
-#### **Using Keyboard**
-Press the `Ins` or the Insert key to toggle between Insert Mode and Overwrite Mode.
-
----
-
-## Auto Space Detection
-The **Auto Space Detection** feature in Phoenix Code Editor is designed to automatically detect and adapt to the indentation style used in your files, whether it’s tabs or spaces.
-
-### Automatic and Fixed Modes
-* **Auto mode**: Automatically detects and applies the indentation style (tabs or spaces) based on the existing code in the file.
-* **Fixed mode**: Locks the editor to use a specific indentation style, regardless of the existing formatting in the file.
-
-### Toggle between Auto Mode & Fixed Mode
-
-When you open a new file, by default it is set to `Auto` mode, but you can easily switch to `Fixed` mode.
-
-In the editor's status bar, you’ll find the `Auto` button. When clicked, it toggles between `Auto` and `Fixed` modes.
-
-You can toggle between spaces and tab size by clicking the `Tab Size` or `Spaces` button in the status bar.
-
-You can adjust the tab size width or number of spaces by clicking the value in the status bar and modifying it as needed.
-
-
-
-### Quick Tips
-* If you need to recompute the tab spacing configuration for a file, toggle the `Auto` button twice (switch to Fixed mode and back to Auto). This will refresh the spacing settings for the current file.
-* Switching to `Fixed` mode will apply a fixed spacing across the system.
-* You can use the `Beautify Code` feature to reformat the file according to the new tab size or spacing settings after making changes(use `Ctrl-B` in Windows/Linux, `Cmd-B` in macOS or `right-click` and select `Beautify Code`).
-
-
-
----
-
-## No-Distractions Mode
-**No-Distractions Mode** helps you focus by minimizing visual clutter and hiding non-essential interface elements, creating a clean, minimalist editing environment.
-
-### Activating No-Distractions Mode
-#### **Using Editor Interface** :
-Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option.
-
-
-
-#### **Using Keyboard** :
-Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode.
-
----
-
-## Editing Preferences
-You can personalize Phoenix to suit your workflow by adjusting the preferences.
-
-### Open the Preferences File:
-
-To modify the preferences, go to `File` > `Open Preferences File`.
-
-### Understanding the Preferences Layout
-Once selected, two files will appear side by side:
-* defaultPreferences.json (on the left) :- This file is a read-only file containing the default settings.
-* phcode.json (on the right) :- This file is editable and used for any custom preferences you wish to apply.
-
-### Modifying Preferences
-
-To change a preference, simply write the desired configuration and values in the **phcode.json** and save the file. These custom settings will automatically override the corresponding values in the default preferences.
-
----
diff --git a/docs/02-phoenix-pro-school.md b/docs/04-phoenix-pro-school.md
similarity index 99%
rename from docs/02-phoenix-pro-school.md
rename to docs/04-phoenix-pro-school.md
index d7cf35a2..e2d5fe31 100644
--- a/docs/02-phoenix-pro-school.md
+++ b/docs/04-phoenix-pro-school.md
@@ -14,8 +14,6 @@ Schools can deploy Phoenix Pro in two ways:
This page explains how schools and universities can obtain free Phoenix Pro access and deploy it across **any devices used within the institution**.
----
-
## Who Is Eligible?
Phoenix Pro is free for:
@@ -31,8 +29,6 @@ Volume licenses may be applied to:
* Shared classroom devices
* **Student/teacher-owned laptops/home computers** (per administrator distribution)
----
-
# Option 1: Email-Based Student & Teacher Activation (Instant)
Phoenix Pro is automatically activated for users who log in with:
@@ -48,8 +44,6 @@ Phoenix Pro is automatically activated for users who log in with:
3. Phoenix Pro activates instantly
4. No approval or license key required
----
-
## Schools Without a `.edu` or `.ac.*` Domain
Some schools, especially K-12 institutions, use custom domains.
@@ -66,8 +60,6 @@ Email **[support@core.ai](mailto:support@core.ai)** with:
Once your domain is approved, all users with that email domain automatically receive Phoenix Pro upon login.
----
-
# Option 2: Educational Volume License (For Labs + Student/Teacher Devices)
Educational Volume Licenses allow schools to activate Phoenix Pro on devices **without requiring login**.
@@ -82,8 +74,6 @@ This is suitable for:
**Free** for all educational usage.
----
-
## Requesting a Volume License Key
Email **[support@core.ai](mailto:support@core.ai)** with:
@@ -107,8 +97,6 @@ From there, you can obtain the license key.
----
-
## How Volume License Keys Work
* Each license key is **valid for 2 weeks**
@@ -128,8 +116,6 @@ This model ensures:
* The device now has Phoenix Pro permanently
* School admin may rotate(reissue) keys as needed
----
-
## Activating Phoenix Pro Using a Volume License Key (Desktop App)
On any device—lab or student-owned:
@@ -142,8 +128,6 @@ On any device—lab or student-owned:
----
-
# Limitations
### Students without school email and no school onboarding
@@ -154,8 +138,6 @@ If a student does not have a school-provided email **and the school is not onboa
Students cannot request volume licenses directly without school/teacher approval.
----
-
# Summary of Support Email Subjects
| Purpose | Subject Format |
@@ -167,8 +149,6 @@ Students cannot request volume licenses directly without school/teacher approval
Use correct subjects for faster handling.
----
-
# FAQ
### **Can students use the volume license on their personal laptops?**
@@ -191,8 +171,6 @@ Yes — as long as they use their school email.
Yes. Students and teachers may use Phoenix Pro for any purpose.
----
-
# Need Help?
Support options:
diff --git a/docs/05-design-mode.md b/docs/05-design-mode.md
new file mode 100644
index 00000000..700e9a49
--- /dev/null
+++ b/docs/05-design-mode.md
@@ -0,0 +1,38 @@
+---
+title: Design Mode
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+**Design Mode** is a layout that hides the code editor and gives that entire space to your **Live Preview**. It is built for visual-first work: chatting with the AI while you watch changes land in the preview, editing your page directly in Live Preview Edit Mode, or testing how your design looks at different device sizes.
+
+
+
+## Why use Design Mode
+
+- **Pair with the AI Chat panel.** Ask the AI to make a change and see it applied instantly in the preview as the code updates without the need to open the editor. [Read More about AI Chat](./Pro%20Features/ai-chat).
+- **Edit visually with Live Preview Edit Mode.** Click elements, drag them, change text, swap images, and much more, directly in the preview. [Read More about Live Preview Edit Mode](./Pro%20Features/live-preview-edit).
+- **Test responsive designs.** With Device Preview, check how your page looks on phone, tablet, and desktop sizes with just a click. [Read More about Device Preview](./Pro%20Features/device-preview).
+
+## Switching to Design Mode
+
+There are three ways to switch to Design Mode:
+
+- Click the **Design Mode** button *(pen nib icon)* near the top of the **Control Bar**, the narrow vertical strip between the sidebar and the editor.
+- Click the **fullscreen** button *(expand icon)* in the Live Preview toolbar, right after the reload button.
+- Choose **File > Toggle Design Mode** from the menu bar.
+
+
+
+All three toggle the same mode. Use any of them again to switch back to the code editor.
+
+## The Design Mode layout
+
+When Design Mode is on, the sidebar stays visible alongside the maximized Live Preview. The recommended setup is to keep **AI Chat** open in the sidebar so you can ask for changes and watch them appear in the preview as the AI works. If the Live Preview is not already open, Phoenix Code opens it for you.
+
+
+
+To hide the sidebar too, click the **toggle sidebar** button *(double left-arrow icon)* just below the Design Mode toggle in the Control Bar. Click it again to bring the sidebar back.
diff --git a/docs/06-customizing-editor.md b/docs/06-customizing-editor.md
new file mode 100644
index 00000000..19f6f237
--- /dev/null
+++ b/docs/06-customizing-editor.md
@@ -0,0 +1,182 @@
+---
+title: Customizing the Editor
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+This section provides an overview of the editor appearance and display settings in **Phoenix Code**.
+
+## Themes
+
+Phoenix Code ships with two built-in themes:
+
+- **Phoenix Dark Neo**: default dark theme
+- **Phoenix Light Neo**: default light theme
+
+You can install more themes, create your own, or remove themes you have installed, see [Extensions](./extensions).
+
+### Switching the Theme
+
+Open `View > Themes...` and pick a theme from the **Current Theme** dropdown. The change applies immediately.
+
+
+
+Click **Get More...** to browse community themes. See [Extensions](./extensions) for installation steps.
+
+### Use Theme Scrollbars
+
+The **Use Theme Scrollbars** checkbox controls scrollbar styling.
+
+- **On** (default): scrollbars use colors from the active theme.
+- **Off**: scrollbars use your operating system's default style.
+
+## Font
+
+Phoenix Code uses **SourceCodePro** as the default editor font. Change the size and family from `View > Themes...`.
+
+
+
+### Font Size
+
+Type a value into the **Font Size** field. Accepted units: `px` (1 to 72) or `em` (0.1 to 7.2). Decimals work, e.g. `12.5px`. The default is `12px`.
+
+Keyboard shortcuts to resize the editor text:
+
+| Action | Windows / Linux | macOS |
+| --- | --- | --- |
+| Increase font size | `Ctrl + Shift + +` | `Cmd + Shift + +` |
+| Decrease font size | `Ctrl + Shift + -` | `Cmd + Shift + -` |
+| Restore default | `Ctrl + Shift + (` | `Cmd + Shift + (` |
+
+:::note
+The shortcuts above change only the editor text size. To zoom the entire interface at once, use these:
+
+| Action | Windows / Linux | macOS |
+| --- | --- | --- |
+| Zoom in | `Ctrl + +` | `Cmd + +` |
+| Zoom out | `Ctrl + -` | `Cmd + -` |
+
+The current zoom level is shown next to **Zoom In** under `View > Zoom UI and Fonts`.
+:::
+
+### Font Family
+
+Type a CSS `font-family` string into the **Font Family** field. The first available font in the list is used:
+
+```
+'Fira Code', 'JetBrains Mono', monospace
+```
+
+Wrap names containing spaces in single quotes.
+> The font must be installed on your system. Phoenix Code only bundles `SourceCodePro` (the default).
+
+## Line Height
+
+The **Line Height** feature lets you customize the vertical spacing between lines of text in the editor.
+
+### Adjusting Line Height
+
+To adjust line height:
+1. Click on `View` in the menu bar.
+2. Navigate to the `Themes...` option.
+3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5.
+
+
+
+Adjustments apply instantly, updating the editor dynamically.
+
+### Modifying Line Height via Preferences
+
+You can also modify the line height by updating the `themes.editorLineHeight` property in the preferences file. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences.
+
+## Scroll Sensitivity
+
+**Scroll Sensitivity** sets a multiplier for mouse-wheel scroll speed in the editor. Increase it if scrolling feels too slow, decrease it if scrolling feels too fast.
+
+### Adjusting Scroll Sensitivity
+
+1. Click `View` in the menu bar.
+2. Select `Themes...`.
+3. Use the **Scroll Sensitivity** slider to set a value between `0.1` and `10`. The default is `1` (normal speed).
+
+
+
+The new value applies immediately.
+
+### Modifying Scroll Sensitivity via Preferences
+
+Set the `mouseWheelScrollSensitivity` property in the preferences file. Accepts any number from `0.1` to `10`. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences.
+
+## Indent Guide Lines
+
+
+**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability.
+
+### Enabling/Disabling Indent Guide Lines
+
+
+To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`.
+
+### Editor Preferences for Indent Guides
+You can customize indent guide behavior in the editor preferences with the following options:
+
+[Click here](./editing-text#editing-preferences) to read on how to edit the preferences.
+
+**editor.indentGuides**: Set to `true` to display indent guide lines; set to `false` to hide them.
+**editor.indentHideFirst**: Set to `true` to hide the first indent guide line; set to `false` to display it.
+
+## Editor Rulers
+
+Add vertical column rulers to the editor to keep track of line lengths. By
+default, a single ruler is set at the 120-character position.
+
+### Enabling and Disabling Rulers
+
+Toggle the visibility of rulers through the `View > Rulers` menu option.
+
+
+
+### Adding Multiple Rulers
+
+To add multiple rulers, edit the preferences file. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences.
+
+Add the following entries to the JSON configuration:
+
+```js
+{
+ // existing json items
+ "editor.rulers": [40, 80],
+ "editor.rulerColors": ["green", "#f34d5a"],
+}
+```
+
+These settings introduce two rulers at the 40th and 80th character positions,
+colored green and red respectively.
+
+
+
+#### Configuration Options
+
+1. `editor.rulers` : Specifies an array of column numbers where vertical rulers
+ will appear.
+1. `editor.rulerColors` : An optional array to set colors for each ruler,
+ corresponding to the positions listed in `editor.rulers`.
+
+#### Q: How do I add different rulers for each project?
+
+To set up different rulers for individual projects, create a `.phcode.json` file
+in the root directory of each project. Include the same ruler configurations as
+shown in the example above.
+
+## No-Distractions Mode
+**No-Distractions Mode** helps you focus by minimizing visual clutter and hiding non-essential interface elements, creating a clean, minimalist editing environment.
+
+### Activating No-Distractions Mode
+#### **Using Editor Interface** :
+Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option.
+
+
+
+#### **Using Keyboard** :
+Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode.
diff --git a/docs/07-Pro Features/01-ai-chat.md b/docs/07-Pro Features/01-ai-chat.md
deleted file mode 100644
index 7744a499..00000000
--- a/docs/07-Pro Features/01-ai-chat.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: AI Chat
----
-
-Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots of your Live Preview, and work alongside you as you code.
-
-> AI Chat is available only in desktop apps. Free users get a daily and monthly chat limit. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access.
-
-
-
-## Getting Started
-
-AI Chat requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform.
-
-Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically.
-
-
-
-## Opening the AI Panel
-
-Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
-
-
-
-## Sending Messages
-
-Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line.
-
-While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response.
-
-### Context
-
-Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing:
-
-- **Selection** - the file and line range you have selected in the editor
-- **Cursor** - your current line and file
-- **Live Preview** - if the Live Preview panel is open
-
-You can dismiss any of these by clicking the **x** button on the chip.
-
-## Attachments and Screenshots
-
-Click the **paperclip button** to attach files from your project. You can attach images (PNG, JPG, GIF, WebP, SVG) and other files like code or documents.
-
-Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture:
-
-- **Live Preview** - your Live Preview panel (if open)
-- **Selected Element** - the currently selected element in Live Preview
-- **Full Editor** - the entire editor window
-- **Area** - a custom region you select with a crop tool
-
-## Permission Modes
-
-The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them.
-
-- **Plan** - the AI proposes a plan first. You review it and click **Approve** to proceed or **Revise** to give feedback. Good for complex tasks where you want to stay in control.
-- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands.
-- **Full Auto** - the AI works through everything without pausing. Terminal commands still ask for confirmation.
-
-
-
-## Session History
-
-Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
-
-Sessions are saved per project, so each project has its own chat history.
-
-## Undo and Restore
-
-Before the AI makes any edits, Phoenix Code creates a **restore point**. If you don't like the changes, click **Undo** on the edit summary card to revert all the files back to how they were.
-
-If the AI made changes across multiple responses, you can click **Restore to this point** on any earlier edit summary to go back to that state.
-
-
-
-## Settings
-
-Click the **gear icon** in the chat panel to open AI settings. Here you can:
-
-- Switch between AI providers
-- Add a custom API provider with your own API key and endpoint
-- Set a custom API timeout
-
-
-
-## Keyboard Shortcuts
-
-| Action | Shortcut |
-|--------|----------|
-| Send message | `Enter` |
-| New line | `Shift + Enter` |
-| Cycle permission mode | `Shift + Tab` |
-| Cancel or clear input | `Escape` |
diff --git a/docs/07-Pro Features/06-resize-ruler.md b/docs/07-Pro Features/06-resize-ruler.md
deleted file mode 100644
index 4b70cb77..00000000
--- a/docs/07-Pro Features/06-resize-ruler.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Resize Ruler
----
-
-:::info Pro Feature
-[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
-:::
-
-The **Resize Ruler** is a ruler that appears on the Live Preview toolbar when you resize the Live Preview panel. It helps you see exactly how wide your preview is and where your page's CSS breakpoints fall.
-
-
-
----
-
-## How It Works
-
-Drag the edge of the Live Preview panel to resize it. A ruler appears on the toolbar showing:
-
-- **Tick marks** with pixel numbers every 100px
-- **Colored segments** that show the CSS breakpoint ranges from your page's stylesheets (see [CSS Breakpoint Detection](#css-breakpoint-detection))
-- **A blue line** at the right edge marking the current width
-- **Width and device info** in the top-right corner, showing the width in pixels along with the closest matching device name (for example, "iPad Mini - 768px")
-
-The ruler disappears on its own once you stop resizing.
-
-> The Resize Ruler also appears briefly when you select a device from the Device Size Presets dropdown in the [Live Preview Toolbar](../Features/Live%20Preview/live-preview#live-preview-toolbar).
-
----
-
-## CSS Breakpoint Detection
-
-Phoenix Code reads your page's stylesheets and picks up any CSS media query breakpoints (like `min-width` and `max-width` rules). These breakpoints show up in two places:
-
-- **On the Resize Ruler**: as colored segments between breakpoints, each labeled with its pixel value.
-- **In the Device Size dropdown**: as extra entries at the bottom of the list, shown as `@media Xpx`. Clicking one resizes the Live Preview panel to that width.
-
-> Breakpoints update automatically as you edit your CSS.
-
-
-
-> CSS breakpoint detection and the breakpoint entries in the Device Size dropdown are available only for Pro users. Free users can still use the predefined device presets.
-
diff --git a/docs/07-Pro Features/images/enable-show-measurements.png b/docs/07-Pro Features/images/enable-show-measurements.png
deleted file mode 100644
index f8404d81..00000000
Binary files a/docs/07-Pro Features/images/enable-show-measurements.png and /dev/null differ
diff --git a/docs/07-Pro Features/images/image-gallery.png b/docs/07-Pro Features/images/image-gallery.png
deleted file mode 100644
index 5c3f0ad8..00000000
Binary files a/docs/07-Pro Features/images/image-gallery.png and /dev/null differ
diff --git a/docs/07-Pro Features/images/inspect-element-hover.png b/docs/07-Pro Features/images/inspect-element-hover.png
deleted file mode 100644
index 59700e0e..00000000
Binary files a/docs/07-Pro Features/images/inspect-element-hover.png and /dev/null differ
diff --git a/docs/07-Pro Features/images/lp-mode.png b/docs/07-Pro Features/images/lp-mode.png
deleted file mode 100644
index 0cdfe134..00000000
Binary files a/docs/07-Pro Features/images/lp-mode.png and /dev/null differ
diff --git a/docs/07-Pro Features/images/measurements.png b/docs/07-Pro Features/images/measurements.png
deleted file mode 100644
index 05f302fd..00000000
Binary files a/docs/07-Pro Features/images/measurements.png and /dev/null differ
diff --git a/docs/07-Pro Features/images/more-options-dropdown.png b/docs/07-Pro Features/images/more-options-dropdown.png
deleted file mode 100644
index e43d1766..00000000
Binary files a/docs/07-Pro Features/images/more-options-dropdown.png and /dev/null differ
diff --git a/docs/07-editing-text.md b/docs/07-editing-text.md
new file mode 100644
index 00000000..491df949
--- /dev/null
+++ b/docs/07-editing-text.md
@@ -0,0 +1,142 @@
+---
+title: Editing Text
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+This section provides an overview of the core text and code editing features in **Phoenix Code**.
+
+## Multi Cursor
+Using **Multi-Cursor**, you can place multiple cursors in different locations, allowing you to edit text simultaneously. This feature is especially useful for making quick, consistent changes across multiple lines or sections of a file.
+
+### Creating multiple cursors
+#### **Using Mouse** :
+Hold the `Alt` key on Windows/Linux (`Option` key on macOS) and `Click` on the desired locations to place additional cursors. To quickly place cursors across multiple lines, drag the mouse while holding the same key.
+
+
+#### **Using Keyboard** :
+If you want the cursor to be placed in the line above, use `Alt + Shift + Up Arrow` on Windows/Linux and `Option + Shift + Up Arrow` on MacOS.
+If you want the cursor to be placed in the line below, use `Alt + Shift + Down Arrow` on Windows/Linux and `Option + Shift + Down Arrow` on MacOS.
+
+### Switching back to single cursor
+To revert back to a single cursor, just press the `Esc` key.
+
+## Quick Docs
+**Quick Docs** provides immediate access to documentation for code elements directly within the editor.
+
+### Accessing Quick Docs
+1. Right click on the element you want details about.
+2. A context menu will appear, click on **Quick Docs** or simply press `F1` to bring up Quick Docs directly.
+
+
+
+## Auto Rename Tag
+The **Auto Rename Tag** feature updates matching tags automatically when you rename one. It works with HTML, XHTML, HTM, XML, SVG, PHP, and JSP files.
+
+### How It Works
+When you rename an opening or closing tag, the corresponding tag updates instantly.
+
+
+
+### Enabling/Disabling Auto Rename Tag feature
+#### Toggle the Feature
+To enable or disable the **Auto Rename Tag** feature, go to `Edit` > `Auto Rename HTML Tags`.
+
+
+
+*The **Auto Rename HTML Tags** feature is enabled by default.*
+
+#### Temporary Disabling
+To temporarily disable tag synchronization for the current tag:
+Press `ESC`.
+
+To re-enable synchronization:
+Move your cursor out of the tag and then back into the tag.
+
+
+
+## Insert and Overwrite Mode
+Users can toggle between **Insert Mode** and **Overwrite Mode** for different text input behaviors.
+
+*Insert Mode is enabled by default when you begin typing in a file.*
+
+### Understanding Insert Mode
+When in **Insert Mode**, any text you type is inserted at the current cursor position, pushing the existing text to the right.
+
+
+
+### Understanding Overwrite Mode
+**Overwrite Mode** replaces the existing text at the cursor position with the new text you type. Instead of pushing text to the right, it overwrites the characters directly under the cursor.
+
+
+
+
+### Toggle between Insert Mode & Overwrite Mode
+
+#### **Using Editor Interface**
+Click on the `INS(OVR)` button on the status bar to toggle between Insert Mode and Overwrite Mode. `INS` represents Insert Mode. `OVR` represents Overwrite Mode.
+
+
+
+#### **Using Keyboard**
+Press the `Ins` or the Insert key to toggle between Insert Mode and Overwrite Mode.
+
+## Auto Space Detection
+The **Auto Space Detection** feature in Phoenix Code Editor is designed to automatically detect and adapt to the indentation style used in your files, whether it’s tabs or spaces.
+
+### Automatic and Fixed Modes
+* **Auto mode**: Automatically detects and applies the indentation style (tabs or spaces) based on the existing code in the file.
+* **Fixed mode**: Locks the editor to use a specific indentation style, regardless of the existing formatting in the file.
+
+### Toggle between Auto Mode & Fixed Mode
+
+When you open a new file, by default it is set to `Auto` mode, but you can easily switch to `Fixed` mode.
+
+In the editor's status bar, you’ll find the `Auto` button. When clicked, it toggles between `Auto` and `Fixed` modes.
+
+You can toggle between spaces and tab size by clicking the `Tab Size` or `Spaces` button in the status bar.
+
+You can adjust the tab size width or number of spaces by clicking the value in the status bar and modifying it as needed.
+
+
+
+### Quick Tips
+* If you need to recompute the tab spacing configuration for a file, toggle the `Auto` button twice (switch to Fixed mode and back to Auto). This will refresh the spacing settings for the current file.
+* Switching to `Fixed` mode will apply a fixed spacing across the system.
+* You can use the `Beautify Code` feature to reformat the file according to the new tab size or spacing settings after making changes(use `Ctrl-B` in Windows/Linux, `Cmd-B` in macOS or `right-click` and select `Beautify Code`).
+
+
+
+## Editing Preferences
+You can personalize Phoenix to suit your workflow by adjusting the preferences.
+
+### Open the Preferences File:
+
+To modify the preferences, go to `File` > `Open Preferences File`.
+
+### Understanding the Preferences Layout
+Once selected, two files will appear side by side:
+* defaultPreferences.json (on the left) :- This file is a read-only file containing the default settings.
+* phcode.json (on the right) :- This file is editable and used for any custom preferences you wish to apply.
+
+### Modifying Preferences
+
+To change a preference, simply write the desired configuration and values in the **phcode.json** and save the file. These custom settings will automatically override the corresponding values in the default preferences.
+
diff --git a/docs/08-Features/03-editor-rulers.md b/docs/08-Features/03-editor-rulers.md
deleted file mode 100644
index c1246a85..00000000
--- a/docs/08-Features/03-editor-rulers.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Editor Rulers
-
-Add vertical column rulers to the editor to keep track of line lengths. By
-default, a single ruler is set at the 120-character position.
-
-### Enabling and Disabling Rulers
-
-Toggle the visibility of rulers through the `View > Rulers` menu option.
-
-
-
-## Adding Multiple Rulers
-
-To add multiple rulers, edit the preferences file:
-
-1. Navigate to `File > Open Preferences File`.
-1. Add the following entries to the JSON configuration:
-
-```js
-{
- // existing json items
- "editor.rulers": [40, 80],
- "editor.rulerColors": ["green", "#f34d5a"],
-}
-```
-
-These settings introduce two rulers at the 40th and 80th character positions,
-colored green and red respectively.
-
-
-
-#### Configuration Options
-
-1. `editor.rulers` : Specifies an array of column numbers where vertical rulers
- will appear.
-1. `editor.rulerColors` : An optional array to set colors for each ruler,
- corresponding to the positions listed in `editor.rulers`.
-
-## FAQ
-
-#### Q: How do I add different rulers for each project?
-
-To set up different rulers for individual projects, create a `.phcode.json` file
-in the root directory of each project. Include the same ruler configurations as
-shown in the example above.
diff --git a/docs/08-Features/08-Live Preview/01-live-preview.md b/docs/08-Features/08-Live Preview/01-live-preview.md
deleted file mode 100644
index 9af552eb..00000000
--- a/docs/08-Features/08-Live Preview/01-live-preview.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: Live Preview
----
-import React from 'react';
-import VideoPlayer from '@site/src/components/Video/player';
-
-The **Live Preview** feature in **Phoenix Code** provides instant feedback on changes made to **HTML** and **CSS** files, letting you see your edits in real-time.
-
-> For HTML files, Live Preview is enabled by default. For other file types, you might need to do some manual setup.
-
----
-
-## Showing or Hiding Live Preview
-
-To show or hide Live Preview, click the **Lightning Bolt** icon at the top of the right toolbar.
-
-
-> This button toggles the visibility of the Live Preview panel.
-
-Alternatively, toggle from `File > Live Preview` or use the keyboard shortcut (default: `Ctrl + Alt + L` on Windows/Linux, `Cmd + Alt + L` on macOS).
-
-To customize the keyboard shortcut, see the [Keyboard Shortcuts Guide](../keyboard-shortcuts).
-
-
-
----
-
-## Understanding the Bolt Icon
-
-The Live Preview bolt icon appears in different colors, each indicating a different status:
-
-
-
-* **Gray bolt**: Live Preview is currently turned off.
-
-
-
-* **Half yellow bolt**: Live Preview is connecting.
-
-
-
-* **Full yellow bolt**: Live Preview is successfully connected. Changes will now appear in real-time.
-
-
-
-* **Pink bolt**: There is a syntax error in your code. Live Preview is not updating because of that.
-
-> You can also hover over the bolt icon to see a tooltip showing the current status.
-
-
-
----
-
-## Live Preview Toolbar
-
-Phoenix Code provides various options in the Live Preview toolbar.
-
-
-
-> The browser icons and settings button are hidden by default and appear only on hover.
-
-### Toolbar Options
-
-
-
-* **Reload Live Preview** — Refreshes the Live Preview page. Use this when Live Preview lags behind or doesn't update with your code changes.
-
----
-
-
-
-* **Live Preview Modes** - Live Preview offers 3 modes:
-
- - **Preview Mode**: View-only. The page behaves like a normal browser, but still updates in real-time as you edit code.
-
- - **Highlight Mode**: Click any element to see its size, padding, and margins. Phoenix Code jumps to that element in your source code so you can start editing right away.
-
-
-
- - **Edit Mode** *(Pro)*: Edit elements directly in the preview-change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/edit-mode-live-preview).
-
----
-
-
-
-* **Preview Mode Button** — Located next to the Reload button, this provides a quick shortcut to switch modes.
- Clicking the button switches to **Preview Mode**. On **Phoenix Pro Edition**, a second click returns to **Edit Mode**. On **Phoenix Community Edition**, a second click switches to **Highlight Mode**.
- You can also use the keyboard shortcut `F8` to toggle Preview Mode.
-
----
-
-
-
-* **Pin or Unpin Preview Page** — Pin a file in Live Preview so it remains displayed even when you switch to other files. Click again to unpin.
-
----
-
-
-
-* **File Name** — Displays the name of the currently previewed file. Click it to open that file in the editor (if not already open).
-
----
-
-
-
-* **Pop Out to New Window** — Opens Live Preview in your default browser. This is helpful when you want to see how your page looks in a full browser window.
-
----
-
-
-
-* **Browser Icons** — Select a specific browser icon to open the page in that browser. This helps you see how your page looks across different browsers. The icons are hidden by default. You need to hover over the toolbar to reveal them.
- > This option is available only in Desktop apps.
-
----
-
-
-
-* **Live Preview Settings** — Located at the right-most side of the toolbar. [Read more about Live Preview Settings](./live-preview-settings/#accessing-live-preview-settings).
-
----
-
-
-
-* **Device Size Presets** — A device icon button at the right side of the toolbar. Click it to see a list of common device widths (phones, tablets, and desktops). Pick a device to resize the Live Preview panel to that width. The button icon changes to match the current width category.
- On **Phoenix Pro Edition**, the dropdown also shows CSS breakpoints picked up from your page's stylesheets. See [Resize Ruler](../../Pro%20Features/resize-ruler) for details.
-
----
-
-## Using Live Preview with HTML Files
-
-1. Open the HTML file you want to preview.
-2. Click the **Lightning Bolt** icon to open Live Preview (if it's closed).
-3. Make changes to the HTML file and see them update in Live Preview in real-time.
-
-> If changes don't appear, reload Live Preview and wait until the bolt icon turns full yellow.
-
----
-
-## Live Preview Demonstrated
-
-
-
diff --git a/docs/08-Features/12-terminal.md b/docs/08-Features/12-terminal.md
deleted file mode 100644
index 6f1df200..00000000
--- a/docs/08-Features/12-terminal.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Terminal
----
-
-Phoenix Code has a built-in terminal so you can run commands without leaving the editor.
-
-> The terminal is available only in desktop apps.
-
-
-
-## Opening the Terminal
-
-There are a few ways to open the terminal:
-
-- Click the **Tools** button *(grid icon)* in the bottom-right toolbar and select **Terminal**
-- Go to **View > Terminal** from the menu bar
-- Press `F4`
-
-## Tabs
-
-You can have multiple terminals open at the same time, each in its own tab. The tab sidebar shows the running process name for each terminal.
-
-To create a new tab, click the **+** button at the bottom of the tab sidebar.
-
-To close a tab, hover over it and click the **X** button. If a process is still running, Phoenix Code asks for confirmation before closing.
-
-
-
-## Shell Selection
-
-Click the **dropdown button** *(chevron icon)* next to the new tab button to pick a different shell. The available options depend on your operating system:
-
-- **macOS**: zsh, bash, fish
-- **Linux**: bash, zsh, fish
-- **Windows**: PowerShell, Command Prompt, Git Bash, WSL
-
-Selecting a shell sets it as the default and opens a new terminal with it right away.
-
-> Only shells that are installed on your system are shown.
-
-## Right-Click Menu
-
-Right-click inside the terminal to access:
-
-- **Copy** - copy selected text
-- **Paste** - paste from clipboard
-- **Clear Terminal** - clear the terminal output
-
-## Keyboard Shortcuts
-
-| Action | Shortcut |
-|--------|----------|
-| Toggle terminal | `F4` |
-| Switch focus between editor and terminal | `Shift + Escape` |
-| Clear terminal buffer | `Ctrl/Cmd + K` |
diff --git a/docs/08-Features/13-themes.md b/docs/08-Features/13-themes.md
deleted file mode 100644
index ec4cebe9..00000000
--- a/docs/08-Features/13-themes.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Themes
----
-
-Phoenix Code provides various themes to customize your coding environment. Switching themes is straightforward and quick.
-
-## Installing a new theme
-1. Click the extension manager button on the right panel.
- 
-2. In the modal window, go to the Themes tab.
- 
-3. Browse the available themes. Choose one and click Install.
-4. Confirm the installation in the popup window by clicking 'Close.'
- 
-
-Your new theme is now installed.
-
-
-
-## Applying a theme
-1. Click the extension manager button on the right panel.
-2. In the modal window, go to the Installed tab.
- 
-3. Select the theme you want and click 'Apply.' Click 'Done' to finish.
-
-The selected theme is now applied.
-
-
-
-## Removing a theme.
-To remove a theme:
-1. Click the extension manager icon on the right panel.
-2. In the modal window, go to the Installed tab.
-3. Find the theme you want to remove and click 'Remove.'
-4. Confirm by clicking 'Remove Extensions and Reload' in the popup window.
- 
-
-The theme is now removed.
-
-
-
-## Creating your own theme.
-If you want a custom theme, follow these steps:
-1. Click the extension manager icon on the right panel.
-2. In the modal window, go to the Themes tab.
-3. Click 'Create Theme' in the top right corner.
- 
-4. You’ll be redirected to Phoenix Code’s official Theme Template repository.
- 
-5. Use the template to create your theme.
-6. Publish your theme to use it and share it with others.
diff --git a/docs/08-Features/images/Themes/create-theme.png b/docs/08-Features/images/Themes/create-theme.png
deleted file mode 100644
index b613a5aa..00000000
Binary files a/docs/08-Features/images/Themes/create-theme.png and /dev/null differ
diff --git a/docs/08-Features/images/Themes/installation-successful.png b/docs/08-Features/images/Themes/installation-successful.png
deleted file mode 100644
index 724a75bb..00000000
Binary files a/docs/08-Features/images/Themes/installation-successful.png and /dev/null differ
diff --git a/docs/08-Features/images/Themes/installed-tab.png b/docs/08-Features/images/Themes/installed-tab.png
deleted file mode 100644
index 35ecd6b1..00000000
Binary files a/docs/08-Features/images/Themes/installed-tab.png and /dev/null differ
diff --git a/docs/08-Features/images/Themes/main-interface.png b/docs/08-Features/images/Themes/main-interface.png
deleted file mode 100644
index 6d2bd859..00000000
Binary files a/docs/08-Features/images/Themes/main-interface.png and /dev/null differ
diff --git a/docs/08-Features/images/Themes/remove-extension.png b/docs/08-Features/images/Themes/remove-extension.png
deleted file mode 100644
index 7a71e46e..00000000
Binary files a/docs/08-Features/images/Themes/remove-extension.png and /dev/null differ
diff --git a/docs/08-Features/images/Themes/theme-template-github.png b/docs/08-Features/images/Themes/theme-template-github.png
deleted file mode 100644
index f90a0bfa..00000000
Binary files a/docs/08-Features/images/Themes/theme-template-github.png and /dev/null differ
diff --git a/docs/08-Features/images/Themes/themes-tab.png b/docs/08-Features/images/Themes/themes-tab.png
deleted file mode 100644
index 5ed79ea1..00000000
Binary files a/docs/08-Features/images/Themes/themes-tab.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-bolt.png b/docs/08-Features/images/livePreview/lp-bolt.png
deleted file mode 100644
index 8444818d..00000000
Binary files a/docs/08-Features/images/livePreview/lp-bolt.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-browsers.png b/docs/08-Features/images/livePreview/lp-browsers.png
deleted file mode 100644
index 90c1c92e..00000000
Binary files a/docs/08-Features/images/livePreview/lp-browsers.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-mode.png b/docs/08-Features/images/livePreview/lp-mode.png
deleted file mode 100644
index 0cdfe134..00000000
Binary files a/docs/08-Features/images/livePreview/lp-mode.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-pin.png b/docs/08-Features/images/livePreview/lp-pin.png
deleted file mode 100644
index d1b4fefe..00000000
Binary files a/docs/08-Features/images/livePreview/lp-pin.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-popout.png b/docs/08-Features/images/livePreview/lp-popout.png
deleted file mode 100644
index 843eccae..00000000
Binary files a/docs/08-Features/images/livePreview/lp-popout.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-reload.png b/docs/08-Features/images/livePreview/lp-reload.png
deleted file mode 100644
index 88671108..00000000
Binary files a/docs/08-Features/images/livePreview/lp-reload.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-setting.png b/docs/08-Features/images/livePreview/lp-setting.png
deleted file mode 100644
index 9960a8be..00000000
Binary files a/docs/08-Features/images/livePreview/lp-setting.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/lp-toolbar.png b/docs/08-Features/images/livePreview/lp-toolbar.png
deleted file mode 100644
index 8f41e383..00000000
Binary files a/docs/08-Features/images/livePreview/lp-toolbar.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/settings-dialog.png b/docs/08-Features/images/livePreview/settings-dialog.png
deleted file mode 100644
index 8d706f68..00000000
Binary files a/docs/08-Features/images/livePreview/settings-dialog.png and /dev/null differ
diff --git a/docs/08-Features/images/livePreview/settings-gear.png b/docs/08-Features/images/livePreview/settings-gear.png
deleted file mode 100644
index a55a546a..00000000
Binary files a/docs/08-Features/images/livePreview/settings-gear.png and /dev/null differ
diff --git a/docs/04-editing-colors.md b/docs/08-editing-colors.md
similarity index 96%
rename from docs/04-editing-colors.md
rename to docs/08-editing-colors.md
index 99effed0..e2b8a3d5 100644
--- a/docs/04-editing-colors.md
+++ b/docs/08-editing-colors.md
@@ -7,8 +7,6 @@ import VideoPlayer from '@site/src/components/Video/player';
This section provides an overview of the core color editing features in **Phoenix Code**.
----
-
## Inline Color Editor
**Inline Color Editor** lets you edit colors directly inside **Phoenix Code** using a color picker.
@@ -68,9 +66,7 @@ Clicking a color in the gutter moves the cursor to its position in the editor an
### Enabling/Disabling Color Preview
-You can enable/disable the feature by updating the `colorPreview` property in the preferences file. [Click Here](./03-editing-text.md#editing-preferences) to read on how to edit the preferences.
-
----
+You can enable/disable the feature by updating the `colorPreview` property in the preferences file. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences.
## Color Hints
After typing a color related property, **Phoenix Code** displays a list of color suggestions.
diff --git a/docs/05-file-management.md b/docs/09-file-management.md
similarity index 83%
rename from docs/05-file-management.md
rename to docs/09-file-management.md
index 088876b8..b9dfa932 100644
--- a/docs/05-file-management.md
+++ b/docs/09-file-management.md
@@ -7,8 +7,6 @@ import VideoPlayer from '@site/src/components/Video/player';
This section covers how **Phoenix Code** lets you manage, organize, and navigate files and folders within your projects.
----
-
## File Tree
The **File Tree** appears in the sidebar and shows the complete folder structure of the open project.
@@ -63,8 +61,6 @@ To collapse all folders:
src="https://docs-images.phcode.dev/videos/file-management/collapse-folders.mp4"
/>
----
-
## Tab Bar
The **Tab Bar** appears at the top of the editor and displays all open files.
@@ -205,8 +201,6 @@ You can also toggle the Tab Bar by updating the `showTabBar` option in the prefe
Set the value to `true` to enable it.
See [Editing Preferences](./editing-text#editing-preferences) if you need help in editing the preferences.
----
-
## Working Files
**Working Files** (also called **Working Tree**) provides another way to view and manage open files. It appears in the sidebar, above the **File Tree**.
@@ -263,8 +257,6 @@ You can also toggle Working Files by updating the `showWorkingSet` property in t
Set the value to `false` to hide Working Files.
See [Editing Preferences](./editing-text#editing-preferences) if you need help editing the preferences.
----
-
## Recent Files
The **Recent Files** dialog provides quick access to files you've recently worked on.
@@ -283,8 +275,6 @@ The dialog shows your recently opened files. Closed files appear in gray. Hover
To view a file's full path, hover over it or check the bottom-left corner of the dialog when a file is selected.
----
-
## File Recovery
**Phoenix Code** has a built-in **File Recovery** feature to help you retrieve unsaved changes after unexpected events like crashes or accidental closures.
@@ -298,3 +288,38 @@ When you reopen the editor, if there are any unsaved changes from the previous s
* **Discard**: Removes the unsaved changes. *This will permanently delete the data.*
+## Language and Encoding
+
+Each file has two settings that control how **Phoenix Code** interprets its contents: the **language** it should be treated as, and the **character encoding** used to read and write it. Both are controlled from buttons in the editor's status bar.
+
+### File Encoding
+**File encoding** is the method used to represent text in a file by converting characters into bytes. We need it to ensure that text is displayed correctly across different platforms and to handle special characters or symbols. Phoenix Code Editor supports multiple file encoding formats.
+
+*`UTF-8`* is the default encoding format in Phoenix.
+
+#### Set Encoding of a file
+1. Click on the `utf8` button on the status bar. (UTF-8 represents the default encoding format).
+2. A list of available encoding formats will appear. Select your desired format, or start typing to filter and find matching options in the drop-down menu.
+
+
+
+### File Type Associations
+**File Type Associations** *(Associating a file type with a language)* allows Phoenix Code Editor to provide language-specific features, such as syntax highlighting, code completion, and error checking, based on the file extension. This ensures that your files are treated according to their intended programming or markup language.
+
+*When you create a new file, if the file extension is recognized, it is associated with the default language. If the extension is unknown, a generic text file is opened.*
+
+#### Associate a new file type with a language
+To associate a new file type with a specific language in Phoenix Code Editor, use the Language dropdown button in the status bar. For example, if you want files with `.myjs` extension to be treated as JavaScript files, follow these steps:
+1. Create a new file with the desired extension. For our example, we create (newfile.myjs). By default, it will be associated with a Text file.
+2. Click on `Text` button on the status bar.
+3. A list of all the supported languages will appear. Select the language you want to associate with the file type. For our example, we select `JavaScript`.
+
+
+
+4. At the top of the popup box, you'll find an option labeled `Set as default for .myjs files`. Click on it.
+
+Now, files with `.myjs` extension will be treated as JavaScript files.
+
+
diff --git a/docs/05-quick-start-project.md b/docs/10-quick-start-project.md
similarity index 100%
rename from docs/05-quick-start-project.md
rename to docs/10-quick-start-project.md
diff --git a/docs/06-popular-extensions.md b/docs/11-extensions.md
similarity index 52%
rename from docs/06-popular-extensions.md
rename to docs/11-extensions.md
index 1aa7b8b5..0f049ea6 100644
--- a/docs/06-popular-extensions.md
+++ b/docs/11-extensions.md
@@ -1,14 +1,56 @@
---
-title: Popular Extensions
+title: Extensions
---
import React from 'react';
import VideoPlayer from '@site/src/components/Video/player';
-This document provides an overview of the most popular extensions available for Phoenix Code.
+Phoenix Code supports extensions for adding features, themes, and language support. Everything is managed through the built-in **Extension Manager**.
+To open the Extension Manager, click the extension icon on the right-hand toolbar, as shown below.
-## Minimap
+
+
+The dialog has four tabs:
+
+| Tab | Contents |
+| --- | --- |
+| **Available** | Marketplace extensions. A search box at the top filters the list. |
+| **Themes** | Marketplace themes. |
+| **Installed** | Everything you've installed. Apply, update, or remove from here. |
+| **Default** | Built-in extensions that ship with Phoenix Code. |
+
+A **Sort** dropdown at the top of the dialog orders the list by **Last Updated** (most recently published first), **Downloads** (most-installed first), **Star Rating** (highest GitHub stars), or **Verified** (Phoenix-verified extensions first).
+
+
+
+- **Install**: pick an item from **Available** or **Themes** and click **Install**.
+- **Update**: when a newer version is available, an **Update** button appears on the extension's card in **Installed**.
+- **Remove**: click **Remove** on the card in **Installed**, then confirm with **Remove Extensions and Reload**.
+
+## Themes
+
+Themes use the same flow under the **Themes** tab.
+
+
+
+To switch to an installed theme, either pick it from `View > Themes...` (see [Customizing the Editor → Themes](./customizing-editor#themes)) or click **Apply** next to the theme in **Installed**.
+
+## Create your own
+
+For authoring extensions and themes, see the API section:
+
+- [Creating Themes](/api/creating-themes)
+- [Creating Extensions](/api/creating-extensions)
+- [Creating Node Extensions](/api/creating-node-extensions)
+- [Debugging Extensions](/api/debugging-extensions)
+- [Publishing Extensions](/api/publishing-extensions)
+
+## Popular extensions
+
+A curated list of community extensions worth checking out.
+
+### Minimap
Created by: [Zorgzerg](https://github.com/zorgzerg)
This extension adds a minimap preview of your code on the side of your editor, making it easier to navigate and get an overview of your code structure.
@@ -16,11 +58,10 @@ This extension adds a minimap preview of your code on the side of your editor, m
For more details, visit the [GitHub repository](https://github.com/zorgzerg/brackets-minimap) of the extension.
`Minimap` in action :-
-
----
+
-## Show Whitespace
+### Show Whitespace
Created by: [Dennis Kehrig](https://github.com/DennisKehrig)
This extension allows users to visualize spaces and tabs, making code more readable and helping maintain formatting consistency.
@@ -28,11 +69,10 @@ This extension allows users to visualize spaces and tabs, making code more reada
For more details, visit the [GitHub repository](https://github.com/DennisKehrig/brackets-show-whitespace) of the extension.
`Show Whitespace` in action :-
-
----
+
-## 1-2-3
+### 1-2-3
Created by: [Michal Jeřábek](https://github.com/michaljerabek)
This extension generates number sequences directly in your editor, making it easy to create ordered lists or numbered markers with minimal effort.
@@ -40,11 +80,10 @@ This extension generates number sequences directly in your editor, making it eas
For more details, visit the [GitHub repository](https://github.com/michaljerabek/1-2-3) of the extension.
`1-2-3` in action :-
-
----
+
-## FuncDocr
+### FuncDocr
Created by: [Ole Kröger](https://github.com/Wikunia)
This extension generates JS/PHPDocs for your functions, keeping your code documented and organized.
@@ -52,11 +91,10 @@ This extension generates JS/PHPDocs for your functions, keeping your code docume
For more details, visit the [GitHub repository](https://github.com/wikunia/brackets-funcdocr) of the extension.
`FuncDocr` in action :-
-
----
+
-## Remove Comments
+### Remove Comments
Created by: [Pluto](https://github.com/devvaannsh)
This extension allows you to remove unwanted comments from your code. You can delete all comments at once or only those within a selected section.
@@ -64,11 +102,10 @@ This extension allows you to remove unwanted comments from your code. You can de
For more details, visit the [GitHub repository](https://github.com/devvaannsh/Remove-Comments) of the extension.
`Remove Comments` in action :-
-
----
+
-## Autosave Files on Window Blur
+### Autosave Files on Window Blur
Created by: [Marty Penner](https://github.com/martypenner)
This extension automatically saves all unsaved files whenever Phoenix Code loses focus (for example, when you switch to another application).
@@ -76,4 +113,5 @@ This extension automatically saves all unsaved files whenever Phoenix Code loses
For more details, visit the [GitHub repository](https://github.com/martypenner/brackets-autosave-files-on-window-blur) of the extension.
`Autosave Files on Window Blur` in action :-
+
diff --git a/docs/12-Pro Features/01-ai-chat.md b/docs/12-Pro Features/01-ai-chat.md
new file mode 100644
index 00000000..8878a77a
--- /dev/null
+++ b/docs/12-Pro Features/01-ai-chat.md
@@ -0,0 +1,125 @@
+---
+title: AI Chat
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+:::info Pro Feature
+[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
+:::
+
+Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots, and work alongside you as you code.
+
+> AI Chat is available only in desktop apps.
+
+:::note
+Free users get a daily and monthly chat limit. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access.
+:::
+
+
+
+## Getting Started
+
+AI Chat requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform.
+
+Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically.
+
+## Opening the AI Panel
+
+Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
+
+
+
+## Sending Messages
+
+Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line.
+
+While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response.
+
+To stop the AI mid-response, click the **stop button** *(square icon)* that appears next to the send button while the AI is working, or press `Escape`.
+
+
+
+### Context
+
+Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing:
+
+- **Selection** - the file and line range you have selected in the editor
+- **Cursor** - your current line and file
+- **Live Preview** - if the Live Preview panel is open
+
+You can dismiss any of these by clicking the **x** button on the chip.
+
+## Attachments and Screenshots
+
+Click the **paperclip button** to attach a file or folder. The dropdown lets you choose:
+
+- **Attach a file** - attach a single file. Supported image formats include PNG, JPG, GIF, WebP, and SVG. You can also attach code or document files.
+- **Add folder as context** - attach an entire folder so the AI can read its contents.
+
+
+
+You can also paste an image directly from your clipboard into the input box.
+
+Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture:
+
+- **Live Preview** - your Live Preview panel (if open)
+- **Live Preview Selection** - the currently selected element in Live Preview
+- **Full Editor** - the entire editor window
+- **Select Area** - a custom region you select with a crop tool
+- **Upload from Device** - choose an existing image from your computer instead of taking a new screenshot
+
+
+
+## Permission Modes
+
+The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them.
+
+- **Plan** - the AI proposes a plan first as a card in the chat (titled **Proposed Plan**). Click the **expand icon** in the card header to view the plan in full screen. Then click **Approve** to proceed, or **Revise** to open an inline feedback box where you describe what should change before the AI tries again. Good for complex tasks where you want to stay in control.
+- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands.
+- **Full Auto** - the AI works through everything without pausing. Terminal commands still ask for confirmation.
+
+
+
+## Session History
+
+Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
+
+
+
+> Sessions are saved per project, so each project has its own chat history.
+
+## Undo and Restore
+
+Before each AI response that edits files, Phoenix Code creates a **restore point**. Each edit summary card has a button to revert to that point: it reads **Undo** on the most recent response and **Restore to this point** on earlier ones. Both do the same thing: they roll your files back to the saved state.
+
+The first time you undo or restore in a session, Phoenix Code shows a confirmation dialog before reverting.
+
+> Restore only reverts changes made by the AI. Edits you made outside the AI Chat are not tracked and may be lost if they overlap with files the AI also edited. For full version history, use version control like Git.
+
+
+
+## Settings
+
+Click the **gear icon** in the chat panel to open AI settings.
+
+
+This will open a dialog where you can:
+- Switch between AI providers
+- Add a custom API provider with your own API key and endpoint
+- Set a custom API timeout
+
+
+
+## Keyboard Shortcuts
+
+| Action | Shortcut |
+|--------|----------|
+| Send message | `Enter` |
+| New line | `Shift + Enter` |
+| Cycle permission mode | `Shift + Tab` |
+| Stop the AI mid-response | `Escape` (while AI is generating) |
+| Clear input and focus the editor | `Escape` (when idle) |
diff --git a/docs/07-Pro Features/02-edit-mode-live-preview.md b/docs/12-Pro Features/02-edit-mode-live-preview.md
similarity index 84%
rename from docs/07-Pro Features/02-edit-mode-live-preview.md
rename to docs/12-Pro Features/02-edit-mode-live-preview.md
index f9e8b549..c0a139dc 100644
--- a/docs/07-Pro Features/02-edit-mode-live-preview.md
+++ b/docs/12-Pro Features/02-edit-mode-live-preview.md
@@ -1,5 +1,6 @@
---
-title: Edit Mode - Live Preview
+title: Live Preview Edit
+slug: live-preview-edit
---
import React from 'react';
@@ -9,30 +10,27 @@ 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, change element tags, update classes and IDs, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more.
+**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, 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.
----
-
## Enabling Edit Mode
-To switch to Edit Mode, click the **chevron icon** next to the **Preview Mode** button *(pen icon)* in the Live Preview toolbar, then select **Edit Mode**.
+To switch to Edit Mode, click the **pen icon** in the Live Preview toolbar. This enables full interactivity in the Live Preview.
+> When enabled, the **pen icon** is highlighted in orange color.
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.
----
-
## Control Box
When you click an element in the Live Preview, a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it.
-
+
> The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript.
@@ -44,7 +42,7 @@ The left side of the Control Box displays information about the selected element
- **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
-
+
Clicking on the info section opens the [Element Properties](#edit-element-properties) editor, where you can edit the element’s tag name, classes, and ID.
@@ -52,13 +50,15 @@ Clicking on the info section opens the [Element Properties](#edit-element-proper
The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it 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.
### Tools
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.
-
+
- **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.*
@@ -70,7 +70,7 @@ The right side of the Control Box displays a set of tools you can use to modify
- **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 `![]()
` elements.*
- See [Image Gallery](./03-image-gallery.md) for more details.
+ See [Image Gallery](./image-gallery) 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 `![]()
`, `