@powerhousedao/codegen 5.0.0-staging.9 → 5.0.1-staging.3

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

@@ -2,12 +2,12 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(subgraph) %>/resolvers.ts"
 force: true
 ---
-import { type Subgraph } from "@powerhousedao/reactor-api";
+import type { BaseSubgraph } from "@powerhousedao/reactor-api";
 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): Record<string, unknown> => {
+export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> => {
   const reactor = subgraph.reactor;
 
   return ({

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

@@ -7,13 +7,7 @@ import type { DocumentNode } from "graphql";
 
 export const schema: DocumentNode = gql`
 """
-Subgraph definition for <%= h.changeCase.pascal(documentType) %> (<%- documentTypeId %>)
-
-"""
-<%- schema %> 
-
-"""
-Queries: <%= h.changeCase.pascal(documentType) %>
+Queries: <%= h.changeCase.pascal(documentType) %> Document
 """
 
 type <%- h.changeCase.pascal(documentType) %>Queries {

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

@@ -2,58 +2,55 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/CreateDocument.tsx"
 unless_exists: true
 ---
+import { Button } from "@powerhousedao/design-system";
 import {
-  addDocument,
+  showCreateDocumentModal,
+  useAllowedDocumentModelModules,
   useDocumentModelModules,
   useSelectedDriveId,
-  useSelectedFolder,
   type VetraDocumentModelModule,
 } from "@powerhousedao/reactor-browser";
-import { Button } from "@powerhousedao/design-system";
 
 /**
  * Document creation UI component.
  * Displays available document types as clickable buttons.
  */
-export const CreateDocument = () => {
+export function CreateDocument() {
   const selectedDriveId = useSelectedDriveId();
-  const selectedFolder = useSelectedFolder();
-  const documentModelModules = useDocumentModelModules();
+  const allowedDocumentModelModules = useAllowedDocumentModelModules();
 
-  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
+    showCreateDocumentModal(module.documentModel.global.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) => {
+        {allowedDocumentModelModules?.map((documentModelModule) => {
           return (
             <Button
-              key={documentModelModule.documentModel.id}
+              key={documentModelModule.documentModel.global.id}
               color="light" // Customize button appearance
-              size="small"
-              className="cursor-pointer"
-              title={documentModelModule.documentModel.name}
-              aria-description={documentModelModule.documentModel.description}
+              className="cursor-pointer bg-gray-200 p-2 hover:bg-gray-300"
+              title={documentModelModule.documentModel.global.name}
+              aria-description={
+                documentModelModule.documentModel.global.description
+              }
               onClick={() => handleAddDocument(documentModelModule)}
             >
               {/* Customize document type display format */}
               <span className="text-sm">
-                {documentModelModule.documentModel.name}
+                {documentModelModule.documentModel.global.name}
               </span>
             </Button>
           );
@@ -61,4 +58,4 @@ export const CreateDocument = () => {
       </div>
     </div>
   );
-};
+}

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

@@ -4,180 +4,79 @@ unless_exists: true
 ---
 import {
   Breadcrumbs,
-  CreateDocumentModal,
+  Button,
   FileItem,
   FolderItem,
-  useBreadcrumbs,
 } from "@powerhousedao/design-system";
 import {
-  addDocument,
-  type DriveEditorProps,
-  getSyncStatusSync,
-  setSelectedNode,
-  useAllFolderNodes,
-  useDocumentModelModules,
-  useDriveContext,
-  useDriveSharingType,
-  useEditorModules,
-  useFileChildNodes,
-  useFolderChildNodes,
+  addFolder,
+  isFileNodeKind,
+  isFolderNodeKind,
+  useNodesInSelectedDriveOrFolder,
   useSelectedDrive,
   useSelectedFolder,
-  useSelectedNodePath,
   useUserPermissions,
 } from "@powerhousedao/reactor-browser";
-import type { DocumentModelModule } from "document-model";
-import { useCallback, useRef, useState } from "react";
+import type { EditorProps } from "document-model";
 import { CreateDocument } from "./CreateDocument.js";
-import { EditorContainer } from "./EditorContainer.js";
 import { FolderTree } from "./FolderTree.js";
 
 /**
  * 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: 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();
-  // === DRIVE CONTEXT HOOKS ===
-  // Core drive operations and document models
-  const {
-    onAddFile,
-    onAddFolder,
-    onCopyNode,
-    onDuplicateNode,
-    onMoveNode,
-    onRenameNode,
-    showDeleteNodeModal,
-  } = useDriveContext();
-
+export function DriveExplorer(props: EditorProps) {
+  const { children } = props;
   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);
-
-  // === NAVIGATION SETUP ===
-  // Breadcrumbs for folder navigation
-  const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
-    selectedNodePath,
-    setSelectedNode,
-  });
-
-  const folderChildren = useFolderChildNodes();
-  const fileChildren = useFileChildNodes();
 
-  // All folders for the sidebar tree view
-  const allFolders = useAllFolderNodes();
-
-  // === EVENT HANDLERS ===
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
+  const fileNodes = nodes.filter((n) => isFileNodeKind(n));
 
   // Handle folder creation with optional name parameter
-  const handleCreateFolder = useCallback(
-    async (folderName?: string) => {
-      let name: string | undefined = folderName;
+  const handleCreateFolder = async (folderName?: string) => {
+    let name: string | undefined = 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: string) => {
-      setOpenModal(false);
-
-      const documentModel = selectedDocumentModel.current;
-      if (!documentModel || !selectedDrive?.header.id) return;
+    // 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 {
-        const node = await addDocument(
+        await addFolder(
           selectedDrive.header.id,
-          fileName,
-          documentModel.documentModel.id,
+          name.trim(),
           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);
+        console.error("Failed to create folder:", 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 />
 
       {/* === 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,83 +88,44 @@ export function DriveExplorer(props: DriveEditorProps) {
                 </h2>
                 {/* Customize: Add more action buttons here */}
                 {isAllowedToCreateDocuments && (
-                  <button
+                  <Button
                     onClick={() => handleCreateFolder()}
-                    className="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600"
+                    className="bg-gray-200 p-2 hover:bg-gray-300"
                   >
-                    + New Folder
-                  </button>
+                    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 />
+              </div>
             </div>
 
             {/* === FOLDERS SECTION === */}
-            {/* Customize grid layout by changing grid-cols-1 */}
-            {folderChildren.length > 0 && (
+            {folderNodes.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">
-                  {folderChildren.map((folderNode) => (
-                    <FolderItem
-                      key={folderNode.id}
-                      folderNode={folderNode}
-                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
-                      sharingType={sharingType || "LOCAL"}
-                      getSyncStatusSync={getSyncStatusSync}
-                      setSelectedNode={setSelectedNode}
-                      onAddFile={onAddFile}
-                      onCopyNode={onCopyNode}
-                      onMoveNode={onMoveNode}
-                      onRenameNode={onRenameNode}
-                      onDuplicateNode={onDuplicateNode}
-                      onAddFolder={onAddFolder}
-                      onAddAndSelectNewFolder={handleCreateFolder}
-                      showDeleteNodeModal={showDeleteNodeModal}
-                    />
+                <div className="flex flex-wrap gap-4">
+                  {folderNodes.map((folderNode) => (
+                    <FolderItem key={folderNode.id} folderNode={folderNode} />
                   ))}
                 </div>
               </div>
             )}
 
             {/* === FILES/DOCUMENTS SECTION === */}
-            {/* Customize grid layout by changing grid-cols-1 */}
-            {fileChildren.length > 0 && (
+            {fileNodes.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">
-                  {fileChildren.map((fileNode) => (
-                    <FileItem
-                      key={fileNode.id}
-                      fileNode={fileNode}
-                      isAllowedToCreateDocuments={isAllowedToCreateDocuments}
-                      sharingType={sharingType || "LOCAL"}
-                      getSyncStatusSync={getSyncStatusSync}
-                      setSelectedNode={setSelectedNode}
-                      showDeleteNodeModal={showDeleteNodeModal}
-                      onRenameNode={onRenameNode}
-                      onDuplicateNode={onDuplicateNode}
-                      onAddFile={onAddFile}
-                      onCopyNode={onCopyNode}
-                      onMoveNode={onMoveNode}
-                      onAddFolder={onAddFolder}
-                      onAddAndSelectNewFolder={handleCreateFolder}
-                    />
+                <div className="flex flex-wrap gap-4">
+                  {fileNodes.map((fileNode) => (
+                    <FileItem key={fileNode.id} fileNode={fileNode} />
                   ))}
                 </div>
               </div>
@@ -273,9 +133,9 @@ export function DriveExplorer(props: DriveEditorProps) {
 
             {/* === EMPTY STATE === */}
             {/* Customize empty state message and styling here */}
-            {folderChildren.length === 0 && fileChildren.length === 0 && (
+            {folderNodes.length === 0 && fileNodes.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>
@@ -288,14 +148,6 @@ export function DriveExplorer(props: DriveEditorProps) {
           </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,107 @@
 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 {
+  setSelectedNode,
+  useNodesInSelectedDrive,
+  useSelectedDrive,
+  useSelectedNode,
+} from "@powerhousedao/reactor-browser";
+import type { Node } from "document-drive";
+import { useMemo } from "react";
 
-interface FolderTreeProps {
-  folders: FolderNode[];
-  selectedNodeId?: string;
-  onSelectNode: (nodeId: string | undefined) => void;
+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 (node.kind === "folder") {
+        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,
-  selectedNodeId,
-  onSelectNode,
-}: FolderTreeProps) {
-  // Track which folders are expanded
-  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
-    new Set(),
+export function FolderTree() {
+  const [selectedDrive] = useSelectedDrive();
+  const nodes = useNodesInSelectedDrive();
+  const selectedNode = useSelectedNode();
+  const driveName = selectedDrive.header.name;
+  // 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") {
+      setSelectedNode(undefined);
+    } else {
+      setSelectedNode(node.id);
+    }
   };
+  // Map selectedNodeId to activeNodeId (use "root" when undefined)
+  const activeNodeId =
+    !selectedNode || selectedNode.id === selectedDrive.header.id
+      ? "root"
+      : selectedNode.id;
 
   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/config.esm.t

@@ -0,0 +1,10 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/config.ts"
+unless_exists: true
+---
+import type { PHDriveEditorConfig } from "@powerhousedao/reactor-browser";
+
+export const editorConfig: PHDriveEditorConfig = {
+  isDragAndDropEnabled: <%- isDragAndDropEnabled %>,
+  allowedDocumentTypes: <%- allowedDocumentTypes %>
+};