@powerhousedao/vetra 4.1.0-dev.9 → 4.1.0-dev.91

package/dist/editors/processor-editor/components/ProcessorEditorForm.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { StatusPill } from "../../components/index.js";
+import { useAvailableDocumentTypes, useDebounce } from "../../hooks/index.js";
+export const ProcessorEditorForm = ({ processorName: initialProcessorName = "", processorType: initialProcessorType = "", documentTypes: initialDocumentTypes = [], status = "DRAFT", onNameChange, onTypeChange, onAddDocumentType, onRemoveDocumentType, onConfirm, }) => {
+    const [processorName, setProcessorName] = useState(initialProcessorName);
+    const [processorType, setProcessorType] = useState(initialProcessorType);
+    const [documentTypes, setDocumentTypes] = useState(initialDocumentTypes);
+    const [selectedDocumentType, setSelectedDocumentType] = useState("");
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    // Get available document types from the hook (combines reactor and vetra drive)
+    const availableDocumentTypes = useAvailableDocumentTypes();
+    // Use the debounce hook for name and type changes
+    useDebounce(processorName, onNameChange, 300);
+    useDebounce(processorType, onTypeChange, 300);
+    // Update local state when initial values change
+    useEffect(() => {
+        setProcessorName(initialProcessorName);
+    }, [initialProcessorName]);
+    useEffect(() => {
+        setProcessorType(initialProcessorType);
+    }, [initialProcessorType]);
+    useEffect(() => {
+        setDocumentTypes(initialDocumentTypes);
+    }, [initialDocumentTypes]);
+    // 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 (processorName.trim() && processorType && documentTypes.length > 0) {
+            setIsConfirmed(true); // Immediate UI update
+            onConfirm?.();
+        }
+    };
+    const handleRemoveDocumentType = (id) => {
+        setDocumentTypes(documentTypes.filter((dt) => dt.id !== id));
+        onRemoveDocumentType?.(id);
+    };
+    const canConfirm = processorName.trim() && processorType && documentTypes.length > 0;
+    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: "Processor Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "processor-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Processor Name" }), _jsx("input", { id: "processor-name", type: "text", value: processorName, onChange: (e) => setProcessorName(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 processor name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "processor-type", className: "mb-2 block text-sm font-medium text-gray-700", children: "Type" }), _jsxs("select", { id: "processor-type", value: processorType, onChange: (e) => setProcessorType(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" : ""}`, children: [_jsx("option", { value: "", children: "Select type..." }), _jsx("option", { value: "analytics", children: "Analytics" }), _jsx("option", { value: "relational", children: "Relational Database" })] })] }), _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 && availableDocumentTypes.length > 0 && (_jsxs("select", { id: "document-types", value: selectedDocumentType, onChange: (e) => {
+                                    const selectedValue = e.target.value;
+                                    if (selectedValue &&
+                                        !documentTypes.some((dt) => dt.documentType === selectedValue)) {
+                                        const id = Date.now().toString();
+                                        const newType = {
+                                            id,
+                                            documentType: selectedValue,
+                                        };
+                                        setDocumentTypes([...documentTypes, newType]);
+                                        onAddDocumentType?.(id, selectedValue);
+                                    }
+                                    setSelectedDocumentType("");
+                                }, 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", { value: "", children: "Select a document type to add" }), availableDocumentTypes
+                                        .filter((docType) => !documentTypes.some((dt) => dt.documentType === docType))
+                                        .map((docType) => (_jsx("option", { value: docType, children: docType }, docType)))] })), _jsx("div", { className: "space-y-1", children: documentTypes.map((type) => (_jsxs("div", { className: "flex items-center py-1", children: [_jsx("span", { className: "text-sm text-gray-700", children: type.documentType }), !isReadOnly && (_jsx("button", { onClick: () => handleRemoveDocumentType(type.id), className: "ml-2 text-gray-400 hover:text-gray-600 focus:outline-none", children: "\u00D7" }))] }, type.id))) })] })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !canConfirm, 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/processor-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/processor-editor/config.d.ts.map

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/processor-editor/editor.tsx"],"names":[],"mappings":"AAQA,wBAAgB,MAAM,4CAuDrB"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system";
+import { useSetPHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+import { useCallback } from "react";
+import { actions } from "../../document-models/processor-module/index.js";
+import { useSelectedProcessorModuleDocument } from "../hooks/useVetraDocument.js";
+import { ProcessorEditorForm } from "./components/ProcessorEditorForm.js";
+import { editorConfig } from "./config.js";
+export function Editor() {
+    useSetPHDocumentEditorConfig(editorConfig);
+    const [document, dispatch] = useSelectedProcessorModuleDocument();
+    const onConfirm = useCallback(() => {
+        // Dispatch all actions at once
+        dispatch([actions.setProcessorStatus({ status: "CONFIRMED" })]);
+    }, [dispatch]);
+    const onNameChange = useCallback((name) => {
+        if (name === document.state.global.name)
+            return;
+        dispatch(actions.setProcessorName({ name }));
+    }, [document.state.global.name, dispatch]);
+    const onTypeChange = useCallback((type) => {
+        if (type === document.state.global.type)
+            return;
+        dispatch(actions.setProcessorType({ type }));
+    }, [document.state.global.type, dispatch]);
+    const onAddDocumentType = useCallback((id, documentType) => {
+        dispatch(actions.addDocumentType({ id, documentType }));
+    }, [dispatch]);
+    const onRemoveDocumentType = useCallback((id) => {
+        dispatch(actions.removeDocumentType({ id }));
+    }, [dispatch]);
+    return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(ProcessorEditorForm, { onNameChange: onNameChange, onTypeChange: onTypeChange, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType, status: document.state.global.status, processorName: document.state.global.name ?? "", processorType: document.state.global.type ?? "", documentTypes: document.state.global.documentTypes ?? [], onConfirm: onConfirm })] }));
+}

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

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

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

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

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

@@ -0,0 +1,459 @@
+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 { useSelectedProcessorModuleDocument } from "../hooks/useVetraDocument.js";
+import { Editor } from "./editor.js";
+vi.mock("../hooks/useVetraDocument.js", () => ({
+    useSelectedProcessorModuleDocument: vi.fn(),
+}));
+vi.mock("../hooks/useAvailableDocumentTypes.js", () => ({
+    useAvailableDocumentTypes: vi.fn(() => [
+        "powerhouse/document-model",
+        "powerhouse/budget-statement",
+        "powerhouse/project-tracker",
+    ]),
+}));
+describe("ProcessorModule Editor", () => {
+    let mockDispatch;
+    beforeEach(() => {
+        mockDispatch = vi.fn();
+        vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+            {
+                state: {
+                    global: {
+                        name: "",
+                        type: "",
+                        status: "DRAFT",
+                        documentTypes: [],
+                    },
+                },
+            },
+            mockDispatch,
+        ]);
+    });
+    describe("Core Rendering", () => {
+        it("should render all main form sections and labels", () => {
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("Processor Configuration")).toBeInTheDocument();
+            expect(screen.getByText("Processor Name")).toBeInTheDocument();
+            expect(screen.getByText("Type")).toBeInTheDocument();
+            expect(screen.getByText("Document Types")).toBeInTheDocument();
+            expect(screen.getByText("Confirm")).toBeInTheDocument();
+        });
+        it("should display existing processor data when document has values", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                                { id: "dt-2", documentType: "powerhouse/budget-statement" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByDisplayValue("test-processor")).toBeInTheDocument();
+            // Check that the type select has the correct value
+            const typeSelect = screen.getByLabelText("Type");
+            expect(typeSelect.value).toBe("analytics");
+            expect(screen.getByText("powerhouse/document-model")).toBeInTheDocument();
+            expect(screen.getByText("powerhouse/budget-statement")).toBeInTheDocument();
+        });
+    });
+    describe("Processor Name Input", () => {
+        it("should dispatch setProcessorName when name changes (debounced)", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Processor Name");
+            await user.type(nameInput, "new-processor");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PROCESSOR_NAME",
+                    input: { name: "new-processor" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch when clearing a non-empty field", async () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "existing-processor",
+                            type: "",
+                            status: "DRAFT",
+                            documentTypes: [],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Processor Name");
+            await user.clear(nameInput);
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PROCESSOR_NAME",
+                    input: { name: "" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should NOT dispatch when typing identical value without clearing", async () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test",
+                            type: "",
+                            status: "DRAFT",
+                            documentTypes: [],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Processor Name");
+            await user.tripleClick(nameInput);
+            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("Processor Name");
+            await user.click(nameInput);
+            await user.tab();
+            await waitFor(() => {
+                expect(mockDispatch).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe("Processor Type Dropdown", () => {
+        it("should dispatch setProcessorType when type changes (debounced)", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const typeSelect = screen.getByLabelText("Type");
+            await user.selectOptions(typeSelect, "analytics");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PROCESSOR_TYPE",
+                    input: { type: "analytics" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should NOT dispatch when selecting same type", async () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const typeSelect = screen.getByLabelText("Type");
+            // Select the same type that's already set
+            await user.selectOptions(typeSelect, "analytics");
+            // Wait to ensure debounce has time to fire (if it would)
+            await new Promise((resolve) => setTimeout(resolve, 400));
+            // Should NOT have dispatched because "analytics" is already the current value
+            expect(mockDispatch).not.toHaveBeenCalled();
+        });
+        it("should show correct type options", () => {
+            render(_jsx(Editor, {}));
+            const typeSelect = screen.getByLabelText("Type");
+            const options = Array.from(typeSelect.querySelectorAll("option")).map((opt) => opt.value);
+            expect(options).toContain("analytics");
+            expect(options).toContain("relational");
+        });
+    });
+    describe("Document Types Management", () => {
+        it("should add document type from dropdown", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const select = screen.getByLabelText("Document Types");
+            await user.selectOptions(select, "powerhouse/document-model");
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "ADD_DOCUMENT_TYPE",
+                input: expect.objectContaining({
+                    documentType: "powerhouse/document-model",
+                    id: expect.any(String),
+                }),
+            }));
+        });
+        it("should remove document type", async () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                                { id: "dt-2", documentType: "powerhouse/budget-statement" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            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: { id: "dt-1" },
+            }));
+        });
+        it("should NOT show duplicate document type in dropdown", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const select = screen.getByLabelText("Document Types");
+            const options = Array.from(select.querySelectorAll("option")).map((opt) => opt.value);
+            expect(options).not.toContain("powerhouse/document-model");
+            expect(options).toContain("powerhouse/budget-statement");
+            expect(options).toContain("powerhouse/project-tracker");
+        });
+        it("should add multiple document types", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const select = screen.getByLabelText("Document Types");
+            await user.selectOptions(select, "powerhouse/document-model");
+            await user.selectOptions(select, "powerhouse/budget-statement");
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "ADD_DOCUMENT_TYPE",
+                input: expect.objectContaining({
+                    documentType: "powerhouse/document-model",
+                }),
+            }));
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "ADD_DOCUMENT_TYPE",
+                input: expect.objectContaining({
+                    documentType: "powerhouse/budget-statement",
+                }),
+            }));
+        });
+        it("should display existing document types list", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                                { id: "dt-2", documentType: "powerhouse/budget-statement" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("powerhouse/document-model")).toBeInTheDocument();
+            expect(screen.getByText("powerhouse/budget-statement")).toBeInTheDocument();
+        });
+    });
+    describe("Confirm Button", () => {
+        it("should dispatch setProcessorStatus when confirm clicked", async () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            await user.click(confirmButton);
+            expect(mockDispatch).toHaveBeenCalledWith([
+                expect.objectContaining({
+                    type: "SET_PROCESSOR_STATUS",
+                    input: { status: "CONFIRMED" },
+                }),
+            ]);
+        });
+        it("should be disabled when processor name is empty", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            expect(confirmButton).toBeDisabled();
+        });
+        it("should be disabled when processor type is empty", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            expect(confirmButton).toBeDisabled();
+        });
+        it("should be disabled when no document types selected", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            expect(confirmButton).toBeDisabled();
+        });
+        it("should be hidden when status is CONFIRMED", () => {
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "CONFIRMED",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                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(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "CONFIRMED",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Processor Name");
+            const typeSelect = screen.getByLabelText("Type");
+            expect(nameInput).toBeDisabled();
+            expect(typeSelect).toBeDisabled();
+            // Document types dropdown should not be visible in read-only mode
+            const select = screen.queryByLabelText("Document Types");
+            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(useSelectedProcessorModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-processor",
+                            type: "analytics",
+                            status: "DRAFT",
+                            documentTypes: [
+                                { id: "dt-1", documentType: "powerhouse/document-model" },
+                            ],
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Processor Name");
+            const typeSelect = screen.getByLabelText("Type");
+            expect(nameInput).not.toBeDisabled();
+            expect(typeSelect).not.toBeDisabled();
+            // Document types dropdown should be visible
+            const select = screen.getByLabelText("Document Types");
+            expect(select).toBeInTheDocument();
+            // Remove button should be visible
+            const removeButtons = screen.queryAllByText("×");
+            expect(removeButtons.length).toBeGreaterThan(0);
+        });
+    });
+});

package/dist/editors/processor-editor/index.d.ts

@@ -0,0 +1,4 @@
+import type { EditorModule } from "document-model";
+export declare const module: EditorModule;
+export default module;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/processor-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/processor-editor/index.js

@@ -0,0 +1,10 @@
+import { Editor } from "./editor.js";
+export const module = {
+    Component: Editor,
+    documentTypes: ["powerhouse/processor"],
+    config: {
+        id: "processor-module-editor",
+        name: "Processor Module Editor",
+    },
+};
+export default module;

package/dist/editors/subgraph-editor/components/SubgraphEditorForm.d.ts

@@ -0,0 +1,8 @@
+export interface SubgraphEditorFormProps {
+    subgraphName?: string;
+    status?: string;
+    onNameChange?: (name: string) => void;
+    onConfirm?: () => void;
+}
+export declare const SubgraphEditorForm: React.FC<SubgraphEditorFormProps>;
+//# sourceMappingURL=SubgraphEditorForm.d.ts.map

package/dist/editors/subgraph-editor/components/SubgraphEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubgraphEditorForm.d.ts","sourceRoot":"","sources":["../../../../editors/subgraph-editor/components/SubgraphEditorForm.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiFhE,CAAC"}

package/dist/editors/subgraph-editor/components/SubgraphEditorForm.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { StatusPill } from "../../components/index.js";
+import { useDebounce } from "../../hooks/index.js";
+export const SubgraphEditorForm = ({ subgraphName: initialSubgraphName = "", status = "DRAFT", onNameChange, onConfirm, }) => {
+    const [subgraphName, setSubgraphName] = useState(initialSubgraphName);
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    // Use the debounce hook for name changes
+    useDebounce(subgraphName, onNameChange, 300);
+    // Update local state when initialSubgraphName changes
+    useEffect(() => {
+        setSubgraphName(initialSubgraphName);
+    }, [initialSubgraphName]);
+    // 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 (subgraphName.trim()) {
+            setIsConfirmed(true); // Immediate UI update
+            onConfirm?.();
+        }
+    };
+    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: "Subgraph Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "subgraph-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Subgraph Name" }), _jsx("input", { id: "subgraph-name", type: "text", value: subgraphName, onChange: (e) => setSubgraphName(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 subgraph name" })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !subgraphName.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/subgraph-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