@powerhousedao/vetra 6.0.0-dev.4 → 6.0.0-dev.41

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

@@ -2,6 +2,7 @@ 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 { utils } from "../../document-models/processor-module/utils.js";
 import { useSelectedProcessorModuleDocument } from "../hooks/useVetraDocument.js";
 import Editor from "./editor.js";
 vi.mock("../hooks/useVetraDocument.js", () => ({
@@ -16,19 +17,11 @@ vi.mock("../hooks/useAvailableDocumentTypes.js", () => ({
 }));
 describe("ProcessorModule Editor", () => {
     let mockDispatch;
+    const document = utils.createDocument();
     beforeEach(() => {
         mockDispatch = vi.fn();
         vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
-            {
-                state: {
-                    global: {
-                        name: "",
-                        type: "",
-                        status: "DRAFT",
-                        documentTypes: [],
-                    },
-                },
-            },
+            document,
             mockDispatch,
         ]);
     });
@@ -42,20 +35,20 @@ describe("ProcessorModule Editor", () => {
             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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                        { id: "dt-2", documentType: "powerhouse/budget-statement" },
+                    ],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -81,17 +74,17 @@ describe("ProcessorModule Editor", () => {
             }, { 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: [],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "existing-processor",
+                    type: "",
+                    status: "DRAFT",
+                    documentTypes: [],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             const user = userEvent.setup();
@@ -106,17 +99,17 @@ describe("ProcessorModule Editor", () => {
             }, { 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: [],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test",
+                    type: "",
+                    status: "DRAFT",
+                    documentTypes: [],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             const user = userEvent.setup();
@@ -153,17 +146,17 @@ describe("ProcessorModule Editor", () => {
             }, { 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: [],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             const user = userEvent.setup();
@@ -199,20 +192,20 @@ describe("ProcessorModule Editor", () => {
             }));
         });
         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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                        { id: "dt-2", documentType: "powerhouse/budget-statement" },
+                    ],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             const user = userEvent.setup();
@@ -228,19 +221,19 @@ describe("ProcessorModule Editor", () => {
             }));
         });
         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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -270,20 +263,20 @@ describe("ProcessorModule Editor", () => {
             }));
         });
         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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                        { id: "dt-2", documentType: "powerhouse/budget-statement" },
+                    ],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -293,19 +286,19 @@ describe("ProcessorModule Editor", () => {
     });
     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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             const user = userEvent.setup();
