@compilr-dev/factory 0.1.3 → 0.1.4

package/dist/factory/skill.js

@@ -33,7 +33,7 @@ You have access to these tools:
 Before building the model, understand the project:
 
 1. Check for existing context:
-   - Use \`project_document_get_by_type\` to look for PRD, architecture, and design docs
+   - Use \`project_document_get\` to look for PRD, architecture, and design docs
    - Read any existing Application Model with \`app_model_get\`
 
 2. If NO model exists, gather requirements from the user:

package/dist/factory/tools.js

@@ -9,8 +9,9 @@ import { createListToolkitsTool } from './list-toolkits-tool.js';
 import { defaultRegistry } from './registry.js';
 export function createFactoryTools(config) {
     const registry = config.registry ?? defaultRegistry;
+    const validToolkitIds = registry.list().map((t) => t.id);
     return [
-        ...createModelTools(config),
+        ...createModelTools({ ...config, validToolkitIds }),
         createScaffoldTool({ ...config, registry }),
         createListToolkitsTool(registry),
     ];

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  */
 export type { ApplicationModel, Entity, Field, FieldType, View, Relationship, RelationshipType, Identity, Layout, ShellType, Features, Theme, TechStack, Meta, } from './model/types.js';
 export { validateModel } from './model/schema.js';
-export type { ValidationError, ValidationResult } from './model/schema.js';
+export type { ValidationError, ValidationResult, ValidateModelOptions } from './model/schema.js';
 export { createDefaultModel, createDefaultEntity, createDefaultField } from './model/defaults.js';
 export { toPascalCase, toCamelCase, toKebabCase, toPlural, isPascalCase, isCamelCase, isValidHexColor, } from './model/naming.js';
 export type { FactoryFile, FactoryResult, FactoryToolkit } from './toolkits/types.js';

package/dist/model/operations-entity.js

@@ -3,7 +3,7 @@
  *
  * addEntity, updateEntity, removeEntity, renameEntity, reorderEntities
  */
-import { isPascalCase } from './naming.js';
+import { isPascalCase, toCamelCase } from './naming.js';
 function findEntity(model, name) {
     const entity = model.entities.find((e) => e.name === name);
     if (!entity) {
@@ -72,15 +72,22 @@ export function renameEntity(model, op) {
             if (entity.name === op.entity) {
                 entity = { ...entity, name: op.newName };
             }
-            // Update relationship targets
+            // Update relationship targets and cascade fieldName
             const hasTargetRef = entity.relationships.some((r) => r.target === op.entity);
             if (hasTargetRef) {
+                const oldDefaultFieldName = toCamelCase(op.entity) + 'Id';
+                const newDefaultFieldName = toCamelCase(op.newName) + 'Id';
                 entity = {
                     ...entity,
                     relationships: entity.relationships.map((r) => {
                         if (r.target !== op.entity)
                             return r;
-                        return { ...r, target: op.newName };
+                        const updated = { ...r, target: op.newName };
+                        // Cascade fieldName if it matches the old default pattern (or is undefined/implicit)
+                        if (r.fieldName === undefined || r.fieldName === oldDefaultFieldName) {
+                            updated.fieldName = newDefaultFieldName;
+                        }
+                        return updated;
                     }),
                 };
             }

package/dist/model/schema.d.ts

@@ -12,4 +12,7 @@ export interface ValidationResult {
     readonly valid: boolean;
     readonly errors: readonly ValidationError[];
 }
-export declare function validateModel(model: ApplicationModel): ValidationResult;
+export interface ValidateModelOptions {
+    readonly validToolkitIds?: readonly string[];
+}
+export declare function validateModel(model: ApplicationModel, options?: ValidateModelOptions): ValidationResult;

package/dist/model/schema.js

@@ -206,7 +206,7 @@ function validateTheme(model) {
     }
     return errors;
 }
-function validateTechStack(model) {
+function validateTechStack(model, validToolkitIds) {
     const errors = [];
     if (model.techStack.toolkit.trim().length === 0) {
         errors.push({
@@ -214,6 +214,12 @@ function validateTechStack(model) {
             message: 'Toolkit is required',
         });
     }
+    else if (validToolkitIds && !validToolkitIds.includes(model.techStack.toolkit)) {
+        errors.push({
+            path: 'techStack.toolkit',
+            message: `Unknown toolkit "${model.techStack.toolkit}". Valid toolkits: ${validToolkitIds.join(', ')}`,
+        });
+    }
     return errors;
 }
 function validateMeta(model) {
@@ -235,10 +241,7 @@ function validateMeta(model) {
     }
     return errors;
 }
-// =============================================================================
-// Public API
-// =============================================================================
-export function validateModel(model) {
+export function validateModel(model, options) {
     const errors = [];
     errors.push(...validateIdentity(model));
     // Entity uniqueness
@@ -260,7 +263,7 @@ export function validateModel(model) {
     errors.push(...validateLayout(model));
     errors.push(...validateFeatures(model));
     errors.push(...validateTheme(model));
-    errors.push(...validateTechStack(model));
+    errors.push(...validateTechStack(model, options?.validToolkitIds));
     errors.push(...validateMeta(model));
     return {
         valid: errors.length === 0,

package/dist/model/tools.d.ts

@@ -10,5 +10,6 @@ import type { PlatformContext } from '@compilr-dev/sdk';
 export interface ModelToolsConfig {
     readonly context: PlatformContext;
     readonly cwd?: string;
+    readonly validToolkitIds?: readonly string[];
 }
 export declare function createModelTools(config: ModelToolsConfig): Tool<never>[];

package/dist/model/tools.js

@@ -222,7 +222,9 @@ EXAMPLES:
                 // Apply
                 const updated = applyOperation(model, operation);
                 // Validate result
-                const validation = validateModel(updated);
+                const validation = validateModel(updated, {
+                    validToolkitIds: config.validToolkitIds,
+                });
                 if (!validation.valid) {
                     const msgs = validation.errors.map((e) => `${e.path}: ${e.message}`).join('; ');
                     return createErrorResult(`Operation would produce invalid model: ${msgs}`);
@@ -422,7 +424,7 @@ function createAppModelValidateTool(config) {
                         errors: [{ path: '', message: 'No Application Model found' }],
                     });
                 }
-                const result = validateModel(model);
+                const result = validateModel(model, { validToolkitIds: config.validToolkitIds });
                 return createSuccessResult({
                     valid: result.valid,
                     errors: result.errors,

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

@@ -7,16 +7,21 @@ import { toKebabCase, toCamelCase } from '../../model/naming.js';
 export function generateDashboard(model) {
     if (!model.features.dashboard)
         return [];
+    const typeImports = model.entities.map((e) => e.name).join(', ');
+    // State: counts + recent items
+    const stateLines = model.entities
+        .map((e) => {
+        const camel = toCamelCase(e.name);
+        return `  const [${camel}Count, set${e.name}Count] = useState(0);\n  const [recent${e.name}s, setRecent${e.name}s] = useState<${e.name}[]>([]);`;
+    })
+        .join('\n');
+    // Fetch: counts + recent items
     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)),`;
