betterstart-cli 0.0.108 → 0.0.110

package/dist/cli.js

@@ -15031,15 +15031,13 @@ function generateDatabase(schema, dbDir, options = {}, relatedSchemas = /* @__PU
 }
 
 // adapters/next/templates/renderers/generators/edit-page.ts
-function renderEditPageComponentTemplate({
+function renderEditPageShellTemplate({
   singular,
-  actionImportPath,
-  kebabName,
-  camelSingular
+  kebabSingular
 }) {
-  return `import { notFound } from 'next/navigation'
-import { get${singular}ById } from '@admin/actions/${actionImportPath}'
-import { ${singular}Form } from '../../${kebabName}-form'
+  return `import * as React from 'react'
+import { Edit${singular}PageContent } from './edit-${kebabSingular}-page-content'
+import { Edit${singular}PageSkeleton } from './edit-${kebabSingular}-page-skeleton'
 
 interface PageProps {
   params: Promise<{
@@ -15047,7 +15045,26 @@ interface PageProps {
   }>
 }
 
-export default async function Edit${singular}Page({ params }: PageProps) {
+export default function Edit${singular}Page({ params }: PageProps) {
+  return (
+    <React.Suspense fallback={<Edit${singular}PageSkeleton />}>
+      <Edit${singular}PageContent params={params} />
+    </React.Suspense>
+  )
+}
+`;
+}
+function renderEditPageContentTemplate({
+  singular,
+  actionImportPath,
+  kebabName,
+  camelSingular
+}) {
+  return `import { notFound } from 'next/navigation'
+import { get${singular}ById } from '@admin/actions/${actionImportPath}'
+import { ${singular}Form } from '../../${kebabName}-form'
+
+export async function Edit${singular}PageContent({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   const ${camelSingular} = await get${singular}ById(id)
 
@@ -15059,6 +15076,23 @@ export default async function Edit${singular}Page({ params }: PageProps) {
 }
 `;
 }
+function renderEditPageFiles({
+  singular,
+  actionImportPath,
+  kebabName,
+  kebabSingular,
+  camelSingular
+}) {
+  return {
+    page: renderEditPageShellTemplate({ singular, kebabSingular }),
+    content: renderEditPageContentTemplate({
+      singular,
+      actionImportPath,
+      kebabName,
+      camelSingular
+    })
+  };
+}
 
 // adapters/next/generators/edit-page.ts
 function generateEditPage(schema, pagesDir, options = {}) {
@@ -15066,15 +15100,24 @@ function generateEditPage(schema, pagesDir, options = {}) {
   const Singular = toPascalCase(singular);
   const camelSingular = toCamelCase(singular);
   const kebabName = toKebabCase(schema.name);
+  const kebabSingular = toKebabCase(singular);
   const actionImportPath = resolveSchemaActionImportPath(schema.name, options.outputNamespace);
-  const content = renderEditPageComponentTemplate({
+  const displayNouns = resolveDisplayNouns(schema);
+  const { page, content } = renderEditPageFiles({
     singular: Singular,
     actionImportPath,
     kebabName,
+    kebabSingular,
     camelSingular
   });
+  const skeleton = buildLoadingSkeletonSource(`Edit${Singular}PageSkeleton`, displayNouns.singular);
+  const editDir = `${pagesDir}/${schema.name}/[id]/edit`;
   return {
-    files: [createGeneratedFile(`${pagesDir}/${schema.name}/[id]/edit/page.tsx`, content)]
+    files: [
+      createGeneratedFile(`${editDir}/page.tsx`, page),
+      createGeneratedFile(`${editDir}/edit-${kebabSingular}-page-content.tsx`, content),
+      createGeneratedFile(`${editDir}/edit-${kebabSingular}-page-skeleton.tsx`, skeleton)
+    ]
   };
 }
 
@@ -16117,9 +16160,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 +16390,7 @@ ${defaultValues}
 
   const form = useForm<FormValues>({
     resolver: standardSchemaResolver(formSchema),
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange',
     defaultValues
   })
@@ -16522,16 +16567,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 +16598,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 +16758,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 +18746,7 @@ ${indent}              ) : null}`;
 function renderMultiSelectFieldActionButtonsSerializedValueTemplate({
   indent,
   fieldName,
+  optionsId,
   optionsDeclaration,
   createState,
   previewLimit,
@@ -18747,6 +18789,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 +18831,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 +18901,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 +18940,7 @@ ${indent}                        ${setSearchVar}('')` : "";
     props: {
       indent,
       fieldName: field.name,
+      optionsId,
       optionsDeclaration,
       createState,
       previewLimit,
@@ -19210,6 +19255,7 @@ function buildEntityFormLayout({
         (tabField) => generateFieldJSX2(tabField, `${cardFieldIndent}    `, {
           creatableSelectFieldNames,
           defaultValueFromSourceNames,
+          schemaName,
           ...childContext
         })
       ).filter(Boolean).join("\n");
@@ -19256,6 +19302,7 @@ function buildEntityFormLayout({
     return generateFieldJSX2(field, cardFieldIndent, {
       creatableSelectFieldNames,
       defaultValueFromSourceNames,
+      schemaName,
       slotFilter: "main"
     });
   };
@@ -19263,7 +19310,8 @@ function buildEntityFormLayout({
     if (field.type === "tabs") return renderNestedTabsField(field);
     return generateFieldJSX2(field, cardFieldIndent, {
       creatableSelectFieldNames,
-      defaultValueFromSourceNames
+      defaultValueFromSourceNames,
+      schemaName
     });
   };
   const renderConditionalSidebarEntry = ({
@@ -19371,6 +19419,7 @@ function buildEntityFormLayout({
       (field) => generateFieldJSX2(field, cardFieldIndent, {
         creatableSelectFieldNames,
         defaultValueFromSourceNames,
+        schemaName,
         slotFilter: "main"
       })
     ).filter(Boolean).join("\n");
@@ -19705,7 +19754,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 +22449,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 +22485,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 +22574,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 +22609,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 +22843,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 +22852,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 +22877,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 +22920,8 @@ function generateCardComponent(group2, schema, analysis, allFlatFields) {
     group2,
     analysis,
     defaultValueFromSourceNames,
-    creatableSelectFieldNames
+    creatableSelectFieldNames,
+    schema.name
   );
   const relState = buildGroupRelState(analysis);
   const selectState = buildGroupSelectState(
@@ -23043,135 +23084,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)
+      )
+    ]
   };
 }
 
@@ -31215,8 +31300,8 @@ function scaffoldComponents({ cwd, config }) {
     readTemplate("components/layouts/admin-sidebar.tsx")
   );
   write(
-    "components/layouts/admin-sidebar-branding-rsc.tsx",
-    readTemplate("components/layouts/admin-sidebar-branding-rsc.tsx")
+    "components/layouts/admin-sidebar-branding.tsx",
+    readTemplate("components/layouts/admin-sidebar-branding.tsx")
   );
   write(
     "components/layouts/admin-sidebar-branding-skeleton.tsx",
@@ -31251,6 +31336,7 @@ function scaffoldComponents({ cwd, config }) {
     "components/layouts/content-skeleton.tsx",
     readTemplate("components/layouts/content-skeleton.tsx")
   );
+  write("components/layouts/role-gate.tsx", readTemplate("components/layouts/role-gate.tsx"));
   write("components/shared/page-header.tsx", readTemplate("components/shared/page-header.tsx"));
   write(
     "components/shared/sort-indicator.tsx",
@@ -32207,11 +32293,11 @@ function scaffoldLayout({ cwd, config }) {
   const adminDir = path74.dirname(config.paths.pages);
   write(path74.join(adminDir, "layout.tsx"), readTemplate("pages/admin-layout.tsx"));
   write(path74.join(config.paths.pages, "layout.tsx"), readTemplate("pages/authenticated-layout.tsx"));
-  write(path74.join(config.paths.pages, "auth-gate-rsc.tsx"), readTemplate("pages/auth-gate-rsc.tsx"));
+  write(path74.join(config.paths.pages, "auth-gate.tsx"), readTemplate("pages/auth-gate.tsx"));
   write(path74.join(config.paths.login, "page.tsx"), readTemplate("pages/login-page.tsx"));
   write(
-    path74.join(config.paths.login, "login-page-rsc.tsx"),
-    readTemplate("pages/login-page-rsc.tsx")
+    path74.join(config.paths.login, "login-page-content.tsx"),
+    readTemplate("pages/login-page-content.tsx")
   );
   write(
     path74.join(config.paths.login, "login-page-skeleton.tsx"),
@@ -32389,13 +32475,21 @@ function scaffoldLayout({ cwd, config }) {
   );
   const accountDir = path74.join(adminDir, "(account)");
   write(path74.join(accountDir, "layout.tsx"), readTemplate("pages/account-layout.tsx"));
-  write(path74.join(accountDir, "account-shell-rsc.tsx"), readTemplate("pages/account-shell-rsc.tsx"));
+  write(path74.join(accountDir, "account-shell.tsx"), readTemplate("pages/account-shell.tsx"));
   write(
     path74.join(accountDir, "minimal-account-shell.tsx"),
     readTemplate("pages/minimal-account-shell.tsx")
   );
   const profileDir = path74.join(accountDir, "profile");
   write(path74.join(profileDir, "page.tsx"), readTemplate("pages/profile/profile-page.tsx"));
+  write(
+    path74.join(profileDir, "profile-page-content.tsx"),
+    readTemplate("pages/profile/profile-page-content.tsx")
+  );
+  write(
+    path74.join(profileDir, "profile-page-skeleton.tsx"),
+    readTemplate("pages/profile/profile-page-skeleton.tsx")
+  );
   write(path74.join(profileDir, "profile-form.tsx"), readTemplate("pages/profile/profile-form.tsx"));
   write(
     path74.join(config.paths.admin, "lib", "actions", "profile", "index.ts"),
@@ -36346,7 +36440,7 @@ var TEMPLATE_REGISTRY = {
     relPath: "components/layouts/admin-sidebar.tsx",
     content: () => readTemplate("components/layouts/admin-sidebar.tsx"),
     dependencies: [
-      "admin-sidebar-branding-rsc",
+      "admin-sidebar-branding",
       "admin-sidebar-branding-skeleton",
       "admin-sidebar-nav-link",
       "admin-sidebar-user-menu",
@@ -36354,9 +36448,9 @@ var TEMPLATE_REGISTRY = {
       "sidebar-utils"
     ]
   },
-  "admin-sidebar-branding-rsc": {
-    relPath: "components/layouts/admin-sidebar-branding-rsc.tsx",
-    content: () => readTemplate("components/layouts/admin-sidebar-branding-rsc.tsx"),
+  "admin-sidebar-branding": {
+    relPath: "components/layouts/admin-sidebar-branding.tsx",
+    content: () => readTemplate("components/layouts/admin-sidebar-branding.tsx"),
     dependencies: ["sidebar-branding"]
   },
   "admin-sidebar-branding-skeleton": {
@@ -36403,6 +36497,11 @@ var TEMPLATE_REGISTRY = {
     relPath: "components/layouts/content-skeleton.tsx",
     content: () => readTemplate("components/layouts/content-skeleton.tsx")
   },
+  "role-gate": {
+    relPath: "components/layouts/role-gate.tsx",
+    content: () => readTemplate("components/layouts/role-gate.tsx"),
+    dependencies: ["auth-roles-utils", "auth-session"]
+  },
   "page-header": {
     relPath: "components/shared/page-header.tsx",
     content: () => readTemplate("components/shared/page-header.tsx")
@@ -37976,11 +38075,11 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/layout.tsx",
     content: () => readTemplate("pages/authenticated-layout.tsx"),
     base: "cwd",
-    dependencies: ["auth-gate-rsc"]
+    dependencies: ["auth-gate"]
   },
-  "auth-gate-rsc": {
-    relPath: "app/(admin)/admin/(authenticated)/auth-gate-rsc.tsx",
-    content: () => readTemplate("pages/auth-gate-rsc.tsx"),
+  "auth-gate": {
+    relPath: "app/(admin)/admin/(authenticated)/auth-gate.tsx",
+    content: () => readTemplate("pages/auth-gate.tsx"),
     base: "cwd",
     dependencies: ["admin-sidebar", "auth-session"]
   },
@@ -37988,11 +38087,11 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(account)/layout.tsx",
     content: () => readTemplate("pages/account-layout.tsx"),
     base: "cwd",
-    dependencies: ["account-shell-rsc"]
+    dependencies: ["account-shell"]
   },
-  "account-shell-rsc": {
-    relPath: "app/(admin)/admin/(account)/account-shell-rsc.tsx",
-    content: () => readTemplate("pages/account-shell-rsc.tsx"),
+  "account-shell": {
+    relPath: "app/(admin)/admin/(account)/account-shell.tsx",
+    content: () => readTemplate("pages/account-shell.tsx"),
     base: "cwd",
     dependencies: [
       "admin-sidebar",
@@ -38011,6 +38110,18 @@ var TEMPLATE_REGISTRY = {
   "profile-page": {
     relPath: "app/(admin)/admin/(account)/profile/page.tsx",
     content: () => readTemplate("pages/profile/profile-page.tsx"),
+    base: "cwd",
+    dependencies: ["profile-page-content", "profile-page-skeleton"]
+  },
+  "profile-page-content": {
+    relPath: "app/(admin)/admin/(account)/profile/profile-page-content.tsx",
+    content: () => readTemplate("pages/profile/profile-page-content.tsx"),
+    base: "cwd",
+    dependencies: ["auth-roles-utils", "auth-session", "page-header", "profile-form"]
+  },
+  "profile-page-skeleton": {
+    relPath: "app/(admin)/admin/(account)/profile/profile-page-skeleton.tsx",
+    content: () => readTemplate("pages/profile/profile-page-skeleton.tsx"),
     base: "cwd"
   },
   "profile-form": {
@@ -38023,11 +38134,11 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(auth)/login/page.tsx",
     content: () => readTemplate("pages/login-page.tsx"),
     base: "cwd",
-    dependencies: ["login-page-rsc", "login-page-skeleton"]
+    dependencies: ["login-page-content", "login-page-skeleton"]
   },
-  "login-page-rsc": {
-    relPath: "app/(admin)/admin/(auth)/login/login-page-rsc.tsx",
-    content: () => readTemplate("pages/login-page-rsc.tsx"),
+  "login-page-content": {
+    relPath: "app/(admin)/admin/(auth)/login/login-page-content.tsx",
+    content: () => readTemplate("pages/login-page-content.tsx"),
     base: "cwd",
     dependencies: ["auth-roles-utils", "auth-session", "login-form"]
   },
@@ -38134,7 +38245,13 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/settings/forms/page.tsx",
     content: () => readTemplate("pages/settings/forms/forms-settings-page.tsx"),
     base: "cwd",
-    dependencies: ["forms-settings-page-skeleton", "forms-settings-page-content"]
+    dependencies: [
+      "auth-roles-utils",
+      "auth-session",
+      "role-gate",
+      "forms-settings-page-skeleton",
+      "forms-settings-page-content"
+    ]
   },
   "forms-settings-page-skeleton": {
     relPath: "app/(admin)/admin/(authenticated)/settings/forms/forms-settings-page-skeleton.tsx",
@@ -38182,7 +38299,13 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/settings/webhooks/page.tsx",
     content: () => readTemplate("pages/settings/webhooks/webhooks-page.tsx"),
     base: "cwd",
-    dependencies: ["webhooks-page-skeleton", "webhooks-page-content"]
+    dependencies: [
+      "auth-roles-utils",
+      "auth-session",
+      "role-gate",
+      "webhooks-page-skeleton",
+      "webhooks-page-content"
+    ]
   },
   "webhooks-page-skeleton": {
     relPath: "app/(admin)/admin/(authenticated)/settings/webhooks/webhooks-page-skeleton.tsx",
@@ -38242,7 +38365,13 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/settings/webhooks/logs/page.tsx",
     content: () => readTemplate("pages/settings/webhooks/webhooks-logs-page.tsx"),
     base: "cwd",
-    dependencies: ["webhooks-logs-page-content", "webhooks-page-skeleton"]
+    dependencies: [
+      "auth-roles-utils",
+      "auth-session",
+      "role-gate",
+      "webhooks-logs-page-content",
+      "webhooks-page-skeleton"
+    ]
   },
   "webhooks-logs-page-content": {
     relPath: "app/(admin)/admin/(authenticated)/settings/webhooks/webhooks-logs-page-content.tsx",
@@ -38926,7 +39055,13 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/settings/audit-log/page.tsx",
     content: () => readTemplate("pages/settings/audit-log/audit-log-page.tsx"),
     base: "cwd",
-    dependencies: ["audit-log-page-content", "audit-log-page-skeleton"]
+    dependencies: [
+      "auth-roles-utils",
+      "auth-session",
+      "role-gate",
+      "audit-log-page-content",
+      "audit-log-page-skeleton"
+    ]
   },
   "audit-log-page-skeleton": {
     relPath: "app/(admin)/admin/(authenticated)/settings/audit-log/audit-log-page-skeleton.tsx",