betterstart-cli 0.0.108 → 0.0.109

package/dist/cli.js

@@ -16117,9 +16117,11 @@ ${contentStateDestructure}
   } = state
 ${contentSidebarVisibilityState}
   return (
-    <form id="${schemaName}-form" onSubmit={form.handleSubmit((values) => onSubmit(values${hasDraftInitialData}), handleErrors)} ${topLevelTabsFieldClassName}>
-${formBodyJsx}
-    </form>
+    <Form {...form}>
+      <form autoComplete="off" id="${schemaName}-form" onSubmit={form.handleSubmit((values) => onSubmit(values${hasDraftInitialData}), handleErrors)} ${topLevelTabsFieldClassName}>
+      ${formBodyJsx}
+      </form>
+    </Form>
   )
 }
 `;
@@ -16345,7 +16347,7 @@ ${defaultValues}
 
   const form = useForm<FormValues>({
     resolver: standardSchemaResolver(formSchema),
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange',
     defaultValues
   })
@@ -16522,16 +16524,12 @@ function renderFormTabContentDetailsTemplate({
   contentComponentName
 }) {
   return `          <TabsContent value="${tabName}" className="h-full min-h-0 w-full flex-1">
-            <Form {...entityForm.form}>
-              <${contentComponentName} state={entityForm} tab="${tabName}" />
-            </Form>
+            <${contentComponentName} state={entityForm} tab="${tabName}" />
           </TabsContent>`;
 }
 function renderEntityFormBody({ contentComponentName }) {
   return `      <main className="w-full p-4 h-full">
