@powerhousedao/vetra 4.1.0-dev.12 → 4.1.0-dev.121

package/dist/document-models/vetra-package/src/tests/base-operations.test.js

@@ -2,96 +2,191 @@
  * This is a scaffold file meant for customization:
  * - change it by adding new tests or modifying the existing ones
  */
-import { describe, it, expect, beforeEach } from "vitest";
-import { generateMock } from "@powerhousedao/codegen";
-import utils from "../../gen/utils.js";
-import { z, } from "../../gen/schema/index.js";
-import { reducer } from "../../gen/reducer.js";
+import { beforeEach, describe, expect, it } from "vitest";
 import * as creators from "../../gen/base-operations/creators.js";
+import { reducer } from "../../gen/reducer.js";
+import { utils } from "@powerhousedao/vetra/document-models/vetra-package";
 describe("BaseOperations Operations", () => {
     let document;
     beforeEach(() => {
         document = utils.createDocument();
     });
-    it("should handle setPackageName operation", () => {
-        const input = generateMock(z.SetPackageNameInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageName(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_NAME");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageName", () => {
+        it("should mutate state with new name", () => {
+            const input = { name: "my-package" };
+            const updatedDocument = reducer(document, creators.setPackageName(input));
+            expect(updatedDocument.state.global.name).toBe("my-package");
+        });
     });
-    it("should handle setPackageDescription operation", () => {
-        const input = generateMock(z.SetPackageDescriptionInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageDescription(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_DESCRIPTION");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageDescription", () => {
+        it("should mutate state with new description", () => {
+            const input = {
+                description: "A test package",
+            };
+            const updatedDocument = reducer(document, creators.setPackageDescription(input));
+            expect(updatedDocument.state.global.description).toBe("A test package");
+        });
     });
-    it("should handle setPackageCategory operation", () => {
-        const input = generateMock(z.SetPackageCategoryInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageCategory(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_CATEGORY");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageCategory", () => {
+        it("should mutate state with new category", () => {
+            const input = { category: "utility" };
+            const updatedDocument = reducer(document, creators.setPackageCategory(input));
+            expect(updatedDocument.state.global.category).toBe("utility");
+        });
     });
-    it("should handle setPackageAuthor operation", () => {
-        const input = generateMock(z.SetPackageAuthorInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageAuthor(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_AUTHOR");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageAuthor", () => {
+        it("should mutate state with both name and website", () => {
+            const input = {
+                name: "John Doe",
+                website: "https://johndoe.com",
+            };
+            const updatedDocument = reducer(document, creators.setPackageAuthor(input));
+            expect(updatedDocument.state.global.author.name).toBe("John Doe");
+            expect(updatedDocument.state.global.author.website).toBe("https://johndoe.com");
+        });
+        it("should handle partial author data (name only or website only)", () => {
+            // Name only
+            let updatedDoc = reducer(document, creators.setPackageAuthor({ name: "Jane Doe" }));
+            expect(updatedDoc.state.global.author.name).toBe("Jane Doe");
+            expect(updatedDoc.state.global.author.website).toBeNull();
+            // Website only
+            updatedDoc = reducer(updatedDoc, creators.setPackageAuthor({ website: "https://janedoe.com" }));
+            expect(updatedDoc.state.global.author.name).toBeNull();
+            expect(updatedDoc.state.global.author.website).toBe("https://janedoe.com");
+        });
     });
-    it("should handle setPackageAuthorName operation", () => {
-        const input = generateMock(z.SetPackageAuthorNameInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageAuthorName(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_AUTHOR_NAME");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageAuthorName", () => {
+        it("should mutate state with new author name", () => {
+            const input = { name: "Alice" };
+            const updatedDocument = reducer(document, creators.setPackageAuthorName(input));
+            expect(updatedDocument.state.global.author.name).toBe("Alice");
+        });
     });
-    it("should handle setPackageAuthorWebsite operation", () => {
-        const input = generateMock(z.SetPackageAuthorWebsiteInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageAuthorWebsite(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_AUTHOR_WEBSITE");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageAuthorWebsite", () => {
+        it("should mutate state with new author website", () => {
+            const input = {
+                website: "https://example.com",
+            };
+            const updatedDocument = reducer(document, creators.setPackageAuthorWebsite(input));
+            expect(updatedDocument.state.global.author.website).toBe("https://example.com");
+        });
     });
-    it("should handle addPackageKeyword operation", () => {
-        const input = generateMock(z.AddPackageKeywordInputSchema());
-        const updatedDocument = reducer(document, creators.addPackageKeyword(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("ADD_PACKAGE_KEYWORD");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("addPackageKeyword", () => {
+        it("should mutate state by adding keyword to array", () => {
+            const input = {
+                id: "kw-1",
+                label: "react",
+            };
+            const updatedDocument = reducer(document, creators.addPackageKeyword(input));
+            expect(updatedDocument.state.global.keywords).toContainEqual({
+                id: "kw-1",
+                label: "react",
+            });
+        });
+        it("should add to empty array from initial state", () => {
+            expect(document.state.global.keywords).toEqual([]);
+            const input = {
+                id: "first-kw",
+                label: "typescript",
+            };
+            const updatedDocument = reducer(document, creators.addPackageKeyword(input));
+            expect(updatedDocument.state.global.keywords).toEqual([
+                { id: "first-kw", label: "typescript" },
+            ]);
+        });
+        it("should add multiple keywords sequentially", () => {
+            let updatedDoc = reducer(document, creators.addPackageKeyword({ id: "kw-1", label: "react" }));
+            updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-2", label: "vue" }));
+            updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({ id: "kw-3", label: "angular" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(3);
+            expect(updatedDoc.state.global.keywords[0]).toEqual({
+                id: "kw-1",
+                label: "react",
+            });
+            expect(updatedDoc.state.global.keywords[1]).toEqual({
+                id: "kw-2",
+                label: "vue",
+            });
+            expect(updatedDoc.state.global.keywords[2]).toEqual({
+                id: "kw-3",
+                label: "angular",
+            });
+        });
+        it("should reject duplicate IDs and store error in operation", () => {
+            const input = {
+                id: "duplicate",
+                label: "first",
+            };
+            let updatedDoc = reducer(document, creators.addPackageKeyword(input));
+            expect(updatedDoc.state.global.keywords).toHaveLength(1);
+            expect(updatedDoc.operations.global[0].error).toBeUndefined();
+            updatedDoc = reducer(updatedDoc, creators.addPackageKeyword({
+                id: "duplicate",
+                label: "second",
+            }));
+            expect(updatedDoc.operations.global).toHaveLength(2);
+            expect(updatedDoc.operations.global[1].error).toBe('Keyword with id "duplicate" already exists');
+            expect(updatedDoc.state.global.keywords).toHaveLength(1);
+        });
     });
-    it("should handle removePackageKeyword operation", () => {
-        const input = generateMock(z.RemovePackageKeywordInputSchema());
-        const updatedDocument = reducer(document, creators.removePackageKeyword(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("REMOVE_PACKAGE_KEYWORD");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("removePackageKeyword", () => {
+        it("should mutate state by removing keyword from array", () => {
+            let updatedDoc = reducer(document, creators.addPackageKeyword({
+                id: "to-remove",
+                label: "test",
+            }));
+            updatedDoc = reducer(updatedDoc, creators.removePackageKeyword({ id: "to-remove" }));
+            expect(updatedDoc.state.global.keywords).not.toContainEqual({
+                id: "to-remove",
+                label: "test",
+            });
+        });
+        it("should remove existing ID", () => {
+            let updatedDoc = reducer(document, creators.addPackageKeyword({
+                id: "existing",
+                label: "test",
+            }));
+            const lengthBefore = updatedDoc.state.global.keywords.length;
+            updatedDoc = reducer(updatedDoc, creators.removePackageKeyword({ id: "existing" }));
+            expect(updatedDoc.state.global.keywords.length).toBe(lengthBefore - 1);
+            expect(updatedDoc.state.global.keywords.find((kw) => kw.id === "existing")).toBeUndefined();
+        });
+        it("should gracefully handle non-existent ID", () => {
+            const initialState = document.state.global.keywords;
+            const updatedDocument = reducer(document, creators.removePackageKeyword({ id: "non-existent-id" }));
+            expect(updatedDocument.state.global.keywords).toEqual(initialState);
+        });
+        it("should handle empty array gracefully", () => {
+            expect(document.state.global.keywords).toEqual([]);
+            const updatedDocument = reducer(document, creators.removePackageKeyword({ id: "any-id" }));
+            expect(updatedDocument.state.global.keywords).toEqual([]);
+        });
+        it("should add then immediately remove item", () => {
+            let updatedDoc = reducer(document, creators.addPackageKeyword({
+                id: "temp-kw",
+                label: "temp",
+            }));
+            updatedDoc = reducer(updatedDoc, creators.removePackageKeyword({ id: "temp-kw" }));
+            expect(updatedDoc.state.global.keywords.find((kw) => kw.id === "temp-kw")).toBeUndefined();
+            expect(updatedDoc.operations.global).toHaveLength(2);
+        });
     });
-    it("should handle setPackageGithubUrl operation", () => {
-        const input = generateMock(z.SetPackageGithubUrlInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageGithubUrl(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_GITHUB_URL");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageGithubUrl", () => {
+        it("should mutate state with new GitHub URL", () => {
+            const input = {
+                url: "https://github.com/user/repo",
+            };
+            const updatedDocument = reducer(document, creators.setPackageGithubUrl(input));
+            expect(updatedDocument.state.global.githubUrl).toBe("https://github.com/user/repo");
+        });
     });
-    it("should handle setPackageNpmUrl operation", () => {
-        const input = generateMock(z.SetPackageNpmUrlInputSchema());
-        const updatedDocument = reducer(document, creators.setPackageNpmUrl(input));
-        expect(updatedDocument.operations.global).toHaveLength(1);
-        expect(updatedDocument.operations.global[0].type).toBe("SET_PACKAGE_NPM_URL");
-        expect(updatedDocument.operations.global[0].input).toStrictEqual(input);
-        expect(updatedDocument.operations.global[0].index).toEqual(0);
+    describe("setPackageNpmUrl", () => {
+        it("should mutate state with new npm URL", () => {
+            const input = {
+                url: "https://npmjs.com/package/my-package",
+            };
+            const updatedDocument = reducer(document, creators.setPackageNpmUrl(input));
+            expect(updatedDocument.state.global.npmUrl).toBe("https://npmjs.com/package/my-package");
+        });
     });
 });
-//# sourceMappingURL=base-operations.test.js.map

package/dist/document-models/vetra-package/src/tests/document-model.test.js

@@ -2,18 +2,112 @@
  * 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 utils, { initialGlobalState, initialLocalState, } from "../../gen/utils.js";
+import { addPackageKeyword, reducer, removePackageKeyword, setPackageAuthor, setPackageAuthorName, setPackageAuthorWebsite, setPackageCategory, setPackageDescription, setPackageGithubUrl, setPackageName, setPackageNpmUrl, utils, } from "@powerhousedao/vetra/document-models/vetra-package";
+import { describe, expect, it } from "vitest";
 describe("Vetra Package Document Model", () => {
-    it("should create a new Vetra Package document", () => {
+    it("should have correct initial values", () => {
         const document = utils.createDocument();
-        expect(document).toBeDefined();
-        expect(document.header.documentType).toBe("powerhouse/package");
+        expect(document.state.global.name).toBeNull();
+        expect(document.state.global.description).toBeNull();
+        expect(document.state.global.category).toBeNull();
+        expect(document.state.global.author).toEqual({
+            name: null,
+            website: null,
+        });
+        expect(document.state.global.keywords).toEqual([]);
+        expect(document.state.global.githubUrl).toBeNull();
+        expect(document.state.global.npmUrl).toBeNull();
+        expect(utils.isStateOfType(document.state)).toBe(true);
+        expect(utils.assertIsStateOfType(document.state)).toBeUndefined();
+        expect(utils.isDocumentOfType(document)).toBe(true);
+        expect(utils.assertIsDocumentOfType(document)).toBeUndefined();
     });
-    it("should create a new Vetra Package document with a valid initial state", () => {
+    it("should handle multiple operations and maintain consistency", () => {
         const document = utils.createDocument();
-        expect(document.state.global).toStrictEqual(initialGlobalState);
-        expect(document.state.local).toStrictEqual(initialLocalState);
+        let updatedDoc = reducer(document, setPackageName({ name: "test-package" }));
+        updatedDoc = reducer(updatedDoc, setPackageDescription({ description: "A test package" }));
+        updatedDoc = reducer(updatedDoc, setPackageCategory({ category: "utility" }));
+        updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-1", label: "react" }));
+        updatedDoc = reducer(updatedDoc, setPackageGithubUrl({
+            url: "https://github.com/user/test-package",
+        }));
+        // Verify state consistency
+        expect(updatedDoc.state.global.name).toBe("test-package");
+        expect(updatedDoc.state.global.description).toBe("A test package");
+        expect(updatedDoc.state.global.category).toBe("utility");
+        expect(updatedDoc.state.global.keywords).toHaveLength(1);
+        expect(updatedDoc.state.global.githubUrl).toBe("https://github.com/user/test-package");
+    });
+    it("should handle complete workflow: set metadata, author, and keywords", () => {
+        const document = utils.createDocument();
+        // Step 1: Set package metadata
+        let updatedDoc = reducer(document, setPackageName({ name: "awesome-lib" }));
+        updatedDoc = reducer(updatedDoc, setPackageDescription({
+            description: "An awesome library for everything",
+        }));
+        updatedDoc = reducer(updatedDoc, setPackageCategory({ category: "library" }));
+        // Step 2: Set author information
+        updatedDoc = reducer(updatedDoc, setPackageAuthor({
+            name: "Jane Developer",
+            website: "https://janedeveloper.com",
+        }));
+        // Step 3: Add keywords
+        updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-1", label: "javascript" }));
+        updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-2", label: "typescript" }));
+        updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-3", label: "react" }));
+        // Step 4: Set repository URLs
+        updatedDoc = reducer(updatedDoc, setPackageGithubUrl({
+            url: "https://github.com/jane/awesome-lib",
+        }));
+        updatedDoc = reducer(updatedDoc, setPackageNpmUrl({
+            url: "https://npmjs.com/package/awesome-lib",
+        }));
+        // Verify final state
+        expect(updatedDoc.operations.global).toHaveLength(9);
+        expect(updatedDoc.state.global.name).toBe("awesome-lib");
+        expect(updatedDoc.state.global.author.name).toBe("Jane Developer");
+        expect(updatedDoc.state.global.keywords).toHaveLength(3);
+        expect(updatedDoc.state.global.githubUrl).toBe("https://github.com/jane/awesome-lib");
+        expect(updatedDoc.state.global.npmUrl).toBe("https://npmjs.com/package/awesome-lib");
+    });
+    describe("Complex Scenarios", () => {
+        it("should handle author updates: full then partial", () => {
+            const document = utils.createDocument();
+            // Set full author
+            let updatedDoc = reducer(document, setPackageAuthor({
+                name: "John Doe",
+                website: "https://johndoe.com",
+            }));
+            expect(updatedDoc.state.global.author.name).toBe("John Doe");
+            expect(updatedDoc.state.global.author.website).toBe("https://johndoe.com");
+            // Update only name
+            updatedDoc = reducer(updatedDoc, setPackageAuthorName({ name: "Jane Doe" }));
+            expect(updatedDoc.state.global.author.name).toBe("Jane Doe");
+            expect(updatedDoc.state.global.author.website).toBe("https://johndoe.com");
+            // Update only website
+            updatedDoc = reducer(updatedDoc, setPackageAuthorWebsite({
+                website: "https://janedoe.com",
+            }));
+            expect(updatedDoc.state.global.author.name).toBe("Jane Doe");
+            expect(updatedDoc.state.global.author.website).toBe("https://janedoe.com");
+        });
+        it("should maintain state integrity with keyword add/remove sequences", () => {
+            const document = utils.createDocument();
+            // Add multiple keywords
+            let updatedDoc = reducer(document, addPackageKeyword({ id: "kw-a", label: "react" }));
+            updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-b", label: "vue" }));
+            updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-c", label: "angular" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(3);
+            // Remove middle one
+            updatedDoc = reducer(updatedDoc, removePackageKeyword({ id: "kw-b" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(2);
+            // Add it back with new label value
+            updatedDoc = reducer(updatedDoc, addPackageKeyword({ id: "kw-b", label: "svelte" }));
+            expect(updatedDoc.state.global.keywords).toHaveLength(3);
+            // Verify order and content
+            const keywordB = updatedDoc.state.global.keywords.find((kw) => kw.id === "kw-b");
+            expect(keywordB?.label).toBe("svelte");
+            // Verify operation history
+        });
     });
 });
-//# sourceMappingURL=document-model.test.js.map

package/dist/document-models/vetra-package/src/utils.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=utils.js.map

package/dist/document-models/vetra-package/utils.d.ts

@@ -0,0 +1,14 @@
+import type { VetraPackagePHState } from "./gen/types.js";
+/** Utils for the VetraPackage document model */
+export declare const utils: {
+    fileExtension: string;
+    createState: import("document-model").CreateState<VetraPackagePHState>;
+    createDocument: import("document-model").CreateDocument<VetraPackagePHState>;
+    loadFromInput: import("document-model").LoadFromInput<VetraPackagePHState>;
+    saveToFileHandle: import("document-model").SaveToFileHandle;
+    isStateOfType: import("document-model").IsStateOfType<VetraPackagePHState>;
+    assertIsStateOfType: import("document-model").AssertIsStateOfType<VetraPackagePHState>;
+    isDocumentOfType: import("document-model").IsDocumentOfType<VetraPackagePHState>;
+    assertIsDocumentOfType: import("document-model").AssertIsDocumentOfType<VetraPackagePHState>;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/document-models/vetra-package/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../document-models/vetra-package/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAI1D,gDAAgD;AAChD,eAAO,MAAM,KAAK;;;;;;;;;;CAGiC,CAAC"}

package/dist/document-models/vetra-package/utils.js

@@ -0,0 +1,7 @@
+import { utils as genUtils } from "./gen/utils.js";
+import * as customUtils from "./src/utils.js";
+/** Utils for the VetraPackage document model */
+export const utils = {
+    ...genUtils,
+    ...customUtils,
+};

package/dist/editors/app-editor/components/AppEditorForm.d.ts

@@ -0,0 +1,2 @@
+export declare const AppEditorForm: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppEditorForm.d.ts.map

package/dist/editors/app-editor/components/AppEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppEditorForm.d.ts","sourceRoot":"","sources":["../../../../editors/app-editor/components/AppEditorForm.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,+CA+OzB,CAAC"}

package/dist/editors/app-editor/components/AppEditorForm.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDocumentTypesInSelectedDrive, useSupportedDocumentTypesInReactor, } from "@powerhousedao/reactor-browser";
+import { useCallback, useEffect, useState } from "react";
+import { actions } from "../../../document-models/app-module/index.js";
+import { StatusPill } from "../../components/index.js";
+import { useDebounce } from "../../hooks/index.js";
+import { useSelectedAppModuleDocument } from "../../hooks/useVetraDocument.js";
+const ALL_IN_DRIVE = "all-in-drive";
+const ALL_IN_REACTOR = "all-in-reactor";
+const ALLOW_ANY = "allow-any";
+export const AppEditorForm = () => {
+    const [document, dispatch] = useSelectedAppModuleDocument();
+    const documentName = document.state.global.name;
+    const status = document.state.global.status;
+    const isDragAndDropEnabled = document.state.global.isDragAndDropEnabled;
+    const allowedDocumentTypes = document.state.global.allowedDocumentTypes;
+    const [appName, setAppName] = useState(documentName);
+    const [isConfirmed, setIsConfirmed] = useState(status === "CONFIRMED");
+    const documentTypesInSelectedDrive = useDocumentTypesInSelectedDrive();
+    const supportedDocumentTypesInReactor = useSupportedDocumentTypesInReactor();
+    const [selectedDocumentTypes, setSelectedDocumentTypes] = useState(allowedDocumentTypes ?? []);
+    // Use the debounce hook for name changes
+    const onNameChange = useCallback((name) => {
+        if (name === documentName)
+            return;
+        console.log("onNameChange", name);
+        dispatch(actions.setAppName({ name }));
+    }, [documentName]);
+    useDebounce(appName, onNameChange, 300);
+    const onConfirm = () => {
+        dispatch(actions.setAppStatus({ status: "CONFIRMED" }));
+    };
+    const onDragAndDropToggle = (enabled) => {
+        if (enabled === isDragAndDropEnabled)
+            return;
+        dispatch(actions.setDragAndDropEnabled({ enabled }));
+    };
+    // Reset confirmation state if status changes back to DRAFT
+    useEffect(() => {
+        if (status === "DRAFT") {
+            setIsConfirmed(false);
+        }
+    }, [status]);
+    // Check if form should be read-only
+    const isReadOnly = isConfirmed || status === "CONFIRMED";
+    const handleConfirm = () => {
+        if (appName.trim()) {
+            setIsConfirmed(true); // Immediate UI update
+            onConfirm();
+        }
+    };
+    const handleAddDocumentType = (documentType) => {
+        if (!documentType || selectedDocumentTypes.includes(documentType))
+            return;
+        setSelectedDocumentTypes([...selectedDocumentTypes, documentType]);
+        dispatch(actions.addDocumentType({ documentType }));
+    };
+    const handleRemoveDocumentType = (documentType) => {
+        setSelectedDocumentTypes(selectedDocumentTypes.filter((dt) => dt !== documentType));
+        dispatch(actions.removeDocumentType({ documentType }));
+    };
+    const handleAddAllDocumentTypesInDrive = () => {
+        const newDocumentTypes = [
+            ...new Set([
+                ...selectedDocumentTypes,
+                ...(documentTypesInSelectedDrive ?? []),
+            ]),
+        ];
+        setSelectedDocumentTypes(newDocumentTypes);
+        dispatch(actions.setDocumentTypes({ documentTypes: newDocumentTypes }));
+    };
+    const handleAddAllDocumentTypesInReactor = () => {
+        const newDocumentTypes = [
+            ...new Set([
+                ...selectedDocumentTypes,
+                ...(supportedDocumentTypesInReactor ?? []),
+            ]),
+        ];
+        setSelectedDocumentTypes(newDocumentTypes);
+        dispatch(actions.setDocumentTypes({ documentTypes: newDocumentTypes }));
+    };
+    const handleAllowAnyDocumentType = () => {
+        setSelectedDocumentTypes([]);
+        dispatch(actions.setDocumentTypes({ documentTypes: [] }));
+    };
+    const handleDocumentTypeSelection = (selectedValue) => {
+        if (selectedValue === ALL_IN_DRIVE) {
+            handleAddAllDocumentTypesInDrive();
+        }
+        else if (selectedValue === ALL_IN_REACTOR) {
+            handleAddAllDocumentTypesInReactor();
+        }
+        else if (selectedValue === ALLOW_ANY) {
+            handleAllowAnyDocumentType();
+        }
+        else {
+            handleAddDocumentType(selectedValue);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6 bg-white p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "App Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "app-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "App Name" }), _jsx("input", { id: "app-name", type: "text", value: appName, onChange: (e) => setAppName(e.target.value), disabled: isReadOnly, className: `w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter app name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && (_jsxs("select", { onChange: (e) => handleDocumentTypeSelection(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { children: "Select a document type to add" }), _jsx("option", { children: "--- Vetra drive document types ---" }), _jsx("option", { value: ALL_IN_DRIVE, children: "Add all document types in Vetra drive" }), documentTypesInSelectedDrive
+                                        ?.filter((dt) => !selectedDocumentTypes.includes(dt))
+                                        .map((docType) => (_jsx("option", { value: docType, children: docType }, docType))), _jsx("option", { children: "--- Reactor document types ---" }), _jsx("option", { value: ALL_IN_REACTOR, children: "Add all document types in Reactor" }), supportedDocumentTypesInReactor
+                                        ?.filter((dt) => !selectedDocumentTypes.includes(dt))
+                                        .map((docType) => (_jsx("option", { value: docType, children: docType }, docType))), _jsx("option", { children: "--- Allow any document type ---" }), _jsx("option", { value: ALLOW_ANY, children: "Allow any document type" })] })), _jsx("div", { className: "space-y-1", children: selectedDocumentTypes.length > 0 ? (selectedDocumentTypes.map((type) => (_jsxs("div", { className: "flex items-center py-1", children: [_jsx("span", { className: "text-sm text-gray-700", children: type }), !isReadOnly && (_jsx("button", { onClick: () => handleRemoveDocumentType(type), className: "ml-2 text-gray-400 hover:text-gray-600 focus:outline-none", children: "\u00D7" }))] }, type)))) : (_jsx("span", { className: "text-sm text-gray-700", children: "All documents (*)" })) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-md mb-4 font-medium text-gray-900", children: "Drag and Drop Settings" }), _jsx("div", { className: "mb-4", children: _jsxs("label", { htmlFor: "drag-and-drop-enabled", className: "flex items-center", children: [_jsx("input", { id: "drag-and-drop-enabled", type: "checkbox", checked: isDragAndDropEnabled, onChange: (e) => onDragAndDropToggle(e.target.checked), disabled: isReadOnly, className: `mr-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 ${isReadOnly ? "cursor-not-allowed" : ""}` }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Enable drag and drop" })] }) })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !appName.trim(), className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Confirm" }) }))] }));
+};

package/dist/editors/app-editor/components/EditName.d.ts

@@ -0,0 +1,3 @@
+/** Displays the name of the selected AppModule document and allows editing it */
+export declare function EditAppModuleName(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EditName.d.ts.map

package/dist/editors/app-editor/components/EditName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditName.d.ts","sourceRoot":"","sources":["../../../../editors/app-editor/components/EditName.tsx"],"names":[],"mappings":"AAKA,iFAAiF;AACjF,wBAAgB,iBAAiB,mDAqEhC"}

package/dist/editors/app-editor/components/EditName.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { setName } from "document-model";
+import { useState } from "react";
+import { useSelectedAppModuleDocument } from "@powerhousedao/vetra/document-models/app-module";
+/** Displays the name of the selected AppModule document and allows editing it */
+export function EditAppModuleName() {
+    const [appModuleDocument, dispatch] = useSelectedAppModuleDocument();
+    const [isEditing, setIsEditing] = useState(false);
+    if (!appModuleDocument)
+        return null;
+    const appModuleDocumentName = appModuleDocument.header.name;
+    const onClickEditAppModuleName = () => {
+        setIsEditing(true);
+    };
+    const onClickCancelEditAppModuleName = () => {
+        setIsEditing(false);
+    };
+    const onSubmitSetName = (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        const nameInput = form.elements.namedItem("name");
+        const name = nameInput.value;
+        if (!name)
+            return;
+        dispatch(setName(name));
+        setIsEditing(false);
+    };
+    if (isEditing)
+        return (_jsxs("form", { className: "flex items-center justify-between gap-2", onSubmit: onSubmitSetName, children: [_jsx("input", { className: "p-1 text-lg font-semibold text-gray-900", type: "text", name: "name", defaultValue: appModuleDocumentName, autoFocus: true }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "submit", className: "text-sm text-gray-600", children: "Save" }), _jsx("button", { className: "text-sm text-red-800", onClick: onClickCancelEditAppModuleName, children: "Cancel" })] })] }));
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: appModuleDocumentName }), _jsx("button", { className: "text-sm text-gray-600", onClick: onClickEditAppModuleName, children: "Edit Name" })] }));
+}

package/dist/editors/app-editor/config.d.ts

@@ -0,0 +1,3 @@
+import type { PHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+export declare const editorConfig: PHDocumentEditorConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/editors/app-editor/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,eAAO,MAAM,YAAY,EAAE,sBAE1B,CAAC"}

package/dist/editors/app-editor/config.js

@@ -0,0 +1,3 @@
+export const editorConfig = {
+    isExternalControlsEnabled: false,
+};

package/dist/editors/app-editor/editor.d.ts

@@ -0,0 +1,2 @@
+export default function Editor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

package/dist/editors/app-editor/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/editor.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAS7B"}

package/dist/editors/app-editor/editor.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+import { useSetPHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+import { AppEditorForm } from "./components/AppEditorForm.js";
+import { editorConfig } from "./config.js";
+export default function Editor() {
+    useSetPHDocumentEditorConfig(editorConfig);
+    return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(AppEditorForm, {})] }));
+}

package/dist/editors/app-editor/editor.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=editor.test.d.ts.map

package/dist/editors/app-editor/editor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.test.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/editor.test.tsx"],"names":[],"mappings":""}