@powerhousedao/network-admin 0.0.1

package/dist/editors/network-admin/components/DriveExplorer.js

@@ -0,0 +1,460 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CreateDocumentModal, } from "@powerhousedao/design-system";
+import { addDocument, setSelectedNode, useAllFolderNodes, useDocumentModelModules, useDriveContext, useDriveSharingType, useEditorModules, useFileChildNodes, useFolderChildNodes, useSelectedDrive, useSelectedFolder, useSelectedNodePath, useUserPermissions, useAllDocuments, } from "@powerhousedao/reactor-browser";
+import { useCallback, useRef, useState, useMemo } from "react";
+import { EditorContainer } from "./EditorContainer.jsx";
+import { getNewDocumentObject } from "../utils.js";
+import { IsolatedSidebarProvider } from "./IsolatedSidebarProvider.jsx";
+import { IsolatedSidebar } from "./IsolatedSidebar.jsx";
+/**
+ * Main drive explorer component with sidebar navigation and content area.
+ * Layout: Left sidebar (folder tree) + Right content area (files/folders + document editor)
+ */
+export function DriveExplorer(props) {
+    // === DOCUMENT EDITOR STATE ===
+    // Customize document opening/closing behavior here
+    const [activeDocumentId, setActiveDocumentId] = useState();
+    const [openModal, setOpenModal] = useState(false);
+    const [selectedRootNode, setSelectedRootNode] = useState("workstreams");
+    const [modalDocumentType, setModalDocumentType] = useState("powerhouse/workstream");
+    const selectedDocumentModel = useRef(null);
+    const editorModules = useEditorModules();
+    // === DRIVE CONTEXT HOOKS ===
+    // Core drive operations and document models
+    const { onAddFile, onAddFolder, onCopyNode, onDuplicateNode, onMoveNode, onRenameNode, showDeleteNodeModal, } = useDriveContext();
+    const { isAllowedToCreateDocuments } = useUserPermissions();
+    // === STATE MANAGEMENT HOOKS ===
+    // Core state hooks for drive navigation
+    const [selectedDrive] = useSelectedDrive(); // Currently selected drive
+    const selectedFolder = useSelectedFolder(); // Currently selected folder
+    const selectedNodePath = useSelectedNodePath();
+    const sharingType = useDriveSharingType(selectedDrive?.header.id);
+    const allDocuments = useAllDocuments();
+    // === NAVIGATION SETUP ===
+    // Breadcrumbs for folder navigation
+    // const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
+    //   selectedNodePath: selectedNodePath as any,
+    //   setSelectedNode: (node) => setSelectedNode(node as any),
+    //   getNodeById: (id: string) => (allFolders.find(node => node.id === id) || fileChildren.find(node => node.id === id)) as any || null,
+    // });
+    const folderChildren = useFolderChildNodes();
+    const fileChildren = useFileChildNodes();
+    const filesWithDocuments = fileChildren.map((file) => {
+        const document = allDocuments?.find((doc) => doc.header.id === file.id);
+        const state = document?.state.global;
+        return {
+            ...file,
+            state,
+        };
+    });
+    // check if workstream doc is created, set isWorkstreamCreated to true
+    const isWorkstreamCreated = fileChildren.some((file) => file.documentType === "powerhouse/workstream");
+    //check if network profile doc is created, set isNetworkProfileCreated to true
+    const isNetworkProfileCreated = fileChildren.some((file) => file.documentType === "powerhouse/network-profile");
+    // All folders for the sidebar tree view
+    const allFolders = useAllFolderNodes();
+    // Convert folders and files to SidebarNode format
+    const sidebarNodes = useMemo(() => {
+        const workstreamsNode = {
+            id: "workstreams",
+            title: "Workstreams",
+            children: [
+                // Add folders
+                ...allFolders
+                    .filter((folder) => {
+                    // Only root folders that contain non-network-profile documents
+                    if (folder.parentFolder)
+                        return false;
+                    // Check if this folder or any of its subfolders contain non-network-profile documents
+                    const hasNonNetworkProfileFiles = filesWithDocuments.some((file) => file.documentType !== "powerhouse/network-profile" &&
+                        (file.parentFolder === folder.id ||
+                            allFolders.some((subFolder) => subFolder.parentFolder === folder.id &&
+                                file.parentFolder === subFolder.id)));
+                    return hasNonNetworkProfileFiles;
+                })
+                    .map((folder) => ({
+                    id: folder.id,
+                    title: folder.name,
+                    children: [
+                        // Add child folders
+                        ...allFolders
+                            .filter((childFolder) => childFolder.parentFolder === folder.id &&
+                            filesWithDocuments.some((file) => file.documentType !== "powerhouse/network-profile" &&
+                                file.parentFolder === childFolder.id))
+                            .map((childFolder) => ({
+                            id: childFolder.id,
+                            title: childFolder.name,
+                            children: [
+                                // Add files in this folder (exclude network-profile documents)
+                                ...filesWithDocuments
+                                    .filter((file) => file.parentFolder === childFolder.id &&
+                                    file.documentType !== "powerhouse/network-profile")
+                                    .map((file) => ({
+                                    id: `editor-${file.id}`,
+                                    title: `📄 ${file.state?.code || ""} - ${file.state?.title || file.name}`,
+                                })),
+                            ],
+                        })),
+                        // Add files directly in this folder (exclude network-profile documents)
+                        ...filesWithDocuments
+                            .filter((file) => file.parentFolder === folder.id &&
+                            file.documentType !== "powerhouse/network-profile")
+                            .map((file) => ({
+                            id: `editor-${file.id}`,
+                            title: `📄 ${file.state?.code || ""} - ${file.state?.title || file.name}`,
+                        })),
+                    ],
+                })),
+                // Add root-level files (exclude network-profile documents)
+                ...filesWithDocuments
+                    .filter((file) => !file.parentFolder &&
+                    file.documentType !== "powerhouse/network-profile")
+                    .map((file) => ({
+                    id: `editor-${file.id}`,
+                    title: `📄 ${file.state?.code || ""} - ${file.state?.title || file.name}`,
+                })),
+            ],
+        };
+        const networkInfoNode = {
+            id: "network-information",
+            title: "Network Information",
+            children: [
+                // Add folders that contain network-profile documents
+                ...allFolders
+                    .filter((folder) => {
+                    // Check if this folder or any of its subfolders contain network-profile documents
+                    const hasNetworkProfileFiles = filesWithDocuments.some((file) => file.documentType === "powerhouse/network-profile" &&
+                        (file.parentFolder === folder.id ||
+                            allFolders.some((subFolder) => subFolder.parentFolder === folder.id &&
+                                file.parentFolder === subFolder.id)));
+                    return hasNetworkProfileFiles;
+                })
+                    .map((folder) => ({
+                    id: folder.id,
+                    title: folder.name,
+                    children: [
+                        // Add child folders that contain network-profile documents
+                        ...allFolders
+                            .filter((childFolder) => childFolder.parentFolder === folder.id &&
+                            filesWithDocuments.some((file) => file.documentType === "powerhouse/network-profile" &&
+                                file.parentFolder === childFolder.id))
+                            .map((childFolder) => ({
+                            id: childFolder.id,
+                            title: childFolder.name,
+                            children: [
+                                // Add network-profile files in this folder
+                                ...filesWithDocuments
+                                    .filter((file) => file.documentType === "powerhouse/network-profile" &&
+                                    file.parentFolder === childFolder.id)
+                                    .map((file) => ({
+                                    id: `editor-${file.id}`,
+                                    title: `📄 ${file.name}`,
+                                })),
+                            ],
+                        })),
+                        // Add network-profile files directly in this folder
+                        ...filesWithDocuments
+                            .filter((file) => file.documentType === "powerhouse/network-profile" &&
+                            file.parentFolder === folder.id)
+                            .map((file) => ({
+                            id: `editor-${file.id}`,
+                            title: `📄 ${file.name}`,
+                        })),
+                    ],
+                })),
+                // Add root-level network-profile files
+                ...filesWithDocuments
+                    .filter((file) => !file.parentFolder &&
+                    file.documentType === "powerhouse/network-profile")
+                    .map((file) => ({
+                    id: `editor-${file.id}`,
+                    title: `📄 ${file.name}`,
+                })),
+            ],
+        };
+        return [workstreamsNode, networkInfoNode];
+    }, [allFolders, filesWithDocuments]);
+    // Handle sidebar node selection
+    const handleActiveNodeChange = useCallback((nodeId) => {
+        console.log("nodeId", nodeId);
+        // Find the node by ID
+        const findNodeById = (nodes, id) => {
+            for (const node of nodes) {
+                if (node.id === id) {
+                    return node;
+                }
+                if (node.children) {
+                    const found = findNodeById(node.children, id);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        const newNode = findNodeById(sidebarNodes, nodeId);
+        if (!newNode)
+            return;
+        if (newNode.id === "workstreams") {
+            setActiveDocumentId(undefined);
+            setSelectedRootNode("workstreams");
+        }
+        else if (newNode.id === "network-information") {
+            setActiveDocumentId(undefined);
+            setSelectedRootNode("network-information");
+            // Handle network information display
+        }
+        else if (newNode.id.startsWith("editor-")) {
+            // Extract file ID from editor-{file.id} format
+            const fileId = newNode.id.replace("editor-", "");
+            const file = fileChildren.find((f) => f.id === fileId);
+            setActiveDocumentId(fileId);
+        }
+        else {
+            // Find if it's a folder
+            const folder = allFolders.find((f) => f.id === newNode.id);
+            if (folder) {
+                setActiveDocumentId(undefined);
+            }
+        }
+    }, [
+        allFolders,
+        fileChildren,
+        setSelectedNode,
+        setActiveDocumentId,
+        sidebarNodes,
+    ]);
+    // === EVENT HANDLERS ===
+    // Display function that switches views based on active node ID
+    const displayActiveNode = (activeNodeId) => {
+        // Determine the type of node and extract the actual ID
+        let nodeType = "unknown";
+        let actualId = activeNodeId;
+        if (activeNodeId === "workstreams") {
+            nodeType = "workstreams";
+        }
+        else if (activeNodeId === "network-information") {
+            nodeType = "network-information";
+        }
+        else if (activeNodeId.startsWith("editor-")) {
+            nodeType = "file";
+            actualId = activeNodeId.replace("editor-", "");
+        }
+        else {
+            // Check if it's a folder
+            const folder = allFolders.find((f) => f.id === activeNodeId);
+            if (folder) {
+                nodeType = "folder";
+            }
+            else {
+                // Check if it's a file (direct ID)
+                const file = fileChildren.find((f) => f.id === activeNodeId);
+                if (file) {
+                    nodeType = "file";
+                    actualId = activeNodeId; // Use the ID as-is for files
+                }
+            }
+        }
+        switch (nodeType) {
+            case "workstreams":
+                return (_jsxs("div", { className: "mt-20 p-4 flex flex-col items-center justify-center", children: [_jsxs("div", { className: "space-y-6 flex flex-col items-center justify-center", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Welcome to the Network Admin" }), _jsx("p", { children: "Create a new workstream to get started, or select an existing workstream on the left" }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { color: "dark" // Customize button appearance
+                                            , size: "medium", className: "cursor-pointer hover:bg-gray-600 hover:text-white", title: "Create Workstream Document", "aria-description": "Create Workstream Document", onClick: () => {
+                                                setModalDocumentType("powerhouse/workstream");
+                                                setOpenModal(true);
+                                            }, disabled: isWorkstreamCreated, children: _jsx("span", { children: "Create Workstream Document" }) }), _jsx(Button, { color: "dark" // Customize button appearance
+                                            , size: "medium", className: "cursor-pointer hover:bg-gray-600 hover:text-white", title: "Create Network Profile Document", "aria-description": "Create Network Profile Document", onClick: () => {
+                                                setModalDocumentType("powerhouse/network-profile");
+                                                setOpenModal(true);
+                                            }, disabled: isNetworkProfileCreated, children: _jsx("span", { children: "Create Network Profile Document" }) })] })] }), (folderChildren.length > 0 || fileChildren.length > 0) && (_jsx("div", { className: "mt-10", children: _jsxs("div", { className: "grid grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium text-gray-500", children: "\uD83D\uDCC1 Folders" }), _jsx("div", { className: "space-y-2", children: folderChildren.map((folderNode) => folderNode && folderNode.id ? (_jsxs("div", { className: "p-2 border rounded", children: [_jsxs("div", { className: "font-medium", children: ["\uD83D\uDCC1 ", folderNode.name] }), _jsx("div", { className: "text-sm text-gray-500", children: "Folder" }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { onClick: () => setSelectedNode(folderNode), className: "px-2 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600", children: "Open" }), _jsx("button", { onClick: () => {
+                                                                        const newName = prompt("Enter new name:", folderNode.name || "");
+                                                                        if (newName &&
+                                                                            newName.trim() &&
+                                                                            newName !== folderNode.name) {
+                                                                            try {
+                                                                                onRenameNode(newName.trim(), folderNode);
+                                                                            }
+                                                                            catch (error) {
+                                                                                console.error("Failed to rename:", error);
+                                                                                alert("Failed to rename folder. Please try again.");
+                                                                            }
+                                                                        }
+                                                                    }, className: "px-2 py-1 bg-yellow-500 text-white rounded text-sm hover:bg-yellow-600", children: "Edit" }), _jsx("button", { onClick: () => showDeleteNodeModal(folderNode), className: "px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600", children: "Delete" })] })] }, folderNode.id)) : null) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium text-gray-500", children: "\uD83D\uDCC4 Documents" }), _jsx("div", { className: "space-y-2", children: fileChildren.map((fileNode) => (_jsxs("div", { className: "p-2 border rounded", children: [_jsx("div", { className: "font-medium", children: fileNode.name }), _jsx("div", { className: "text-sm text-gray-500", children: fileNode.documentType }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { onClick: () => {
+                                                                        setSelectedNode(fileNode);
+                                                                        setActiveDocumentId(fileNode.id);
+                                                                    }, className: "px-2 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600", children: "Open" }), _jsx("button", { onClick: () => {
+                                                                        if (!fileNode || !fileNode.id)
+                                                                            return;
+                                                                        const newName = prompt("Enter new name:", fileNode.name || "");
+                                                                        if (newName &&
+                                                                            newName.trim() &&
+                                                                            newName !== fileNode.name) {
+                                                                            try {
+                                                                                onRenameNode(newName.trim(), fileNode);
+                                                                            }
+                                                                            catch (error) {
+                                                                                alert("Failed to rename document. Please try again.");
+                                                                            }
+                                                                        }
+                                                                    }, className: "px-2 py-1 bg-yellow-500 text-white rounded text-sm hover:bg-yellow-600", children: "Edit" }), _jsx("button", { onClick: () => showDeleteNodeModal(fileNode), className: "px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600", children: "Delete" })] })] }, fileNode.id))) })] })] }) }))] }));
+            case "folder":
+                const folder = allFolders.find((f) => f.id === actualId);
+                if (!folder)
+                    return null;
+                return (_jsx("div", { className: "p-4", children: _jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "text-lg font-semibold", children: ["Contents of \"", folder.name, "\""] }), _jsx("button", { onClick: () => {
+                                                setSelectedNode(selectedDrive?.header.id);
+                                            }, className: "rounded bg-gray-500 px-3 py-1 text-sm text-white hover:bg-gray-600", children: "Back" }), isAllowedToCreateDocuments && (_jsx("button", { onClick: () => handleCreateFolder(), className: "rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600", children: "+ New Folder" }))] }) }), folderChildren.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium text-gray-500", children: "\uD83D\uDCC1 Folders" }), _jsx("div", { className: "grid grid-cols-1 gap-2", children: folderChildren.map((folderNode) => folderNode && folderNode.id ? (_jsxs("div", { className: "p-2 border rounded", children: [_jsxs("div", { className: "font-medium", children: ["\uD83D\uDCC1 ", folderNode.name] }), _jsx("div", { className: "text-sm text-gray-500", children: "Folder" }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { onClick: () => setSelectedNode(folderNode), className: "px-2 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600", children: "Open" }), _jsx("button", { onClick: () => {
+                                                                const newName = prompt("Enter new name:", folderNode.name || "");
+                                                                if (newName &&
+                                                                    newName.trim() &&
+                                                                    newName !== folderNode.name) {
+                                                                    try {
+                                                                        onRenameNode(newName.trim(), folderNode);
+                                                                    }
+                                                                    catch (error) {
+                                                                        console.error("Failed to rename:", error);
+                                                                        alert("Failed to rename folder. Please try again.");
+                                                                    }
+                                                                }
+                                                            }, className: "px-2 py-1 bg-yellow-500 text-white rounded text-sm hover:bg-yellow-600", children: "Edit" }), _jsx("button", { onClick: () => showDeleteNodeModal(folderNode), className: "px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600", children: "Delete" })] })] }, folderNode.id)) : null) })] })), fileChildren.length > 0 ? (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium text-gray-500", children: "\uD83D\uDCC4 Documents" }), _jsx("div", { className: "grid grid-cols-1 gap-2", children: fileChildren.map((fileNode) => (_jsxs("div", { className: "p-2 border rounded", children: [_jsx("div", { className: "font-medium", children: fileNode.name }), _jsx("div", { className: "text-sm text-gray-500", children: fileNode.documentType }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { onClick: () => {
+                                                                setSelectedNode(fileNode);
+                                                                setActiveDocumentId(fileNode.id);
+                                                            }, className: "px-2 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600", children: "Open" }), _jsx("button", { onClick: () => {
+                                                                if (!fileNode || !fileNode.id)
+                                                                    return;
+                                                                const newName = prompt("Enter new name:", fileNode.name || "");
+                                                                if (newName &&
+                                                                    newName.trim() &&
+                                                                    newName !== fileNode.name) {
+                                                                    try {
+                                                                        onRenameNode(newName.trim(), fileNode);
+                                                                    }
+                                                                    catch (error) {
+                                                                        alert("Failed to rename document. Please try again.");
+                                                                    }
+                                                                }
+                                                            }, className: "px-2 py-1 bg-yellow-500 text-white rounded text-sm hover:bg-yellow-600", children: "Edit" }), _jsx("button", { onClick: () => showDeleteNodeModal(fileNode), className: "px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600", children: "Delete" })] })] }, fileNode.id))) })] })) : null, folderChildren.length === 0 && fileChildren.length === 0 && (_jsxs("div", { className: "py-12 text-center text-gray-500", children: [_jsx("p", { className: "text-lg", children: "\uD83D\uDDC2\uFE0F This folder is empty" }), _jsx("p", { className: "mt-2 text-sm", children: "Create your first document or folder below" })] }))] }) }));
+            case "network-information":
+                return (_jsxs("div", { className: "mt-20 p-4 flex flex-col items-center justify-center", children: [_jsxs("div", { className: "space-y-6 flex flex-col items-center justify-center", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Network Information" }), _jsx("p", { children: "Create a new network profile to get started, or select an existing network profile from the left sidebar" }), _jsx("div", { className: "flex gap-3", children: _jsx(Button, { color: "dark", size: "medium", className: "cursor-pointer hover:bg-gray-600 hover:text-white", title: "Create Network Profile Document", "aria-description": "Create Network Profile Document", onClick: () => {
+                                            setModalDocumentType("powerhouse/network-profile");
+                                            setOpenModal(true);
+                                        }, disabled: isNetworkProfileCreated, children: _jsx("span", { children: "Create Network Profile Document" }) }) })] }), (folderChildren.length > 0 || fileChildren.length > 0) && (_jsx("div", { className: "mt-10", children: _jsxs("div", { className: "grid grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium text-gray-500", children: "\uD83D\uDCC1 Network Profile Folders" }), _jsx("div", { className: "space-y-2", children: folderChildren
+                                                    .filter((folder) => {
+                                                    // Only show folders that contain network-profile documents
+                                                    return filesWithDocuments.some((file) => file.documentType ===
+                                                        "powerhouse/network-profile" &&
+                                                        (file.parentFolder === folder.id ||
+                                                            allFolders.some((subFolder) => subFolder.parentFolder === folder.id &&
+                                                                file.parentFolder === subFolder.id)));
+                                                })
+                                                    .map((folderNode) => folderNode && folderNode.id ? (_jsxs("div", { className: "p-2 border rounded", children: [_jsxs("div", { className: "font-medium", children: ["\uD83D\uDCC1 ", folderNode.name] }), _jsx("div", { className: "text-sm text-gray-500", children: "Network Profile Folder" }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { onClick: () => setSelectedNode(folderNode), className: "px-2 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600", children: "Open" }), _jsx("button", { onClick: () => {
+                                                                        const newName = prompt("Enter new name:", folderNode.name || "");
+                                                                        if (newName &&
+                                                                            newName.trim() &&
+                                                                            newName !== folderNode.name) {
+                                                                            try {
+                                                                                onRenameNode(newName.trim(), folderNode);
+                                                                            }
+                                                                            catch (error) {
+                                                                                console.error("Failed to rename:", error);
+                                                                                alert("Failed to rename folder. Please try again.");
+                                                                            }
+                                                                        }
+                                                                    }, className: "px-2 py-1 bg-yellow-500 text-white rounded text-sm hover:bg-blue-600", children: "Edit" }), _jsx("button", { onClick: () => showDeleteNodeModal(folderNode), className: "px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600", children: "Delete" })] })] }, folderNode.id)) : null) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium text-gray-500", children: "\uD83C\uDF10 Network Profile Documents" }), _jsx("div", { className: "space-y-2", children: filesWithDocuments
+                                                    .filter((file) => file.documentType === "powerhouse/network-profile")
+                                                    .map((fileNode) => (_jsxs("div", { className: "p-2 border rounded", children: [_jsxs("div", { className: "font-medium", children: ["\uD83C\uDF10 ", fileNode.name] }), _jsx("div", { className: "text-sm text-gray-500", children: "Network Profile" }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { onClick: () => {
+                                                                        setSelectedNode(fileNode);
+                                                                        setActiveDocumentId(fileNode.id);
+                                                                    }, className: "px-2 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600", children: "Open" }), _jsx("button", { onClick: () => {
+                                                                        if (!fileNode || !fileNode.id)
+                                                                            return;
+                                                                        const newName = prompt("Enter new name:", fileNode.name || "");
+                                                                        if (newName &&
+                                                                            newName.trim() &&
+                                                                            newName !== fileNode.name) {
+                                                                            try {
+                                                                                onRenameNode(newName.trim(), fileNode);
+                                                                            }
+                                                                            catch (error) {
+                                                                                alert("Failed to rename document. Please try again.");
+                                                                            }
+                                                                        }
+                                                                    }, className: "px-2 py-1 bg-yellow-500 text-white rounded text-sm hover:bg-blue-600", children: "Edit" }), _jsx("button", { onClick: () => showDeleteNodeModal(fileNode), className: "px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600", children: "Delete" })] })] }, fileNode.id))) })] })] }) })), folderChildren.length === 0 && fileChildren.length === 0 && (_jsxs("div", { className: "py-12 text-center text-gray-500", children: [_jsx("p", { className: "text-lg", children: "\uD83C\uDF10 No network profiles yet" }), _jsx("p", { className: "mt-2 text-sm", children: "Create your first network profile above" })] }))] }));
+            default:
+                return _jsxs("div", { children: ["Unknown node type: ", nodeType] });
+        }
+    };
+    // Handle folder creation with optional name parameter
+    const handleCreateFolder = useCallback(async (folderName) => {
+        let name = folderName;
+        // If no name provided, prompt for it (for manual folder creation)
+        if (!name) {
+            const promptResult = prompt("Enter folder name:");
+            name = promptResult || undefined;
+        }
+        if (name?.trim()) {
+            try {
+                await onAddFolder(name.trim(), selectedFolder);
+            }
+            catch (error) {
+                console.error("Failed to create folder:", error);
+            }
+        }
+    }, [onAddFolder, selectedFolder]);
+    // Handle document creation from modal
+    const onCreateDocument = useCallback(async (fileName) => {
+        setOpenModal(false);
+        // Use the document type that was set when the modal was opened
+        const documentType = modalDocumentType;
+        // Determine editor type based on document type
+        const editorType = documentType === "powerhouse/network-profile"
+            ? "network-profile-editor"
+            : "workstream-editor";
+        console.log(`Creating ${documentType} document: ${fileName}`);
+        try {
+            let folder = undefined;
+            if (documentType === "powerhouse/workstream") {
+                folder = await onAddFolder(fileName, undefined);
+            }
+            const node = await addDocument(selectedDrive?.header.id || "", fileName, documentType, folder?.id, getNewDocumentObject(fileName, documentType), undefined, editorType);
+            selectedDocumentModel.current = null;
+            console.log("Created document node", node);
+            if (node) {
+                // Customize: Auto-open created document by uncommenting below
+                // setActiveDocumentId(node.id);
+                // Refresh the sidebar by triggering a re-render
+                // Set the root node based on the document type that was created
+                if (documentType === "powerhouse/network-profile") {
+                    setSelectedRootNode("network-information");
+                }
+                else {
+                    setSelectedRootNode("workstreams");
+                }
+            }
+        }
+        catch (error) {
+            console.error("Failed to create document:", error);
+        }
+    }, [
+        addDocument,
+        selectedDrive?.header.id,
+        selectedFolder?.id,
+        modalDocumentType,
+    ]);
+    // === DOCUMENT EDITOR DATA ===
+    // Filter available document types here if needed
+    const documentModelModules = useDocumentModelModules();
+    // Get active document and its editor components
+    const activeDocument = activeDocumentId
+        ? fileChildren.find((file) => file.id === activeDocumentId)
+        : undefined;
+    const documentModelModule = activeDocument
+        ? documentModelModules?.find((m) => m.documentModel.id === activeDocument.documentType)
+        : null;
+    const editorModule = activeDocument
+        ? editorModules?.find((e) => e.documentTypes.includes(activeDocument.documentType))
+        : null;
+    // === RENDER ===
+    return (_jsx(IsolatedSidebarProvider, { nodes: sidebarNodes, children: _jsxs("div", { className: "flex h-full", children: [_jsx(IsolatedSidebar, { nodes: sidebarNodes, activeNodeId: selectedFolder?.id || activeDocumentId, onActiveNodeChange: handleActiveNodeChange, sidebarTitle: "Network Admin", showSearchBar: true, allowPinning: true, resizable: true, initialWidth: 300, maxWidth: 500, enableMacros: 2, handleOnTitleClick: () => {
+                        setActiveDocumentId(undefined);
+                        setSelectedRootNode("workstreams");
+                    } }), _jsx("div", { className: "flex-1 overflow-y-auto", children: activeDocumentId ? (_jsx(EditorContainer, { handleClose: () => setActiveDocumentId(undefined), hideToolbar: false, activeDocumentId: activeDocumentId, setActiveDocumentId: setActiveDocumentId })) : (displayActiveNode(selectedFolder?.id || selectedRootNode)) }), _jsx(CreateDocumentModal, { onContinue: onCreateDocument, onOpenChange: (open) => setOpenModal(open), open: openModal })] }) }));
+}

