@kazzle/app 0.1.693

package/templates/ui-app/components/ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{{APP_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/ui-app/components/ui/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "kazzle-ui-app-template",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "kazzle run -- vite",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "preview": "kazzle run -- vite preview",
+    "check": "bun run typecheck && bun run build"
+  },
+  "dependencies": {
+    "@kazzle/app": "{{KAZZLE_APP_VERSION}}",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^0.21.1",
+    "workbox-window": "^7.3.0"
+  }
+}

package/templates/ui-app/components/ui/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="14" fill="hsl(230,65%,88%)"/>
+  <text x="32" y="46" text-anchor="middle" font-family="system-ui,sans-serif" font-size="40" font-weight="600" fill="hsl(230,50%,25%)">K</text>
+</svg>

package/templates/ui-app/components/ui/src/App.tsx

@@ -0,0 +1,41 @@
+/**
+ * Stub App component. Replace this with whatever your app actually does.
+ *
+ * The counter exists so the template ships with something visibly interactive
+ * out of the box — handy for sanity-checking that React mounted, that HMR
+ * works, and that the build pipeline produces a working bundle.
+ *
+ * STYLING: use Tailwind utility classes in `className` for layout/spacing, and
+ * the ready-made primitives (`.card`, `.btn`, `.btn-primary`, `.muted`, …)
+ * from `src/styles/theme.css` for common building blocks. See that file to
+ * re-skin via design tokens or add new primitives.
+ */
+
+import { useState } from 'react';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="page">
+      <header className="stack">
+        <h1>{{APP_NAME}}</h1>
+        <p className="muted">Edit src/App.tsx to get started</p>
+      </header>
+
+      <div className="card row justify-between">
+        <span className="muted">Count</span>
+        <span className="text-2xl font-semibold tabular-nums">{count}</span>
+      </div>
+
+      <div className="row">
+        <button className="btn btn-primary" onClick={() => setCount(c => c + 1)}>
+          Increment
+        </button>
+        <button className="btn" onClick={() => setCount(0)} disabled={count === 0}>
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/ui-app/components/ui/src/main.tsx

@@ -0,0 +1,24 @@
+/**
+ * UI-only app entry point.
+ *
+ * Nothing fancy: mount React into `#root` and let it take over. This template
+ * has no server, no database, no sync — everything is local component state.
+ * If you need persistence, the most common upgrades are:
+ *
+ *   - "I want to talk to an API" → add a server component (see `ui-db-app`).
+ *   - "I want offline-first reads + multi-device sync" → see `realtime-app`.
+ *
+ * `StrictMode` double-invokes effects in dev to catch bugs from accidental
+ * state mutation. It has no effect in production builds.
+ */
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles/theme.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/ui-app/components/ui/src/styles/theme.css

