npm - @kozojs/cli - Versions diffs - 0.1.5 → 0.1.6 - Mend

@kozojs/cli 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/lib/index.js +1179 -18
package/package.json +1 -1

package/lib/index.js CHANGED Viewed

@@ -35,11 +35,23 @@ var import_execa = require("execa");
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_node_path = __toESM(require("path"));
 async function scaffoldProject(options) {
-  const { projectName, database, packageSource, template } = options;
+  const { projectName, runtime, database, packageSource, template, frontend, extras } = options;
   const projectDir = import_node_path.default.resolve(process.cwd(), projectName);
-  const kozoCoreDep = packageSource === "local" ? "workspace:*" : "^0.1.0";
+  const kozoCoreDep = packageSource === "local" ? "workspace:*" : "^0.2.0";
+  if (frontend !== "none") {
+    await scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, runtime, database, frontend, extras, template);
+    return;
+  }
   if (template === "complete") {
-    await scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep);
+    await scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep, runtime);
+    if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
+    if (extras.includes("github-actions")) await createGitHubActions(projectDir);
+    return;
+  }
+  if (template === "api-only") {
+    await scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, runtime);
+    if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
+    if (extras.includes("github-actions")) await createGitHubActions(projectDir);
     return;
   }
   await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src", "routes"));
@@ -399,7 +411,7 @@ export default async ({ body, services: { db } }: HandlerContext<Body>) => {
 `;
   await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "routes", "users", "post.ts"), postUsersRoute);
 }
-async function scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep) {
+async function scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep, runtime) {
   await import_fs_extra.default.ensureDir(projectDir);
   await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src"));
   await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src", "schemas"));
@@ -1073,6 +1085,1127 @@ export function registerPostRoutes(app: Kozo) {
 `;
   await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "routes", "posts", "index.ts"), postRoutes);
 }
