alabjs 0.2.6 → 0.3.0-alpha.1

package/src/components/Image.tsx

@@ -104,38 +104,5 @@ export function Image({
   });
 }
 
-/**
- * Generate a Base64 blur-up placeholder for an image in `public/`.
- *
- * Calls the Rust napi binding to resize the image to 8px wide and encode it
- * as a tiny WebP, then Base64-encodes it into a data URL ready for `blurDataURL`.
- *
- * Run this in a server function — it reads from disk and must not run in the browser.
- *
- * @param src - Path relative to `public/` (e.g. `"/hero.jpg"`)
- * @param publicDir - Absolute path to the `public/` directory
- */
-export async function generateBlurPlaceholder(
-  src: string,
-  publicDir: string,
-): Promise<string> {
-  const { readFile } = await import("node:fs/promises");
-  const { resolve } = await import("node:path");
-
-  const safeSrc = src.replace(/\.\./g, "").replace(/^\/+/, "");
-  const filePath = resolve(publicDir, safeSrc);
-
-  const input = await readFile(filePath);
-
-  let napi: { optimizeImage: (b: Buffer, q: number | null, w: number | null, h: null, fmt: string) => Promise<Buffer> };
-  try {
-    napi = (await import("@alabjs/compiler")) as typeof napi;
-  } catch {
-    // napi not built — return empty string (image still loads, just no blur effect)
-    return "";
-  }
-
-  const tiny = await napi.optimizeImage(input, 40, 8, null, "webp");
-  const b64 = Buffer.from(tiny).toString("base64");
-  return `data:image/webp;base64,${b64}`;
-}
+// generateBlurPlaceholder is server-only (uses node:fs/promises).
+// Import it from "alabjs/components/server" in your server functions.

package/src/components/ImageServer.ts

@@ -0,0 +1,43 @@
+/**
+ * Server-only image utilities.
+ *
+ * Import from "alabjs/components/server" — do NOT import from "alabjs/components"
+ * because this file uses Node.js built-ins (fs, path) and must never be bundled
+ * for the browser.
+ */
+
+/**
+ * Generate a Base64 blur-up placeholder for an image in `public/`.
+ *
+ * Calls the Rust napi binding to resize the image to 8px wide and encode it
+ * as a tiny WebP, then Base64-encodes it into a data URL ready for `blurDataURL`.
+ *
+ * Run this in a server function — it reads from disk and must not run in the browser.
+ *
+ * @param src - Path relative to `public/` (e.g. `"/hero.jpg"`)
+ * @param publicDir - Absolute path to the `public/` directory
+ */
+export async function generateBlurPlaceholder(
+  src: string,
+  publicDir: string,
+): Promise<string> {
+  const { readFile } = await import("node:fs/promises");
+  const { resolve } = await import("node:path");
+
+  const safeSrc = src.replace(/\.\./g, "").replace(/^\/+/, "");
+  const filePath = resolve(publicDir, safeSrc);
+
+  const input = await readFile(filePath);
+
+  let napi: { optimizeImage: (b: Buffer, q: number | null, w: number | null, h: null, fmt: string) => Promise<Buffer> };
+  try {
+    napi = (await import("@alabjs/compiler")) as typeof napi;
+  } catch {
+    // napi not built — return empty string (image still loads, just no blur effect)
+    return "";
+  }
+
+  const tiny = await napi.optimizeImage(input, 40, 8, null, "webp");
+  const b64 = Buffer.from(tiny).toString("base64");
+  return `data:image/webp;base64,${b64}`;
+}

package/src/components/index.ts

@@ -1,4 +1,4 @@
-export { Image, generateBlurPlaceholder } from "./Image.js";
+export { Image } from "./Image.js";
 export type { ImageProps } from "./Image.js";
 export { Link } from "./Link.js";
 export type { LinkProps } from "./Link.js";

package/src/server/app.ts