@@ -320,19 +313,19 @@ describe("ProcessorModule Editor", () => {
             ]);
         });
         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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -340,19 +333,19 @@ describe("ProcessorModule Editor", () => {
             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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -360,17 +353,17 @@ describe("ProcessorModule Editor", () => {
             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: [],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -378,19 +371,19 @@ describe("ProcessorModule Editor", () => {
             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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "CONFIRMED",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -400,19 +393,19 @@ describe("ProcessorModule Editor", () => {
     });
     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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "CONFIRMED",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: ["connect"],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));
@@ -428,19 +421,19 @@ describe("ProcessorModule Editor", () => {
             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" },
-                            ],
-                        },
-                    },
+            const document = utils.createDocument({
+                global: {
+                    name: "test-processor",
+                    type: "analytics",
+                    status: "DRAFT",
+                    documentTypes: [
+                        { id: "dt-1", documentType: "powerhouse/document-model" },
+                    ],
+                    processorApps: [],
                 },
+            });
+            vi.mocked(useSelectedProcessorModuleDocument).mockReturnValue([
+                document,
                 mockDispatch,
             ]);
             render(_jsx(Editor, {}));

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

@@ -25,5 +25,5 @@ export const SubgraphEditorForm = ({ subgraphName: initialSubgraphName = "", sta
             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" }) }))] }));
+    return (_jsxs("div", { className: "space-y-6 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/editor.js

@@ -17,5 +17,5 @@ export default function Editor() {
     const onConfirm = useCallback(() => {
         dispatch(actions.setSubgraphStatus({ status: "CONFIRMED" }));
     }, [dispatch]);
-    return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(SubgraphEditorForm, { subgraphName: document.state.global.name ?? "", status: document.state.global.status, onNameChange: onNameChange, onConfirm: onConfirm })] }));
+    return (_jsxs("div", { className: "bg-gray-50 p-6", children: [_jsx(DocumentToolbar, {}), _jsx(SubgraphEditorForm, { subgraphName: document.state.global.name ?? "", status: document.state.global.status, onNameChange: onNameChange, onConfirm: onConfirm })] }));
 }

package/dist/editors/vetra-drive-app/DriveExplorer.js

@@ -3,5 +3,5 @@ import { DriveHeader } from "./components/DriveHeader.js";
 import { ModuleSpecificationsSection } from "./components/ModuleSpecificationsSection.js";
 import { PackageInformationSection } from "./components/PackageInformationSection.js";
 export const DriveExplorer = ({ driveId, driveName, driveUrl, documentModels = [], editors = [], apps = [], subgraphs = [], processors = [], codegenProcessors = [], onAddDocumentModel, onAddEditor, onAddApp, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, packageDocumentId, onAddPackageDocument, onOpenPackageDocument, onOpenDocument, onDelete, }) => {
-    return (_jsxs("div", { className: "min-h-screen bg-white", children: [_jsx(DriveHeader, { driveId: driveId, driveName: driveName, driveUrl: driveUrl }), _jsxs("div", { className: "mx-6 mt-6 bg-white", children: [_jsx(PackageInformationSection, { className: "mb-6", packageDocumentId: packageDocumentId, onAddPackageDocument: onAddPackageDocument, onOpenPackageDocument: onOpenPackageDocument }), _jsx(ModuleSpecificationsSection, { documentModels: documentModels, editors: editors, apps: apps, subgraphs: subgraphs, processors: processors, codegenProcessors: codegenProcessors, onAddDocumentModel: onAddDocumentModel, onAddEditor: onAddEditor, onAddApp: onAddApp, onAddSubgraph: onAddSubgraph, onAddProcessor: onAddProcessor, onAddCodegenProcessor: onAddCodegenProcessor, onOpenDocument: onOpenDocument, onDelete: onDelete })] })] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(DriveHeader, { driveId: driveId, driveName: driveName, driveUrl: driveUrl }), _jsxs("div", { className: "mx-6 mt-6", children: [_jsx(PackageInformationSection, { className: "mb-6", packageDocumentId: packageDocumentId, onAddPackageDocument: onAddPackageDocument, onOpenPackageDocument: onOpenPackageDocument }), _jsx(ModuleSpecificationsSection, { documentModels: documentModels, editors: editors, apps: apps, subgraphs: subgraphs, processors: processors, codegenProcessors: codegenProcessors, onAddDocumentModel: onAddDocumentModel, onAddEditor: onAddEditor, onAddApp: onAddApp, onAddSubgraph: onAddSubgraph, onAddProcessor: onAddProcessor, onAddCodegenProcessor: onAddCodegenProcessor, onOpenDocument: onOpenDocument, onDelete: onDelete })] })] }));
 };

package/dist/editors/vetra-drive-app/components/DriveHeader.js

@@ -56,5 +56,5 @@ export const DriveHeader = ({ driveId, driveName, driveUrl, }) => {
             return "";
         }
     }, [driveUrl]);
-    return (_jsx("div", { className: "bg-white px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(VetraIcon, { width: 20, height: 20 }), _jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Vetra Studio Drive" }), _jsxs("div", { className: "relative", ref: infoMenuRef, children: [_jsx("button", { "aria-label": "Drive information", "aria-expanded": isInfoMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleInfoMenu, children: _jsx(InfoIcon, { className: "text-gray-500" }) }), isInfoMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-white p-3 shadow-lg", children: [_jsx(DriveInfoItem, { label: "Name", value: driveName }), _jsx(DriveInfoItem, { label: "Drive ID", value: driveId })] }))] }), driveUrl && (_jsxs("div", { className: "relative", ref: shareMenuRef, children: [_jsx("button", { "aria-label": "Share drive", "aria-expanded": isShareMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleShareMenu, children: _jsx(ShareIcon, { width: 16, height: 16, stroke: "#343839" }) }), isShareMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-white p-4 shadow-lg", children: [_jsx(ShareMenuItem, { label: "Copy the Drive URL", url: driveUrl }), _jsx(ShareMenuItem, { label: "Share this Drive directly in Connect", url: shareUrl })] }))] }))] }), _jsxs("a", { href: "https://academy.vetra.io/", target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 text-sm text-gray-900 underline transition-colors hover:text-gray-700", children: [_jsx(ExternalLinkIcon, { fill: "#111827" }), "Vetra Academy"] })] }) }));
+    return (_jsx("div", { className: "bg-gray-50 px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(VetraIcon, { width: 20, height: 20 }), _jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Vetra Studio Drive" }), _jsxs("div", { className: "relative", ref: infoMenuRef, children: [_jsx("button", { "aria-label": "Drive information", "aria-expanded": isInfoMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleInfoMenu, children: _jsx(InfoIcon, { className: "text-gray-500" }) }), isInfoMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-white p-3 shadow-lg", children: [_jsx(DriveInfoItem, { label: "Name", value: driveName }), _jsx(DriveInfoItem, { label: "Drive ID", value: driveId })] }))] }), driveUrl && (_jsxs("div", { className: "relative", ref: shareMenuRef, children: [_jsx("button", { "aria-label": "Share drive", "aria-expanded": isShareMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleShareMenu, children: _jsx(ShareIcon, { width: 16, height: 16, stroke: "#343839" }) }), isShareMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-white p-4 shadow-lg", children: [_jsx(ShareMenuItem, { label: "Copy the Drive URL", url: driveUrl }), _jsx(ShareMenuItem, { label: "Share this Drive directly in Connect", url: shareUrl })] }))] }))] }), _jsxs("a", { href: "https://academy.vetra.io/", target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 text-sm text-gray-900 underline transition-colors hover:text-gray-700", children: [_jsx(ExternalLinkIcon, { fill: "#111827" }), "Vetra Academy"] })] }) }));
 };

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

@@ -41,7 +41,7 @@ export function BaseEditor(props) {
         }
     }, [packageNode]);
     const showDocumentEditor = !!children;
-    return showDocumentEditor ? (children) : (_jsx("div", { style: { height: "100%" }, className: "bg-white after:pointer-events-none after:absolute after:inset-0 after:bg-blue-500 after:opacity-0 after:transition after:content-['']", children: _jsx(DriveExplorer, { driveId: driveId, driveName: driveName, driveUrl: driveUrl, documentModels: docModelsNodes, editors: docEditorsNodes, apps: docAppsNodes, subgraphs: docSubgraphsNodes, processors: docProcessorsNodes, codegenProcessors: [], onAddDocumentModel: () => onCreateDocument(DOCUMENT_TYPES.documentModel), onAddEditor: () => onCreateDocument(DOCUMENT_TYPES.documentEditor), onAddApp: () => onCreateDocument(DOCUMENT_TYPES.documentApp), onAddSubgraph: () => onCreateDocument(DOCUMENT_TYPES.documentSubgraph), onAddProcessor: () => onCreateDocument(DOCUMENT_TYPES.documentProcessor), onAddCodegenProcessor: () => console.log("add codegen processor"), packageDocumentId: packageDocumentId, onAddPackageDocument: onCreatePackageFile, onOpenPackageDocument: onOpenPackageDocument, onOpenDocument: (node) => setSelectedNode(node), onDelete: onDeleteDocument }) }));
+    return showDocumentEditor ? (children) : (_jsx("div", { style: { height: "100%" }, className: "bg-gray-50 p-6 after:pointer-events-none after:absolute after:inset-0 after:bg-blue-500 after:opacity-0 after:transition after:content-['']", children: _jsx(DriveExplorer, { driveId: driveId, driveName: driveName, driveUrl: driveUrl, documentModels: docModelsNodes, editors: docEditorsNodes, apps: docAppsNodes, subgraphs: docSubgraphsNodes, processors: docProcessorsNodes, codegenProcessors: [], onAddDocumentModel: () => onCreateDocument(DOCUMENT_TYPES.documentModel), onAddEditor: () => onCreateDocument(DOCUMENT_TYPES.documentEditor), onAddApp: () => onCreateDocument(DOCUMENT_TYPES.documentApp), onAddSubgraph: () => onCreateDocument(DOCUMENT_TYPES.documentSubgraph), onAddProcessor: () => onCreateDocument(DOCUMENT_TYPES.documentProcessor), onAddCodegenProcessor: () => console.log("add codegen processor"), packageDocumentId: packageDocumentId, onAddPackageDocument: onCreatePackageFile, onOpenPackageDocument: onOpenPackageDocument, onOpenDocument: (node) => setSelectedNode(node), onDelete: onDeleteDocument }) }));
 }
 export default function Editor(props) {
     useSetPHDriveEditorConfig(editorConfig);

package/dist/editors/vetra-package/components/MetaForm.js

@@ -20,7 +20,7 @@ export const MetaForm = (props) => {
     useDebounce(publisherUrl, onPublisherUrlChange, 300);
     useDebounce(githubRepository, onGithubRepositoryChange, 300);
     useDebounce(npmPackage, onNpmPackageChange, 300);
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-6 bg-white p-6 lg:grid-cols-3", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Name" }), _jsx("input", { id: "package-name", type: "text", value: name, onChange: (e) => setName(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" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-description", className: "mb-2 block text-sm font-medium text-gray-700", children: "Description" }), _jsx("textarea", { id: "package-description", rows: 6, value: description, onChange: (e) => setDescription(e.target.value), className: "w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-category", className: "mb-2 block text-sm font-medium text-gray-700", children: "Category" }), _jsxs("select", { id: "package-category", value: category, onChange: (e) => {
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-6 p-6 lg:grid-cols-3", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Name" }), _jsx("input", { id: "package-name", type: "text", value: name, onChange: (e) => setName(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" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-description", className: "mb-2 block text-sm font-medium text-gray-700", children: "Description" }), _jsx("textarea", { id: "package-description", rows: 6, value: description, onChange: (e) => setDescription(e.target.value), className: "w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-category", className: "mb-2 block text-sm font-medium text-gray-700", children: "Category" }), _jsxs("select", { id: "package-category", value: category, onChange: (e) => {
                                     const newValue = e.target.value;
                                     setCategory(newValue);
                                     onCategoryChange?.(newValue);

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

@@ -65,5 +65,5 @@ export default function Editor(props) {
     const onRemoveKeyword = useCallback((id) => {
         dispatch(actions.removePackageKeyword({ id }));
     }, []);
-    return (_jsxs("div", { children: [displayToolbar && _jsx(DocumentToolbar, {}), _jsx(MetaForm, { name: document.state.global.name ?? "", description: document.state.global.description ?? "", category: document.state.global.category ?? "", publisher: document.state.global.author.name ?? "", publisherUrl: document.state.global.author.website ?? "", githubRepository: document.state.global.githubUrl ?? "", npmPackage: document.state.global.npmUrl ?? "", keywords: document.state.global.keywords, onNameChange: onNameChange, onDescriptionChange: onDescriptionChange, onCategoryChange: onCategoryChange, onPublisherChange: onPublisherChange, onPublisherUrlChange: onPublisherUrlChange, onGithubRepositoryChange: onGithubRepositoryChange, onNpmPackageChange: onNpmPackageChange, onAddKeyword: onAddKeyword, onRemoveKeyword: onRemoveKeyword })] }));
+    return (_jsxs("div", { className: "bg-gray-50 p-6", children: [displayToolbar && _jsx(DocumentToolbar, {}), _jsx(MetaForm, { name: document.state.global.name ?? "", description: document.state.global.description ?? "", category: document.state.global.category ?? "", publisher: document.state.global.author.name ?? "", publisherUrl: document.state.global.author.website ?? "", githubRepository: document.state.global.githubUrl ?? "", npmPackage: document.state.global.npmUrl ?? "", keywords: document.state.global.keywords, onNameChange: onNameChange, onDescriptionChange: onDescriptionChange, onCategoryChange: onCategoryChange, onPublisherChange: onPublisherChange, onPublisherUrlChange: onPublisherUrlChange, onGithubRepositoryChange: onGithubRepositoryChange, onNpmPackageChange: onNpmPackageChange, onAddKeyword: onAddKeyword, onRemoveKeyword: onRemoveKeyword })] }));
 }