@powerhousedao/codegen 0.49.2-dev.1 → 0.49.2-dev.11

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from "./src/codegen/index.js";
 export * from "./src/create-lib/index.js";
 export * from "./src/utils/index.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC"}

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model/index.js

@@ -60,3 +60,4 @@ function isEmptyStateSchema(schema) {
 function handleEmptyState(state) {
     return state === "" ? "{}" : state;
 }
+//# sourceMappingURL=index.js.map

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model/index.ts"],"names":[],"mappings":";;AAAA,6CAAwC;AAGxC,SAAS,qBAAqB,CAAC,aAAiC;IAC9D,OAAO,IAAI,CAAC,SAAS,CACnB;QACE,GAAG,aAAa;QAChB,cAAc,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,GAAG,CAAC;YACJ,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBACnD,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,KAA6B,CAAC,CAAC;gBACrD,OAAO;oBACL,GAAG,MAAM;oBACT,CAAC,KAAK,CAAC,EAAE;wBACP,GAAG,KAAK;wBACR,4CAA4C;wBAC5C,mCAAmC;wBACnC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC;qBACjD;iBACF,CAAC;YACJ,CAAC,EAAE,EAAE,CAAC;SACP,CAAC,CAAC;KACJ,EACD,IAAI,EACJ,CAAC,CACF,CAAC;AACJ,CAAC;AAOD,kBAAe;IACb,MAAM,EAAE,CAAC,EACP,IAAI,GAGL,EAWC,EAAE;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAuB,CAAC;QAC3E,MAAM,UAAU,GACd,aAAa,CAAC,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAExE,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,aAAa,EAAE,qBAAqB,CAAC,aAAa,CAAC;YACnD,cAAc,EAAE,aAAa,CAAC,EAAE;YAChC,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,SAAS,EAAE,aAAa,CAAC,SAAS;YAClC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtC,GAAG,CAAC;gBACJ,IAAI,EAAE,IAAA,uBAAS,EAAC,CAAC,CAAC,IAAI,CAAC;aACxB,CAAC,CAAC;YACH,aAAa,EAAE,aAAa,CAAC,SAAS;YACtC,cAAc,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE;YACpD,GAAG,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAAC;SACtC,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,SAAS,gBAAgB,CAAC,UAAsB;IAC9C,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC;IACrC,MAAM,MAAM,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IAEjC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE;QAChD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,YAAY,KAAK,EAAE,EAAE,CAAC;YACnE,MAAM,IAAI,KAAK,CACb,GACE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CACrD,8DAA8D,CAC/D,CAAC;QACJ,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,CAAC,YAAY,CAAC;QACzD,iBAAiB,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC;KACxD,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAc;IACxC,OAAO,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa;IACrC,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;AACrC,CAAC"}

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.js

@@ -25,3 +25,4 @@ exports.default = {
         };
     },
 };
+//# sourceMappingURL=index.js.map

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.ts"],"names":[],"mappings":";;AAAA,6CAAwC;AAaxC,kBAAe;IACb,MAAM,EAAE,CAAC,EAAE,IAAI,EAAwB,EAAE,EAAE;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAuB,CAAC;QAC3E,MAAM,UAAU,GACd,aAAa,CAAC,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACxE,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,CAC/C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAC9B,CAAC;QAEF,MAAM,OAAO,GACX,eAAe,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACxC,IAAI,EAAE,CAAC,CAAC,IAAI;gBACZ,QAAQ,EAAE,CAAC,CAAC,MAAM,KAAK,IAAI;gBAC3B,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC;gBACjD,uEAAuE;gBACvE,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,QAAQ;gBAC1B,KAAK,EAAE,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,gCAAgC;gBAC5E,MAAM,EAAE,CAAC,CAAC,MAAM;aACjB,CAAC,CAAC;YACL,CAAC,CAAC,EAAE,CAAC;QAET,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,MAAM,EAAE,IAAA,uBAAS,EAAC,IAAI,CAAC,MAAM,CAAC;YAC9B,OAAO;SACR,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-subgraph/index.js

@@ -19,3 +19,4 @@ const generateDocumentModelMutations = {
     },
 };
 exports.default = generateDocumentModelMutations;
