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

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

@@ -2,300 +2,31 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/DriveExplorer.tsx"
 unless_exists: true
 ---
-import {
-  Breadcrumbs,
-  CreateDocumentModal,
-  FileItem,
-  FolderItem,
-  useBreadcrumbs,
-} from "@powerhousedao/design-system";
-import {
-  addDocument,
-  type DriveEditorProps,
-  getSyncStatusSync,
-  setSelectedNode,
-  useAllFolderNodes,
-  useDocumentModelModules,
-  useDriveContext,
-  useDriveSharingType,
-  useEditorModules,
-  useFileChildNodes,
-  useFolderChildNodes,
-  useSelectedDrive,
-  useSelectedFolder,
-  useSelectedNodePath,
-  useUserPermissions,
-} from "@powerhousedao/reactor-browser";
-import type { DocumentModelModule } from "document-model";
-import { useCallback, useRef, useState } from "react";
-import { CreateDocument } from "./CreateDocument.js";
-import { EditorContainer } from "./EditorContainer.js";
+import type { EditorProps } from "document-model";
 import { FolderTree } from "./FolderTree.js";
+import { DriveContents } from "./DriveContents.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({ children }: EditorProps) {
+  // if a document is selected then it's editor will be passed as children
+  const showDocumentEditor = !!children;
 
-  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 ===
-
-  // Handle folder creation with optional name parameter
-  const handleCreateFolder = useCallback(
-    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;
-
-      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;
-
-  // === 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>
-
-      {/* === RIGHT CONTENT AREA: Files/Folders or Document Editor === */}
+      <FolderTree />
       <div className="flex-1 overflow-y-auto p-4">
         {/* Conditional rendering: Document editor or folder contents */}
-        {activeDocument && documentModelModule && editorModule ? (
-          // Document editor view
-          <EditorContainer handleClose={() => setActiveDocumentId(undefined)} />
+        {showDocumentEditor ? (
+          /* Document editor view */
+          children
         ) : (
           /* Folder contents view */
-          <div className="space-y-6">
-            {/* === HEADER SECTION === */}
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                {/* Folder title */}
-                <h2 className="text-lg font-semibold">
-                  {selectedFolder
-                    ? `Contents of "${selectedFolder.name}"`
-                    : "Root Contents"}
-                </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>
-                )}
-              </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>
-
-            {/* === 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>
-                <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>
-              </div>
-            )}
-
-            {/* === 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>
-                <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>
-              </div>
-            )}
-
-            {/* === EMPTY STATE === */}
-            {/* 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="mt-2 text-sm">
-                  Create your first document or folder below
-                </p>
-              </div>
-            )}
-
-            {/* === DOCUMENT CREATION SECTION === */}
-            {/* Component for creating new documents */}
-            <CreateDocument />
-          </div>
+          <DriveContents />
         )}
       </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/EmptyState.esm.t

@@ -0,0 +1,19 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/EmptyState.tsx"
+unless_exists: true
+---
+import { useNodesInSelectedDriveOrFolder } from "@powerhousedao/reactor-browser";
+
+/** Shows a message when the selected drive or folder is empty */
+export function EmptyState() {
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const hasNodes = nodes.length > 0;
+  if (hasNodes) return null;
+
+  return (
+    <div className="py-12 text-center text-gray-500">
+      <p className="text-lg">This folder is empty</p>
+      <p className="mt-2 text-sm">Create your first document or folder below</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/Files.tsx"
+unless_exists: true
+---
+import { FileItem } from "@powerhousedao/design-system/connect";
+import {
+  useNodesInSelectedDriveOrFolder,
+  isFileNodeKind,
+} from "@powerhousedao/reactor-browser";
+
+/** Shows the files in the selected drive or folder */
+export function Files() {
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const fileNodes = nodes.filter((n) => isFileNodeKind(n));
+  const hasFiles = fileNodes.length > 0;
+
+  if (!hasFiles) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-sm font-semibold text-gray-600">Documents</h3>
+      <div className="flex flex-wrap gap-4">
+        {fileNodes.map((fileNode) => (
+          <FileItem key={fileNode.id} fileNode={fileNode} />
+        ))}
+      </div>
+    </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/components/Folders.esm.t

@@ -0,0 +1,28 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/Folders.tsx"
+unless_exists: true
+---
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import {
+  useNodesInSelectedDriveOrFolder,
+  isFolderNodeKind,
+} from "@powerhousedao/reactor-browser";
+
+/** Shows the folders in the selected drive or folder */
+export function Folders() {
+  const nodes = useNodesInSelectedDriveOrFolder();
+  const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
+  const hasFolders = folderNodes.length > 0;
+  if (!hasFolders) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-sm font-bold text-gray-600">Folders</h3>
+      <div className="flex flex-wrap gap-4">
+        {folderNodes.map((folderNode) => (
+          <FolderItem key={folderNode.id} folderNode={folderNode} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+---
+to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/NavigationBreadcrumbs.tsx"
+unless_exists: true
+---
+import { Breadcrumbs } from "@powerhousedao/design-system/connect";
+
+/** Shows the navigation breadcrumbs for the selected drive or folder */
+export function NavigationBreadcrumbs() {
+  return (
+    <div className="border-b border-gray-200 pb-3 space-y-3">
+      <Breadcrumbs />
+    </div>
+  );
+}

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

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

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

@@ -2,42 +2,17 @@
 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 { useSetPHDriveEditorConfig } from "@powerhousedao/reactor-browser";
+import type { EditorProps } from "document-model";
 import { DriveExplorer } from "./components/DriveExplorer.js";
+import { editorConfig } from "./config.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 } = props;
+/** Editor component for the <%= pascalCaseDriveEditorName %> drive editor */
+export default function Editor(props: EditorProps) {
+  // set the config for this drive editor
+  // you can update these configs in `./config.ts`
+  useSetPHDriveEditorConfig(editorConfig);
   return (
-    <div className="new-drive-explorer" style={{ height: "100%" }}>
-      <DriveExplorer document={document} context={context} />
-    </div>
+    <DriveExplorer {...props} />
   );
-}
-
-/**
- * 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}>
-          <BaseEditor {...props} />
-        </AnalyticsProvider>
-      </WagmiContext>
-    </DriveContextProvider>
-  );
-}
+}

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

@@ -0,0 +1,14 @@
+---
+force: true
+to: "<%= rootDir %>/editors.ts"
+---
+import type { EditorModule } from "document-model";
+<% moduleExports.forEach(me => { _%>
+import { <%= me.pascalCaseName %> } from "./<%= me.paramCaseName %>/module.js";
+<% }); _%>
+
+export const editors: EditorModule[] = [
+  <% moduleExports.forEach(me => { _%>
+<%= me.pascalCaseName %>,
+<% }); _%>
+]