@docubook/flame 2.0.0-beta.5 → 2.0.0

package/.docu/node/hydrate.node.ts

@@ -1,16 +1,8 @@
-/**
- * Client bundle builder for Node/Deno runtimes.
- *
- * Uses Vite with Rolldown plugins to produce a browser-ready client
- * bundle (JS + CSS) from the same components Bun.build handles natively.
- * Theme helpers (getThemeConfig, buildThemeCss, computeInlineThemeCss)
- * are re-exported from `hydrate.ts` — that module's `buildClientBundle`
- * is Bun-only and unused here.
- */
+/** Client bundle builder for Node/Deno runtimes. */
 
 import { execFile } from "node:child_process";
 import { builtinModules, createRequire } from "node:module";
-import { basename, dirname, join, resolve } from "node:path";
+import { dirname, join, resolve } from "node:path";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { promisify } from "node:util";
 import { mkdir, readFile, rename, unlink, writeFile } from "node:fs/promises";
@@ -23,34 +15,38 @@ import {
   STYLES_DIR,
   loadDocuConfig,
 } from "./paths";
-import { buildThemeCss, getThemeConfig } from "./hydrate";
-import { atomicWriteFile, computeTailwindCacheKey, readGlobalsCss } from "./cache-key";
+import { buildThemeCss, createMdxModuleEntries, getThemeConfig } from "./hydrate";
+import { atomicWriteFile, computeTailwindCacheKey, readStyleCss } from "./cache-key";
 import { resolveRoutes } from "./fs-scanner";
 import { normalizeImporterPath } from "./security";