+        return `      fetch('${apiUrl}').then(r => r.json()).then((d: ${e.name}[]) => { set${e.name}Count(d.length); setRecent${e.name}s(d.slice(-5).reverse()); }),`;
     })
         .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();
@@ -27,6 +32,21 @@ export function generateDashboard(model) {
         </Link>`;
     })
         .join('\n');
+    // Find first string field per entity for display name
+    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 = '/' + toKebabCase(e.pluralName).toLowerCase();
+        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 to={\`${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: 'src/pages/Dashboard.tsx',
@@ -51,6 +71,22 @@ ${fetchCalls}
       <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/react-node/router.js

@@ -7,6 +7,7 @@ import { toKebabCase } from '../../model/naming.js';
 export function generateRouter(model) {
     const imports = [];
     const routes = [];
+    const topLevelRoutes = [];
     // Layout import
     imports.push("import Layout from './components/layout/Layout';");
     // Dashboard
@@ -28,6 +29,24 @@ export function generateRouter(model) {
         routes.push(`      { path: '${routeBase}/:id', element: <${entity.name}Detail /> },`);
         routes.push(`      { path: '${routeBase}/:id/edit', element: <${entity.name}Form /> },`);
     }
+    // Settings route (inside Layout)
+    if (model.features.settings) {
+        imports.push("import Settings from './pages/Settings';");
+        routes.push("      { path: 'settings', element: <Settings /> },");
+    }
+    // Profile route (inside Layout)
+    if (model.features.userProfiles) {
+        imports.push("import Profile from './pages/Profile';");
+        routes.push("      { path: 'profile', element: <Profile /> },");
+    }
+    // Auth routes (top-level, outside Layout)
+    if (model.features.auth) {
+        imports.push("import Login from './pages/Login';");
+        imports.push("import Register from './pages/Register';");
+        topLevelRoutes.push("  { path: '/login', element: <Login /> },");
+        topLevelRoutes.push("  { path: '/register', element: <Register /> },");
+    }
+    const topLevelSection = topLevelRoutes.length > 0 ? '\n' + topLevelRoutes.join('\n') : '';
     return [
         {
             path: 'src/router.tsx',
@@ -41,7 +60,7 @@ export const router = createBrowserRouter([
     children: [
 ${routes.join('\n')}
     ],
-  },
+  },${topLevelSection}
 ]);
 `,
         },

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

