@powerhousedao/codegen 5.0.3 → 5.0.4

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

@@ -1,5 +1,5 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(documentType) %>/index.ts"
+to: "<%= rootDir %>/<%= paramCaseDocumentType %>/index.ts"
 force: true
 ---
 /**
@@ -7,28 +7,8 @@ force: true
  * Delete the file and run the code generator again to have it reset
  */
 
-import { createState, type DocumentModelModule, baseActions } from 'document-model';
-import { defaultBaseState } from 'document-model/core';
-import { actions as <%= h.changeCase.pascal(documentType) %>Actions } from './gen/index.js';
-import { reducer } from './gen/reducer.js';
-import { documentModel } from './gen/document-model.js';
-import genUtils from './gen/utils.js';
-import * as customUtils from './src/utils.js';
-import type { <%= h.changeCase.pascal(documentType) %>PHState } from './gen/types.js';
-
-const utils = { ...genUtils, ...customUtils };
-const actions = { ...baseActions, ...<%= h.changeCase.pascal(documentType) %>Actions };
-
-export const module: DocumentModelModule<
-    <%= h.changeCase.pascal(documentType) %>PHState
-> = {
-    reducer,
-    actions,
-    utils,
-    documentModel: createState(defaultBaseState(), documentModel),
-};
-
-export { reducer, actions, utils, documentModel };
-
-export * from './gen/types.js';
-export * from './src/utils.js';
+export * from "./gen/index.js";
+export * from "./src/index.js";
+export * from "./hooks.js";
+export { actions } from "./actions.js";
+export { utils } from "./utils.js";

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

@@ -1,6 +1,6 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(documentType) %>/gen/schema/index.ts"
+to: "<%= rootDir %>/<%= paramCaseDocumentType %>/gen/schema/index.ts"
 force: true
 ---
 export * from "./types.js";
-export * as z from "./zod.js";
+export * from "./zod.js";

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

@@ -0,0 +1,5 @@
+---
+to: "<%= rootDir %>/<%= paramCaseDocumentType %>/src/index.ts"
+force: true
+---
+export * from "./utils.js";

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

@@ -1,31 +1,31 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(documentType) %>/gen/types.ts"
+to: "<%= rootDir %>/<%= paramCaseDocumentType %>/gen/types.ts"
 force: true
 ---
 import type { PHDocument, PHBaseState } from 'document-model';
-import type { <%= h.changeCase.pascal(documentType) %>Action } from './actions.js';
+import type { <%= actionTypeName %> } from './actions.js';
 import type {
-  <%= h.changeCase.pascal(documentType) %>State as <%= h.changeCase.pascal(documentType) %>GlobalState,
+  <%= stateName %> as <%= globalStateName %>,
 <% if(hasLocalSchema) { -%>
-  <%= h.changeCase.pascal(documentType) %>LocalState,
+  <%= localStateName %>,
 <%} -%>
 } from './schema/types.js';
 
-export { z } from './schema/index.js';
-export * from './schema/types.js';
 <% if(!hasLocalSchema) { -%>
-<%= 'type ' + h.changeCase.pascal(documentType) %>LocalState = Record<PropertyKey, never>;
+<%= 'type ' + localStateName %> = Record<PropertyKey, never>;
 <%} -%>
