@compilr-dev/factory 0.1.1

package/dist/toolkits/react-node/config.js

@@ -0,0 +1,120 @@
+/**
+ * React+Node Toolkit — Configuration Files Generator
+ *
+ * Generates: package.json, vite.config.ts, tailwind.config.js,
+ * tsconfig.json, postcss.config.js
+ */
+import { toKebabCase } from '../../model/naming.js';
+export function generateConfigFiles(model) {
+    const appSlug = toKebabCase(model.identity.name);
+    return [
+        generatePackageJson(appSlug),
+        generateViteConfig(),
+        generateTailwindConfig(model),
+        generateTsConfig(),
+        generatePostCssConfig(),
+    ];
+}
+function generatePackageJson(appSlug) {
+    const pkg = {
+        name: appSlug,
+        version: '0.1.0',
+        private: true,
+        type: 'module',
+        scripts: {
+            dev: 'concurrently "vite" "tsx watch server/index.ts"',
+            build: 'vite build',
+            preview: 'vite preview',
+            server: 'tsx watch server/index.ts',
+        },
+        dependencies: {
+            react: '^18.3.1',
+            'react-dom': '^18.3.1',
+            'react-router-dom': '^6.28.0',
+        },
+        devDependencies: {
+            '@types/cors': '^2.8.17',
+            '@types/express': '^5.0.0',
+            '@types/react': '^18.3.12',
+            '@types/react-dom': '^18.3.1',
+            '@vitejs/plugin-react': '^4.3.4',
+            autoprefixer: '^10.4.20',
+            concurrently: '^9.1.0',
+            cors: '^2.8.5',
+            express: '^4.21.1',
+            postcss: '^8.4.49',
+            tailwindcss: '^3.4.15',
+            tsx: '^4.19.2',
+            typescript: '^5.6.3',
+            vite: '^6.0.0',
+        },
+    };
+    return { path: 'package.json', content: JSON.stringify(pkg, null, 2) + '\n' };
+}
+function generateViteConfig() {
+    return {
+        path: 'vite.config.ts',
+        content: `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3001',
+    },
+  },
+});
+`,
+    };
+}
+function generateTailwindConfig(model) {
+    return {
+        path: 'tailwind.config.js',
+        content: `/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: '${model.theme.primaryColor}',
+      },
+    },
+  },
+  plugins: [],
+};
+`,
+    };
+}
+function generateTsConfig() {
+    const config = {
+        compilerOptions: {
+            target: 'ES2022',
+            module: 'ESNext',
+            moduleResolution: 'bundler',
+            jsx: 'react-jsx',
+            strict: true,
+            esModuleInterop: true,
+            skipLibCheck: true,
+            forceConsistentCasingInFileNames: true,
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+        },
+        include: ['src', 'server'],
+    };
+    return { path: 'tsconfig.json', content: JSON.stringify(config, null, 2) + '\n' };
+}
+function generatePostCssConfig() {
+    return {
+        path: 'postcss.config.js',
+        content: `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`,
+    };
+}