+//# sourceMappingURL=index.js.map

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-subgraph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model-subgraph/index.ts"],"names":[],"mappings":";;AAAA,6CAAwC;AASxC,MAAM,8BAA8B,GAAG;IACrC,MAAM,EAAE,CAAC,EACP,IAAI,GAGL,EAOC,EAAE;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAuB,CAAC;QAC3E,MAAM,UAAU,GACd,aAAa,CAAC,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAExE,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,aAAa,CAAC,EAAE;YAChC,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;YACtC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtC,GAAG,CAAC;gBACJ,IAAI,EAAE,IAAA,uBAAS,EAAC,CAAC,CAAC,IAAI,CAAC;aACxB,CAAC,CAAC;SACJ,CAAC;IACJ,CAAC;CACF,CAAC;AACF,kBAAe,8BAA8B,CAAC"}

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-subgraph/resolvers.esm.t

@@ -16,6 +16,46 @@ export const getResolvers = (subgraph: Subgraph) => {
   const reactor = subgraph.reactor;
 
   return ({
+    Query: {
+      <%- h.changeCase.pascal(documentType) %>: async (_: any, args: any, ctx: any) => {
+        return {
+          getDocument: async (args: any) => {
+            const driveId: string = args.driveId || DEFAULT_DRIVE_ID;
+            const docId: string = args.docId || "";
+            const doc = await reactor.getDocument(driveId, docId);
+             return {
+              id: docId,
+              driveId: driveId,
+              ...doc,
+              state: doc.state.global,
+              stateJSON: doc.state.global,
+              revision: doc.revision.global,
+            };
+          },
+          getDocuments: async (args: any) => {
+            const driveId: string = args.driveId || DEFAULT_DRIVE_ID;
+            const docsIds = await reactor.getDocuments(driveId);
+            const docs = await Promise.all(
+              docsIds.map(async (docId) => {
+                const doc = await reactor.getDocument(driveId, docId);
+                return {
+                  id: docId,
+                  driveId: driveId,
+                  ...doc,
+                  state: doc.state.global,
+                  stateJSON: doc.state.global,
+                  revision: doc.revision.global,
+                };
+              }),
+            );
+
+            return docs.filter(
+              (doc) => doc.documentType === "<%- documentTypeId %>",
+            );
+          },
+        };
+      },
+    },
     Mutation: {
 
       <%- h.changeCase.pascal(documentType) %>_createDocument: async (_: any, args: any) => {
@@ -62,13 +102,5 @@ export const getResolvers = (subgraph: Subgraph) => {
 
 <%_ })}); %>
     },
-    Query: {
-      <%- h.changeCase.pascal(documentType) %>: async (_: any, args: any) => {
-        const driveId: string = args.driveId || DEFAULT_DRIVE_ID;
-        const docId: string = args.docId || "";
-        const doc = await reactor.getDocument(driveId, docId);
-        return doc.state.global;
-      }
-    }
   });
 };

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-subgraph/schema.esm.t

@@ -12,6 +12,19 @@ Subgraph definition for <%= h.changeCase.pascal(documentType) %> (<%- documentTy
 """
 <%- schema %> 
 
+"""
+Queries: <%= h.changeCase.pascal(documentType) %>
+"""
+
+type <%- h.changeCase.pascal(documentType) %>Queries {
+    getDocument(driveId: String, docId: PHID): <%- h.changeCase.pascal(documentType) %>
+    getDocuments: [<%- h.changeCase.pascal(documentType) %>!]
+}
+
+type Query {
+    <%- h.changeCase.pascal(documentType) %>: <%- h.changeCase.pascal(documentType) %>Queries
+}
+
 """
 Mutations: <%= h.changeCase.pascal(documentType) %>
 """
@@ -31,10 +44,6 @@ type Mutation {
 Module: <%= h.changeCase.pascal(module.name) %>
 """
 <% module.operations.forEach(op => { _%>
-<%- op.schema.replace('input ', 'input ' + h.changeCase.pascal(documentType) + '_') %>
+<%- op.schema.replace('input ', 'input ' + h.changeCase.pascal(documentType) + '_').replace('type ', 'type ' + h.changeCase.pascal(documentType) + '_') %>
 <%_ })}); %>