+async function scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, runtime) {
+  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src"));
+  const packageJson = {
+    name: projectName,
+    version: "1.0.0",
+    type: "module",
+    scripts: {
+      dev: runtime === "bun" ? "bun --watch src/index.ts" : "tsx watch src/index.ts",
+      build: "tsc",
+      start: runtime === "bun" ? "bun src/index.ts" : "node dist/index.js"
+    },
+    dependencies: {
+      "@kozojs/core": kozoCoreDep,
+      hono: "^4.6.0",
+      zod: "^3.23.0",
+      ...runtime === "node" && { "@hono/node-server": "^1.13.0" }
+    },
+    devDependencies: {
+      "@types/node": "^22.0.0",
+      ...runtime !== "bun" && { tsx: "^4.19.0" },
+      typescript: "^5.6.0"
+    }
+  };
+  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "package.json"), packageJson, { spaces: 2 });
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+      rootDir: "src"
+    },
+    include: ["src/**/*"],
+    exclude: ["node_modules", "dist"]
+  };
+  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+  const indexTs = `import { createKozo } from '@kozojs/core';
+import { z } from 'zod';
+const app = createKozo({ port: 3000 });
+// Health check
+app.get('/health', {}, () => ({
+  status: 'ok',
+  timestamp: new Date().toISOString(),
+}));
+// Example endpoint with validation
+app.get('/hello/:name', {
+  params: z.object({ name: z.string() }),
+  response: z.object({ message: z.string() }),
+}, (c) => ({
+  message: \`Hello, \${c.params.name}!\`,
+}));
+console.log('\u{1F525} Kozo running on http://localhost:3000');
+app.listen();
+`;
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "index.ts"), indexTs);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".gitignore"), "node_modules/\ndist/\n.env\n");
+}
+async function createDockerfile(projectDir, runtime) {
+  const dockerfile = runtime === "bun" ? `FROM oven/bun:1 as builder
+WORKDIR /app
+COPY package.json bun.lockb* ./
+RUN bun install --frozen-lockfile
+COPY . .
+RUN bun run build
+FROM oven/bun:1-slim
+WORKDIR /app
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package.json ./
+EXPOSE 3000
+CMD ["bun", "dist/index.js"]
+` : `FROM node:20-alpine as builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+FROM node:20-alpine
+WORKDIR /app
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package*.json ./
+RUN npm ci --omit=dev
+EXPOSE 3000
+CMD ["node", "dist/index.js"]
+`;
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "Dockerfile"), dockerfile);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".dockerignore"), "node_modules\ndist\n.git\n");
+}
+async function createGitHubActions(projectDir) {
+  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, ".github", "workflows"));
+  const workflow = `name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build
+      - run: npm test --if-present
+`;
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".github", "workflows", "ci.yml"), workflow);
+}
+async function scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, runtime, database, frontend, extras, template) {
+  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "api", "src", "routes"));
+  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "api", "src", "data"));
+  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "web", "src", "lib"));
+  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, ".vscode"));
+  const rootPackageJson = {
+    name: projectName,
+    private: true,
+    scripts: {
+      dev: "pnpm run --parallel dev",
+      build: "pnpm run --recursive build"
+    }
+  };
+  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "package.json"), rootPackageJson, { spaces: 2 });
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "pnpm-workspace.yaml"), `packages:
+  - 'apps/*'
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".gitignore"), "node_modules/\ndist/\n.env\n*.log\n");
+  await scaffoldFullstackApi(projectDir, projectName, kozoCoreDep, runtime);
+  await scaffoldFullstackWeb(projectDir, projectName, frontend);
+  await scaffoldFullstackReadme(projectDir, projectName);
+  if (extras.includes("docker")) await createDockerfile(import_node_path.default.join(projectDir, "apps", "api"), runtime);
+  if (extras.includes("github-actions")) await createGitHubActions(projectDir);
+}
+async function scaffoldFullstackApi(projectDir, projectName, kozoCoreDep, runtime) {
+  const apiDir = import_node_path.default.join(projectDir, "apps", "api");
+  const apiPackageJson = {
+    name: `@${projectName}/api`,
+    version: "1.0.0",
+    type: "module",
+    scripts: {
+      dev: runtime === "bun" ? "bun --watch src/index.ts" : "tsx watch src/index.ts",
+      build: "tsc"
+    },
+    dependencies: {
+      "@kozojs/core": kozoCoreDep,
+      hono: "^4.6.0",
+      zod: "^3.23.0",
+      ...runtime === "node" && { "@hono/node-server": "^1.13.0" }
+    },
+    devDependencies: {
+      "@types/node": "^22.0.0",
+      ...runtime !== "bun" && { tsx: "^4.19.0" },
+      typescript: "^5.6.0"
+    }
+  };
+  await import_fs_extra.default.writeJSON(import_node_path.default.join(apiDir, "package.json"), apiPackageJson, { spaces: 2 });
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+      rootDir: "src"
+    },
+    include: ["src/**/*"],
+    exclude: ["node_modules", "dist"]
+  };
+  await import_fs_extra.default.writeJSON(import_node_path.default.join(apiDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "index.ts"), `import { createKozo } from '@kozojs/core';
+import { registerRoutes } from './routes';
+const app = createKozo({ port: 3000 });
+registerRoutes(app);
+export type AppType = typeof app;
+console.log('\u{1F525} ${projectName} API running on http://localhost:3000');
+console.log('\u{1F4DA} Endpoints: /api/health, /api/users, /api/posts, /api/tasks, /api/stats');
+app.listen();
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "data", "index.ts"), `import { z } from 'zod';
+export const UserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  email: z.string().email(),
+  role: z.enum(['admin', 'user']),
+  createdAt: z.string().optional(),
+});
+export const PostSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  content: z.string(),
+  authorId: z.string(),
+  published: z.boolean(),
+  createdAt: z.string().optional(),
+});
+export const TaskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean(),
+  priority: z.enum(['low', 'medium', 'high']),
+  createdAt: z.string(),
+});
+export const users: z.infer<typeof UserSchema>[] = [
+  { id: '1', name: 'Alice', email: 'alice@example.com', role: 'admin', createdAt: new Date().toISOString() },
+  { id: '2', name: 'Bob', email: 'bob@example.com', role: 'user', createdAt: new Date().toISOString() },
+];
+export const posts: z.infer<typeof PostSchema>[] = [
+  { id: '1', title: 'Hello World', content: 'First post!', authorId: '1', published: true, createdAt: new Date().toISOString() },
+  { id: '2', title: 'Draft', content: 'Work in progress', authorId: '2', published: false, createdAt: new Date().toISOString() },
+];
+export const tasks: z.infer<typeof TaskSchema>[] = [
+  { id: '1', title: 'Setup project', completed: true, priority: 'high', createdAt: new Date().toISOString() },
+  { id: '2', title: 'Write tests', completed: false, priority: 'medium', createdAt: new Date().toISOString() },
+  { id: '3', title: 'Deploy', completed: false, priority: 'low', createdAt: new Date().toISOString() },
+];
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "index.ts"), `import type { Kozo } from '@kozojs/core';
+import { registerHealthRoutes } from './health';
+import { registerUserRoutes } from './users';
+import { registerPostRoutes } from './posts';
+import { registerTaskRoutes } from './tasks';
+import { registerToolRoutes } from './tools';
+export function registerRoutes(app: Kozo) {
+  registerHealthRoutes(app);
+  registerUserRoutes(app);
+  registerPostRoutes(app);
+  registerTaskRoutes(app);
+  registerToolRoutes(app);
+}
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "health.ts"), `import type { Kozo } from '@kozojs/core';
+import { users, posts, tasks } from '../data';
+export function registerHealthRoutes(app: Kozo) {
+  app.get('/api/health', {}, () => ({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+    uptime: process.uptime(),
+  }));
+  app.get('/api/stats', {}, () => ({
+    users: users.length,
+    posts: posts.length,
+    tasks: tasks.length,
+    publishedPosts: posts.filter(p => p.published).length,
+    completedTasks: tasks.filter(t => t.completed).length,
+  }));
+}
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "users.ts"), `import type { Kozo } from '@kozojs/core';
+import { z } from 'zod';
+import { users, UserSchema } from '../data';
+export function registerUserRoutes(app: Kozo) {
+  app.get('/api/users', {
+    response: z.array(UserSchema),
+  }, () => users);
+  app.get('/api/users/:id', {
+    params: z.object({ id: z.string() }),
+    response: UserSchema,
+  }, (c) => {
+    const user = users.find(u => u.id === c.params.id);
+    if (!user) throw new Error('User not found');
+    return user;
+  });
+  app.post('/api/users', {
+    body: z.object({
+      name: z.string().min(1),
+      email: z.string().email(),
+      role: z.enum(['admin', 'user']).optional(),
+    }),
+    response: UserSchema,
+  }, (c) => {
+    const newUser = {
+      id: String(Date.now()),
+      name: c.body.name,
+      email: c.body.email,
+      role: c.body.role || 'user' as const,
+      createdAt: new Date().toISOString(),
+    };
+    users.push(newUser);
+    return newUser;
+  });
+  app.put('/api/users/:id', {
+    params: z.object({ id: z.string() }),
+    body: z.object({
+      name: z.string().min(1).optional(),
+      email: z.string().email().optional(),
+      role: z.enum(['admin', 'user']).optional(),
+    }),
+    response: UserSchema,
+  }, (c) => {
+    const idx = users.findIndex(u => u.id === c.params.id);
+    if (idx === -1) throw new Error('User not found');
+    users[idx] = { ...users[idx], ...c.body };
+    return users[idx];
+  });
+  app.delete('/api/users/:id', {
+    params: z.object({ id: z.string() }),
+  }, (c) => {
+    const idx = users.findIndex(u => u.id === c.params.id);
+    if (idx === -1) throw new Error('User not found');
+    users.splice(idx, 1);
+    return { success: true, message: 'User deleted' };
+  });
+}
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "posts.ts"), `import type { Kozo } from '@kozojs/core';
+import { z } from 'zod';
+import { posts, PostSchema } from '../data';
+export function registerPostRoutes(app: Kozo) {
+  app.get('/api/posts', {
+    query: z.object({ published: z.coerce.boolean().optional() }),
+    response: z.array(PostSchema),
+  }, (c) => {
+    if (c.query.published !== undefined) {
+      return posts.filter(p => p.published === c.query.published);
+    }
+    return posts;
+  });
+  app.get('/api/posts/:id', {
+    params: z.object({ id: z.string() }),
+    response: PostSchema,
+  }, (c) => {
+    const post = posts.find(p => p.id === c.params.id);
+    if (!post) throw new Error('Post not found');
+    return post;
+  });
+  app.post('/api/posts', {
+    body: z.object({
+      title: z.string().min(1),
+      content: z.string(),
+      authorId: z.string(),
+      published: z.boolean().optional(),
+    }),
+    response: PostSchema,
+  }, (c) => {
+    const newPost = {
+      id: String(Date.now()),
+      title: c.body.title,
+      content: c.body.content,
+      authorId: c.body.authorId,
+      published: c.body.published ?? false,
+      createdAt: new Date().toISOString(),
+    };
+    posts.push(newPost);
+    return newPost;
+  });
+  app.put('/api/posts/:id', {
+    params: z.object({ id: z.string() }),
+    body: z.object({
+      title: z.string().min(1).optional(),
+      content: z.string().optional(),
+      published: z.boolean().optional(),
+    }),
+    response: PostSchema,
+  }, (c) => {
+    const idx = posts.findIndex(p => p.id === c.params.id);
+    if (idx === -1) throw new Error('Post not found');
+    posts[idx] = { ...posts[idx], ...c.body };
+    return posts[idx];
+  });
+  app.delete('/api/posts/:id', {
+    params: z.object({ id: z.string() }),
+  }, (c) => {
+    const idx = posts.findIndex(p => p.id === c.params.id);
+    if (idx === -1) throw new Error('Post not found');
+    posts.splice(idx, 1);
+    return { success: true, message: 'Post deleted' };
+  });
+}
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "tasks.ts"), `import type { Kozo } from '@kozojs/core';
+import { z } from 'zod';
+import { tasks, TaskSchema } from '../data';
+export function registerTaskRoutes(app: Kozo) {
+  app.get('/api/tasks', {
+    query: z.object({
+      completed: z.coerce.boolean().optional(),
+      priority: z.enum(['low', 'medium', 'high']).optional(),
+    }),
+    response: z.array(TaskSchema),
+  }, (c) => {
+    let result = [...tasks];
+    if (c.query.completed !== undefined) {
+      result = result.filter(t => t.completed === c.query.completed);
+    }
+    if (c.query.priority) {
+      result = result.filter(t => t.priority === c.query.priority);
+    }
+    return result;
+  });
+  app.get('/api/tasks/:id', {
+    params: z.object({ id: z.string() }),
+    response: TaskSchema,
+  }, (c) => {
+    const task = tasks.find(t => t.id === c.params.id);
+    if (!task) throw new Error('Task not found');
+    return task;
+  });
+  app.post('/api/tasks', {
+    body: z.object({
+      title: z.string().min(1),
+      priority: z.enum(['low', 'medium', 'high']).optional(),
+    }),
+    response: TaskSchema,
+  }, (c) => {
+    const newTask = {
+      id: String(Date.now()),
+      title: c.body.title,
+      completed: false,
+      priority: c.body.priority || 'medium' as const,
+      createdAt: new Date().toISOString(),
+    };
+    tasks.push(newTask);
+    return newTask;
+  });
+  app.put('/api/tasks/:id', {
+    params: z.object({ id: z.string() }),
+    body: z.object({
+      title: z.string().min(1).optional(),
+      completed: z.boolean().optional(),
+      priority: z.enum(['low', 'medium', 'high']).optional(),
+    }),
+    response: TaskSchema,
+  }, (c) => {
+    const idx = tasks.findIndex(t => t.id === c.params.id);
+    if (idx === -1) throw new Error('Task not found');
+    tasks[idx] = { ...tasks[idx], ...c.body };
+    return tasks[idx];
+  });
+  app.patch('/api/tasks/:id/toggle', {
+    params: z.object({ id: z.string() }),
+    response: TaskSchema,
+  }, (c) => {
+    const idx = tasks.findIndex(t => t.id === c.params.id);
+    if (idx === -1) throw new Error('Task not found');
+    tasks[idx].completed = !tasks[idx].completed;
+    return tasks[idx];
+  });
+  app.delete('/api/tasks/:id', {
+    params: z.object({ id: z.string() }),
+  }, (c) => {
+    const idx = tasks.findIndex(t => t.id === c.params.id);
+    if (idx === -1) throw new Error('Task not found');
+    tasks.splice(idx, 1);
+    return { success: true, message: 'Task deleted' };
+  });
+}
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "tools.ts"), `import type { Kozo } from '@kozojs/core';
+import { z } from 'zod';
+export function registerToolRoutes(app: Kozo) {
+  app.get('/api/echo', {
+    query: z.object({ message: z.string() }),
+  }, (c) => ({
+    echo: c.query.message,
+    timestamp: new Date().toISOString(),
+  }));
+  app.post('/api/validate', {
+    body: z.object({
+      email: z.string().email(),
+      age: z.number().min(0).max(150),
+    }),
+  }, (c) => ({
+    valid: true,
+    data: c.body,
+  }));
+}
+`);
+}
+async function scaffoldFullstackWeb(projectDir, projectName, frontend) {
+  const webDir = import_node_path.default.join(projectDir, "apps", "web");
+  const packageJson = {
+    name: `@${projectName}/web`,
+    version: "1.0.0",
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview"
+    },
+    dependencies: {
+      react: "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@tanstack/react-query": "^5.0.0",
+      hono: "^4.6.0",
+      "lucide-react": "^0.460.0"
+    },
+    devDependencies: {
+      "@types/react": "^18.2.0",
+      "@types/react-dom": "^18.2.0",
+      "@vitejs/plugin-react": "^4.2.0",
+      typescript: "^5.6.0",
+      vite: "^5.0.0",
+      "@tailwindcss/vite": "^4.0.0",
+      tailwindcss: "^4.0.0"
+    }
+  };
+  await import_fs_extra.default.writeJSON(import_node_path.default.join(webDir, "package.json"), packageJson, { spaces: 2 });
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "vite.config.ts"), `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+    },
+  },
+});
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "index.html"), `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${projectName}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "index.css"), `@import "tailwindcss";
+body {
+  background-color: rgb(15 23 42);
+  color: rgb(241 245 249);
+}
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "lib", "client.ts"), `import { hc } from 'hono/client';
+import type { AppType } from '@${projectName}/api';
+// Type-safe RPC client - changes in API break frontend at compile time!
+export const client = hc<AppType>('/');
+/* Usage:
+const res = await client.api.users.$get();
+const users = await res.json(); // Fully typed!
+*/
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "main.tsx"), `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import App from './App';
+import './index.css';
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>
+);
+`);
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "App.tsx"), generateFullReactApp(projectName));
+}
+function generateFullReactApp(projectName) {
+  return `import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  Activity, Users, FileText, CheckSquare, Send, Trash2, Edit2,
+  Plus, Server, Zap, Heart
+} from 'lucide-react';
+const API_BASE = '/api';
+type Tab = 'health' | 'users' | 'posts' | 'tasks' | 'tools';
+interface ApiResponse {
+  status: number;
+  data: unknown;
+  time: number;
+}
+async function fetchApi(endpoint: string, options?: RequestInit): Promise<ApiResponse> {
+  const start = performance.now();
+  const res = await fetch(\`\${API_BASE}\${endpoint}\`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  });
+  const time = Math.round(performance.now() - start);
+  const data = await res.json();
+  return { status: res.status, data, time };
+}
+function Badge({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'success' | 'warning' | 'error' }) {
+  const colors = {
+    default: 'bg-slate-700 text-slate-200',
+    success: 'bg-emerald-900 text-emerald-300',
+    warning: 'bg-amber-900 text-amber-300',
+    error: 'bg-red-900 text-red-300',
+  };
+  return <span className={\`px-2 py-0.5 rounded text-xs font-medium \${colors[variant]}\`}>{children}</span>;
+}
+function Card({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
+  return (
+    <div className="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
+      <div className="px-4 py-3 border-b border-slate-700 flex items-center gap-2">
+        <Icon className="w-4 h-4 text-blue-400" />
+        <h3 className="font-medium text-slate-200">{title}</h3>
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  );
+}
+function ResponseDisplay({ response, loading }: { response: ApiResponse | null; loading: boolean }) {
+  if (loading) return <div className="text-slate-400 text-sm">Loading...</div>;
+  if (!response) return null;
+  const isSuccess = response.status >= 200 && response.status < 300;
+  return (
+    <div className="mt-3 p-3 bg-slate-900 rounded border border-slate-700">
+      <div className="flex items-center gap-2 mb-2">
+        <Badge variant={isSuccess ? 'success' : 'error'}>{response.status}</Badge>
+        <span className="text-xs text-slate-500">{response.time}ms</span>
+      </div>
+      <pre className="text-xs text-slate-300 overflow-auto max-h-48">
+        {JSON.stringify(response.data, null, 2)}
+      </pre>
+    </div>
+  );
+}
+function HealthPanel() {
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const checkHealth = async () => {
+    setLoading(true);
+    const res = await fetchApi('/health');
+    setResponse(res);
+    setLoading(false);
+  };
+  const checkStats = async () => {
+    setLoading(true);
+    const res = await fetchApi('/stats');
+    setResponse(res);
+    setLoading(false);
+  };
+  return (
+    <Card title="Health & Stats" icon={Heart}>
+      <div className="flex gap-2 mb-3">
+        <button onClick={checkHealth} className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded text-sm font-medium transition">
+          Check Health
+        </button>
+        <button onClick={checkStats} className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition">
+          Get Stats
+        </button>
+      </div>
+      <ResponseDisplay response={response} loading={loading} />
+    </Card>
+  );
+}
+function UsersPanel() {
+  const queryClient = useQueryClient();
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [newUser, setNewUser] = useState({ name: '', email: '', role: 'user' as const });
+  const { data: users, isLoading } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => {
+      const res = await fetchApi('/users');
+      return res.data as Array<{ id: string; name: string; email: string; role: string }>;
+    },
+  });
+  const createUser = async () => {
+    if (!newUser.name || !newUser.email) return;
+    setLoading(true);
+    const res = await fetchApi('/users', {
+      method: 'POST',
+      body: JSON.stringify(newUser),
+    });
+    setResponse(res);
+    setLoading(false);
+    setNewUser({ name: '', email: '', role: 'user' });
+    queryClient.invalidateQueries({ queryKey: ['users'] });
+  };
+  const deleteUser = async (id: string) => {
+    setLoading(true);
+    const res = await fetchApi(\`/users/\${id}\`, { method: 'DELETE' });
+    setResponse(res);
+    setLoading(false);
+    queryClient.invalidateQueries({ queryKey: ['users'] });
+  };
+  return (
+    <Card title="Users" icon={Users}>
+      <div className="space-y-4">
+        <div className="grid grid-cols-3 gap-2">
+          <input
+            placeholder="Name"
+            value={newUser.name}
+            onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+          />
+          <input
+            placeholder="Email"
+            value={newUser.email}
+            onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+          />
+          <button onClick={createUser} disabled={loading} className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded text-sm font-medium transition flex items-center justify-center gap-1">
+            <Plus className="w-4 h-4" /> Add User
+          </button>
+        </div>
+        <div className="space-y-2">
+          {isLoading ? (
+            <div className="text-slate-400 text-sm">Loading users...</div>
+          ) : (
+            users?.map((user) => (
+              <div key={user.id} className="flex items-center justify-between p-2 bg-slate-900 rounded border border-slate-700">
+                <div>
+                  <span className="font-medium">{user.name}</span>
+                  <span className="text-slate-400 text-sm ml-2">{user.email}</span>
+                  <Badge variant={user.role === 'admin' ? 'warning' : 'default'}>{user.role}</Badge>
+                </div>
+                <button onClick={() => deleteUser(user.id)} className="p-1 text-red-400 hover:text-red-300 transition">
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+        <ResponseDisplay response={response} loading={loading} />
+      </div>
+    </Card>
+  );
+}
+function TasksPanel() {
+  const queryClient = useQueryClient();
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [newTask, setNewTask] = useState({ title: '', priority: 'medium' as const });
+  const { data: tasks, isLoading } = useQuery({
+    queryKey: ['tasks'],
+    queryFn: async () => {
+      const res = await fetchApi('/tasks');
+      return res.data as Array<{ id: string; title: string; completed: boolean; priority: string }>;
+    },
+  });
+  const createTask = async () => {
+    if (!newTask.title) return;
+    setLoading(true);
+    const res = await fetchApi('/tasks', {
+      method: 'POST',
+      body: JSON.stringify(newTask),
+    });
+    setResponse(res);
+    setLoading(false);
+    setNewTask({ title: '', priority: 'medium' });
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+  };
+  const toggleTask = async (id: string) => {
+    setLoading(true);
+    const res = await fetchApi(\`/tasks/\${id}/toggle\`, { method: 'PATCH' });
+    setResponse(res);
+    setLoading(false);
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+  };
+  const deleteTask = async (id: string) => {
+    setLoading(true);
+    const res = await fetchApi(\`/tasks/\${id}\`, { method: 'DELETE' });
+    setResponse(res);
+    setLoading(false);
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+  };
+  const priorityColor = (p: string) => {
+    switch (p) {
+      case 'high': return 'error';
+      case 'medium': return 'warning';
+      default: return 'default';
+    }
+  };
+  return (
+    <Card title="Tasks" icon={CheckSquare}>
+      <div className="space-y-4">
+        <div className="grid grid-cols-3 gap-2">
+          <input
+            placeholder="Task title"
+            value={newTask.title}
+            onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+          />
+          <select
+            value={newTask.priority}
+            onChange={(e) => setNewTask({ ...newTask, priority: e.target.value as 'low' | 'medium' | 'high' })}
+            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+          >
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+          <button onClick={createTask} disabled={loading} className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded text-sm font-medium transition flex items-center justify-center gap-1">
+            <Plus className="w-4 h-4" /> Add Task
+          </button>
+        </div>
+        <div className="space-y-2">
+          {isLoading ? (
+            <div className="text-slate-400 text-sm">Loading tasks...</div>
+          ) : (
+            tasks?.map((task) => (
+              <div key={task.id} className="flex items-center justify-between p-2 bg-slate-900 rounded border border-slate-700">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={task.completed}
+                    onChange={() => toggleTask(task.id)}
+                    className="rounded"
+                  />
+                  <span className={task.completed ? 'line-through text-slate-500' : ''}>{task.title}</span>
+                  <Badge variant={priorityColor(task.priority) as 'default' | 'success' | 'warning' | 'error'}>{task.priority}</Badge>
+                </div>
+                <button onClick={() => deleteTask(task.id)} className="p-1 text-red-400 hover:text-red-300 transition">
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+        <ResponseDisplay response={response} loading={loading} />
+      </div>
+    </Card>
+  );
+}
+function ToolsPanel() {
+  const [echoMessage, setEchoMessage] = useState('');
+  const [validateData, setValidateData] = useState({ email: '', age: '' });
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const testEcho = async () => {
+    if (!echoMessage) return;
+    setLoading(true);
+    const res = await fetchApi(\`/echo?message=\${encodeURIComponent(echoMessage)}\`);
+    setResponse(res);
+    setLoading(false);
+  };
+  const testValidate = async () => {
+    setLoading(true);
+    const res = await fetchApi('/validate', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: validateData.email,
+        age: parseInt(validateData.age) || 0,
+      }),
+    });
+    setResponse(res);
+    setLoading(false);
+  };
+  return (
+    <Card title="Test Tools" icon={Zap}>
+      <div className="space-y-6">
+        <div>
+          <h4 className="text-sm font-medium text-slate-300 mb-2">Echo Endpoint</h4>
+          <div className="flex gap-2">
+            <input
+              placeholder="Message to echo"
+              value={echoMessage}
+              onChange={(e) => setEchoMessage(e.target.value)}
+              className="flex-1 px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+            />
+            <button onClick={testEcho} className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition flex items-center gap-1">
+              <Send className="w-4 h-4" /> Echo
+            </button>
+          </div>
+        </div>
+        <div>
+          <h4 className="text-sm font-medium text-slate-300 mb-2">Validation Endpoint</h4>
+          <div className="flex gap-2">
+            <input
+              placeholder="Email"
+              value={validateData.email}
+              onChange={(e) => setValidateData({ ...validateData, email: e.target.value })}
+              className="flex-1 px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+            />
+            <input
+              placeholder="Age"
+              type="number"
+              value={validateData.age}
+              onChange={(e) => setValidateData({ ...validateData, age: e.target.value })}
+              className="w-24 px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+            />
+            <button onClick={testValidate} className="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 rounded text-sm font-medium transition flex items-center gap-1">
+              <CheckSquare className="w-4 h-4" /> Validate
+            </button>
+          </div>
+        </div>
+        <ResponseDisplay response={response} loading={loading} />
+      </div>
+    </Card>
+  );
+}
+export default function App() {
+  const [activeTab, setActiveTab] = useState<Tab>('health');
+  const tabs: { id: Tab; label: string; icon: React.ElementType }[] = [
+    { id: 'health', label: 'Health', icon: Activity },
+    { id: 'users', label: 'Users', icon: Users },
+    { id: 'tasks', label: 'Tasks', icon: CheckSquare },
+    { id: 'tools', label: 'Tools', icon: Zap },
+  ];
+  return (
+    <div className="min-h-screen p-6">
+      <div className="max-w-4xl mx-auto">
+        <header className="mb-8">
+          <div className="flex items-center gap-3 mb-2">
+            <Server className="w-8 h-8 text-blue-400" />
+            <h1 className="text-3xl font-bold">Kozo API Tester</h1>
+          </div>
+          <p className="text-slate-400">Test the ${projectName} API endpoints with this interactive UI</p>
+        </header>
+        <nav className="flex gap-1 mb-6 bg-slate-800 p-1 rounded-lg">
+          {tabs.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => setActiveTab(id)}
+              className={\`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition \${
+                activeTab === id
+                  ? 'bg-blue-600 text-white'
+                  : 'text-slate-400 hover:text-white hover:bg-slate-700'
+              }\`}
+            >
+              <Icon className="w-4 h-4" />
+              {label}
+            </button>
+          ))}
+        </nav>
+        <main>
+          {activeTab === 'health' && <HealthPanel />}
+          {activeTab === 'users' && <UsersPanel />}
+          {activeTab === 'tasks' && <TasksPanel />}
+          {activeTab === 'tools' && <ToolsPanel />}
+        </main>
+        <footer className="mt-8 pt-6 border-t border-slate-800 text-center text-slate-500 text-sm">
+          Built with Kozo + React + TailwindCSS
+        </footer>
+      </div>
+    </div>
+  );
+}
+`;
+}
+async function scaffoldFullstackReadme(projectDir, projectName) {
+  const readme = `# ${projectName}
+Full-stack application built with **Kozo** framework and React.
+## Project Structure
+\`\`\`
+apps/
+\u251C\u2500\u2500 api/                    # Backend Kozo
+\u2502   \u2514\u2500\u2500 src/
+\u2502       \u251C\u2500\u2500 data/          # Schemas e dati in-memory
+\u2502       \u2502   \u2514\u2500\u2500 index.ts
+\u2502       \u251C\u2500\u2500 routes/        # Routes organizzate per risorsa
+\u2502       \u2502   \u251C\u2500\u2500 health.ts  # Health check e stats
+\u2502       \u2502   \u251C\u2500\u2500 users.ts   # CRUD Users
+\u2502       \u2502   \u251C\u2500\u2500 posts.ts   # CRUD Posts
+\u2502       \u2502   \u251C\u2500\u2500 tasks.ts   # CRUD Tasks
+\u2502       \u2502   \u251C\u2500\u2500 tools.ts   # Utility endpoints
+\u2502       \u2502   \u2514\u2500\u2500 index.ts   # Route registration
+\u2502       \u2514\u2500\u2500 index.ts       # Entry point
+\u2514\u2500\u2500 web/                   # Frontend React
+    \u2514\u2500\u2500 src/
+        \u251C\u2500\u2500 App.tsx        # UI principale con tabs
+        \u251C\u2500\u2500 main.tsx       # Entry point
+        \u2514\u2500\u2500 index.css      # TailwindCSS v4
+\`\`\`
+## Technologies
+- **Backend**: Kozo (Hono-based), TypeScript, Zod
+- **Frontend**: React 18, TanStack Query, TailwindCSS v4, Lucide Icons
+- **Build**: Vite, pnpm workspace
+## Installation
+\`\`\`bash
+pnpm install
+\`\`\`
+## Development
+\`\`\`bash
+# Start API and Web in parallel
+pnpm dev
+# Or separately:
+pnpm --filter @${projectName}/api dev    # API on http://localhost:3000
+pnpm --filter @${projectName}/web dev    # Web on http://localhost:5173
+\`\`\`
+## API Endpoints
+### Health & Stats
+- \`GET /api/health\` - Health check with uptime
+- \`GET /api/stats\` - Global statistics
+### Users (Full CRUD)
+- \`GET /api/users\` - List all users
+- \`GET /api/users/:id\` - Get user by ID
+- \`POST /api/users\` - Create user
+- \`PUT /api/users/:id\` - Update user
+- \`DELETE /api/users/:id\` - Delete user
+### Posts (Full CRUD)
+- \`GET /api/posts?published=true\` - List posts (optional filter)
+- \`GET /api/posts/:id\` - Get post by ID
+- \`POST /api/posts\` - Create post
+- \`PUT /api/posts/:id\` - Update post
+- \`DELETE /api/posts/:id\` - Delete post
+### Tasks (Full CRUD)
+- \`GET /api/tasks?completed=true&priority=high\` - List tasks (optional filters)
+- \`GET /api/tasks/:id\` - Get task by ID
+- \`POST /api/tasks\` - Create task
+- \`PUT /api/tasks/:id\` - Update task
+- \`PATCH /api/tasks/:id/toggle\` - Toggle completion
+- \`DELETE /api/tasks/:id\` - Delete task
+### Tools
+- \`GET /api/echo?message=hello\` - Echo test
+- \`POST /api/validate\` - Zod validation (email + age)
+## Type Safety
+The frontend uses Hono RPC client for type-safe API calls:
+\`\`\`typescript
+const res = await client.api.users.$get();
+const users = await res.json(); // Fully typed!
+\`\`\`
+`;
+  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "README.md"), readme);
+}
 // src/utils/ascii-art.ts
 var import_picocolors = __toESM(require("picocolors"));