@@ -5,7 +5,22 @@
  */
 import { toKebabCase } from '../../model/naming.js';
 export function generateShellFiles(model) {
-    return [generateApp(model), generateLayout(model), generateSidebar(model), generateHeader(model)];
+    const files = [
+        generateApp(model),
+        generateLayout(model),
+        generateSidebar(model),
+        generateHeader(model),
+    ];
+    if (model.features.settings) {
+        files.push(generateSettingsPage());
+    }
+    if (model.features.auth) {
+        files.push(...generateAuthPages());
+    }
+    if (model.features.userProfiles) {
+        files.push(generateProfilePage());
+    }
+    return files;
 }
 function generateApp(_model) {
     return {
@@ -63,15 +78,21 @@ export default function Layout() {
     };
 }
 function generateSidebar(model) {
-    const navItems = model.entities
-        .map((e) => {
+    const items = [];
+    if (model.features.dashboard) {
+        items.push("  { label: '\u{1F4CA} Dashboard', path: '/' },");
+    }
+    for (const e of model.entities) {
         const path = '/' + toKebabCase(e.pluralName).toLowerCase();
-        return `  { label: '${e.icon} ${e.pluralName}', path: '${path}' },`;
-    })
-        .join('\n');
+        items.push(`  { label: '${e.icon} ${e.pluralName}', path: '${path}' },`);
+    }
+    if (model.features.settings) {
+        items.push("  { label: '\u2699\uFE0F Settings', path: '/settings' },");
+    }
+    const navItems = items.join('\n');
     return {
         path: 'src/components/layout/Sidebar.tsx',
-        content: `import { useState } from 'react';
+        content: `import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 const navItems = [
@@ -79,9 +100,15 @@ ${navItems}
 ];
 
 export default function Sidebar() {
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(window.innerWidth < 1024);
   const location = useLocation();
 
+  useEffect(() => {
+    const onResize = () => setCollapsed(window.innerWidth < 1024);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
   return (
     <aside
       className={\`\${collapsed ? 'w-16' : 'w-64'} flex flex-col border-r border-gray-200 bg-white transition-all dark:border-gray-700 dark:bg-gray-800\`}
@@ -121,6 +148,7 @@ export default function Sidebar() {
     };
 }
 function generateHeader(model) {
+    const hasSidebar = model.layout.shell === 'sidebar-header';
     const darkModeToggle = model.features.darkMode
         ? `
         <button
@@ -130,6 +158,10 @@ function generateHeader(model) {
           🌓
         </button>`
         : '';
+    const appNameSection = !hasSidebar
+        ? `
+      <span className="text-lg font-bold text-gray-900 dark:text-white">${model.identity.name}</span>`
+        : '';
     return {
         path: 'src/components/layout/Header.tsx',
         content: `import { useLocation } from 'react-router-dom';
@@ -141,7 +173,9 @@ export default function Header() {
 
   return (
     <header className="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6 dark:border-gray-700 dark:bg-gray-800">
-      <span className="text-sm text-gray-500 dark:text-gray-400">{breadcrumb}</span>
+      <div className="flex items-center gap-4">${appNameSection}
+        <span className="text-sm text-gray-500 dark:text-gray-400">{breadcrumb}</span>
+      </div>
       <div className="flex items-center gap-2">${darkModeToggle}
       </div>
     </header>
@@ -150,3 +184,105 @@ export default function Header() {
 `,
     };
 }
+function generateSettingsPage() {
+    return {
+        path: 'src/pages/Settings.tsx',
+        content: `export default function Settings() {
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Settings</h1>
+      <p className="text-gray-500 dark:text-gray-400">
+        Application settings will be configured here.
+      </p>
+    </div>
+  );
+}
+`,
+    };
+}
+function generateAuthPages() {
+    return [
+        {
+            path: 'src/pages/Login.tsx',
+            content: `import { Link } from 'react-router-dom';
+
+export default function Login() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
+      <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Login</h1>
+        <form className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
+            <input type="email" className="mt-1 block w-full rounded border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
+            <input type="password" className="mt-1 block w-full rounded border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+          </div>
+          <button type="submit" className="w-full rounded bg-primary px-4 py-2 text-white hover:bg-primary/90">
+            Sign In
+          </button>
+        </form>
+        <p className="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
+          Don&apos;t have an account? <Link to="/register" className="text-primary hover:underline">Register</Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+`,
+        },
+        {
+            path: 'src/pages/Register.tsx',
+            content: `import { Link } from 'react-router-dom';
+
+export default function Register() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
+      <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Register</h1>
+        <form className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
+            <input type="text" className="mt-1 block w-full rounded border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
+            <input type="email" className="mt-1 block w-full rounded border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
+            <input type="password" className="mt-1 block w-full rounded border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+          </div>
+          <button type="submit" className="w-full rounded bg-primary px-4 py-2 text-white hover:bg-primary/90">
+            Create Account
+          </button>
+        </form>
+        <p className="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
+          Already have an account? <Link to="/login" className="text-primary hover:underline">Login</Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+`,
+        },
+    ];
+}
+function generateProfilePage() {
+    return {
+        path: 'src/pages/Profile.tsx',
+        content: `export default function Profile() {
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Profile</h1>
+      <p className="text-gray-500 dark:text-gray-400">
+        User profile information will be displayed here.
+      </p>
+    </div>
+  );
+}
+`,
+    };
+}

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

@@ -32,12 +32,26 @@ VITE_API_URL=http://localhost:3001
     };
 }
 function generateReadme(model) {
+    let entitiesSection = '';
+    if (model.entities.length > 0) {
+        const entityLines = model.entities
+            .map((e) => {
+            const relCount = e.relationships.length;
+            const parts = [`${String(e.fields.length)} fields`];
+            if (relCount > 0) {
+                parts.push(`${String(relCount)} relationship${relCount > 1 ? 's' : ''}`);
+            }
+            return `- **${e.name}** (${e.icon}) — ${parts.join(', ')}`;
+        })
+            .join('\n');
+        entitiesSection = `\n## Entities\n\n${entityLines}\n`;
+    }
     return {
         path: 'README.md',
         content: `# ${model.identity.name}
 
 ${model.identity.description}
-
+${entitiesSection}
 ## Getting Started
 
 \`\`\`bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/factory",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "AI-driven application scaffolder for the compilr-dev ecosystem",
   "type": "module",
   "main": "dist/index.js",