@powerhousedao/academy 4.1.0-dev.121 → 4.1.0-dev.122

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 4.1.0-dev.122 (2025-11-18)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
 ## 4.1.0-dev.121 (2025-11-17)
 
 This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.

package/docs/academy/01-GetStarted/00-ExploreDemoPackage.mdx

@@ -17,7 +17,7 @@ pnpm install -g ph-cmd
 Verify the installation:
 
 ```bash
-ph-cmd --version
+ph --version
 ```
 
 ## Step 2: Install the to-do list demo package

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

@@ -3,7 +3,7 @@
 Let's set up your machine 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!
 
 :::info
-If you've already set up **Git, Node, and pnpm**, your most important step is to install the **Powerhouse CLI** with the command: `pnpm install ph-cmd`. A global install is recommended if you want to use the command from any directory as a power user. In this case use `pnpm install -g ph-cmd`. The Powerhouse CLI is used to create, build, and run your Document Models and gives you direct access to a series of Powerhouse Builder Tools. Move to the end of this page to [verify your installation.](#verify-installation)
+If you've already set up **Git, Node.js 22, and a package manager (pnpm or npm)**, your most important step is to install the **Powerhouse CLI** with the command: `pnpm install -g ph-cmd` or `npm install -g 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 gives you direct access to a series of Powerhouse Builder Tools. Move to the end of this page to [verify your installation.](#verify-installation)
 :::
 
 ---
@@ -43,13 +43,15 @@ node.js 22 is a tool that lets us run our application. Let's install it step by
    - Once the installer downloads, double-click it to start installation
    - Click "Next" through the installation wizard, leaving all settings at their defaults
 
-3. **Install pnpm:**
+3. **Install a package manager (pnpm or npm):**
    - Open PowerShell (no need for admin mode)
-   - Type this command and press Enter:
+   - For pnpm (recommended), type this command and press Enter:
 
    ```powershell
    npm install -g pnpm
    ```
+   
+   - Note: Node.js comes with npm by default, so npm is already available after installing Node.js
 
 4. **Verify Installation:**
    - Open PowerShell (no need for admin mode)
@@ -57,9 +59,11 @@ node.js 22 is a tool that lets us run our application. Let's install it step by
    ```powershell
    node --version
    pnpm --version
+   # or
+   npm --version
    ```
 
-   - You should see version numbers appear after each command (e.g., v18.17.0). If you do, congratulations - Node.js and pnpm are installed!
+   - You should see version numbers appear after each command (e.g., v22.x.x for Node.js). If you do, congratulations - Node.js and your package manager are installed!
 
 > **Note**: If node.js 22 commands don't work in VS Code, restart VS Code to refresh environment variables.
 
@@ -82,7 +86,7 @@ node.js 22 is a tool that lets us run our application. Let's install it step by
    brew install node@22
    ```
 
-   - Then, install pnpm:
+   - Then, optionally install pnpm (npm comes with Node.js):
 
    ```bash
    brew install pnpm
@@ -93,9 +97,11 @@ node.js 22 is a tool that lets us run our application. Let's install it step by
    ```bash
    node --version
    pnpm --version
+   # or
+   npm --version
    ```
 
-   - If you see version numbers, you've successfully installed Node.js and pnpm!
+   - If you see version numbers, you've successfully installed Node.js and your package manager!
 
 #### For Linux (Ubuntu/Debian):
 
@@ -109,10 +115,12 @@ node.js 22 is a tool that lets us run our application. Let's install it step by
    sudo apt update
    ```
 
-3. **Install node.js 22 and pnpm:**
+3. **Install node.js 22 and optionally pnpm:**
 
    ```bash
-   sudo apt install nodejs pnpm
+   sudo apt install nodejs
+   # Optionally install pnpm (npm comes with Node.js)
+   sudo apt install pnpm
    ```
 
 4. **Verify Installation:**
@@ -120,6 +128,8 @@ node.js 22 is a tool that lets us run our application. Let's install it step by
    ```bash
    node --version
    pnpm --version
+   # or
+   npm --version
    ```
 
    - If you see version numbers, you're all set!
@@ -234,6 +244,12 @@ The Powerhouse CLI (installed via the `ph-cmd` package) is a command-line interf
 pnpm install -g ph-cmd
 ```
 
+Or if you're using npm:
+
+```bash
+npm install -g ph-cmd
+```
+
 Key commands include:
 
 - `ph connect` for running the Connect application locally

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

@@ -10,13 +10,13 @@ Please start with the '**Get Started**' Chapter or '**Document Model Creation**'
 <details>
 <summary>Key commands that you'll use in this flow</summary>
 