-import type { DocuConfig, DocuRoute } from "./types";
+import type { AssetManifest, DocuConfig, DocuRoute } from "./types";
 
 /** Extract Lucide icon names from user docu.json configuration. */
 function extractConfigIcons(config: DocuConfig): string[] {
   const icons: string[] = [];
-  const pushIf = (s: string | undefined) => {
-    if (s) icons.push(s);
+  const pushIf = (value: string | undefined) => {
+    if (value) icons.push(value);
   };
-  config.home?.hero?.actions?.forEach((a) => pushIf(a.icon));
-  config.home?.features?.forEach((f) => pushIf(f.icon));
+  config.home?.hero?.actions?.forEach((action) => pushIf(action.icon));
+  config.home?.features?.forEach((feature) => pushIf(feature.icon));
   (function walk(routes: DocuRoute[]) {
-    for (const r of routes) {
-      pushIf(r.context?.icon);
-      if (r.items) walk(r.items);
+    for (const route of routes) {
+      pushIf(route.context?.icon);
+      if (route.items) walk(route.items);
     }
   })(config.routes ?? []);
-  return [...new Set(icons.filter((n) => /^[A-Z]/.test(n)))];
+  return [...new Set(icons.filter((name) => /^[A-Z]/.test(name)))];
 }
 
 export { buildThemeCss, computeInlineThemeCss, getThemeConfig } from "./hydrate";
 
+export function viteChunkFileName(chunk: { name: string }): string {
+  const name = chunk.name.replace(/^_docubook-mdx-page-/, "docubook-mdx-page-");
+  return `chunks/${name}-[hash].js`;
+}
+
 const execFileAsync = promisify(execFile);
 
-/** Resolve the @tailwindcss/cli binary path from the installed package. */
 function resolveTailwindBin(): string {
   const require = createRequire(import.meta.url);
   const pkgPath = require.resolve("@tailwindcss/cli/package.json");
@@ -59,40 +55,36 @@ function resolveTailwindBin(): string {
   return join(dirname(pkgPath), binRel);
 }
 
-/** Compute a cache key from globals.css + theme + config + toolchain. */
-function tailwindCacheKey(): string {
-  const globalsContent = readGlobalsCss();
-  let themeSuffix = "";
+function themeCacheSuffix(): string {
   try {
     const themeColors = getThemeConfig();
-    if (themeColors) {
-      themeSuffix = JSON.stringify(themeColors);
-    }
+    return themeColors ? JSON.stringify(themeColors) : "";
   } catch {
-    // theme config unavailable — proceed without it
+    return "";
   }
-  return computeTailwindCacheKey(globalsContent, themeSuffix);
 }
 
-/**
- * Build Tailwind CSS with content-based caching.
- * If a CSS file for the current input hash already exists, skip the subprocess.
- * Returns the filename (e.g. "client-abc123.css") and CSS content.
- */
-async function buildTailwindCss(key: string): Promise<{ file: string; content: string }> {
-  const cachedFile = `client-${key}.css`;
+function tailwindCacheKey(styleFile: string): string {
+  return computeTailwindCacheKey(readStyleCss(styleFile), `${styleFile}\0${themeCacheSuffix()}`);
+}
+
+async function buildTailwindCss(
+  name: string,
+  styleFile: string
+): Promise<{ file: string; content: string }> {
+  const key = tailwindCacheKey(styleFile);
+  const cachedFile = `${name}-${key}.css`;
   const cachedPath = join(ASSETS_DIR, cachedFile);
 
   if (existsSync(cachedPath)) {
-    const content = readFileSync(cachedPath, "utf-8");
-    return { file: cachedFile, content };
+    return { file: cachedFile, content: readFileSync(cachedPath, "utf-8") };
   }
 
-  const tmpCss = join(ASSETS_DIR, `_tmp-${key}.css`);
+  const tmpCss = join(ASSETS_DIR, `_tmp-${name}-${key}.css`);
   const bin = resolveTailwindBin();
-  const twArgs = ["-i", join(STYLES_DIR, "globals.css"), "-o", tmpCss, "--minify"];
+  const tailwindArgs = ["-i", join(STYLES_DIR, styleFile), "-o", tmpCss, "--minify"];
   const isDeno = "Deno" in globalThis;
-  const args = isDeno ? ["run", "-A", bin, ...twArgs] : [bin, ...twArgs];
+  const args = isDeno ? ["run", "-A", bin, ...tailwindArgs] : [bin, ...tailwindArgs];
   try {
     await execFileAsync(process.execPath, args, { maxBuffer: 16 * 1024 * 1024 });
   } catch (err) {
@@ -105,35 +97,26 @@ async function buildTailwindCss(key: string): Promise<{ file: string; content: s
 
   try {
     const themeColors = getThemeConfig();
-    if (themeColors) {
-      cssContent = buildThemeCss(cssContent, themeColors);
-    }
+    if (themeColors) cssContent = buildThemeCss(cssContent, themeColors);
   } catch (err) {
     console.warn(
-      `[flame] Failed to resolve theme config, falling back to globals.css only: ${err instanceof Error ? err.message : String(err)}`
+      `[flame] Failed to resolve theme config: ${err instanceof Error ? err.message : String(err)}`
     );
   }
 
-  // Use the same input-derived key for lookup and output — if inputs change,
-  // the key changes, cache busting works without a separate content hash.
-  // Atomic tmp+rename with pid suffix: parallel builds never clobber each other.
-  const cssFile = `client-${key}.css`;
-  const outPath = join(ASSETS_DIR, cssFile);
-
-  if (!existsSync(outPath)) {
-    await atomicWriteFile(writeFile, rename, unlink, outPath, cssContent);
+  if (!existsSync(cachedPath)) {
+    await atomicWriteFile(writeFile, rename, unlink, cachedPath, cssContent);
   }
 
-  return { file: cssFile, content: cssContent };
+  return { file: cachedFile, content: cssContent };
 }
 
 const NODE_BUILTINS_RE = new RegExp(
-  `^(node:.*|${builtinModules.map((m) => m.replace(/\//g, "\\/")).join("|")})$`
+  `^(node:.*|${builtinModules.map((module) => module.replace(/\//g, "\\/")).join("|")})$`
 );
 
 let lucideRealEntry: string | undefined;
 
-/** Resolve the real lucide-react entry path once (cached). */
 function getLucideRealEntry(): string {
   if (!lucideRealEntry) {
     lucideRealEntry = createRequire(import.meta.url).resolve("lucide-react");
@@ -144,20 +127,19 @@ function getLucideRealEntry(): string {
 const LUCIDE_IMPORT_RE = /import\s*\{([^}]+)\}\s*from\s*["']lucide-react["']/g;
 const LUCIDE_ICON_RE = /^[A-Z]/;
 
-/** Walk a directory scanning JS/TS/TSX files for `lucide-react` named imports. */
 function scanDirLucideIcons(dir: string, set: Set<string>): void {
   if (!existsSync(dir)) return;
   try {
     const entries = readdirSync(dir, { withFileTypes: true });
-    for (const e of entries) {
-      const full = join(dir, e.name);
-      if (e.isDirectory()) {
-        if (e.name !== "node_modules") scanDirLucideIcons(full, set);
-      } else if (/\.(js|ts|tsx)$/.test(e.name)) {
+    for (const entry of entries) {
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name !== "node_modules") scanDirLucideIcons(full, set);
+      } else if (/\.(js|ts|tsx)$/.test(entry.name)) {
         const content = readFileSync(full, "utf-8");
-        for (const m of content.matchAll(LUCIDE_IMPORT_RE)) {
-          for (const s of m[1].split(",")) {
-            const name = s
+        for (const match of content.matchAll(LUCIDE_IMPORT_RE)) {
+          for (const specifier of match[1].split(",")) {
+            const name = specifier
               .trim()
               .split(/\s+as\s+/)[0]
               .trim();
@@ -173,36 +155,32 @@ function scanDirLucideIcons(dir: string, set: Set<string>): void {
   }
 }
 
-/** Collect every lucide icon name imported across flame sources and deps. */
 function collectAllLucideIcons(): string[] {
   const icons = new Set<string>();
-  // Scan flame's own components and pages
   scanDirLucideIcons(join(FRAMEWORK_ROOT, ".docu/components"), icons);
   scanDirLucideIcons(join(FRAMEWORK_ROOT, ".docu/pages"), icons);
-  // Scan dependency dist directories. In development (monorepo) they live under
-  // packages/; in production they are under node_modules/@docubook/.
-  const depDirs = [
+  const dependencyDirs = [
     join(FRAMEWORK_ROOT, "..", "mdx-content", "dist"),
     join(FRAMEWORK_ROOT, "..", "ui-react", "dist"),
     join(FRAMEWORK_ROOT, "..", "core", "dist"),
     join(FRAMEWORK_ROOT, "..", "themes-colors", "dist"),
   ];
-  for (const d of depDirs) scanDirLucideIcons(resolve(d), icons);
+  for (const dir of dependencyDirs) scanDirLucideIcons(resolve(dir), icons);
   return [...icons];
 }
 
-/** Build the client JS bundle and Tailwind CSS. */
 export async function buildClientBundle(
   /** slug → compiled MDX ESM module source (program format) for static hydration. */
   mdxSources: Record<string, string> = {}
-): Promise<{ js: string; css: string }> {
+): Promise<AssetManifest> {
   await mkdir(ASSETS_DIR, { recursive: true });
-  const twKey = tailwindCacheKey();
-  await cleanOldBundles(new Set([`client-${twKey}.css`]));
-
+  await cleanOldBundles();
   const nodeEnv = process.env.NODE_ENV || "development";
+  const mdxEntries = createMdxModuleEntries(mdxSources);
+  const mdxEntriesById = new Map(mdxEntries.map((entry) => [entry.id, entry]));
+  const docsEntryPath = join(LIB_DIR, "client.ts");
+  const homeEntryPath = join(LIB_DIR, "home-client.ts");
 
-  const entryPath = join(LIB_DIR, "client.ts");
   const bundle = await viteBuild({
     configFile: false,
     publicDir: false,
@@ -261,27 +239,20 @@ export async function buildClientBundle(
         name: "mdx-hydrate",
         resolveId(id) {
           if (/mdx-manifest$/.test(id)) return "\0mdx-manifest";
-          if (id.startsWith("mdx-module:")) return `\0${id}`;
+          if (/^docubook-mdx-page-[a-f0-9]{16}$/.test(id)) return `\0${id}`;
           return null;
         },
         load(id) {
           if (id === "\0mdx-manifest") {
-            const slugs = Object.keys(mdxSources).sort();
-            const imports = slugs
-              .map((slug, i) => {
-                const key = slug.replace(/["\\]/g, "");
-                return `import * as _mdx${i} from ${JSON.stringify(`mdx-module:${key}`)};`;
-              })
-              .join("\n");
-            const map = slugs.map((slug, i) => `${JSON.stringify(slug)}: _mdx${i}`).join(", ");
-            return `${imports}\nexport const mdxModules = { ${map} };\n`;
-          }
-          if (!id.startsWith("\0mdx-module:")) return null;
-          const slug = id.slice("\0mdx-module:".length);
-          const contents = mdxSources[slug];
-          if (contents == null) {
-            throw new Error(`unknown mdx module: ${slug}`);
+            const map = mdxEntries
+              .map(({ slug, id }) => `${JSON.stringify(slug)}: () => import(${JSON.stringify(id)})`)
+              .join(", ");
+            return `export const mdxModules = { ${map} };\n`;
           }
+          if (!id.startsWith("\0docubook-mdx-page-")) return null;
+          const entry = mdxEntriesById.get(id.slice(1));
+          const contents = entry == null ? undefined : mdxSources[entry.slug];
+          if (contents == null) throw new Error(`unknown mdx module: ${id}`);
           return contents;
         },
       },
@@ -293,11 +264,11 @@ export async function buildClientBundle(
       minify: nodeEnv === "production",
       target: "es2020",
       rollupOptions: {
-        input: entryPath,
+        input: { client: docsEntryPath, "home-client": homeEntryPath },
         output: {
           format: "es",
-          entryFileNames: "client-[hash].js",
-          chunkFileNames: "chunks/[name]-[hash].js",
+          entryFileNames: "[name]-[hash].js",
+          chunkFileNames: viteChunkFileName,
           assetFileNames: "assets/[name]-[hash][extname]",
         },
       },
@@ -305,29 +276,30 @@ export async function buildClientBundle(
   });
 
   const outputs = Array.isArray(bundle) ? bundle : [bundle];
-  let jsFile: string | undefined;
+  let docsJs: string | undefined;
+  let homeJs: string | undefined;
   for (const item of outputs) {
     if (!("output" in item)) continue;
     for (const output of item.output) {
-      if (
-        output.type === "chunk" &&
-        output.isEntry &&
-        output.facadeModuleId &&
-        resolve(output.facadeModuleId) === entryPath
-      ) {
-        jsFile = basename(output.fileName);
-        break;
-      }
+      if (output.type !== "chunk" || !output.isEntry) continue;
+      if (output.name === "client") docsJs = output.fileName;
+      if (output.name === "home-client") homeJs = output.fileName;
     }
-    if (jsFile) break;
   }
-  if (!jsFile) {
-    throw new Error("Client bundle produced no output files");
+  if (!docsJs || !homeJs) {
+    throw new Error("Client bundle produced incomplete entry-point outputs");
   }
 
-  const { file: cssFile } = await buildTailwindCss(twKey);
-
-  await writeFile(join(ASSETS_DIR, "manifest.json"), JSON.stringify({ js: jsFile, css: cssFile }));
+  const [{ file: docsCss }, { file: siteCss }] = await Promise.all([
+    buildTailwindCss("docs", "globals.css"),
+    buildTailwindCss("site", "site.css"),
+  ]);
 
-  return { js: jsFile, css: cssFile };
+  const manifest: AssetManifest = {
+    docs: { js: docsJs, css: docsCss },
+    home: { js: homeJs, css: siteCss },
+    notFound: { css: siteCss },
+  };
+  await writeFile(join(ASSETS_DIR, "manifest.json"), JSON.stringify(manifest));
+  return manifest;
 }

package/.docu/node/hydrate.ts

@@ -1,15 +1,25 @@
-import { join } from "node:path";
-import { mkdir, unlink, rename } from "node:fs/promises";
+import { createHash } from "node:crypto";
+import { basename, join } from "node:path";
+import { mkdir, rename, unlink } from "node:fs/promises";
 import { existsSync } from "node:fs";
 import { resolveTheme, generateThemeCss, presetRegistry } from "@docubook/themes-colors";
 import { ASSETS_DIR, cleanOldBundles, LIB_DIR, STYLES_DIR, loadDocuConfig } from "./paths";
-import { atomicWriteFile, computeTailwindCacheKey, readGlobalsCss } from "./cache-key";
+import { atomicWriteFile, computeTailwindCacheKey, readStyleCss } from "./cache-key";
 import { resolveRoutes } from "./fs-scanner";
-import type { DocuRoute } from "./types";
+import type { AssetManifest, DocuRoute } from "./types";
 import type { ThemeConfig } from "@docubook/themes-colors";
 
 const themeRegistry = presetRegistry;
 
+export function createMdxModuleEntries(mdxSources: Record<string, string>) {
+  return Object.keys(mdxSources)
+    .sort()
+    .map((slug) => ({
+      slug,
+      id: `docubook-mdx-page-${createHash("sha256").update(slug).digest("hex").slice(0, 16)}`,
+    }));
+}
+
 /**
  * Read the effective theme config with this priority:
  * 1. FLAME_THEME env var (CLI --theme flag)
@@ -23,9 +33,7 @@ export function getThemeConfig(): ThemeConfig | undefined {
   return config.themes?.colors;
 }
 
-/**
- * Append theme CSS to compiled Tailwind output based on theme config.
- */
+/** Append theme CSS to compiled Tailwind output based on theme config. */
 export function buildThemeCss(baseCss: string, themeConfig: unknown): string {
   try {
     const resolved = resolveTheme(themeConfig as ThemeConfig | undefined | null, themeRegistry);
@@ -38,10 +46,7 @@ export function buildThemeCss(baseCss: string, themeConfig: unknown): string {
   }
 }
 
-/**
- * Compute inline theme CSS for FOUC prevention.
- * Returns undefined if no theme is configured or on error.
- */
+/** Compute inline theme CSS for FOUC prevention. */
 export function computeInlineThemeCss(): string | undefined {
   try {
     const themeColors = getThemeConfig();
@@ -57,41 +62,35 @@ export function computeInlineThemeCss(): string | undefined {
   return undefined;
 }
 
-/** Compute Tailwind cache key from globals.css + theme + config + toolchain. */
-function twCacheKey(): string {
-  const globals = readGlobalsCss();
-  let themeSuffix = "";
+function themeCacheSuffix(): string {
   try {
     const themeColors = getThemeConfig();
-    if (themeColors) themeSuffix = JSON.stringify(themeColors);
+    return themeColors ? JSON.stringify(themeColors) : "";
   } catch {
-    // theme config unavailable — proceed without
+    return "";
   }
-  return computeTailwindCacheKey(globals, themeSuffix);
 }
 
-/** Run Tailwind CLI, caching by content hash. */
-async function buildTailwindCss(key: string): Promise<{ file: string; content: string }> {
-  const cachedFile = `client-${key}.css`;
+function tailwindCacheKey(styleFile: string): string {
+  return computeTailwindCacheKey(readStyleCss(styleFile), `${styleFile}\0${themeCacheSuffix()}`);
+}
+
+/** Run Tailwind CLI, caching each route stylesheet by content hash. */
+async function buildTailwindCss(
+  name: string,
+  styleFile: string
+): Promise<{ file: string; content: string }> {
+  const key = tailwindCacheKey(styleFile);
+  const cachedFile = `${name}-${key}.css`;
   const cachedPath = join(ASSETS_DIR, cachedFile);
 
   if (existsSync(cachedPath)) {
-    const content = await Bun.file(cachedPath).text();
-    return { file: cachedFile, content };
+    return { file: cachedFile, content: await Bun.file(cachedPath).text() };
   }
 
-  const tmpCss = join(ASSETS_DIR, `_tmp-${key}.css`);
+  const tmpCss = join(ASSETS_DIR, `_tmp-${name}-${key}.css`);
   const proc = Bun.spawn(
-    [
-      "bun",
-      "x",
-      "@tailwindcss/cli",
-      "-i",
-      join(STYLES_DIR, "globals.css"),
-      "-o",
-      tmpCss,
-      "--minify",
-    ],
+    ["bun", "x", "@tailwindcss/cli", "-i", join(STYLES_DIR, styleFile), "-o", tmpCss, "--minify"],
     { stdout: "ignore", stderr: "pipe" }
   );
   await proc.exited;
@@ -112,31 +111,33 @@ async function buildTailwindCss(key: string): Promise<{ file: string; content: s
     );
   }
 
-  const cssFile = `client-${key}.css`;
-  const outPath = join(ASSETS_DIR, cssFile);
-  // Atomic tmp+rename with pid suffix: parallel builds never clobber each
-  // other, and a crash cannot leave a half-written CSS file behind.
-  if (!existsSync(outPath)) {
+  if (!existsSync(cachedPath)) {
     const { writeFile } = await import("node:fs/promises");
-    await atomicWriteFile(writeFile, rename, unlink, outPath, cssContent);
+    await atomicWriteFile(writeFile, rename, unlink, cachedPath, cssContent);
   }
 
-  return { file: cssFile, content: cssContent };
+  return { file: cachedFile, content: cssContent };
 }
 
 export async function buildClientBundle(
   /** slug → compiled MDX ESM module source (program format) for static hydration. */
   mdxSources: Record<string, string> = {}
-): Promise<{ js: string; css: string }> {
+): Promise<AssetManifest> {
   await mkdir(ASSETS_DIR, { recursive: true });
-  const twKey = twCacheKey();
-  await cleanOldBundles(new Set([`client-${twKey}.css`]));
+  await cleanOldBundles();
 
   const nodeEnv = process.env.NODE_ENV || "development";
+  const mdxEntries = createMdxModuleEntries(mdxSources);
+  const mdxEntriesById = new Map(mdxEntries.map((entry) => [entry.id, entry]));
   const result = await Bun.build({
-    entrypoints: [join(LIB_DIR, "client.ts")],
+    entrypoints: [join(LIB_DIR, "client.ts"), join(LIB_DIR, "home-client.ts")],
     outdir: ASSETS_DIR,
-    naming: "client-[hash].[ext]",
+    splitting: true,
+    naming: {
+      entry: "[name]-[hash].[ext]",
+      chunk: "chunks/[name]-[hash].[ext]",
+      asset: "assets/[name]-[hash].[ext]",
+    },
     target: "browser",
     minify: nodeEnv === "production",
     define: { "process.env.NODE_ENV": JSON.stringify(nodeEnv) },
@@ -144,8 +145,6 @@ export async function buildClientBundle(
       {
         name: "docu-config",
         setup(build) {
-          // Components import as "../node/client-routes" (no .ts extension),
-          // so filter matches the path tail without requiring the extension.
           build.onResolve({ filter: /client-routes$/ }, (args) => ({
             path: args.path,
             namespace: "client-routes",
@@ -169,21 +168,18 @@ export async function buildClientBundle(
         },
       },
       {
-        // Serves per-page compiled MDX (program format) as real modules so
-        // the client hydrates the content island without `new Function`.
-        // client.ts imports `{ mdxModules } from "./mdx-manifest"`.
         name: "mdx-hydrate",
         setup(build) {
-          build.onResolve({ filter: /^mdx-module:/ }, (args) => ({
+          build.onResolve({ filter: /^docubook-mdx-page-[a-f0-9]{16}$/ }, (args) => ({
             path: args.path,
             namespace: "mdx-module",
           }));
           build.onLoad({ filter: /.*/, namespace: "mdx-module" }, (args) => {
-            const slug = args.path.slice("mdx-module:".length);
-            const contents = mdxSources[slug];
+            const entry = mdxEntriesById.get(args.path);
+            const contents = entry == null ? undefined : mdxSources[entry.slug];
             if (contents == null) {
               return {
-                errors: [{ text: `unknown mdx module: ${slug}` }],
+                errors: [{ text: `unknown mdx module: ${args.path}` }],
                 contents: "",
                 loader: "js",
               };
@@ -195,20 +191,11 @@ export async function buildClientBundle(
             namespace: "mdx-manifest",
           }));
           build.onLoad({ filter: /.*/, namespace: "mdx-manifest" }, () => {
-            // Sort keys: the prePass fills mdxSources via Promise.all, so
-            // insertion order = resolution order (non-deterministic across
-            // processes). Stable key order keeps the bundle hash stable so
-            // the build cache (`assetsChanged`) actually hits.
-            const slugs = Object.keys(mdxSources).sort();
-            const imports = slugs
-              .map((slug, i) => {
-                const key = slug.replace(/["\\]/g, "");
-                return `import * as _mdx${i} from "mdx-module:${key}";`;
-              })
-              .join("\n");
-            const map = slugs.map((slug, i) => `${JSON.stringify(slug)}: _mdx${i}`).join(", ");
+            const map = mdxEntries
+              .map(({ slug, id }) => `${JSON.stringify(slug)}: () => import(${JSON.stringify(id)})`)
+              .join(", ");
             return {
-              contents: `${imports}\nexport const mdxModules = { ${map} };\n`,
+              contents: `export const mdxModules = { ${map} };\n`,
               loader: "js",
             };
           });
@@ -222,18 +209,25 @@ export async function buildClientBundle(
     throw new Error("Client bundle failed");
   }
 
-  if (!result.outputs[0]) {
-    throw new Error("Client bundle produced no output files");
+  const entryFiles = result.outputs
+    .filter((output) => output.kind === "entry-point")
+    .map((output) => basename(output.path));
+  const docsJs = entryFiles.find((file) => file.startsWith("client-"));
+  const homeJs = entryFiles.find((file) => file.startsWith("home-client-"));
+  if (!docsJs || !homeJs) {
+    throw new Error("Client bundle produced incomplete entry-point outputs");
   }
-  const entry = result.outputs.find((o) => o.kind === "entry-point");
-  if (!entry) {
-    throw new Error("Client bundle produced no entry-point output");
-  }
-  const jsFile = entry.path.split("/").pop()!;
-
-  const { file: cssFile } = await buildTailwindCss(twKey);
-
-  await Bun.write(join(ASSETS_DIR, "manifest.json"), JSON.stringify({ js: jsFile, css: cssFile }));
 
-  return { js: jsFile, css: cssFile };
+  const [{ file: docsCss }, { file: siteCss }] = await Promise.all([
+    buildTailwindCss("docs", "globals.css"),
+    buildTailwindCss("site", "site.css"),
+  ]);
+
+  const manifest: AssetManifest = {
+    docs: { js: docsJs, css: docsCss },
+    home: { js: homeJs, css: siteCss },
+    notFound: { css: siteCss },
+  };
+  await Bun.write(join(ASSETS_DIR, "manifest.json"), JSON.stringify(manifest));
+  return manifest;
 }

package/.docu/node/mdx-manifest.d.ts

@@ -1,4 +1,4 @@
 // Virtual module served by the `mdx-hydrate` esbuild plugin (hydrate.node.ts).
-// Maps doc slug → compiled MDX module. Generated at bundle time; never on disk.
+// Maps doc slug → lazy compiled MDX module. Generated at bundle time; never on disk.
 import type { ComponentType } from "react";
-export declare const mdxModules: Record<string, { default: ComponentType }>;
+export declare const mdxModules: Record<string, () => Promise<{ default: ComponentType }>>;

package/.docu/node/paths.ts

@@ -64,21 +64,14 @@ export async function cleanOldBundles(preserve?: Set<string>) {
     const files = await readdir(ASSETS_DIR);
     for (const file of files) {
       if (preserve?.has(file)) continue;
-      if (file.startsWith("client.") || file.startsWith("client-")) {
+      if (/^(client|home-client|docs|site)[.-]/.test(file)) {
         await unlink(join(ASSETS_DIR, file));
       }
     }
-  } catch (err) {
-    if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
-      console.error("Failed to clean old bundles:", (err as Error).message);
-    }
-  }
-  try {
     await rm(join(ASSETS_DIR, "chunks"), { recursive: true, force: true });
   } catch (err) {
-    // chunks dir may not exist, or permission error — log to avoid silent failure
     if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
-      console.warn("[flame] Failed to clean chunks dir:", (err as Error).message);
+      console.error("Failed to clean old bundles:", (err as Error).message);
     }
   }
 }