@@ -1112,39 +2245,64 @@ async function newCommand(projectName) {
           }
         });
       },
+      runtime: () => p.select({
+        message: "Target runtime",
+        options: [
+          { value: "node", label: "Node.js / Docker", hint: "Maximum compatibility (default)" },
+          { value: "cloudflare", label: "Cloudflare Workers", hint: "Edge-native, global deployment" },
+          { value: "bun", label: "Bun", hint: "Maximum local speed" }
+        ],
+        initialValue: "node"
+      }),
       template: () => p.select({
         message: "Template",
         options: [
           { value: "complete", label: "Complete Server", hint: "Full production-ready app (Auth, CRUD, Stats)" },
           { value: "starter", label: "Starter", hint: "Minimal setup with database" },
-          { value: "saas", label: "SaaS", hint: "Auth + Stripe + Email (coming soon)" },
-          { value: "ecommerce", label: "E-commerce", hint: "Products + Orders (coming soon)" }
+          { value: "api-only", label: "API Only", hint: "Minimal, no database" }
         ]
       }),
       database: ({ results }) => {
-        if (results.template === "complete") {
+        if (results.template === "complete" || results.template === "api-only") {
           return Promise.resolve("none");
         }
         return p.select({
-          message: "Database provider",
+          message: "Database",
           options: [
-            { value: "postgresql", label: "PostgreSQL", hint: "Neon, Supabase, Railway" },
-            { value: "mysql", label: "MySQL", hint: "PlanetScale" },
-            { value: "sqlite", label: "SQLite", hint: "Turso, local dev" }
+            { value: "sqlite", label: "SQLite / Turso", hint: "Perfect for Edge and local dev" },
+            { value: "postgresql", label: "PostgreSQL + Drizzle", hint: "Standard Enterprise" },
+            { value: "mysql", label: "MySQL + Drizzle", hint: "PlanetScale compatible" }
           ]
         });
       },
+      frontend: () => p.select({
+        message: "Frontend",
+        options: [
+          { value: "none", label: "None (API only)", hint: "Backend microservice" },
+          { value: "react", label: "React (Vite + TanStack Query)", hint: "Full-stack type-safe" },
+          { value: "solid", label: "SolidJS (Vite)", hint: "Performance purist choice" },
+          { value: "vue", label: "Vue (Vite)", hint: "Progressive framework" }
+        ],
+        initialValue: "none"
+      }),
+      extras: () => p.multiselect({
+        message: "Extras",
+        options: [
+          { value: "docker", label: "Docker", hint: "Multi-stage Dockerfile" },
+          { value: "github-actions", label: "GitHub Actions", hint: "CI/CD pipeline" },
+          { value: "auth", label: "Authentication", hint: "JWT middleware + login routes" }
+        ],
+        required: false
+      }),
       packageSource: () => p.select({
-        message: "Package source for @kozojs/core",
+        message: "Package source",
         options: [
-          { value: "npm", label: "npm registry", hint: "Use published version (recommended)" },
-          { value: "local", label: "Local workspace", hint: "Link to local monorepo (for development)" }
+          { value: "npm", label: "npm registry", hint: "Published version (recommended)" },
+          { value: "local", label: "Local workspace", hint: "Link to monorepo (dev only)" }
         ],
         initialValue: "npm"
       }),
-      install: () => {
-        return Promise.resolve(true);
-      }
+      install: () => Promise.resolve(true)
     },
     {
       onCancel: () => {
@@ -1158,8 +2316,11 @@ async function newCommand(projectName) {
   try {
     await scaffoldProject({
       projectName: project.name,
-      database: project.database,
+      runtime: project.runtime,
       template: project.template,
+      database: project.database,
+      frontend: project.frontend,
+      extras: project.extras,
       packageSource: project.packageSource
     });
     s.stop("Project structure created!");

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kozojs/cli",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "CLI to scaffold new Kozo Framework projects - The next-gen TypeScript Backend Framework",
   "bin": {
     "create-kozo": "./lib/index.js",