@@ -0,0 +1,181 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ *  Kazzle app theme — the ONE styling entry point for this app.
+ *
+ *  This file is the design system. It is imported once (in `main.tsx`) and
+ *  gives you three things, in order:
+ *
+ *    1. Tailwind v4            — every utility class (`flex`, `gap-4`,
+ *                                `rounded-xl`, `text-zinc-500`, …) works in
+ *                                your JSX. No config file, no PostCSS setup.
+ *    2. Design tokens (@theme) — colors, radius, fonts as CSS variables. Edit
+ *                                these to re-skin the whole app at once.
+ *    3. Primitives (@layer)    — a few ready-made classes (`.btn`, `.card`,
+ *                                `.input`, `.field`, `.page`, `.stack`,
+ *                                `.row`) so common UI looks good with zero
+ *                                effort.
+ *
+ *  HOW TO STYLE — pick whichever is easier, mix freely:
+ *    • Tailwind utilities in `className` for one-off layout/spacing.
+ *    • A primitive class (`.btn`, `.card`) for the common building blocks.
+ *
+ *  WHY IT'S BUILT THIS WAY: styles live in the markup (utilities) or in named
+ *  primitives here — never in a separate per-screen stylesheet keyed to class
+ *  names you have to keep in sync. Rewriting a component can't silently strip
+ *  its styling, because the styling travels with the elements.
+ *
+ *  TO EXTEND: add new design tokens under `@theme`, and add new reusable
+ *  building blocks under `@layer components`. Keep app-specific one-offs as
+ *  inline Tailwind utilities in the component instead of adding a class here.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@import "tailwindcss";
+
+/* ── Design tokens ──────────────────────────────────────────────────────────
+ * Exposed to Tailwind as `bg-surface`, `text-fg`, `text-muted`,
+ * `bg-accent`, `rounded-app`, etc. Change a value here and every utility and
+ * primitive that references it updates at once. */
+@theme {
+  --color-bg: #0b0f1a;
+  --color-surface: #131a2a;
+  --color-surface-raised: #1b2438;
+  --color-fg: #e8edf7;
+  --color-muted: #94a3b8;
+  --color-border: rgba(148, 163, 184, 0.18);
+  --color-accent: #6366f1;
+  --color-accent-hover: #4f46e5;
+  --color-accent-fg: #ffffff;
+  --color-danger: #f87171;
+
+  --radius-app: 0.875rem;
+
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* ── Base ────────────────────────────────────────────────────────────────────
+ * Sensible document defaults so even unstyled markup reads well. */
+@layer base {
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1 {
+    font-size: 1.875rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+/* ── Primitives ──────────────────────────────────────────────────────────────
+ * Reusable building blocks. Use them directly (`<button class="btn btn-primary">`)
+ * or layer Tailwind utilities on top. Add new ones here when a pattern repeats. */
+@layer components {
+  /* Page wrapper — centers content with comfortable gutters. */
+  .page {
+    width: min(100% - 2rem, 48rem);
+    margin-inline: auto;
+    padding-block: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  /* Vertical / horizontal stacks. */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  /* Card surface. */
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-app);
+    padding: 1.25rem;
+  }
+
+  /* Buttons. `.btn` is the neutral base; add `.btn-primary` for the accent. */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1rem;
+    border-radius: var(--radius-app);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-fg);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+  }
+  .btn:hover {
+    background: color-mix(in srgb, var(--color-surface-raised) 80%, white);
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .btn-primary {
+    background: var(--color-accent);
+    border-color: transparent;
+    color: var(--color-accent-fg);
+  }
+  .btn-primary:hover {
+    background: var(--color-accent-hover);
+  }
+
+  /* Text input / select. */
+  .input {
+    width: 100%;
+    min-width: 0;
+    padding: 0.625rem 0.875rem;
+    border-radius: var(--radius-app);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-fg);
+    font: inherit;
+    outline: none;
+  }
+  .input:focus {
+    border-color: var(--color-accent);
+  }
+
+  /* Labelled field: <label class="field"><span>Label</span><input class="input"/></label> */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--color-muted);
+  }
+
+  /* Muted helper / secondary text. */
+  .muted {
+    color: var(--color-muted);
+  }
+}

