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

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

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

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

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

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

package/dist/editors/subgraph-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 default function Editor(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=editor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/subgraph-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/subgraph-editor/editor.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,MAAM,4CA2B7B"}

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

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

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

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

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

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

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

@@ -0,0 +1,201 @@
+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 { useSelectedSubgraphModuleDocument } from "../hooks/useVetraDocument.js";
+import Editor from "./editor.js";
+vi.mock("../hooks/useVetraDocument.js", () => ({
+    useSelectedSubgraphModuleDocument: vi.fn(),
+}));
+describe("SubgraphModule Editor", () => {
+    let mockDispatch;
+    beforeEach(() => {
+        mockDispatch = vi.fn();
+        vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+            {
+                state: {
+                    global: {
+                        name: "",
+                        status: "DRAFT",
+                    },
+                },
+            },
+            mockDispatch,
+        ]);
+    });
+    describe("Core Rendering", () => {
+        it("should render all main form sections and labels", () => {
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("Subgraph Configuration")).toBeInTheDocument();
+            expect(screen.getByText("Subgraph Name")).toBeInTheDocument();
+            expect(screen.getByText("Confirm")).toBeInTheDocument();
+        });
+        it("should display existing subgraph data when document has values", () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-subgraph",
+                            status: "DRAFT",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByDisplayValue("test-subgraph")).toBeInTheDocument();
+        });
+    });
+    describe("Subgraph Name Input", () => {
+        it("should dispatch setSubgraphName when name changes (debounced)", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Subgraph Name");
+            await user.type(nameInput, "new-subgraph");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_SUBGRAPH_NAME",
+                    input: { name: "new-subgraph" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch when clearing a non-empty field", async () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "existing-subgraph",
+                            status: "DRAFT",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Subgraph Name");
+            await user.clear(nameInput);
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_SUBGRAPH_NAME",
+                    input: { name: "" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should NOT dispatch when typing identical value without clearing", async () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test",
+                            status: "DRAFT",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Subgraph 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("Subgraph Name");
+            await user.click(nameInput);
+            await user.tab();
+            await waitFor(() => {
+                expect(mockDispatch).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe("Confirm Button", () => {
+        it("should dispatch setSubgraphStatus when confirm clicked", async () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-subgraph",
+                            status: "DRAFT",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            await user.click(confirmButton);
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "SET_SUBGRAPH_STATUS",
+                input: { status: "CONFIRMED" },
+            }));
+        });
+        it("should be disabled when subgraph name is empty", () => {
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.getByText("Confirm");
+            expect(confirmButton).toBeDisabled();
+        });
+        it("should be hidden when status is CONFIRMED", () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-subgraph",
+                            status: "CONFIRMED",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const confirmButton = screen.queryByText("Confirm");
+            expect(confirmButton).not.toBeInTheDocument();
+        });
+    });
+    describe("Read-only Mode", () => {
+        it("should disable form field when status is CONFIRMED", () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-subgraph",
+                            status: "CONFIRMED",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Subgraph Name");
+            expect(nameInput).toBeDisabled();
+            // Confirm button should not be visible
+            const confirmButton = screen.queryByText("Confirm");
+            expect(confirmButton).not.toBeInTheDocument();
+        });
+        it("should enable form field when status is DRAFT", () => {
+            vi.mocked(useSelectedSubgraphModuleDocument).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-subgraph",
+                            status: "DRAFT",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Subgraph Name");
+            expect(nameInput).not.toBeDisabled();
+            // Confirm button should be visible
+            const confirmButton = screen.getByText("Confirm");
+            expect(confirmButton).toBeInTheDocument();
+        });
+    });
+});

package/dist/editors/subgraph-editor/module.d.ts

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

package/dist/editors/subgraph-editor/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../editors/subgraph-editor/module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,eAAO,MAAM,cAAc,EAAE,YAO5B,CAAC"}

package/dist/editors/subgraph-editor/module.js

