feat: image gallery docs

Author: devvaannsh

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

@@ -65,8 +65,8 @@ The Tool Box displays different options depending on the selected element type.
 - **Edit Hyperlink** *(link icon)*: Opens a floating input box that lets you edit the element’s `href` attribute.  
   *This button appears only for `<a>` elements.*
 
-- **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.   
-  *This button appears only for `<img>` elements.* See the **Image Gallery** 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.  
+  *This button appears only for `<img>` elements.* See the [Image Gallery](#image-gallery) section for more details.
 
 - **Duplicate** *(copy icon)*: Copies the selected element and places it below.  
   *This option is available for all elements.*
@@ -148,3 +148,50 @@ To cancel a drag, press `Esc`.
 <!-- TODO: add video showing drag and drop workflow with visual feedback -->
 
 ---
+
+## Image Gallery
+
+The **Image Gallery** is a panel that appears at the bottom of the Live Preview. It lets you browse images from Unsplash or select images from your device.
+
+> 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.
+
+<!-- TODO: add image showing the Image Gallery ribbon -->
+
+### Browsing Images
+
+Type a search term in the search box and press `Enter` or click the search icon. The gallery displays matching images from Unsplash. Use the left and right arrows to browse through the results.
+
+> The gallery remembers your last search query and shows it when you reopen it. If there is no previous search, Phoenix Code shows results for a random query.
+
+Hover over a thumbnail to preview the image in your page. The previously selected image is restored when you move the cursor away from the gallery.
+
+To select an image, click the thumbnail or the **Use this Image** button. Phoenix Code downloads the image, saves it to the selected folder, and automatically updates the `src` attribute.
+
+> If this is your first time selecting an image, Phoenix Code prompts you to choose a folder where images should be saved. See [Folder Selection Dialog](#folder-selection-dialog) for details.
+
+Below each thumbnail, the photographer’s name and a link to their Unsplash profile are displayed.
+
+<!-- TODO: add video showing image gallery workflow -->
+
+### Selecting from Device
+
+Click the **Select from device** button at the top of the gallery to choose an image from your local files.
+
+### Folder Selection Dialog
+
+The first time you select an image, Phoenix Code prompts you to choose where images should be saved in your project.
+
+The dialog includes:
+- **Folder path input**: Enter a folder path relative to your project root. Phoenix Code suggests matching folders as you type.
+- **Remember this folder for this project**: When checked (default), Phoenix Code reuses this folder for future image downloads in the same project.
+
+> If the folder does not exist, Phoenix Code creates it.  
+> If the folder path is left empty, images are saved to an `images` folder in the project root.
+
+<!-- TODO: add image showing the folder selection dialog -->
+
+To change the saved folder later, click the **Folder Selection** button *(folder icon)* in the Image Gallery header.
+
+---

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

@@ -65,7 +65,7 @@ The Tool Box displays different options depending on the selected element type.
 - **Edit Hyperlink** *(link icon)*: Opens a floating input box that lets you edit the element’s `href` attribute.  
   *This button appears only for `<a>` elements.*
 
-- **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.   
+- **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.  
   *This button appears only for `<img>` elements.* See the **Image Gallery** section for more details.
 
 - **Duplicate** *(copy icon)*: Copies the selected element and places it below.  
@@ -139,7 +139,7 @@ To drag an element: click and hold the element, then move your mouse to the desi
 
 > When multiple drop targets overlap *(for example, an `img` inside a `div` with aligned edges)*, you can scroll slightly to cycle through targets and drop the element when the correct label appears.
 
-Phoenix Code validates drops to prevent invalid HTML structure. *For example, list items can only be placed inside list containers, and block elements cannot be placed inside inline elements*. If a drop location is invalid, Phoenix Code shows the marker for the closest valid drop target.no marker will appear and the element cannot be dropped there. In some cases,
+Phoenix Code validates drops to prevent invalid HTML structure. *For example, list items can only be placed inside list containers, and block elements cannot be placed inside inline elements*. If a drop location is invalid, Phoenix Code shows the marker for the closest valid drop target. In some cases, when no valid drop target is found, Phoenix Code won't show any indicators.
 
 To cancel a drag, press `Esc`.
 
@@ -148,3 +148,50 @@ To cancel a drag, press `Esc`.
 <!-- TODO: add video showing drag and drop workflow with visual feedback -->
 
 ---
+
+## Image Gallery
+
+The **Image Gallery** is a panel that appears at the bottom of the Live Preview. It lets you browse images from Unsplash or select images from your device.
+
+> 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.
+
+<!-- TODO: add image showing the Image Gallery ribbon -->
+
+### Browsing Images
+
+Type a search term in the search box and press `Enter` or click the search icon. The gallery displays matching images from Unsplash. Use the left and right arrows to browse through the results.
+
+> The gallery remembers your last search query and shows it when you reopen it. If there is no previous search, Phoenix Code shows results for a random query.
+
+Hover over a thumbnail to preview the image in your page. The previously selected image is restored when you move the cursor away from the gallery.
+
+To select an image, click the thumbnail or the **Use this Image** button. Phoenix Code downloads the image, saves it to the selected folder, and automatically updates the `src` attribute.
+
+> If this is your first time selecting an image, Phoenix Code prompts you to choose a folder where images should be saved. See [Folder Selection Dialog](#folder-selection-dialog) for details.
+
+Below each thumbnail, the photographer’s name and a link to their Unsplash profile are displayed.
+
+<!-- TODO: add video showing image gallery workflow -->
+
+### Selecting from Device
+
+Click the **Select from device** button at the top of the gallery to choose an image from your local files.
+
+### Folder Selection Dialog
+
+The first time you select an image, Phoenix Code prompts you to choose where images should be saved in your project.
+
+The dialog includes:
+- **Folder path input**: Enter a folder path relative to your project root. Phoenix Code suggests matching folders as you type.
+- **Remember this folder for this project**: When checked (default), Phoenix Code reuses this folder for future image downloads in the same project.
+
+> If the folder does not exist, Phoenix Code creates it.  
+> If the folder path is left empty, images are saved to an `images` folder in the project root.
+
+<!-- TODO: add image showing the folder selection dialog -->
+
+To change the saved folder later, click the **Folder Selection** button *(folder icon)* in the Image Gallery header.
+
+---