@powerhousedao/academy 5.1.0-dev.14 → 5.1.0-dev.17

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

@@ -16,7 +16,7 @@ This tutorial step has a corresponding implementation in the repository. After c
 
 ### Compare your generated code
 
-After running `ph generate ChatRoom.phd`, compare with the reference:
+As Vetra generates code automatically, compare with the reference:
 
 ```bash
 # Compare all generated files with the reference
@@ -37,14 +37,14 @@ See step 1 for detailed GitHub Desktop instructions.
 
 </details>
 
-In this tutorial, you will learn how to define the specifications for a **ChatRoom** document model within the Connect application using its GraphQL schema, and then export the resulting document model specification document for your Powerhouse project.
+In this tutorial, you will learn how to define the specifications for a **ChatRoom** document model within Vetra Studio using its GraphQL schema, and then export the resulting document model specification document for your Powerhouse project.
 
 If you don't have a document specification file created yet, have a look at the previous step of this tutorial to create a new document specification.
 
-Before you start, make sure you have the Connect application running locally with the command:
+Before you start, make sure you have Vetra Studio running locally with the command:
 
 ```bash
-ph connect
+ph vetra
 ```
 
 ## ChatRoom document specification
@@ -156,11 +156,11 @@ input EditChatDescriptionInput {
 
 ## Define the document model specification
 
-To define the document model, you need to open the document model editor in Connect.
+To define the document model, you need to open the document model editor in Vetra Studio.
 
 ### Steps to define your document model:
 
-1. In the Connect application, click on **'ChatRoom' Document** to open the document model specification editor.
+1. In Vetra Studio, click on **'ChatRoom' Document** to open the document model specification editor.
 
 2. You'll be presented with a form to fill in metadata about the document model. Fill in the details in the respective fields.
 
@@ -174,6 +174,7 @@ To define the document model, you need to open the document model editor in Conn
 
    ```json
     {
+      "ID": "",
       "name": "",
       "description": null,
       "createdAt": null,
@@ -205,21 +206,17 @@ To define the document model, you need to open the document model editor in Conn
 
 8. Add the remaining message operations to the `messages` module: `ADD_EMOJI_REACTION` and `REMOVE_EMOJI_REACTION`. Note that you only need to add the operation name (e.g., `ADD_EMOJI_REACTION`) without the `Input` suffix—it will be generated automatically.
 
-9. Add reducer exceptions to the `ADD_MESSAGE` operation for validation: `MessageContentCannotBeEmpty` and `MessageNotFound`. These will be used later to validate messages.
+9. Add **reducer exceptions** to the `ADD_MESSAGE` operation for validation: `MessageContentCannotBeEmptyError` and `MessageNotFoundError`. These will be used later to validate messages.
 
 10. Create a second module called `settings` for the chat room configuration operations.
 
 11. Add the settings operations to the `settings` module: `EDIT_CHAT_NAME` and `EDIT_CHAT_DESCRIPTION`.
 
-12. Once you have added all the input operations, click the `Export` button at the top right of the editor to save the document model specification to your local machine. Save the file in the root of your Powerhouse project.
-
-Check the screenshot below to verify the complete implementation:
-
-![Chatroom Document Model](image-3.png)
+12. In the meantime, Vetra has been keeping an eye on your inputs and started code generation in your directory. In your terminal you will also find any validation errors that help you to identify missing specifications.
 
 ## Verify your document model generation
 
-After running `ph generate ChatRoom.phd`, your project should have the following structure in `document-models/chat-room/`:
+If you have been watching the terminal in your IDE you will see that Vetra has been tracking your changes and scaffolding your directory. Your project should have the following structure in `document-models/chat-room/`:
 
 ```
 document-models/chat-room/
@@ -264,4 +261,4 @@ git ls-tree -r --name-only tutorial/main document-models/chat-room/
 
 ## Up next: Reducers
 
-In the next step, you'll learn how to implement the runtime logic that will use the `ChatRoom` document model specification you've just created and exported.
+In the next step, you'll learn how to implement the runtime logic that will use the `ChatRoom` document model specification you've just created.

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

@@ -1,4 +1,4 @@
-# Implement the document model
+# Implement the document model reducers
 
 :::tip Tutorial Repository
 📦 **Reference Code**: [chatroom-demo](https://github.com/powerhouse-inc/chatroom-demo)
@@ -62,9 +62,9 @@ git reset --hard tutorial/main
 
 </details>
 
-In this section, we will implement and test the operation reducers for the **ChatRoom** document model. For this, you have to export the document model specification from the Connect application and import it into your Powerhouse project directory.
+In this section, we will implement and test the operation reducers for the **ChatRoom** document model. Vetra Studio has been automatically generating your document model code as you defined the specification.
 
-To export the document model specification, follow the steps in the [Define ChatRoom Document Model](/academy/ExampleUsecases/Chatroom/DefineChatroomDocumentModel) section.
+If you need to review the document model specification steps, see [Define ChatRoom Document Model](/academy/ExampleUsecases/Chatroom/DefineChatroomDocumentModel).
 
 ## Understanding reducers in document models
 
@@ -135,14 +135,14 @@ Copy and paste the code below into the `messages.ts` file in the `reducers` fold
 ```typescript
 import {
   MessageNotFoundError,
-  MessageContentCannotBeEmptyError,
+  MessageContentCannotBeEmpty,
 } from "../../gen/messages/error.js";
-import type { ChatRoomMessagesOperations } from "@powerhousedao/chatroom-package/document-models/chat-room";
+import type { ChatRoomMessagesOperations } from "chatroom/document-models/chat-room";
 
 export const chatRoomMessagesOperations: ChatRoomMessagesOperations = {
   addMessageOperation(state, action) {
     if (action.input.content === "") {
-      throw new MessageContentCannotBeEmptyError();
+      throw new MessageContentCannotBeEmpty();
     }
 
     const newMessage = {
@@ -216,30 +216,10 @@ export const chatRoomMessagesOperations: ChatRoomMessagesOperations = {
       }
     }
   },
-};
-```
-
-</details>
-
-## Implement the settings reducers
-
-Navigate to `/document-models/chat-room/src/reducers/settings.ts` and implement the settings operation reducers.
-
-Copy and paste the code below into the `settings.ts` file in the `reducers` folder:
-
-<details>
-<summary>Settings Operation Reducers</summary>
-
-```typescript
-import type { ChatRoomSettingsOperations } from "@powerhousedao/chatroom-package/document-models/chat-room";
-
-export const chatRoomSettingsOperations: ChatRoomSettingsOperations = {
-  editChatNameOperation(state, action) {
-    state.name = action.input.name || "";
-  },
-  editChatDescriptionOperation(state, action) {
-    state.description = action.input.description || "";
-  },
+    senderOperation(state, action) {
+        // TODO: Implement "senderOperation" reducer
+        throw new Error('Reducer "senderOperation" not yet implemented');
+    }
 };
 ```
 
@@ -276,7 +256,7 @@ import {
   AddEmojiReactionInputSchema,
   removeEmojiReaction,
   RemoveEmojiReactionInputSchema,
-} from "@powerhousedao/chatroom-package/document-models/chat-room";
+} from "chatroom/document-models/chat-room";
 
 describe("Messages Operations", () => {
   it("should handle addMessage operation", () => {
@@ -332,69 +312,6 @@ describe("Messages Operations", () => {
 
 </details>
 
-### Settings operation tests
-
-Replace the content of `settings.test.ts` with:
-
-<details>
-<summary>Settings Operation Tests</summary>
-
-```typescript
-/**
- * This is a scaffold file meant for customization:
- * - change it by adding new tests or modifying the existing ones
- */
-
-import { describe, it, expect } from "vitest";
-import { generateMock } from "@powerhousedao/codegen";
-import {
-  reducer,
-  utils,
-  isChatRoomDocument,
-  editChatName,
-  EditChatNameInputSchema,
-  editChatDescription,
-  EditChatDescriptionInputSchema,
-} from "@powerhousedao/chatroom-package/document-models/chat-room";
-
-describe("Settings Operations", () => {
-  it("should handle editChatName operation", () => {
-    const document = utils.createDocument();
-    const input = generateMock(EditChatNameInputSchema());
-
-    const updatedDocument = reducer(document, editChatName(input));
-
-    expect(isChatRoomDocument(updatedDocument)).toBe(true);
-    expect(updatedDocument.operations.global).toHaveLength(1);
-    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);
-  });
-  it("should handle editChatDescription operation", () => {
-    const document = utils.createDocument();
-    const input = generateMock(EditChatDescriptionInputSchema());
-
-    const updatedDocument = reducer(document, editChatDescription(input));
-
-    expect(isChatRoomDocument(updatedDocument)).toBe(true);
-    expect(updatedDocument.operations.global).toHaveLength(1);
-    expect(updatedDocument.operations.global[0].action.type).toBe(
-      "EDIT_CHAT_DESCRIPTION",
-    );
-    expect(updatedDocument.operations.global[0].action.input).toStrictEqual(
-      input,
-    );
-    expect(updatedDocument.operations.global[0].index).toEqual(0);
-  });
-});
-```
-
-</details>
-
 ### Document model tests
 
 The `document-model.test.ts` file contains tests to verify the document model structure. Replace its content with:
@@ -418,7 +335,7 @@ import {
   assertIsChatRoomDocument,
   isChatRoomState,
   assertIsChatRoomState,
-} from "@powerhousedao/chatroom-package/document-models/chat-room";
+} from "chatroom/document-models/chat-room";
 import { ZodError } from "zod";
 
 describe("ChatRoom Document Model", () => {

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

@@ -17,8 +17,6 @@ This tutorial shows building from **generated scaffolding** to a **complete chat
 
 ### Compare your generated editor
 
-After running `pnpm generate --editor`:
-
 ```bash
 # Compare generated scaffolding with the reference
 git diff tutorial/main -- editors/chat-room-editor/