@@ -0,0 +1,9 @@
+import { lazy } from "react";
+export const SubgraphEditor = {
+    Component: lazy(() => import("./editor.js")),
+    documentTypes: ["powerhouse/subgraph"],
+    config: {
+        id: "subgraph-module-editor",
+        name: "Subgraph Module Editor",
+    },
+};

package/dist/editors/vetra-drive-app/DriveExplorer.d.ts

@@ -1,8 +1,6 @@
-import { type IDriveContext } from '@powerhousedao/reactor-browser';
-import { type FileNode } from "document-drive";
-import type React from 'react';
+import type { FileNode } from "document-drive";
+import type React from "react";
 interface DriveExplorerProps {
-    context: IDriveContext;
     documentModels?: FileNode[];
     editors?: FileNode[];
     apps?: FileNode[];
@@ -18,8 +16,9 @@ interface DriveExplorerProps {
     onAddCodegenProcessor?: () => void;
     packageDocumentId?: string;
     onAddPackageDocument?: () => void;
-    driveId: string;
+    onOpenPackageDocument?: () => void;
     onOpenDocument?: (node: FileNode) => void;
+    onDelete?: (node: FileNode) => void;
 }
 export declare const DriveExplorer: React.FC<DriveExplorerProps>;
 export {};

package/dist/editors/vetra-drive-app/DriveExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../editors/vetra-drive-app/DriveExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAuD,MAAM,gCAAgC,CAAC;AACzH,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,kBAAkB;IAC1B,OAAO,EAAE,aAAa,CAAC;IACvB,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuDtD,CAAC"}
+{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../editors/vetra-drive-app/DriveExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC"}

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

@@ -1,12 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDocumentModelModuleById, useFallbackEditorModule } from '@powerhousedao/reactor-browser';
-import { DriveHeader } from './components/DriveHeader.js';
-import { ModuleSpecificationsSection } from './components/ModuleSpecificationsSection.js';
-import { PackageInformationSection } from './components/PackageInformationSection.js';
-import { DOCUMENT_TYPES } from './document-types.js';
-export const DriveExplorer = ({ documentModels = [], editors = [], apps = [], subgraphs = [], processors = [], codegenProcessors = [], onShareDrive, onAddDocumentModel, onAddEditor, onAddApp, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, context, packageDocumentId, onAddPackageDocument, driveId, onOpenDocument, }) => {
-    const vetraPackageModule = useDocumentModelModuleById(DOCUMENT_TYPES.documentPackage);
-    const vetraPackageEditorModule = useFallbackEditorModule(DOCUMENT_TYPES.documentPackage);
-    return (_jsxs("div", { className: "min-h-screen bg-white", children: [_jsx(DriveHeader, { onShareClick: onShareDrive }), _jsxs("div", { className: "bg-white mx-6 mt-6 ", children: [_jsx(PackageInformationSection, { className: "mb-6", context: context, packageDocumentId: packageDocumentId, onAddPackageDocument: onAddPackageDocument, documentModelModule: vetraPackageModule, editorModule: vetraPackageEditorModule, driveId: driveId }), _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 })] })] }));
+import { DriveHeader } from "./components/DriveHeader.js";
+import { ModuleSpecificationsSection } from "./components/ModuleSpecificationsSection.js";
+import { PackageInformationSection } from "./components/PackageInformationSection.js";
+export const DriveExplorer = ({ documentModels = [], editors = [], apps = [], subgraphs = [], processors = [], codegenProcessors = [], onShareDrive, onAddDocumentModel, onAddEditor, onAddApp, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, packageDocumentId, onAddPackageDocument, onOpenPackageDocument, onOpenDocument, onDelete, }) => {
+    return (_jsxs("div", { className: "min-h-screen bg-white", children: [_jsx(DriveHeader, { onShareClick: onShareDrive }), _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 })] })] }));
 };
-//# sourceMappingURL=DriveExplorer.js.map

