@compilr-dev/factory 0.1.7 → 0.1.9

package/dist/factory/registry.js

@@ -25,4 +25,8 @@ export class ToolkitRegistry {
 export const defaultRegistry = new ToolkitRegistry();
 // Register built-in toolkits
 import { reactNodeToolkit } from '../toolkits/react-node/index.js';
+import { nextPrismaToolkit } from '../toolkits/next-prisma/index.js';
+import { staticLandingToolkit } from '../toolkits/static-landing/index.js';
 defaultRegistry.register(reactNodeToolkit);
+defaultRegistry.register(nextPrismaToolkit);
+defaultRegistry.register(staticLandingToolkit);

package/dist/index.d.ts

@@ -19,4 +19,6 @@ export { ToolkitRegistry, defaultRegistry } from './factory/registry.js';
 export { writeFactoryFiles } from './factory/file-writer.js';
 export type { WriteResult } from './factory/file-writer.js';
 export { reactNodeToolkit } from './toolkits/react-node/index.js';
+export { nextPrismaToolkit } from './toolkits/next-prisma/index.js';
+export { staticLandingToolkit } from './toolkits/static-landing/index.js';
 export { factoryScaffoldSkill, factorySkills } from './factory/skill.js';

package/dist/index.js

@@ -21,5 +21,9 @@ export { ToolkitRegistry, defaultRegistry } from './factory/registry.js';
 export { writeFactoryFiles } from './factory/file-writer.js';
 // React+Node Toolkit (Phase 4)
 export { reactNodeToolkit } from './toolkits/react-node/index.js';
+// Next.js + Prisma Toolkit
+export { nextPrismaToolkit } from './toolkits/next-prisma/index.js';
+// Static Landing Page Toolkit
+export { staticLandingToolkit } from './toolkits/static-landing/index.js';
 // Factory skill (Phase 5)
 export { factoryScaffoldSkill, factorySkills } from './factory/skill.js';

package/dist/toolkits/next-prisma/api-routes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Next.js + Prisma Toolkit — API Routes Generator
+ *
+ * For each entity generates:
+ *   app/api/[route]/route.ts       — GET list (with search/filter) + POST create
+ *   app/api/[route]/[id]/route.ts  — GET by id (with ?include=) + PUT update + DELETE
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateApiRoutes(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/next-prisma/api-routes.js

@@ -0,0 +1,155 @@
+/**
+ * Next.js + Prisma Toolkit — API Routes Generator
+ *
+ * For each entity generates:
+ *   app/api/[route]/route.ts       — GET list (with search/filter) + POST create
+ *   app/api/[route]/[id]/route.ts  — GET by id (with ?include=) + PUT update + DELETE
+ */
+import { toCamelCase } from '../../model/naming.js';
+import { belongsToRels, hasManyRels, appRoutePath } from './helpers.js';
+export function generateApiRoutes(model) {
+    return model.entities.flatMap((entity) => [
+        generateListRoute(model, entity),
+        generateDetailRoute(model, entity),
+    ]);
+}
+// =============================================================================
+// List Route — GET + POST
+// =============================================================================
+function generateListRoute(model, entity) {
+    const route = appRoutePath(entity);
+    const camel = toCamelCase(entity.name);
+    // Build search field list for where clause
+    const searchableFields = entity.fields
+        .filter((f) => f.type === 'string' || f.type === 'enum')
+        .map((f) => f.name);
+    let searchWhere;
+    if (searchableFields.length > 0) {
+        const searchOR = searchableFields
+            .map((name) => `        { ${name}: { contains: search } },`)
+            .join('\n');
+        searchWhere = `    if (search) {
+      where.OR = [
+${searchOR}
+      ];
+    }`;
+    }
+    else {
+        searchWhere = `    // No searchable string fields`;
+    }
+    // Filter support for enum fields
+    const enumFields = entity.fields.filter((f) => f.type === 'enum' && f.enumValues?.length);
+    let filterWhere;
+    if (enumFields.length > 0) {
+        const filterChecks = enumFields
+            .map((f) => `    const ${f.name}Filter = searchParams.get('filter[${f.name}]');\n    if (${f.name}Filter) where.${f.name} = ${f.name}Filter;`)
+            .join('\n');
+        filterWhere = filterChecks;
+    }
+    else {
+        filterWhere = '';
+    }
+    // BelongsTo includes for populated list
+    const btoRels = belongsToRels(entity);
+    const includeClause = btoRels.length > 0
+        ? `\n    include: {\n${btoRels.map((rel) => `      ${toCamelCase(rel.target)}: true,`).join('\n')}\n    },`
+        : '';
+    return {
+        path: `app/api/${route}/route.ts`,
+        content: `import { prisma } from '@/lib/prisma';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const search = searchParams.get('search') ?? '';
+
+  const where: Record<string, unknown> = {};
+${searchWhere}
+${filterWhere}
+
+  const items = await prisma.${camel}.findMany({
+    where,${includeClause}
+    orderBy: { createdAt: 'desc' },
+  });
+  const total = await prisma.${camel}.count({ where });
+
+  return NextResponse.json({ data: items, total });
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const item = await prisma.${camel}.create({ data: body });
+  return NextResponse.json(item, { status: 201 });
+}
+`,
+    };
+}
+// =============================================================================
+// Detail Route — GET + PUT + DELETE
+// =============================================================================
+function generateDetailRoute(model, entity) {
+    const route = appRoutePath(entity);
+    const camel = toCamelCase(entity.name);
+    const btoRels = belongsToRels(entity);
+    const hmRels = hasManyRels(entity);
+    // Build dynamic include from ?include= param
+    const allIncludable = [];
+    for (const rel of btoRels) {
+        allIncludable.push(toCamelCase(rel.target));
+    }
+    for (const rel of hmRels) {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (targetEntity) {
+            allIncludable.push(toCamelCase(targetEntity.pluralName));
+        }
+    }
+    let includeBlock;
+    if (allIncludable.length > 0) {
+        const includeChecks = allIncludable
+            .map((name) => `    if (include.includes('${name}')) prismaInclude.${name} = true;`)
+            .join('\n');
+        includeBlock = `  const include = (searchParams.get('include') ?? '').split(',').filter(Boolean);
+  const prismaInclude: Record<string, boolean> = {};
+${includeChecks}
+`;
+    }
+    else {
+        includeBlock = '';
+    }
+    const findUniqueInclude = allIncludable.length > 0
+        ? `\n    include: Object.keys(prismaInclude).length > 0 ? prismaInclude : undefined,`
+        : '';
+    return {
+        path: `app/api/${route}/[id]/route.ts`,
+        content: `import { prisma } from '@/lib/prisma';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request, { params }: { params: { id: string } }) {
+  const { searchParams } = new URL(request.url);
+${includeBlock}
+  const item = await prisma.${camel}.findUnique({
+    where: { id: Number(params.id) },${findUniqueInclude}
+  });
+
+  if (!item) return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  return NextResponse.json(item);
+}
+
+export async function PUT(request: Request, { params }: { params: { id: string } }) {
+  const body = await request.json();
+  const item = await prisma.${camel}.update({
+    where: { id: Number(params.id) },
+    data: body,
+  });
+  return NextResponse.json(item);
+}
+
+export async function DELETE(_request: Request, { params }: { params: { id: string } }) {
+  await prisma.${camel}.delete({
+    where: { id: Number(params.id) },
+  });
+  return new NextResponse(null, { status: 204 });
+}
+`,
+    };
+}

package/dist/toolkits/next-prisma/config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Next.js + Prisma Toolkit — Configuration Files Generator
+ *
+ * Generates: package.json, next.config.mjs, tailwind.config.js,
+ * tsconfig.json, postcss.config.js, .env, .env.example
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateConfigFiles(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/next-prisma/config.js

@@ -0,0 +1,139 @@
+/**
+ * Next.js + Prisma Toolkit — Configuration Files Generator
+ *
+ * Generates: package.json, next.config.mjs, tailwind.config.js,
+ * tsconfig.json, postcss.config.js, .env, .env.example
+ */
+import { toKebabCase } from '../../model/naming.js';
+import { generateColorShades } from '../shared/color-utils.js';
+export function generateConfigFiles(model) {
+    const appSlug = toKebabCase(model.identity.name);
+    return [
+        generatePackageJson(appSlug),
+        generateNextConfig(),
+        generateTailwindConfig(model),
+        generateTsConfig(),
+        generatePostCssConfig(),
+        generateEnv(),
+        generateEnvExample(),
+    ];
+}
+function generatePackageJson(appSlug) {
+    const pkg = {
+        name: appSlug,
+        version: '0.1.0',
+        private: true,
+        scripts: {
+            dev: 'next dev',
+            build: 'next build',
+            start: 'next start',
+            lint: 'next lint',
+            'db:push': 'prisma db push',
+            'db:seed': 'tsx prisma/seed.ts',
+            'db:studio': 'prisma studio',
+            postinstall: 'prisma generate',
+        },
+        dependencies: {
+            next: '^14.2.0',
+            react: '^18.3.1',
+            'react-dom': '^18.3.1',
+            '@prisma/client': '^5.20.0',
+            '@tailwindcss/forms': '^0.5.9',
+            autoprefixer: '^10.4.20',
+            postcss: '^8.4.49',
+            tailwindcss: '^3.4.15',
+        },
+        devDependencies: {
+            prisma: '^5.20.0',
+            typescript: '^5.6.3',
+            '@types/node': '^22.0.0',
+            '@types/react': '^18.3.12',
+            '@types/react-dom': '^18.3.1',
+            tsx: '^4.19.2',
+        },
+    };
+    return { path: 'package.json', content: JSON.stringify(pkg, null, 2) + '\n' };
+}
+function generateNextConfig() {
+    return {
+        path: 'next.config.mjs',
+        content: `/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
+`,
+    };
+}
+function generateTailwindConfig(model) {
+    return {
+        path: 'tailwind.config.js',
+        content: `import forms from '@tailwindcss/forms';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: ${generateColorShades(model.theme.primaryColor)},
+      },
+    },
+  },
+  plugins: [forms],
+};
+`,
+    };
+}
+function generateTsConfig() {
+    const config = {
+        compilerOptions: {
+            target: 'ES2017',
+            lib: ['dom', 'dom.iterable', 'esnext'],
+            allowJs: true,
+            skipLibCheck: true,
+            strict: true,
+            noEmit: true,
+            esModuleInterop: true,
+            module: 'esnext',
+            moduleResolution: 'bundler',
+            resolveJsonModule: true,
+            isolatedModules: true,
+            jsx: 'preserve',
+            incremental: true,
+            plugins: [{ name: 'next' }],
+            paths: {
+                '@/*': ['./*'],
+            },
+        },
+        include: ['next-env.d.ts', '**/*.ts', '**/*.tsx', '.next/types/**/*.ts'],
+        exclude: ['node_modules'],
+    };
+    return { path: 'tsconfig.json', content: JSON.stringify(config, null, 2) + '\n' };
+}
+function generatePostCssConfig() {
+    return {
+        path: 'postcss.config.js',
+        content: `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`,
+    };
+}
+function generateEnv() {
+    return {
+        path: '.env',
+        content: `DATABASE_URL="file:./dev.db"
+`,
+    };
+}
+function generateEnvExample() {
+    return {
+        path: '.env.example',
+        content: `DATABASE_URL="file:./dev.db"
+`,
+    };
+}

package/dist/toolkits/next-prisma/dashboard.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Next.js + Prisma Toolkit — Dashboard Generator
+ *
+ * Generates app/page.tsx — an async Server Component using Prisma directly.
+ * No useState/useEffect/fetch — data is loaded at request time.
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateDashboard(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/next-prisma/dashboard.js

@@ -0,0 +1,87 @@
+/**
+ * Next.js + Prisma Toolkit — Dashboard Generator
+ *
+ * Generates app/page.tsx — an async Server Component using Prisma directly.
+ * No useState/useEffect/fetch — data is loaded at request time.
+ */
+import { toCamelCase } from '../../model/naming.js';
+import { appRoutePath } from './helpers.js';
+export function generateDashboard(model) {
+    if (!model.features.dashboard)
+        return [];
+    const prismaImports = model.entities
+        .map((e) => {
+        const camel = toCamelCase(e.name);
+        return `    prisma.${camel}.count(),\n    prisma.${camel}.findMany({ take: 5, orderBy: { createdAt: 'desc' } }),`;
+    })
+        .join('\n');
+    // Destructure: [customerCount, recentCustomers, tableCount, recentTables, ...]
+    const destructureItems = model.entities
+        .map((e) => `${toCamelCase(e.name)}Count, recent${e.name}s`)
+        .join(', ');
+    const cards = model.entities
+        .map((e) => {
+        const path = appRoutePath(e);
+        return `        <Link href="/${path}" className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
+          <div className="text-3xl">${e.icon}</div>
+          <div className="mt-2 text-2xl font-bold text-gray-900 dark:text-white">{${toCamelCase(e.name)}Count}</div>
+          <div className="text-sm text-gray-500 dark:text-gray-400">${e.pluralName}</div>
+        </Link>`;
+    })
+        .join('\n');
+    const recentRows = model.entities
+        .map((e) => {
+        const firstStringField = e.fields.find((f) => f.type === 'string');
+        const displayExpr = firstStringField ? `item.${firstStringField.name}` : `String(item.id)`;
+        const path = appRoutePath(e);
+        return `            {recent${e.name}s.map((item) => (
+              <tr key={item.id}>
+                <td className="px-4 py-2 text-sm">${e.icon} ${e.name}</td>
+                <td className="px-4 py-2 text-sm"><Link href={\`/${path}/\${String(item.id)}\`} className="text-primary hover:underline">{${displayExpr}}</Link></td>
+                <td className="px-4 py-2 text-sm text-gray-500">{String(item.id)}</td>
+              </tr>
+            ))}`;
+    })
+        .join('\n');
+    return [
+        {
+            path: 'app/page.tsx',
+            content: `import Link from 'next/link';
+import { prisma } from '@/lib/prisma';
+
+export default async function Dashboard() {
+  const [${destructureItems}] = await Promise.all([
+${prismaImports}
+  ]);
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
+        Welcome to ${model.identity.name}
+      </h1>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-${String(Math.min(model.entities.length, 4))}">
+${cards}
+      </div>
+
+      <h2 className="mb-4 mt-8 text-xl font-bold text-gray-900 dark:text-white">Recent Activity</h2>
+      <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+        <table className="w-full text-left">
+          <thead className="bg-gray-50 dark:bg-gray-800">
+            <tr>
+              <th className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400">Type</th>
+              <th className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400">Name</th>
+              <th className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400">ID</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+${recentRows}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+`,
+        },
+    ];
+}

package/dist/toolkits/next-prisma/entity-components.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Next.js + Prisma Toolkit — Entity Components Generator
+ *
+ * For each entity generates:
+ *   components/[route]/[Entity]Card.tsx  — Card component for grid view
+ *   components/[route]/[Entity]Form.tsx  — Create/Edit form (Client Component)
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateEntityComponents(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/next-prisma/entity-components.js

@@ -0,0 +1,217 @@
+/**
+ * Next.js + Prisma Toolkit — Entity Components Generator
+ *
+ * For each entity generates:
+ *   components/[route]/[Entity]Card.tsx  — Card component for grid view
+ *   components/[route]/[Entity]Form.tsx  — Create/Edit form (Client Component)
+ */
+import { toCamelCase } from '../../model/naming.js';
+import { fkFieldName, belongsToRels, inputType, appRoutePath } from './helpers.js';
+export function generateEntityComponents(model) {
+    return model.entities.flatMap((entity) => [generateCard(entity), generateForm(model, entity)]);
+}
+// =============================================================================
+// Card Component
+// =============================================================================
+function generateCard(entity) {
+    const route = appRoutePath(entity);
+    const previewFields = entity.fields.slice(0, 4);
+    const fieldDisplay = previewFields
+        .map((f) => `        <p className="text-sm text-gray-600 dark:text-gray-300">
+          <span className="font-medium">${f.label}:</span> {String(item.${f.name})}
+        </p>`)
+        .join('\n');
+    return {
+        path: `components/${route}/${entity.name}Card.tsx`,
+        content: `import Link from 'next/link';
+
+interface ${entity.name}CardProps {
+  item: Record<string, unknown>;
+}
+
+export default function ${entity.name}Card({ item }: ${entity.name}CardProps) {
+  return (
+    <Link
+      href={\`/${route}/\${String(item.id)}\`}
+      className="block rounded-lg border border-gray-200 bg-white p-4 shadow-sm hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
+    >
+      <div className="mb-2 flex items-center gap-2">
+        <span className="text-lg">${entity.icon}</span>
+        <span className="font-medium text-gray-900 dark:text-white">
+          {String(item.${entity.fields[0]?.name ?? 'id'})}
+        </span>
+      </div>
+      <div className="space-y-1">
+${fieldDisplay}
+      </div>
+    </Link>
+  );
+}
+`,
+    };
+}
+// =============================================================================
+// Form Component (Client Component)
+// =============================================================================
+function generateForm(model, entity) {
+    const route = appRoutePath(entity);
+    const btoRels = belongsToRels(entity);
+    // State for belongsTo dropdowns
+    const relStateLines = btoRels
+        .map((rel) => {
+        const varName = toCamelCase(rel.target) + 'Options';
+        return `  const [${varName}, set${rel.target}Options] = useState<Array<Record<string, unknown>>>([]);`;
+    })
+        .join('\n');
+    const relFetches = btoRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const targetRoute = appRoutePath(targetEntity);
+        return `    fetch('/api/${targetRoute}').then((r) => r.json()).then((res: { data: Array<Record<string, unknown>>; total: number }) => set${rel.target}Options(res.data));`;
+    })
+        .join('\n');
+    // Initial form state
+    const formFields = [];
+    for (const field of entity.fields) {
+        const defaultVal = field.type === 'boolean' ? 'false' : field.type === 'number' ? '0' : "''";
+        formFields.push(`    ${field.name}: ${defaultVal},`);
+    }
+    for (const rel of btoRels) {
+        formFields.push(`    ${fkFieldName(rel)}: 0,`);
+    }
+    // Form inputs
+    const formInputs = entity.fields.map((f) => generateFormInput(f)).join('\n');
+    const relInputs = btoRels
+        .map((rel) => {
+        const fk = fkFieldName(rel);
+        const optionsVar = toCamelCase(rel.target) + 'Options';
+        const firstField = model.entities.find((e) => e.name === rel.target)?.fields[0]?.name ?? 'id';
+        return `        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">${rel.target}</label>
+          <select
+            value={String(form.${fk})}
+            onChange={(e) => setForm({ ...form, ${fk}: Number(e.target.value) })}
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          >
+            <option value="0">Select ${rel.target}...</option>
+            {${optionsVar}.map((opt) => (
+              <option key={String(opt.id)} value={String(opt.id)}>{String(opt.${firstField})}</option>
+            ))}
+          </select>
+        </div>`;
+    })
+        .join('\n');
+    return {
+        path: `components/${route}/${entity.name}Form.tsx`,
+        content: `'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface ${entity.name}FormProps {
+  initialData?: Record<string, unknown>;
+}
+
+export default function ${entity.name}Form({ initialData }: ${entity.name}FormProps) {
+  const router = useRouter();
+  const isEdit = Boolean(initialData);
+
+  const [form, setForm] = useState({
+${formFields.join('\n')}
+  });
+${relStateLines ? '\n' + relStateLines : ''}
+
+  useEffect(() => {
+    if (initialData) {
+      setForm(initialData as typeof form);
+    }
+${relFetches}
+  }, [initialData]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const method = isEdit ? 'PUT' : 'POST';
+    const url = isEdit ? \`/api/${route}/\${String(initialData?.id)}\` : '/api/${route}';
+    await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(form),
+    });
+    router.push('/${route}');
+  };
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
+        {isEdit ? 'Edit' : 'New'} ${entity.name}
+      </h1>
+      <form onSubmit={handleSubmit} className="max-w-lg space-y-4">
+${formInputs}
+${relInputs}
+        <div className="flex gap-2 pt-4">
+          <button
+            type="submit"
+            className="rounded-lg bg-primary px-6 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            {isEdit ? 'Update' : 'Create'}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.push('/${route}')}
+            className="rounded-lg border border-gray-300 px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+`,
+    };
+}
+function generateFormInput(field) {
+    if (field.type === 'boolean') {
+        return `        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={Boolean(form.${field.name})}
+            onChange={(e) => setForm({ ...form, ${field.name}: e.target.checked })}
+            className="h-4 w-4 rounded border-gray-300"
+          />
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">${field.label}</label>
+        </div>`;
+    }
+    if (field.type === 'enum') {
+        const options = (field.enumValues ?? [])
+            .map((v) => `            <option value="${v}">${v}</option>`)
+            .join('\n');
+        return `        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">${field.label}</label>
+          <select
+            value={String(form.${field.name})}
+            onChange={(e) => setForm({ ...form, ${field.name}: e.target.value })}${field.required ? '\n            required' : ''}
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          >
+            <option value="">Select...</option>
+${options}
+          </select>
+        </div>`;
+    }
+    const type = inputType(field);
+    const valueExpr = field.type === 'number' ? `Number(form.${field.name})` : `String(form.${field.name})`;
+    const changeExpr = field.type === 'number'
+        ? `setForm({ ...form, ${field.name}: Number(e.target.value) })`
+        : `setForm({ ...form, ${field.name}: e.target.value })`;
+    return `        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">${field.label}</label>
+          <input
+            type="${type}"
+            value={${valueExpr}}
+            onChange={(e) => ${changeExpr}}${field.required ? '\n            required' : ''}
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          />
+        </div>`;
+}