clawfire 0.2.0 → 0.3.0

package/README.md

@@ -13,8 +13,11 @@ Clawfire lets you build Firebase apps by talking to AI. Define your API contract
 
 - **Contract-based API** — Define input/output with Zod schemas. Runtime validation, type safety, and docs come for free.
 - **File-based Routing** — `app/routes/todos/create.ts` becomes `POST /api/todos/create`. No configuration.
+- **Page Routing** — `app/pages/about.html` becomes `/about`. Layouts, components, and SPA navigation built in.
+- **Layouts & Components** — `_layout.html` wraps pages via `<slot />`. `<c-nav />` inserts `app/components/nav.html`.
+- **SPA Navigation** — Internal links swap page content without full reload. Tailwind CSS via CDN.
 - **Two-Port Dev Server** — Frontend app on port 3000, API + Playground on port 3456. One command.
-- **Hot Reload** — API route changes reload instantly. CSS changes apply without page reload.
+- **Hot Reload** — API, page, and CSS changes reload instantly. No manual refresh needed.
 - **API Playground** — Interactive API explorer auto-generated from your route definitions.
 - **Auto Client Generation** — Type-safe `api.todos.create({ title })` client generated from your contracts.
 - **Firebase-Native** — Firestore, Auth, Functions, Hosting. Fully integrated, no alternatives needed.
@@ -48,6 +51,7 @@ This starts **two servers** in a single process:
   App        : http://localhost:3000
   API        : http://localhost:3456/api/...
   Playground : http://localhost:3456
+  Pages      : ON (app/pages/)
 
   Routes (5):
     POST /api/health         [public] Health check endpoint
@@ -57,7 +61,7 @@ This starts **two servers** in a single process:
     POST /api/todos/update   [public] Update a todo
 
   Hot Reload : ON
-  Watching: app/routes/, app/schemas/, public/
+  Watching: app/routes/, app/schemas/, app/pages/, app/components/, public/
 ```
 
 ### 3. Open in Your Browser
@@ -87,12 +91,14 @@ curl -s -X POST http://localhost:3000/api/todos/create \
 Clawfire runs a **two-port dev server** in a single process:
 
 ```
-DevServer
+DevServer (single process)
+  ├─ PageCompiler (compiles app/pages/ + app/components/ → HTML)
   ├─ Frontend Server (port 3000)
-  │   ├─ Serves public/ directory
+  │   ├─ Serves compiled pages (app/pages/ → routes)
+  │   ├─ Serves public/ directory (static assets)
   │   ├─ Auto-injects HMR script into HTML
   │   ├─ Proxies /api/* → API server (no CORS)
-  │   └─ SPA fallback → index.html
+  │   └─ SPA fallback with partial page loading
   │
   └─ API Server (port 3456)
       ├─ API routes at /api/*
@@ -131,6 +137,16 @@ dev: {
 my-app/
   app/
     store.ts              In-memory data store (works without Firebase)
+    pages/                File-based page routing (frontend)
+      _layout.html        Root layout (wraps all pages via <slot />)
+      _404.html           404 error page
+      index.html          Home page (/)
+      about.html          /about page
+      todos/
+        index.html        /todos page
+    components/           Reusable HTML components
+      nav.html            <c-nav /> navigation bar
+      footer.html         <c-footer /> page footer
     routes/               API route handlers (file-based routing)
       health.ts           → POST /api/health
       todos/
@@ -140,8 +156,7 @@ my-app/
         delete.ts         → POST /api/todos/delete
     schemas/              Firestore model definitions
       todo.ts
-  public/
-    index.html            Frontend app (vanilla JS, no build step)
+  public/                 Static assets (CSS, images, fonts)
   generated/              Auto-generated files (DO NOT EDIT)
     api-client.ts         Typed API client
     manifest.json         API manifest
@@ -393,7 +408,7 @@ When using [Claude Code](https://claude.ai/claude-code), these slash commands ar
 | `clawfire/admin` | `generateFirestoreRules`, `generateFirestoreIndexes`, `setUserRole` |
 | `clawfire/codegen` | `generateClientCode`, `discoverRoutes`, `generateRouteImports` |
 | `clawfire/playground` | `generatePlaygroundHtml` |
-| `clawfire/dev` | `DevServer`, `startDevServer`, `FileWatcher` |
+| `clawfire/dev` | `DevServer`, `startDevServer`, `FileWatcher`, `PageCompiler` |
 
 ---
 

package/dist/cli.js

@@ -117,6 +117,8 @@ async function initProject() {
     const dirs = [
       "app/routes",
       "app/schemas",
+      "app/pages",
+      "app/components",
       "generated",
       "public",
       "functions"
@@ -184,13 +186,21 @@ export const api = functions.https.onRequest((req, res) => {
     console.log("  Created functions/index.ts");
   }
   console.log("\n  \x1B[32m\u2713\x1B[0m Clawfire project initialized!\n");
+  console.log("  Project structure:");
+  console.log("    \x1B[36mapp/pages/\x1B[0m       \u2192 File-based page routing (Tailwind + layouts)");
+  console.log("    \x1B[36mapp/components/\x1B[0m  \u2192 Reusable HTML components (<c-name />)");
+  console.log("    \x1B[36mapp/routes/\x1B[0m      \u2192 API endpoints (POST, Zod validation)");
+  console.log("    \x1B[36mapp/schemas/\x1B[0m     \u2192 Firestore model definitions");
+  console.log("    \x1B[36mpublic/\x1B[0m          \u2192 Static assets (CSS, images, fonts)");
+  console.log("");
   console.log("  Next steps:");
   console.log("    \x1B[36m1.\x1B[0m npm install");
   console.log("    \x1B[36m2.\x1B[0m npm run dev");
-  console.log("    \x1B[36m3.\x1B[0m Open \x1B[1mhttp://localhost:3000\x1B[0m in your browser");
+  console.log("    \x1B[36m3.\x1B[0m Open \x1B[1mhttp://localhost:3000\x1B[0m");
+  console.log("");
+  console.log("  Your app is ready with a Todo demo, page routing, and API playground.");
   console.log("");
-  console.log("  Your Todo app is ready! Try adding, completing, and deleting todos.");
-  console.log("  Edit files in \x1B[1mapp/routes/\x1B[0m and see changes instantly.\n");
+  console.log("  npm: \x1B[4mhttps://www.npmjs.com/package/clawfire\x1B[0m\n");
 }
 async function runDevServer() {
   const projectDir = process.cwd();
@@ -199,7 +209,7 @@ async function runDevServer() {
   const port = portArg ? parseInt(portArg.split("=")[1], 10) : 3e3;
   const apiPort = apiPortArg ? parseInt(apiPortArg.split("=")[1], 10) : 3456;
   const noHotReload = args.includes("--no-hot-reload");
-  const { startDevServer } = await import("./dev-server-QTNE5N7I.js");
+  const { startDevServer } = await import("./dev-server-TGEKP4YE.js");
   await startDevServer({
     projectDir,
     port,