@@ -1,7 +1,7 @@
 import { createApp as createH3App, createRouter, defineEventHandler, getQuery, readBody } from "h3";
 import { createServer } from "node:http";
 import { resolve, dirname, join, extname } from "node:path";
-import { existsSync, createReadStream, statSync, readFileSync } from "node:fs";
+import { existsSync, createReadStream, statSync, readFileSync, readdirSync } from "node:fs";
 import { createGzip, createBrotliCompress } from "node:zlib";
 import { toNodeListener } from "h3";
 import type { RouteManifest } from "../router/manifest.js";
@@ -19,20 +19,48 @@ import { handleVitalsBeacon, handleAnalyticsDashboard } from "../analytics/handl
 import { buildImportMap } from "../config.js";
 import type { FederationConfig } from "../config.js";
 
+/** Walk dist/server recursively and collect all *.server.js paths (compiled server functions). */
+function findDistServerFiles(distDir: string): string[] {
+  const serverDir = join(distDir, "server");
+  const results: string[] = [];
+  function walk(dir: string) {
+    try {
+      for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const fullPath = join(dir, entry.name);
+        if (entry.isDirectory()) {
+          walk(fullPath);
+        } else if (entry.isFile() && entry.name.endsWith(".server.js")) {
+          results.push(fullPath);
+        }
+      }
+    } catch { /* not readable */ }
+  }
+  walk(serverDir);
+  return results;
+}
+
 /**
  * Find layout file paths (relative to cwd root) for a given route.file, ordered outermost→innermost.
  * Checks the compiled dist directory for the existence of each layout.
  */