-- `pnpm install -g ph-cmd`: Installs the Powerhouse CLI globally.
+- `pnpm install -g ph-cmd` or `npm install -g ph-cmd`: Installs the Powerhouse CLI globally.
 - `ph init`: Initializes a new Powerhouse project or sets up the local environment.
 - `ph connect`: Runs Connect in Studio Mode for local development and testing.
 - `ph generate <YourModelName.phdm.zip>`: Generates scaffolding code from an exported document model specification.
 - `ph generate --editor YourModelName --document-types powerhouse/YourModelName`: Generates an editor template for a document model.
-- `pnpm build`: Builds the project for production.
-- `pnpm run test`: Runs unit tests.
+- `pnpm build` or `npm run build`: Builds the project for production.
+- `pnpm run test` or `npm test`: Runs unit tests.
 - `npm login`: Logs into your NPM account.
 - `npm publish`: Publishes your package to NPM.
 - `ph install @your-org-ph/your-package-name`: Installs a published package into a local Powerhouse environment.
@@ -33,8 +33,14 @@ Ensure you have the Powerhouse Command Line Interface (`ph-cmd`) installed. This
 pnpm install -g ph-cmd
 ```
 
+Or if you're using npm:
+
+```bash
+npm install -g ph-cmd
+```
+
 :::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.
+See the [Prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites) guide for detailed installation instructions for Node.js 22, package managers (pnpm or npm), and Git if you haven't set them up yet.
 :::
 
 ### 1.2. Initialize your project environment
@@ -54,9 +60,9 @@ When installing or using the Powerhouse CLI commands you are able to make use of
 
 | Command                            | Description                                           |
 | ---------------------------------- | ----------------------------------------------------- |
-| **pnpm install -g ph-cmd**         | Install latest stable version                         |
-| **pnpm install -g ph-cmd@dev**     | Install development version                           |
-| **pnpm install -g ph-cmd@staging** | Install staging version                               |
+| **pnpm install -g ph-cmd** or **npm install -g ph-cmd**         | Install latest stable version                         |
+| **pnpm install -g ph-cmd@dev** or **npm install -g ph-cmd@dev**     | Install development version                           |
+| **pnpm install -g ph-cmd@staging** or **npm install -g ph-cmd@staging** | Install staging version                               |
 | **ph init**                        | Use latest stable version of the boilerplate          |
 | **ph init --dev**                  | Use development version of the boilerplate            |
 | **ph init --staging**              | Use staging version of the boilerplate                |
@@ -143,6 +149,12 @@ It's crucial to test your reducer logic. Write unit tests in the `document-model
 pnpm run test
 ```
 
+Or with npm:
+
+```bash
+npm test
+```
+
 ### 3.4. Implement the document editor
 
 A document editor provides the user interface for interacting with your document model in Connect. Generate an editor template:
@@ -262,6 +274,12 @@ Compile and optimize your project for production:
 pnpm build
 ```
 
+Or with npm:
+
+```bash
+npm run build
+```
+
 This command typically creates a `dist/` or `build/` directory with the compiled assets. Ensure your `package.json`'s `files` array includes this directory and other necessary assets like `manifest.json`, `document-models`, and `editors` if they are not part of the build output but need to be in the package.
 
 ### 4.5. Version control

package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/03-BuilderTools.md

@@ -20,6 +20,12 @@ The Powerhouse CLI (`ph-cmd`) is a command-line interface tool that provides ess
 pnpm install -g ph-cmd
 ```
 
+Or if you're using npm:
+
+```bash
+npm install -g ph-cmd
+```
+
 Key commands include:
 
 - `ph connect` for running the Connect application locally
@@ -36,9 +42,9 @@ When installing or using the Powerhouse CLI commands you are able to make use of
 
 | Command                            | Description                                           |
 | ---------------------------------- | ----------------------------------------------------- |
-| **pnpm install -g ph-cmd**         | Install latest stable version                         |
-| **pnpm install -g ph-cmd@dev**     | Install development version                           |
-| **pnpm install -g ph-cmd@staging** | Install staging version                               |
+| **pnpm install -g ph-cmd** or **npm install -g ph-cmd **         | Install latest stable version                         |
+| **pnpm install -g ph-cmd@dev** or **npm install -g ph-cmd@dev**     | Install development version                           |
+| **pnpm install -g ph-cmd@staging** or **npm install -g ph-cmd@staging** | Install staging version                               |
 | **ph init**                        | Use latest stable version of the boilerplate          |
 | **ph init --dev**                  | Use development version of the boilerplate            |
 | **ph init --staging**              | Use staging version of the boilerplate                |
@@ -62,6 +68,8 @@ If you need to perform a clean reinstallation of the Powerhouse CLI (`ph-cmd`),
 
 ```bash
 pnpm uninstall -g ph-cmd
+# or with npm
+npm uninstall -g ph-cmd
 ```
 
 2. Remove the Powerhouse configuration directory:
@@ -75,12 +83,18 @@ rm -rf ~/.ph
 ```bash
 # For the latest stable version
 pnpm install -g ph-cmd