package/dist/editors/vetra-drive-app/components/Accordion.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from "react";
 interface AccordionProps {
     isOpen: boolean;
     onToggle: () => void;

package/dist/editors/vetra-drive-app/components/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,cAAc;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+D9C,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,cAAc;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiE9C,CAAC"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-export const Accordion = ({ isOpen, onToggle, header, children, className = '' }) => {
+import React from "react";
+import { useState, useRef, useEffect } from "react";
+export const Accordion = ({ isOpen, onToggle, header, children, className = "", }) => {
     const contentRef = useRef(null);
-    const [height, setHeight] = useState('auto');
+    const [height, setHeight] = useState("auto");
     useEffect(() => {
         const updateHeight = () => {
             if (contentRef.current) {
@@ -24,13 +25,16 @@ export const Accordion = ({ isOpen, onToggle, header, children, className = '' }
         };
     }, [children, isOpen]);
     return (_jsxs("div", { className: className, children: [_jsx("div", { onClick: onToggle, onKeyDown: (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
+                    if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         onToggle();
                     }
-                }, role: "button", tabIndex: 0, className: "w-full text-left focus:outline-none cursor-pointer", children: header }), _jsx("div", { className: "overflow-hidden transition-all duration-300 ease-in-out", style: {
-                    maxHeight: isOpen ? (height === 'auto' ? 'none' : `${height}px`) : '0px',
-                    opacity: isOpen ? 1 : 0
+                }, role: "button", tabIndex: 0, className: "w-full cursor-pointer text-left focus:outline-none", children: header }), _jsx("div", { className: "overflow-hidden transition-all duration-300 ease-in-out", style: {
+                    maxHeight: isOpen
+                        ? height === "auto"
+                            ? "none"
+                            : `${height}px`
+                        : "0px",
+                    opacity: isOpen ? 1 : 0,
                 }, children: _jsx("div", { ref: contentRef, children: children }) })] }));
 };
-//# sourceMappingURL=Accordion.js.map

package/dist/editors/vetra-drive-app/components/DataIntegrationsColumn.d.ts

@@ -1,5 +1,5 @@
-import { type FileNode } from 'document-drive';
-import type React from 'react';
+import type { FileNode } from "document-drive";
+import React from "react";
 interface DataIntegrationsColumnProps {
     subgraphs: FileNode[];
     processors: FileNode[];
@@ -8,6 +8,7 @@ interface DataIntegrationsColumnProps {
     onAddProcessor?: () => void;
     onAddCodegenProcessor?: () => void;
     onOpenDocument?: (node: FileNode) => void;
+    onDelete?: (node: FileNode) => void;
 }
 export declare const DataIntegrationsColumn: React.FC<DataIntegrationsColumnProps>;
 export {};

package/dist/editors/vetra-drive-app/components/DataIntegrationsColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataIntegrationsColumn.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/DataIntegrationsColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,2BAA2B;IACnC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA0DxE,CAAC"}
+{"version":3,"file":"DataIntegrationsColumn.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/DataIntegrationsColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,2BAA2B;IACnC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAmExE,CAAC"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DOCUMENT_TYPES } from '../document-types.js';
-import { ModuleAccordion } from './ModuleAccordion.js';
-import { ModuleList } from './ModuleList.js';
-export const DataIntegrationsColumn = ({ subgraphs, processors, codegenProcessors, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, onOpenDocument, }) => {
-    return (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-normal text-gray-700 mb-4", children: "3. Data Integrations" }), _jsxs("div", { className: "bg-zinc-50 rounded-md border border-zinc-200", children: [_jsx(ModuleAccordion, { title: "Subgraphs", count: subgraphs.length, onAdd: onAddSubgraph || (() => console.log('Add subgraph clicked')), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: subgraphs, documentType: DOCUMENT_TYPES.documentSubgraph, onAddNewSpec: onAddSubgraph, onClickItem: onOpenDocument }) }), _jsx(ModuleAccordion, { title: "Processors", count: processors.length, onAdd: onAddProcessor || (() => console.log('Add processor clicked')), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: processors, documentType: DOCUMENT_TYPES.documentProcessor, onAddNewSpec: onAddProcessor, onClickItem: onOpenDocument }) }), _jsx(ModuleAccordion, { title: "Codegen Processor", count: codegenProcessors.length, onAdd: onAddCodegenProcessor || (() => console.log('Add codegen processor clicked')), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: codegenProcessors, documentType: DOCUMENT_TYPES.documentCodegenProcessor, onAddNewSpec: onAddCodegenProcessor, onClickItem: onOpenDocument }) })] })] }));
+import React from "react";
+import { DOCUMENT_TYPES } from "../document-types.js";
+import { ModuleAccordion } from "./ModuleAccordion.js";
+import { ModuleList } from "./ModuleList.js";
+export const DataIntegrationsColumn = ({ subgraphs, processors, codegenProcessors, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, onOpenDocument, onDelete, }) => {
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-sm font-normal text-gray-700", children: "3. Data Integrations" }), _jsxs("div", { className: "rounded-md border border-zinc-200 bg-zinc-50", children: [_jsx(ModuleAccordion, { title: "Subgraphs", count: subgraphs.length, onAdd: onAddSubgraph || (() => console.log("Add subgraph clicked")), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: subgraphs, documentType: DOCUMENT_TYPES.documentSubgraph, onAddNewSpec: onAddSubgraph, onClickItem: onOpenDocument, onDelete: onDelete }) }), _jsx(ModuleAccordion, { title: "Processors", count: processors.length, onAdd: onAddProcessor || (() => console.log("Add processor clicked")), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: processors, documentType: DOCUMENT_TYPES.documentProcessor, onAddNewSpec: onAddProcessor, onClickItem: onOpenDocument, onDelete: onDelete }) }), _jsx(ModuleAccordion, { title: "Codegen Processor", count: codegenProcessors.length, onAdd: onAddCodegenProcessor ||
+                            (() => console.log("Add codegen processor clicked")), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: codegenProcessors, documentType: DOCUMENT_TYPES.documentCodegenProcessor, onAddNewSpec: onAddCodegenProcessor, onClickItem: onOpenDocument, onDelete: onDelete }) })] })] }));
 };