package/dist/toolkits/react-node/dashboard.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React+Node Toolkit — Dashboard Generator
+ *
+ * Generates Dashboard.tsx (only when features.dashboard = true).
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateDashboard(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/react-node/dashboard.js

@@ -0,0 +1,60 @@
+/**
+ * React+Node Toolkit — Dashboard Generator
+ *
+ * Generates Dashboard.tsx (only when features.dashboard = true).
+ */
+import { toKebabCase, toCamelCase } from '../../model/naming.js';
+export function generateDashboard(model) {
+    if (!model.features.dashboard)
+        return [];
+    const fetchCalls = model.entities
+        .map((e) => {
+        const apiUrl = '/api/' + toKebabCase(e.pluralName).toLowerCase();
+        return `      fetch('${apiUrl}').then(r => r.json()).then((d: ${e.name}[]) => set${e.name}Count(d.length)),`;
+    })
+        .join('\n');
+    const stateLines = model.entities
+        .map((e) => `  const [${toCamelCase(e.name)}Count, set${e.name}Count] = useState(0);`)
+        .join('\n');
+    const typeImports = model.entities.map((e) => e.name).join(', ');
+    const cards = model.entities
+        .map((e) => {
+        const path = '/' + toKebabCase(e.pluralName).toLowerCase();
+        return `        <Link to="${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');
+    return [
+        {
+            path: 'src/pages/Dashboard.tsx',
+            content: `import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import type { ${typeImports} } from '../types';
+
+export default function Dashboard() {
+${stateLines}
+
+  useEffect(() => {
+    Promise.all([
+${fetchCalls}
+    ]);
+  }, []);
+
+  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>
+    </div>
+  );
+}
+`,
+        },
+    ];
+}

package/dist/toolkits/react-node/entity.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React+Node Toolkit — Entity Pages Generator
+ *
+ * Generates per entity: List page, Detail page, Card component, Form component.
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateEntityFiles(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/react-node/entity.js

@@ -0,0 +1,469 @@
+/**
+ * React+Node Toolkit — Entity Pages Generator
+ *
+ * Generates per entity: List page, Detail page, Card component, Form component.
+ */
+import { toCamelCase, toKebabCase } from '../../model/naming.js';
+import { fkFieldName, belongsToRels, hasManyRels, inputType, apiPath } from './helpers.js';
+export function generateEntityFiles(model) {
+    return model.entities.flatMap((entity) => [
+        generateListPage(model, entity),
+        generateDetailPage(model, entity),
+        generateCard(entity),
+        generateForm(model, entity),
+    ]);
+}
+// =============================================================================
+// List Page
+// =============================================================================
+function generateListPage(model, entity) {
+    const api = apiPath(entity);
+    const routeBase = toKebabCase(entity.pluralName).toLowerCase();
+    const enumFields = entity.fields.filter((f) => f.type === 'enum' && f.enumValues?.length);
+    const filterDefs = enumFields
+        .map((f) => `  { label: '${f.label}', field: '${f.name}', values: [${(f.enumValues ?? []).map((v) => `'${v}'`).join(', ')}] },`)
+        .join('\n');
+    const hasFilters = enumFields.length > 0;
+    const tableHeaders = entity.fields
+        .slice(0, 5)
+        .map((f) => `              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">${f.label}</th>`)
+        .join('\n');
+    const tableCells = entity.fields
+        .slice(0, 5)
+        .map((f) => `              <td className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300">{String(item.${f.name})}</td>`)
+        .join('\n');
+    return {
+        path: `src/pages/${entity.name}List.tsx`,
+        content: `import { useState, useEffect, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import type { ${entity.name} } from '../types';
+import ViewToggle from '../components/shared/ViewToggle';
+import SearchBar from '../components/shared/SearchBar';${hasFilters ? "\nimport FilterBar from '../components/shared/FilterBar';" : ''}
+import ${entity.name}Card from '../components/${routeBase}/${entity.name}Card';
+
+${hasFilters ? `const filterOptions = [\n${filterDefs}\n];\n` : ''}
+export default function ${entity.name}List() {
+  const [items, setItems] = useState<${entity.name}[]>([]);
+  const [view, setView] = useState<'card' | 'list'>('card');
+  const [search, setSearch] = useState('');${hasFilters ? '\n  const [filters, setFilters] = useState<Record<string, string>>({});' : ''}
+
+  useEffect(() => {
+    fetch('${api}')
+      .then((r) => r.json())
+      .then((data: ${entity.name}[]) => setItems(data));
+  }, []);
+
+  const onSearch = useCallback((q: string) => setSearch(q), []);
+
+  const filtered = items.filter((item) => {
+    if (search) {
+      const q = search.toLowerCase();
+      const match = Object.values(item).some((v) =>
+        String(v).toLowerCase().includes(q),
+      );
+      if (!match) return false;
+    }${hasFilters
+            ? `
+    for (const [field, value] of Object.entries(filters)) {
+      if (value && String((item as Record<string, unknown>)[field]) !== value) return false;
+    }`
+            : ''}
+    return true;
+  });
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">${entity.icon} ${entity.pluralName}</h1>
+        <div className="flex items-center gap-3">
+          <ViewToggle view={view} onChange={setView} />
+          <Link
+            to="/${routeBase}/new"
+            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            + New ${entity.name}
+          </Link>
+        </div>
+      </div>
+
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <div className="w-64">
+          <SearchBar onSearch={onSearch} placeholder="Search ${entity.pluralName.toLowerCase()}..." />${hasFilters ? '\n        </div>\n        <FilterBar filters={filterOptions} active={filters} onChange={(f, v) => setFilters({ ...filters, [f]: v })} />' : '\n        </div>'}
+      </div>
+
+      {view === 'card' ? (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {filtered.map((item) => (
+            <${entity.name}Card key={item.id} item={item} />
+          ))}
+        </div>
+      ) : (
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b border-gray-200 dark:border-gray-700">
+${tableHeaders}
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((item) => (
+              <tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-800/50">
+${tableCells}
+                <td className="px-4 py-2">
+                  <Link to={\`/${routeBase}/\${String(item.id)}\`} className="text-sm text-primary hover:underline">View</Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+`,
+    };
+}
+// =============================================================================
+// Detail Page
+// =============================================================================
+function generateDetailPage(model, entity) {
+    const api = apiPath(entity);
+    const routeBase = toKebabCase(entity.pluralName).toLowerCase();
+    const fieldRows = entity.fields
+        .map((f) => `          <div>
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${f.label}</dt>
+            <dd className="mt-1 text-gray-900 dark:text-white">{String(item.${f.name}${f.required ? '' : " ?? '—'"})}</dd>
+          </div>`)
+        .join('\n');
+    const btoRels = belongsToRels(entity);
+    const hmRels = hasManyRels(entity);
+    const relLinks = btoRels
+        .map((rel) => {
+        const fk = fkFieldName(rel);
+        const targetRoute = toKebabCase(model.entities.find((e) => e.name === rel.target)?.pluralName ?? rel.target).toLowerCase();
+        return `          <div>
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${rel.target}</dt>
+            <dd className="mt-1">
+              <Link to={\`/${targetRoute}/\${String(item.${fk})}\`} className="text-primary hover:underline">
+                View ${rel.target}
+              </Link>
+            </dd>
+          </div>`;
+    })
+        .join('\n');
+    const hasManySection = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const stateVar = toCamelCase(targetEntity.pluralName);
+        return `
+  const [${stateVar}, set${targetEntity.pluralName}] = useState<${rel.target}[]>([]);`;
+    })
+        .join('');
+    const hasManyFetches = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const fetchApi = apiPath(targetEntity);
+        const fk = fkFieldName(targetEntity.relationships.find((r) => r.type === 'belongsTo' && r.target === entity.name) ?? {
+            type: 'belongsTo',
+            target: entity.name,
+        });
+        return `
+      fetch('${fetchApi}')
+        .then((r) => r.json())
+        .then((data: ${rel.target}[]) => set${targetEntity.pluralName}(data.filter((d) => d.${fk} === Number(id))));`;
+    })
+        .join('');
+    const hasManyImports = hmRels.map((rel) => rel.target).join(', ');
+    const hasManyTypeImport = hmRels.length > 0 ? `, ${hasManyImports}` : '';
+    const hasManyRender = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const targetRoute = toKebabCase(targetEntity.pluralName).toLowerCase();
+        const varName = toCamelCase(targetEntity.pluralName);
+        const firstField = targetEntity.fields[0]?.name ?? 'id';
+        return `
+      <div className="mt-8">
+        <h2 className="mb-4 text-lg font-bold text-gray-900 dark:text-white">${targetEntity.icon} ${targetEntity.pluralName}</h2>
+        <div className="space-y-2">
+          {${varName}.map((rel) => (
+            <Link
+              key={rel.id}
+              to={\`/${targetRoute}/\${String(rel.id)}\`}
+              className="block rounded-lg border border-gray-200 p-3 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+            >
+              {String(rel.${firstField})}
+            </Link>
+          ))}
+          {${varName}.length === 0 && (
+            <p className="text-sm text-gray-500">No ${targetEntity.pluralName.toLowerCase()} found.</p>
+          )}
+        </div>
+      </div>`;
+    })
+        .join('');
+    return {
+        path: `src/pages/${entity.name}Detail.tsx`,
+        content: `import { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import type { ${entity.name}${hasManyTypeImport} } from '../types';
+
+export default function ${entity.name}Detail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [item, setItem] = useState<${entity.name} | null>(null);${hasManySection}
+
+  useEffect(() => {
+    fetch(\`${api}/\${id as string}\`)
+      .then((r) => r.json())
+      .then((data: ${entity.name}) => setItem(data));${hasManyFetches}
+  }, [id]);
+
+  if (!item) return <div className="p-6">Loading...</div>;
+
+  const handleDelete = () => {
+    if (!confirm('Are you sure you want to delete this ${entity.name.toLowerCase()}?')) return;
+    fetch(\`${api}/\${id as string}\`, { method: 'DELETE' })
+      .then(() => navigate('/${routeBase}'));
+  };
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">${entity.icon} ${entity.name} Detail</h1>
+        <div className="flex gap-2">
+          <Link
+            to={\`/${routeBase}/\${id as string}/edit\`}
+            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            Edit
+          </Link>
+          <button
+            onClick={handleDelete}
+            className="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+
+      <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+${fieldRows}
+${relLinks}
+      </dl>${hasManyRender}
+    </div>
+  );
+}
+`,
+    };
+}
+// =============================================================================
+// Card Component
+// =============================================================================
+function generateCard(entity) {
+    const routeBase = toKebabCase(entity.pluralName).toLowerCase();
+    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: `src/components/${routeBase}/${entity.name}Card.tsx`,
+        content: `import { Link } from 'react-router-dom';
+import type { ${entity.name} } from '../../types';
+
+interface ${entity.name}CardProps {
+  item: ${entity.name};
+}
+
+export default function ${entity.name}Card({ item }: ${entity.name}CardProps) {
+  return (
+    <Link
+      to={\`/${routeBase}/\${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
+// =============================================================================
+function generateForm(model, entity) {
+    const routeBase = toKebabCase(entity.pluralName).toLowerCase();
+    const api = apiPath(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<${rel.target}[]>([]);`;
+    })
+        .join('\n');
+    const relFetches = btoRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const targetApi = apiPath(targetEntity);
+        return `    fetch('${targetApi}').then((r) => r.json()).then((d: ${rel.target}[]) => set${rel.target}Options(d));`;
+    })
+        .join('\n');
+    const relTypeImports = btoRels.map((r) => r.target);
+    const allImports = [entity.name, ...relTypeImports];
+    // 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={opt.id} value={opt.id}>{String(opt.${firstField})}</option>
+            ))}
+          </select>
+        </div>`;
+    })
+        .join('\n');
+    return {
+        path: `src/components/${routeBase}/${entity.name}Form.tsx`,
+        content: `import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import type { ${allImports.join(', ')} } from '../../types';
+
+export default function ${entity.name}Form() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const [form, setForm] = useState({
+${formFields.join('\n')}
+  });
+${relStateLines ? '\n' + relStateLines : ''}
+
+  useEffect(() => {
+    if (isEdit) {
+      fetch(\`${api}/\${id as string}\`)
+        .then((r) => r.json())
+        .then((data: ${entity.name}) => setForm(data as typeof form));
+    }
+${relFetches}
+  }, [id, isEdit]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const method = isEdit ? 'PUT' : 'POST';
+    const url = isEdit ? \`${api}/\${id as string}\` : '${api}';
+    fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(form),
+    }).then(() => navigate('/${routeBase}'));
+  };
+
+  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={() => navigate('/${routeBase}')}
+            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>`;
+}