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

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

@@ -4,11 +4,10 @@ unless_exists: true
 ---
 import { Button } from "@powerhousedao/design-system";
 import {
-  addDocument,
+  isDocumentTypeSupported,
+  showPHModal,
   useDocumentModelModules,
   useSelectedDriveId,
-  useSelectedFolder,
-  isDocumentTypeSupported,
   type VetraDocumentModelModule,
 } from "@powerhousedao/reactor-browser";
 
@@ -24,34 +23,33 @@ export const CreateDocument = (props: CreateDocumentProps) => {
   const { documentTypes = [] } = props;
 
   const selectedDriveId = useSelectedDriveId();
-  const selectedFolder = useSelectedFolder();
   const documentModelModules = useDocumentModelModules();
 
-  const filteredDocumentModelModules = documentModelModules?.filter((module) =>
+  const filteredDocumentModelModules = documentModelModules.filter((module) =>
     isDocumentTypeSupported(module.documentModel.id, documentTypes),
   );
 
-  async function handleAddDocument(module: VetraDocumentModelModule) {
+  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">
-        {filteredDocumentModelModules?.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,
   useFileChildNodesForId,
   useFolderChildNodesForId,
-  useSelectedDrive,
+  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,13 +61,13 @@ export function DriveExplorer(props: DriveEditorProps) {
     setSelectedNode,
   });
 
-  const selectedNodeId = selectedFolder?.id || props.document.header.id;
+  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 ===
 
@@ -104,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">
@@ -191,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}
@@ -236,7 +168,9 @@ export function DriveExplorer(props: DriveEditorProps) {
                       onDuplicateNode={onDuplicateNode}
                       onAddFolder={onAddFolder}
                       onAddAndSelectNewFolder={handleCreateFolder}
-                      showDeleteNodeModal={showDeleteNodeModal}
+                      showDeleteNodeModal={(node) =>
+                        showDeleteNodeModal(node.id)
+                      }
                     />
                   ))}
                 </div>
@@ -244,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}
@@ -259,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}
@@ -277,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>
@@ -286,18 +221,10 @@ export function DriveExplorer(props: DriveEditorProps) {
 
             {/* === DOCUMENT CREATION SECTION === */}
             {/* Component for creating new documents */}
-            <CreateDocument documentTypes={props.editorConfig?.documentTypes} />
+            <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>
   );
 }

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

@@ -2,102 +2,113 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/FolderTree.tsx"
 unless_exists: true
 ---
-import type { FolderNode } from "document-drive";
-import { useState } from "react";
+import {
+  Sidebar,
+  SidebarProvider,
+  type SidebarNode,
+} from "@powerhousedao/document-engineering";
+import type { Node } from "document-drive";
+import { useMemo } from "react";
 
 interface FolderTreeProps {
-  folders: FolderNode[];
+  driveId: string;
+  driveName: string;
+  nodes: Node[];
   selectedNodeId?: string;
   onSelectNode: (nodeId: string | undefined) => void;
 }
 
+function isFolder(node: Node): boolean {
+  return node.kind === "folder";
+}
+
+function buildSidebarNodes(
+  nodes: Node[],
+  parentId: string | null | undefined,
+): SidebarNode[] {
+  return nodes
+    .filter((n) => {
+      if (parentId == null) {
+        return n.parentFolder == null;
+      }
+      return n.parentFolder === parentId;
+    })
+    .map((node): SidebarNode => {
+      if (isFolder(node)) {
+        return {
+          id: node.id,
+          title: node.name,
+          icon: "FolderClose" as const,
+          expandedIcon: "FolderOpen" as const,
+          children: buildSidebarNodes(nodes, node.id),
+        };
+      }
+      return {
+        id: node.id,
+        title: node.name,
+        icon: "File" as const,
+      };
+    });
+}
+
+function transformNodesToSidebarNodes(
+  nodes: Node[],
+  driveName: string,
+): SidebarNode[] {
+  return [
+    {
+      id: "root",
+      title: driveName,
+      icon: "Drive" as const,
+      children: buildSidebarNodes(nodes, null),
+    },
+  ];
+}
+
 /**
- * Hierarchical folder tree navigation component.
- * Displays folders in a tree structure with expand/collapse functionality.
+ * Hierarchical folder tree navigation component using Sidebar from document-engineering.
+ * Displays folders and files in a tree structure with expand/collapse functionality, search, and resize support.
  */
 export function FolderTree({
-  folders,
+  driveId,
+  driveName,
+  nodes,
   selectedNodeId,
   onSelectNode,
 }: FolderTreeProps) {
-  // Track which folders are expanded
-  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
-    new Set(),
+  // Transform Node[] to hierarchical SidebarNode structure
+  const sidebarNodes = useMemo(
+    () => transformNodesToSidebarNodes(nodes, driveName),
+    [nodes, driveName],
   );
 
-  // Toggle folder expansion state
-  const toggleFolder = (folderId: string) => {
-    setExpandedFolders((prev) => {
-      const next = new Set(prev);
-      if (next.has(folderId)) {
-        next.delete(folderId);
-      } else {
-        next.add(folderId);
-      }
-      return next;
-    });
-  };
-
-  // Recursive function to render folder tree structure
-  const renderFolder = (folder: FolderNode, level = 0) => {
-    const hasChildren = folders.some((f) => f.parentFolder === folder.id);
-    const isExpanded = expandedFolders.has(folder.id);
-    const isSelected = selectedNodeId === folder.id;
-
-    return (
-      <div key={folder.id}>
-        <div
-          className={`flex cursor-pointer items-center rounded px-2 py-1 text-sm hover:bg-gray-100 ${
-            isSelected ? "bg-blue-100 text-blue-800" : ""
-          }`}
-          style={{ paddingLeft: `${level * 16 + 8}px` }} // Customize indentation here
-          onClick={() => onSelectNode(folder.id)}
-        >
-          {/* Expand/collapse button for folders with children */}
-          {hasChildren && (
-            <button
-              className="mr-1 flex h-4 w-4 items-center justify-center"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleFolder(folder.id);
-              }}
-            >
-              {isExpanded ? "▼" : "▶"} {/* Customize expand icons here */}
-            </button>
-          )}
-          {!hasChildren && <div className="mr-1 w-5" />}
-          {/* Customize folder icon and styling here */}
-          <span>📁 {folder.name}</span>
-        </div>
-        {/* Recursively render child folders when expanded */}
-        {isExpanded && hasChildren && (
-          <div>
-            {folders
-              .filter((f) => f.parentFolder === folder.id)
-              .map((child) => renderFolder(child, level + 1))}
-          </div>
-        )}
-      </div>
-    );
+  const handleActiveNodeChange = (node: SidebarNode) => {
+    // If root node is selected, pass undefined to match existing behavior
+    if (node.id === "root") {
+      onSelectNode(undefined);
+    } else {
+      onSelectNode(node.id);
+    }
   };