-//# sourceMappingURL=DataIntegrationsColumn.js.map

package/dist/editors/vetra-drive-app/components/DocumentModelsColumn.d.ts

@@ -1,9 +1,10 @@
-import { type FileNode } from "document-drive";
-import type React from 'react';
+import type { FileNode } from "document-drive";
+import React from "react";
 interface DocumentModelsColumnProps {
     documentModels: FileNode[];
     onAddDocumentModel?: () => void;
     onOpenDocument?: (node: FileNode) => void;
+    onDelete?: (node: FileNode) => void;
 }
 export declare const DocumentModelsColumn: React.FC<DocumentModelsColumnProps>;
 export {};

package/dist/editors/vetra-drive-app/components/DocumentModelsColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentModelsColumn.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/DocumentModelsColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,yBAAyB;IACjC,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA0BpE,CAAC"}
+{"version":3,"file":"DocumentModelsColumn.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/DocumentModelsColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,yBAAyB;IACjC,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAiCpE,CAAC"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DOCUMENT_TYPES } from '../document-types.js';
-import { ModuleAccordion } from './ModuleAccordion.js';
-import { ModuleList } from './ModuleList.js';
-export const DocumentModelsColumn = ({ documentModels, onAddDocumentModel, onOpenDocument, }) => {
-    return (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-normal text-gray-700 mb-4", children: "1. Document Models" }), _jsx("div", { className: "bg-zinc-50 rounded-md border border-zinc-200", children: _jsx(ModuleAccordion, { title: "Document Models", count: documentModels.length, onAdd: onAddDocumentModel || (() => console.log('Add document model clicked')), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: documentModels, documentType: DOCUMENT_TYPES.documentModel, onAddNewSpec: onAddDocumentModel, onClickItem: onOpenDocument }) }) })] }));
+import React from "react";
+import { DOCUMENT_TYPES } from "../document-types.js";
+import { ModuleAccordion } from "./ModuleAccordion.js";
+import { ModuleList } from "./ModuleList.js";
+export const DocumentModelsColumn = ({ documentModels, onAddDocumentModel, onOpenDocument, onDelete, }) => {
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-sm font-normal text-gray-700", children: "1. Document Models" }), _jsx("div", { className: "rounded-md border border-zinc-200 bg-zinc-50", children: _jsx(ModuleAccordion, { title: "Document Models", count: documentModels.length, onAdd: onAddDocumentModel ||
+                        (() => console.log("Add document model clicked")), defaultOpen: true, headerClassName: "m-4 bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 rounded-md", children: _jsx(ModuleList, { items: documentModels, documentType: DOCUMENT_TYPES.documentModel, onAddNewSpec: onAddDocumentModel, onClickItem: onOpenDocument, onDelete: onDelete }) }) })] }));
 };