+/** Convert a TypeScript source path to its compiled .js equivalent. */
+function toJsPath(p: string): string {
+  return p.replace(/\.(tsx?)$/, ".js");
+}
+
 function findProdLayoutFiles(routeFile: string, distDir: string): string[] {
   // routeFile is like "app/users/[id]/page.tsx"
+  // Returns source paths (e.g. "app/layout.tsx") so the client bootstrap can look
+  // them up in LAYOUT_MODS by their original source key.  The import() call in
+  // app.ts uses toJsPath() to convert back to the compiled .js path.
   const pageDir = dirname(routeFile);
   const parts = pageDir.split("/");
   const layouts: string[] = [];
   for (let i = 1; i <= parts.length; i++) {
     const dir = parts.slice(0, i).join("/");
-    const layoutRelPath = `${dir}/layout.tsx`;
-    if (existsSync(join(distDir, "server", layoutRelPath))) {
-      layouts.push(layoutRelPath);
+    const compiledPath = `${dir}/layout.js`;
+    if (existsSync(join(distDir, "server", compiledPath))) {
+      layouts.push(`${dir}/layout.tsx`);
     }
   }
   return layouts;
@@ -44,7 +72,7 @@ function findProdLayoutFiles(routeFile: string, distDir: string): string[] {
 function findProdErrorFile(routeFile: string, distDir: string): string | null {
   let dir = dirname(routeFile);
   while (dir.length > 0 && dir !== ".") {
-    const candidate = `${dir}/error.tsx`;
+    const candidate = `${dir}/error.js`;
     if (existsSync(join(distDir, "server", candidate))) return candidate;
     const parent = dirname(dir);
     if (parent === dir) break;
@@ -56,8 +84,8 @@ function findProdErrorFile(routeFile: string, distDir: string): string | null {
 function findProdLoadingFile(routeFile: string, distDir: string): string | null {
   let dir = dirname(routeFile);
   while (dir.length > 0 && dir !== ".") {
-    const candidate = `${dir}/loading.tsx`;
-    if (existsSync(join(distDir, "server", candidate))) return candidate;
+    const compiled = `${dir}/loading.js`;
+    if (existsSync(join(distDir, "server", compiled))) return `${dir}/loading.tsx`;
     const parent = dirname(dir);
     if (parent === dir) break;
     dir = parent;
@@ -89,6 +117,21 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     buildId = readFileSync(resolve(distDir, "BUILD_ID"), "utf8").trim() || undefined;
   } catch { /* no BUILD_ID file — skew protection disabled */ }
 
+  // Resolve the compiled client entry file path by reading the Vite manifest.
+  // /@alabjs/client is a virtual module at build time; at runtime the server
+  // must redirect requests for it to the hashed asset file.
+  // The manifest key is a relative path ending in "@alabjs/client" (not "/@alabjs/client").
+  let clientEntryPath = "";
+  try {
+    const viteManifest = JSON.parse(
+      readFileSync(resolve(distDir, "client/.vite/manifest.json"), "utf8"),
+    ) as Record<string, { file?: string; isEntry?: boolean; src?: string }>;
+    const entry = Object.values(viteManifest).find(
+      (e) => e.isEntry && e.src?.endsWith("@alabjs/client"),
+    );
+    if (entry?.file) clientEntryPath = "/" + entry.file;
+  } catch { /* manifest absent — /@alabjs/client will 404 */ }
+
   // Load federation config written by `alab build`. Used to:
   //  1. Serve `/_alabjs/federation-manifest.json` (remote discovery)
   //  2. Inject `<script type="importmap">` into every page (host → remote routing)
@@ -112,6 +155,16 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
       res.setHeader("referrer-policy", "strict-origin-when-cross-origin");
       res.setHeader("permissions-policy", "camera=(), microphone=(), geolocation=()");
       res.setHeader("x-permitted-cross-domain-policies", "none");
+      // NOTE: 'unsafe-inline' is required by React's inline event delegation and
+      // Tailwind's runtime style injection. 'unsafe-eval' is required by some
+      // React dev-mode internals and dynamic import().
+      //
+      // ⚠️  Security implication: these directives weaken XSS protection.
+      // In production, override this header in your middleware with a nonce-based
+      // CSP: `script-src 'self' 'nonce-<random>'` and inject the same nonce into
+      // every <script> tag via renderToResponse's headExtra option. The CSRF
+      // double-submit pattern relies on XSS prevention — using 'unsafe-inline'
+      // without a nonce makes the CSRF token readable by injected scripts.
       res.setHeader(
         "content-security-policy",
         [
@@ -126,7 +179,6 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
           "base-uri 'self'",
           "form-action 'self'",
           "frame-ancestors 'self'",
-          "upgrade-insecure-requests",
         ].join("; "),
       );
       // HSTS — only meaningful over HTTPS; set in production only.
@@ -134,12 +186,18 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     }),
   );
 
-  // ─── User middleware (middleware.ts compiled to dist/server/middleware.ts) ───
-  const middlewareModulePath = `${distDir}/server/middleware.ts`;
+  // ─── User middleware (middleware.ts compiled to dist/server/middleware.js) ───
+  const middlewareModulePath = `${distDir}/server/middleware.js`;
   if (existsSync(middlewareModulePath)) {
+    // Cache the module after first import — avoids redundant dynamic import()
+    // overhead on every request (each import() call re-resolves the module graph).
+    let _middlewareCache: MiddlewareModule | null = null;
     app.use(
       defineEventHandler(async (event) => {
-        const mod = await import(middlewareModulePath) as MiddlewareModule;
+        if (!_middlewareCache) {
+          _middlewareCache = await import(middlewareModulePath) as MiddlewareModule;
+        }
+        const mod = _middlewareCache;
         if (typeof mod.middleware !== "function") return;
         const req = event.node.req;
         const res = event.node.res;
@@ -193,7 +251,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
   };
 
   app.use(
-    defineEventHandler((event) => {
+    defineEventHandler(async (event) => {
       const req = event.node.req;
       const res = event.node.res;
       if (req.method !== "GET" && req.method !== "HEAD") return;
@@ -204,22 +262,42 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
       try { relPath = decodeURIComponent(rawPath); } catch { return; }
       if (relPath.includes("..")) return;
 
-      const ext = extname(relPath).toLowerCase();
-      const contentType = MIME_TYPES[ext];
-      if (!contentType) return; // skip extensionless paths (page routes)
-
       const acceptEncoding = (req.headers["accept-encoding"] ?? "") as string;
       const useBrotli = acceptEncoding.includes("br");
       const useGzip  = !useBrotli && acceptEncoding.includes("gzip");
 
-      /** Stream a file with optional brotli/gzip compression and ETag 304 support. */
+      // Virtual client entry — redirect to the hashed asset file resolved at startup.
+      // A 302 redirect (not direct serve) is critical: relative imports in the bundle
+      // (e.g. "./components-HASH.js") must resolve against the real asset URL
+      // (/assets/client-HASH.js), not the virtual path (/@alabjs/client).
+      if (relPath === "/@alabjs/client") {
+        if (clientEntryPath) {
+          res.writeHead(302, { Location: clientEntryPath });
+        } else {
+          res.statusCode = 404;
+        }
+        res.end();
+        return;
+      }
+
+      const ext = extname(relPath).toLowerCase();
+      const contentType = MIME_TYPES[ext];
+      if (!contentType) return; // skip extensionless paths (page routes)
+
+      /** Stream a file with optional brotli/gzip compression and ETag 304 support.
+       *
+       * Returns a Promise that resolves when the response is fully sent. The
+       * h3 handler awaits this promise so h3 knows the response is complete
+       * before considering the next middleware. This avoids h3 passing the
+       * request to the router (which would 404) while the async pipe is running.
+       */
       function serveFile(
         filePath: string,
         fileSize: number,
         mtimeMs: number,
         cacheControl: string,
         mime: string,
-      ): null {
+      ): Promise<void> {
         // ETag from file size + mtime — both already known from the caller's stat().
         const etag = `"${fileSize.toString(36)}-${mtimeMs.toString(36)}"`;
         res.setHeader("etag", etag);
@@ -228,26 +306,29 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         if (req.headers["if-none-match"] === etag) {
           res.statusCode = 304;
           res.end();
-          return null;
+          return Promise.resolve();
         }
 
         res.setHeader("content-type", mime);
         res.setHeader("cache-control", cacheControl);
 
-        if (req.method === "HEAD") { res.end(); return null; }
-
-        const stream = createReadStream(filePath);
-        if (useBrotli) {
-          res.setHeader("content-encoding", "br");
-          stream.pipe(createBrotliCompress()).pipe(res);
-        } else if (useGzip) {
-          res.setHeader("content-encoding", "gzip");
-          stream.pipe(createGzip()).pipe(res);
-        } else {
-          res.setHeader("content-length", fileSize);
-          stream.pipe(res);
-        }
-        return null;
+        if (req.method === "HEAD") { res.end(); return Promise.resolve(); }
+
+        return new Promise<void>((resolve, reject) => {
+          const fileStream = createReadStream(filePath);
+          res.on("finish", resolve);
+          res.on("error", reject);
+          if (useBrotli) {
+            res.setHeader("content-encoding", "br");
+            fileStream.pipe(createBrotliCompress()).pipe(res);
+          } else if (useGzip) {
+            res.setHeader("content-encoding", "gzip");
+            fileStream.pipe(createGzip()).pipe(res);
+          } else {
+            res.setHeader("content-length", fileSize);
+            fileStream.pipe(res);
+          }
+        });
       }
 
       // 1. Built client assets (JS chunks, CSS, source maps)
@@ -256,13 +337,14 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         const stat = statSync(clientCandidate);
         if (stat.isFile()) {
           const isHashed = /\.[a-f0-9]{8,}\.[a-z]+$/.test(relPath);
-          return serveFile(
+          await serveFile(
             clientCandidate,
             stat.size,
             stat.mtimeMs,
             isHashed ? "public, max-age=31536000, immutable" : "public, max-age=3600",
             contentType,
           );
+          return;
         }
       }
 
@@ -271,10 +353,10 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
       if (existsSync(publicCandidate)) {
         const stat = statSync(publicCandidate);
         if (stat.isFile()) {
-          return serveFile(publicCandidate, stat.size, stat.mtimeMs, "public, max-age=3600", contentType);
+          await serveFile(publicCandidate, stat.size, stat.mtimeMs, "public, max-age=3600", contentType);
+          return;
         }
       }
-      return undefined;
     }),
   );
 
@@ -346,6 +428,87 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     }),
   );
 
+  // ─── Server function endpoints ──────────────────────────────────────────────
+  // GET  /_alabjs/data/:fn  — used by useServerData (query params as input)
+  // POST /_alabjs/fn/:fn    — used by useMutation (JSON body as input)
+  //
+  // Both scan all *.server.js files in dist/server for the named export.
+  // Module results are NOT cached — the module cache is Node's own require cache.
+
+  async function callServerFn(
+    fnName: string,
+    ctx: { params: Record<string, string>; query: Record<string, string>; headers: Record<string, string | string[] | undefined>; method: string; url: string },
+    input: unknown,
+    res: import("node:http").ServerResponse,
+  ): Promise<void> {
+    const serverFiles = findDistServerFiles(distDir);
+    for (const file of serverFiles) {
+      const mod = await import(file) as Record<string, unknown>;
+      if (typeof mod[fnName] === "function") {
+        try {
+          const result = await (mod[fnName] as (c: unknown, i: unknown) => Promise<unknown>)(ctx, input);
+          res.statusCode = 200;
+          res.setHeader("content-type", "application/json");
+          res.end(JSON.stringify(result));
+        } catch (err) {
+          const zodError = (err as Record<string, unknown>)?.["zodError"];
+          if (zodError) {
+            res.statusCode = 422;
+            res.setHeader("content-type", "application/json");
+            res.end(JSON.stringify({ zodError }));
+          } else {
+            const msg = err instanceof Error ? err.message : String(err);
+            console.error(`[alabjs] server fn "${fnName}" threw:`, err);
+            res.statusCode = 500;
+            res.setHeader("content-type", "application/json");
+            res.end(JSON.stringify({ error: msg }));
+          }
+        }
+        return;
+      }
+    }
+    res.statusCode = 404;
+    res.setHeader("content-type", "application/json");
+    res.end(JSON.stringify({ error: `[alabjs] server function not found: ${fnName}` }));
+  }
+
+  router.get(
+    "/_alabjs/data/:fn",
+    defineEventHandler(async (event) => {
+      const fnName = event.context.params?.["fn"] ?? "";
+      const req = event.node.req;
+      const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+      const query = Object.fromEntries(url.searchParams.entries());
+      const ctx = {
+        params: query,
+        query,
+        headers: req.headers as Record<string, string>,
+        method: "GET",
+        url: req.url ?? "/",
+      };
+      await callServerFn(fnName, ctx, Object.keys(query).length ? query : undefined, event.node.res);
+    }),
+  );
+
+  router.post(
+    "/_alabjs/fn/:fn",
+    defineEventHandler(async (event) => {
+      const fnName = event.context.params?.["fn"] ?? "";
+      const req = event.node.req;
+      const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+      const query = Object.fromEntries(url.searchParams.entries());
+      const body = await readBody(event);
+      const ctx = {
+        params: query,
+        query,
+        headers: req.headers as Record<string, string>,
+        method: "POST",
+        url: req.url ?? "/",
+      };
+      await callServerFn(fnName, ctx, body, event.node.res);
+    }),
+  );
+
   // Auto sitemap.xml from route manifest
   router.get(
     "/sitemap.xml",
@@ -365,7 +528,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     if (route.kind !== "api") continue;
 
     const h3ApiPath = route.path.replace(/\[([^\]]+)\]/g, ":$1");
-    const apiModulePath = `${distDir}/server/${route.file}`;
+    const apiModulePath = `${distDir}/server/${toJsPath(route.file)}`;
 
     for (const method of ["get", "post", "put", "patch", "delete", "head"] as const) {
       router[method](
@@ -454,11 +617,11 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         }
 
         // Dynamically import the compiled page module from the dist directory.
-        const pageModulePath = `${distDir}/server/${route.file}`;
+        const pageModulePath = `${distDir}/server/${toJsPath(route.file)}`;
         const mod = await import(pageModulePath) as {
           default?: unknown;
           metadata?: PageMetadata;
-          generateMetadata?: (params: Record<string, string>) => PageMetadata | Promise<PageMetadata>;
+          generateMetadata?: (props: { params: Record<string, string>; searchParams: Record<string, string> }) => PageMetadata | Promise<PageMetadata>;
           ssr?: boolean;
           cdnCache?: CdnCache;
           ppr?: boolean;
@@ -499,7 +662,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         // Support both static metadata and dynamic generateMetadata (production fix)
         const metadata: PageMetadata =
           typeof mod.generateMetadata === "function"
-            ? await mod.generateMetadata(params)
+            ? await mod.generateMetadata({ params, searchParams })
             : (mod.metadata ?? {});
 
         const ssrEnabled = mod.ssr === true;
@@ -507,7 +670,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         // ── Layouts ──────────────────────────────────────────────────────────
         const layoutRelPaths = findProdLayoutFiles(route.file, distDir);
         const layoutMods = await Promise.all(
-          layoutRelPaths.map((p) => import(`${distDir}/server/${p}`)),
+          layoutRelPaths.map((p) => import(`${distDir}/server/${toJsPath(p)}`)),
         );
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const layouts = layoutMods.map((m: any) => m.default).filter((c: unknown): c is any => typeof c === "function");
@@ -550,7 +713,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
           if (errorRelPath) {
             try {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const errorMod = await import(`${distDir}/server/${errorRelPath}`) as any;
+              const errorMod = await import(`${distDir}/server/${toJsPath(errorRelPath)}`) as any;
               const ErrorPage = errorMod.default;
               if (typeof ErrorPage === "function") {
                 renderToResponse(res, {
@@ -582,7 +745,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
   app.use(router);
 
   // ─── 404 / not-found fallback ────────────────────────────────────────────────
-  const notFoundPath = `${distDir}/server/app/not-found.tsx`;
+  const notFoundPath = `${distDir}/server/app/not-found.js`;
   app.use(
     defineEventHandler(async (event) => {
       const res = event.node.res;
@@ -618,8 +781,11 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
 
   return {
     listen(port = 3000) {
+      // Make the server's base URL available to useServerData during SSR so it
+      // can construct an absolute URL for its internal loop-back fetch.
+      process.env["ALAB_ORIGIN"] = `http://127.0.0.1:${port}`;
       const server = createServer(toNodeListener(app));
-      server.listen(port, () => {
+      server.listen(port, "0.0.0.0", () => {
         console.log(`  alab  ready at http://localhost:${port}`);
       });
     },

package/src/server/cache.ts

@@ -28,7 +28,18 @@ interface CacheEntry {
 /** Sentinel value returned when a cache key has no valid entry. */
 const CACHE_MISS: unique symbol = Symbol("alab:cache_miss");
 
-/** Global in-process LRU-style cache. Shared across all server function calls. */
+/**
+ * Global in-process LRU cache. Shared across all server function calls.
+ *
+ * Max size is capped to prevent unbounded memory growth in long-running servers.
+ * When the cap is reached, the oldest entry (by insertion order) is evicted.
+ *
+ * ⚠️  Multi-tenant note: this cache is process-wide and shared across all
+ * requests. In multi-tenant deployments, cache keys MUST include a tenant
+ * identifier (e.g. `tenant:${tenantId}:posts`) to prevent data leakage
+ * between tenants.
+ */
+const _STORE_MAX = 2048;
 const _store = new Map<string, CacheEntry>();
 
 export { CACHE_MISS };
@@ -41,6 +52,9 @@ export function getCached(key: string): unknown | typeof CACHE_MISS {
     _store.delete(key);
     return CACHE_MISS;
   }
+  // Move to end (LRU: mark as recently used)
+  _store.delete(key);
+  _store.set(key, entry);
   return entry.data;
 }
 
@@ -50,6 +64,10 @@ export function setCache(
   data: unknown,
   opts: { ttl: number; tags?: string[] },
 ): void {
+  // Evict oldest entry when at capacity
+  if (_store.size >= _STORE_MAX && !_store.has(key)) {
+    _store.delete(_store.keys().next().value!);
+  }
   _store.set(key, {
     data,
     expires: Date.now() + opts.ttl * 1_000,
@@ -95,6 +113,7 @@ interface PageCacheEntry {
   tags: string[];
 }
 
+const _PAGE_STORE_MAX = 1024;
 const _pageStore = new Map<string, PageCacheEntry>();
 
 /**
@@ -118,6 +137,9 @@ export function getCachedPage(pathname: string): { html: string; stale: boolean
 
 /** Store a rendered HTML page with a TTL (seconds). */
 export function setCachedPage(pathname: string, html: string, ttl: number, tags: string[] = []): void {
+  if (_pageStore.size >= _PAGE_STORE_MAX && !_pageStore.has(pathname)) {
+    _pageStore.delete(_pageStore.keys().next().value!);
+  }
   _pageStore.set(pathname, { html, expires: Date.now() + ttl * 1_000, ttl, revalidating: false, tags });
 }
 

package/src/server/csrf.ts

@@ -31,6 +31,11 @@ export function csrfMiddleware() {
     const method = event.method.toUpperCase();
     if (SAFE_METHODS.has(method)) return;
 
+    // Internal endpoints that use their own auth (Bearer token, no cookie session)
+    // don't need CSRF protection.
+    const path = (event.node.req.url ?? "").split("?")[0] ?? "";
+    if (path === "/_alabjs/revalidate" || path === "/_alabjs/vitals") return;
+
     const cookieToken = getCookie(event, CSRF_COOKIE);
     const headerToken = getHeader(event, CSRF_HEADER);
 

package/src/ssr/html.ts

@@ -104,7 +104,22 @@ export function htmlShellBefore(opts: HtmlShellOptions): string {
 /** Build the closing HTML fragment — everything after the SSR content. */
 export function htmlShellAfter(opts: { nonce?: string | undefined }): string {
   const nonceAttr = opts.nonce ? ` nonce="${escAttr(opts.nonce)}"` : "";
+  // The Rust compiler (oxc_transformer::enable_all) always emits $RefreshReg$ /
+  // $RefreshSig$ calls into TSX files, even in production builds. These are
+  // React Fast Refresh globals that only exist when the dev preamble is injected.
+  // In production there is no preamble, so the calls throw ReferenceError which
+  // silently aborts module loading and prevents React from mounting.
+  //
+  // A classic (non-module) <script> executes synchronously during HTML parsing,
+  // before any <script type="module"> is evaluated (modules are always deferred).
+  // Defining no-op shims here guarantees they exist before any page chunk runs.
+  const refreshShim = `<script${nonceAttr}>` +
+    `if(typeof $RefreshReg$==="undefined"){` +
+    `window.$RefreshReg$=function(){};` +
+    `window.$RefreshSig$=function(){return function(x){return x};}` +
+    `}</script>`;
   return `</div>
+    ${refreshShim}
     <script type="module" src="/@alabjs/client"${nonceAttr}></script>
   </body>
 </html>`;

package/src/ssr/ppr.ts

@@ -158,7 +158,8 @@ export function findBuildLayoutFiles(routeFile: string, distDir: string): string
   const layouts: string[] = [];
   for (let i = 1; i <= parts.length; i++) {
     const dir = parts.slice(0, i).join("/");
-    const candidate = `${dir}/layout.tsx`;
+    // esbuild compiles layout.tsx → layout.js in the dist/server tree.
+    const candidate = `${dir}/layout.js`;
     if (existsSync(join(distDir, "server", candidate))) {
       layouts.push(candidate);
     }