@powerhousedao/codegen 5.0.0-staging.2 → 5.0.0-staging.20

package/README.md

@@ -16,7 +16,6 @@ A powerful code generation toolkit for the Powerhouse ecosystem, designed to aut
 pnpm add @powerhousedao/codegen
 ```
 
-
 ## Templates
 
 The package supports custom templates for different output formats:

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

@@ -4,7 +4,7 @@ force: true
 ---
 import { type Subgraph } from "@powerhousedao/reactor-api";
 
-export const getResolvers = (subgraph: Subgraph) => {
+export const getResolvers = (subgraph: Subgraph): Record<string, unknown> => {
   const reactor = subgraph.reactor;
 
   return ({

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

@@ -1,5 +1,5 @@
-import { type DocumentModelState } from "document-model";
-import { type Args } from "../generate-document-model/index.js";
+import type { DocumentModelState } from "document-model";
+import type { Args } from "../generate-document-model/index.js";
 type ModuleArgs = Args & {
     module: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAEhE,KAAK,UAAU,GAAG,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAC5C,KAAK,cAAc,GACjB,kBAAkB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1G,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;;uBAGmB;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE;;;;;;;;AADzC,wBA2CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAEhE,KAAK,UAAU,GAAG,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAC5C,KAAK,cAAc,GACjB,kBAAkB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1G,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;;uBAGmB;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE;;;;;;;;AADzC,wBAiDE"}

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

@@ -18,12 +18,15 @@ exports.default = {
             : [];
         const errors = actions.reduce((acc, action) => {
             action.errors.forEach((error) => {
-                const existingError = acc.find((e) => e.code === error.code);
+                // Fallback: If error code is empty, generate it from the error name in PascalCase
+                const errorCode = error.code || (0, change_case_1.pascalCase)(error.name || "");
+                const normalizedError = { ...error, code: errorCode };
+                const existingError = acc.find((e) => e.code === errorCode);
                 if (!existingError) {
-                    acc.push(error);
+                    acc.push(normalizedError);
                 }
-                else if (JSON.stringify(existingError) !== JSON.stringify(error)) {
-                    console.warn(`Warning: Duplicate error code "${error.code}" with different fields found`);
+                else if (JSON.stringify(existingError) !== JSON.stringify(normalizedError)) {
+                    console.warn(`Warning: Duplicate error code "${errorCode}" with different fields found`);
                 }
             });
             return acc;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.ts"],"names":[],"mappings":";;AAAA,6CAAwC;AAgBxC,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,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,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YAC9D,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC9B,MAAM,aAAa,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC7D,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAClB,CAAC;qBAAM,IAAI,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;oBACnE,OAAO,CAAC,IAAI,CACV,kCAAkC,KAAK,CAAC,IAAI,+BAA+B,CAC5E,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,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;YACP,MAAM;SACP,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/codegen/.hygen/templates/powerhouse/generate-document-model-module/index.ts"],"names":[],"mappings":";;AAAA,6CAAoD;AAgBpD,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,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,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YAC9D,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC9B,kFAAkF;gBAClF,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,IAAI,IAAA,wBAAU,EAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;gBAC7D,MAAM,eAAe,GAAG,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gBAEtD,MAAM,aAAa,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;gBAC5D,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnB,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBAC5B,CAAC;qBAAM,IACL,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EACjE,CAAC;oBACD,OAAO,CAAC,IAAI,CACV,kCAAkC,SAAS,+BAA+B,CAC3E,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,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;YACP,MAAM;SACP,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -7,7 +7,7 @@ import { addFile } from "document-drive";
 import { actions <% modules.forEach(module => { %><% module.operations.forEach(op => { %>, type <%- h.changeCase.pascal(op.name) %>Input<%_ })}); %>, type <%- h.changeCase.pascal(documentType) %>Document } from "../../document-models/<%- h.changeCase.param(documentType) %>/index.js";
 import { setName } from "document-model";
 
-export const getResolvers = (subgraph: Subgraph) => {
+export const getResolvers = (subgraph: Subgraph): Record<string, unknown> => {
   const reactor = subgraph.reactor;
 
   return ({
@@ -33,6 +33,8 @@ export const getResolvers = (subgraph: Subgraph) => {
               driveId: driveId,
               ...doc,
               ...doc.header,
+              created: doc.header.createdAtUtcIso,
+              lastModified: doc.header.lastModifiedAtUtcIso,
               state: doc.state.global,
               stateJSON: doc.state.global,
               revision: doc.header?.revision?.global ?? 0,
@@ -48,6 +50,8 @@ export const getResolvers = (subgraph: Subgraph) => {
                   driveId: driveId,
                   ...doc,
                   ...doc.header,
+                  created: doc.header.createdAtUtcIso,
+                  lastModified: doc.header.lastModifiedAtUtcIso,
                   state: doc.state.global,
                   stateJSON: doc.state.global,
                   revision: doc.header?.revision?.global ?? 0,

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

@@ -2,45 +2,54 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/CreateDocument.tsx"
 unless_exists: true
 ---
+import { Button } from "@powerhousedao/design-system";
 import {
-  addDocument,
+  isDocumentTypeSupported,
+  showPHModal,
   useDocumentModelModules,
   useSelectedDriveId,
-  useSelectedFolder,
   type VetraDocumentModelModule,
 } from "@powerhousedao/reactor-browser";
-import { Button } from "@powerhousedao/design-system";
+
+interface CreateDocumentProps {
+  documentTypes?: string[];
+}
 
 /**
  * Document creation UI component.
  * Displays available document types as clickable buttons.
  */
-export const CreateDocument = () => {
+export const CreateDocument = (props: CreateDocumentProps) => {
+  const { documentTypes = [] } = props;
+
   const selectedDriveId = useSelectedDriveId();
-  const selectedFolder = useSelectedFolder();
   const documentModelModules = useDocumentModelModules();
 
-  async function handleAddDocument(module: VetraDocumentModelModule) {
+  const filteredDocumentModelModules = documentModelModules.filter((module) =>
+    isDocumentTypeSupported(module.documentModel.id, documentTypes),
+  );
+
+  function handleAddDocument(module: VetraDocumentModelModule) {
     if (!selectedDriveId) {
       return;
     }
-    await addDocument(
-      selectedDriveId,
-      `New ${module.documentModel.name} document`,
-      module.documentModel.id,
-      selectedFolder?.id,
-    );
+
+    // Display the Create Document modal on the host app
+    showPHModal({
+      type: "createDocument",
+      documentType: module.documentModel.id,
+    });
   }
 
   return (
-    <div className="px-6">
+    <div>
       {/* Customize section title here */}
       <h3 className="mb-3 mt-4 text-sm font-bold text-gray-600">
-        New document
+        Create document
       </h3>
       {/* Customize layout by changing flex-wrap, gap, or grid layout */}
       <div className="flex w-full flex-wrap gap-4">
-        {documentModelModules?.map((documentModelModule) => {
+        {filteredDocumentModelModules.map((documentModelModule) => {
           return (
             <Button
               key={documentModelModule.documentModel.id}

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

@@ -4,32 +4,28 @@ unless_exists: true
 ---
 import {
   Breadcrumbs,
-  CreateDocumentModal,
+  Button,
   FileItem,
   FolderItem,
   useBreadcrumbs,
 } from "@powerhousedao/design-system";
 import {
-  addDocument,
   type DriveEditorProps,
   getSyncStatusSync,
   setSelectedNode,
-  useAllFolderNodes,
-  useDocumentModelModules,
-  useDriveContext,
+  showDeleteNodeModal,
   useDriveSharingType,
-  useEditorModules,
-  useFileChildNodes,
-  useFolderChildNodes,
-  useSelectedDrive,
+  useFileChildNodesForId,
+  useFolderChildNodesForId,
+  useNodeActions,
+  useNodes,
+  useSelectedDriveDocument,
   useSelectedFolder,
   useSelectedNodePath,
   useUserPermissions,
 } from "@powerhousedao/reactor-browser";
-import type { DocumentModelModule } from "document-model";
-import { useCallback, useRef, useState } from "react";
+import { useCallback } from "react";
 import { CreateDocument } from "./CreateDocument.js";
-import { EditorContainer } from "./EditorContainer.js";
 import { FolderTree } from "./FolderTree.js";
 
 /**
@@ -37,14 +33,8 @@ import { FolderTree } from "./FolderTree.js";
  * Layout: Left sidebar (folder tree) + Right content area (files/folders + document editor)
  */
 export function DriveExplorer(props: DriveEditorProps) {
-  // === DOCUMENT EDITOR STATE ===
-  // Customize document opening/closing behavior here
-  const [activeDocumentId, setActiveDocumentId] = useState<
-    string | undefined
-  >();
-  const [openModal, setOpenModal] = useState(false);
-  const selectedDocumentModel = useRef<DocumentModelModule | null>(null);
-  const editorModules = useEditorModules();
+  const { children, editorConfig } = props;
+
   // === DRIVE CONTEXT HOOKS ===
   // Core drive operations and document models
   const {
@@ -54,16 +44,15 @@ export function DriveExplorer(props: DriveEditorProps) {
     onDuplicateNode,
     onMoveNode,
     onRenameNode,
-    showDeleteNodeModal,
-  } = useDriveContext();
+  } = useNodeActions();
 
   const { isAllowedToCreateDocuments } = useUserPermissions();
   // === STATE MANAGEMENT HOOKS ===
   // Core state hooks for drive navigation
-  const [selectedDrive] = useSelectedDrive(); // Currently selected drive
+  const [selectedDrive] = useSelectedDriveDocument(); // Currently selected drive
   const selectedFolder = useSelectedFolder(); // Currently selected folder
   const selectedNodePath = useSelectedNodePath();
-  const sharingType = useDriveSharingType(selectedDrive?.header.id);
+  const sharingType = useDriveSharingType(selectedDrive.header.id);
 
   // === NAVIGATION SETUP ===
   // Breadcrumbs for folder navigation
@@ -72,11 +61,13 @@ export function DriveExplorer(props: DriveEditorProps) {
     setSelectedNode,
   });
 
-  const folderChildren = useFolderChildNodes();
-  const fileChildren = useFileChildNodes();
+  const selectedNodeId = selectedFolder?.id || selectedDrive.header.id;
+
+  const folderChildren = useFolderChildNodesForId(selectedNodeId);
+  const fileChildren = useFileChildNodesForId(selectedNodeId);
 
-  // All folders for the sidebar tree view
-  const allFolders = useAllFolderNodes();
+  // All nodes (folders and files) for the sidebar tree view
+  const allNodes = useNodes() || [];
 
   // === EVENT HANDLERS ===
 
@@ -102,82 +93,31 @@ export function DriveExplorer(props: DriveEditorProps) {
     [onAddFolder, selectedFolder],
   );
 
-  // Handle document creation from modal
-  const onCreateDocument = useCallback(
-    async (fileName: string) => {
-      setOpenModal(false);
-
-      const documentModel = selectedDocumentModel.current;
-      if (!documentModel || !selectedDrive?.header.id) return;
-
-      try {
-        const node = await addDocument(
-          selectedDrive.header.id,
-          fileName,
-          documentModel.documentModel.id,
-          selectedFolder?.id,
-        );
-
-        selectedDocumentModel.current = null;
-
-        if (node) {
-          // Customize: Auto-open created document by uncommenting below
-          // setActiveDocumentId(node.id);
-        }
-      } catch (error) {
-        console.error("Failed to create document:", error);
-      }
-    },
-    [addDocument, editorModules, selectedDrive?.header.id, selectedFolder?.id],
-  );
-
-  // === 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;
+  // if a document is selected then it's editor will be passed as children
+  const showDocumentEditor = !!children;
 
   // === RENDER ===
   return (
     <div className="flex h-full">
-      {/* === LEFT SIDEBAR: Folder Navigation === */}
-      {/* Customize sidebar width by changing w-64 */}
-      <div className="w-64 overflow-y-auto border-r border-gray-200 bg-white">
-        <div className="p-4">
-          {/* Customize sidebar title here */}
-          <h2 className="mb-4 text-lg font-semibold text-gray-700">
-            Drive Explorer
-          </h2>
-
-          {/* Folder tree navigation component */}
-          <FolderTree folders={allFolders} onSelectNode={setSelectedNode} />
-        </div>
-      </div>
+      {/* === LEFT SIDEBAR: Folder and File Navigation === */}
+      {/* Sidebar component manages its own width, styling, and overflow */}
+      <FolderTree
+        driveId={selectedDrive.header.id}
+        driveName={selectedDrive.state.global.name}
+        nodes={allNodes}
+        selectedNodeId={selectedNodeId}
+        onSelectNode={setSelectedNode}
+      />
 
       {/* === RIGHT CONTENT AREA: Files/Folders or Document Editor === */}
       <div className="flex-1 overflow-y-auto p-4">
         {/* Conditional rendering: Document editor or folder contents */}
-        {activeDocument && documentModelModule && editorModule ? (
+        {showDocumentEditor ? (
           // Document editor view
-          <EditorContainer handleClose={() => setActiveDocumentId(undefined)} />
+          children
         ) : (
           /* Folder contents view */
-          <div className="space-y-6">
+          <div className="space-y-6 px-6">
             {/* === HEADER SECTION === */}
             <div className="space-y-3">
               <div className="flex items-center justify-between">
@@ -189,36 +129,30 @@ export function DriveExplorer(props: DriveEditorProps) {
                 </h2>
                 {/* Customize: Add more action buttons here */}
                 {isAllowedToCreateDocuments && (
-                  <button
-                    onClick={() => handleCreateFolder()}
-                    className="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600"
-                  >
-                    + New Folder
-                  </button>
+                  <Button onClick={() => handleCreateFolder()}>
+                    New Folder
+                  </Button>
                 )}
               </div>
 
               {/* Navigation breadcrumbs */}
-              {breadcrumbs.length > 1 && (
-                <div className="border-b border-gray-200 pb-3">
-                  <Breadcrumbs
-                    breadcrumbs={breadcrumbs}
-                    createEnabled={isAllowedToCreateDocuments}
-                    onCreate={handleCreateFolder}
-                    onBreadcrumbSelected={onBreadcrumbSelected}
-                  />
-                </div>
-              )}
+              <div className="border-b border-gray-200 pb-3">
+                <Breadcrumbs
+                  breadcrumbs={breadcrumbs}
+                  createEnabled={isAllowedToCreateDocuments}
+                  onCreate={handleCreateFolder}
+                  onBreadcrumbSelected={onBreadcrumbSelected}
+                />
+              </div>
             </div>
 
             {/* === FOLDERS SECTION === */}
-            {/* Customize grid layout by changing grid-cols-1 */}
             {folderChildren.length > 0 && (
               <div>
-                <h3 className="mb-2 text-sm font-medium text-gray-500">
-                  📁 Folders
+                <h3 className="mb-2 text-sm font-bold text-gray-600">
+                  Folders
                 </h3>
-                <div className="grid grid-cols-1 gap-2">
+                <div className="flex flex-wrap gap-4">
                   {folderChildren.map((folderNode) => (
                     <FolderItem
                       key={folderNode.id}
@@ -234,7 +168,9 @@ export function DriveExplorer(props: DriveEditorProps) {
                       onDuplicateNode={onDuplicateNode}
                       onAddFolder={onAddFolder}
                       onAddAndSelectNewFolder={handleCreateFolder}
-                      showDeleteNodeModal={showDeleteNodeModal}
+                      showDeleteNodeModal={(node) =>
+                        showDeleteNodeModal(node.id)
+                      }
                     />
                   ))}
                 </div>
@@ -242,13 +178,12 @@ export function DriveExplorer(props: DriveEditorProps) {
             )}
 
             {/* === FILES/DOCUMENTS SECTION === */}
-            {/* Customize grid layout by changing grid-cols-1 */}
             {fileChildren.length > 0 && (
               <div>
-                <h3 className="mb-2 text-sm font-medium text-gray-500">
-                  📄 Documents
+                <h3 className="mb-2 text-sm font-semibold text-gray-600">
+                  Documents
                 </h3>
-                <div className="grid grid-cols-1 gap-2">
+                <div className="flex flex-wrap gap-4">
                   {fileChildren.map((fileNode) => (
                     <FileItem
                       key={fileNode.id}
@@ -257,7 +192,9 @@ export function DriveExplorer(props: DriveEditorProps) {
                       sharingType={sharingType || "LOCAL"}
                       getSyncStatusSync={getSyncStatusSync}
                       setSelectedNode={setSelectedNode}
-                      showDeleteNodeModal={showDeleteNodeModal}
+                      showDeleteNodeModal={(node) =>
+                        showDeleteNodeModal(node.id)
+                      }
                       onRenameNode={onRenameNode}
                       onDuplicateNode={onDuplicateNode}
                       onAddFile={onAddFile}
@@ -275,7 +212,7 @@ export function DriveExplorer(props: DriveEditorProps) {
             {/* Customize empty state message and styling here */}
             {folderChildren.length === 0 && fileChildren.length === 0 && (
               <div className="py-12 text-center text-gray-500">
-                <p className="text-lg">📁 This folder is empty</p>
+                <p className="text-lg">This folder is empty</p>
                 <p className="mt-2 text-sm">
                   Create your first document or folder below
                 </p>
@@ -284,18 +221,10 @@ export function DriveExplorer(props: DriveEditorProps) {
 
             {/* === DOCUMENT CREATION SECTION === */}
             {/* Component for creating new documents */}
-            <CreateDocument />
+            <CreateDocument documentTypes={editorConfig?.documentTypes} />
           </div>
         )}
       </div>
-
-      {/* === DOCUMENT CREATION MODAL === */}
-      {/* Modal for entering document name after selecting type */}
-      <CreateDocumentModal
-        onContinue={onCreateDocument}
-        onOpenChange={(open) => setOpenModal(open)}
-        open={openModal}
-      />
     </div>
   );
 }