-//# sourceMappingURL=DocumentModelsColumn.js.map

package/dist/editors/vetra-drive-app/components/DriveHeader.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from "react";
 interface DriveHeaderProps {
     onShareClick?: () => void;
 }

package/dist/editors/vetra-drive-app/components/DriveHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DriveHeader.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/DriveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,gBAAgB;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC"}
+{"version":3,"file":"DriveHeader.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/DriveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,gBAAgB;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuBlD,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InfoIcon } from '../icons/InfoIcon.js';
-import { ShareIcon } from '../icons/ShareIcon.js';
-import { VetraIcon } from '../icons/VetraIcon.js';
+import React from "react";
+import { InfoIcon } from "../icons/InfoIcon.js";
+import { ShareIcon } from "../icons/ShareIcon.js";
+import { VetraIcon } from "../icons/VetraIcon.js";
 export const DriveHeader = ({ onShareClick }) => {
-    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" }), _jsx("button", { className: "p-1 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(InfoIcon, { className: "text-gray-500" }) })] }), _jsxs("button", { onClick: onShareClick, className: "flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors", children: [_jsx(ShareIcon, {}), "Share Drive"] })] }) }));
+    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" }), _jsx("button", { className: "rounded-full p-1 transition-colors hover:bg-gray-100", children: _jsx(InfoIcon, { className: "text-gray-500" }) })] }), _jsxs("button", { onClick: onShareClick, className: "flex items-center gap-2 rounded-md bg-gray-100 px-4 py-2 text-gray-700 transition-colors hover:bg-gray-200", children: [_jsx(ShareIcon, {}), "Share Drive"] })] }) }));
 };
-//# sourceMappingURL=DriveHeader.js.map

package/dist/editors/vetra-drive-app/components/EditorContainer.d.ts

@@ -1,11 +1,5 @@
-import { type IDriveContext, type VetraDocumentModelModule, type VetraEditorModule } from "@powerhousedao/reactor-browser";
 export interface EditorContainerProps {
-    driveId: string;
     documentId: string;
-    documentType: string;
-    context: IDriveContext;
-    documentModelModule: VetraDocumentModelModule;
-    editorModule: VetraEditorModule;
 }
 export declare const EditorContainer: React.FC<EditorContainerProps>;
 //# sourceMappingURL=EditorContainer.d.ts.map

package/dist/editors/vetra-drive-app/components/EditorContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorContainer.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/EditorContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,wBAAwB,EAAE,KAAK,iBAAiB,EACtD,MAAM,gCAAgC,CAAC;AAGtC,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,aAAa,CAAC;IACvB,mBAAmB,EAAE,wBAAwB,CAAC;IAC9C,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuB1D,CAAC"}
+{"version":3,"file":"EditorContainer.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/EditorContainer.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoB1D,CAAC"}

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

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DefaultEditorLoader, } from "@powerhousedao/design-system";
-import { useDocumentById } from "@powerhousedao/reactor-browser";
+import { DefaultEditorLoader } from "@powerhousedao/design-system/connect";
+import { useEditorModuleById } from "@powerhousedao/reactor-browser";
 import { Suspense } from "react";
 export const EditorContainer = (props) => {
-    const { context, editorModule, documentId } = props;
-    const [document] = useDocumentById(documentId);
-    const loadingContent = (_jsx("div", { className: "flex-1 flex justify-center items-center h-full", children: _jsx(DefaultEditorLoader, {}) }));
-    if (!document)
+    const { documentId } = props;
+    const editorModule = useEditorModuleById("vetra-package-editor");
+    const loadingContent = (_jsx("div", { className: "flex h-full flex-1 items-center justify-center", children: _jsx(DefaultEditorLoader, {}) }));
+    if (!editorModule)
         return loadingContent;
     const EditorComponent = editorModule.Component;
-    return (_jsx(Suspense, { fallback: loadingContent, children: _jsx(EditorComponent, { context: context, document: document, error: console.error }) }));
+    return (_jsx(Suspense, { fallback: loadingContent, children: _jsx(EditorComponent, { documentId: documentId, displayToolbar: false }) }));
 };