-
-type Query {
-    <%- h.changeCase.pascal(documentType) %>(driveId:String, docId:PHID): <%- h.changeCase.pascal(documentType) %>State
-}
 `

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/components/CreateDocument.esm.t

@@ -0,0 +1,49 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/CreateDocument.tsx"
+unless_exists: true
+---
+import { Button } from "@powerhousedao/design-system";
+import { type DocumentModelModule } from "document-model";
+
+interface CreateDocumentProps {
+  documentModels?: DocumentModelModule[];
+  createDocument: (doc: DocumentModelModule) => void;
+}
+
+function getDocumentSpec(doc: DocumentModelModule) {
+  if ("documentModelState" in doc) {
+    return doc.documentModelState as DocumentModelModule["documentModel"];
+  }
+
+  return doc.documentModel;
+}
+
+export const CreateDocument: React.FC<CreateDocumentProps> = ({
+  documentModels,
+  createDocument,
+}) => {
+  return (
+    <div className="px-6">
+      <h3 className="mb-3 mt-4 text-sm font-bold text-gray-600">
+        New document
+      </h3>
+      <div className="flex w-full flex-wrap gap-4">
+        {documentModels?.map((doc) => {
+          const spec = getDocumentSpec(doc);
+          return (
+            <Button
+              key={spec.id}
+              color="light"
+              size="small"
+              className="cursor-pointer"
+              aria-details={spec.description}
+              onClick={() => createDocument(doc)}
+            >
+              <span className="text-sm">{spec.name}</span>
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}; 

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/components/DriveExplorer.esm.t

@@ -0,0 +1,214 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/DriveExplorer.tsx"
+unless_exists: true
+---
+import {
+  type BaseUiFileNode,
+  type BaseUiFolderNode,
+  type BaseUiNode,
+  type UiFileNode,
+  type UiFolderNode,
+  type UiNode,
+} from "@powerhousedao/design-system";
+import { useCallback, useState, useRef, useEffect } from "react";
+import type { FileNode, Node } from "document-drive";
+import { FileItemsGrid } from "./FileItemsGrid.js";
+import { FolderItemsGrid } from "./FolderItemsGrid.js";
+import { FolderTree } from "./FolderTree.js";
+import { useTransformedNodes } from "../hooks/useTransformedNodes.js";
+import { useSelectedFolderChildren } from "../hooks/useSelectedFolderChildren.js";
+import { EditorContainer } from "./EditorContainer.js";
+import type { EditorContext, DocumentModelModule } from "document-model";
+import { CreateDocumentModal } from "@powerhousedao/design-system";
+import { CreateDocument } from "./CreateDocument.js";
+import { useDriveContext } from "@powerhousedao/reactor-browser";
+
+interface DriveExplorerProps {
+  driveId: string;
+  nodes: Node[];
+  onAddFolder: (name: string, parentFolder?: string) => void;
+  onDeleteNode: (nodeId: string) => void;
+  renameNode: (nodeId: string, name: string) => void;
+  onCopyNode: (nodeId: string, targetName: string, parentId?: string) => void;
+  context: EditorContext;
+}
+
+export function DriveExplorer({
+  driveId,
+  nodes,
+  onDeleteNode,
+  renameNode,
+  onAddFolder,
+  onCopyNode,
+  context,
+}: DriveExplorerProps) {
+  const [selectedNodeId, setSelectedNodeId] = useState<string | undefined>();
+  const [activeDocumentId, setActiveDocumentId] = useState<
+    string | undefined
+  >();
+  const [openModal, setOpenModal] = useState(false);
+  const selectedDocumentModel = useRef<DocumentModelModule | null>(null);
+  const { addDocument, documentModels } = useDriveContext();
+
+  // Dummy functions to satisfy component types
+  const dummyDuplicateNode = useCallback((node: BaseUiNode) => {
+    console.log("Duplicate node:", node);
+  }, []);
+
+  const dummyAddFile = useCallback(
+    async (file: File, parentNode: BaseUiNode | null) => {
+      console.log("Add file:", file, parentNode);
+    },
+    []
+  );
+
+  const dummyMoveNode = useCallback(
+    async (uiNode: BaseUiNode, targetNode: BaseUiNode) => {
+      console.log("Move node:", uiNode, targetNode);
+    },
+    []
+  );
+
+  const handleNodeSelect = useCallback((node: BaseUiFolderNode) => {
+    console.log("Selected node:", node);
+    setSelectedNodeId(node.id);
+  }, []);
+
+  const handleFileSelect = useCallback((node: BaseUiFileNode) => {
+    setActiveDocumentId(node.id);
+  }, []);
+
+  const handleEditorClose = useCallback(() => {
+    setActiveDocumentId(undefined);
+  }, []);
+
+  const onCreateDocument = useCallback(
+    async (fileName: string) => {
+      setOpenModal(false);
+
+      const documentModel = selectedDocumentModel.current;
+      if (!documentModel) return;
+
+      const node = await addDocument(
+        driveId,
+        fileName,
+        documentModel.documentModel.id
+      );
+
+      selectedDocumentModel.current = null;
+      setActiveDocumentId(node.id);
+    },
+    [addDocument, driveId]
+  );
+
+  const onSelectDocumentModel = useCallback(
+    (documentModel: DocumentModelModule) => {
+      selectedDocumentModel.current = documentModel;
+      setOpenModal(true);
+    },
+    []
+  );
+
+  const filteredDocumentModels = documentModels;
+
+  // Transform nodes using the custom hook
+  const transformedNodes = useTransformedNodes(nodes, driveId);
+
+  // Separate folders and files
+  const folders = transformedNodes.filter(
+    (node): node is UiFolderNode => node.kind === "FOLDER"
+  );
+  const files = transformedNodes.filter(
+    (node): node is UiFileNode => node.kind === "FILE"
+  );
+
+  // Get children of selected folder using the custom hook
+  const selectedFolderChildren = useSelectedFolderChildren(
+    selectedNodeId,
+    folders,
+    files
+  );
+
+  // Get the active document info from nodes
+  const activeDocument = activeDocumentId
+    ? files.find((file) => file.id === activeDocumentId)
+    : undefined;
+
+  return (
+    <div className="flex h-full">
+      {/* Sidebar */}
+      <div className="w-64 border-r border-gray-200 p-4 overflow-y-auto">
+        <h2 className="text-lg font-semibold mb-4">Folders</h2>
+        <FolderTree
+          folders={folders}
+          selectedNodeId={selectedNodeId}
+          onSelectNode={handleNodeSelect}
+        />
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 p-4 overflow-y-auto">
+        {activeDocument ? (
+          <EditorContainer
+            context={context}
+            documentId={activeDocumentId!}
+            documentType={activeDocument.documentType}
+            driveId={driveId}
+            onClose={handleEditorClose}
+            title={activeDocument.name}
+          />
+        ) : (
+          <>
+            <h2 className="text-lg font-semibold mb-4">Contents</h2>
+
+            {/* Folders Section */}
+            <FolderItemsGrid
+              folders={selectedFolderChildren.folders}
+              onSelectNode={handleNodeSelect}
+              onRenameNode={renameNode}
+              onDuplicateNode={(uiNode) =>
+                onCopyNode(
+                  uiNode.id,
+                  "Copy of " + uiNode.name,
+                  uiNode.parentFolder
+                )
+              }
+              onDeleteNode={onDeleteNode}
+              onAddFile={dummyAddFile}
+              onCopyNode={async (uiNode, targetNode) =>
+                onCopyNode(uiNode.id, "Copy of " + uiNode.name, targetNode.id)
+              }
+              onMoveNode={dummyMoveNode}
+              isAllowedToCreateDocuments={true}
+              onAddFolder={onAddFolder}
+              parentFolderId={selectedNodeId}
+            />
+
+            {/* Files Section */}
+            <FileItemsGrid
+              files={selectedFolderChildren.files}
+              onSelectNode={handleFileSelect}
+              onRenameNode={renameNode}
+              onDuplicateNode={dummyDuplicateNode}
+              onDeleteNode={onDeleteNode}
+              isAllowedToCreateDocuments={true}
+            />
+
+            {/* Create Document Section */}
+            <CreateDocument
+              createDocument={onSelectDocumentModel}
+              documentModels={filteredDocumentModels}
+            />
+          </>
+        )}
+      </div>
+
+      {/* Create Document Modal */}
+      <CreateDocumentModal
+        onContinue={onCreateDocument}
+        onOpenChange={(open) => setOpenModal(open)}
+        open={openModal}
+      />
+    </div>
+  );
+} 

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/components/EditorContainer.esm.t

@@ -0,0 +1,127 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/EditorContainer.tsx"
+unless_exists: true
+---
+import {
+  useDriveContext,
+  exportDocument,
+  type User,
+} from "@powerhousedao/reactor-browser";
+import {
+    documentModelDocumentModelModule,
+  type DocumentModelModule,
+  type EditorContext,
+  type EditorProps,
+  type PHDocument,
+} from "document-model";
+import {
+  DocumentToolbar,
+  RevisionHistory,
+  DefaultEditorLoader,
+} from "@powerhousedao/design-system";
+import { useState, Suspense, type FC, useCallback, lazy } from "react";
+
+export interface EditorContainerProps {
+  driveId: string;
+  documentId: string;
+  documentType: string;
+  onClose: () => void;
+  title: string;
+  context: EditorContext;
+}
+
+const documentModelsMap = {
+  [documentModelDocumentModelModule.documentModel.id]: documentModelDocumentModelModule,
+};
+
+const documentEditorMap = {
+  [documentModelDocumentModelModule.documentModel.id]: lazy(() =>
+    import('@powerhousedao/builder-tools/style.css').then(() =>
+      import("@powerhousedao/builder-tools/document-model-editor").then((m) => ({
+        default: m.documentModelEditorModule.Component,
+      }))
+    )
+  ),
+} as const;
+
+function getDocumentModel(documentType: string) {
+  return documentModelsMap[documentType];
+}
+
+function getDocumentEditor(documentType: string) {
+  return documentEditorMap[documentType];
+}
+
+export const EditorContainer: React.FC<EditorContainerProps> = (props) => {
+  const { driveId, documentId, documentType, onClose, title, context } = props;
+
+  const [showRevisionHistory, setShowRevisionHistory] = useState(false);
+  const { useDocumentEditorProps } = useDriveContext();
+  const user = context.user as User | undefined;
+
+  const documentModelModule = getDocumentModel(
+    documentType,
+  ) as DocumentModelModule<PHDocument>;
+
+  const { dispatch, error, document } = useDocumentEditorProps({
+    documentId,
+    documentType,
+    driveId,
+    documentModelModule,
+    user,
+  });
+
+  const onExport = useCallback(async () => {
+    if (document) {
+      const ext = documentModelModule.documentModel.extension;
+      await exportDocument(document, title, ext);
+    }
+  }, [document?.revision.global, document?.revision.local]);
+
+  const loadingContent = (
+    <div className="flex-1 flex justify-center items-center h-full">
+      <DefaultEditorLoader />
+    </div>
+  );
+
+  if (!document) return loadingContent;
+
+  const Editor = getDocumentEditor(documentType);
+
+  if (!Editor) {
+    console.error("No editor found for document type:", documentType);
+    return (
+      <div className="flex-1">
+        No editor found for document type: {documentType}
+      </div>
+    );
+  }
+  const EditorComponent = Editor as FC<EditorProps<PHDocument>>;
+
+  return showRevisionHistory ? (
+    <RevisionHistory
+      documentId={documentId}
+      documentTitle={title}
+      globalOperations={document.operations.global}
+      key={documentId}
+      localOperations={document.operations.local}
+      onClose={() => setShowRevisionHistory(false)}
+    />
+  ) : (
+    <Suspense fallback={loadingContent}>
+      <DocumentToolbar
+        onClose={onClose}
+        onExport={onExport}
+        onShowRevisionHistory={() => setShowRevisionHistory(true)}
+        onSwitchboardLinkClick={() => {}}
+        title={title}
+      />
+      <EditorComponent
+        context={context}
+        dispatch={dispatch}
+        document={document}
+        error={error}
+      />
+    </Suspense>
+  );
+}; 

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/components/FileItemsGrid.esm.t

@@ -0,0 +1,44 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FileItemsGrid.tsx"
+unless_exists: true
+---
+import { FileItem, type UiFileNode, type BaseUiFileNode } from "@powerhousedao/design-system";
+
+interface FileItemsGridProps {
+  files: UiFileNode[];
+  onSelectNode: (node: BaseUiFileNode) => void;
+  onRenameNode: (nodeId: string, name: string) => void;
+  onDuplicateNode: (node: BaseUiFileNode) => void;
+  onDeleteNode: (nodeId: string) => void;
+  isAllowedToCreateDocuments: boolean;
+}
+
+export function FileItemsGrid({
+  files,
+  onSelectNode,
+  onRenameNode,
+  onDuplicateNode,
+  onDeleteNode,
+  isAllowedToCreateDocuments,
+}: FileItemsGridProps) {
+  if (files.length === 0) return null;
+
+  return (
+    <div>
+      <h3 className="text-sm font-medium text-gray-500 mb-2">Files</h3>
+      <div className="flex flex-wrap gap-2">
+        {files.map((file) => (
+          <FileItem
+            key={file.id}
+            uiNode={file}
+            onSelectNode={onSelectNode}
+            onRenameNode={(name) => onRenameNode(file.id, name)}
+            onDuplicateNode={onDuplicateNode}
+            onDeleteNode={() => onDeleteNode(file.id)}
+            isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+          />
+        ))}
+      </div>
+    </div>
+  );
+} 

package/dist/src/codegen/.hygen/templates/powerhouse/generate-drive-editor/components/FolderItemsGrid.esm.t

@@ -0,0 +1,96 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderItemsGrid.tsx"
+unless_exists: true
+---
+import {
+  FolderItem,
+  type UiFolderNode,
+  type UiNode,
+  type BaseUiFolderNode,
+  type BaseUiNode,
+} from "@powerhousedao/design-system";
+import { useState } from "react";
+
+interface FolderItemsGridProps {
+  folders: UiFolderNode[];
+  onSelectNode: (node: BaseUiFolderNode) => void;
+  onRenameNode: (nodeId: string, name: string) => void;
+  onDuplicateNode: (node: BaseUiFolderNode) => void;
+  onDeleteNode: (nodeId: string) => void;
+  onAddFile: (file: File, parentNode: BaseUiNode | null) => Promise<void>;
+  onCopyNode: (uiNode: BaseUiNode, targetNode: BaseUiNode) => Promise<void>;
+  onMoveNode: (uiNode: BaseUiNode, targetNode: BaseUiNode) => Promise<void>;
+  isAllowedToCreateDocuments: boolean;
+  onAddFolder: (name: string, parentFolder?: string) => void;
+  parentFolderId?: string;
+}
+
+export function FolderItemsGrid({
+  folders,
+  onSelectNode,
+  onRenameNode,
+  onDuplicateNode,
+  onDeleteNode,
+  onAddFile,
+  onCopyNode,
+  onMoveNode,
+  isAllowedToCreateDocuments,
+  onAddFolder,
+  parentFolderId,
+}: FolderItemsGridProps) {
+  const [newFolderName, setNewFolderName] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newFolderName.trim()) {
+      onAddFolder(newFolderName.trim(), parentFolderId);
+      setNewFolderName("");
+    }
+  };
+
+  return (
+    <div className="mb-6">
+      <div className="flex items-center gap-4 mb-2">
+        <h3 className="text-sm font-medium text-gray-500">Folders</h3>
+        
+        {/* New Folder Input */}
+        <form onSubmit={handleSubmit} className="w-48">
+          <div className="relative">
+            <input
+              type="text"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              placeholder="Create new folder..."
+              className="w-full px-3 py-1.5 pr-8 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+            <button
+              type="submit"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none text-sm"
+            >
+              +
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {folders.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {folders.map((folder) => (
+            <FolderItem
+              key={folder.id}
+              uiNode={folder}
+              onSelectNode={onSelectNode}
+              onRenameNode={(name) => onRenameNode(folder.id, name)}
+              onDuplicateNode={onDuplicateNode}
+              onDeleteNode={() => onDeleteNode(folder.id)}
+              onAddFile={onAddFile}
+              onCopyNode={onCopyNode}
+              onMoveNode={onMoveNode}
+              isAllowedToCreateDocuments={isAllowedToCreateDocuments}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}