package/templates/ui-app/components/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["node"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/ui-app/components/ui/vite.config.ts

@@ -0,0 +1,97 @@
+/**
+ * Vite config for the UI component.
+ *
+ * Kazzle preview/runtime wiring (HOST/PORT binding, strictPort, allowedHosts,
+ * backend proxy) lives in @kazzle/app/vite — the ONE shared place that must
+ * never be reinvented. This file only declares plugins and spreads
+ * `kazzleAppVite(command)`. This template has no backend component, so no
+ * proxy options are passed; if you add one later, pass
+ * `{ apiComponent, proxyPaths }` (see @kazzle/app/vite).
+ *
+ * The one non-obvious thing left here: we register a service worker via
+ * `vite-plugin-pwa`, but ONLY for production builds. In dev, a service worker
+ * would aggressively cache module responses and break Vite's HMR. The
+ * `devUnregisterServiceWorker` plugin below cleans up stale SWs left by a
+ * previous built visit to the same origin. Do not enable `devOptions`.
+ */
+
+import { defineConfig, type Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { VitePWA } from 'vite-plugin-pwa';
+import { kazzleAppVite } from '@kazzle/app/vite';
+
+/**
+ * Dev-only: any browser that previously visited a built/PWA-enabled version
+ * of this app at the same origin still has a service worker installed. With
+ * `devOptions.enabled: false` we don't serve a SW in dev, so the stale SW
+ * keeps intercepting requests with its old precache and the page renders
+ * without current CSS/JS. This plugin responds to /sw.js (and the PWA
+ * register helper) with a tiny script that unregisters every SW, clears all
+ * caches, and reloads the page once. Once cleaned, the SW is gone and Vite
+ * HMR works normally. Safe to keep enabled — production builds skip this
+ * plugin (the `serve` command guard).
+ */
+function devUnregisterServiceWorker(): Plugin {
+  const body = [
+    "self.addEventListener('install', e => self.skipWaiting());",
+    "self.addEventListener('activate', e => e.waitUntil((async () => {",
+    "  try { await self.registration.unregister(); } catch {}",
+    "  try { const keys = await caches.keys(); await Promise.all(keys.map(k => caches.delete(k))); } catch {}",
+    "  const clients = await self.clients.matchAll({ type: 'window' });",
+    "  for (const c of clients) { try { c.navigate(c.url); } catch {} }",
+    "})());",
+  ].join('\n');
+  return {
+    name: 'kazzle:dev-unregister-sw',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.method !== 'GET') return next();
+        const url = req.url?.split('?')[0];
+        if (url !== '/sw.js' && url !== '/registerSW.js') return next();
+        res.setHeader('content-type', 'application/javascript; charset=utf-8');
+        res.setHeader('cache-control', 'no-store');
+        res.end(body);
+      });
+    },
+  };
+}
+
+export default defineConfig(({ command }) => ({
+  plugins: [
+    react(),
+    // Tailwind v4 — scans your JSX for utility classes and emits CSS. No
+    // tailwind.config.js or PostCSS setup needed; tokens/primitives live in
+    // src/styles/theme.css.
+    tailwindcss(),
+    devUnregisterServiceWorker(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        // Precache the static asset bundle. Network requests to anything
+        // ending in these extensions get served from cache first.
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            // External API responses get cached briefly and revalidated in
+            // the background. Edit this matcher if your app calls a
+            // different API host.
+            urlPattern: /^https:\/\/api\./i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              expiration: { maxEntries: 50, maxAgeSeconds: 300 },
+            },
+          },
+        ],
+      },
+      // Keep disabled in dev — see header comment.
+      devOptions: {
+        enabled: false,
+      },
+    }),
+  ],
+  // HOST/PORT/strictPort/allowedHosts — the port contract. See @kazzle/app/vite.
+  ...kazzleAppVite(command),
+}));

package/templates/ui-app/kazzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from '@kazzle/app';
+
+export default defineConfig({
+  /** Path to the app icon relative to the repo root. Uploaded to CDN on publish. */
+  icon: 'components/ui/public/favicon.svg',
+  /** App components — each entry defines a deployable unit. Max 1 UI component. */
+  components: [
+    { name: '{{APP_NAME}}', type: 'ui', path: './components/ui' },
+  ],
+});

package/templates/ui-app/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "{{APP_SLUG}}",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "workspaces": [
+    "components/*"
+  ],
+  "scripts": {
+    "dev": "bun run --cwd components/ui dev",
+    "check": "bun run --filter='./components/*' check"
+  },
+  "dependencies": {
+    "@kazzle/app": "{{KAZZLE_APP_VERSION}}"
+  }
+}

package/templates/ui-db-app/KAZZLE.md

@@ -0,0 +1,12 @@
+# Kazzle template context
+
+This app was created from the `ui-db` template. It already includes a React UI, a Hono process API, and ordinary Postgres wiring.
+
+Template-owned setup:
+- `kazzle.config.ts` declares the UI and server components. Database env vars are injected by `app.create`.
+- `components/server/index.ts` owns the Todo/category API and reads `DATABASE_URL` on the server only.
+- `components/ui/src/api.ts` is the typed browser client for the server API.
+- `components/ui/package.json` and `components/server/package.json` already contain the install, build, and check scripts.
+- The database schema is bootstrapped by template setup before the app is handed back.
+
+Do not rerun `db.connect`, rewrite manifest env refs, recreate server boilerplate, or reinstall dependencies as setup repair after `app.create` reports template setup complete. Change these files only when the user asks for behavior beyond this template.

package/templates/ui-db-app/components/server/index.ts