-        <Form {...entityForm.form}>
-          <${contentComponentName} state={entityForm} />
-        </Form>
+        <${contentComponentName} state={entityForm} />
       </main>`;
 }
 function renderEntityFormPage({
@@ -16557,7 +16555,6 @@ function renderEntityFormPage({
 ${showMetadataWidgetScrollThresholdImport}
 ${topLevelTabIconNamesLucide}
 import { Button } from '@admin/components/ui/button'
-import { Form } from '@admin/components/ui/form'
 ${topLevelTabsFieldTabs}import { PageHeader } from '@admin/components/shared/page-header'${showMetadataWidgetEntityMetadataImport}
 import type { ${singular} } from '@admin/actions/${actionImportPath}'
 ${showMetadataWidgetAdmin}
@@ -16718,7 +16715,8 @@ function buildEntityFormArtifacts({
   });
   const shellBody = topLevelTabsField ? topLevelTabsShell : defaultShellBody;
   const topLevelTabComponentImports = topLevelTabComponents.map((spec) => `import { ${spec.componentName} } from './${spec.fileBaseName}'`).join("\n");
-  const contentImports = topLevelTabsField ? `import type { TabValue, ${hookName} } from '${hookImportPath}'${topLevelTabComponentImports ? `
+  const contentImports = topLevelTabsField ? `import { Form } from '@admin/components/ui/form'
+import type { TabValue, ${hookName} } from '${hookImportPath}'${topLevelTabComponentImports ? `
 ${topLevelTabComponentImports}` : ""}` : renderEntityFormContentRenderer({
     kind: "renderFormContentLucideTemplate",
     props: {
@@ -18705,6 +18703,7 @@ ${indent}              ) : null}`;
 function renderMultiSelectFieldActionButtonsSerializedValueTemplate({
   indent,
   fieldName,
+  optionsId,
   optionsDeclaration,
   createState,
   previewLimit,
@@ -18747,6 +18746,7 @@ ${indent}                  type="button"
 ${indent}                  variant="outline"
 ${indent}                  role="combobox"
 ${indent}                  aria-expanded={${openVar}}
+${indent}                  aria-controls="${optionsId}"
 ${indent}                  className={cn("w-full justify-between gap-2", {
 ${indent}                    "text-muted-foreground": selectedOptions.length === 0
 ${indent}                  })}
@@ -18788,7 +18788,7 @@ ${indent}                </Button>
 ${indent}              </FormControl>
 ${indent}            }
 ${indent}          />
-${indent}          <PopoverContent className="w-(--anchor-width) p-0" align="start">
+${indent}          <PopoverContent id="${optionsId}" className="w-(--anchor-width) p-0" align="start">
 ${indent}            <Command>
 ${indent}              ${searchInput}
 ${indent}              <CommandList>
@@ -18858,6 +18858,7 @@ function renderMultiSelectField(field, indent, label, hintJSX, context) {
   const placeholder = field.placeholder || `Select ${label.toLowerCase()}`;
   const previewLimit = Math.max(1, Math.floor(field.previewLimit ?? 1));
   const lowerLabel = label.toLowerCase();
+  const optionsId = `${context.schemaName ? `${toKebabCase(singularize(context.schemaName))}-` : ""}${toKebabCase(field.name)}-options`;
   const optionsDeclaration = isCreatable ? `const options = ${optionsVar}` : renderMultiSelectFieldRenderer({
     kind: "renderMultiSelectFieldStaticOptionsTemplate",
     props: {
@@ -18896,6 +18897,7 @@ ${indent}                        ${setSearchVar}('')` : "";
     props: {
       indent,
       fieldName: field.name,
+      optionsId,
       optionsDeclaration,
       createState,
       previewLimit,
@@ -19210,6 +19212,7 @@ function buildEntityFormLayout({
         (tabField) => generateFieldJSX2(tabField, `${cardFieldIndent}    `, {
           creatableSelectFieldNames,
           defaultValueFromSourceNames,
+          schemaName,
           ...childContext
         })
       ).filter(Boolean).join("\n");
@@ -19256,6 +19259,7 @@ function buildEntityFormLayout({
     return generateFieldJSX2(field, cardFieldIndent, {
       creatableSelectFieldNames,
       defaultValueFromSourceNames,
+      schemaName,
       slotFilter: "main"
     });
   };
@@ -19263,7 +19267,8 @@ function buildEntityFormLayout({
     if (field.type === "tabs") return renderNestedTabsField(field);
     return generateFieldJSX2(field, cardFieldIndent, {
       creatableSelectFieldNames,
-      defaultValueFromSourceNames
+      defaultValueFromSourceNames,
+      schemaName
     });
   };
   const renderConditionalSidebarEntry = ({
@@ -19371,6 +19376,7 @@ function buildEntityFormLayout({
       (field) => generateFieldJSX2(field, cardFieldIndent, {
         creatableSelectFieldNames,
         defaultValueFromSourceNames,
+        schemaName,
         slotFilter: "main"
       })
     ).filter(Boolean).join("\n");
@@ -19705,7 +19711,7 @@ function generateForm(schema, pagesDir, options = {}) {
     hasNestedObjectList,
     hasCardContent: true,
     hasSectionCardHeading,
-    hasFormRoot: false,
+    hasFormRoot: true,
     hasButton: hasRelationship || hasSelectCombobox || hasNestedList,
     hasFormControls: contentUsesFormControls || contentHasRenderedIconPostfix,
     hasInput: contentUsesInput
@@ -22400,37 +22406,24 @@ function renderSingleFormImportsTemplate({ map }) {
 ${map}
 } from '@admin/components/ui/card'`;
 }
-function renderSingleFormClientModuleTemplate({
-  needsReactImport,
-  hasCreatableSelectUseQuery,
-  lucideIconsLucide,
-  hasNestedListUseFieldArray,
-  hasTabsFieldImport,
-  hasRelationshipImport,
-  relHookImportsContent,
-  join,
+function renderSingleFormCardModuleTemplate({
+  imports,
+  content
+}) {
+  return `'use client'
+${imports}
+
+${content}
+`;
+}
+function renderSingleFormEntryModuleTemplate({
   singular,
-  hasCreatableSelectContent,
   actionImportPath,
-  hasCreatableSelectContentText,
-  joinText,
+  cardImports,
   cardRenders
 }) {
-  return `'use client'
-${needsReactImport}
-import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
-import { useMutation, ${hasCreatableSelectUseQuery}useQueryClient } from '@tanstack/react-query'${lucideIconsLucide}
-import {${hasNestedListUseFieldArray} useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { z } from 'zod/v3'${hasTabsFieldImport}${hasRelationshipImport}
-${relHookImportsContent}${join}
-import type {
-  ${singular},
-  ${hasCreatableSelectContent}${singular}UpsertInput
-} from '@admin/actions/${actionImportPath}'
-import { ${hasCreatableSelectContentText}upsert${singular} } from '@admin/actions/${actionImportPath}'
-
-${joinText}
+  return `import type { ${singular} } from '@admin/actions/${actionImportPath}'
+${cardImports}
 
 interface ${singular}FormProps {
   initialData?: ${singular} | null
@@ -22449,8 +22442,10 @@ function renderSingleFormRenderer(request) {
   switch (request.kind) {
     case "renderSingleFormImportsTemplate":
       return renderSingleFormImportsTemplate(request.props);
-    case "renderSingleFormClientModuleTemplate":
-      return renderSingleFormClientModuleTemplate(request.props);
+    case "renderSingleFormCardModuleTemplate":
+      return renderSingleFormCardModuleTemplate(request.props);
+    case "renderSingleFormEntryModuleTemplate":
+      return renderSingleFormEntryModuleTemplate(request.props);
   }
   throw new Error("Unsupported renderer request");
 }
@@ -22536,12 +22531,12 @@ ${zodFields}
 })
 ${tabParserConst}
 
-function ${groupComponentName}({ initialData }: { initialData?: ${singular} | null }) {
+export function ${groupComponentName}({ initialData }: { initialData?: ${singular} | null }) {
   const queryClient = useQueryClient()${analysisHasTabsFieldTab}${relStateContent}${creatableSelectStateContent}${selectStateContent}
 
   const form = useForm<z.infer<typeof ${groupVarPrefix}Schema>>({
     resolver: standardSchemaResolver(${groupVarPrefix}Schema),
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange',
     defaultValues: {
 ${defaultValues}
@@ -22571,7 +22566,7 @@ ${fieldArrayHooksContent}
 ${creatableSelectHandlersContent}
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit((values) => {
+      <form autoComplete="off" onSubmit={form.handleSubmit((values) => {
         mutation.mutate(values as ${singular}UpsertInput)
       })}>
         <Card >
@@ -22805,7 +22800,7 @@ function renderSingleFormBuildGroupFieldsJsxRenderer(request) {
 }
 
 // adapters/next/generators/form/form-single/build-group-fields-jsx.ts
-function buildGroupFieldsJSX(group2, analysis, defaultValueFromSourceNames, creatableSelectFieldNames) {
+function buildGroupFieldsJSX(group2, analysis, defaultValueFromSourceNames, creatableSelectFieldNames, schemaName) {
   const indent = "            ";
   return group2.fields.map((f) => {
     if (f.type === "tabs" && f.tabs) {
@@ -22814,7 +22809,8 @@ function buildGroupFieldsJSX(group2, analysis, defaultValueFromSourceNames, crea
         const tabFields = (t.fields || []).map(
           (tf) => generateFieldJSX2(tf, "                ", {
             creatableSelectFieldNames,
-            defaultValueFromSourceNames
+            defaultValueFromSourceNames,
+            schemaName
           })
         ).join("\n");
         return renderSingleFormBuildGroupFieldsJsxRenderer({
@@ -22838,7 +22834,8 @@ function buildGroupFieldsJSX(group2, analysis, defaultValueFromSourceNames, crea
     if (analysis.tabFieldNames.has(f.name)) return "";
     return generateFieldJSX2(f, indent, {
       creatableSelectFieldNames,
-      defaultValueFromSourceNames
+      defaultValueFromSourceNames,
+      schemaName
     });
   }).filter(Boolean).join("\n");
 }
@@ -22880,7 +22877,8 @@ function generateCardComponent(group2, schema, analysis, allFlatFields) {
     group2,
     analysis,
     defaultValueFromSourceNames,
-    creatableSelectFieldNames
+    creatableSelectFieldNames,
+    schema.name
   );
   const relState = buildGroupRelState(analysis);
   const selectState = buildGroupSelectState(
@@ -23043,135 +23041,179 @@ function generateSingleForm(schema, pagesDir, options = {}) {
     (f) => !f.primaryKey && f.name !== "createdAt" && f.name !== "updatedAt" && !isAuthorshipFieldName(f.name)
   );
   const cardGroups = parseCardGroups(allFormFields, schema.label);
-  const hasBoolean = hasFieldType(schema.fields, "boolean");
-  const hasImage = hasFieldType(schema.fields, "image");
-  const hasVideo = hasFieldType(schema.fields, "video");
-  const hasMedia = hasFieldType(schema.fields, "media");
-  const hasGallery = hasFieldType(schema.fields, "gallery");
-  const hasIcon = hasFieldType(schema.fields, "icon");
-  const hasIconPostfix = hasRenderedIconPostfix(allFormFields);
-  const hasDate = hasFieldType(schema.fields, "date");
   const flatFields = flattenFields(allFormFields);
-  const hasMultiSelect = flatFields.some((f) => f.type === "select" && f.multiple === true);
-  const hasCreatableSelect = flatFields.some((f) => f.type === "select" && f.creatable === true);
-  const hasSelectCombobox = hasMultiSelect || hasCreatableSelect;
-  const hasSelect = flatFields.some(
-    (f) => f.type === "select" && f.multiple !== true && f.creatable !== true
-  );
-  const hasMarkdown = hasFieldType(schema.fields, "markdown");
-  const hasRichtext = hasFieldType(schema.fields, "richtext");
-  const hasTextarea = hasFieldType(schema.fields, "text");
-  const hasSeparator = hasFieldType(schema.fields, "separator");
-  const hasRelationship = hasFieldType(schema.fields, "relationship");
-  const hasTabsField = cardGroups.some((group2) => analyzeGroup(group2.fields).hasTabsField);
-  const hasList = hasFieldType(schema.fields, "list");
-  const hasNestedList = cardGroups.some(
-    (g) => analyzeGroup(g.fields).listFieldsWithNested.length > 0
-  );
-  const hasNestedObjectList = cardGroups.some(
-    (group2) => analyzeGroup(group2.fields).hasNestedObjectList
-  );
-  const hasSimpleList = hasList && hasSimpleListField(allFormFields);
-  const tabIconNames = collectTabIconNames(allFormFields);
-  const allRelFields = [];
-  for (const g of cardGroups) {
-    const a = analyzeGroup(g.fields);
-    for (const rf of a.relFields) {
-      if (!allRelFields.some((e) => e.relationship === rf.relationship)) {
-        allRelFields.push(rf);
+  const inputFreeFieldTypes = /* @__PURE__ */ new Set([
+    "boolean",
+    "image",
+    "video",
+    "media",
+    "gallery",
+    "icon",
+    "date",
+    "select",
+    "richtext",
+    "markdown",
+    "text",
+    "relationship",
+    "list",
+    "separator",
+    "tabs"
+  ]);
+  const formControlFreeFieldTypes = /* @__PURE__ */ new Set(["separator", "tabs"]);
+  const cardArtifacts = cardGroups.map((group2) => {
+    const analysis = analyzeGroup(group2.fields);
+    const groupFlatFields = group2.flatFields;
+    const creatableSelectFields = groupFlatFields.filter(
+      (field) => field.type === "select" && field.creatable === true
+    );
+    const hasCreatableSelect = creatableSelectFields.length > 0;
+    const hasMultiSelect = analysis.multiSelectFields.length > 0;
+    const hasRelationship = analysis.relFields.length > 0;
+    const hasSelectCombobox = hasRelationship || hasMultiSelect || hasCreatableSelect;
+    const hasSelect = groupFlatFields.some(
+      (field) => field.type === "select" && field.multiple !== true && field.creatable !== true
+    );
+    const hasIconPostfix = hasRenderedIconPostfix(group2.fields);
+    const hasNestedList = analysis.listFieldsWithNested.length > 0;
+    const hasInput = analysis.listFieldsWithNested.some(
+      (field) => field.fields?.some(
+        (nestedField) => !["boolean", "image", "video", "media"].includes(nestedField.type)
+      )
+    ) || groupFlatFields.some(
+      (field) => !field.primaryKey && !field.hidden && !inputFreeFieldTypes.has(field.type)
+    );
+    const hasFormControls = groupFlatFields.some((field) => {
+      if (field.primaryKey || field.hidden) return false;
+      if (field.hasIcon && !["group", "section", "tabs", "separator"].includes(field.type)) {
+        return true;
       }
+      if (field.type === "list" && (!field.fields || field.fields.length === 0)) return false;
+      return !formControlFreeFieldTypes.has(field.type);
+    }) || hasIconPostfix;
+    const groupUiImports = buildUiImports({
+      hasBoolean: hasFieldType(group2.fields, "boolean"),
+      hasTextarea: hasFieldType(group2.fields, "text"),
+      hasImage: hasFieldType(group2.fields, "image"),
+      hasVideo: hasFieldType(group2.fields, "video"),
+      hasMedia: hasFieldType(group2.fields, "media"),
+      hasGallery: hasFieldType(group2.fields, "gallery"),
+      hasIcon: hasFieldType(group2.fields, "icon"),
+      hasIconPostfix,
+      hasDate: hasFieldType(group2.fields, "date"),
+      hasMarkdown: hasFieldType(group2.fields, "markdown"),
+      hasRichtext: hasFieldType(group2.fields, "richtext"),
+      hasSeparator: hasFieldType(group2.fields, "separator"),
+      hasSelect,
+      hasSelectCombobox,
+      hasCreatableSelect,
+      hasMultiSelect,
+      hasTabsField: analysis.hasTabsField,
+      hasRelationship,
+      hasSimpleList: hasSimpleListField(group2.fields),
+      hasNestedList,
+      hasNestedObjectList: analysis.hasNestedObjectList,
+      hasCardContent: true,
+      hasSectionCardHeading: true,
+      hasFormRoot: true,
+      hasButton: true,
+      hasFormControls,
+      hasInput
+    });
+    const cardImportIndex = groupUiImports.findIndex(
+      (value) => value.includes("from '@admin/components/ui/card'")
+    );
+    if (cardImportIndex !== -1) {
+      const cardImportNames = [
+        "Card",
+        "CardContent",
+        ...group2.description ? ["CardDescription"] : [],
+        "CardFooter",
+        "CardHeader",
+        "CardTitle"
+      ];
+      groupUiImports[cardImportIndex] = renderSingleFormRenderer({
+        kind: "renderSingleFormImportsTemplate",
+        props: {
+          map: cardImportNames.map((name) => `  ${name}`).join(",\n")
+        }
+      });
     }
-  }
-  const needsReact = allRelFields.length > 0 || hasNestedList || hasSelectCombobox;
-  const uiImports = buildUiImports({
-    hasBoolean,
-    hasTextarea,
-    hasImage,
-    hasVideo,
-    hasMedia,
-    hasGallery,
-    hasIcon,
-    hasIconPostfix,
-    hasDate,
-    hasMarkdown,
-    hasRichtext,
-    hasSeparator,
-    hasSelect,
-    hasSelectCombobox,
-    hasCreatableSelect,
-    hasMultiSelect,
-    hasTabsField,
-    hasRelationship,
-    hasSimpleList,
-    hasNestedList,
-    hasNestedObjectList
-  });
-  const cardImportIndex = uiImports.indexOf("import { Card } from '@admin/components/ui/card'");
-  if (cardImportIndex !== -1) {
-    uiImports.splice(cardImportIndex, 1);
-  }
-  const cardImportNames = [
-    "Card",
-    "CardContent",
-    ...cardGroups.some((group2) => group2.description) ? ["CardDescription"] : [],
-    "CardFooter",
-    "CardHeader",
-    "CardTitle"
-  ];
-  uiImports.push(
-    renderSingleFormRenderer({
-      kind: "renderSingleFormImportsTemplate",
+    groupUiImports.push("import { Spinner } from '@admin/components/ui/spinner'");
+    const lucideIcons = [];
+    const addLucideIcons = (...icons) => {
+      for (const icon of icons) {
+        if (!lucideIcons.includes(icon)) lucideIcons.push(icon);
+      }
+    };
+    addLucideIcons(...collectTabIconNames(group2.fields));
+    if (hasSelectCombobox) addLucideIcons("Check", "ChevronsUpDown");
+    if (hasCreatableSelect || hasNestedList) addLucideIcons("Plus");
+    if (hasNestedList) addLucideIcons("X");
+    const relationshipImports = Array.from(
+      new Set(analysis.relFields.map((field) => field.relationship).filter(Boolean))
+    ).map((relationship) => {
+      const relationshipPlural = toPascalCase(pluralize(relationship || ""));
+      return `import { use${relationshipPlural} } from '@admin/hooks/use-${relationship}'`;
+    }).join("\n");
+    const needsReact = hasRelationship || hasMultiSelect || hasCreatableSelect || analysis.listFieldsWithNested.length > 0;
+    const hookImports = ["useForm"];
+    if (hasNestedList) hookImports.unshift("useFieldArray");
+    const actionTypeImports = [
+      Singular,
+      ...hasCreatableSelect ? [`${Singular}SelectOption`] : [],
+      `${Singular}UpsertInput`
+    ];
+    const actionImports = [
+      ...hasCreatableSelect ? [`create${Singular}SelectOption`, `get${Singular}SelectOptions`] : [],
+      `upsert${Singular}`
+    ];
+    const cardImports = [
+      needsReact ? "import * as React from 'react'" : "",
+      "import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'",
+      `import { useMutation, ${hasCreatableSelect ? "useQuery, " : ""}useQueryClient } from '@tanstack/react-query'`,
+      lucideIcons.length > 0 ? `import { ${lucideIcons.join(", ")} } from 'lucide-react'` : "",
+      `import { ${hookImports.join(", ")} } from 'react-hook-form'`,
+      "import { toast } from 'sonner'",
+      "import { z } from 'zod/v3'",
+      analysis.hasTabsField ? "import { parseAsStringLiteral, useQueryState } from 'nuqs'" : "",
+      hasSelectCombobox ? "import { cn } from '@admin/utils/shared/cn'" : "",
+      relationshipImports,
+      groupUiImports.join("\n"),
+      `import type { ${actionTypeImports.join(",\n  ")} } from '@admin/actions/${actionImportPath}'`,
+      `import { ${actionImports.join(", ")} } from '@admin/actions/${actionImportPath}'`
+    ].filter(Boolean).join("\n");
+    const content2 = renderSingleFormRenderer({
+      kind: "renderSingleFormCardModuleTemplate",
       props: {
-        map: cardImportNames.map((name) => `  ${name}`).join(",\n")
+        imports: cardImports,
+        content: generateCardComponent(group2, schema, analysis, flatFields)
       }
-    })
-  );
-  uiImports.push("import { Spinner } from '@admin/components/ui/spinner'");
-  const lucideIcons = [];
-  const addLucideIcons = (...icons) => {
-    for (const icon of icons) {
-      if (!lucideIcons.includes(icon)) lucideIcons.push(icon);
-    }
-  };
-  addLucideIcons(...tabIconNames);
-  if (hasRelationship || hasSelectCombobox) addLucideIcons("Check", "ChevronsUpDown");
-  if (hasCreatableSelect) addLucideIcons("Plus");
-  if (hasNestedList) {
-    addLucideIcons("Plus", "X");
-  }
-  const relHookImports = allRelFields.map((f) => {
-    const relPlural = toPascalCase(pluralize(f.relationship || ""));
-    return `import { use${relPlural} } from '@admin/hooks/use-${f.relationship}'`;
-  }).filter((v, i, a) => a.indexOf(v) === i).join("\n");
-  const cardComponents = cardGroups.map((group2) => {
-    const analysis = analyzeGroup(group2.fields);
-    return generateCardComponent(group2, schema, analysis, flatFields);
+    });
+    return {
+      content: content2,
+      fileName: `${toKebabCase(group2.componentName)}.tsx`,
+      group: group2
+    };
   });
-  const cardRenders = cardGroups.map((g) => `        <${g.componentName} initialData={initialData} />`).join("\n");
+  const cardRenders = cardArtifacts.map(({ group: group2 }) => `        <${group2.componentName} initialData={initialData} />`).join("\n");
   const content = renderSingleFormRenderer({
-    kind: "renderSingleFormClientModuleTemplate",
+    kind: "renderSingleFormEntryModuleTemplate",
     props: {
-      needsReactImport: needsReact ? "\nimport * as React from 'react'" : "",
-      hasCreatableSelectUseQuery: hasCreatableSelect ? "useQuery, " : "",
-      lucideIconsLucide: lucideIcons.length > 0 ? `
-import { ${lucideIcons.join(", ")} } from 'lucide-react'` : "",
-      hasNestedListUseFieldArray: hasNestedList ? " useFieldArray," : "",
-      hasTabsFieldImport: hasTabsField ? "\nimport { parseAsStringLiteral, useQueryState } from 'nuqs'" : "",
-      hasRelationshipImport: hasRelationship || hasSelectCombobox ? "\nimport { cn } from '@admin/utils/shared/cn'" : "",
-      relHookImportsContent: relHookImports ? `${relHookImports}
-` : "",
-      join: uiImports.join("\n"),
       singular: Singular,
-      hasCreatableSelectContent: hasCreatableSelect ? `${Singular}SelectOption,
-  ` : "",
       actionImportPath,
-      hasCreatableSelectContentText: hasCreatableSelect ? `create${Singular}SelectOption, get${Singular}SelectOptions, ` : "",
-      joinText: cardComponents.join("\n\n"),
+      cardImports: cardArtifacts.map(
+        ({ fileName, group: group2 }) => `import { ${group2.componentName} } from './${fileName.slice(0, -4)}'`
+      ).join("\n"),
       cardRenders
     }
   });
   return {
-    files: [createGeneratedFile(`${pagesDir}/${schema.name}/${schema.name}-form.tsx`, content)]
+    files: [
+      createGeneratedFile(`${pagesDir}/${schema.name}/${schema.name}-form.tsx`, content),
+      ...cardArtifacts.map(
+        ({ content: cardContent, fileName }) => createGeneratedFile(`${pagesDir}/${schema.name}/${fileName}`, cardContent)
+      )
+    ]
   };
 }