@@ -50,18 +48,24 @@ See step 1 for detailed GitHub Desktop instructions.
 
 </details>
 
-In this chapter we will continue with the interface or editor implementation of the **ChatRoom** document model. This means you will create a user interface for the **ChatRoom** document model which will be used inside the Connect app to visualize your chatroom, send messages, and react with emojis.
+In this chapter we will continue with the interface or editor implementation of the **ChatRoom** document model. This means you will create a user interface for the **ChatRoom** document model which will be used to visualize your chatroom, send messages, and react with emojis.
 
-## Generate the editor template
+## Add a document editor specification in Vetra Studio
 
-Run the command below to generate the editor template for the **ChatRoom** document model.  
-This command reads the **ChatRoom** document model definition from the `document-models` folder and generates the editor template in the `editors/chat-room-editor` folder.
+Go back to Vetra Studio, if you need to relaunch Vetra, launch it with `Vetra --watch` so it loads all existing local documents. Click the **'Add new specification'** button in the User Experiences column under **'Editors'**. This will create an editor template for your document model.
 
-```bash
-pnpm generate --editor chat-room-editor --document-types powerhouse/chat-room
-```
+Give the editor the name `chat-room-editor` and select the correct document model. In our case that's the `powerhouse/chat-room`. 
 
-Notice the `--editor` flag which specifies the editor name, and the `--document-types` flag defines the document type `powerhouse/chat-room`.
+You'll see that the terminal in which you are running Vetra mentions 
+```
+ℹ [Vetra] 🔄 Starting editor generation for: chat-room-editor                                        15:18:16
+                                                                                                     15:18:16
+Loaded templates: node_modules/.pnpm/@powerhousedao+codegen@5.0.12_kx2q3zvshbbgwl7sikydpz6mre/node_modules/@powerhousedao/codegen/dist/src/codegen/.hygen/templates
+       added: editors/chat-room-editor/components/EditName.tsx                                       15:18:16
+       added: editors/chat-room-editor/editor.tsx                                                    15:18:16
+       FORCED: editors/chat-room-editor/module.ts                                                    15:18:16
+ℹ [Vetra] ✅ Editor generation completed successfully for: chat-room-editor    
+````
 
 Once complete, you'll have a new directory structure:
 
@@ -80,10 +84,10 @@ Navigate to the `editors/chat-room-editor/editor.tsx` file and open it in your e
 When building your editor component within the Powerhouse ecosystem, you have several options for styling:
 
 1. **Default HTML Styling:** Standard HTML tags will render with default styles offered through the boilerplate.
-2. **Tailwind CSS:** Connect Studio comes with Tailwind CSS integrated. You can directly use Tailwind utility classes.
+2. **Tailwind CSS:** Vetra Studio comes with Tailwind CSS integrated. You can directly use Tailwind utility classes.
 3. **Custom CSS Files:** You can import traditional CSS files to apply custom styles.
 
-Connect Studio provides a dynamic local environment. By running `ph connect`, you can visualize your components instantly as you build them.
+Vetra Studio Preview provides a dynamic local environment. By running `ph vetra --watch`, you can visualize your components instantly as you build them.
 
 ## Build the editor with components
 
@@ -149,6 +153,9 @@ Here's what each component does:
 
 The `utils.ts` file contains helper functions for mapping between document model types and component props:
 
+<details>
+<summary>View utils.ts code</summary>
+
 ```typescript
 import type {
   MessageProps,
@@ -249,9 +256,14 @@ export const mapReactions = (
 };
 ```
 
+</details>
+
 ### The main editor.tsx file
 
-The main `editor.tsx` file connects your document model to the UI components. Replace the generated scaffolding with:
+The main `editor.tsx` file connects your document model to the UI components. Replace the generated scaffolding with the code underneath:
+
+<details>
+<summary>View editor.tsx code</summary>
 
 ```typescript
 import { generateId } from "document-model/core";
@@ -400,6 +412,8 @@ export default function Editor() {
 }
 ```
 
+</details>
+
 **What's happening here:**
 
 - We use `useSelectedChatRoomDocument` hook to get the document state and dispatch function
@@ -503,13 +517,13 @@ export const EditableLabel: React.FC<EditableLabelProps> = ({
 
 ## Test your editor
 
-Now you can run the Connect app and see the **ChatRoom** editor in action:
+Now you can run Vetra Studio Preview and see the **ChatRoom** editor in action:
 
 ```bash
-ph connect
+ph vetra --watch
 ```
 
-In Connect, in the bottom right corner you'll find a new Document Model that you can create: **ChatRoom**. Click on it to create a new ChatRoom document.
+In Vetra Studio, in the bottom right corner you'll find a new Document Model that you can create: **ChatRoom**. Click on it to create a new ChatRoom document.
 
 :::warning Authentication Required
 A warning will prompt you to login before you can send messages. Login with an Ethereum address via Renown to start sending messages.
@@ -555,7 +569,3 @@ In this tutorial you've learned:
 ✅ **Action dispatching** - How to dispatch operations from your UI  
 ✅ **Type-safe development** - Leveraging TypeScript with generated types from your SDL  
 ✅ **Real-time collaboration** - Building features that work across multiple users
-
-## Up next: Local Reactor
-
-In the next section, you'll learn how to run a local Reactor to test real-time synchronization between multiple users.

package/docs/academy/03-ExampleUsecases/Chatroom/{06-LaunchALocalReactor.md → 06-LaunchALocalReactor}

@@ -1,5 +1,10 @@
 # Launch a local Reactor
 
+## Up next: Local Reactor
+
+In the next section, you'll learn how to run a local Reactor to test real-time synchronization between multiple users.
+
+
 :::tip Tutorial Repository
 📦 **Reference Code**: [chatroom-demo](https://github.com/powerhouse-inc/chatroom-demo)
 
@@ -19,7 +24,7 @@ In production, Reactors are typically hosted as remote servers. For development
 
 ## Start the local Reactor
 
-First, stop the Connect application if it's running. Then start the Reactor:
+First, stop Vetra Studio if it's running. Then start the Reactor:
 
 ```bash
 ph reactor
@@ -27,14 +32,14 @@ ph reactor
 
 This spins up a Reactor that:
 - Runs locally on your machine
-- Creates a public drive accessible from your Connect sidebar
+- Creates a public drive accessible from your sidebar
 - Enables synchronization between multiple browser sessions
 
 ## Test real-time collaboration
 
 To validate the real-time functionality of your ChatRoom:
 
-1. **Open two browser windows** with the Connect application
+1. **Open two browser windows** with the application
 2. **Navigate to the Reactor drive** in the left sidebar (it will appear as a public drive)
 3. **Login with different Ethereum addresses** in each window
 4. **Create a ChatRoom document** in one window
@@ -59,20 +64,20 @@ While testing your ChatRoom, try these features:
 
 3. **Reaction Toggling**: Click on an existing reaction to toggle it on/off for your user
 
-## Running Connect alongside Reactor
+## Running Vetra Studio alongside Reactor
 
-You can also run Connect and Reactor together. In separate terminal windows:
+You can also run Vetra Studio and Reactor together. In separate terminal windows:
 
 ```bash
 # Terminal 1: Start the Reactor
 ph reactor
 
-# Terminal 2: Start Connect (in a separate terminal)
-ph connect
+# Terminal 2: Start Vetra Studio (in a separate terminal)
+ph vetra --watch
 ```
 
 This allows you to:
-- Use Connect's local drive for development
+- Use Vetra Studio's local drive for development
 - Access the Reactor's public drive for collaboration testing
 - Switch between local and synchronized documents
 

package/docs/academy/03-ExampleUsecases/VetraPackageLibrary/VetraPackageLibrary.md

@@ -2,6 +2,19 @@
 title: Vetra Package Library
 ---
 
+Packages of documents are a core structuring mechanism in the Vetra framework, allowing developers to group and manage related document efficiently. These packages serve as modular collections of document specifications and modules, ensuring consistency, scalability, and reusability across different applications.
+
+
+### Example packages
+
+- **Finance Package** – A set of documents or apps handling invoices, payments, budgets, and financial reporting.
+- **Contributor Billing Package** – Defines documents for tracking work, invoicing, and facilitating payments (in both fiat and crypto) for contributors in decentralized organizations.
+- **Governance Package** – Models for proposals, voting, contributor agreements, and decision-making processes.
+- **People Ops Package** – Documents managing contributor profiles, roles, task assignments, and reputation tracking.
+- **Project Management Package** – Models for task tracking, milestones, resource allocation, and deliverables.
+
+---
+
 The Vetra package library is your best source to explore packages built by different builder teams on the Powerhouse Vetra platform. Through the packages you'll find the GitHub repository with the source code of each package.   
 
 You can get access to the [package library here.](https://vetra.io/packages)

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

@@ -0,0 +1,9 @@
+{
+  "label": "Example use-cases",
+  "position": 3,
+  "link": {
+    "type": "doc",
+    "id": "academy/ExampleUsecases/Overview"
+  }
+}
+