+# or with npm
+npm install -g ph-cmd 
 
 # For the staging version
 pnpm install -g ph-cmd@staging
+# or with npm
+npm install -g ph-cmd@staging
 
 # For a specific version
 pnpm install -g ph-cmd@<version>
+# or with npm
+npm install -g ph-cmd@<version>
 ```
 
 This process ensures a clean slate by removing both the CLI tool and its configuration files before installing the desired version. It's particularly useful when:

package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/01-WhatIsADocumentModel.md

@@ -1,8 +1,11 @@
 # What is a document model?
 
 :::tip
-This chapter on **Document Model Creation** will help you with an in depth practicial understanding while building an **advanced to-do list** document model.
-Although not required, if you have completed the 'Get Started' tutorial you will revisit familiar topics and can update your existing document model.
+This chapter on **Document Model Creation** will help you with an in-depth practical understanding while building an **advanced to-do list** document model.
+
+If you have completed the [Get Started](/academy/GetStarted/CreateNewPowerhouseProject) tutorial (which includes creating a simple to-do list document model), you will revisit familiar topics and can enhance your existing document model with the advanced features covered in this Mastery Track, such as statistics tracking.
+
+Although not required, completing the Get Started tutorial first is highly recommended as it provides a hands-on foundation for the concepts explored in depth here.
 :::
 
 :::info **Definition: What is a Document Model?**

package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/06-ImplementDocumentModelTests.md

@@ -112,6 +112,12 @@ Now, run the tests from your project's root directory to verify your implementat
 pnpm run test
 ```
 
+Or with npm:
+
+```bash
+npm test
+```
+
 If all tests pass, you have successfully verified the core logic of your `To-do List` document model. This ensures that the reducers you wrote behave exactly as expected.
 
 </details>
