@powerhousedao/academy 2.5.0-dev.30 → 2.5.0-dev.32

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 2.5.0-dev.32 (2025-06-18)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 2.5.0-dev.31 (2025-06-18)
+
+### 🚀 Features
+
+- **connect,builder-tools,ph-cli:** added support for path argument on ph connect build and preview ([fe049aae8](https://github.com/powerhouse-inc/powerhouse/commit/fe049aae8))
+- **reactor:** initial event-bus implementation with tests and benchmarks ([ef5b3c42e](https://github.com/powerhouse-inc/powerhouse/commit/ef5b3c42e))
+
+### 🩹 Fixes
+
+- **ph-cli:** install and uninstall packages with and without version tag ([c2a4ad13f](https://github.com/powerhouse-inc/powerhouse/commit/c2a4ad13f))
+
+### ❤️ Thank You
+
+- acaldas
+- Benjamin Jordan (@thegoldenmule)
+- Frank
+
 ## 2.5.0-dev.30 (2025-06-17)
 
 ### 🩹 Fixes

package/docs/academy/01-GetStarted/01-CreateNewPowerhouseProject.md

@@ -11,7 +11,7 @@ For this purpose, you'll be using Connect, our use-centric collaboration tool, l
 - Visual Studio Code (or your preferred IDE)
 - Terminal/Command Prompt access
 
-If you need help with installing the prerequisites you can visit our page prerequisites. @callme-t
+If you need help with installing the prerequisites you can visit our page [prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites)
 
 ## Quick Start
 Create a new Powerhouse project with a single command:

package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/01-Prerequisites.md

@@ -7,24 +7,6 @@ If you've already set up **Git, Node, and pnpm**, your most important step is to
 :::
 ___
 
-## Table of Contents
-- [Prerequisites](#prerequisites)
-- [Installing node.js 22](#installing-nodejs)
-  - [For Windows](#for-windows)
-  - [For macOS](#for-macos)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian)
-- [Installing Visual Studio Code](#installing-visual-studio-code)
-  - [For Windows](#for-windows-1)
-  - [For macOS](#for-macos-1)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian-1)
-- [Install Git](#install-git)
-  - [For Windows](#for-windows-2)
-  - [For macOS](#for-macos-2)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian-2)
-- [Configure Git](#configure-git-all-systems)
-- [Install Powerhouse CLI](#install-powerhouse-cli)
-- [Verify Installation](#verify-installation)
-
 ## Overview
 
 Before we begin building our Document Model, we need to install some software on your machine. We'll need three main tools: 

package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/02-StandardDocumentModelWorkflow.md

@@ -29,8 +29,8 @@ Ensure you have the Powerhouse Command Line Interface (`ph-cmd`) installed. This
 ```bash
 pnpm install -g ph-cmd
 ```
-:::info
-Refer to the [Prerequisites](/academy/MasteryTrack/BuilderEnvironment/StandardDocumentModelWorkflow) guide for detailed installation instructions for Node.js, pnpm, and Git if you haven't set them up yet.
+:::info **Prerequisites**
+The [Prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites) guide for detailed installation instructions for Node.js, pnpm, and Git if you haven't set them up yet.
 :::
 
 ### 1.2. Initialize Your Project Environment
@@ -129,7 +129,7 @@ ph generate --editor YourModelName --document-types powerhouse/YourModelName
 This creates a template file, typically at `editors/your-model-name/editor.tsx`.
 -   Customize this React component to build your UI.
 -   You can use standard HTML, Tailwind CSS (available in Connect), or import custom CSS.
--   Utilize components from `@powerhousedao/document-engineering` for consistency and rapid development. @Callmet Reference back to document engineering
+-   Utilize components from `@powerhousedao/document-engineering` for consistency and rapid development. Learn more at [Document-Engineering](/academy/ComponentLibrary/DocumentEngineering)
 
 
 ### 3.5. Test the Editor

package/docs/academy/03-ExampleUsecases/Chatroom/02-CreateNewPowerhouseProject.md

@@ -1,20 +1,21 @@
 # Create New Powerhouse Project
 
-## Create New Powerhouse Document Model Library Project
+:::tip  **Prerequisites**
+- Powerhouse CLI installed: `pnpm install -g ph-cmd`
+- node.js 22 and pnpm installed
+- Visual Studio Code (or your preferred IDE)
+- Terminal/Command Prompt access
+
+If you need help with installing the prerequisites you can visit our page [prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites)
+:::
 
 To create a new Powerhouse Document Model Library project, you can use the `ph init` command in your terminal. This command will create a new project in the current directory.
+This command will create a new project in the current directory. You can run the command in the terminal window of your OS or you open the newly installed VSCode and run the command in the terminal window of VSCode.Make sure the terminal reflects the directory where you want to create the new project.
 
-:::info
-This command will create a new project in the current directory.
-You can run the command in the terminal window of your OS or you open the newly installed VSCode and run the command in the terminal window of VSCode.
-You will need VSCode later in the tutorial once you have generated the document model.
-Make sure the terminal reflects the directory where you want to create the new project.
-To open a directory in a terminal, you use the cd command to change your current directory. The cd command takes an argument, usually the name of the folder you want to move to, so the full command is 
 ```bash
 cd your-directory
 ```
 This essentially opens that folder and places you in it.
-:::
 
 Once you've navigated to the directory where you want to create the new project and in your terminal, run the following command:
 
@@ -22,7 +23,7 @@ Once you've navigated to the directory where you want to create the new project
 ph init
 ```
 
-In the terminal, you will be asked to enter the project name. Fill in the project name and press enter. Make sure to use the name `ChatRoom` as the project name with capital letter R so all of our tutorial code works.
+In the terminal, you will be asked to enter the project name. Fill in the project name and press enter. Make sure to pay attention to the capitalization of our name `ChatRoom` as it will influence your code generation. 
 
 ```bash
 you@yourmachine:~/Powerhouse$ ph init

package/docs/academy/03-ExampleUsecases/Chatroom/03-DefineChatroomDocumentModel.md

@@ -9,9 +9,8 @@ Before you start, make sure you have the Connect application running.
 
 We use GraphQL Schema Definition Language (SDL) to define the document model schema. Below, you can see the SDL for the `ChatRoom` document model.
 
-:::info
-This schema contains the data structure of the document model and the basic operations that can be performed on the document model.
-Document models in Powerhouse leverage event sourcing principles, where every state transition is represented by an operation. GraphQL input types describe operations, ensuring that user intents are captured effectively. These operations detail the parameters needed for state transitions The use of GraphQL aligns these transitions with explicit, validated, and reproducible commands, supporting CQRS (Command Query Responsibility Segregation) patterns.
+:::info **The State Schema**
+This schema contains the data structure of the document model and the basic operations that can be performed on the document model. For more in depth information please visit [State Schema](/academy/MasteryTrack/DocumentModelCreation/SpecifyTheStateSchema)
 :::
 
 ## State Schema (See next steps)
@@ -101,7 +100,7 @@ The steps below show you how to do this:
 1. In the Connect application, click on the `ChatRoom` document model you've created in the previous step, to open the document model editor.
 2. You'll be welcomed with a form to fill, this is metadata about the document model, fill in the details in the fields. 
 
-    In the `Document Type` field, type `powerhouse/chatroom`. This defines the new type of document that will be created with this document model.
+    In the `Document Type` field, type `powerhouse/chat-room`. This defines the new type of document that will be created with this document model.
     
     ![Chatroom Document Model Form Metadata](image-2.png)
 

package/docs/academy/03-ExampleUsecases/Chatroom/05-ImplementChatroomEditor.md

@@ -191,4 +191,4 @@ Below GIF shows the `Chatroom` editor in action.
 
 ![Chatroom Editor](./images/ChatRoomTest.gif)
 
-If you managed to follow this tutorial until this point, you have successfully implemented the `ChatRoom` document model with its reducer operations and editor. In the next chapter we'll be showing you how to simulate a synchronisation between two nodes or users making use of the chatroom by starting up a local reactor.
+If you managed to follow this tutorial until this point, you have successfully implemented the `ChatRoom` document model with its reducer operations and editor. 

package/docs/academy/03-ExampleUsecases/Chatroom/_category_.json

@@ -3,6 +3,6 @@
   "position": 2,
   "link": {
     "type": "generated-index",
-    "description": "Get started with the Chatroom tutorial! Jump into creating a new Powerhouse project if you have NodeJs, VSCode, and Git installed. Whe are going to create a new document model that represents a chat.  So you as a user can post messages into that chat room, react to the messages. This chatroom will be synchronized between different connect instances. Let's explore the potential of the tools available in the powerhouse toolkit"
+    "description": "Get started with the Chatroom tutoria: Jump into creating a new Powerhouse project if you have NodeJs, VSCode, and Git installed. Whe are going to create a new document model that represents a chat.  So you as a user can post messages into that chat room, react to the messages. This chatroom will be synchronized between different connect instances. Let's explore the potential of the tools available in the powerhouse toolkit"
   }
 }

package/docs/academy/04-APIReferences/00-PowerhouseCLI.md

@@ -14,10 +14,7 @@ pnpm install -g ph-cmd
 ``` 
  :::
 
-<!-- AUTO-GENERATED-CLI-COMMANDS-START -->
-
-## ph-cmd Commands
-- [Init](#init)
+<!-- AUTO-GENERATED-CLI-COMMANDS-START -->\n<!-- This content is automatically generated. Do not edit directly. -->\n### ph-cmd Commands\n\n- [Init](#init)
 - [Setup Globals](#setup-globals)
 - [Update](#update)
 - [Use](#use)
@@ -210,7 +207,7 @@ Examples:
 
 ---
 
-- [Connect Build](#connect-build)
+*This document was automatically generated from the help text in the codebase.*\n\n### ph-cli Commands\n\n- [Connect Build](#connect-build)
 - [Connect Preview](#connect-preview)
 - [Connect Studio](#connect-studio)
 - [Dev](#dev)
@@ -231,6 +228,7 @@ Command Overview:
   The Connect build command creates a connect build with the project's local and external packages included.
 
 Options:
+  --base <path> The base path for the app. Default is "/".
   --project-root <path>  The root directory of the project. Default is "process.cwd()".
   --assets-dir-name <name> The name of the assets directory. Default is "${DEFAULT_ASSETS_DIR_NAME}".
   --external-packages-file-name <name> The name of the external packages file. Default is "${DEFAULT_EXTERNAL_PACKAGES_FILE_NAME}".
@@ -246,6 +244,7 @@ Command Overview:
   NOTE: You must run \`ph connect build\` first.
 
 Options:
+  --base <path>          The base path for the app. Default is "/".
   --project-root <path>  The root directory of the project. Default is "process.cwd()".
   --port <port>          The port to run the server on. Default is 4173.
   --open                 Open the browser. Default is true.
@@ -573,13 +572,11 @@ Arguments:
                         - all: Act on all services (default)
 
 Examples:
-  $ ph service                               # List all services (same as 'ph service list all')
-  $ ph service start switchboard             # Start the Switchboard service
-  $ ph service stop connect                  # Stop the Connect service
-  $ ph service start all                     # Start all services
+  $ ph service setup                              # Setup services
+  $ ph service start              # Start the services
+  $ ph service stop                   # Stop the services
   $ ph service status                        # Check status of all services
-  $ ph service startup                       # Configure services to start on system boot
-  $ ph service unstartup                     # Remove services from system startup
+  
 
 Notes:
   - Services are managed using PM2, a process manager for Node.js applications
@@ -704,4 +701,4 @@ Notes:
 
 ---
 
-*This document was automatically generated from the help text in the codebase.* <!-- AUTO-GENERATED-CLI-COMMANDS-END -->
+*This document was automatically generated from the help text in the codebase.*\n<!-- AUTO-GENERATED-CLI-COMMANDS-END -->

package/docs/academy/06-ComponentLibrary/00-DocumentEngineering.md

@@ -56,9 +56,7 @@ While Storybook aims for accuracy, there might occasionally be discrepancies or
 
 ## Implementing a Component
 
-@callme-t
-
-Let's walk through the typical workflow for using a component from the document-engineering system, using the `Checkbox` from the [To-do List editor](/academy/GetStarted/BuildToDoListEditor).
+Let's walk through the typical workflow for using a component from the document-engineering system, using the `Checkbox` from the [To-do List editor](/academy/MasteryTrack/BuildingUserExperiences/BuildingDocumentEditors).
 
 1.  **Identify the Need:** While building your feature (e.g., the To-do List editor in `editor.tsx`), you determine the need for a standard UI element, like a checkbox.
 2.  **Consult the Document Engineering Components in Storybook:**

package/docs/academy/06-ComponentLibrary/02-CreateCustomScalars.md

@@ -3,33 +3,11 @@
 This tutorial provides step-by-step instructions for creating custom scalars & components, and to contributing to the document-engineering project.
 The github repo for the Document-Engineering can be found [here](https://github.com/powerhouse-inc/document-engineering/tree/main)
 
-## Table of Contents
-
-- [Creating New GraphQL Scalars](#creating-new-graphql-scalars)
-  - [Step 1: Create the Scalar File](#step-1-create-the-scalar-file)
-    - [Key Components to Update](#key-components-to-update)
-  - [Step 2: Register the Scalar in scalars.ts](#step-2-register-the-scalar-in-scalarts)
-    - [2.1 Add Namespace Import](#21-add-namespace-import)
-    - [2.2 Add Type Export](#22-add-type-export)
-    - [2.3 Add to Export Object](#23-add-to-export-object)
-    - [2.4 Add to Custom Scalars](#24-add-to-custom-scalars)
-    - [2.5 Add to Resolvers](#25-add-to-resolvers)
-    - [2.6 Add to Type Definitions](#26-add-to-type-definitions)
-    - [2.7 Add to Generator Type Definitions](#27-add-to-generator-type-definitions)
-    - [2.8 Add to Validation Schema](#28-add-to-validation-schema)
-  - [Step 3: Create Tests for Your Scalar](#step-3-create-tests-for-your-scalar)
-    - [Required Test Cases](#required-test-cases)
-    - [Testing Best Practices](#testing-best-practices)
-    - [Example Edge Cases for Different Scalar Types](#example-edge-cases-for-different-scalar-types)
-  - [Step 4: Validate Your Implementation](#step-4-validate-your-implementation)
-  - [Common Scalar Types](#common-scalar-types)
-  - [Tips](#tips)
-
-## Creating New GraphQL Scalars
+### Creating New GraphQL Scalars
 
 GraphQL scalars are custom data types that define how data is validated, serialized, and parsed. This guide will walk you through creating a new scalar in the `src/scalars/graphql/` directory.
 
-### Step 1: Create the Scalar File
+## Step 1: Create the Scalar File
 
 Create a new TypeScript file in `src/scalars/graphql/` for your scalar. Use `EmailAddress.ts` as a reference.
 
@@ -80,7 +58,7 @@ export const config: GraphQLScalarTypeConfig<string, string> = {
 export const scalar = new GraphQLScalarType(config)
 ```
 
-#### Key Components to Update:
+### Key Components to Update:
 
 1. **`type`**: The TypeScript type (usually `'string'` for text-based scalars)
 2. **`typedef`**: The GraphQL type definition (e.g., `'scalar PhoneNumber'`)
@@ -90,12 +68,12 @@ export const scalar = new GraphQLScalarType(config)
 6. **`config.name`**: The name of your scalar (must match the typedef)
 7. **`config.description`**: Human-readable description of the scalar
 
-### Step 2: Register the Scalar in `scalars.ts`
+## Step 2: Register the Scalar in `scalars.ts`
 
 After creating your scalar file, you need to register it in `src/scalars/graphql/scalars.ts`. This involves updating multiple sections of the file.
 The github repo for the Document-Engineering can be found [here](https://github.com/powerhouse-inc/document-engineering/tree/main)
 
-#### 2.1 Add Namespace Import
+### 2.1 Add Namespace Import
 
 Add your scalar to the namespace imports section (around line 2):
 
@@ -108,7 +86,7 @@ import * as PhoneNumber from './PhoneNumber.js' // ADD THIS LINE
 import * as URLScalar from './URL.js'
 ```
 
-#### 2.2 Add Type Export
+### 2.2 Add Type Export
 
 Add the type export (around line 22):
 
@@ -120,7 +98,7 @@ export type { ScalarType as PhoneNumberScalarType } from './PhoneNumber.js' // A
 export type { ScalarType as URLScalarType } from './URL.js'
 ```
 
-#### 2.3 Add to Export Object
+### 2.3 Add to Export Object
 
 Add your scalar to the main export object (around line 40):
 
@@ -134,7 +112,7 @@ export {
 }
 ```
 
-#### 2.4 Add to Custom Scalars
+### 2.4 Add to Custom Scalars
 
 Add your scalar to the `customScalars` object (around line 54):
 
@@ -160,7 +138,7 @@ export const resolvers = {
 }
 ```
 
-#### 2.6 Add to Type Definitions
+### 2.6 Add to Type Definitions
 
 Add your typedef to the `typeDefs` array (around line 90):
 
@@ -174,7 +152,7 @@ export const typeDefs = [
 ]
 ```
 
-#### 2.7 Add to Generator Type Definitions
+### 2.7 Add to Generator Type Definitions
 
 Add your scalar to the `generatorTypeDefs` object (around line 105):
 
@@ -188,7 +166,7 @@ export const generatorTypeDefs = {
 }
 ```
 
-#### 2.8 Add to Validation Schema
+### 2.8 Add to Validation Schema
 
 Add your scalar to the `validationSchema` object (around line 120):
 
@@ -202,7 +180,7 @@ export const validationSchema = {
 }
 ```
 
-### Step 3: Create Tests for Your Scalar
+## Step 3: Create Tests for Your Scalar
 
 Every scalar must have comprehensive tests to ensure it works correctly. Create a test file in `src/scalars/graphql/test/` following the naming convention `YourScalar.test.ts`.
 
@@ -352,7 +330,7 @@ expect(scalar.parseValue('2023-12-25T00:00:00Z')).toBe('2023-12-25T00:00:00Z')
 expect(() => scalar.parseValue('25/12/2023')).toThrow()
 ```
 
-### Step 4: Validate Your Implementation
+## Step 4: Validate Your Implementation
 
 After implementing your scalar and tests, make sure to:
 

package/docs/academy/07-Cookbook.md

@@ -1132,6 +1132,49 @@ Understanding the different GraphQL endpoints in Powerhouse is crucial for effec
     
 </details>
 
+<details id="resetting-your-localhost-environment">
+<summary>Resetting Your Localhost Environment</summary>
+
+## How to Reset Your Localhost Environment
+---
+
+## Problem Statement
+You are running Powerhouse Connect locally (via `ph connect`), but you can't find your local drive in the interface. Alternatively, you can see the drive or have recreated it, but the `DocumentModel` button is missing, preventing you from creating new document model schemas.
+
+## Prerequisites
+- Powerhouse Connect is running locally.
+- The Powerhouse Connect interface is open in your browser.
+
+## Solution
+This issue is often caused by corrupted or inconsistent data stored in your browser's local storage for the Connect application. Clearing this storage forces a re-initialization of your local environment.
+
+### Step 1: Open Settings
+In the bottom-left corner of the Powerhouse Connect UI, click on the "Settings" menu.
+
+### Step 2: Find the Danger Zone
+In the settings panel that appears, scroll or navigate to the "Danger Zone" section.
+
+### Step 3: Clear Local Storage
+Click the "Clear storage" button. A confirmation prompt may appear. Confirming this action will wipe all application data stored in your browser for your local environment, including the state of your local drive.
+
+### Step 4: Verify the Reset
+The application should automatically refresh and re-initialize its state. If it doesn't, manually reload the page. Your local drive should now be present with the `DocumentModel` button restored.
+
+## Expected Outcome
+- Your local drive is visible again in the Powerhouse Connect UI.
+- The `DocumentModel` button is available inside the local drive.
+- You can proceed to create and edit document models in your local environment.
+
+## Common Issues and Solutions
+- **Issue**: The problem persists after clearing storage.
+  - **Solution**: Try clearing your browser's cache and cookies for the localhost domain. As a last resort, follow the recipe for [Clearing Package Manager Caches](#clearing-package-manager-caches) and reinstalling dependencies.
+
+## Related Recipes
+- [Troubleshooting Document Syncing](#troubleshooting-document-syncing)
+- [Initializing a New Project & Document Model](#initializing-a-new-project-and-document-model)
+
+</details>
+
 <details id="clearing-package-manager-caches">
 <summary>Clearing Package Manager Caches</summary>
 

package/docusaurus.config.ts

@@ -157,6 +157,10 @@ const config: Config = {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
+    tableOfContents: {
+      minHeadingLevel: 2,
+      maxHeadingLevel: 5,
+    },
   } satisfies Preset.ThemeConfig,
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/academy",
-  "version": "2.5.0-dev.30",
+  "version": "2.5.0-dev.32",
   "homepage": "https://powerhouse.academy",
   "repository": {
     "type": "git",

package/src/css/custom.css

@@ -15,6 +15,8 @@
   --ifm-color-primary-lightest: #1A1A1B;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --toc-color: #555; /* Muted black for inactive items */
+  --toc-color-active: #1A1A1B; /* Black for active items */
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -27,6 +29,8 @@
   --ifm-color-primary-lighter: #ffffff;
   --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --toc-color: #ccc; /* Light grey for inactive items */
+  --toc-color-active: #ffffff; /* White for active items */
 }
 
 @font-face {
@@ -155,7 +159,6 @@ a {
 
 /* Reset styling for navigation elements, category pages, and utility links */
 .breadcrumbs a,
-.table-of-contents a,
 .pagination-nav a,
 .navbar a,
 .theme-doc-sidebar-container a,
@@ -464,3 +467,22 @@ html[data-theme='dark'] .DocSearch-Hits > *:empty {
 .doc-card-list .card h2 svg {
   display: none !important;
 }
+
+/* Table of Contents Styling */
+.theme-doc-toc-desktop .table-of-contents__link {
+  color: var(--toc-color);
+  text-decoration: none;
+  font-weight: 400;
+  transition: color 0.2s ease;
+}
+
+.theme-doc-toc-desktop .table-of-contents__link:hover {
+  color: var(--toc-color-active);
+  text-decoration: none;
+}
+
+.theme-doc-toc-desktop .table-of-contents__link--active {
+  color: var(--toc-color-active);
+  font-weight: bold;
+  text-decoration: none;
+}

package/docs/academy/03-ExampleUsecases/Chatroom/01-SetupBuilderEnvironment.md

@@ -1,216 +0,0 @@
-
-# Setup Builder Environment
-
-Let's set up your computer to start building your first Document Model. Don't worry if this is your first time setting up a development environment - we'll guide you through each step!
-
-:::warning
-If you've already setup git, node, and npm, your most important step is to install the Powerhouse CLI with the command `npm install ph-cmd`. A global install is recommended if you want to use the command from any directory as a power user. The Powerhouse CLI is used to create, build, and run your Document Models and give you direct access to a series of Powerhouse ecosystem tools.
-:::
-
-## Table of Contents
-- [Prerequisites](#prerequisites)
-- [Installing node.js 22](#installing-nodejs)
-  - [For Windows](#for-windows)
-  - [For macOS](#for-macos)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian)
-- [Installing Visual Studio Code](#installing-visual-studio-code)
-  - [For Windows](#for-windows-1)
-  - [For macOS](#for-macos-1)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian-1)
-- [Install Git](#install-git)
-  - [For Windows](#for-windows-2)
-  - [For macOS](#for-macos-2)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian-2)
-- [Configure Git](#configure-git-all-systems)
-- [Verify Installation](#verify-installation)
-
-## Prerequisites
-
-Before we begin building our Document Model, we need to install some software on your computer. We'll need three main tools: node.js 22, which helps us run our code, Visual Studio Code (VS Code), which is where we'll write our code, and Git, which helps us manage our code. Follow the steps below based on your computer's operating system.
-
-### Installing node.js 22
-
-node.js 22 is a tool that lets us run our application. Let's install it step by step.
-
-#### For Windows:
-1. **Set up PowerShell for running commands:**
-   - Press the Windows key
-   - Type "PowerShell"
-   - Right-click on "Windows PowerShell" and select "Run as administrator"
-   - In the PowerShell window, type this command and press Enter:
-   ```powershell
-   Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
-   ```
-   - Type 'A' when prompted to confirm
-   - You can now close this window and open PowerShell normally for the remaining steps
-
-2. **Install node.js 22:**
-   - Visit the [node.js 22 official website](https://nodejs.org/)
-   - Click the big green button that says "LTS" (this means Long Term Support - it's the most stable version)
-   - Once the installer downloads, double-click it to start installation
-   - Click "Next" through the installation wizard, leaving all settings at their defaults
-
-3. **Verify Installation:**
-   - Open PowerShell (no need for admin mode)
-   - Type these commands one at a time and press Enter after each:
-   ```powershell
-   node --version
-   pnpm --version
-   ```
-   - You should see version numbers appear after each command (e.g., v18.17.0). If you do, congratulations - node.js 22 is installed!
-
-> **Note**: If node.js 22 commands don't work in VS Code, restart VS Code to refresh environment variables.
-
-#### For macOS:
-1. **Install Homebrew:**
-   - Open Terminal (press Command + Space and type "Terminal")
-   - Copy and paste this command into Terminal and press Enter:
-   ```bash
-   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-   ```
-   - Follow any additional instructions that appear
-
-2. **Install node.js 22:**
-   - In the same Terminal window, type this command and press Enter:
-   ```bash
-   brew install node
-   ```
-
-3. **Verify Installation:**
-   - In Terminal, type these commands one at a time and press Enter after each:
-   ```bash
-   node --version
-   pnpm --version
-   ```
-   - If you see version numbers, you've successfully installed node.js 22!
-
-#### For Linux (Ubuntu/Debian):
-1. **Open Terminal:**
-   - Press Ctrl + Alt + T on your keyboard, or
-   - Click the Activities button and type "Terminal"
-
-2. **Update Package List:**
-   ```bash
-   sudo apt update
-   ```
-
-3. **Install node.js 22 and npm:**
-   ```bash
-   sudo apt install nodejs npm
-   ```
-
-4. **Verify Installation:**
-   - Type these commands one at a time and press Enter after each:
-   ```bash
-   node --version
-   pnpm --version
-   ```
-   - If you see version numbers, you're all set!
-
-### Installing Visual Studio Code
-
-VS Code is the editor we'll use to write our code. Here's how to install it:
-
-#### For Windows:
-1. Visit the [Visual Studio Code website](https://code.visualstudio.com/)
-2. Click the blue "Download for Windows" button
-3. Once the installer downloads, double-click it
-4. Accept the license agreement and click "Next"
-5. Leave the default installation location and click "Next"
-6. In the Select Additional Tasks window, make sure "Add to PATH" is checked
-7. Click "Next" and then "Install"
-8. When installation is complete, click "Finish"
-
-#### For macOS:
-1. Visit the [Visual Studio Code website](https://code.visualstudio.com/)
-2. Click the blue "Download for Mac" button
-3. Once the .zip file downloads, double-click it to extract
-4. Drag Visual Studio Code.app to the Applications folder
-5. Double-click the app to launch it
-6. To make VS Code available in your terminal:
-   - Open VS Code
-   - Press Command + Shift + P
-   - Type "shell command" and select "Install 'code' command in PATH"
-
-#### For Linux (Ubuntu/Debian):
-1. Open Terminal (Ctrl + Alt + T)
-2. First, update the packages list:
-   ```bash
-   sudo apt update
-   ```
-3. Install the dependencies needed to add Microsoft's repository:
-   ```bash
-   sudo apt install software-properties-common apt-transport-https wget
-   ```
-4. Import Microsoft's GPG key:
-   ```bash
-   wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
-   ```
-5. Add the VS Code repository:
-   ```bash
-   sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
-   ```
-6. Install VS Code:
-   ```bash
-   sudo apt install code
-   ```
-7. Once installed, you can launch VS Code by:
-   - Typing `code` in the terminal, or
-   - Finding it in your Applications menu
-
-### Install Git
-
-#### Windows
-1. Open PowerShell (press Windows key, type "PowerShell", and press Enter)
-2. Visit the [Git website](https://git-scm.com/)
-3. Download the latest version for Windows
-4. Run the installer and use the recommended settings
-5. Verify installation by opening PowerShell:
-   ```powershell
-   git --version
-   ```
-
-#### macOS
-1. Install using Homebrew:
-   ```bash
-   brew install git
-   ```
-2. Verify installation:
-   ```bash
-   git --version
-   ```
-
-#### Linux (Ubuntu/Debian)
-1. Update package list:
-   ```bash
-   sudo apt update
-   ```
-2. Install Git:
-   ```bash
-   sudo apt install git
-   ```
-3. Verify installation:
-   ```bash
-   git --version
-   ```
-
-### Configure Git (All Systems)
-
-Open your terminal (command prompt) and run the following commands to set up Git:
-
-After installation, set up your identity:
-```bash
-git config --global user.name "Your Name"
-git config --global user.email "your.email@example.com"
-```
-
-### Verify Installation
-
-Open your terminal (command prompt) and run the following commands to verify your setup:
-```bash
-node --version
-pnpm --version
-git --version
-```
-
-You should see version numbers displayed for all commands. You're now ready to start building your Document Model!