package/dist/editors/network-admin/components/EditorContainer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Document editor container that wraps individual document editors.
+ * Handles document loading, toolbar, revision history, and dynamic editor loading.
+ * Customize toolbar actions and editor context here.
+ */
+export declare const EditorContainer: (props: {
+    handleClose: () => void;
+    hideToolbar?: boolean;
+    activeDocumentId: string;
+    setActiveDocumentId: (id: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorContainer.d.ts.map

package/dist/editors/network-admin/components/EditorContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContainer.d.ts","sourceRoot":"","sources":["../../../../editors/network-admin/components/EditorContainer.tsx"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,4CAiKA,CAAC"}

package/dist/editors/network-admin/components/EditorContainer.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getRevisionFromDate, useTimelineItems } from "@powerhousedao/common";
+import { DocumentToolbar, RevisionHistory, } from "@powerhousedao/design-system";
+import { exportFile, useEditorModuleById, useSelectedDrive, useDocumentById, addDocument, useNodes, } from "@powerhousedao/reactor-browser";
+import { Suspense, useCallback, useState } from "react";
+import { getNewDocumentObject } from "../utils.js";
+/**
+ * Document editor container that wraps individual document editors.
+ * Handles document loading, toolbar, revision history, and dynamic editor loading.
+ * Customize toolbar actions and editor context here.
+ */
+export const EditorContainer = (props) => {
+    const { handleClose, hideToolbar = false, activeDocumentId, setActiveDocumentId, } = props;
+    // UI state for revision history and timeline
+    const [selectedTimelineItem, setSelectedTimelineItem] = useState(null);
+    const [showRevisionHistory, setShowRevisionHistory] = useState(false);
+    const [selectedDocument, dispatch] = useDocumentById(props.activeDocumentId);
+    const [selectedDrive] = useSelectedDrive();
+    const nodes = useNodes();
+    const folderId = nodes?.find((node) => node.id === selectedDocument?.header.id)
+        ?.parentFolder || undefined;
+    const createRfpDocument = useCallback(async () => {
+        const rfpDocName = `RFP-${selectedDocument?.state.global?.title || "Untitled"}`;
+        const rfpDocCode = `RFP-${selectedDocument?.state.global?.code || ""}`;
+        try {
+            const createdNode = await addDocument(selectedDrive?.header.id || "", rfpDocName, "powerhouse/rfp", folderId, getNewDocumentObject(rfpDocName, "powerhouse/rfp", rfpDocCode), undefined, "request-for-proposals-editor");
+            return createdNode;
+        }
+        catch (error) {
+            console.error("Error creating RFP document", error);
+            return null;
+        }
+    }, [selectedDrive, selectedDocument?.state.global, folderId]);
+    const createSowDocument = useCallback(async () => {
+        const sowDocName = `SOW-${selectedDocument?.state.global?.title || "Untitled"}`;
+        try {
+            const createdNode = await addDocument(selectedDrive?.header.id || "", sowDocName, "powerhouse/scopeofwork", folderId, getNewDocumentObject(sowDocName, "powerhouse/scopeofwork"), undefined, "scope-of-work-editor");
+            return createdNode;
+        }
+        catch (error) {
+            console.error("Error creating SOW document", error);
+            return null;
+        }
+    }, [selectedDrive, selectedDocument?.state.global, folderId]);
+    const createPaymentTermsDocument = useCallback(async () => {
+        const paymentTermsDocName = `Payment Terms-${selectedDocument?.state.global?.title || "Untitled"}`;
+        try {
+            const createdNode = await addDocument(selectedDrive?.header.id || "", paymentTermsDocName, "payment-terms", folderId, getNewDocumentObject(paymentTermsDocName, "payment-terms"), undefined, "payment-terms-editor");
+            return createdNode;
+        }
+        catch (error) {
+            console.error("Error creating Payment Terms document", error);
+            return null;
+        }
+    }, [selectedDrive, selectedDocument?.state.global, folderId]);
+    // Timeline data for revision history
+    const timelineItems = useTimelineItems(selectedDocument?.header.id, selectedDocument?.header.createdAtUtcIso, selectedDrive?.header.id);
+    const editorModule = useEditorModuleById(selectedDocument?.header.meta?.preferredEditor);
+    // Document export functionality - customize export behavior here
+    const onExport = useCallback(async () => {
+        if (selectedDocument) {
+            await exportFile(selectedDocument);
+        }
+    }, [selectedDocument]);
+    // Loading state component
+    const loadingContent = (_jsx("div", { className: "flex h-full flex-1 items-center justify-center", children: _jsx("div", { children: "sth is wrong fix yourself" }) }));
+    if (!selectedDocument)
+        return loadingContent;
+    // Dynamically load the appropriate editor component for this document type
+    const EditorComponent = editorModule?.Component;
+    if (!EditorComponent)
+        return loadingContent;
+    return (_jsx("div", { className: "", children: showRevisionHistory ? (
+        // Revision history view
+        _jsx(RevisionHistory, { documentId: selectedDocument.header.id, documentTitle: selectedDocument.header.name, globalOperations: selectedDocument.operations.global, localOperations: selectedDocument.operations.local, onClose: () => setShowRevisionHistory(false) }, selectedDocument.header.id)) : (
+        // Main editor view
+        _jsxs(Suspense, { fallback: loadingContent, children: [!hideToolbar && (_jsx(DocumentToolbar, { onClose: handleClose, onExport: onExport, onShowRevisionHistory: () => setShowRevisionHistory(true), onSwitchboardLinkClick: () => { }, title: selectedDocument.header.name, timelineButtonVisible: editorModule.config.timelineEnabled, timelineItems: timelineItems.data, onTimelineItemClick: setSelectedTimelineItem })), _jsx(EditorComponent, { context: {
+                        readMode: !!selectedTimelineItem,
+                        selectedTimelineRevision: getRevisionFromDate(selectedTimelineItem?.startDate, selectedTimelineItem?.endDate, selectedDocument.operations.global),
+                    }, dispatch: dispatch, document: selectedDocument, error: console.error, createRfp: createRfpDocument, setActiveDocumentId: setActiveDocumentId, createSow: createSowDocument, createPaymentTerms: createPaymentTermsDocument })] })) }));
+};

package/dist/editors/network-admin/components/FolderTree.d.ts

@@ -0,0 +1,15 @@
+import type { FolderNode, FileNode } from "document-drive";
+interface FolderTreeProps {
+    folders: FolderNode[];
+    files: FileNode[];
+    selectedNodeId?: string;
+    onSelectNode: (nodeId: string | undefined) => void;
+    onSelectFile: (fileNode: FileNode) => void;
+}
+/**
+ * Hierarchical folder tree navigation component.
+ * Displays folders in a tree structure with expand/collapse functionality.
+ */
+export declare function FolderTree({ folders, files, selectedNodeId, onSelectNode, onSelectFile, }: FolderTreeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FolderTree.d.ts.map

package/dist/editors/network-admin/components/FolderTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/network-admin/components/FolderTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG3D,UAAU,eAAe;IACvB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,GACb,EAAE,eAAe,2CAqHjB"}