@b9g/shovel 0.2.3 → 0.2.6

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to Shovel will be documented in this file.
 
+## [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/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2023 Brian Kim
+Copyright 2026 Brian Kim
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,15 +1,31 @@
-# Shovel.js 🪏
+# Shovel.js
 
-**The portable meta-framework built on web standards.**
+**Run Service Workers anywhere.**
 
-Shovel is a CLI platform for developing and deploying service workers as application servers.
+Shovel is a meta-framework for building server applications using the ServiceWorker API. Write once, deploy to Node.js, Bun, or Cloudflare Workers.
 
-```javascript
-// src/server.ts
+```typescript
+// server.ts
 import {Router} from "@b9g/router";
+
 const router = new Router();
 
-router.route("/").get(() => new Response("Hello world"));
+router.route("/kv/:key")
+  .get(async (req, ctx) => {
+    const cache = await self.caches.open("kv");
+    const cached = await cache.match(ctx.params.key);
+    return cached ?? new Response(null, {status: 404});
+  })
+  .put(async (req, ctx) => {
+    const cache = await self.caches.open("kv");
+    await cache.put(ctx.params.key, new Response(await req.text()));
+    return new Response(null, {status: 201});
+  })
+  .delete(async (req, ctx) => {
+    const cache = await self.caches.open("kv");
+    await cache.delete(ctx.params.key);
+    return new Response(null, {status: 204});
+  });
 
 self.addEventListener("fetch", (ev) => {
   ev.respondWith(router.handle(ev.request));
@@ -17,30 +33,20 @@ self.addEventListener("fetch", (ev) => {
 ```
 
 ```bash
-shovel develop src/server.ts
-```
-## Quick Start
+$ shovel develop server.ts
+listening on http://localhost:7777
 
-```javascript
-// src/server.js
-import {Router} from "@b9g/router";
+$ curl -X PUT :7777/kv/hello -d "world"
 
-const router = new Router();
-
-router.route("/").get(() => new Response("Hello World"));
-
-router.route("/greet/:name").get((request, {params}) => {
-  return new Response(`Hello ${params.name}`);
-});
-
-self.addEventListener("fetch", (event) => {
-  event.respondWith(router.handle(event.request));
-});
+$ curl :7777/kv/hello
+world
 ```
 
+## Quick Start
+
 ```bash
 # Create a new project
-npm create @b9g/shovel my-app
+npm create shovel my-app
 
 # Development with hot reload
 npx @b9g/shovel develop src/server.ts
@@ -51,19 +57,23 @@ npx @b9g/shovel build src/server.ts --platform=bun
 npx @b9g/shovel build src/server.ts --platform=cloudflare
 ```
 
+## Documentation
+
+Visit [shovel.js.org](https://shovel.js.org) for guides and API reference.
 
 ## Web Standards
+
 Shovel is obsessively standards-first. All Shovel APIs use web standards, and Shovel implements/shims useful standards when they're missing.
 
-  | API | Standard | Purpose |
-  |-----|----------|--------------|
-  | `fetch()` | [Fetch](https://fetch.spec.whatwg.org) | Networking |
-  | `install`, `activate`, `fetch` events | [Service Workers](https://w3c.github.io/ServiceWorker/) | Server lifecycle |
-  | `AsyncContext.Variable` | [TC39 Stage 2](https://github.com/tc39/proposal-async-context) | Request-scoped state |
-  | `self.caches` | [Cache API](https://w3c.github.io/ServiceWorker/#cache-interface) | Response caching |
-  | `self.directories` | [FileSystem API](https://fs.spec.whatwg.org/) | Storage (local, S3, R2) |
-  | `self.cookieStore` | [CookieStore API](https://cookiestore.spec.whatwg.org) | Cookie management |
-  | `URLPattern` | [URLPattern](https://urlpattern.spec.whatwg.org/) | Route matching |
+| API | Standard | Purpose |
+|-----|----------|---------|
+| `fetch()` | [Fetch](https://fetch.spec.whatwg.org) | Networking |
+| `install`, `activate`, `fetch` events | [Service Workers](https://w3c.github.io/ServiceWorker/) | Server lifecycle |
+| `AsyncContext.Variable` | [TC39 Stage 2](https://github.com/tc39/proposal-async-context) | Request-scoped state |
+| `self.caches` | [Cache API](https://w3c.github.io/ServiceWorker/#cache-interface) | Response caching |
+| `self.directories` | [FileSystem API](https://fs.spec.whatwg.org/) | Storage (local, S3, R2) |
+| `self.cookieStore` | [CookieStore API](https://cookiestore.spec.whatwg.org) | Cookie management |
+| `URLPattern` | [URLPattern](https://urlpattern.spec.whatwg.org/) | Route matching |
 
 Your code uses standards. Shovel makes them work everywhere.
 
@@ -87,7 +97,7 @@ The core abstraction is the **ServiceWorker-style storage pattern**. Globals pro
 const cache  = await self.caches.open("sessions");     // Cache API
 const dir    = await self.directories.open("uploads"); // FileSystem API
 const db     = self.databases.get("main");             // Zen DB (opened on activate)
-const logger = self.loggers.get(["app", "requests"]); // LogTape
+const logger = self.loggers.get(["app", "requests"]);  // LogTape
 ```
 
 Each storage type is:
@@ -168,27 +178,25 @@ Shovel's configuration follows these principles:
 
 ```json
 {
-  "port": "PORT || 3000",
-  "host": "HOST || localhost",
-  "workers": "WORKERS ?? 1",
+  "port": "$PORT || 7777",
+  "host": "$HOST || localhost",
+  "workers": "$WORKERS ?? 1",
   "caches": {
     "sessions": {
       "module": "@b9g/cache-redis",
-      "export": "RedisCache",
-      "url": "REDIS_URL"
+      "url": "$REDIS_URL"
     }
   },
   "directories": {
     "uploads": {
       "module": "@b9g/filesystem-s3",
-      "export": "S3Directory",
-      "bucket": "S3_BUCKET"
+      "bucket": "$S3_BUCKET"
     }
   },
   "databases": {
     "main": {
       "module": "@b9g/zen/bun",
-      "url": "DATABASE_URL"
+      "url": "$DATABASE_URL"
     }
   },
   "logging": {
@@ -201,19 +209,17 @@ 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"
+      "url": "$REDIS_URL"
     }
   }
 }
@@ -232,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"
     }
   }
@@ -292,7 +296,7 @@ Configure database drivers using the same `module`/`export` pattern:
   "databases": {
     "main": {
       "module": "@b9g/zen/bun",
-      "url": "DATABASE_URL"
+      "url": "$DATABASE_URL"
     }
   }
 }
@@ -359,7 +363,7 @@ $DATADIR/uploads        → joins env var with path segment
 
 ```json
 {
-  "port": "$PORT || 3000",
+  "port": "$PORT || 7777",
   "host": "$HOST || 0.0.0.0",
   "directories": {
     "server": { "path": "[outdir]/server" },
@@ -388,17 +392,17 @@ console.log(config.port); // Resolved value
 | Package | Description |
 |---------|-------------|
 | `@b9g/shovel` | CLI for development and deployment |
-| `@b9g/platform` | Core runtime and platform APIs |
-| `@b9g/platform-node` | Node.js adapter |
-| `@b9g/platform-bun` | Bun.js adapter |
-| `@b9g/platform-cloudflare` | Cloudflare Workers adapter |
 | `@b9g/router` | URLPattern-based routing with middleware |
 | `@b9g/cache` | Cache API implementation |
 | `@b9g/filesystem` | File System Access implementation |
-| `@b9g/match-pattern` | URLPattern with extensions (100% WPT) |
 | `@b9g/async-context` | AsyncContext.Variable implementation |
 | `@b9g/http-errors` | Standard HTTP error classes |
 | `@b9g/assets` | Static asset handling |
+| `@b9g/platform` | Core runtime and platform APIs |
+| `@b9g/platform-node` | Node.js adapter |
+| `@b9g/platform-bun` | Bun adapter |
+| `@b9g/platform-cloudflare` | Cloudflare Workers adapter |
+| `@b9g/match-pattern` | URLPattern with extensions (100% WPT) |
 
 ## License
 

package/bin/cli.js

@@ -5,7 +5,7 @@ import {
   DEFAULTS,
   findProjectRoot,
   loadConfig
-} from "../src/_chunks/chunk-NZVIBZYG.js";
+} from "../src/_chunks/chunk-7GONPLNW.js";
 
 // bin/cli.ts
 import { resolve, relative } from "path";
@@ -75,15 +75,23 @@ program.command("develop <entrypoint>").description("Start development server wi
   DEFAULTS.WORKERS
 ).option("--platform <name>", "Runtime platform (node, cloudflare, bun)").action(async (entrypoint, options) => {
   checkPlatformReexec(options);
-  const { developCommand } = await import("../src/_chunks/develop-6DPQE5H4.js");
+  const { developCommand } = await import("../src/_chunks/develop-JUQG2G7M.js");
   await developCommand(entrypoint, options, config);
 });
+program.command("create [name]").description("Create a new Shovel project").action(async (name) => {
+  if (name) {
+    process.argv = [process.argv[0], process.argv[1], name];
+  } else {
+    process.argv = [process.argv[0], process.argv[1]];
+  }
+  await import("./create.js");
+});
 program.command("build <entrypoint>").description("Build app for production").option("--platform <name>", "Runtime platform (node, cloudflare, bun)").option(
   "--lifecycle [stage]",
   "Run ServiceWorker lifecycle after build (install or activate, default: activate)"
 ).action(async (entrypoint, options) => {
   checkPlatformReexec(options);
-  const { buildCommand } = await import("../src/_chunks/build-BM4A74RI.js");
+  const { buildCommand } = await import("../src/_chunks/build-KBQU2OA7.js");
   await buildCommand(entrypoint, options, config);
   process.exit(0);
 });

package/bin/create.js

@@ -68,12 +68,12 @@ async function main() {
       {
         value: "static-site",
         label: "Static Site",
-        hint: "Serve files from public/ directory"
+        hint: "Server-rendered HTML pages"
       },
       {
         value: "full-stack",
         label: "Full Stack",
-        hint: "HTML pages + API routes + static assets"
+        hint: "HTML pages + API routes"
       }
     ]
   });
@@ -81,6 +81,40 @@ async function main() {
     outro("Project creation cancelled");
     process.exit(0);
   }
+  let uiFramework = "vanilla";
+  if (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 typescript = await confirm({
     message: "Use TypeScript?",
     initialValue: true
@@ -119,7 +153,8 @@ async function main() {
     name: projectName,
     platform,
     template,
-    typescript
+    typescript,
+    uiFramework
   };
   const s = spinner();
   s.start("Creating your Shovel project...");
@@ -132,9 +167,9 @@ 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:3000");
+    console.info("Your app will be available at: http://localhost:7777");
     console.info("");
   } catch (error) {
     s.stop("Failed to create project");
@@ -145,26 +180,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 +212,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 +236,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 +260,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":
@@ -352,59 +345,282 @@ 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" },
+    });
+  }
+
+  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" },
+    });
   }
 