@@ -128,7 +134,7 @@ While the tutorial provides a concrete example, keep these general best practice
   - **Assert**: Check if the outcome is as expected using `expect()`.
 - **Test Immutability**: A key assertion is to ensure the state is not mutated directly. You can check that a new array or object was created: `expect(newState.items).not.toBe(oldState.items);`.
 - **Cover Edge Cases**: Test what happens when an operation receives invalid input (e.g., trying to update an item that doesn't exist). Your test should confirm the reducer either throws an error or returns the state unchanged, depending on your implementation.
-- **Run Tests Frequently**: Integrate testing into your development workflow. Run tests after making changes to ensure you haven't broken anything. The `pnpm run test` command is your friend.
+- **Run Tests Frequently**: Integrate testing into your development workflow. Run tests after making changes to ensure you haven't broken anything. The `pnpm run test` (or `npm test`) command is your friend.
 
 ## Conclusion: The payoff of diligent testing
 

package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/07-ExampleToDoListRepository.md

@@ -2,16 +2,16 @@
 
 :::info
 
-The Todo-demo-package is maintained by the Powerhouse Team and serves as a reference for testing and introducing new features. It will be continuously updated alongside the accompanying documentation.
+The Todo-demo is maintained by the Powerhouse Team and serves as a reference for testing and introducing new features. It will be continuously updated alongside the accompanying documentation.
 
-https://github.com/powerhouse-inc/todo-demo-package
+https://github.com/powerhouse-inc/todo-demo
 :::
 
 There are several ways to explore this package:
 
-### Option 1: Rebuild the Todo-demo-package
+### Option 1: Rebuild the Todo-demo
 
-The Todo-demo-package and repository are your main reference points during the Mastery Track.  
+The Todo-demo and repository are your main reference points during the Mastery Track.  
 Follow the steps in the "Mastery Track – Document Model Creation" chapters to build along with the examples.
 
 ### Option 2: Clone and run the code locally
@@ -35,5 +35,5 @@ ph connect
 Alternatively, you can install this package in a Powerhouse project or in your deployed host apps:
 
 ```bash
-ph install @powerhousedao/todo-demo-package
+ph install @powerhousedao/todo-demo
 ```

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

@@ -73,7 +73,10 @@ Watching local document editors at '/home/you/Powerhouse/ChatRoom/editors'...
 
 A new browser window will open and you will see the Connect application. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser.
 
-Create a new document model by clicking on the `DocumentModel` button by the "New Document" section. The Gif below shows you where to click.
+If you don't have a local drive created yet, create one using the Generic Drive Explorer app.
+
+Open your Local Drive and create a new document model by clicking the `DocumentModel` button in the "New Document" section. The GIF below shows where to click.
+
 
 ![Create New Document Model](./images/ChatRoomConnectApp.gif)
 

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

@@ -65,11 +65,17 @@ enum ReactionType {
 
 input AddMessageInput {
   messageId: OID! # ID of the message that is being added
-  sender: Sender! # ID of the user sending the message
+  sender: SenderInput! # ID of the user sending the message
   content: String! # Content of the message
   sentAt: DateTime!
 }
 
+input SenderInput {
+  id: ID! # Unique identifier for the sender
+  name: String
+  avatarUrl: URL # Allows us to pull the ENS and/or nft of the persons profile
+}
+
 input AddEmojiReactionInput {
   messageId: OID! # ID of the message to which the reaction is being added
   reactedBy: ID! # ID of the user adding the reaction
@@ -106,14 +112,14 @@ The steps below show you how to do this:
 
 3. In the code editor, you can see the SDL for the document model. Replace the existing SDL with the SDL defined in the [State Schema](#state-schema) section above. Only copy and paste the types, leaving the inputs for the next step. You can however already press 'Sync with schema' button to set the initial state of your document model based on your Schema Definition Language. Verify that your Global State Initial Value looks like this.
 
-```graphql
+```json
 {
   "id": "",
   "name": "",
-  "description": "",
-  "createdAt": "",
-  "createdBy": "",
-  "messages": ""
+  "description": null,
+  "createdAt": null,
+  "createdBy": null,
+  "messages": []
 }
 ```
 
@@ -123,11 +129,17 @@ The steps below show you how to do this:
 
 ```graphql
 input AddMessageInput {
-  messageId: OID! # ID of the message that is being added
-  sender: Sender! # ID of the user sending the message
-  content: String! # Content of the message
+  messageId: OID!
+  sender: SenderInput!
+  content: String!
   sentAt: DateTime!
 }
+
+input SenderInput {
+  id: ID! # Unique identifier for the sender
+  name: String
+  avatarUrl: URL # Allows us to pull the ENS and/or nft of the persons profile
+}
 ```
 
 7. Repeat step 6 for the other input operations based on the [Operations Schema](#operations-schema). If you noticed, you only need to add the name `(ADD_EMOJI_REACTION, EDIT_CHAT_NAME, etc)` of the operation without the `input` suffix. Then it will be generated once you press enter.

package/docs/academy/03-ExampleUsecases/Chatroom/04-ImplementOperationReducers.md

@@ -22,7 +22,7 @@ To write the opearation reducers of the `ChatRoom` document model, you need to g
 To do this, run the following command in the terminal:
 
 ```bash
-ph generate ChatRoom.phdm.zip
+ph generate ChatRoom.phdm.phd
 ```
 
 You will see that this action created a range of files for you. Before diving in we'll look at this simple schema to make you familiar with the structure you've defined in the document model once more. It shows how each type is connected to the next one.
@@ -47,97 +47,95 @@ Open the `general-operations.ts` file and you should see the code that needs to
  * - delete the file and run the code generator again to have it reset
  */
 
-import { ChatRoomAddMessageOperations } from "../../gen/add-message/operations";
-import { MessageContentCannotBeEmpty } from "../../gen/add-message/error";
-
-export const reducer: ChatRoomAddMessageOperations = {
-  addMessageOperation(state, action, dispatch) {
-    if (action.input.content === "") {
-      throw new MessageContentCannotBeEmpty(); // Your reducer exception is used here as a custom error.
-    }
-
-    state.messages.push({
-      id: action.input.messageId,
-      content: action.input.content,
-      sender: action.input.sender,
-      sentAt: action.input.sentAt,
-      reactions: [],
-    });
-  },
-  addEmojiReactionOperation(state, action, dispatch) {
-    const message = state.messages.find(
-      (message) => message.id === action.input.messageId, // the reducer checks the existence of the message you want to react to.
-    );
+import { MessageContentCannotBeEmpty } from "../../gen/general-operations/error.js";
+import type { ChatRoomGeneralOperationsOperations } from "chatroom/document-models/chat-room";
 
-    if (!message) {
-      throw new Error("Message not found");
-    }
+export const chatRoomGeneralOperationsOperations: ChatRoomGeneralOperationsOperations =
+  {
+    addMessageOperation(state, action) {
+      if (action.input.content === "") {
+        throw new MessageContentCannotBeEmpty();
+      }
 
-    const reactions = message.reactions || [];
+      const newMessage = {
+        id: action.input.messageId,
+        sender: {
+          id: action.input.sender.id,
+          name: action.input.sender.name || null,
+          avatarUrl: action.input.sender.avatarUrl || null,
+        },
+        content: action.input.content,
+        sentAt: action.input.sentAt,
+        reactions: [],
+      };
+
+      state.messages.push(newMessage);
+    },
+    addEmojiReactionOperation(state, action) {
+      const message = state.messages.find(
+        (m) => m.id === action.input.messageId,
+      );
+      if (!message) {
+        return state;
+      }
 
-    const existingReaction = reactions.find(
-      (reaction) => reaction.type === action.input.type,
-    );
+      if (!message.reactions) {
+        message.reactions = [];
+      }
 
-    if (existingReaction) {
-      // if the message reaction exists a new reactedBy gets added.
-      message.reactions = reactions.map((reaction) => {
-        if (reaction.type === action.input.type) {
-          return {
-            ...reaction,
-            reactedBy: [...reaction.reactedBy, action.input.reactedBy],
-          };
-        }
+      const existingReaction = message.reactions.find(
+        (r) => r.type === action.input.type,
+      );
 
-        return reaction;
-      });
-    } else {
-      message.reactions = [
-        ...reactions,
-        {
-          reactedBy: [action.input.reactedBy], // if the message reaction doesn't exist yet a new reaction gets created
+      if (existingReaction) {
+        if (!existingReaction.reactedBy.includes(action.input.reactedBy)) {
+          existingReaction.reactedBy.push(action.input.reactedBy);
+        }
+      } else {
+        message.reactions.push({
           type: action.input.type,
-        },
-      ];
-    }
+          reactedBy: [action.input.reactedBy],
+        });
+      }
+    },
+    removeEmojiReactionOperation(state, action) {
+      const message = state.messages.find(
+        (m) => m.id === action.input.messageId,
+      );
+      if (!message) {
+        return state;
+      }
 
-    state.messages = state.messages.map((_message) => {
-      // the state of the chatroom documents messages gets updated
-      if (_message.id === message.id) {
-        return message;
+      if (!message.reactions) {
+        return;
       }
 
-      return _message;
-    });
-  },
-  removeEmojiReactionOperation(state, action, dispatch) {
-    // To remove a reaction the address is removed from the reactedBy object in the reactions type.
-    state.messages = state.messages.map((message) => {
-      if (message.id === action.input.messageId) {
-        message.reactions = (message.reactions || []).map((reaction) => {
-          if (reaction.type === action.input.type) {
-            return {
-              ...reaction,
-              reactedBy: reaction.reactedBy.filter(
-                (reactedBy) => reactedBy !== action.input.senderId, // We're removing the sender of the reaction from the the reactedBy object
-              ),
-            };
-          }
-
-          return reaction;
-        });
+      const reactionIndex = message.reactions.findIndex(
+        (r) => r.type === action.input.type,
+      );
+      if (reactionIndex === -1) {
+        return;
       }
 
-      return message; // We're updating the document state with our changes
-    });
-  },
-  editChatNameOperation(state, action, dispatch) {
-    state.name = action.input.name || "";
-  },
-  editChatDescriptionOperation(state, action, dispatch) {
-    state.description = action.input.description || "";
-  },
-};
+      const reaction = message.reactions[reactionIndex];
+      const userIndex = reaction.reactedBy.indexOf(action.input.senderId);
+
+      if (userIndex !== -1) {
+        reaction.reactedBy.splice(userIndex, 1);
+
+        if (reaction.reactedBy.length === 0) {
+          message.reactions.splice(reactionIndex, 1);
+        }
+      }
+    },
+    editChatNameOperation(state, action) {
+      state.name = action.input.name || "";
+    },
+    editChatDescriptionOperation(state, action) {
+      state.description = action.input.description || "";
+    },
+  };
+
 ```
 
 ## Write the Operation Reducers Tests
@@ -156,34 +154,38 @@ Here are the tests for the five operations written in the reducers file.
  * - change it by adding new tests or modifying the existing ones
  */
 
-import { generateMock } from "@powerhousedao/codegen";
-import { utils as documentModelUtils } from "document-model/document";
-
-import utils from "../../gen/utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { generateId } from "document-model/core";
 import {
-  z,
+  reducer,
+  utils,
+  addMessage,
+  addEmojiReaction,
+  removeEmojiReaction,
+  editChatName,
+  editChatDescription,
+} from "../../gen/index.js";
+import type {
+  ChatRoomDocument,
   AddMessageInput,
   AddEmojiReactionInput,
   RemoveEmojiReactionInput,
   EditChatNameInput,
   EditChatDescriptionInput,
-} from "../../gen/schema";
-import { reducer } from "../../gen/reducer";
-import * as creators from "../../gen/add-message/creators";
-import { ChatRoomDocument } from "../../gen/types";
+} from "../../gen/types.js";
 
-describe("AddMessage Operations", () => {
+describe("GeneralOperations Operations", () => {
   let document: ChatRoomDocument;
 
   beforeEach(() => {
     document = utils.createDocument();
   });
 
-  const addMessage = (): [ChatRoomDocument, AddMessageInput] => {
-    // This is a helper function for our upcoming test
+  const addMessageHelper = (): [ChatRoomDocument, AddMessageInput] => {
+    // This is a helper function for our upcoming tests
     const input: AddMessageInput = {
       content: "Hello, World!",
-      messageId: documentModelUtils.hashKey(),
+      messageId: generateId(),
       sender: {
         id: "anon-user",
         name: null,
@@ -192,17 +194,21 @@ describe("AddMessage Operations", () => {
       sentAt: new Date().toISOString(),
     };
 
-    const updatedDocument = reducer(document, creators.addMessage(input));
+    const updatedDocument = reducer(document, addMessage(input));
 
     return [updatedDocument, input];
   };
 
   it("should handle addMessage operation", () => {
-    const [updatedDocument, input] = addMessage();
+    const [updatedDocument, input] = addMessageHelper();
 
     expect(updatedDocument.operations.global).toHaveLength(1); // We're validating that the message is being added to the operations history
-    expect(updatedDocument.operations.global[0].type).toBe("ADD_MESSAGE");
-    expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
+    expect(updatedDocument.operations.global[0].action.type).toBe(
+      "ADD_MESSAGE",
+    );
+    expect(updatedDocument.operations.global[0].action.input).toStrictEqual(
+      input,
+    );
     expect(updatedDocument.operations.global[0].index).toEqual(0);
 
     expect(updatedDocument.state.global.messages).toHaveLength(1); // We're validating that the message is present in the message state of the document
@@ -217,7 +223,7 @@ describe("AddMessage Operations", () => {
 
   it("should handle addEmojiReaction operation", () => {
     // We're validating that we can react using an emoji with a helper function
-    const [doc, addMessageInput] = addMessage();
+    const [doc, addMessageInput] = addMessageHelper();
 
     let updatedDocument = doc;
 
@@ -229,14 +235,14 @@ describe("AddMessage Operations", () => {
 
     updatedDocument = reducer(
       updatedDocument,
-      creators.addEmojiReaction(addEmojiReactionInput),
+      addEmojiReaction(addEmojiReactionInput),
     );
 
     expect(updatedDocument.operations.global).toHaveLength(2); // We're validating that the emoji reaction is added to the operation history of the doc.
-    expect(updatedDocument.operations.global[1].type).toBe(
+    expect(updatedDocument.operations.global[1].action.type).toBe(
       "ADD_EMOJI_REACTION",
     );
-    expect(updatedDocument.operations.global[1].input).toStrictEqual(
+    expect(updatedDocument.operations.global[1].action.input).toStrictEqual(
       addEmojiReactionInput,
     );
     expect(updatedDocument.operations.global[1].index).toEqual(1);
@@ -251,28 +257,25 @@ describe("AddMessage Operations", () => {
   });
 
   it("should handle addEmojiReaction operation to a non existing message", () => {
-    // We're testing that an error is thrown when reacting to a non-existing message
+    // We're testing that the state doesn't change when reacting to a non-existing message
     const input: AddEmojiReactionInput = {
       messageId: "invalid-message-id",
       reactedBy: "anon-user",
       type: "THUMBS_UP",
     };
 
-    const updatedDocument = reducer(document, creators.addEmojiReaction(input));
+    const updatedDocument = reducer(document, addEmojiReaction(input));
 
     expect(updatedDocument.operations.global).toHaveLength(1);
-    expect(updatedDocument.operations.global[0].type).toBe(
+    expect(updatedDocument.operations.global[0].action.type).toBe(
       "ADD_EMOJI_REACTION",
     );
-    expect(updatedDocument.operations.global[0].error).toBe(
-      "Message not found",
-    );
     expect(updatedDocument.state.global.messages).toHaveLength(0);
   });
 
   it("should handle removeEmojiReaction operation", () => {
     // We're making use of a helper function to check if we can remove an EmojiReaction
-    const [doc, addMessageInput] = addMessage();
+    const [doc, addMessageInput] = addMessageHelper();
 
     let updatedDocument = doc;
 
@@ -284,7 +287,7 @@ describe("AddMessage Operations", () => {
 
     updatedDocument = reducer(
       updatedDocument,
-      creators.addEmojiReaction(addEmojiReactionInput),
+      addEmojiReaction(addEmojiReactionInput),
     );
 
     const input: RemoveEmojiReactionInput = {
@@ -294,22 +297,19 @@ describe("AddMessage Operations", () => {
       type: "THUMBS_UP",
     };
 
-    updatedDocument = reducer(
-      updatedDocument,
-      creators.removeEmojiReaction(input),
-    );
+    updatedDocument = reducer(updatedDocument, removeEmojiReaction(input));
 
     expect(updatedDocument.operations.global).toHaveLength(3); // We're validating that the operation was added to the operation history.
-    expect(updatedDocument.operations.global[2].type).toBe(
+    expect(updatedDocument.operations.global[2].action.type).toBe(
       "REMOVE_EMOJI_REACTION",
     );
-    expect(updatedDocument.operations.global[2].input).toStrictEqual(input);
+    expect(updatedDocument.operations.global[2].action.input).toStrictEqual(
+      input,
+    );
     expect(updatedDocument.operations.global[2].index).toEqual(2);
 
-    expect(updatedDocument.state.global.messages[0].reactions).toHaveLength(1); // The reaction should still exist but no-one should have reacted to it
-    expect(
-      updatedDocument.state.global.messages[0].reactions?.[0]?.reactedBy,
-    ).toHaveLength(0);
+    // When the last user removes their reaction, the entire reaction should be removed
+    expect(updatedDocument.state.global.messages[0].reactions).toHaveLength(0);
   });
 
   it("should handle editChatName operation", () => {
@@ -317,11 +317,15 @@ describe("AddMessage Operations", () => {
       name: "New Chat Name",
     };
 
-    const updatedDocument = reducer(document, creators.editChatName(input));
+    const updatedDocument = reducer(document, editChatName(input));
 
     expect(updatedDocument.operations.global).toHaveLength(1); // We're validating that the operation is added to the operations history
-    expect(updatedDocument.operations.global[0].type).toBe("EDIT_CHAT_NAME");
-    expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
+    expect(updatedDocument.operations.global[0].action.type).toBe(
+      "EDIT_CHAT_NAME",
+    );
+    expect(updatedDocument.operations.global[0].action.input).toStrictEqual(
+      input,
+    );
     expect(updatedDocument.operations.global[0].index).toEqual(0);
 
     expect(updatedDocument.state.global.name).toBe(input.name);
@@ -332,16 +336,15 @@ describe("AddMessage Operations", () => {
       description: "New Chat Description",
     };
 
-    const updatedDocument = reducer(
-      document,
-      creators.editChatDescription(input),
-    );
+    const updatedDocument = reducer(document, editChatDescription(input));
 
     expect(updatedDocument.operations.global).toHaveLength(1); // We're validating that the operation is added to the operations history
-    expect(updatedDocument.operations.global[0].type).toBe(
+    expect(updatedDocument.operations.global[0].action.type).toBe(
       "EDIT_CHAT_DESCRIPTION",
     );
-    expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
+    expect(updatedDocument.operations.global[0].action.input).toStrictEqual(
+      input,
+    );
     expect(updatedDocument.operations.global[0].index).toEqual(0);
 
     expect(updatedDocument.state.global.description).toBe(input.description);

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

@@ -9,7 +9,7 @@ Run below command to generate the editor template for the `Chatroom` document mo
 Notice the `--editor` flag which defines the `chatroom` document model editor. And the `--document-types` flag which defines the document type `powerhouse/chatroom`.
 
 ```bash
-ph generate -- --editor ChatRoomEditor --document-types powerhouse/chat-room
+ph generate --editor ChatRoomEditor --document-types powerhouse/chat-room
 ```
 
 Once complete, navigate to the `editors/chat-room/editor.tsx` file and open it in your editor.
@@ -37,36 +37,41 @@ The utils function will help you with mapping information from the document mode
 Now, let's copy & paste the code below into the `editor.tsx` file located at `editors/chat-room-editor`and save the file.
 
 ```typescript
-/* eslint-disable react/jsx-no-bind */
-import { EditorProps } from "document-model/document";
+import { generateId } from "document-model/core";
+import { useUser } from "@powerhousedao/reactor-browser/connect";
+import { useSelectedChatRoomDocument } from "../../document-models/chat-room/hooks.js";
 import {
-  ChatRoomState,
-  ChatRoomAction,
-  ChatRoomLocalState,
-  ReactionType,
-  actions,
-} from "../../document-models/chat-room";
-import { utils as documentModelUtils } from "document-model/document";
-import { ChatRoom, ChatRoomProps, MessageProps } from "./components";
-import { reactionKeyToReactionType, mapReactions } from "./utils";
-
-export type IProps = EditorProps<
-  ChatRoomState,
-  ChatRoomAction,
-  ChatRoomLocalState
->;
-
-export default function Editor(props: IProps) {
-  const disableChatRoom = !props.context.user;          // we're disabling the chatroom when a user is not logged in.
+  addMessage,
+  addEmojiReaction,
+  removeEmojiReaction,
+  editChatName,
+  editChatDescription,
+} from "../../document-models/chat-room/gen/creators.js";
+import {
+  ChatRoom,
+  type ChatRoomProps,
+  type MessageProps,
+} from "./components/index.js";
+import { reactionKeyToReactionType, mapReactions } from "./utils.js";
+
+export default function Editor() {
+  const [document, dispatch] = useSelectedChatRoomDocument();
+  const user = useUser();
+
+  const disableChatRoom = !user;
+
+  if (!document) {
+    return <div>Loading...</div>;
+  }
 
   const messages: ChatRoomProps["messages"] =
-    props.document.state.global.messages.map((message) => ({    // this object comes from the document state with a mapping that validates which message which user has send.
+    document.state.global.messages.map((message) => ({
       id: message.id,
       message: message.content || "",
       timestamp: message.sentAt,
       userName: message.sender.name || message.sender.id,
-      imgUrl: message.sender.avatarUrl || undefined,        // if the user has an avatar set we'll use it.
-      isCurrentUser: message.sender.id === props.context.user?.address,
+      imgUrl: message.sender.avatarUrl || undefined,
+      isCurrentUser: message.sender.id === user?.address,
       reactions: mapReactions(message.reactions),
     }));
 
@@ -75,14 +80,14 @@ export default function Editor(props: IProps) {
       return;
     }
 
-    props.dispatch(
-      actions.addMessage({
-        messageId: documentModelUtils.hashKey(),
+    dispatch(
+      addMessage({
+        messageId: generateId(),
         content: message,
         sender: {
-          id: props.context.user?.address || "anon-user",
-          name: props.context.user?.ens?.name || null,  // The context of the editor allows us to get hold of the users profile information.
-          avatarUrl: props.context.user?.ens?.avatarUrl || null,
+          id: user?.address || "anon-user",
+          name: user?.ens?.name || null,
+          avatarUrl: user?.ens?.avatarUrl || null,
         },
         sentAt: new Date().toISOString(),
       }),
@@ -92,10 +97,10 @@ export default function Editor(props: IProps) {
   const addReaction = (
     messageId: string,
     userId: string,
-    reactionType: ReactionType,
+    reactionType: "HEART" | "THUMBS_UP" | "THUMBS_DOWN" | "LAUGH" | "CRY",
   ) => {
-    props.dispatch(
-      actions.addEmojiReaction({
+    dispatch(
+      addEmojiReaction({
         messageId,
         reactedBy: userId,
         type: reactionType,
@@ -106,10 +111,10 @@ export default function Editor(props: IProps) {
   const removeReaction = (
     messageId: string,
     userId: string,
-    reactionType: ReactionType,
+    reactionType: "HEART" | "THUMBS_UP" | "THUMBS_DOWN" | "LAUGH" | "CRY",
   ) => {
-    props.dispatch(
-      actions.removeEmojiReaction({
+    dispatch(
+      removeEmojiReaction({
         messageId,
         senderId: userId,
         type: reactionType,
@@ -117,7 +122,7 @@ export default function Editor(props: IProps) {
     );
   };
 
-  const onClickReaction: MessageProps["onClickReaction"] = (reaction) => {      // This allows us to increase the reactions on a emoji that already has been used as a reaction to a message.
+  const onClickReaction: MessageProps["onClickReaction"] = (reaction) => {
     const message = messages.find(
       (message) => message.id === reaction.messageId,
     );
@@ -128,7 +133,7 @@ export default function Editor(props: IProps) {
 
     const messageId = reaction.messageId;
     const reactionType = reactionKeyToReactionType(reaction.type);
-    const currentUserId = props.context.user?.address || "anon-user";
+    const currentUserId = user?.address || "anon-user";
 
     const existingReaction = message.reactions?.find(
       (r) => r.type === reaction.type,
@@ -146,13 +151,13 @@ export default function Editor(props: IProps) {
   };
 
   const onSubmitTitle: ChatRoomProps["onSubmitTitle"] = (title) => {
-    props.dispatch(actions.editChatName({ name: title }));
+    dispatch(editChatName({ name: title }));
   };
 
   const onSubmitDescription: ChatRoomProps["onSubmitDescription"] = (
     description,
   ) => {
-    props.dispatch(actions.editChatDescription({ description }));
+    dispatch(editChatDescription({ description }));
   };
 
   return (
@@ -163,18 +168,19 @@ export default function Editor(props: IProps) {
     >
       <ChatRoom
         description={
-          props.document.state.global.description || "This is a chat room demo"
+          document.state.global.description || "This is a chat room demo"
         }
-        disabled={disableChatRoom}      // we're disabling the chatroom when a user is not logged in.
-        messages={messages}             // the list of messages users are submitting
+        disabled={disableChatRoom}
+        messages={messages}
         onClickReaction={onClickReaction}
         onSendMessage={onSendMessage}
         onSubmitDescription={onSubmitDescription}
         onSubmitTitle={onSubmitTitle}
-        title={props.document.state.global.name || "Chat Room Demo"}
+        title={document.state.global.name || "Chat Room Demo"}
       />
     </div>
   );
+}
 ```
 
 Now you can run the Connect app and see the `Chatroom` editor in action.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/academy",
-  "version": "4.1.0-dev.121",
+  "version": "4.1.0-dev.122",
   "homepage": "https://powerhouse.academy",
   "repository": {
     "type": "git",