@@ -0,0 +1,218 @@
+/**
+ * {{APP_NAME}} — server component for the UI + database template.
+ *
+ * Plain HTTP CRUD over Postgres. No realtime sync — the UI fetches on mount
+ * and re-fetches after mutations. If you outgrow that pattern (multiple
+ * clients, offline support, low-latency reads), graduate to the realtime
+ * template.
+ *
+ * The endpoints mirror the two resources used by the example UI: categories
+ * and the todos that belong to them. The shape is intentionally simple so
+ * customers can use it as a starting point — copy a route, change the table
+ * name, change the columns, ship.
+ *
+ * Notes on the SQL:
+ *   - We use postgres.js's tagged-template form everywhere (sql`...`). Every
+ *     interpolated value is bound as a parameter, not concatenated — this
+ *     is the SQL-injection-safe pattern. Never use `sql.unsafe` here.
+ *   - `RETURNING *` plus a CTE-join pattern lets the API return the same
+ *     denormalised shape (todo + category name + category color) the UI
+ *     reads on GET. The UI never has to reconcile two response shapes.
+ *   - DELETEs of categories null out the foreign key on their todos rather
+ *     than cascading. That's a UX choice; flip it if you prefer cascade.
+ */
+
+import { serve } from '@hono/node-server';
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import postgres from 'postgres';
+
+const databaseUrl = process.env.DATABASE_URL;
+if (!databaseUrl) throw new Error('DATABASE_URL is required');
+
+const sql = postgres(databaseUrl);
+const app = new Hono();
+
+// CORS is wide-open here because the UI is served from the same origin in
+// production (the platform routes both surfaces under one host). Tighten
+// this if you ever expose the API to third-party clients.
+app.use('*', cors());
+
+// Liveness probe. Stays cheap on purpose — no DB query — so a slow query
+// doesn't get this endpoint marked unhealthy.
+app.get('/health', (c) => c.json({ ok: true }));
+
+// ── Categories ───────────────────────────────────────────────────────────
+
+app.get('/categories', async (c) => {
+  // LEFT JOIN + COUNT lets us return the sidebar count alongside the
+  // category in one round-trip — the UI doesn't have to make N+1 calls.
+  const rows = await sql`
+    SELECT c.id, c.name, c.color, COUNT(t.id)::int AS todo_count
+    FROM categories c
+    LEFT JOIN todos t ON t.category_id = c.id
+    GROUP BY c.id
+    ORDER BY c.name
+  `;
+  return c.json(rows);
+});
+
+app.post('/categories', async (c) => {
+  const body = await c.req.json<{ name?: string; color?: string }>();
+  const name = body.name?.trim();
+  if (!name) return c.json({ error: 'Name is required' }, 400);
+
+  const [category] = await sql`
+    INSERT INTO categories (name, color)
+    VALUES (${name}, ${body.color || '#6366f1'})
+    RETURNING id, name, color, 0::int AS todo_count
+  `;
+  return c.json(category, 201);
+});
+
+app.patch('/categories/:id', async (c) => {
+  const id = Number(c.req.param('id'));
+  if (!Number.isFinite(id)) return c.json({ error: 'Invalid category id' }, 400);
+
+  const body = await c.req.json<{ name?: string; color?: string }>();
+  const name = body.name?.trim();
+  const color = body.color?.trim();
+  if (name === undefined && color === undefined) {
+    return c.json({ error: 'No fields to update' }, 400);
+  }
+
+  // COALESCE(${value ?? null}, name) means "use the value if the client
+  // sent one, otherwise keep what's already there". This is the cleanest
+  // way to support partial updates without writing one route per field.
+  const [category] = await sql`
+    UPDATE categories
+    SET
+      name = COALESCE(${name ?? null}, name),
+      color = COALESCE(${color ?? null}, color)
+    WHERE id = ${id}
+    RETURNING id, name, color, (
+      SELECT COUNT(*)::int FROM todos WHERE category_id = ${id}
+    ) AS todo_count
+  `;
+  if (!category) return c.json({ error: 'Category not found' }, 404);
+  return c.json(category);
+});
+
+app.delete('/categories/:id', async (c) => {
+  const id = Number(c.req.param('id'));
+  if (!Number.isFinite(id)) return c.json({ error: 'Invalid category id' }, 400);
+
+  // Detach todos from the category instead of deleting them. Swap to
+  // `DELETE FROM todos WHERE category_id = ${id}` if you prefer cascade.
+  await sql`UPDATE todos SET category_id = NULL, updated_at = now() WHERE category_id = ${id}`;
+  await sql`DELETE FROM categories WHERE id = ${id}`;
+  return c.json({ ok: true });
+});
+
+// ── Todos ────────────────────────────────────────────────────────────────
+
+app.get('/todos', async (c) => {
+  const categoryId = c.req.query('category_id');
+  // Same denormalised shape regardless of whether the UI filtered by
+  // category. The UI doesn't need to know two response variants.
+  const rows = categoryId
+    ? await sql`
+      SELECT t.*, c.name AS category_name, c.color AS category_color
+      FROM todos t
+      LEFT JOIN categories c ON c.id = t.category_id
+      WHERE t.category_id = ${Number(categoryId)}
+      ORDER BY t.completed ASC, t.created_at DESC
+    `
+    : await sql`
+      SELECT t.*, c.name AS category_name, c.color AS category_color
+      FROM todos t
+      LEFT JOIN categories c ON c.id = t.category_id
+      ORDER BY t.completed ASC, t.created_at DESC
+    `;
+  return c.json(rows);
+});
+
+app.post('/todos', async (c) => {
+  const body = await c.req.json<{ title?: string; category_id?: number | null }>();
+  const title = body.title?.trim();
+  if (!title) return c.json({ error: 'Title is required' }, 400);
+
+  // CTE + JOIN returns the inserted todo plus its category metadata in one
+  // statement. Keeps the response shape identical to GET /todos.
+  const [todo] = await sql`
+    WITH inserted AS (
+      INSERT INTO todos (title, category_id)
+      VALUES (${title}, ${body.category_id ?? null})
+      RETURNING *
+    )
+    SELECT i.*, c.name AS category_name, c.color AS category_color
+    FROM inserted i
+    LEFT JOIN categories c ON c.id = i.category_id
+  `;
+  return c.json(todo, 201);
+});
+
+app.patch('/todos/:id', async (c) => {
+  const id = Number(c.req.param('id'));
+  if (!Number.isFinite(id)) return c.json({ error: 'Invalid todo id' }, 400);
+
+  const body = await c.req.json<{ title?: string; completed?: boolean; category_id?: number | null }>();
+  const title = body.title?.trim();
+
+  // category_id needs its own branch because `null` is a valid value
+  // (clearing the category) but `undefined` means "don't touch". COALESCE
+  // doesn't distinguish those, so we pick the query at the TS level.
+  const [todo] = body.category_id === undefined
+    ? await sql`
+      WITH updated AS (
+        UPDATE todos
+        SET
+          title = COALESCE(${title ?? null}, title),
+          completed = COALESCE(${body.completed ?? null}, completed),
+          updated_at = now()
+        WHERE id = ${id}
+        RETURNING *
+      )
+      SELECT u.*, c.name AS category_name, c.color AS category_color
+      FROM updated u
+      LEFT JOIN categories c ON c.id = u.category_id
+    `
+    : await sql`
+      WITH updated AS (
+        UPDATE todos
+        SET
+          title = COALESCE(${title ?? null}, title),
+          completed = COALESCE(${body.completed ?? null}, completed),
+          category_id = ${body.category_id},
+          updated_at = now()
+        WHERE id = ${id}
+        RETURNING *
+      )
+      SELECT u.*, c.name AS category_name, c.color AS category_color
+      FROM updated u
+      LEFT JOIN categories c ON c.id = u.category_id
+    `;
+  if (!todo) return c.json({ error: 'Todo not found' }, 404);
+  return c.json(todo);
+});
+
+app.delete('/todos/:id', async (c) => {
+  const id = Number(c.req.param('id'));
+  if (!Number.isFinite(id)) return c.json({ error: 'Invalid todo id' }, 400);
+
+  await sql`DELETE FROM todos WHERE id = ${id}`;
+  return c.json({ ok: true });
+});
+
+// PORT and HOST come from the platform. The fallback is for direct local
+// invocations.
+// ─────────────────────────────────────────────────────────────────────────
+//  DO NOT CHANGE THE NEXT 4 LINES.  DO NOT ADD FALLBACKS.  DO NOT HARDCODE.
+//  PORT and HOST are injected by `kazzle run`. Missing values must throw.
+// ─────────────────────────────────────────────────────────────────────────
+if (!process.env.PORT || !process.env.HOST) {
+  throw new Error('PORT and HOST must be set by "kazzle run" — never hardcode them.');
+}
+const port = Number(process.env.PORT);
+const hostname = process.env.HOST;
+serve({ fetch: app.fetch, port, hostname });