@b9g/shovel 0.2.4 → 0.2.7

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 All notable changes to Shovel will be documented in this file.
 
+## [0.2.7] - 2026-02-06
+
+### Features
+
+- **Request logger middleware** - New `logger()` middleware in `@b9g/router/middleware` logs requests and responses with timing via LogTape (default category: `["app", "router"]`)
+- **CLI flags for create-shovel** - `--template`, `--typescript`/`--no-typescript`, `--platform` flags to bypass interactive prompts. `--template crank` is shorthand for static-site + Crank.js.
+- **Logger in generated templates** - All Router-based templates (api, full-stack) now include `router.use(logger())` out of the box
+
+### Dependencies
+
+- **`@b9g/router`** `0.2.2` - Added `@logtape/logtape` as explicit dependency (was previously resolved via workspace only)
+
+## [0.2.6] - 2026-02-06
+
+### Features
+
+- **UI framework selection in create-shovel** - Choose between Vanilla, HTMX, Alpine.js, and Crank.js when scaffolding static-site and full-stack templates ([#44](https://github.com/bikeshaving/shovel/pull/44))
+- **Default `["app"]` logger category** - User application logs under `["app", ...]` now work out of the box without configuration. Framework logs under `["shovel", ...]`, third-party libraries remain silent unless opted in.
+- **Default exports for cache and filesystem modules** - `@b9g/cache/memory`, `@b9g/cache-redis`, `@b9g/filesystem/node-fs`, `@b9g/filesystem/memory`, and `@b9g/filesystem/bun-s3` now have default exports, so `"export"` can be omitted from `shovel.json` config.
+
+### Bug Fixes
+
+- **Cache API compliance** - Wildcard pattern matching (`"*"`) for cache and directory configs, `PostMessageCache` now accepts `RequestInfo | URL` per spec, `matchPattern()` restored for config lookups ([#43](https://github.com/bikeshaving/shovel/pull/43))
+- **Direct cache in single-worker dev mode** - Dev workers now use `MemoryCache` directly instead of `PostMessageCache` when `workers: 1`, avoiding unnecessary serialization overhead
+- **Node.js Request body duplex** - Added `duplex: "half"` to Node.js Request construction to fix body streaming
+- **Website 404 errors** - Views now throw `NotFound` from `@b9g/http-errors` instead of raw errors, returning proper 404 responses
+- **Fixed `@b9g/cache-redis` module path in docs** - Documentation referenced `@b9g/cache/redis` instead of the correct `@b9g/cache-redis`
+
+### Tests
+
+- **PostMessageCache WPT tests** - 29 Web Platform Tests now run against PostMessageCache to verify serialization round-trip compliance
+- **Pattern matching unit tests** - Wildcard, prefix, and exact-match priority tests for cache and directory factories
+- **End-to-end cache tests** - Runtime tests for KV server, multi-cache independence, and wildcard priority
+
 ## [0.2.3] - 2026-02-02
 
 ### Features

package/README.md

@@ -184,14 +184,12 @@ Shovel's configuration follows these principles:
   "caches": {
     "sessions": {
       "module": "@b9g/cache-redis",
-      "export": "RedisCache",
       "url": "$REDIS_URL"
     }
   },
   "directories": {
     "uploads": {
       "module": "@b9g/filesystem-s3",
-      "export": "S3Directory",
       "bucket": "$S3_BUCKET"
     }
   },
@@ -211,18 +209,16 @@ Shovel's configuration follows these principles:
 
 ### Caches
 
-Configure cache backends using `module` and `export`:
+Configure cache backends using `module` (uses default export, or specify `export` for named exports):
 
 ```json
 {
   "caches": {
     "api-responses": {
-      "module": "@b9g/cache/memory",
-      "export": "MemoryCache"
+      "module": "@b9g/cache/memory"
     },
     "sessions": {
       "module": "@b9g/cache-redis",
-      "export": "RedisCache",
       "url": "$REDIS_URL"
     }
   }
@@ -242,13 +238,11 @@ Configure directory backends. Platforms provide defaults for well-known director
   "directories": {
     "uploads": {
       "module": "@b9g/filesystem-s3",
-      "export": "S3Directory",
       "bucket": "MY_BUCKET",
       "region": "us-east-1"
     },
     "data": {
       "module": "@b9g/filesystem/node-fs",
-      "export": "NodeFSDirectory",
       "path": "./data"
     }
   }

package/bin/create.js

@@ -20,10 +20,26 @@ function validateProjectName(name) {
     return "Use lowercase letters, numbers, and hyphens only";
   return void 0;
 }
+function parseFlags(args) {
+  const flags = {};
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--template" && args[i + 1])
+      flags.template = args[++i];
+    else if (arg === "--typescript")
+      flags.typescript = true;
+    else if (arg === "--no-typescript")
+      flags.typescript = false;
+    else if (arg === "--platform" && args[i + 1])
+      flags.platform = args[++i];
+  }
+  return flags;
+}
 async function main() {
   console.info("");
   intro("Create Shovel App");
-  let projectName = process.argv[2];
+  const flags = parseFlags(process.argv.slice(2));
+  let projectName = process.argv[2]?.startsWith("-") ? void 0 : process.argv[2];
   if (projectName) {
     const validationError = validateProjectName(projectName);
     if (validationError) {
@@ -52,74 +68,144 @@ async function main() {
       process.exit(0);
     }
   }
-  const template = await select({
-    message: "Choose a starter template:",
-    options: [
-      {
-        value: "hello-world",
-        label: "Hello World",
-        hint: "Minimal fetch handler to get started"
-      },
-      {
-        value: "api",
-        label: "API",
-        hint: "REST endpoints with JSON responses"
-      },
-      {
-        value: "static-site",
-        label: "Static Site",
-        hint: "Serve files from public/ directory"
-      },
-      {
-        value: "full-stack",
-        label: "Full Stack",
-        hint: "HTML pages + API routes + static assets"
-      }
-    ]
-  });
-  if (typeof template === "symbol") {
-    outro("Project creation cancelled");
-    process.exit(0);
+  let template;
+  let uiFramework = "vanilla";
+  if (flags.template === "crank") {
+    template = "static-site";
+    uiFramework = "crank";
+  } else if (flags.template) {
+    const valid = ["hello-world", "api", "static-site", "full-stack"];
+    if (!valid.includes(flags.template)) {
+      console.error(
+        `Error: Unknown template "${flags.template}". Valid options: ${valid.join(", ")}, crank`
+      );
+      process.exit(1);
+    }
+    template = flags.template;
+  } else {
+    const templateResult = await select({
+      message: "Choose a starter template:",
+      options: [
+        {
+          value: "hello-world",
+          label: "Hello World",
+          hint: "Minimal fetch handler to get started"
+        },
+        {
+          value: "api",
+          label: "API",
+          hint: "REST endpoints with JSON responses"
+        },
+        {
+          value: "static-site",
+          label: "Static Site",
+          hint: "Server-rendered HTML pages"
+        },
+        {
+          value: "full-stack",
+          label: "Full Stack",
+          hint: "HTML pages + API routes"
+        }
+      ]
+    });
+    if (typeof templateResult === "symbol") {
+      outro("Project creation cancelled");
+      process.exit(0);
+    }
+    template = templateResult;
   }
-  const typescript = await confirm({
-    message: "Use TypeScript?",
-    initialValue: true
-  });
-  if (typeof typescript === "symbol") {
-    outro("Project creation cancelled");
-    process.exit(0);
+  if (uiFramework === "vanilla" && (template === "static-site" || template === "full-stack")) {
+    const framework = await select({
+      message: "UI framework:",
+      initialValue: "crank",
+      options: [
+        {
+          value: "alpine",
+          label: "Alpine.js",
+          hint: "Lightweight reactivity with x-data directives"
+        },
+        {
+          value: "crank",
+          label: "Crank.js",
+          hint: "JSX components rendered on the server"
+        },
+        {
+          value: "htmx",
+          label: "HTMX",
+          hint: "HTML-driven interactions with hx- attributes"
+        },
+        {
+          value: "vanilla",
+          label: "Vanilla",
+          hint: "Plain HTML, no framework"
+        }
+      ]
+    });
+    if (typeof framework === "symbol") {
+      outro("Project creation cancelled");
+      process.exit(0);
+    }
+    uiFramework = framework;
   }
-  const detectedPlatform = detectPlatform();
-  const platform = await select({
-    message: "Which platform?",
-    initialValue: detectedPlatform,
-    options: [
-      {
-        value: "node",
-        label: "Node.js",
-        hint: detectedPlatform === "node" ? "detected" : void 0
-      },
-      {
-        value: "bun",
-        label: "Bun",
-        hint: detectedPlatform === "bun" ? "detected" : void 0
-      },
-      {
-        value: "cloudflare",
-        label: "Cloudflare Workers",
-        hint: "Edge runtime"
-      }
-    ]
-  });
-  if (typeof platform === "symbol") {
-    outro("Project creation cancelled");
-    process.exit(0);
+  let typescript;
+  if (flags.typescript !== void 0) {
+    typescript = flags.typescript;
+  } else {
+    const tsResult = await confirm({
+      message: "Use TypeScript?",
+      initialValue: true
+    });
+    if (typeof tsResult === "symbol") {
+      outro("Project creation cancelled");
+      process.exit(0);
+    }
+    typescript = tsResult;
+  }
+  let platform;
+  if (flags.platform) {
+    const valid = ["node", "bun", "cloudflare"];
+    if (!valid.includes(flags.platform)) {
+      console.error(
+        `Error: Unknown platform "${flags.platform}". Valid options: ${valid.join(", ")}`
+      );
+      process.exit(1);
+    }
+    platform = flags.platform;
+  } else {
+    const detectedPlatform = detectPlatform();
+    const platformResult = await select({
+      message: "Which platform?",
+      initialValue: detectedPlatform,
+      options: [
+        {
+          value: "node",
+          label: "Node.js",
+          hint: detectedPlatform === "node" ? "detected" : void 0
+        },
+        {
+          value: "bun",
+          label: "Bun",
+          hint: detectedPlatform === "bun" ? "detected" : void 0
+        },
+        {
+          value: "cloudflare",
+          label: "Cloudflare Workers",
+          hint: "Edge runtime"
+        }
+      ]
+    });
+    if (typeof platformResult === "symbol") {
+      outro("Project creation cancelled");
+      process.exit(0);
+    }
+    platform = platformResult;
   }
   const config = {
     name: projectName,
     platform,
     template,
-    typescript
+    typescript,
+    uiFramework
   };
   const s = spinner();
   s.start("Creating your Shovel project...");
@@ -132,7 +218,7 @@ async function main() {
     console.info("Next steps:");
     console.info(`  cd ${projectName}`);
     console.info(`  npm install`);
-    console.info(`  npm run dev`);
+    console.info(`  npm run develop`);
     console.info("");
     console.info("Your app will be available at: http://localhost:7777");
     console.info("");
@@ -145,26 +231,26 @@ async function main() {
 async function createProject(config, projectPath) {
   await mkdir(projectPath, { recursive: true });
   await mkdir(join(projectPath, "src"), { recursive: true });
-  if (config.template === "static-site" || config.template === "full-stack") {
-    await mkdir(join(projectPath, "public"), { recursive: true });
+  const ext = config.uiFramework === "crank" ? config.typescript ? "tsx" : "jsx" : config.typescript ? "ts" : "js";
+  const startCmd = config.platform === "bun" ? "bun dist/server/supervisor.js" : "node dist/server/supervisor.js";
+  const dependencies = {
+    "@b9g/router": "^0.2.0",
+    "@b9g/shovel": "^0.2.0"
+  };
+  if (config.uiFramework === "crank") {
+    dependencies["@b9g/crank"] = "^0.7.2";
   }
-  const ext = config.typescript ? "ts" : "js";
   const packageJson = {
     name: config.name,
     private: true,
     version: "0.0.1",
     type: "module",
     scripts: {
-      dev: `shovel develop src/app.${ext} --platform ${config.platform}`,
+      develop: `shovel develop src/app.${ext} --platform ${config.platform}`,
       build: `shovel build src/app.${ext} --platform ${config.platform}`,
-      start: "node dist/server/supervisor.js"
-    },
-    dependencies: {
-      "@b9g/router": "^0.2.0",
-      "@b9g/shovel": "^0.2.0",
-      "@b9g/filesystem": "^0.1.8",
-      "@b9g/cache": "^0.2.0"
+      start: startCmd
     },
+    dependencies,
     devDependencies: config.typescript ? {
       "@types/node": "^18.0.0",
       typescript: "^5.0.0"
@@ -177,18 +263,23 @@ async function createProject(config, projectPath) {
   const appFile = generateAppFile(config);
   await writeFile(join(projectPath, `src/app.${ext}`), appFile);
   if (config.typescript) {
+    const compilerOptions = {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      allowSyntheticDefaultImports: true,
+      esModuleInterop: true,
+      strict: true,
+      skipLibCheck: true,
+      forceConsistentCasingInFileNames: true,
+      lib: ["ES2022", "WebWorker"]
+    };
+    if (config.uiFramework === "crank") {
+      compilerOptions.jsx = "react-jsx";
+      compilerOptions.jsxImportSource = "@b9g/crank";
+    }
     const tsConfig = {
-      compilerOptions: {
-        target: "ES2022",
-        module: "ESNext",
-        moduleResolution: "bundler",
-        allowSyntheticDefaultImports: true,
-        esModuleInterop: true,
-        strict: true,
-        skipLibCheck: true,
-        forceConsistentCasingInFileNames: true,
-        lib: ["ES2022", "WebWorker"]
-      },
+      compilerOptions,
       include: ["src/**/*"],
       exclude: ["node_modules", "dist"]
     };
@@ -196,9 +287,18 @@ async function createProject(config, projectPath) {
       join(projectPath, "tsconfig.json"),
       JSON.stringify(tsConfig, null, 2)
     );
-  }
-  if (config.template === "static-site" || config.template === "full-stack") {
-    await createStaticFiles(config, projectPath);
+    const envDts = `/// <reference lib="WebWorker" />
+
+// Shovel runs your code in a ServiceWorker-like environment.
+// This augments the Worker types with ServiceWorker events
+// so self.addEventListener("fetch", ...) etc. are properly typed.
+interface WorkerGlobalScopeEventMap {
+  fetch: FetchEvent;
+  install: ExtendableEvent;
+  activate: ExtendableEvent;
+}
+`;
+    await writeFile(join(projectPath, "src/env.d.ts"), envDts);
   }
   const readme = generateReadme(config);
   await writeFile(join(projectPath, "README.md"), readme);
@@ -211,62 +311,6 @@ dist/
 `;
   await writeFile(join(projectPath, ".gitignore"), gitignore);
 }
-async function createStaticFiles(config, projectPath) {
-  const indexHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${config.name}</title>
-  <link rel="stylesheet" href="/styles.css">
-</head>
-<body>
-  <main>
-    <h1>Welcome to ${config.name}</h1>
-    <p>Edit <code>public/index.html</code> to get started.</p>
-    ${config.template === "full-stack" ? '<p>API endpoint: <a href="/api/hello">/api/hello</a></p>' : ""}
-  </main>
-</body>
-</html>
-`;
-  await writeFile(join(projectPath, "public/index.html"), indexHtml);
-  const stylesCss = `* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: system-ui, -apple-system, sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background: #fafafa;
-}
-
-main {
-  max-width: 640px;
-  margin: 4rem auto;
-  padding: 2rem;
-}
-
-h1 {
-  color: #2563eb;
-  margin-bottom: 1rem;
-}
-
-code {
-  background: #e5e7eb;
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-  font-size: 0.9em;
-}
-
-a {
-  color: #2563eb;
-}
-`;
-  await writeFile(join(projectPath, "public/styles.css"), stylesCss);
-}
 function generateAppFile(config) {
   switch (config.template) {
     case "hello-world":
@@ -294,8 +338,10 @@ self.addEventListener("fetch", (event) => {
 }
 function generateApi(config) {
   return `import { Router } from "@b9g/router";
+import { logger } from "@b9g/router/middleware";
 
 const router = new Router();
+router.use(logger());
 
 // In-memory data store
 const users = [
@@ -352,62 +398,287 @@ self.addEventListener("fetch", (event) => {
 });
 `;
 }
+var css = `    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333; background: #fafafa; }
+    main { max-width: 640px; margin: 4rem auto; padding: 2rem; }
+    h1 { color: #2563eb; margin-bottom: 1rem; }
+    code { background: #e5e7eb; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
+    a { color: #2563eb; }
+    ul { margin-top: 1rem; padding-left: 1.5rem; }
+    li { margin-bottom: 0.5rem; }
+    button { background: #2563eb; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 1rem; }
+    button:hover { background: #1d4ed8; }
+    #result { margin-top: 1rem; padding: 1rem; background: #f3f4f6; border-radius: 4px; }`;
 function generateStaticSite(config) {
+  switch (config.uiFramework) {
+    case "vanilla":
+      return generateStaticSiteVanilla(config);
+    case "htmx":
+      return generateStaticSiteHtmx(config);
+    case "alpine":
+      return generateStaticSiteAlpine(config);
+    case "crank":
+      return generateStaticSiteCrank(config);
+  }
+}
+function generateStaticSiteVanilla(config) {
+  const ext = config.typescript ? "ts" : "js";
+  const t = config.typescript;
   return `// ${config.name} - Static Site
-// Serves files from the public/ directory
+// Renders HTML pages server-side
 
 self.addEventListener("fetch", (event) => {
   event.respondWith(handleRequest(event.request));
 });
 
-async function handleRequest(request${config.typescript ? ": Request" : ""})${config.typescript ? ": Promise<Response>" : ""} {
+async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
   const url = new URL(request.url);
-  let path = url.pathname;
 
-  // Default to index.html for root
-  if (path === "/") {
-    path = "/index.html";
+  if (url.pathname === "/") {
+    return new Response(renderPage("Home", \`
+      <h1>Welcome to ${config.name}</h1>
+      <p>Edit <code>src/app.${ext}</code> to get started.</p>
+      <p><a href="/about">About</a></p>
+    \`), {
+      headers: { "Content-Type": "text/html" },
+    });
   }
 
-  // Try to serve from public directory
-  try {
-    const publicDir = await directories.open("public");
-    const file = await publicDir.getFileHandle(path.slice(1)); // Remove leading /
-    const blob = await file.getFile();
-
-    return new Response(blob, {
-      headers: {
-        "Content-Type": getContentType(path),
-      },
+  if (url.pathname === "/about") {
+    return new Response(renderPage("About", \`
+      <h1>About</h1>
+      <p>This is a static site built with <strong>Shovel</strong>.</p>
+      <p><a href="/">Home</a></p>
+    \`), {
+      headers: { "Content-Type": "text/html" },
     });
-  } catch {
-    // File not found - return 404
-    return new Response("Not Found", { status: 404 });
   }
+
+  return new Response("Not Found", { status: 404 });
 }
 
-function getContentType(path${config.typescript ? ": string" : ""})${config.typescript ? ": string" : ""} {
-  const ext = path.split(".").pop()?.toLowerCase();
-  const types${config.typescript ? ": Record<string, string>" : ""} = {
-    html: "text/html",
-    css: "text/css",
-    js: "text/javascript",
-    json: "application/json",
-    png: "image/png",
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    gif: "image/gif",
-    svg: "image/svg+xml",
-    ico: "image/x-icon",
-  };
-  return types[ext || ""] || "application/octet-stream";
+function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
+  return \`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\${title} - ${config.name}</title>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main>\${content}</main>
+</body>
+</html>\`;
+}
+`;
+}
+function generateStaticSiteHtmx(config) {
+  const ext = config.typescript ? "ts" : "js";
+  const t = config.typescript;
+  return `// ${config.name} - Static Site with HTMX
+// Server-rendered HTML with HTMX interactions
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(handleRequest(event.request));
+});
+
+async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
+  const url = new URL(request.url);
+
+  if (url.pathname === "/") {
+    return new Response(renderPage("Home", \`
+      <h1>Welcome to ${config.name}</h1>
+      <p>Edit <code>src/app.${ext}</code> to get started.</p>
+      <button hx-get="/greeting" hx-target="#result" hx-swap="innerHTML">Get Greeting</button>
+      <div id="result"></div>
+      <p style="margin-top: 1rem;"><a href="/about">About</a></p>
+    \`), {
+      headers: { "Content-Type": "text/html" },
+    });
+  }
+
+  if (url.pathname === "/greeting") {
+    const hour = new Date().getHours();
+    const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
+    return new Response(\`<p>\${greeting}! The time is \${new Date().toLocaleTimeString()}.</p>\`, {
+      headers: { "Content-Type": "text/html" },
+    });
+  }
+
+  if (url.pathname === "/about") {
+    return new Response(renderPage("About", \`
+      <h1>About</h1>
+      <p>This is a static site built with <strong>Shovel</strong> and <strong>HTMX</strong>.</p>
+      <p><a href="/">Home</a></p>
+    \`), {
+      headers: { "Content-Type": "text/html" },
+    });
+  }
+
+  return new Response("Not Found", { status: 404 });
+}
+
+function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
+  return \`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\${title} - ${config.name}</title>
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main>\${content}</main>
+</body>
+</html>\`;
+}
+`;
+}
+function generateStaticSiteAlpine(config) {
+  const ext = config.typescript ? "ts" : "js";
+  const t = config.typescript;
+  return `// ${config.name} - Static Site with Alpine.js
+// Server-rendered HTML with Alpine.js interactions
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(handleRequest(event.request));
+});
+
+async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
+  const url = new URL(request.url);
+
+  if (url.pathname === "/") {
+    return new Response(renderPage("Home", \`
+      <h1>Welcome to ${config.name}</h1>
+      <p>Edit <code>src/app.${ext}</code> to get started.</p>
+      <div x-data="{ count: 0 }">
+        <button @click="count++">Clicked: <span x-text="count"></span></button>
+      </div>
+      <p style="margin-top: 1rem;"><a href="/about">About</a></p>
+    \`), {
+      headers: { "Content-Type": "text/html" },
+    });
+  }
+
+  if (url.pathname === "/about") {
+    return new Response(renderPage("About", \`
+      <h1>About</h1>
+      <p>This is a static site built with <strong>Shovel</strong> and <strong>Alpine.js</strong>.</p>
+      <p><a href="/">Home</a></p>
+    \`), {
+      headers: { "Content-Type": "text/html" },
+    });
+  }
+
+  return new Response("Not Found", { status: 404 });
+}
+
+function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
+  return \`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\${title} - ${config.name}</title>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main>\${content}</main>
+</body>
+</html>\`;
+}
+`;
+}
+function generateStaticSiteCrank(config) {
+  const t = config.typescript;
+  return `import {renderer} from "@b9g/crank/html";
+
+// ${config.name} - Static Site with Crank.js
+// Server-rendered HTML with JSX components
+
+const css = \`
+${css}
+\`;
+
+function Page({title, children}${t ? ": {title: string, children: unknown}" : ""}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title} - ${config.name}</title>
+        <style>{css}</style>
+      </head>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(handleRequest(event.request));
+});
+
+async function handleRequest(request${t ? ": Request" : ""})${t ? ": Promise<Response>" : ""} {
+  const url = new URL(request.url);
+  let html${t ? ": string" : ""};
+
+  if (url.pathname === "/") {
+    html = await renderer.render(
+      <Page title="Home">
+        <h1>Welcome to ${config.name}</h1>
+        <p>Edit <code>src/app.${t ? "tsx" : "jsx"}</code> to get started.</p>
+        <p><a href="/about">About</a></p>
+      </Page>
+    );
+  } else if (url.pathname === "/about") {
+    html = await renderer.render(
+      <Page title="About">
+        <h1>About</h1>
+        <p>This is a static site built with <strong>Shovel</strong> and <strong>Crank.js</strong>.</p>
+        <p><a href="/">Home</a></p>
+      </Page>
+    );
+  } else {
+    return new Response("Not Found", { status: 404 });
+  }
+
+  return new Response("<!DOCTYPE html>" + html, {
+    headers: { "Content-Type": "text/html" },
+  });
 }
 `;
 }
 function generateFullStack(config) {
+  switch (config.uiFramework) {
+    case "vanilla":
+      return generateFullStackVanilla(config);
+    case "htmx":
+      return generateFullStackHtmx(config);
+    case "alpine":
+      return generateFullStackAlpine(config);
+    case "crank":
+      return generateFullStackCrank(config);
+  }
+}
+function generateFullStackVanilla(config) {
+  const ext = config.typescript ? "ts" : "js";
+  const t = config.typescript;
   return `import { Router } from "@b9g/router";
+import { logger } from "@b9g/router/middleware";
 
 const router = new Router();
+router.use(logger());
 
 // API routes
 router.route("/api/hello").get(() => {
@@ -422,58 +693,278 @@ router.route("/api/echo").post(async (req) => {
   return Response.json({ echo: body });
 });
 
-// Serve static files from public/ for all other routes
-router.route("/*").get(async (req, ctx) => {
-  const url = new URL(req.url);
-  let path = url.pathname;
+// HTML pages
+router.route("/").get(() => {
+  return new Response(renderPage("Home", \`
+    <h1>Welcome to ${config.name}</h1>
+    <p>Edit <code>src/app.${ext}</code> to get started.</p>
+    <ul>
+      <li><a href="/about">About</a></li>
+      <li><a href="/api/hello">API: /api/hello</a></li>
+    </ul>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
-  // Default to index.html for root
-  if (path === "/") {
-    path = "/index.html";
-  }
+router.route("/about").get(() => {
+  return new Response(renderPage("About", \`
+    <h1>About</h1>
+    <p>This is a full-stack app built with <strong>Shovel</strong>.</p>
+    <p><a href="/">Home</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
 
-  try {
-    const publicDir = await directories.open("public");
-    const file = await publicDir.getFileHandle(path.slice(1));
-    const blob = await file.getFile();
-
-    return new Response(blob, {
-      headers: {
-        "Content-Type": getContentType(path),
-      },
+function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
+  return \`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\${title} - ${config.name}</title>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main>\${content}</main>
+</body>
+</html>\`;
+}
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(router.handle(event.request));
+});
+`;
+}
+function generateFullStackHtmx(config) {
+  const ext = config.typescript ? "ts" : "js";
+  const t = config.typescript;
+  return `import { Router } from "@b9g/router";
+import { logger } from "@b9g/router/middleware";
+
+const router = new Router();
+router.use(logger());
+
+// API routes \u2014 return HTML fragments when HTMX requests, JSON otherwise
+router.route("/api/hello").get((req) => {
+  const data = {
+    message: "Hello from the API!",
+    timestamp: new Date().toISOString(),
+  };
+
+  if (req.headers.get("HX-Request")) {
+    return new Response(\`<p>\${data.message}</p><p><small>\${data.timestamp}</small></p>\`, {
+      headers: { "Content-Type": "text/html" },
     });
-  } catch {
-    // Try index.html for SPA routing
-    try {
-      const publicDir = await directories.open("public");
-      const file = await publicDir.getFileHandle("index.html");
-      const blob = await file.getFile();
-      return new Response(blob, {
-        headers: { "Content-Type": "text/html" },
-      });
-    } catch {
-      return new Response("Not Found", { status: 404 });
-    }
   }
+  return Response.json(data);
 });
 
-function getContentType(path${config.typescript ? ": string" : ""})${config.typescript ? ": string" : ""} {
-  const ext = path.split(".").pop()?.toLowerCase();
-  const types${config.typescript ? ": Record<string, string>" : ""} = {
-    html: "text/html",
-    css: "text/css",
-    js: "text/javascript",
-    json: "application/json",
-    png: "image/png",
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    gif: "image/gif",
-    svg: "image/svg+xml",
-    ico: "image/x-icon",
-  };
-  return types[ext || ""] || "application/octet-stream";
+router.route("/api/echo").post(async (req) => {
+  const body = await req.json();
+  return Response.json({ echo: body });
+});
+
+// HTML pages
+router.route("/").get(() => {
+  return new Response(renderPage("Home", \`
+    <h1>Welcome to ${config.name}</h1>
+    <p>Edit <code>src/app.${ext}</code> to get started.</p>
+    <button hx-get="/api/hello" hx-target="#result" hx-swap="innerHTML">Call API</button>
+    <div id="result"></div>
+    <ul>
+      <li><a href="/about">About</a></li>
+      <li><a href="/api/hello">API: /api/hello</a></li>
+    </ul>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
+
+router.route("/about").get(() => {
+  return new Response(renderPage("About", \`
+    <h1>About</h1>
+    <p>This is a full-stack app built with <strong>Shovel</strong> and <strong>HTMX</strong>.</p>
+    <p><a href="/">Home</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
+
+function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
+  return \`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\${title} - ${config.name}</title>
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main>\${content}</main>
+</body>
+</html>\`;
 }
 
+self.addEventListener("fetch", (event) => {
+  event.respondWith(router.handle(event.request));
+});
+`;
+}
+function generateFullStackAlpine(config) {
+  const ext = config.typescript ? "ts" : "js";
+  const t = config.typescript;
+  return `import { Router } from "@b9g/router";
+import { logger } from "@b9g/router/middleware";
+
+const router = new Router();
+router.use(logger());
+
+// API routes
+router.route("/api/hello").get(() => {
+  return Response.json({
+    message: "Hello from the API!",
+    timestamp: new Date().toISOString(),
+  });
+});
+
+router.route("/api/echo").post(async (req) => {
+  const body = await req.json();
+  return Response.json({ echo: body });
+});
+
+// HTML pages
+router.route("/").get(() => {
+  return new Response(renderPage("Home", \`
+    <h1>Welcome to ${config.name}</h1>
+    <p>Edit <code>src/app.${ext}</code> to get started.</p>
+    <div x-data="{ result: null }">
+      <button @click="fetch('/api/hello').then(r => r.json()).then(d => result = d)">Call API</button>
+      <div id="result" x-show="result">
+        <p x-text="result?.message"></p>
+        <p><small x-text="result?.timestamp"></small></p>
+      </div>
+    </div>
+    <ul>
+      <li><a href="/about">About</a></li>
+      <li><a href="/api/hello">API: /api/hello</a></li>
+    </ul>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
+
+router.route("/about").get(() => {
+  return new Response(renderPage("About", \`
+    <h1>About</h1>
+    <p>This is a full-stack app built with <strong>Shovel</strong> and <strong>Alpine.js</strong>.</p>
+    <p><a href="/">Home</a></p>
+  \`), {
+    headers: { "Content-Type": "text/html" },
+  });
+});
+
+function renderPage(title${t ? ": string" : ""}, content${t ? ": string" : ""})${t ? ": string" : ""} {
+  return \`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\${title} - ${config.name}</title>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main>\${content}</main>
+</body>
+</html>\`;
+}
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(router.handle(event.request));
+});
+`;
+}
+function generateFullStackCrank(config) {
+  const t = config.typescript;
+  return `import { Router } from "@b9g/router";
+import { logger } from "@b9g/router/middleware";
+import {renderer} from "@b9g/crank/html";
+
+const router = new Router();
+router.use(logger());
+
+const css = \`
+${css}
+\`;
+
+function Page({title, children}${t ? ": {title: string, children: unknown}" : ""}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title} - ${config.name}</title>
+        <style>{css}</style>
+      </head>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+
+// API routes
+router.route("/api/hello").get(() => {
+  return Response.json({
+    message: "Hello from the API!",
+    timestamp: new Date().toISOString(),
+  });
+});
+
+router.route("/api/echo").post(async (req) => {
+  const body = await req.json();
+  return Response.json({ echo: body });
+});
+
+// HTML pages
+router.route("/").get(async () => {
+  const html = await renderer.render(
+    <Page title="Home">
+      <h1>Welcome to ${config.name}</h1>
+      <p>Edit <code>src/app.${t ? "tsx" : "jsx"}</code> to get started.</p>
+      <ul>
+        <li><a href="/about">About</a></li>
+        <li><a href="/api/hello">API: /api/hello</a></li>
+      </ul>
+    </Page>
+  );
+  return new Response("<!DOCTYPE html>" + html, {
+    headers: { "Content-Type": "text/html" },
+  });
+});
+
+router.route("/about").get(async () => {
+  const html = await renderer.render(
+    <Page title="About">
+      <h1>About</h1>
+      <p>This is a full-stack app built with <strong>Shovel</strong> and <strong>Crank.js</strong>.</p>
+      <p><a href="/">Home</a></p>
+    </Page>
+  );
+  return new Response("<!DOCTYPE html>" + html, {
+    headers: { "Content-Type": "text/html" },
+  });
+});
+
 self.addEventListener("fetch", (event) => {
   event.respondWith(router.handle(event.request));
 });
@@ -483,25 +974,32 @@ function generateReadme(config) {
   const templateDescriptions = {
     "hello-world": "A minimal Shovel application",
     api: "A REST API with JSON endpoints",
-    "static-site": "A static file server",
-    "full-stack": "A full-stack app with API routes and static files"
+    "static-site": "A static site with server-rendered pages",
+    "full-stack": "A full-stack app with HTML pages and API routes"
+  };
+  const frameworkDescriptions = {
+    vanilla: "",
+    htmx: " using [HTMX](https://htmx.org)",
+    alpine: " using [Alpine.js](https://alpinejs.dev)",
+    crank: " using [Crank.js](https://crank.js.org)"
   };
+  const ext = config.uiFramework === "crank" ? config.typescript ? "tsx" : "jsx" : config.typescript ? "ts" : "js";
   return `# ${config.name}
 
-${templateDescriptions[config.template]}, built with [Shovel](https://github.com/bikeshaving/shovel).
+${templateDescriptions[config.template]}${frameworkDescriptions[config.uiFramework]}, built with [Shovel](https://github.com/bikeshaving/shovel).
 
 ## Getting Started
 
 \`\`\`bash
 npm install
-npm run dev
+npm run develop
 \`\`\`
 
 Open http://localhost:7777
 
 ## Scripts
 
-- \`npm run dev\` - Start development server
+- \`npm run develop\` - Start development server
 - \`npm run build\` - Build for production
 - \`npm start\` - Run production build
 
@@ -510,8 +1008,8 @@ Open http://localhost:7777
 \`\`\`
 ${config.name}/
 \u251C\u2500\u2500 src/
-\u2502   \u2514\u2500\u2500 app.${config.typescript ? "ts" : "js"}    # Application entry point
-${config.template === "static-site" || config.template === "full-stack" ? "\u251C\u2500\u2500 public/           # Static files\n\u2502   \u251C\u2500\u2500 index.html\n\u2502   \u2514\u2500\u2500 styles.css\n" : ""}\u251C\u2500\u2500 package.json
+\u2502   \u2514\u2500\u2500 app.${ext}    # Application entry point
+\u251C\u2500\u2500 package.json
 ${config.typescript ? "\u251C\u2500\u2500 tsconfig.json\n" : ""}\u2514\u2500\u2500 README.md
 \`\`\`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b9g/shovel",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "description": "ServiceWorker-first universal deployment platform. Write ServiceWorker apps once, deploy anywhere (Node/Bun/Cloudflare). Registry-based multi-app orchestration.",
   "license": "MIT",
   "repository": {
@@ -15,14 +15,14 @@
   },
   "dependencies": {
     "@b9g/async-context": "^0.2.1",
-    "@b9g/cache": "^0.2.1",
-    "@b9g/filesystem": "^0.1.9",
+    "@b9g/cache": "^0.2.2",
+    "@b9g/filesystem": "^0.1.10",
     "@b9g/http-errors": "^0.2.1",
     "@b9g/node-webworker": "^0.2.1",
-    "@b9g/platform": "^0.1.16",
-    "@b9g/platform-bun": "^0.1.14",
-    "@b9g/platform-cloudflare": "^0.1.14",
-    "@b9g/platform-node": "^0.1.16",
+    "@b9g/platform": "^0.1.17",
+    "@b9g/platform-bun": "^0.1.15",
+    "@b9g/platform-cloudflare": "^0.1.15",
+    "@b9g/platform-node": "^0.1.17",
     "@clack/prompts": "^0.7.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
@@ -36,7 +36,7 @@
     "@b9g/assets": "^0.2.1",
     "@b9g/crank": "^0.7.2",
     "@b9g/libuild": "^0.1.22",
-    "@b9g/router": "^0.2.1",
+    "@b9g/router": "^0.2.2",
     "@logtape/file": "^1.0.0",
     "@types/bun": "^1.3.4",
     "@typescript-eslint/eslint-plugin": "^8.0.0",