add drafts & content for phase 1 and 2

astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import coherentTheme from 'coherent-docs-theme';
 import { content } from './src/data/content';
+import starlightAutoSidebar from 'starlight-auto-sidebar'
 
 export default defineConfig({
 	integrations: [
@@ -21,10 +22,12 @@ export default defineConfig({
 				},  
 			],
 			plugins: [
-			...coherentTheme({
-				documentationSearchTag: 'UI workflow guide',
-				showPageProgress: true,
-			})],
+				...coherentTheme({
+					documentationSearchTag: 'UI workflow guide',
+					showPageProgress: true,
+				}),
+				starlightAutoSidebar()
+			],
 			customCss: ['./src/styles/custom.css'],
 			sidebar: content.map((topic) => {
 				return {

src/content.config.ts

@@ -1,7 +1,13 @@
 import { defineCollection } from 'astro:content';
 import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
+import { autoSidebarLoader } from 'starlight-auto-sidebar/loader'
+import { autoSidebarSchema } from 'starlight-auto-sidebar/schema'
 
 export const collections = {
 	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+	autoSidebar: defineCollection({
+		loader: autoSidebarLoader(),
+		schema: autoSidebarSchema(),
+	}),
 };

src/content/docs/Polishing/accessibility.mdx

@@ -0,0 +1,6 @@
+---
+title: Accessibility
+description: Learn how to make your game UI accessible to all players using Gameface's built-in accessibility features. This section covers best practices for implementing screen reader support, keyboard navigation, and localization to ensure your UI is inclusive and reaches a wider audience.
+sidebar:
+    order: 1
+---

src/content/docs/phase-1-getting-started/getting-started-with-the-player.mdx

@@ -0,0 +1,68 @@
+---
+title: Getting Started with the Player
+description: Learn how to use the Player, Gameface's primary tool for running and testing your UI without needing an engine. This hands-on demo will guide you through the basics of setting up and using the Player to streamline your development workflow.
+sidebar:
+    order: 2
+draft: true
+---
+import Summary from '../../../components/Summary.astro';
+import Highlight from '../../../components/Highlight.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+<Summary>
+    The biggest bottleneck in traditional game UI development is the engine. Waiting for Unreal or Unity to compile just to see if a UI widget is centered or a health bar updates ruins iteration speed. 
+
+    Enter the <Highlight>Gameface Player</Highlight>. 
+
+    The Player is a lightweight, standalone version of the Gameface rendering engine. 
+    It allows you to drag and drop your HTML files and see them render exactly as they would in the game. It is the ultimate tool for rapid UI prototyping & development.
+</Summary>
+
+## Download the Player
+
+Before we can test anything, you need the Player running on your machine. 
+
+:::note[Download Link Placeholder]
+[Click here to download the latest version of the Gameface Player](#) *(Note: Link will be updated when the demo environment goes live).*
+:::
+
+Once downloaded and extracted, launch the `Player.exe` (or the equivalent executable for your OS). You don't need to configure any complex backend settings—just open it up and let's get building.
+
+## Hands-On: Exploring the Demo Environment
+
+When you first launch the Player, you will be greeted by the **Home Page**, which features a menu of pre-built UI samples. This is the perfect sandbox to see what Gameface is capable of right out of the box.
+
+<Steps>
+
+1. #### **Play with a Sample**
+    From the Home Page, click on one of the featured samples. 
+
+    *[Placeholder: Briefly describe the specific sample here once it is live, e.g., "Open the Inventory sample to see a fully animated drag-and-drop grid, or the HUD sample to see a live minimap and compass."]* Take a moment to click around. Notice how fluid the animations are and how instantly the UI responds. This is all running on standard web technologies, powered by the Gameface renderer.
+
+2. #### **Navigate to the Demo Page**
+    Once you are done exploring the samples, head over to the **"Demo"** page using the main navigation. 
+
+    This page is designed to isolate and showcase the specific technical features of Gameface. It is an interactive playground where you can tweak values and see the engine react in real-time.
+
+3. #### **Test Live Data-Binding**
+    The first feature you will see on the Demo page is **Data-Binding**. In a real game, data coming from the engine (like player health or ammo) is bound to your HTML elements and displayed on the page in real-time. Here, we are simulating that live connection.
+
+    * **The UI Element:** On the right side of the screen, you will see a visual element (like a health bar or a character stat block).
+    * **The Controls:** On the left side, you will find a series of input fields and sliders.
+
+    Try changing the values in the inputs on the left. You will see the UI element on the right update <Highlight>instantly</Highlight>. You are actively modifying the data-bound attributes of the element, proving that you can fully test your UI's logic and data states without ever waiting for a backend programmer to hook up the real game data.
+
+4. #### **Explore the Next Features**
+    Data-binding is just the beginning. At the top of the Demo page, you will find a **dropdown menu**. Use this to switch to the next Gameface feature sandbox.
+
+    *[Placeholder: Add a quick sentence about the next feature once decided, e.g., "Switch to the 'Live Views' tab to see how Gameface renders 3D engine textures directly onto a 2D DOM element, or check out the 'Spatial Navigation' demo."]*
+
+</Steps>
+
+## Your Turn
+
+Feel free to spend some time exploring the rest of the dropdown features on the Demo page. The Player is designed to be your primary workspace. Whenever you write new UI code, this is where you will preview it.
+
+Once you are comfortable navigating the Player and seeing how it renders standard web code, it's time to learn how to fix things when they break. 
+
+In the next article, we will introduce the **Gameface Inspector**—your standalone debugging tool for checking the DOM, tweaking CSS, and tracking down JavaScript errors.

src/content/docs/phase-1-getting-started/introduction.mdx

@@ -0,0 +1,103 @@
+---
+title: "Introduction: Welcome to the UI workflow guide"
+description: "Your first steps into the world of Gameface development. Learn how to set up your environment, create a simple 'Hello World' interface, and understand the basics of Gameface's architecture."
+sidebar:
+    order: 1
+---
+
+import Summary from '../../../components/Summary.astro';
+import Highlight from '../../../components/Highlight.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+<Summary>
+    Welcome to the <Highlight>Gameface UI workflow guide</Highlight>! 
+
+    This guide is designed to take you from zero to hero in Gameface development, covering everything from the basics of setting up your environment to advanced performance optimization techniques. 
+    Whether you're a seasoned front-end developer, a game designer, or a gameplay programmer stepping into the UI world, this guide will provide you with the exact knowledge and tools you need to create stunning, high-performance interfaces for games.
+</Summary>
+
+## What to Expect in This Guide
+
+This guide is structured chronologically to match the typical phases of the development process. Each phase builds on the previous one, so it's recommended to follow along in order. 
+
+Here's a brief overview of what we'll cover in each phase:
+
+<Steps>
+
+1. #### **Phase 1: Getting Started**
+    Introduction to the guide and Gameface. Get a hands-on demo with the <Highlight>Player</Highlight>, the primary tool for running and testing your UI without needing to compile a game engine.
+
+2. #### **Phase 2: Planning & Setup**
+    Configuring your development environment, establishing your <Highlight>recommended tech stack</Highlight> (like SolidJS and Vite), and understanding how data flows between the game and the UI. 
+
+    This phase covers <Highlight>core concepts</Highlight> like "push vs. fetch", how to organize your views, and bridging the gap between design and development 
+    using tools like the [Figma Exporter](https://www.figma.com/community/plugin/1595556380268929590/coherent-gameface-exporter). 
+
+    We also bridge to prototyping by introducing [Gameface UI](https://gameface-ui.coherent-labs.com/)—our component library that makes prototyping fast and easy.
+
+3. #### **Phase 3: Layout, Assets & Styling**
+    The fun part! We cover how to translate designs into clean, scalable game UIs. 
+
+    You will learn when to use absolute versus flex layouts, write maintainable and performant CSS using BEM & SCSS, and build interfaces that scale perfectly across <Highlight>different aspect ratios</Highlight>. 
+
+    We also explore best practices for handling complex typography, rendering <Highlight>vector graphics</Highlight> and assets, and bringing your UI to life with high-performance <Highlight>animations</Highlight>.
+
+4. #### **Phase 4: Logic & Interactions**
+    Now that you have a beautiful UI, it's time to make it interactive! 
+
+    In this phase, we bridge the gap between static UI and information-rich, dynamic interfaces.
+
+    We cover how to <Highlight>mock real game data</Highlight> to test your UI independently, 
+    manage local versus game state using <Highlight>data-binding</Highlight>, 
+    and handle complex user inputs like <Highlight>gamepad, touch support, and spatial navigation</Highlight> using the [Interaction Manager](https://frontend-tools.coherent-labs.com/interaction-manager/getting-started/).
+
+5. #### **Phase 5: Polishing & Debugging**
+    The final 10%. We cover how to polish your UI to make it feel smooth, accessible, bug-free, and most importantly, performant. 
+
+    Learn how to implement native <Highlight>localization and accessibility</Highlight> features, master the performance profiler, and write high-performance CSS. 
+
+    We also deep-dive into advanced, Gameface-exclusive rendering features like <Highlight>Live Views, Compositor effects, and backdrop filters</Highlight>.
+</Steps>
+
+## What You Won't Find in This Guide
+
+To keep this guide lean and focused on UI creation, we have intentionally excluded backend development. You <Highlight>will not</Highlight> find:
+* C++ tutorials or engine-specific integration steps (Unreal, Unity, or custom engines).
+* Deep dives into the Gameface API.
+* Instructions on how to compile or initialize the Gameface library within your game.
+
+*If you are a backend programmer looking for engine integration, please refer to the [official Gameface technical documentation](https://docs.coherent-labs.com/cpp-gameface/).*
+
+## Your Content Creation Reference
+
+Think of this guide as your long-term UI playbook. While it is structured as a chronological course for beginners, it is ultimately designed to be your <Highlight>daily reference manual</Highlight>. 
+
+Want to localize your UI? Jump straight to the *Localization* section. 
+Trying to remember how to handle ultrawide monitors? Check the *Scalability* page. 
+Need to set up a new animation library? Head over to *Animations*. 
+
+Keep this guide bookmarked and refer back to it whenever you hit a UI roadblock.
+
+:::note[Structure is not mandatory]
+While the guide is structured in a way that builds on previous knowledge, feel free to jump around and explore the sections that interest you the most. 
+
+Each section is designed to be self-contained, so you can pick and choose the topics that are most relavant to your current project's progress or just for quick reference.
+:::
+
+## Who Is This Guide For?
+
+**Short answer**: <Highlight>Everyone</Highlight> working with Gameface!
+
+Because team structures vary wildly, we built this guide for a wide range of skill sets. 
+Whether you are a seasoned front-end developer using Gameface for the first time, a UI/UX designer looking to understand the engine's capabilities, or a Unity/Unreal gameplay programmer 
+who has never worked with web technologies before—this guide has something for you.
+
+## Next Steps
+
+Ready to dive in? Proceed to the [next topic](/phase-1-getting-started/getting-started-with-the-player) where we will introduce you to the Player. 
+We will get our hands dirty with a quick demo showcasing how to run, test, and update <Highlight>game data</Highlight> in your UI without needing a backend engine!
+
+### Need more convincing?
+
+- Read more about what [Gameface is](https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/overview/) - for a technical overview.
+- Check out the main differences between Gameface and a traditional browser environment in our [Differences to traditional browsers](https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/) documentation.

src/content/docs/phase-1-getting-started/working-separately-from-the-game.mdx

@@ -0,0 +1,70 @@
+---
+title: "Working Separately from the Game"
+description: "Learn how to debug your game UI, tweak CSS, and test JavaScript logic using the standalone Gameface Inspector."
+sidebar:
+    order: 3
+draft: true
+---
+
+import Summary from '../../../components/Summary.astro';
+import Highlight from '../../../components/Highlight.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+<Summary>
+    In the previous article, you loaded your HTML file into the Player and watched it run perfectly. But what happens when things go wrong? What if a layout breaks, or a data-bound value isn't updating?
+
+    If you have ever done traditional web development, we have great news: **you do not need to learn a proprietary game engine debugger.**
+
+    Gameface uses the standard Chrome DevTools. You get the exact same inspection power and JavaScript debugging as a web browser, completely independent of the game engine.
+</Summary>
+
+## The Standalone Workflow
+
+The core philosophy of Gameface development is **separation of concerns**. 
+
+You should never have to ask a gameplay programmer to recompile the Unreal or Unity engine just so you can change the color of a health bar. By pairing the **Player** (to render your HTML) with the **DevTools Inspector** (to debug it), you unlock a completely independent, rapid-iteration workflow. 
+
+Write code in your IDE &rarr; See it update in the Player &rarr; Debug it in the Inspector.
+
+## Hands-On: Launching the Inspector
+
+Let's see how it works by inspecting the Demo page you were just playing with.
+
+<Steps>
+
+1. #### **Keep the Player Running**
+    Make sure you still have the Player open and running the Demo page from the previous article.
+
+2. #### **Open the DevTools**
+    To open the Inspector, simply press <Highlight>F12</Highlight> on your keyboard, or right-click anywhere inside the Player window and select **"Inspect"**. 
+
+3. #### **Explore the Interface**
+    A new window will pop up. If you have ever used Google Chrome to build a website, you will instantly recognize this interface. It is fully equipped to debug your UI's DOM, styling, and logic.
+
+</Steps>
+
+## A Quick Tour of the Tools
+
+While the Inspector contains all the standard web debugging features, Gameface includes a few custom additions specifically tailored for game UI.
+
+Here are the primary panels you will use daily:
+
+### 1. The Elements Panel
+This is your layout laboratory. Here you can see the live DOM tree of your loaded HTML file. 
+* Click on any element to view its active CSS rules.
+* <Highlight>Live Edit:</Highlight> Double-click a CSS property (like `width` or `background-color`) and change it. You will see the UI in the Player update instantly. This is the fastest way to polish designs without constantly saving and reloading files.
+
+### 2. The Console & Sources
+This is the brain monitor. If you have a typo in your JavaScript, it will show up here in bright red. You can use the Console to manually type JavaScript commands to trigger UI events, or use the Sources tab to set standard breakpoints in your code and step through your logic line by line.
+
+### 3. The Custom Data-Bind Panel
+Because Gameface relies heavily on data-binding to communicate with the game engine, we added a custom panel just for this workflow. 
+When you select an element in the DOM tree, you can use the Data-Bind tab to inspect exactly how its data-bound properties (like a dynamic health value or an inventory array) are updating in real-time. *(Don't worry, we will deep-dive into how to use this panel effectively in Phase 4: Logic & Interactions).*
+
+## Wrapping Up Phase 1
+
+Congratulations! You now understand the fundamental Gameface workflow. You know how to load an HTML file into the Player, test live data-binding, and open the DevTools to debug your code—all without touching a single line of C++.
+
+You are now ready to build a real project.
+
+**Next up:** Proceed to [Phase 2: Planning & Setup](/phase-2-planning-and-setup/development-environment-and-tools). We will walk through configuring VS Code, installing Gameface-specific linters, and establishing our recommended modern tech stack (Vite + SolidJS).

src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/_meta.yml

@@ -0,0 +1,2 @@
+order: 3
+collapsed: true

src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/preact-setup.mdx

@@ -0,0 +1,13 @@
+---
+title: Setting up a Preact Project
+description: Learn how to scaffold a modern Vite + Preact project and configure it to run perfectly within Gameface.
+sidebar:
+    order: 2
+draft: true
+---
+
+- Degit or install with CLI the vite react gameface template
+
+- Go over the structure and how to run and build the project
+
+- Cover some important caveats about the framework in Gameface

src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/react-setup.mdx

@@ -0,0 +1,14 @@
+---
+title: Setting up a React Project
+description: Learn how to scaffold a modern Vite + React project and configure it to run perfectly within Gameface.
+sidebar:
+    order: 1
+draft: true
+---
+
+- Degit or install with CLI the vite react gameface template
+
+- Go over the structure and how to run and build the project
+
+- Cover some important caveats about the framework in Gameface
+

src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/svelte-setup.mdx

@@ -0,0 +1,13 @@
+---
+title: Setting up a Svelte5 Project
+description: Learn how to scaffold a modern Vite + Svelte5 project and configure it to run perfectly within Gameface.
+sidebar:
+    order: 3
+draft: true
+---
+
+- Degit or install with CLI the vite react gameface template
+
+- Go over the structure and how to run and build the project
+
+- Cover some important caveats about the framework in Gameface