@cfbender/cesium 0.5.1 → 0.6.0

package/src/render/theme.ts

@@ -13,6 +13,9 @@ export interface ThemePalette {
   olive: string;
   codeBg: string;
   codeFg: string;
+  diffAdd: string; // line-tint and connector color for additions
+  diffRemove: string; // line-tint and connector color for deletions
+  diffChange: string; // connector color for replacements
 }
 
 export interface ThemeFonts {
@@ -56,6 +59,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#8FA86E",
     codeBg: "#2B1F22",
     codeFg: "#DDD3C7",
+    diffAdd: "#6D9E60",
+    diffRemove: "#C75B5B",
+    diffChange: "#D4A85A",
   },
   // claret-light: deep-rose-on-warm-cream — derived from claret.nvim light palette.
   // (this is the old "claret" palette, now renamed)
@@ -72,6 +78,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#5A6B40",
     codeBg: "#180810",
     codeFg: "#DDD3C7",
+    diffAdd: "#5A6B40",
+    diffRemove: "#9E3838",
+    diffChange: "#B07A2A",
   },
   // claret: alias for claret-dark (backward compat)
   claret: {
@@ -87,6 +96,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#8FA86E",
     codeBg: "#2B1F22",
     codeFg: "#DDD3C7",
+    diffAdd: "#6D9E60",
+    diffRemove: "#C75B5B",
+    diffChange: "#D4A85A",
   },
   // Warm: ivory/clay/oat — the html-effectiveness reference palette.
   warm: {
@@ -102,6 +114,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#788C5D",
     codeBg: "#141413",
     codeFg: "#E8E6DE",
+    diffAdd: "#788C5D",
+    diffRemove: "#C0392B",
+    diffChange: "#D97757",
   },
   // Cool: desaturated blue-grey — technical, trustworthy.
   cool: {
@@ -117,6 +132,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#4E8A6A",
     codeBg: "#1B2333",
     codeFg: "#D8E0ED",
+    diffAdd: "#4E8A6A",
+    diffRemove: "#B6443A",
+    diffChange: "#3A7BB8",
   },
   // Mono: black/white/grey — editorial, high-contrast.
   mono: {
@@ -132,6 +150,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#5A7A5A",
     codeBg: "#111111",
     codeFg: "#EBEBEB",
+    diffAdd: "#5A7A5A",
+    diffRemove: "#A03A2B",
+    diffChange: "#666666",
   },
   // Paper: sepia/cream — soft, book-like, warm and aged.
   paper: {
@@ -147,6 +168,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#607848",
     codeBg: "#2A2218",
     codeFg: "#E8DEC8",
+    diffAdd: "#607848",
+    diffRemove: "#A0392B",
+    diffChange: "#B05A2A",
   },
 };
 
@@ -198,6 +222,9 @@ export function themeToCssVars(theme: ThemeTokens): string {
   --olive: ${colors.olive};
   --code-bg: ${colors.codeBg};
   --code-fg: ${colors.codeFg};
+  --diff-add: ${colors.diffAdd};
+  --diff-remove: ${colors.diffRemove};
+  --diff-change: ${colors.diffChange};
   --serif: ${fonts.serif};
   --sans: ${fonts.sans};
   --mono: ${fonts.mono};
@@ -291,6 +318,13 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 12px;
   padding: 18px 22px;
   margin-bottom: 1.5em;
+  /* contain wide children (tables, long URLs, code) inside the card.
+   * min-width:0 lets the card shrink in grid/flex contexts (.cards-grid)
+   * so it actually obeys its track instead of growing to its widest child.
+   * overflow-x:auto then scrolls any content that's STILL too wide
+   * (e.g. a many-column table) rather than bursting the card border. */
+  min-width: 0;
+  overflow-x: auto;
 }
 
 /* tldr */
@@ -302,6 +336,8 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 1.5em;
   font-size: 1.05rem;
   color: var(--ink-soft);
+  min-width: 0;
+  overflow-x: auto;
 }
 
 /* callout */
@@ -313,6 +349,8 @@ h1, h2, h3, h4, h5, h6 {
   background: var(--surface-2);
   color: var(--ink-soft);
   font-size: 0.95rem;
+  min-width: 0;
+  overflow-x: auto;
 }
 .callout.note { border-color: var(--olive); background: color-mix(in srgb, var(--olive) 10%, var(--surface)); }
 .callout.warn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
