Docs for august release!

.markdownlint.json

@@ -1,4 +1,5 @@
 {
   "MD013": false,
-  "MD025": false
+  "MD025": false,
+  "MD033": false
 }

docs/01-Getting Started/index.md

@@ -28,16 +28,17 @@ Here's what sets Phoenix Code apart.
 
 ## Free vs Pro
 
-You can build complete websites for free. The core editor, Live Preview, Design Mode, Git, Terminal, and code tools are all included at no cost.
+You can build complete websites for free. The core editor, [Live Preview](/docs/Features/Live%20Preview), [Design Mode](/docs/design-mode), [Git](/docs/Features/git), [Terminal](/docs/Features/terminal), and code tools are all included at no cost.
 
 **Phoenix Pro** adds:
 
-- **Live Preview Edit** — edit the rendered page directly and sync changes back to your source automatically.
-- **AI** — unlimited AI use (free users get a daily and monthly chat limit).
-- **Device Preview** — check how your page looks at phone, tablet, and desktop sizes.
-- **Measurements** — ruler lines from a selected element to the edges of the page, labeled with exact pixel positions, for precise alignment.
-- **Image Gallery** — browse stock images from providers like Unsplash and Pexels and embed or download them into your project without leaving Phoenix Code.
-- **Markdown Editor** — edit Markdown directly in the preview with a full rich-text editor that keeps your source in sync.
+- **[Live Preview Edit](/docs/Pro%20Features/live-preview-edit)**: edit the rendered page directly and sync changes back to your source automatically.
+- **[Styles Bar](/docs/Pro%20Features/styles-bar)**: style any element visually from the Live Preview, with fonts, colors, spacing, and layout controls that save straight to your CSS.
+- **[AI](/docs/Pro%20Features/ai-chat)**: unlimited AI use (free users get a daily and monthly chat limit).
+- **[Device Preview](/docs/Pro%20Features/device-preview)**: check how your page looks at phone, tablet, and desktop sizes.
+- **[Measurements](/docs/Pro%20Features/measurements)**: ruler lines from a selected element to the edges of the page, labeled with exact pixel positions, for precise alignment.
+- **[Image Gallery](/docs/Pro%20Features/image-gallery)**: browse stock images from providers like Unsplash and Pexels and embed or download them into your project without leaving Phoenix Code.
+- **[Markdown Editor](/docs/Pro%20Features/markdown-editor)**: edit Markdown directly in the preview with a full rich-text editor that keeps your source in sync.
 
 See plans on the [pricing page](https://phcode.io/pricing).
 

docs/02-Live Preview/02-live-preview-edit.md

@@ -10,7 +10,7 @@ import VideoPlayer from '@site/src/components/Video/player';
 [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
 :::
 
-**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, 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, style elements, and much more.  
 **Phoenix Code** updates your source code automatically as you make changes.
 
 <VideoPlayer
@@ -26,6 +26,32 @@ To switch to Edit Mode, click the **pen icon** in the Live Preview toolbar. This
 
 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.
 
+## Starter Bar
+
+Edit Mode needs an element to work on, so on a blank page there is nothing to click yet. When your page has no content, a **Starter Bar** appears at the bottom center of the Live Preview to add your first element.
+
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/live-preview-edit/starter-bar.mp4"
+/>
+
+The bar shows the most common elements: Heading, Paragraph, Image, Link, Button, and Div. Click one to add it to the page.
+
+To pick from the full element list, click the **three-dots icon** at the end of the bar. This opens a searchable list with the same elements as the [Insert Element](#insert-element) panel.
+
+![Starter Bar element list](../images/pro/starter-bar-element-list.png "Starter Bar searchable element list")
+
+When you pick an element:
+
+- If the file is empty, Phoenix Code creates the standard HTML page structure and places the element inside `<body>`.
+- If the file already has some markup, it is preserved and the element is added to it.
+
+The new element is automatically selected so you can continue editing. Press `Ctrl/Cmd + Z` to undo the insert.
+
+> The Starter Bar disappears once your page has content, and comes back if the page becomes empty again, for example after you delete every element.
+
+To turn the Starter Bar off, set the `livePreviewShowStarterBar` preference to `false`. It is `true` by default.  
+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.
@@ -37,6 +63,7 @@ When you click an element in the Live Preview, a **Control Box** appears near it
 ### Element Info
 
 The left side of the Control Box displays information about the selected element:
+
 - **Tag name**: The element type (for example, `div`, `p`, `img`)
 - **ID**: The element’s ID attribute (if present), shown with a `#` prefix
 - **Dimensions**: The element’s size in pixels (width × height)
@@ -176,13 +203,15 @@ When you start editing text, a **Formatting Toolbar** appears near the element.
 Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting is applied to the entire element. Clicking a format that is already applied removes it.
 
 The toolbar shows three primary formatting buttons:
+
 - **Bold** (`Ctrl/Cmd + B`): `<b>` tag
 - **Italic** (`Ctrl/Cmd + I`): `<i>` tag
 - **Underline** (`Ctrl/Cmd + U`): `<u>` tag
 
 #### More Formatting Options
 
 Click the **More** button *(three-dots icon)* on the right side of the toolbar to see additional formatting options:
+
 - **Strikethrough**: `<s>` tag
 - **Subscript**: `<sub>` tag
 - **Superscript**: `<sup>` tag
@@ -200,11 +229,12 @@ To drag an element: click and hold the element, then move your mouse to the desi
   src="https://docs-images.phcode.dev/videos/live-preview-edit/drag-drop.mp4"
 />
 
-#### Visual Indicators
+### Visual Indicators
+
 - **Arrow markers** to indicate the drop position:
-    - **Up (↑) or Down (↓) arrows**: Places the element before or after the target element
-    - **Left (←) or Right (→) arrows**: Places the element before or after the target element (appears for flex row layouts)
-    - **⊕ symbol with a dashed border**: Places the element inside the target as a child
+  - **Up (↑) or Down (↓) arrows**: Places the element before or after the target element
+  - **Left (←) or Right (→) arrows**: Places the element before or after the target element (appears for flex row layouts)
+  - **⊕ symbol with a dashed border**: Places the element inside the target as a child
 
 - **Target label**: A small box next to the marker displays the target element's tag name, ID, and classes
 
@@ -237,11 +267,13 @@ You can cut, copy, and paste elements in Edit Mode using standard keyboard short
 ### Using Keyboard Shortcuts
 
 When you click an element in the Live Preview, keyboard focus moves to the Live Preview. You can then use:
+
 - **Ctrl/Cmd + X**: Cut the selected element
 - **Ctrl/Cmd + C**: Copy the selected element
 - **Ctrl/Cmd + V**: Paste the copied or cut element below the currently selected element
 
 ### Using the More Options Menu
+
 ![More Options dropdown](../images/pro/more-options-dropdown.png "More Options Dropdown")
 
 Click the **More Options** button *(three-dots icon)* in the Control Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu.

docs/02-Live Preview/03-styles-bar.md

@@ -0,0 +1,185 @@
+---
+title: Styles Bar
+slug: "/Pro Features/styles-bar"
+---
+
+:::info Pro Feature
+[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
+:::
+
+The **Styles Bar** lets you style elements visually right inside the Live Preview, and it automatically syncs your code in real time.  
+When you select an element in [Edit Mode](./live-preview-edit), a bar appears at the bottom of the Live Preview with controls for **fonts**, **colors**, **borders**, **spacing**, **layout**, and more.
+
+<!-- TODO: PLUTO - add video here showing the styles bar in action -->
+
+> The controls shown depend on the selected element. For example, text controls are not shown for images.
+
+You can move the bar to the top of the Live Preview using the **dock button** at the right end of the bar.
+
+<!-- TODO: PLUTO - add image here showing the dock button -->
+
+## Save Changes To
+
+Phoenix Code gives you control to choose where you want to save your edits. By default, all the changes are saved directly on the element as an inline style. If you want to save the changes in one of the CSS rules, you can click on the **Save changes to** button:
+<!-- TODO: PLUTO - add image here showing the save changes to button -->
+
+It shows all the available selectors for that element. Select the one you want, and all the changes made to that element will automatically get saved in that selector.
+> Each selector also shows the number of elements it affects on the page.
+
+<!-- TODO: PLUTO - add image here showing the affects x elements -->
+
+### Creating a New Rule
+
+Click **Create new rule…** to save your edits in a new CSS rule. Type a class like `.card` or an id like `#hero` and click **Create**. Phoenix Code creates the rule and also adds the class or id to the element, so the rule applies right away.
+
+<!-- TODO: PLUTO - add video here showing the new rule creation -->
+
+### Editing Element States
+
+The **State** dropdown in the popover lets you style the element's `hover`, `focus`, and `active` states. Pick a state and the Live Preview turns it on while you edit, with a banner showing which state you are editing.
+
+For any other state, type it in the **Create new rule** field, for example `.button:disabled`.
+
+<!-- TODO: PLUTO - add video of editing the hover state in the element -->
+
+> States need a CSS rule to live in, so they are not available when saving to inline styles.
+
+## Font Family
+
+Opens a font picker with three tabs:
+
+- **System**: Common system fonts like Arial, Georgia, and Verdana. These need no download and work everywhere.
+- **Google**: The full Google Fonts collection. Popular fonts are shown first, and you can search for any font. Each font is shown in its own style, so you can see how it looks before picking it. Picking one adds the Google Fonts link to your HTML.
+- **Manual**: Type any font name yourself. You can also upload a font file (`.ttf`, `.otf`, `.woff`, `.woff2`), and Phoenix Code adds it to your project and applies it.
+
+Fonts already used on the page appear in an **On this page** group, so you can reuse them quickly.
+
+<!-- TODO: PLUTO - add image here showing the font family popover -->
+
+## Font Size
+
+Sets the font size. Type a value or use the **+/-** buttons. Click the unit button to switch between `px`, `em`, `rem`, and `%`, and the value is converted to the new unit automatically.
+
+> These shortcuts work in every number field of the Styles Bar: scroll over a field to change its value, hold `Shift` while clicking **+/-** for bigger steps `(x10)`, or hold `Alt` for smaller ones `(x0.1)`.
+
+## Text Style
+
+The text style popover has two tabs.
+
+The **Format** tab:
+
+- **Font weight**: Controls how thick the text is, with a slider from Thin (100) to Black (900).
+- **Format**: Italic, underline, strikethrough, and overline.
+- **Alignment**: Aligns text left, center, right, or justified.
+- **Case**: Shows text as uppercase, lowercase, or capitalized, without changing the text in your HTML.
+- **Cursor**: The mouse cursor shown when hovering over the element, like pointer or grab.
+
+The **Spacing** tab:
+
+- **Line height**: The vertical space between lines of text.
+- **Letter spacing**: The space between characters.
+- **Word spacing**: The space between words.
+- **Text indent**: How far the first line of text is indented.
+
+To learn more about these properties, see [MDN's text styling guide](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals).
+
+<!-- TODO: PLUTO - add image here showing the text style popover -->
+
+> Looking for bold? Use the font weight slider.
+
+## Background Color
+
+The **Background color** button shows the element's current background color. Click it to open a full color picker:
+
+- Pick a color visually, or type one as Hex, RGB, or HSL.
+- The **opacity** field controls how see-through the color is.
+- The **eyedropper** lets you pick a color from anywhere on the page.
+- **Swatches** shown on the left side displays all the colors already used in the page, plus a set of common colors.
+
+<!-- TODO: PLUTO - add image here showing the background color picker -->
+
+> The eyedropper is not available in Firefox, Safari and in the Linux desktop app.
+
+## Text Color
+
+The **Text color** button works the same way as [Background Color](#background-color), but it controls the color of the element's text. It opens the same color picker.
+
+## Border & Outline
+
+The popover has two tabs, **Border** and **Outline**.
+
+The **Border** tab:
+
+- **Style**: None, solid, dashed, dotted, or double. Hovering an option previews it on the element.
+- **Width**: The thickness of the border.
+- **Color**: Click the swatch to open the color picker to set the color of the border.
+- **Radius**: Rounds the corners of the bordered element.
+
+By default, edits apply to all four sides of the border. Use the **sides button** in the popover header to edit only the top, right, bottom, or left side.
+
+The **Outline** tab has the same style, width, and color options, plus:
+
+- **Offset**: The gap between the outline and the element's edge.
+
+> An outline is drawn outside the element's border and takes up no space on the page.
+
+<!-- TODO: PLUTO - add image here showing the border and outline popover -->
+
+## Box Model
+
+The popover has three tabs, **Size**, **Padding**, and **Margin**. They sit together because they measure one element from the inside out.
+
+The **Size** tab:
+
+- **Width and Height**: The element's size. Empty fields show the current size of the element as placeholders.
+- **Min / max**: Click the chip to set minimum and maximum size limits. This is very useful for creating responsive web pages.
+
+The **Padding** and **Margin** tabs each show four fields for the top, right, bottom, and left sides, arranged around a frame just like they sit on the page.
+
+> Padding is the space inside the element, between its content and its border. Margin is the space outside it.
+
+The button in the center of the frame controls how the sides are linked:
+
+- **Independent**: Each side has its own value.
+- **Paired**: Top and bottom are linked, left and right are linked.
+- **All linked**: One value for every side.
+
+Linked fields are color coded so you can see which sides move together.
+
+<!-- TODO: PLUTO - add image here showing the box model popover -->
+
+## Layout
+
+The popover has two tabs, **Display** and **Position**.
+
+The **Display** tab:
+
+- **Display**: How the element is laid out: `Block`, `Inline`, `Flex`, `Grid`, `Hidden`, and more. Picking `Flex` or `Grid` reveals options like `direction`, `alignment`, `wrap`, and `gap`.
+- **Opacity**: How see-through the element is. This fades the whole element, including its text and children.
+
+The **Position** tab:
+
+- **Position**: `Static`, `Relative`, `Absolute`, `Fixed`, or `Sticky`, with fields to offset the element from each side.
+- **Z-index**: Which element appears on top when elements overlap.
+
+To learn more about these properties, see MDN's guides on [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) and [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+
+<!-- TODO: PLUTO - add image here showing the layout popover -->
+
+## When a Change Is Overridden
+
+Sometimes a more specific CSS rule wins over the rule you are editing, so your change has no visible effect. In that case, Phoenix Code automatically adds `!important` to your change to make it take effect.
+
+If the change is still overridden even after the `!important` property, Phoenix Code shows a notification with an **Apply anyway** button, which applies the style directly on the element so it always takes effect.
+
+Read more about [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity) on MDN.
+
+## Reset and Undo
+
+Every popover has a **Reset** button in its header. It reverts all the changes you made since opening that popover. If you have not changed anything, the button stays disabled.
+
+You can also undo any Styles Bar edit with `Ctrl/Cmd + Z`, like every other Edit Mode operation. See [Undo and Redo](./live-preview-edit#undo-and-redo).
+
+## Hiding the Styles Bar
+
+To hide the bar, open the **More Options** menu *(three-dots icon)* in the Control Box and unselect **Show Styles Bar**. While hidden, a **palette icon** appears in the Control Box tools to bring it back.

docs/02-Live Preview/03-device-preview.md → docs/02-Live Preview/04-device-preview.md

@@ -44,5 +44,3 @@ While you drag the edge of the Live Preview panel, a ruler appears across the to
 
 In [Design Mode](./live-preview-edit), the Live Preview takes over the full window. In that case, you'll see resize handles directly on the page: drag the left or right handle to change the **width**, or drag the bottom handle to change the **height**. The same ruler appears, and the label now shows both dimensions, like `iPad Mini — 768px × 1024px`.  
 In Design Mode, a **Fit to screen** option is also available in the device dropdown. This resizes the page to fit the available space in the Live Preview.
-
-

docs/02-Live Preview/04-measurements.md → docs/02-Live Preview/05-measurements.md

@@ -22,5 +22,5 @@ While in [Edit Mode](./live-preview-edit), click the dropdown arrow next to the
 
 Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Control Box. Select **Show Measurements** to toggle it on or off.
 
-You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default).   
+You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default).
 See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.