+  // Map selectedNodeId to activeNodeId (use "root" when undefined)
+  const activeNodeId =
+    !selectedNodeId || selectedNodeId === driveId ? "root" : selectedNodeId;
 
   return (
-    <div className="space-y-1">
-      {/* Root Directory Option */}
-      {/* Customize root folder appearance here */}
-      <div
-        className={`flex cursor-pointer items-center rounded px-2 py-1 text-sm hover:bg-gray-100 ${
-          !selectedNodeId ? "bg-blue-100 text-blue-800" : ""
-        }`}
-        onClick={() => onSelectNode(undefined)}
-      >
-        <span>🏠 Root</span>
-      </div>
-
-      {/* Render top-level folders (no parent) */}
-      {folders
-        .filter((folder) => !folder.parentFolder)
-        .map((folder) => renderFolder(folder))}
-    </div>
+    <SidebarProvider nodes={sidebarNodes}>
+      <Sidebar
+        className="pt-1"
+        nodes={sidebarNodes}
+        activeNodeId={activeNodeId}
+        onActiveNodeChange={handleActiveNodeChange}
+        sidebarTitle="Drive Explorer"
+        showSearchBar={true}
+        resizable={true}
+        allowPinning={false}
+        showStatusFilter={false}
+        initialWidth={256}
+        defaultLevel={2}
+      />
+    </SidebarProvider>
   );
-}
+}

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

@@ -2,49 +2,7 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/editor.tsx"
 unless_exists: true
 ---
-import { WagmiContext } from "@powerhousedao/design-system";
-import {
-  AnalyticsProvider,
-  DriveContextProvider,
-  useAppConfig,
-  type DriveEditorProps,
-} from "@powerhousedao/reactor-browser";
+import { withDropZone } from "@powerhousedao/design-system";
 import { DriveExplorer } from "./components/DriveExplorer.js";
-import { withDropZone } from "./utils/withDropZone.js";
 
-/**
- * Base editor component that renders the drive explorer interface.
- * Customize document opening behavior and drive-level actions here.
- */
-export function BaseEditor(props: DriveEditorProps) {
-  const { context, document, editorConfig } = props;
-  return (
-    <div className="new-drive-explorer" style={{ height: "100%" }}>
-      <DriveExplorer
-        document={document}
-        context={context}
-        editorConfig={editorConfig}
-      />
-    </div>
-  );
-}
-
-const BaseEditorWithDropZone = withDropZone(BaseEditor);
-
-/**
- * Main editor entry point with required providers.
- */
-export default function Editor(props: DriveEditorProps) {
-  const appConfig = useAppConfig();
-  const analyticsDatabaseName = appConfig?.analyticsDatabaseName;
-  return (
-    // Required context providers for drive functionality
-    <DriveContextProvider value={props.context}>
-      <WagmiContext>
-        <AnalyticsProvider databaseName={analyticsDatabaseName}>
-          <BaseEditorWithDropZone {...props} />
-        </AnalyticsProvider>
-      </WagmiContext>
-    </DriveContextProvider>
-  );
-}
+export const Editor = withDropZone(DriveExplorer);

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

@@ -3,7 +3,7 @@ to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/index.ts"
 force: true
 ---
 import { type DriveEditorModule } from "@powerhousedao/reactor-browser";
-import Editor from "./editor.js";
+import { Editor } from "./editor.js";
 
 export const module: DriveEditorModule = {
   Component: Editor,
@@ -19,5 +19,3 @@ export const module: DriveEditorModule = {
     },<%_ } _%>
   },
 };
-
-export default module;