@@ -546,6 +584,11 @@ figure.code figcaption {
   padding: 10px 14px;
   text-align: left;
   vertical-align: top;
+  /* let long URLs / identifiers / paths wrap inside the cell instead of
+   * pushing the table beyond its container. Many-column tables that are
+   * still wider than the card fall through to the card's overflow-x. */
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .compare-table th {
   background: var(--surface-2);
@@ -567,6 +610,8 @@ figure.code figcaption {
   padding: 10px 14px;
   text-align: left;
   vertical-align: top;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .risk-table th {
   background: var(--surface-2);
@@ -936,6 +981,110 @@ textarea.cs-text { font-family: var(--mono); }
   font-weight: 600;
   z-index: 10;
 }
+
+/* diff block */
+.diff-block {
+  margin: var(--space-6, 1.5rem) 0;
+  border: 1.5px solid var(--rule);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--code-bg);
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--code-fg);
+}
+.diff-block.fallback pre {
+  margin: 0;
+  padding: 12px 14px;
+  white-space: pre;
+  overflow-x: auto;
+}
+.diff-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px solid color-mix(in oklab, var(--rule), transparent 40%);
+  background: color-mix(in oklab, var(--code-bg), var(--code-fg) 5%);
+  font-size: 12px;
+  color: color-mix(in oklab, var(--code-fg), transparent 30%);
+}
+.diff-filename { font-weight: 500; }
+.diff-stat { font-variant-numeric: tabular-nums; display: inline-flex; gap: 8px; }
+.diff-stat .add { color: var(--diff-add); }
+.diff-stat .rem { color: var(--diff-remove); }
+
+.diff-grid {
+  display: grid;
+  grid-template-columns: 1fr 60px 1fr;
+  align-items: start;
+}
+.diff-side {
+  list-style: none;
+  margin: 0;
+  padding: 8px 0;
+  overflow-x: auto;
+  min-width: 0;
+}
+.diff-line {
+  display: grid;
+  grid-template-columns: 3.25em 1fr;
+  gap: 0;
+  height: 22px;
+  line-height: 22px;
+  white-space: pre;
+}
+.diff-line .num {
+  text-align: right;
+  padding-right: 12px;
+  color: color-mix(in oklab, var(--code-fg), transparent 60%);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+.diff-line .content {
+  padding-right: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.diff-line.add  { background: color-mix(in oklab, transparent, var(--diff-add) 14%); }
+.diff-line.remove { background: color-mix(in oklab, transparent, var(--diff-remove) 14%); }
+.diff-line.hunk-sep {
+  background: color-mix(in oklab, var(--code-bg), var(--code-fg) 8%);
+  color: color-mix(in oklab, var(--code-fg), transparent 50%);
+  font-style: italic;
+  font-size: 11px;
+}
+
+.diff-connector {
+  position: relative;
+  align-self: stretch;
+  padding: 8px 0;
+  background: color-mix(in oklab, var(--code-bg), var(--code-fg) 2%);
+  border-left: 1px solid color-mix(in oklab, var(--rule), transparent 60%);
+  border-right: 1px solid color-mix(in oklab, var(--rule), transparent 60%);
+}
+.diff-connector svg {
+  display: block;
+  width: 100%;
+}
+.diff-conn { stroke-width: 1; }
+.diff-conn.add    { fill: var(--diff-add);    stroke: var(--diff-add);    fill-opacity: 0.22; }
+.diff-conn.remove { fill: var(--diff-remove); stroke: var(--diff-remove); fill-opacity: 0.22; }
+.diff-conn.change { fill: var(--diff-change); stroke: var(--diff-change); fill-opacity: 0.18; }
+
+.diff-block figcaption {
+  padding: 8px 14px;
+  border-top: 1px solid color-mix(in oklab, var(--rule), transparent 40%);
+  font-size: 12px;
+  font-family: var(--sans);
+  color: color-mix(in oklab, var(--code-fg), transparent 30%);
+}
+
+@media (max-width: 720px) {
+  .diff-grid { grid-template-columns: 1fr; }
+  .diff-connector { display: none; }
+  .diff-side.before { border-bottom: 1px solid color-mix(in oklab, var(--rule), transparent 60%); }
+}
 `;
 }
 

package/src/render/validate.ts

@@ -439,7 +439,9 @@ function isPublishKind(val: unknown): val is PublishKind {
 // ─── Block validation ─────────────────────────────────────────────────────────
 
 type BlockValidationError = { path: string; message: string };
-type BlockValidationResult = { ok: true; blocks: Block[] } | { ok: false; errors: BlockValidationError[] };
+type BlockValidationResult =
+  | { ok: true; blocks: Block[] }
+  | { ok: false; errors: BlockValidationError[] };
 
 function validateBlock(raw: unknown, path: string, depth: number): BlockValidationError[] {
   const errors: BlockValidationError[] = [];
@@ -484,7 +486,10 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
         errors.push({ path, message: "section block requires children array" });
       } else {
         if (depth > 3) {
-          errors.push({ path, message: `section nesting depth exceeds maximum of 3 (current depth: ${depth})` });
+          errors.push({
+            path,
+            message: `section nesting depth exceeds maximum of 3 (current depth: ${depth})`,
+          });
         } else {
           const children = b["children"] as unknown[];
           for (let i = 0; i < children.length; i++) {
@@ -518,7 +523,10 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
     }
     case "code": {
       if (typeof b["lang"] !== "string" || (b["lang"] as string).trim() === "") {
-        errors.push({ path, message: 'code block requires a non-empty lang (use "text" if unknown)' });
+        errors.push({
+          path,
+          message: 'code block requires a non-empty lang (use "text" if unknown)',
+        });
       }
       if (typeof b["code"] !== "string") {
         errors.push({ path, message: "code block requires code field" });
@@ -580,7 +588,10 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
       const hasSvg = typeof b["svg"] === "string";
       const hasHtml = typeof b["html"] === "string";
       if (hasSvg && hasHtml) {
-        errors.push({ path, message: "diagram block must have exactly one of svg or html, not both" });
+        errors.push({
+          path,
+          message: "diagram block must have exactly one of svg or html, not both",
+        });
       } else if (!hasSvg && !hasHtml) {
         errors.push({ path, message: "diagram block requires exactly one of svg or html" });
       }
@@ -592,6 +603,35 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
       }
       break;
     }
+    case "diff": {
+      const hasPatch = "patch" in b && b["patch"] !== undefined;
+      const hasBefore = "before" in b && b["before"] !== undefined;
+      const hasAfter = "after" in b && b["after"] !== undefined;
+
+      if (hasPatch && (hasBefore || hasAfter)) {
+        errors.push({
+          path,
+          message: "provide exactly one of patch or before/after, not both",
+        });
+      } else if (!hasPatch && !hasBefore && !hasAfter) {
+        errors.push({
+          path,
+          message: "diff block requires either patch or before+after",
+        });
+      } else if (hasPatch) {
+        if (typeof b["patch"] !== "string" || (b["patch"] as string).trim() === "") {
+          errors.push({ path, message: "diff block patch must be a non-empty string" });
+        }
+      } else {
+        // before/after arm
+        if (hasBefore && !hasAfter) {
+          errors.push({ path, message: "diff block before/after arm requires both fields" });
+        } else if (!hasBefore && hasAfter) {
+          errors.push({ path, message: "diff block before/after arm requires both fields" });
+        }
+      }
+      break;
+    }
   }
 
   // Deep field validation against catalog schema — catches unknown fields (with "did you mean"
@@ -611,7 +651,10 @@ function validateBlocksArray(raw: unknown): BlockValidationResult {
   }
 
   if (raw.length > 1000) {
-    return { ok: false, errors: [{ path: "blocks", message: "blocks array exceeds maximum of 1000 blocks" }] };
+    return {
+      ok: false,
+      errors: [{ path: "blocks", message: "blocks array exceeds maximum of 1000 blocks" }],
+    };
   }
 
   const allErrors: BlockValidationError[] = [];
@@ -627,7 +670,10 @@ function validateBlocksArray(raw: unknown): BlockValidationResult {
     if (blockType === "hero") {
       heroCount++;
       if (i !== 0) {
-        allErrors.push({ path: `blocks[${i}]`, message: "hero block must be the first block if present" });
+        allErrors.push({
+          path: `blocks[${i}]`,
+          message: "hero block must be the first block if present",
+        });
       }
     }
     if (blockType === "tldr") {
@@ -740,9 +786,7 @@ export function validatePublishInput(input: unknown): ValidationResult<PublishIn
     // blocks branch
     const blocksResult = validateBlocksArray(raw["blocks"]);
     if (!blocksResult.ok) {
-      const errorMessages = blocksResult.errors
-        .map((e) => `${e.path}: ${e.message}`)
-        .join("; ");
+      const errorMessages = blocksResult.errors.map((e) => `${e.path}: ${e.message}`).join("; ");
       return { ok: false, error: `blocks validation failed — ${errorMessages}` };
     }
     return {

package/src/server/api.ts

@@ -1,12 +1,15 @@
-// API route handler for interactive artifact submissions and state queries.
+// API routes for interactive artifact submissions and state queries, exposed
+// as a Hono sub-app. Mounted by lifecycle.ts via `handle.app.route("/", apiApp)`.
 //
 // Routes:
 //   POST /api/sessions/:projectSlug/:filename/answers/:questionId
 //   GET  /api/sessions/:projectSlug/:filename/state
 //
-// Wire into startServer via handle.addHandler() before the static file fallback.
+// Any other /api/* path returns a JSON 404 (rather than falling through to the
+// static file handler, which would return the HTML 404 page).
 
 import { join, resolve, relative } from "node:path";
+import { Hono } from "hono";
 import { submitAnswer, getState } from "../storage/mutate.ts";
 import type { AnswerValue } from "../render/validate.ts";
 
@@ -19,148 +22,133 @@ export interface ApiHandlerOptions {
 const FILENAME_RE = /^[^/\\]+\.html$/;
 const DANGEROUS_RE = /[/\\]|\.\./;
 
-function jsonResponse(body: unknown, status: number): Response {
-  return new Response(JSON.stringify(body), {
-    status,
-    headers: {
-      "Content-Type": "application/json; charset=utf-8",
-      "Cache-Control": "no-store",
-    },
-  });
+interface ResolvedArtifact {
+  /** Absolute path to the artifact file. */
+  artifactPath: string;
+}
+
+/**
+ * Validate the slug/filename pair and resolve the artifact's absolute path,
+ * enforcing containment under <stateDir>/projects/<slug>/artifacts/. Returns
+ * a Hono `Response` on validation failure, or the resolved path on success.
+ */
+function resolveArtifact(
+  stateDir: string,
+  projectSlug: string,
+  filename: string,
+): ResolvedArtifact | Response {
+  if (DANGEROUS_RE.test(projectSlug) || DANGEROUS_RE.test(filename)) {
+    return Response.json({ ok: false, error: "invalid path component" }, { status: 400 });
+  }
+  if (!FILENAME_RE.test(filename)) {
+    return Response.json({ ok: false, error: "filename must end with .html" }, { status: 400 });
+  }
+
+  const artifactsDir = join(stateDir, "projects", projectSlug, "artifacts");
+  const artifactPath = join(artifactsDir, filename);
+  const resolvedArtifactsDir = resolve(artifactsDir);
+  const resolvedArtifact = resolve(artifactPath);
+  const rel = relative(resolvedArtifactsDir, resolvedArtifact);
+  if (rel.startsWith("..") || rel.includes("/")) {
+    return Response.json({ ok: false, error: "invalid path" }, { status: 400 });
+  }
+  return { artifactPath: resolvedArtifact };
 }
 
-export function createApiHandler(
-  options: ApiHandlerOptions,
-): (req: Request) => Promise<Response | undefined> {
+export function createApiApp(options: ApiHandlerOptions): Hono {
   const { stateDir } = options;
+  const app = new Hono();
 
-  return async (req: Request): Promise<Response | undefined> => {
-    const url = new URL(req.url);
-    const { pathname } = url;
+  // All API responses are dynamic — never let intermediaries cache them.
+  app.use("/api/*", async (c, next) => {
+    await next();
+    c.header("Cache-Control", "no-store");
+  });
 
-    // Only handle /api/ routes
-    if (!pathname.startsWith("/api/")) {
-      return undefined;
-    }
+  // POST /api/sessions/:projectSlug/:filename/answers/:questionId
+  app.post("/api/sessions/:projectSlug/:filename/answers/:questionId", async (c) => {
+    const { projectSlug, filename, questionId } = c.req.param();
 
-    // ─── Route matching ────────────────────────────────────────────────────
-    // POST /api/sessions/:projectSlug/:filename/answers/:questionId
-    const answerMatch = /^\/api\/sessions\/([^/]+)\/([^/]+)\/answers\/([^/]+)$/.exec(pathname);
-    // GET  /api/sessions/:projectSlug/:filename/state
-    const stateMatch = /^\/api\/sessions\/([^/]+)\/([^/]+)\/state$/.exec(pathname);
+    const resolved = resolveArtifact(stateDir, projectSlug, filename);
+    if (resolved instanceof Response) return resolved;
 
-    if (answerMatch === null && stateMatch === null) {
-      // Unrecognized /api/ path
-      return jsonResponse({ ok: false, error: "not found" }, 404);
+    let body: unknown;
+    try {
+      body = await c.req.json();
+    } catch {
+      return c.json({ ok: false, error: "invalid JSON body" }, 400);
     }
 
-    const match = (answerMatch ?? stateMatch)!;
-    const projectSlug = match[1]!;
-    const filename = match[2]!;
-
-    // ─── Input validation ──────────────────────────────────────────────────
-    if (DANGEROUS_RE.test(projectSlug) || DANGEROUS_RE.test(filename)) {
-      return jsonResponse({ ok: false, error: "invalid path component" }, 400);
+    if (
+      body === null ||
+      typeof body !== "object" ||
+      Array.isArray(body) ||
+      !("value" in (body as Record<string, unknown>))
+    ) {
+      return c.json({ ok: false, error: 'body must contain a "value" field' }, 400);
     }
 
-    if (!FILENAME_RE.test(filename)) {
-      return jsonResponse({ ok: false, error: "filename must end with .html" }, 400);
-    }
+    const value = (body as Record<string, unknown>)["value"] as AnswerValue;
 
-    // ─── Path traversal defense ────────────────────────────────────────────
-    const artifactsDir = join(stateDir, "projects", projectSlug, "artifacts");
-    const artifactPath = join(artifactsDir, filename);
+    const outcome = await submitAnswer({
+      artifactPath: resolved.artifactPath,
+      questionId,
+      value,
+    });
 
-    const resolvedArtifactsDir = resolve(artifactsDir);
-    const resolvedArtifact = resolve(artifactPath);
-    const rel = relative(resolvedArtifactsDir, resolvedArtifact);
-    if (rel.startsWith("..") || rel.includes("/")) {
-      return jsonResponse({ ok: false, error: "invalid path" }, 400);
+    if (outcome.ok) {
+      return c.json(
+        {
+          ok: true,
+          status: outcome.status,
+          remaining: outcome.remaining,
+          replacementHtml: outcome.replacementHtml,
+        },
+        200,
+      );
     }
 
-    // ─── Route dispatch ────────────────────────────────────────────────────
-
-    if (answerMatch !== null) {
-      // POST /api/sessions/:projectSlug/:filename/answers/:questionId
-      if (req.method !== "POST") {
-        return jsonResponse({ ok: false, error: "method not allowed" }, 404);
-      }
-
-      const questionId = answerMatch[3]!;
-
-      // Parse body
-      let body: unknown;
-      try {
-        body = await req.json();
-      } catch {
-        return jsonResponse({ ok: false, error: "invalid JSON body" }, 400);
-      }
-
-      if (
-        body === null ||
-        typeof body !== "object" ||
-        Array.isArray(body) ||
-        !("value" in (body as Record<string, unknown>))
-      ) {
-        return jsonResponse({ ok: false, error: 'body must contain a "value" field' }, 400);
-      }
-
-      const value = (body as Record<string, unknown>)["value"] as AnswerValue;
-
-      const outcome = await submitAnswer({ artifactPath: resolvedArtifact, questionId, value });
-
-      if (outcome.ok) {
-        return jsonResponse(
-          {
-            ok: true,
-            status: outcome.status,
-            remaining: outcome.remaining,
-            replacementHtml: outcome.replacementHtml,
-          },
-          200,
-        );
-      }
-
-      switch (outcome.reason) {
-        case "not-found":
-        case "not-interactive":
-        case "unknown-question":
-          return jsonResponse({ ok: false, reason: outcome.reason }, 404);
-        case "session-ended":
-          return jsonResponse({ ok: false, status: outcome.status }, 410);
-        case "expired":
-          return jsonResponse({ ok: false, status: "expired" }, 410);
-        case "invalid-value":
-          return jsonResponse({ ok: false, message: outcome.message }, 422);
-      }
-
-      // Fallback (should not reach)
-      return jsonResponse({ ok: false, error: "internal error" }, 500);
+    switch (outcome.reason) {
+      case "not-found":
+      case "not-interactive":
+      case "unknown-question":
+        return c.json({ ok: false, reason: outcome.reason }, 404);
+      case "session-ended":
+        return c.json({ ok: false, status: outcome.status }, 410);
+      case "expired":
+        return c.json({ ok: false, status: "expired" }, 410);
+      case "invalid-value":
+        return c.json({ ok: false, message: outcome.message }, 422);
     }
 
-    if (stateMatch !== null) {
-      // GET /api/sessions/:projectSlug/:filename/state
-      if (req.method !== "GET") {
-        return jsonResponse({ ok: false, error: "method not allowed" }, 404);
-      }
+    return c.json({ ok: false, error: "internal error" }, 500);
+  });
 
-      const outcome = await getState(resolvedArtifact);
+  // GET /api/sessions/:projectSlug/:filename/state
+  app.get("/api/sessions/:projectSlug/:filename/state", async (c) => {
+    const { projectSlug, filename } = c.req.param();
 
-      if (!outcome.ok) {
-        return jsonResponse({ ok: false, reason: outcome.reason }, 404);
-      }
+    const resolved = resolveArtifact(stateDir, projectSlug, filename);
+    if (resolved instanceof Response) return resolved;
 
-      return jsonResponse(
-        {
-          status: outcome.status,
-          answers: outcome.answers,
-          remaining: outcome.remaining,
-        },
-        200,
-      );
+    const outcome = await getState(resolved.artifactPath);
+    if (!outcome.ok) {
+      return c.json({ ok: false, reason: outcome.reason }, 404);
     }
 
-    // Should not reach here
-    return jsonResponse({ ok: false, error: "not found" }, 404);
-  };
+    return c.json(
+      {
+        status: outcome.status,
+        answers: outcome.answers,
+        remaining: outcome.remaining,
+      },
+      200,
+    );
+  });
+
+  // Catch-all under /api/* — keeps unmatched API paths as JSON 404 instead of
+  // falling through to the static file handler.
+  app.all("/api/*", (c) => c.json({ ok: false, error: "not found" }, 404));
+
+  return app;
 }

package/src/server/favicon.ts

@@ -7,22 +7,14 @@
 // (written by writeFaviconSvg on every publish). This shim covers the .ico
 // fallback so users don't see a 404 in DevTools.
 
+import { Hono } from "hono";
 import { FAVICON_SVG } from "../render/favicon.ts";
 
-const SVG_RESPONSE_HEADERS: Record<string, string> = {
-  "Content-Type": "image/svg+xml; charset=utf-8",
-  "Cache-Control": "public, max-age=86400",
-};
-
-export function createFaviconHandler(): (req: Request) => Promise<Response | undefined> {
-  return async (req: Request): Promise<Response | undefined> => {
-    const url = new URL(req.url);
-    if (url.pathname !== "/favicon.ico") {
-      return undefined;
-    }
-    if (req.method !== "GET" && req.method !== "HEAD") {
-      return undefined;
-    }
-    return new Response(FAVICON_SVG, { status: 200, headers: SVG_RESPONSE_HEADERS });
-  };
+export function createFaviconApp(): Hono {
+  const app = new Hono();
+  app.on(["GET", "HEAD"], "/favicon.ico", (c) => {
+    c.header("Cache-Control", "public, max-age=86400");
+    return c.body(FAVICON_SVG, 200, { "Content-Type": "image/svg+xml; charset=utf-8" });
+  });
+  return app;
 }