-//# sourceMappingURL=EditorContainer.js.map

package/dist/editors/vetra-drive-app/components/ModuleAccordion.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from "react";
 interface ModuleAccordionProps {
     title: string;
     count: number;

package/dist/editors/vetra-drive-app/components/ModuleAccordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleAccordion.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/ModuleAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmD1D,CAAC"}
+{"version":3,"file":"ModuleAccordion.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/ModuleAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmD1D,CAAC"}

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ChevronIcon } from '../icons/ChevronIcon.js';
-import { PlusIcon } from '../icons/PlusIcon.js';
-import { Accordion } from './Accordion.js';
-export const ModuleAccordion = ({ title, count, onAdd, children, defaultOpen = false, className = '', headerClassName = '' }) => {
+import React from "react";
+import { useState } from "react";
+import { ChevronIcon } from "../icons/ChevronIcon.js";
+import { PlusIcon } from "../icons/PlusIcon.js";
+import { Accordion } from "./Accordion.js";
+export const ModuleAccordion = ({ title, count, onAdd, children, defaultOpen = false, className = "", headerClassName = "", }) => {
     const [isOpen, setIsOpen] = useState(defaultOpen);
-    const header = (_jsxs("div", { className: `flex items-center justify-between py-2 px-3 hover:bg-gray-50 transition-colors rounded-md ${headerClassName}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChevronIcon, { width: 12, height: 12, className: `text-gray-600 transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}` }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: title }), _jsx("span", { className: "px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 rounded-full", children: count })] }), _jsx("button", { onClick: (e) => {
+    const header = (_jsxs("div", { className: `flex items-center justify-between rounded-md px-3 py-2 transition-colors hover:bg-gray-50 ${headerClassName}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChevronIcon, { width: 12, height: 12, className: `text-gray-600 transition-transform duration-300 ${isOpen ? "rotate-90" : ""}` }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: title }), _jsx("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: count })] }), _jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     onAdd?.();
-                }, className: "p-1 hover:bg-gray-200 rounded transition-colors", children: _jsx(PlusIcon, { width: 16, height: 16, className: "text-gray-600" }) })] }));
+                }, className: "rounded p-1 transition-colors hover:bg-gray-200", children: _jsx(PlusIcon, { width: 16, height: 16, className: "text-gray-600" }) })] }));
     return (_jsx("div", { className: `mb-2 ${className}`, children: _jsx(Accordion, { isOpen: isOpen, onToggle: () => setIsOpen(!isOpen), header: header, children: _jsx("div", { className: "px-3 pb-2", children: children }) }) }));
 };
-//# sourceMappingURL=ModuleAccordion.js.map

package/dist/editors/vetra-drive-app/components/ModuleItem.d.ts

@@ -1,8 +1,9 @@
-import { type FileNode } from 'document-drive';
-import type React from 'react';
+import type { FileNode } from "document-drive";
+import React from "react";
 interface ModuleItemProps {
     fileNode: FileNode;
     onClick: (file: FileNode) => void;
+    onDelete?: (file: FileNode) => void;
     className?: string;
 }
 export declare const ModuleItem: React.FC<ModuleItemProps>;

package/dist/editors/vetra-drive-app/components/ModuleItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleItem.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/ModuleItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,UAAU,eAAe;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyBhD,CAAC"}
+{"version":3,"file":"ModuleItem.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-drive-app/components/ModuleItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,UAAU,eAAe;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwEhD,CAAC"}