-  // 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("Not Found", { status: 404 });
+}
 
-    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>\`;
+}
+`;
+}
+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" },
     });
-  } catch {
-    // File not found - return 404
-    return new Response("Not Found", { status: 404 });
   }
+
+  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 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>
+  <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";
 
 const router = new Router();
@@ -422,58 +638,272 @@ 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();
+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>\`;
+}
 
-    return new Response(blob, {
-      headers: {
-        "Content-Type": getContentType(path),
-      },
+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";
+
+const router = new Router();
+
+// 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";
+
+const router = new Router();
+
+// 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 {renderer} from "@b9g/crank/html";
+
+const router = new Router();
+
+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 +913,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:3000
+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 +947,8 @@ Open http://localhost:3000
 \`\`\`
 ${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,8 +1,12 @@
 {
   "name": "@b9g/shovel",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "description": "ServiceWorker-first universal deployment platform. Write ServiceWorker apps once, deploy anywhere (Node/Bun/Cloudflare). Registry-based multi-app orchestration.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bikeshaving/shovel.git"
+  },
   "bin": {
     "shovel": "bin/cli.js",
     "create-shovel": "bin/create.js",
@@ -10,15 +14,15 @@
     "create": "bin/create.js"
   },
   "dependencies": {
-    "@b9g/async-context": "^0.2.0",
-    "@b9g/cache": "^0.2.0",
-    "@b9g/filesystem": "^0.1.8",
-    "@b9g/http-errors": "^0.2.0",
-    "@b9g/node-webworker": "^0.2.0",
-    "@b9g/platform": "^0.1.15",
-    "@b9g/platform-bun": "^0.1.13",
-    "@b9g/platform-cloudflare": "^0.1.13",
-    "@b9g/platform-node": "^0.1.15",
+    "@b9g/async-context": "^0.2.1",
+    "@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.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",
@@ -29,18 +33,11 @@
     "zod": "^3.23.0"
   },
   "devDependencies": {
-    "@b9g/assets": "^0.2.0",
-    "@b9g/cache": "^0.2.0",
+    "@b9g/assets": "^0.2.1",
     "@b9g/crank": "^0.7.2",
-    "@logtape/file": "^1.0.0",
-    "@b9g/filesystem": "^0.1.8",
-    "@b9g/http-errors": "^0.2.0",
     "@b9g/libuild": "^0.1.22",
-    "@b9g/platform": "^0.1.15",
-    "@b9g/platform-bun": "^0.1.13",
-    "@b9g/platform-cloudflare": "^0.1.13",
-    "@b9g/platform-node": "^0.1.15",
-    "@b9g/router": "^0.2.0",
+    "@b9g/router": "^0.2.1",
+    "@logtape/file": "^1.0.0",
     "@types/bun": "^1.3.4",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",

package/src/_chunks/{build-BM4A74RI.js → build-KBQU2OA7.js}

@@ -1,11 +1,11 @@
 import {
   ServerBundler,
   loadPlatformModule
-} from "./chunk-WVHECOTO.js";
+} from "./chunk-ABGHNBNM.js";
 import {
   findProjectRoot,
   findWorkspaceRoot
-} from "./chunk-NZVIBZYG.js";
+} from "./chunk-7GONPLNW.js";
 
 // src/commands/build.ts
 import { resolve, join, dirname, basename } from "path";

package/src/_chunks/{chunk-NZVIBZYG.js → chunk-7GONPLNW.js}

@@ -36,7 +36,7 @@ import { z } from "zod";
 var DANGEROUS_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 var DEFAULTS = {
   SERVER: {
-    PORT: 3e3,
+    PORT: 7777,
     HOST: "0.0.0.0"
   },
   WORKERS: 1

package/src/_chunks/{chunk-WVHECOTO.js → chunk-ABGHNBNM.js}

@@ -4,7 +4,7 @@ import {
   generateStorageTypes,
   getNodeModulesPath,
   loadRawConfig
-} from "./chunk-NZVIBZYG.js";
+} from "./chunk-7GONPLNW.js";
 
 // src/utils/bundler.ts
 import * as ESBuild2 from "esbuild";

package/src/_chunks/{develop-6DPQE5H4.js → develop-JUQG2G7M.js}

@@ -1,10 +1,10 @@
 import {
   ServerBundler,
   loadPlatformModule
-} from "./chunk-WVHECOTO.js";
+} from "./chunk-ABGHNBNM.js";
 import {
   DEFAULTS
-} from "./chunk-NZVIBZYG.js";
+} from "./chunk-7GONPLNW.js";
 
 // src/commands/develop.ts
 import { getLogger } from "@logtape/logtape";