-type <%= h.changeCase.pascal(documentType) %>PHState = PHBaseState & {
-  global: <%= h.changeCase.pascal(documentType) %>GlobalState;
-  local: <%= h.changeCase.pascal(documentType) %>LocalState;
+type <%= phStateName %> = PHBaseState & {
+  global: <%= globalStateName %>;
+  local: <%= localStateName %>;
 };
-type <%= h.changeCase.pascal(documentType) %>Document = PHDocument<<%= h.changeCase.pascal(documentType) %>PHState>;
+type <%= phDocumentTypeName %> = PHDocument<<%= phStateName %>>;
+
+export * from './schema/types.js';
 
 export type { 
-  <%= h.changeCase.pascal(documentType) %>GlobalState, 
-  <%= h.changeCase.pascal(documentType) %>LocalState,
-  <%= h.changeCase.pascal(documentType) %>PHState, 
-  <%= h.changeCase.pascal(documentType) %>Action,
-  <%= h.changeCase.pascal(documentType) %>Document,
+  <%= globalStateName %>, 
+  <%= localStateName %>,
+  <%= phStateName %>, 
+  <%= actionTypeName %>,
+  <%= phDocumentTypeName %>,
 };

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

@@ -1,5 +1,5 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(documentType) %>/gen/utils.ts"
+to: "<%= rootDir %>/<%= paramCaseDocumentType %>/gen/utils.ts"
 force: true
 ---
 import type {
@@ -13,16 +13,23 @@ import {
     generateId,
  } from 'document-model/core';
 import type { 
-  <%= h.changeCase.pascal(documentType) %>GlobalState,
-  <%= h.changeCase.pascal(documentType) %>LocalState
+  <%= globalStateName %>,
+  <%= localStateName %>
 } from './types.js';
-import type { <%= h.changeCase.pascal(documentType) %>PHState } from './types.js';
+import type { <%= phStateName %> } from './types.js';
 import { reducer } from './reducer.js';
+import { <%= documentTypeVariableName %> } from "./document-type.js";
+import {
+  <%= isPhDocumentOfTypeFunctionName %>,
+  <%= assertIsPhDocumentOfTypeFunctionName %>,
+  <%= isPhStateOfTypeFunctionName %>,
+  <%= assertIsPhStateOfTypeFunctionName %>,
+} from "./document-schema.js";
 
-export const initialGlobalState: <%= h.changeCase.pascal(documentType) %>GlobalState = <%- initialGlobalState %>;
-export const initialLocalState: <%= h.changeCase.pascal(documentType) %>LocalState = <%- initialLocalState %>;
+export const initialGlobalState: <%= globalStateName %> = <%- initialGlobalState %>;
+export const initialLocalState: <%= localStateName %> = <%- initialLocalState %>;
 
-const utils: DocumentModelUtils<<%= h.changeCase.pascal(documentType) %>PHState> = {
+export const utils: DocumentModelUtils<<%= phStateName %>> = {
     fileExtension: '<%- fileExtension %>',
     createState(state) {
         return { ...defaultBaseState(), global: { ...initialGlobalState, ...state?.global }, local: { ...initialLocalState, ...state?.local } };
@@ -33,7 +40,7 @@ const utils: DocumentModelUtils<<%= h.changeCase.pascal(documentType) %>PHState>
             state
         );
 
-        document.header.documentType = '<%- documentTypeId %>';
+        document.header.documentType = <%= documentTypeVariableName %>;
 
         // for backwards compatibility, but this is NOT a valid signed document id
         document.header.id = generateId();
@@ -46,11 +53,25 @@ const utils: DocumentModelUtils<<%= h.changeCase.pascal(documentType) %>PHState>
     loadFromInput(input) {
         return baseLoadFromInput(input, reducer);
     },
+    isStateOfType(state) {
+        return <%= isPhStateOfTypeFunctionName %>(state);
+    },
+    assertIsStateOfType(state) {
+        return <%= assertIsPhStateOfTypeFunctionName %>(state);
+    },
+    isDocumentOfType(document) {
+        return <%= isPhDocumentOfTypeFunctionName %>(document);
+    },
+    assertIsDocumentOfType(document) {
+        return <%= assertIsPhDocumentOfTypeFunctionName %>(document);
+    },
 };
 
 export const createDocument = utils.createDocument;
 export const createState = utils.createState;
 export const saveToFileHandle = utils.saveToFileHandle;
 export const loadFromInput = utils.loadFromInput;
-
-export default utils;
+export const isStateOfType = utils.isStateOfType;
+export const assertIsStateOfType = utils.assertIsStateOfType;
+export const isDocumentOfType = utils.isDocumentOfType;
+export const assertIsDocumentOfType = utils.assertIsDocumentOfType;

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-module/creators.esm.t

@@ -3,14 +3,19 @@ to: "<%= rootDir %>/<%= h.changeCase.param(documentType) %>/gen/<%= module %>/cr
 force: true
 ---
 import { createAction<% if (actions.find(a => a.hasAttachment)) {%>, AttachmentInput<%}%> } from 'document-model/core';
-import { z,
+import {
+<% actions.filter(a => a.hasInput).forEach(action => { _%>
+    <%= h.changeCase.pascal(action.name) %>InputSchema,
+<% }); _%>
+} from '../schema/zod.js';
+import type {
 <% actions.filter(a => a.hasInput).forEach(action => { _%>
-    <%= 'type ' + h.changeCase.pascal(action.name) %>Input,
+    <%= h.changeCase.pascal(action.name) %>Input,
 <% }); _%>
 } from '../types.js';
-import {
+import type {
 <% actions.forEach(action => { _%>
-    <%= 'type ' + h.changeCase.pascal(action.name) %>Action,
+    <%= h.changeCase.pascal(action.name) %>Action,
 <% }); _%>
 } from './actions.js';
 
@@ -20,7 +25,7 @@ export const <%= h.changeCase.camel(action.name) %> = (input: <%= h.changeCase.p
         '<%= h.changeCase.constantCase(action.name) %>',
         {...input},
         <%if(action.hasAttachment){ %>attachments<% } else { %>undefined<% } %>,
-        z.<%= h.changeCase.pascalCase(action.name) %>InputSchema,
+        <%= h.changeCase.pascalCase(action.name) %>InputSchema,
         '<%= action.scope %>'
     );
 

package/dist/src/codegen/.hygen/templates/powerhouse/generate-document-model-module/customTest.esm.t

@@ -7,37 +7,32 @@ unless_exists: true
  * - change it by adding new tests or modifying the existing ones
  */
 
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { generateMock } from '@powerhousedao/codegen';
-import utils from '../../gen/utils.js';
 import {
-    z,
-<% actions.forEach(action => { _%>
-    <%= 'type ' + h.changeCase.pascal(action.name) %>Input,
+  reducer,
+  utils,
+  <%= isPhDocumentOfTypeFunctionName %>,
+  <% actions.forEach(action => { _%>
+    <%= h.changeCase.camel(action.name) %>,
+    <%= h.changeCase.pascal(action.name) %>InputSchema,
 <% }); _%> 
-} from '../../gen/schema/index.js';
-import { reducer } from '../../gen/reducer.js';
-import * as creators from '../../gen/<%= module %>/creators.js';
-import type { <%= h.changeCase.pascal(documentType) %>Document } from '../../gen/types.js';
+} from "<%= documentModelDir %>";
 
 describe('<%= h.changeCase.pascal(module) %> Operations', () => {
-    let document: <%= h.changeCase.pascal(documentType) %>Document;
-
-    beforeEach(() => {
-        document = utils.createDocument();
-    });
-
 <% actions.forEach(action => { _%>
     it('should handle <%= h.changeCase.camel(action.name) %> operation', () => {
-        const input: <%= h.changeCase.pascal(action.name) %>Input = generateMock(
-            z.<%= h.changeCase.pascal(action.name) %>InputSchema(),
+        const document = utils.createDocument();
+        const input = generateMock(
+            <%= h.changeCase.pascal(action.name) %>InputSchema(),
         );
 
         const updatedDocument = reducer(
             document,
-            creators.<%= h.changeCase.camel(action.name) %>(input),
+            <%= h.changeCase.camel(action.name) %>(input),
         );
 
+        expect(<%= isPhDocumentOfTypeFunctionName %>(updatedDocument)).toBe(true);
         expect(updatedDocument.operations.<%= action.scope %>).toHaveLength(1);
         expect(updatedDocument.operations.<%= action.scope %>[0].action.type).toBe(
             '<%= h.changeCase.constant(action.name) %>',

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

@@ -42,12 +42,27 @@ module.exports = {
       return acc;
     }, []);
 
+    const documentType = documentModel.name;
+    const pascalCaseDocumentType = pascalCase(documentType);
+    const phDocumentTypeName = `${pascalCaseDocumentType}Document`;
+    const isPhDocumentOfTypeFunctionName = `is${phDocumentTypeName}`;
+    const assertIsPhDocumentOfTypeFunctionName = `assertIs${phDocumentTypeName}`;
+    const paramCaseDocumentType = paramCase(documentType);
+    const packageName = args.packageName;
+    const documentModelDir = `${packageName}/document-models/${paramCaseDocumentType}`;
     return {
       rootDir: args.rootDir,
       documentType: documentModel.name,
       module: paramCase(args.module),
       actions,
       errors,
+      pascalCaseDocumentType,
+      paramCaseDocumentType,
+      packageName,
+      documentModelDir,
+      phDocumentTypeName,
+      isPhDocumentOfTypeFunctionName,
+      assertIsPhDocumentOfTypeFunctionName,
     };
   },
 };

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

@@ -1,23 +1,118 @@
 // @ts-check
-const { paramCase } = require("change-case");
+const { paramCase, pascalCase, camelCase } = require("change-case");
 
-const generateDocumentModelMutations = {
+/**
+ * Extract type names from a GraphQL schema.
+ * @param {string} schema - GraphQL schema string
+ * @returns {string[]} Array of type names
+ */
+function extractTypeNames(schema) {
+  const found = schema.match(/(type|enum|union|interface|input)\s+(\w+)\s/g);
+  if (!found) return [];
+  return found.map((f) =>
+    f
+      .replaceAll("type ", "")
+      .replaceAll("enum ", "")
+      .replaceAll("union ", "")
+      .replaceAll("interface ", "")
+      .replaceAll("input ", "")
+      .trim()
+  );
+}
+
+/**
+ * Apply type prefixes to GraphQL schema to namespace types and avoid collisions.
+ * Inlined from @powerhousedao/common/utils to avoid ES module import issues.
+ * @param {string} schema - GraphQL schema string
+ * @param {string} prefix - Prefix to apply to type names
+ * @param {string[]} externalTypeNames - Type names from other schemas to also prefix
+ * @returns {string} Schema with prefixed types
+ */
+function applyGraphQLTypePrefixes(schema, prefix, externalTypeNames = []) {
+  if (!schema || !schema.trim()) {
+    return schema;
+  }
+
+  let processedSchema = schema;
+
+  // Find types defined in this schema
+  const localTypeNames = extractTypeNames(schema);
+
+  // Combine with external type names (remove duplicates)
+  const allTypeNames = [...new Set([...localTypeNames, ...externalTypeNames])];
+
+  if (allTypeNames.length === 0) {
+    return schema;
+  }
+
+  allTypeNames.forEach((typeName) => {
+    const typeRegex = new RegExp(
+      // Match type references in various GraphQL contexts
+      `(?<![_A-Za-z0-9])(${typeName})(?![_A-Za-z0-9])|` +
+        `\\[(${typeName})\\]|` +
+        `\\[(${typeName})!\\]|` +
+        `\\[(${typeName})\\]!|` +
+        `\\[(${typeName})!\\]!`,
+      "g",
+    );
+
+    processedSchema = processedSchema.replace(
+      typeRegex,
+      (match, p1, p2, p3, p4, p5) => {
+        if (match.startsWith("[")) {
+          return match.replace(
+            p2 || p3 || p4 || p5,
+            `${prefix}_${p2 || p3 || p4 || p5}`,
+          );
+        }
+        // Basic type reference
+        return `${prefix}_${p1}`;
+      },
+    );
+  });
+
+  return processedSchema;
+}
+
+module.exports = {
   params: ({ args }) => {
     const documentModel = JSON.parse(args.documentModel);
     const latestSpec =
       documentModel.specifications[documentModel.specifications.length - 1];
+    const documentType = documentModel.name;
+    const pascalCaseDocumentType = pascalCase(documentType);
+    const camelCaseDocumentType = camelCase(documentType);
+    const phDocumentTypeName = `${pascalCaseDocumentType}Document`;
+    const documentTypeVariableName = `${camelCaseDocumentType}DocumentType`;
+    const packageName = args.packageName;
+    const paramCaseDocumentType = paramCase(documentType);
+    const documentModelDir = `${packageName}/document-models/${paramCaseDocumentType}`;
+
+    const stateSchema = latestSpec.state.global.schema;
+    const stateTypeNames = extractTypeNames(stateSchema);
 
     return {
+      phDocumentTypeName,
+      documentTypeVariableName,
+      pascalCaseDocumentType,
+      camelCaseDocumentType,
+      documentModelDir,
       rootDir: args.rootDir,
       subgraph: args.subgraph,
       documentTypeId: documentModel.id,
       documentType: documentModel.name,
-      schema: latestSpec.state.global.schema,
+      schema: applyGraphQLTypePrefixes(
+        stateSchema,
+        pascalCaseDocumentType
+      ),
       modules: latestSpec.modules.map((m) => ({
         ...m,
         name: paramCase(m.name),
+        operations: m.operations.map((op) => ({
+          ...op,
+          schema: applyGraphQLTypePrefixes(op.schema, pascalCaseDocumentType, stateTypeNames),
+        })),
       })),
     };
   },
 };
-module.exports = generateDocumentModelMutations;

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

@@ -4,15 +4,26 @@ force: true
 ---
 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";
+import {
+  actions,
+  <%= documentTypeVariableName %>,
+} from "<%= documentModelDir %>";
+<% const inputTypes = modules.flatMap(m =>
+     m.operations.map(o => `${h.changeCase.pascalCase(o.name)}Input`)
+   );
+%>
+import type {
+  <%= phDocumentTypeName %>,
+  <%= inputTypes.join(',\n  ') %>
+} from "<%= documentModelDir %>";
 
 export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> => {
   const reactor = subgraph.reactor;
 
   return ({
     Query: {
-      <%- h.changeCase.pascal(documentType) %>: async () => {
+      <%- pascalCaseDocumentType %>: async () => {
         return {
           getDocument: async (args: { docId: string, driveId: string }) => {
             const { docId, driveId } = args;
@@ -28,7 +39,7 @@ export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> =>
               }
             }
 
-            const doc = await reactor.getDocument<<%- h.changeCase.pascal(documentType) %>Document>(docId);
+            const doc = await reactor.getDocument<<%= phDocumentTypeName %>>(docId);
             return {
               driveId: driveId,
               ...doc,
@@ -45,7 +56,7 @@ export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> =>
             const docsIds = await reactor.getDocuments(driveId);
             const docs = await Promise.all(
               docsIds.map(async (docId) => {
-                const doc = await reactor.getDocument<<%- h.changeCase.pascal(documentType) %>Document>(docId);
+                const doc = await reactor.getDocument<<%= phDocumentTypeName %>>(docId);
                 return {
                   driveId: driveId,
                   ...doc,
@@ -60,16 +71,16 @@ export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> =>
             );
 
             return docs.filter(
-              (doc) => doc.header.documentType === "<%- documentTypeId %>",
+              (doc) => doc.header.documentType === <%= documentTypeVariableName %>,
             );
           },
         };
       },
     },
     Mutation: {
-      <%- h.changeCase.pascal(documentType) %>_createDocument: async (_: unknown, args: { name: string, driveId?: string }) => {
+      <%- pascalCaseDocumentType %>_createDocument: async (_: unknown, args: { name: string, driveId?: string }) => {
         const { driveId, name } = args;
-        const document = await reactor.addDocument("<%- documentTypeId %>");
+        const document = await reactor.addDocument(<%= documentTypeVariableName %>);
         
         if(driveId) {
           await reactor.addAction(
@@ -77,7 +88,7 @@ export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> =>
             addFile({
               name,
               id: document.header.id,
-              documentType: "<%- documentTypeId %>",
+              documentType: <%= documentTypeVariableName %>,
             }),
           );
         }
@@ -94,9 +105,9 @@ export const getResolvers = (subgraph: BaseSubgraph): Record<string, unknown> =>
 
 <% modules.forEach(module => { _%>
 <% module.operations.forEach(op => { _%>
-        <%- h.changeCase.pascal(documentType) + '_' + h.changeCase.camel(op.name) %>: async (_: unknown, args: { docId: string, input: <%- h.changeCase.pascal(op.name) %>Input}) => {
+        <%- pascalCaseDocumentType + '_' + h.changeCase.camel(op.name) %>: async (_: unknown, args: { docId: string, input: <%- h.changeCase.pascal(op.name) %>Input}) => {
             const { docId, input } = args;
-            const doc = await reactor.getDocument<<%- h.changeCase.pascal(documentType) %>Document>(docId);
+            const doc = await reactor.getDocument<<%- pascalCaseDocumentType %>Document>(docId);
             if(!doc) {
               throw new Error("Document not found");
             }

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

@@ -28,16 +28,17 @@ type Mutation {
 
 <% modules.forEach(module => { _%>
 <% module.operations.forEach(op => { _%>
-    <%- h.changeCase.pascal(documentType) + '_' + h.changeCase.camel(op.name) 
-    %>(driveId:String, docId:PHID, input:<%- 
+    <%- h.changeCase.pascal(documentType) + '_' + h.changeCase.camel(op.name)
+    %>(driveId:String, docId:PHID, input:<%-
         h.changeCase.pascal(documentType) + '_' + h.changeCase.pascal(op.name) %>Input): Int
 <%_ })}); %>}
+
 <% modules.forEach(module => { _%>
 
 """
 Module: <%= h.changeCase.pascal(module.name) %>
 """
 <% module.operations.forEach(op => { _%>
-<%- op.schema.replace('input ', 'input ' + h.changeCase.pascal(documentType) + '_').replace('type ', 'type ' + h.changeCase.pascal(documentType) + '_') %>
+<%- op.schema %>
 <%_ })}); %>
 `

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

@@ -1,14 +1,11 @@
 ---
-to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/components/CreateDocument.tsx"
+to: "<%= driveEditorDir %>/components/CreateDocument.tsx"
 unless_exists: true
 ---
-import { Button } from "@powerhousedao/design-system";
+import type { VetraDocumentModelModule } from "@powerhousedao/reactor-browser";
 import {
   showCreateDocumentModal,
   useAllowedDocumentModelModules,
-  useDocumentModelModules,
-  useSelectedDriveId,
-  type VetraDocumentModelModule,
 } from "@powerhousedao/reactor-browser";
 
 /**
@@ -16,18 +13,8 @@ import {
  * Displays available document types as clickable buttons.
  */
 export function CreateDocument() {
-  const selectedDriveId = useSelectedDriveId();
   const allowedDocumentModelModules = useAllowedDocumentModelModules();
 
-  function handleAddDocument(module: VetraDocumentModelModule) {
-    if (!selectedDriveId) {
-      return;
-    }
-
-    // Display the Create Document modal on the host app
-    showCreateDocumentModal(module.documentModel.global.id);
-  }
-
   return (
     <div>
       {/* Customize section title here */}
@@ -38,24 +25,34 @@ export function CreateDocument() {
       <div className="flex w-full flex-wrap gap-4">
         {allowedDocumentModelModules?.map((documentModelModule) => {
           return (
-            <Button
+            <CreateDocumentButton
               key={documentModelModule.documentModel.global.id}
-              color="light" // Customize button appearance
-              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.global.name}
-              </span>
-            </Button>
+              documentModelModule={documentModelModule}
+            />
           );
         })}
       </div>
     </div>
   );
 }
+
+type Props = {
+  documentModelModule: VetraDocumentModelModule;
+};
+function CreateDocumentButton({ documentModelModule }: Props) {
+  const documentType = documentModelModule.documentModel.global.id;
+  const documentModelName =
+    documentModelModule.documentModel.global.name || documentType;
+  const documentModelDescription =
+    documentModelModule.documentModel.global.description;
+  return (
+    <button
+      className="cursor-pointer rounded-md bg-gray-200 py-2 px-3 hover:bg-gray-300"
+      title={documentModelName}
+      aria-description={documentModelDescription}
+      onClick={() => showCreateDocumentModal(documentType)}
+    >
+      {documentModelName}
+    </button>
+  );
+}

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

@@ -0,0 +1,23 @@
+---
+to: "<%= driveEditorDir %>/components/DriveContents.tsx"
+unless_exists: true
+---
+import { CreateDocument } from "./CreateDocument.js";
+import { EmptyState } from "./EmptyState.js";
+import { Files } from "./Files.js";
+import { Folders } from "./Folders.js";
+import { NavigationBreadcrumbs } from "./NavigationBreadcrumbs.js";
+
+/** Shows the documents and folders in the selected drive */
+export function DriveContents() {
+  return (
+    <div className="space-y-6 px-6">
+      <NavigationBreadcrumbs />
+      <Folders />
+      <Files />
+      <EmptyState />
+      <CreateDocument />
+    </div>
+  );
+}
+