@powerhousedao/vetra 5.0.0-staging.9 → 5.0.1-staging.3

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

@@ -1,16 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { useDebounce } from "../../hooks/index.js";
+import { useDocumentTypesInSelectedDrive, useSupportedDocumentTypesInReactor, } from "@powerhousedao/reactor-browser";
+import { useEffect, useState } from "react";
+import { actions } from "../../../document-models/app-module/index.js";
 import { StatusPill } from "../../components/index.js";
-export const AppEditorForm = ({ appName: initialAppName = "", status = "DRAFT", onNameChange, onConfirm }) => {
-    const [appName, setAppName] = useState(initialAppName);
-    const [isConfirmed, setIsConfirmed] = useState(false);
+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 = (name) => {
+        if (name === documentName)
+            return;
+        dispatch(actions.setAppName({ name }));
+    };
     useDebounce(appName, onNameChange, 300);
-    // Update local state when initialAppName changes
-    useEffect(() => {
-        setAppName(initialAppName);
-    }, [initialAppName]);
+    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") {
@@ -22,9 +45,60 @@ export const AppEditorForm = ({ appName: initialAppName = "", status = "DRAFT",
     const handleConfirm = () => {
         if (appName.trim()) {
             setIsConfirmed(true); // Immediate UI update
-            onConfirm?.();
+            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 p-6 bg-white", 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", { className: "block text-sm font-medium text-gray-700 mb-2", children: "App Name" }), _jsx("input", { type: "text", value: appName, onChange: (e) => setAppName(e.target.value), disabled: isReadOnly, className: `w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${isReadOnly ? 'bg-gray-100 cursor-not-allowed' : ''}`, placeholder: "Enter app name" })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !appName.trim(), className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed", children: "Confirm" }) }))] }));
+    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" }) }))] }));
 };
-//# sourceMappingURL=AppEditorForm.js.map

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

@@ -1,4 +1,2 @@
-import type { EditorProps } from "document-model";
-export type IProps = EditorProps;
-export default function Editor(props: IProps): import("react/jsx-runtime").JSX.Element;
+export declare function Editor(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=editor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQlD,MAAM,MAAM,MAAM,GAAG,WAAW,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,MAAM,2CAwB3C"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/editor.tsx"],"names":[],"mappings":"AAKA,wBAAgB,MAAM,4CASrB"}

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

@@ -1,20 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useDocumentById } from "@powerhousedao/reactor-browser";
-import { useCallback } from "react";
-import { actions, } from "../../document-models/app-module/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system";
+import { useSetPHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
 import { AppEditorForm } from "./components/AppEditorForm.js";
-export default function Editor(props) {
-    const { document: initialDocument } = props;
-    const [document, dispatch] = useDocumentById(initialDocument.header.id);
-    const unsafeCastOfDocument = document;
-    const onNameChange = useCallback((name) => {
-        if (name === unsafeCastOfDocument.state.global.name)
-            return;
-        dispatch(actions.setAppName({ name }));
-    }, [unsafeCastOfDocument.state.global.name, dispatch]);
-    const onConfirm = useCallback(() => {
-        dispatch(actions.setAppStatus({ status: "CONFIRMED" }));
-    }, [dispatch]);
-    return (_jsx("div", { children: _jsx(AppEditorForm, { appName: unsafeCastOfDocument.state.global.name ?? "", status: unsafeCastOfDocument.state.global.status, onNameChange: onNameChange, onConfirm: onConfirm }) }));
+import { editorConfig } from "./config.js";
+export function Editor() {
+    useSetPHDocumentEditorConfig(editorConfig);
+    return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(AppEditorForm, {})] }));
 }
-//# sourceMappingURL=editor.js.map

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":""}

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

@@ -0,0 +1,435 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useSelectedAppModuleDocument } from "../hooks/useVetraDocument.js";
+import { Editor } from "./editor.js";
+vi.mock("../hooks/useVetraDocument.js", () => ({
+    useSelectedAppModuleDocument: vi.fn(),
+}));
+vi.mock("@powerhousedao/reactor-browser", async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useDocumentTypesInSelectedDrive: vi.fn(() => [
+            "powerhouse/document-model",
+            "powerhouse/budget-statement",
+            "powerhouse/project-tracker",
+        ]),
+        useSupportedDocumentTypesInReactor: vi.fn(() => []),
+        useSetPHDocumentEditorConfig: vi.fn(),
+        // These are needed by DocumentToolbar but mocked in setupTests
+        useSelectedDocument: vi.fn(() => [null, vi.fn()]),
+        useDocumentById: vi.fn(() => [null, vi.fn()]),
+        useDocumentTimeline: vi.fn(() => []),
+        useNodeParentFolderById: vi.fn(() => null),
+        setSelectedNode: vi.fn(),
+        setSelectedTimelineItem: vi.fn(),
+        showRevisionHistory: vi.fn(),
+        exportDocument: vi.fn(),
+    };
+});
+describe("AppModule Editor", () => {
+    let mockDispatch;
+    beforeEach(() => {
+        mockDispatch = vi.fn();
+        vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+            {
+                state: {
+                    global: {
+                        name: "",
+                        status: "DRAFT",
+                        allowedDocumentTypes: null,
+                        isDragAndDropEnabled: true,
+                    },
+                },
+            },
+            mockDispatch,
+        ]);
+    });
+    describe("Core Rendering", () => {
+        it("should render all main form sections and labels", () => {
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("App Configuration")).toBeInTheDocument();
+            expect(screen.getByText("App Name")).toBeInTheDocument();
+            expect(screen.getByText("Document Types")).toBeInTheDocument();
+            expect(screen.getByText("Drag and Drop Settings")).toBeInTheDocument();
+            expect(screen.getByText("Enable drag and drop")).toBeInTheDocument();
+            expect(screen.getByText("Confirm")).toBeInTheDocument();
+        });
+        it("should display existing app data when document has values", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: [
+                                "powerhouse/document-model",
+                                "powerhouse/budget-statement",
+                            ],
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByDisplayValue("test-app")).toBeInTheDocument();
+            expect(screen.getByText("powerhouse/document-model")).toBeInTheDocument();
+            expect(screen.getByText("powerhouse/budget-statement")).toBeInTheDocument();
+            const checkbox = screen.getByLabelText("Enable drag and drop");
+            expect(checkbox).toBeChecked();
+        });
+    });
+    describe("App Name Input", () => {
+        it("should dispatch setAppName when name changes (debounced)", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("App Name");
+            await user.type(nameInput, "new-app");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_APP_NAME",
+                    input: { name: "new-app" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch when clearing a non-empty field", async () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "existing-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: null,
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("App Name");
+            await user.clear(nameInput);
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_APP_NAME",
+                    input: { name: "" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should NOT dispatch when typing identical value without clearing", async () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test",
+                            status: "DRAFT",
+                            allowedDocumentTypes: null,
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("App Name");
+            // Simulate user selecting all text and typing the same value
+            await user.tripleClick(nameInput); // Select all
+            await user.type(nameInput, "test");
+            await waitFor(() => {
+                expect(mockDispatch).not.toHaveBeenCalled();
+            });
+        });
+        it("should NOT dispatch when both old and new values are empty", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("App Name");
+            await user.click(nameInput);
+            await user.tab();
+            await waitFor(() => {
+                expect(mockDispatch).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe("Document Types Management", () => {
+        it("should add regular document type from dropdown", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const select = screen.getByRole("combobox");
+            await user.selectOptions(select, "powerhouse/document-model");
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "ADD_DOCUMENT_TYPE",
+                input: {
+                    documentType: "powerhouse/document-model",
+                },
+            }));
+        });
+        it("should add all document types when selecting 'all-in-drive'", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const select = screen.getByRole("combobox");
+            await user.selectOptions(select, "all-in-drive");
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "SET_DOCUMENT_TYPES",
+                input: {
+                    documentTypes: [
+                        "powerhouse/document-model",
+                        "powerhouse/budget-statement",
+                        "powerhouse/project-tracker",
+                    ],
+                },
+            }));
+        });
+        it("should remove document type", async () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: [
+                                "powerhouse/document-model",
+                                "powerhouse/budget-statement",
+                            ],
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            // Find the remove button for the first document type
+            const documentModelText = screen.getByText("powerhouse/document-model");
+            const removeButton = documentModelText.parentElement?.querySelector("button");
+            if (removeButton) {
+                await user.click(removeButton);
+            }
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "REMOVE_DOCUMENT_TYPE",
+                input: { documentType: "powerhouse/document-model" },
+            }));
+        });
+        it("should NOT show duplicate document type in dropdown", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: ["powerhouse/document-model"],
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const select = screen.getByRole("combobox");
+            // Document type should not be in the options since it's already selected
+            const options = Array.from(select.querySelectorAll("option")).map((opt) => opt.value);
+            expect(options).not.toContain("powerhouse/document-model");
+            // But other document types should still be available
+            expect(options).toContain("powerhouse/budget-statement");
+            expect(options).toContain("powerhouse/project-tracker");
+        });
+        it("should display existing document types list", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: [
+                                "powerhouse/document-model",
+                                "powerhouse/budget-statement",
+                            ],
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("powerhouse/document-model")).toBeInTheDocument();
+            expect(screen.getByText("powerhouse/budget-statement")).toBeInTheDocument();
+        });
+        it("should show 'All documents (*)' when allowedDocumentTypes is empty", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: [],
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("All documents (*)")).toBeInTheDocument();
+        });
+        it("should show 'All documents (*)' when allowedDocumentTypes is null", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: null,
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("All documents (*)")).toBeInTheDocument();
+        });
+    });
+    describe("Drag and Drop Toggle", () => {
+        it("should dispatch setDragAndDropEnabled when checkbox toggled", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const checkbox = screen.getByLabelText("Enable drag and drop");
+            await user.click(checkbox);
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "SET_DRAG_AND_DROP_ENABLED",
+                input: { enabled: false },
+            }));
+        });
+        it("should NOT dispatch when value equals current value", async () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: null,
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const checkbox = screen.getByLabelText("Enable drag and drop");
+            // Checkbox is already checked, so clicking it would toggle to false
+            await user.click(checkbox);
+            // The dispatch should be called with enabled: false
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "SET_DRAG_AND_DROP_ENABLED",
+                input: { enabled: false },
+            }));
+        });
+    });
+    describe("Confirm Button", () => {
+        it("should dispatch setAppStatus when confirm clicked", async () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: null,
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            await user.click(confirmButton);
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "SET_APP_STATUS",
+                input: { status: "CONFIRMED" },
+            }));
+        });
+        it("should be disabled when app name is empty", () => {
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            expect(confirmButton).toBeDisabled();
+        });
+        it("should be hidden when status is CONFIRMED", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "CONFIRMED",
+                            allowedDocumentTypes: null,
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.queryByText("Confirm");
+            expect(confirmButton).not.toBeInTheDocument();
+        });
+    });
+    describe("Read-only Mode", () => {
+        it("should disable form fields when status is CONFIRMED", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "CONFIRMED",
+                            allowedDocumentTypes: ["powerhouse/document-model"],
+                            isDragAndDropEnabled: true,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("App Name");
+            const checkbox = screen.getByLabelText("Enable drag and drop");
+            expect(nameInput).toBeDisabled();
+            expect(checkbox).toBeDisabled();
+            // Document types dropdown should not be visible in read-only mode
+            const select = screen.queryByRole("combobox");
+            expect(select).not.toBeInTheDocument();
+            // Remove buttons should not be visible
+            const removeButtons = screen.queryAllByText("×");
+            expect(removeButtons).toHaveLength(0);
+        });
+        it("should enable form fields when status is DRAFT", () => {
+            vi.mocked(useSelectedAppModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-app",
+                            status: "DRAFT",
+                            allowedDocumentTypes: ["powerhouse/document-model"],
+                            isDragAndDropEnabled: false,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("App Name");
+            const checkbox = screen.getByLabelText("Enable drag and drop");
+            expect(nameInput).not.toBeDisabled();
+            expect(checkbox).not.toBeDisabled();
+            // Document types dropdown should be visible
+            const select = screen.getByRole("combobox");
+            expect(select).toBeInTheDocument();
+            // Remove button should be visible
+            const removeButtons = screen.queryAllByText("×");
+            expect(removeButtons.length).toBeGreaterThan(0);
+        });
+    });
+});

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,eAAO,MAAM,MAAM,EAAE,YASpB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/app-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,eAAO,MAAM,MAAM,EAAE,YAOpB,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,13 +1,10 @@
-import Editor from "./editor.js";
+import { Editor } from "./editor.js";
 export const module = {
     Component: Editor,
     documentTypes: ["powerhouse/app"],
     config: {
         id: "app-module-editor",
-        disableExternalControls: true,
-        documentToolbarEnabled: true,
-        showSwitchboardLink: true,
+        name: "App Module Editor",
     },
 };
 export default module;
-//# sourceMappingURL=index.js.map

package/dist/editors/components/StatusPill.d.ts

@@ -1,5 +1,5 @@
 export interface StatusPillProps {
-    status: 'draft' | 'confirmed';
+    status: "draft" | "confirmed";
     label: string;
 }
 export declare const StatusPill: React.FC<StatusPillProps>;

package/dist/editors/components/StatusPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusPill.d.ts","sourceRoot":"","sources":["../../../editors/components/StatusPill.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAahD,CAAC"}
+{"version":3,"file":"StatusPill.d.ts","sourceRoot":"","sources":["../../../editors/components/StatusPill.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAC"}