@thomas.f/prnext 0.1.18-alpha → 0.1.19-alpha

package/README.md

@@ -93,6 +93,8 @@ npm run dev -- examples/app
 
 Source builds require Rust 1.98 and native build tools: Visual Studio C++ tools and a Windows SDK on Windows, Xcode command line tools on macOS, or a C/C++ toolchain and pkg-config on Linux. Install NASM on macOS, Linux and Windows x64.
 
+For a larger integration example, see the [SaaS reference](https://github.com/Lorkydey/PRNext/tree/main/examples/saas-reference): Better Auth, PostgreSQL/Drizzle, French/English routing and a portable standalone build. It has its own dependency lockfile and database setup.
+
 </details>
 
 ## Documentation

package/build/actions.mjs

@@ -9,28 +9,39 @@ import path from 'node:path';
 
 const traverse = traverseModule.default || traverseModule;
 const generate = generateModule.default || generateModule;
+// Kept inside the compiler process. The development session is public metadata
+// and must never be usable by itself to derive an action encryption key.
+const processDevelopmentSecret = randomBytes(32);
 function hasDirective(node,value) { return node?.directives?.some(item=>item.value.value===value); }
 function removeDirective(node,value) { if(node?.directives) node.directives=node.directives.filter(item=>item.value.value!==value); }
 
-export function createServerActions({ projectRoot }) {
-  const salt = randomBytes(32);
+export function createServerActions({ projectRoot, developmentSession, developmentSecret }) {
+  if (developmentSession !== undefined && (typeof developmentSession !== 'string' || !developmentSession || developmentSession.length > 1024)) throw new TypeError('A development action session must be a non-empty string of at most 1024 characters');
+  if (developmentSecret !== undefined && (typeof developmentSecret !== 'string' || !/^[A-Za-z0-9+/]{43}=$/.test(developmentSecret))) throw new TypeError('A development action secret must encode 32 random bytes');
+  const privateSecret = developmentSecret ? Buffer.from(developmentSecret,'base64') : processDevelopmentSecret;
+  const derive = purpose => createHmac('sha256', privateSecret).update(JSON.stringify([purpose, path.resolve(projectRoot), developmentSession])).digest();
+  const salt = developmentSession ? derive('action-identities') : randomBytes(32);
   const modules = new Map();
   const actions = new Map();
   const configured = process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY;
   if (configured && (!/^[A-Za-z0-9+/]+={0,2}$/.test(configured) || ![16,24,32].includes(Buffer.from(configured,'base64').length))) throw new Error('NEXT_SERVER_ACTIONS_ENCRYPTION_KEY must be a base64-encoded 16, 24, or 32 byte AES key.');
-  const actionKey = configured ? Buffer.from(configured,'base64').toString('base64') : randomBytes(32).toString('base64');
-  function identity(file,name) { return createHmac('sha256',salt).update(path.relative(projectRoot,file).replaceAll(path.sep,'/')+'\0'+name).digest('hex'); }
-  function register(file,name,binding) {
-    const id=identity(file,name);
+  const actionKey = configured ? Buffer.from(configured,'base64').toString('base64') : (developmentSession ? derive('action-encryption') : randomBytes(32)).toString('base64');
+  function identity(file,name,revision) { return createHmac('sha256',salt).update(path.relative(projectRoot,file).replaceAll(path.sep,'/')+'\0'+name+(revision?'\0'+revision:'')).digest('hex'); }
+  function register(file,name,binding,revision) {
+    const id=identity(file,name,revision);
     if(!actions.has(id)) actions.set(id,{id,file,binding});
     return id;
   }
 
-  function analyze(source,file) {
-    const key=file+'\0'+createHash('sha256').update(source).digest('hex');
+  function analyze(source,file,{revisionSource=source}={}) {
+    const sourceHash=createHash('sha256').update(source).digest('hex');
+    // Cache transforms embed a generation ID. IDs for an unchanged action must
+    // follow its original source revision, not those ephemeral emitted bytes.
+    const revision=developmentSession?createHash('sha256').update(revisionSource).digest('hex'):sourceHash;
+    const key=file+'\0'+sourceHash+(developmentSession?'\0'+revision:'');
     if(modules.has(key))return modules.get(key);
     const template=JSON.parse(cachedTransform('server-action-analysis',source,[projectRoot,file],()=>JSON.stringify(analyzeTemplate(source,file))));
-    const ids=new Map(template.registrations.map(item=>[item.id,register(file,item.name,item.binding)]));
+    const ids=new Map(template.registrations.map(item=>[item.id,register(file,item.name,item.binding,developmentSession?revision:undefined)]));
     let server=template.server;
     for(const [previous,current]of ids)server=server.replaceAll(previous,current);
     const result={...template,server,declared:template.declared.map(item=>({...item,id:ids.get(item.id)}))};
@@ -203,13 +214,14 @@ export function createServerActions({ projectRoot }) {
   return {
     actions, actionKey,
     // Only compiler-generated module-level action proxies bypass React Refresh.
-    // Their random reference IDs change each build; they are not component exports.
-    isServerModule(source,file) {
-      return source.includes('use server') && analyze(source,file).moduleServer === true;
+    // Their opaque IDs are not component exports. Development keeps unchanged
+    // modules valid within one session; production IDs still change each build.
+    isServerModule(source,file,options) {
+      return source.includes('use server') && analyze(source,file,options).moduleServer === true;
     },
-    transform(source,file,mode) {
+    transform(source,file,mode,options) {
       if(!source.includes('use server')) return source;
-      const result=analyze(source,file);
+      const result=analyze(source,file,options);
       // A Route Handler invokes the implementation as ordinary server code.
       // It does not serialize functions through Flight or manufacture proxies.
       // Analyze first to preserve validation and the shared action registry.

package/build/app.mjs

@@ -21,6 +21,7 @@ import {createReactCompilerTransform} from './react-compiler.mjs';
 import {createAppStyleGraph, appStyleScopes, planAppStyleEntries} from './app-styles.mjs';
 import {selectHtmlOnlyRoutes} from './html-only-config.mjs';
 import {createHtmlOnlyGraph} from './html-only-graph.mjs';
+import {createLazyDynamicImports} from './lazy-dynamic-imports.mjs';
 
 const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const extensions = { '.js': 'jsx', '.jsx': 'jsx', '.mjs': 'jsx', '.cjs': 'jsx', '.ts': 'ts', '.tsx': 'tsx', '.mts': 'ts', '.cts': 'ts' };
@@ -177,16 +178,18 @@ function routeEntry(route, globalError, dev) {
 }
 
 /** Compile independent React Server and client graphs. The RSC graph contains only references to client boundaries. */
-export async function compileApp({ project, stage, manifest, cssModules, fonts, images, dev, reactCompiler = false, defineEnvironment = {}, productionBrowserSourceMaps = false, serverExternalPackages = [], moduleResolution = {} }) {
+export async function compileApp({ project, stage, manifest, cssModules, fonts, images, dev, devActionSecret, reactCompiler = false, defineEnvironment = {}, productionBrowserSourceMaps = false, serverExternalPackages = [], moduleResolution = {},lazyDynamicImports=false,devLazyRequest,devLazyOnly=false,devLazyActivated=[] }) {
+  if(devLazyOnly&&(!dev||!lazyDynamicImports||!devLazyRequest))throw Error('Deferred-only compilation requires a registered development import');
   const refresh = dev ? createRefreshTransform(project.root, {generation:manifest.cacheId,forceGeneration:manifest.devForceRefresh,forceFiles:manifest.devAffectedModules}) : undefined;
   const locations = dev ? createSourceLocationTransform(project.root) : undefined;
   const compileReact = reactCompiler ? createReactCompilerTransform(project.root, reactCompiler, {dev}) : undefined;
   const { basePath = '', assetPrefix = '', assetBase = '/_prnext/assets', trailingSlash = false, skipTrailingSlashRedirect = false } = manifest.config || {};
   const publicPath = assetBase + '/';
-  const routes = project.routes.filter(route => route.router === 'app');
+  const lazy=dev&&lazyDynamicImports?createLazyDynamicImports({root:project.root,stage,manifest,request:devLazyRequest,activated:devLazyActivated}):undefined;
+  const routes = devLazyOnly?[]:project.routes.filter(route => route.router === 'app');
   const htmlOnly = dev ? new Set() : selectHtmlOnlyRoutes(project.routes, manifest.config.htmlOnly, manifest.config);
   const htmlGraph = !dev && htmlOnly.size ? createHtmlOnlyGraph(project.root) : undefined;
-  if (project.appNotFound) {
+  if (project.appNotFound&&!devLazyOnly) {
     const file = path.join(stage, '.entries', 'app-not-found.jsx');
     await writeFile(file, `import {notFound} from 'next/navigation';export default function MissingRoute(){notFound()}`);
     const segments = project.appNotFound.segments.map(segment => ({ ...segment }));
@@ -199,12 +202,12 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     routes.push({ ...project.appNotFound, segments, id, file, pattern: '/_not-found', kind: 'page', router: 'app', internal: true });
     manifest.appNotFound = id;
   }
-  if (!routes.length) return;
+  if (!routes.length&&!devLazyOnly) return;
   if (!manifest.config.cacheComponents && routes.some(route => route.cacheConfig?.instant !== undefined || route.pageConfig?.instant !== undefined || route.segments?.some(segment => segment.staticConfig?.instant !== undefined))) throw new Error('instant requires cacheComponents: true.');
   if (!manifest.config.cacheComponents && routes.some(route => route.cacheConfig?.ensureStatic !== undefined || route.pageConfig?.ensureStatic !== undefined || route.segments?.some(segment => segment.staticConfig?.ensureStatic !== undefined))) throw new Error('ensureStatic requires cacheComponents: true.');
-  const actions = createServerActions({ projectRoot: project.root });
-  function actionTransform(source, file, mode, runtime = 'nodejs') {
-    const result = actions.transform(source, file, mode);
+  const actions = createServerActions({ projectRoot: project.root,developmentSession:dev?manifest.devSession:undefined,developmentSecret:dev?devActionSecret:undefined });
+  function actionTransform(source, file, mode, runtime = 'nodejs', revisionSource = source) {
+    const result = actions.transform(source, file, mode, {revisionSource});
     if (mode !== 'browser') for (const action of actions.actions.values()) if (action.file === file) {
       (action.runtimes ||= new Set()).add(runtime);
     }
@@ -321,7 +324,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
           }), args.path);
           const cacheSegment = cacheSegments.get(await canonicalFile(args.path)) || '';
           const cachedSource = transformCacheComponents(source, args.path, { enabled: manifest.config.cacheComponents, handlers: manifest.config.cacheHandlers, projectRoot: project.root, mode, buildId: manifest.cacheId, segment: cacheSegment });
-          const actionSource = actionTransform(cachedSource, args.path, mode);
+          const actionSource = actionTransform(cachedSource, args.path, mode, 'nodejs', original);
           const builtin = path.dirname(args.path) === path.join(packageRoot, 'compat') && forcedClient.has(path.basename(args.path));
           if (rsc && (builtin || clientDirective(source, args.path))) {
             htmlGraph?.issue(args.path, 'a Client Component or interactive framework component');
@@ -334,8 +337,9 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
             const references = boundary.exports.map((name, index) => builtin && path.basename(args.path) === 'image.cjs' && name === 'getImageProps' ? `export {getImageProps} from ${JSON.stringify(path.join(packageRoot, 'compat/image-shared.cjs'))};` : `const ref${index}=registerClientReference(function(){throw new Error(${JSON.stringify(`Cannot call client export ${name} from a Server Component (${path.relative(project.root, args.path)}).`)});},${JSON.stringify(boundary.id)},${JSON.stringify(name)});export {ref${index} as ${JSON.stringify(name)}};`);
             return { contents: `import {registerClientReference} from 'react-server-dom-webpack/server';\n${references.join('\n')}`, loader: 'js', resolveDir: path.dirname(args.path) };
           }
-          let contents = transformDynamicImports(actionSource, args.path, { projectRoot: project.root, mode: rsc ? 'rsc' : browser ? 'browser' : 'server' });
-          if (browser && refresh && !actions.isServerModule(cachedSource,args.path)) contents = await refresh(contents, args.path);
+          let contents = transformDynamicImports(actionSource, args.path, { projectRoot: project.root, mode: rsc ? 'rsc' : browser ? 'browser' : 'server',dev });
+          if(browser&&lazy)contents=lazy.transform(contents,args.path);
+          if (browser && refresh && !actions.isServerModule(cachedSource,args.path,{revisionSource:original})) contents = await refresh(contents, args.path);
           return { contents, loader: extensions[path.extname(args.path)] || 'jsx', resolveDir: path.dirname(args.path) };
         });
       },
@@ -401,7 +405,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
         return actionTransform(await fonts.transform(await expandActionExports(locations?await locations(compiled,file):compiled, file, async (specifier, importer) => {
           const resolved = await builder.resolve(specifier, {resolveDir:path.dirname(importer),kind:'import-statement',pluginData:{prnextExportScan:true}});
           return resolved.errors.length || resolved.external || resolved.namespace !== 'file' ? undefined : resolved.path;
-        }), file), file, mode, 'edge');
+        }), file), file, mode, 'edge', source);
       } });
     fonts.record(result.metafile);
     styleGraph.record(result.metafile);
@@ -448,22 +452,25 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     return output;
   }
 
-  async function collectBrowserStyles(browserEntries) {
+  async function collectBrowserStyles(browserEntries,force=false) {
     const revision = `${boundaries.size}:${actions.actions.size}:${nativePackages.version}`;
-    if (browserStyleRevision === revision) return;
+    if (!force&&browserStyleRevision === revision) return;
     // SSR intentionally erases ssr:false loaders. Discover their dependencies
     // in one browser graph, then classify styles by reachability from each root.
     const discovery = await bundle({ ...common, write: false, entryPoints: browserEntries, outdir: path.join(stage, '.browser-styles'),
       platform: 'browser', format: 'esm', target: ['es2022'], splitting: true,
       define: { 'process.env': '{}', ...common.define },
-      plugins: [moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), nativePackages.plugin('browser'), cssModules.plugin(true)] });
+      plugins: [...(lazy?[lazy.plugin()]:[]),moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), nativePackages.plugin('browser'), cssModules.plugin(true)] });
+    await lazy?.discover(discovery.metafile);
     fonts.record(discovery.metafile);
     styleGraph.record(discovery.metafile);
-    const entryIds = new Map(await Promise.all(Object.entries(browserEntries).map(async ([id, file]) => [await canonicalFile(file), id])));
+    const entryIds = new Map((await Promise.all(Object.entries(browserEntries).map(async ([id, file]) => [[path.resolve(file), id], [await canonicalFile(file), id]]))).flat());
     const globalRoots = [], normalRoots = [];
     for (const output of Object.values(discovery.metafile.outputs)) {
       if (!output.entryPoint) continue;
-      const id = entryIds.get(await canonicalFile(path.resolve(project.root, output.entryPoint)));
+      // Dynamic entry points can contain a query/fragment identity rather
+      // than a physical filename. Only configured roots need classification.
+      const id = entryIds.get(path.resolve(project.root, output.entryPoint));
       if (id) (id === globalErrorId ? globalRoots : normalRoots).push(output.entryPoint);
     }
     async function collect(roots, target) {
@@ -514,12 +521,13 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
   const browserRevision = () => `${boundaryRevision()}:${cssFiles.size}:${globalErrorCssFiles.size}:${nativePackages.version}`;
   // Route Handlers have a Node React environment and must not share RSC chunks
   // that import registerServerReference or client-reference registration.
-  await serverBuild(handlerEntries, 'server', 'route');
+  if (!devLazyOnly) await serverBuild(handlerEntries, 'server', 'route');
   for (;;) {
     // Each graph consumes discoveries from the preceding one. Discovering a
     // client boundary in RSC is normal: SSR and browser below already include
     // it. Only discoveries made too late for a graph require another pass.
     const emittedActions = actionRevision();
+    if (!devLazyOnly) {
     for (const action of actions.actions.values()) {
       const entry = path.join(stage, '.entries', 'action-' + action.id + '.mjs');
       await writeFile(entry, `export {${JSON.stringify(action.binding)} as invoke} from ${JSON.stringify(action.file)};`);
@@ -527,8 +535,10 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
       if (!action.runtimes?.size || action.runtimes.has('nodejs')) entries['action-' + action.id] = entry;
     }
     await serverBuild(entries, 'server', 'rsc');
+    }
     const serverNativeVersion = nativePackages.version;
     const emittedBoundaries = boundaryRevision();
+    if (!devLazyOnly) {
     const ssrEntries = {};
     const globalSsrEntries = {};
     for (const boundary of boundaries.values()) {
@@ -539,40 +549,49 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     await serverBuild(ssrEntries, 'app-ssr', 'ssr');
     for (const boundary of boundaries.values()) if (boundary.edge) await edgeAppBuild(path.join(stage, '.entries', boundary.id + '.ssr.mjs'), path.join(stage, 'app-ssr-edge', boundary.id + '.mjs'), 'ssr', boundary.exports.includes('default'));
     await serverBuild(globalSsrEntries, 'app-ssr', 'ssr', globalErrorCssFiles);
+    }
     const browserEntries = {};
     for (const boundary of boundaries.values()) {
       const entry = path.join(stage, '.entries', boundary.id + '.browser.mjs');
       await writeFile(entry, boundaryEntry(boundary));
       browserEntries[boundary.id] = entry;
     }
-    await collectBrowserStyles(browserEntries);
+    if(!devLazyRequest)await collectBrowserStyles(browserEntries);
+    let lazyEntries={};
+    if(lazy)for(;;){
+      const next=await lazy.targetEntries();
+      if(Object.keys(next).join(',')===Object.keys(lazyEntries).join(','))break;
+      lazyEntries=next;
+      await collectBrowserStyles(devLazyRequest?lazyEntries:{...browserEntries,...lazyEntries},true);
+    }
     globalErrorOnlyCss.clear();
     for (const file of globalErrorCssFiles) if (!cssFiles.has(file)) globalErrorOnlyCss.add(file);
     const emittedBrowserInputs = browserRevision();
-    if (routes.some(route => route.kind === 'page')) {
+    if (devLazyOnly||routes.some(route => route.kind === 'page')) {
     let globalErrorCss = [];
     if (globalErrorCssFiles.size) {
       const styleEntry = path.join(stage, '.entries', 'app-global-error-style.mjs');
       await writeFile(styleEntry, [...globalErrorCssFiles].map(file => `import ${JSON.stringify(file)};`).join('\n'));
       const styles = await bundle({ ...common, entryPoints: { 'app-global-error-style': styleEntry }, outdir: path.join(stage, 'assets'), entryNames: '[name]-[hash]',
         platform: 'browser', format: 'esm', target: ['es2022'], minify: !dev, sourcemap: dev || productionBrowserSourceMaps,
-        plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] });
+        plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] }, { role: 'styles' });
       globalErrorCss = Object.values(styles.metafile.outputs).filter(output => output.cssBundle).map(output => publicPath + path.basename(output.cssBundle));
     }
     if (globalErrorId) manifest.app.globalError = { id: globalErrorId, name: 'default', css: globalErrorCss };
     const runtimeEntry = path.join(stage, '.entries', 'app-runtime.mjs');
     const htmlOnlyRoutes = !dev && htmlOnly.size ? routes.filter(route => route.kind === 'page' && !route.internal).map(route => ({pattern:route.pattern,...(htmlOnly.has(route.id)?{htmlOnly:true}:{})})) : undefined;
     const importers = Object.entries(browserEntries).map(([id, file]) => `${JSON.stringify(id)}:()=>import(${JSON.stringify(file)})`);
-    await writeFile(runtimeEntry, `${dev ? `import ${JSON.stringify(devClientFile)};\n` : ''}\nimport {bootstrapApp} from ${JSON.stringify(path.join(packageRoot, 'runtime/app-client.mjs'))};\nbootstrapApp({clientModules:{${importers.join(',')}},...${JSON.stringify({ basePath, assetPrefix, assetBase, htmlOnlyRoutes, trailingSlash, skipTrailingSlashRedirect, deploymentId: dev ? undefined : manifest.cacheId, strictMode: manifest.config.reactStrictMode !== false, cacheComponents: manifest.config.cacheComponents === true, partialPrefetching: manifest.config.partialPrefetching === true, navigationCache: manifest.config.navigationCache, ...(globalErrorId ? { globalErrorId, globalErrorCss } : {}), ...(dev ? { dev: { buildId: manifest.buildId, clientManifest: manifest.devClient, onDemand:manifest.devOnDemand===true, sequence:manifest.devSequence, session:manifest.devSession, indicator:manifest.devIndicators, ...(manifest.devTools ? {tools:manifest.devTools} : {}) } } : {}) })}});\n`);
-    const clientEntries = { 'app-runtime': runtimeEntry, ...browserEntries };
+    if(!devLazyRequest)await writeFile(runtimeEntry, `${dev ? `import ${JSON.stringify(devClientFile)};\n` : ''}\nimport {bootstrapApp} from ${JSON.stringify(path.join(packageRoot, 'runtime/app-client.mjs'))};\nbootstrapApp({clientModules:{${importers.join(',')}},...${JSON.stringify({ basePath, assetPrefix, assetBase, htmlOnlyRoutes, trailingSlash, skipTrailingSlashRedirect, deploymentId: dev ? undefined : manifest.cacheId, strictMode: manifest.config.reactStrictMode !== false, cacheComponents: manifest.config.cacheComponents === true, partialPrefetching: manifest.config.partialPrefetching === true, navigationCache: manifest.config.navigationCache, ...(globalErrorId ? { globalErrorId, globalErrorCss } : {}), ...(dev ? { dev: { buildId: manifest.buildId, clientManifest: manifest.devClient, onDemand:manifest.devOnDemand===true, sequence:manifest.devSequence, session:manifest.devSession, indicator:manifest.devIndicators, ...(manifest.devTools ? {tools:manifest.devTools} : {}) } } : {}) })}});\n`);
+    const clientEntries = devLazyRequest?{...lazyEntries,...lazy.bridgeEntries()}:{ 'app-runtime': runtimeEntry, ...browserEntries,...lazyEntries,...(lazy?lazy.bridgeEntries():{}) };
     const browser = await bundle({ ...common, entryPoints: clientEntries, outdir: path.join(stage, 'assets'), entryNames: '[name]-[hash]', chunkNames: 'app-chunk-[hash]', platform: 'browser', format: 'esm', target: ['es2022'], splitting: true, minify: !dev, sourcemap: dev || productionBrowserSourceMaps,
-      define: { 'process.env': '{}', ...common.define, __PRNEXT_CACHE_COMPONENTS__: JSON.stringify(manifest.config.cacheComponents === true) }, plugins: [moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitAllStyles: true }), nativePackages.plugin('browser'), cssModules.plugin(true, { emitStyles: () => false })] });
+      define: { 'process.env': '{}', ...common.define, __PRNEXT_CACHE_COMPONENTS__: JSON.stringify(manifest.config.cacheComponents === true) }, plugins: [...(lazy?[lazy.plugin()]:[]),moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitAllStyles: !lazy }), nativePackages.plugin('browser'), cssModules.plugin(true, { emitStyles: () => !!lazy })] });
     fonts.record(browser.metafile);
     const entryIds = new Map(Object.entries(clientEntries).map(([id, file]) => [file, id]));
     const edgeBoundaries = new Set([...boundaries.values()].filter(boundary => boundary.edge).map(boundary => boundary.id));
     let client;
     for (const [output, metadata] of Object.entries(browser.metafile.outputs)) {
       if (!metadata.entryPoint || !output.endsWith('.js')) continue;
+      if(lazy?.record(metadata,output))continue;
       const id = entryIds.get(path.resolve(project.root, metadata.entryPoint));
       if (id === 'app-runtime') { client = publicPath + path.basename(output); continue; }
       if (!id) continue;
@@ -593,7 +612,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
           const styleEntry = path.join(stage, '.entries', id + '.mjs');
           await writeFile(styleEntry, files.map(file => `import ${JSON.stringify(file)};`).join('\n'));
           const output = await bundle({ ...common, entryPoints: { [id]: styleEntry }, outdir: path.join(stage, 'assets'), entryNames: '[name]-[hash]', platform: 'browser', format: 'esm', target: ['es2022'], minify: !dev, sourcemap: dev || productionBrowserSourceMaps,
-            plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] });
+            plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] }, { role: 'styles' });
           styleBundles.set(signature, Object.values(output.metafile.outputs).filter(output => output.cssBundle).map(output => publicPath + path.basename(output.cssBundle)));
         }
         const css = styleBundles.get(signature);
@@ -610,10 +629,12 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
       module: `server/action-${action.runtimes?.has('nodejs')?'':'edge-'}${action.id}.mjs`, export: 'invoke',
       ...(action.runtimes?.has('edge') ? {edgeModule:`server/action-edge-${action.id}.mjs`} : {}),
     }]));
-    if (emittedActions === actionRevision() && emittedBoundaries === boundaryRevision() &&
+    if ((devLazyOnly || emittedActions === actionRevision() && emittedBoundaries === boundaryRevision()) &&
         serverNativeVersion === nativePackages.version && emittedBrowserInputs === browserRevision()) break;
   }
 
+  lazy?.finish();
+
   if (htmlGraph) for (const route of routes) if (htmlOnly.has(route.id)) {
     for (const file of [...appStyleScopes(route).flat(), ...(route.metadataFiles || []).map(item=>item.file)].filter(Boolean)) htmlGraph.alias(file, await canonicalFile(file));
     htmlGraph.validate(route);

package/build/compiler.mjs

@@ -145,18 +145,19 @@ export async function validateCompilerConfig(config, root, {dev=false,edge=false
   const state={config,root,dev,buildId:'prnext-check',targets:new Map()};
   for (const target of ['node','browser',...(edge?['edge']:[])]) await targetConfig(state,target);
 }
-export async function build(options) {
+export async function build(options, { role = 'main' } = {}) {
+  if (role !== 'main' && role !== 'styles') throw new TypeError('Invalid compiler graph role');
   const state=compilation.getStore();
   const target=options.define?.['process.env.NEXT_RUNTIME']==='"edge"'?'edge':options.platform==='browser'?'browser':'node';
   return withReactCompilerGraph(target,async()=>{
-    const result=await compileGraph(options);
+    const result=await compileGraph(options,role);
     recordReactCompilerGraph(result);
     recordBuildAnalysis(state,options,result);
     recordDevDependencies(state,options,result);
     return result;
   });
 }
-async function compileGraph(options) {
+async function compileGraph(options,role) {
   const state = compilation.getStore();
   // The transform is captured by the framework's per-build callbacks. Give both
   // esbuild and the webpack bridge a new graph identity when its options change,
@@ -183,7 +184,7 @@ async function compileGraph(options) {
   // Runtime vendor bundles are framework-owned, not project webpack targets.
   const projectGraph = (options.plugins || []).some(plugin => framework.test(plugin.name));
   if (projectGraph && state?.tsconfig) options = { ...options, tsconfig: state.tsconfig };
-  const nativeCompile = input => state?.incremental && (projectGraph || !input.plugins?.length) ? incrementalBuild(input,{root:state.root,stage:state.stage,group:projectGraph?'project':'auxiliary',run:callback=>compilation.run(state,callback)}) : esbuild(input);
+  const nativeCompile = input => state?.incremental && (projectGraph || !input.plugins?.length) ? incrementalBuild(input,{root:state.root,stage:state.stage,group:projectGraph?'project':'auxiliary',role:projectGraph?role:'auxiliary',run:callback=>compilation.run(state,callback)}) : esbuild(input);
   const compile = input => state?.root && state?.stage ? cachedGraphBuild(input,state,nativeCompile) : nativeCompile(input);
   if (!(state?.config?.webpack || Object.keys(state?.config?.turbopack?.rules || {}).length) || !projectGraph) return compile(options);
   const target = options.define?.['process.env.NEXT_RUNTIME'] === '"edge"' ? 'edge' : options.platform === 'browser' ? 'browser' : 'node';

package/build/config.mjs

@@ -164,11 +164,13 @@ export function validateProjectConfig(input, filename = 'project config') {
   if (config.sassOptions !== undefined && (!config.sassOptions || typeof config.sassOptions !== 'object' || Array.isArray(config.sassOptions))) throw new Error(`${filename}: sassOptions must be an object.`);
   if (!config.experimental || typeof config.experimental !== 'object' || Array.isArray(config.experimental)) throw new Error(`${filename}: experimental must be an object.`);
   for (const key of Object.keys(config.experimental)) {
-    if (!['nextScriptWorkers', 'serverActions', 'optimizePackageImports', 'proxyClientMaxBodySize'].includes(key)) throw new Error(`${filename}: experimental.${key} is not supported by PRNext. It cannot be silently ignored.`);
+    if (!['nextScriptWorkers', 'serverActions', 'optimizePackageImports', 'proxyClientMaxBodySize', 'lazyDynamicImports'].includes(key)) throw new Error(`${filename}: experimental.${key} is not supported by PRNext. It cannot be silently ignored.`);
   }
   const nextScriptWorkers = config.experimental.nextScriptWorkers === undefined ? false : config.experimental.nextScriptWorkers;
   if (typeof nextScriptWorkers !== 'boolean') throw new Error(`${filename}: experimental.nextScriptWorkers must be a boolean.`);
-  config.experimental = { nextScriptWorkers, serverActions: validateServerActions(config.experimental.serverActions), optimizePackageImports: validateOptimizePackageImports(config.experimental.optimizePackageImports), proxyClientMaxBodySize: validateProxyBodySize(config.experimental.proxyClientMaxBodySize) };
+  const lazyDynamicImports=config.experimental.lazyDynamicImports===undefined?false:config.experimental.lazyDynamicImports;
+  if(typeof lazyDynamicImports!=='boolean')throw new Error(`${filename}: experimental.lazyDynamicImports must be a boolean.`);
+  config.experimental = { nextScriptWorkers, lazyDynamicImports, serverActions: validateServerActions(config.experimental.serverActions), optimizePackageImports: validateOptimizePackageImports(config.experimental.optimizePackageImports), proxyClientMaxBodySize: validateProxyBodySize(config.experimental.proxyClientMaxBodySize) };
   for (const key of ['basePath', 'assetPrefix']) {
     if (typeof config[key] !== 'string' || Buffer.byteLength(config[key]) > 4096) throw new Error(`${filename}: ${key} must be a string of at most 4096 bytes.`);
   }

package/build/dev-css-assets.mjs

@@ -0,0 +1,173 @@
+import { copyFile, link, lstat, mkdir, readFile, readdir, realpath, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { createHash, randomUUID } from 'node:crypto';
+import { rename } from '../runtime/fs.mjs';
+
+export const STYLE_OVERLAY_LIMITS = Object.freeze({ files: 4096, bytes: 64 * 1024 * 1024, catalogueBytes: 4 * 1024 * 1024, references: 16384 });
+const digest = data => createHash('sha256').update(data).digest('hex');
+const filename = name => typeof name === 'string' && name.length > 0 && name.length <= 255 && name !== '.' && name !== '..'
+  && !/[\\/\x00-\x1f<>:"|?*#]/.test(name) && path.basename(name) === name;
+const inside = (root, file) => { const relative = path.relative(root, file); return relative !== '' && !path.isAbsolute(relative) && relative !== '..' && !relative.startsWith('..' + path.sep); };
+
+export class StyleOverlayFallback extends Error {
+  constructor(code) { super(code); this.code = code; }
+}
+const fallback = code => { throw new StyleOverlayFallback(code); };
+
+function assetsFor(bundles) {
+  const assets = new Map();
+  let references = 0, bytes = 0;
+  for (const files of bundles.values()) for (const file of files) {
+    if (++references > STYLE_OVERLAY_LIMITS.references) fallback('style-overlay-budget');
+    if (!file || !filename(file.name) || !Number.isSafeInteger(file.bytes) || file.bytes < 0 || file.bytes > STYLE_OVERLAY_LIMITS.bytes || !/^[a-f0-9]{64}$/.test(file.sha256)) fallback('invalid-style-overlay');
+    const previous = assets.get(file.name);
+    if (previous && (previous.bytes !== file.bytes || previous.sha256 !== file.sha256)) fallback('conflicting-style-overlay');
+    if (!previous) {
+      assets.set(file.name, file);
+      bytes += file.bytes;
+      if (assets.size > STYLE_OVERLAY_LIMITS.files || bytes > STYLE_OVERLAY_LIMITS.bytes) fallback('style-overlay-budget');
+    }
+  }
+  return assets;
+}
+
+function catalogue(previous, plans) {
+  const bundles = new Map();
+  if (!previous) return bundles;
+  if (previous.version !== 1 || typeof previous.baseDirectory !== 'string' || previous.baseDirectory.length > 4096
+    || !Array.isArray(previous.bundles) || previous.bundles.length > STYLE_OVERLAY_LIMITS.files) fallback('invalid-style-overlay');
+  let references = 0;
+  for (const entry of previous.bundles) {
+    if (!Array.isArray(entry) || entry.length !== 2 || !plans.has(entry[0]) || bundles.has(entry[0]) || !Array.isArray(entry[1]) || entry[1].length > STYLE_OVERLAY_LIMITS.files) fallback('invalid-style-overlay');
+    references += entry[1].length;
+    if (references > STYLE_OVERLAY_LIMITS.references) fallback('style-overlay-budget');
+    if (!entry[1].some(file => file?.name === entry[0])) fallback('invalid-style-overlay');
+    bundles.set(entry[0], entry[1]);
+  }
+  assetsFor(bundles);
+  if (Buffer.byteLength(JSON.stringify(previous)) > STYLE_OVERLAY_LIMITS.catalogueBytes) fallback('style-overlay-budget');
+  return bundles;
+}
+
+async function inspect(file) {
+  const info = await lstat(file);
+  if (!info.isFile() || info.size > STYLE_OVERLAY_LIMITS.bytes) fallback('invalid-style-overlay');
+  const data = await readFile(file);
+  return { name: path.basename(file), bytes: data.byteLength, sha256: digest(data) };
+}
+
+/** A CSS generation owns only explicitly catalogued stylesheet assets. */
+export async function createStyleOverlay({ root, source, destination, baseSource = source, manifest, plans, selected }) {
+  const previous = manifest.devStyles.overlay;
+  if (!previous && manifest.devStyles.baseClient) fallback('missing-style-overlay');
+  if (previous && !manifest.devStyles.baseClient) fallback('invalid-style-overlay');
+  if (!Array.isArray(plans) || plans.length > STYLE_OVERLAY_LIMITS.files) fallback('style-overlay-budget');
+  const names = new Set(plans.map(([name]) => name));
+  if (names.size !== plans.length || ![...names].every(filename)) fallback('invalid-style-overlay');
+  const bundles = catalogue(previous, names), previousAssets = assetsFor(bundles);
+  const selectedNames = new Set(selected.map(([name]) => name));
+  if ([...selectedNames].some(name => !names.has(name))) fallback('invalid-style-overlay');
+  for (const route of manifest.routes || []) for (const url of route.css || []) {
+    if (url.includes('?v=') && !bundles.has(path.posix.basename(url.split('?')[0]))) fallback('missing-style-overlay');
+  }
+  const [canonicalRoot, canonicalSource, canonicalBase, parent, sourceAssets] = await Promise.all([realpath(root), realpath(source), realpath(baseSource), realpath(path.dirname(destination)), realpath(path.join(source, 'assets'))]).catch(error => {
+    if (error.code === 'ENOENT') fallback('missing-style-overlay');
+    throw error;
+  });
+  // The destination does not exist yet. Its existing parent supplies the real
+  // identity, including macOS /var aliases and Windows short-name prefixes.
+  const canonicalDestination = path.join(parent, path.basename(destination));
+  if (!inside(canonicalRoot, canonicalSource) || !inside(canonicalRoot, canonicalBase)
+    || parent !== canonicalRoot && !inside(canonicalRoot, parent) || !inside(canonicalRoot, canonicalDestination)
+    || canonicalDestination === canonicalSource || canonicalDestination === canonicalBase
+    || inside(canonicalDestination, canonicalSource) || inside(canonicalSource, canonicalDestination)
+    || inside(canonicalDestination, canonicalBase) || inside(canonicalBase, canonicalDestination)
+    || sourceAssets !== path.join(canonicalSource, 'assets')) fallback('invalid-style-overlay-directory');
+  const baseDirectory = path.relative(canonicalRoot, canonicalBase).replaceAll(path.sep, '/');
+  if (previous ? previous.baseDirectory !== baseDirectory : canonicalSource !== canonicalBase) fallback('invalid-style-overlay-base');
+  const assetsDirectory = path.join(destination, 'assets');
+  let owned = false;
+  async function inherit(file) {
+    const from = path.join(source, 'assets', file.name), target = path.join(assetsDirectory, file.name);
+    let actual;
+    try { actual = await inspect(from); } catch (error) { if (error.code === 'ENOENT') fallback('missing-style-overlay-asset'); throw error; }
+    if (actual.bytes !== file.bytes || actual.sha256 !== file.sha256) fallback('invalid-style-overlay-asset');
+    try { await link(from, target); }
+    catch (error) {
+      if (!['EXDEV', 'EPERM', 'ENOTSUP', 'EACCES'].includes(error.code)) throw error;
+      await copyFile(from, target);
+    }
+  }
+  try {
+    await mkdir(destination);
+    owned = true;
+    await mkdir(assetsDirectory);
+    for (const name of selected.map(([name]) => name)) bundles.delete(name);
+    for (const file of assetsFor(bundles).values()) await inherit(file);
+  } catch (error) {
+    if (owned) await rm(destination, { recursive: true, force: true });
+    throw error;
+  }
+
+  return {
+    async recordBundle(name, result) {
+      if (!selectedNames.has(name)) fallback('invalid-style-overlay-output');
+      const files = new Map();
+      for (const output of result.outputFiles) {
+        if (path.dirname(path.resolve(output.path)) !== path.resolve(assetsDirectory) || !filename(path.basename(output.path))) fallback('invalid-style-overlay-output');
+        const file = { name: path.basename(output.path), bytes: output.contents.byteLength, sha256: digest(output.contents) };
+        files.set(file.name, file);
+      }
+      if (!files.has(name)) fallback('invalid-style-overlay-output');
+      // CSS Module compilation emits its URL assets before the outer CSS
+      // bundle. Its absolute, external URL-token imports identify exactly the
+      // emitted images/fonts to retain, without scanning the JavaScript build.
+      const prefix = manifest.config.assetBase.replace(/\/$/, '') + '/';
+      for (const output of Object.values(result.metafile.outputs)) for (const item of output.imports || []) {
+        if (item.kind !== 'url-token' || !item.external || !item.path.startsWith(prefix)) continue;
+        let name;
+        try { name = decodeURIComponent(item.path.slice(prefix.length).split(/[?#]/)[0]); }
+        catch { fallback('invalid-style-overlay-output'); }
+        if (!filename(name) || files.has(name)) continue;
+        let file;
+        try { file = await inspect(path.join(assetsDirectory, name)); }
+        catch (error) {
+          if (error.code !== 'ENOENT') throw error;
+          const previous = previousAssets.get(name);
+          if (!previous) continue; // An unchanged base or public asset stays in its original generation.
+          await inherit(previous);
+          file = previous;
+        }
+        files.set(name, file);
+      }
+      bundles.set(name, [...files.values()]);
+      assetsFor(bundles); // Validate the aggregate budget before publishing bytes.
+      for (const output of result.outputFiles) {
+        const file = files.get(path.basename(output.path));
+        let existing;
+        try { existing = await inspect(output.path); } catch (error) { if (error.code !== 'ENOENT') throw error; }
+        if (existing) {
+          if (existing.bytes !== file.bytes || existing.sha256 !== file.sha256) fallback('conflicting-style-overlay');
+          continue;
+        }
+        const temporary = output.path + '.' + randomUUID() + '.tmp';
+        try { await writeFile(temporary, output.contents); await rename(temporary, output.path); }
+        finally { await rm(temporary, { force: true }); }
+      }
+    },
+    async finish() {
+      const assets = assetsFor(bundles);
+      const value = { version: 1, baseDirectory, bundles: [...bundles] };
+      if (Buffer.byteLength(JSON.stringify(value)) > STYLE_OVERLAY_LIMITS.catalogueBytes) fallback('style-overlay-budget');
+      // This directory was created above for CSS only. Remove module assets
+      // that no current bundle references, rather than accumulating old URLs.
+      const entries = await readdir(assetsDirectory, { withFileTypes: true });
+      if (entries.length > STYLE_OVERLAY_LIMITS.references) fallback('style-overlay-budget');
+      for (const entry of entries) {
+        if (!entry.isFile() || !filename(entry.name)) fallback('invalid-style-overlay-output');
+        if (!assets.has(entry.name)) await rm(path.join(assetsDirectory, entry.name));
+      }
+      return value;
+    },
+  };
+}

package/build/dev-css-update.mjs

@@ -1,14 +1,15 @@
 import {build as bundle} from 'esbuild';
-import {readFile,writeFile,rm,stat,readdir} from 'node:fs/promises';
+import {readFile,writeFile,rm,stat} from 'node:fs/promises';
 import path from 'node:path';
 import {randomUUID} from 'node:crypto';
 import {rename} from '../runtime/fs.mjs';
 import {createCssModules} from './css-modules.mjs';
 import {recordDevDependencies,developmentStyleDependencies} from './dev-dependencies.mjs';
 import {writeBuildOutput} from './output-contract.mjs';
+import {createStyleOverlay,StyleOverlayFallback} from './dev-css-assets.mjs';
 
 /** Publish only styles when all JS-visible class maps remain identical. */
-export async function tryDevCssUpdate({root,source,destination,manifest,changed,sequence,cssEngine,snapshot,onFallback=()=>{}}){
+export async function tryDevCssUpdate({root,source,baseSource=source,destination,manifest,changed,sequence,cssEngine,onFallback=()=>{}}){
   const fallback=code=>{onFallback(code);return undefined;};
   if(!changed.length||changed.some(file=>!file.endsWith('.css'))||!manifest.devStyles?.bundles.length||manifest.app?.globalError?.css?.length)return;
   if(!manifest.config.assetBase.startsWith('/'))return fallback('external-asset-base');
@@ -32,8 +33,9 @@ export async function tryDevCssUpdate({root,source,destination,manifest,changed,
   if(changed.some(file=>!known.has(path.join(root,file))))return fallback('unknown-style-dependency');
   if(!selected.length)return fallback('unknown-style-dependency');
   const stage=destination,modules=createCssModules({projectRoot:root,stage,assetBase:manifest.config.assetBase,cssEngine,dev:true});
+  let overlay;
   try{
-    await snapshot(source,stage);
+    overlay=await createStyleOverlay({root,source,baseSource,destination,manifest,plans,selected});
     for(const previous of manifest.devStyles.modules.filter(module=>(module.watchFiles||[module.file]).some(file=>changedPaths.has(file)))){
       if(!previous.file.endsWith('.css')){await rm(stage,{recursive:true,force:true});return fallback('stylesheet-language');}
       if((await modules.compile(previous.file)).mapping!==previous.mapping){await rm(stage,{recursive:true,force:true});return fallback('css-module-exports');}
@@ -42,7 +44,7 @@ export async function tryDevCssUpdate({root,source,destination,manifest,changed,
     for(const [name,files]of selected){
       const options={absWorkingDir:root,stdin:{contents:files.map(file=>`@import ${JSON.stringify(file.replace(/^prnext-compiled-css:/,'prnext-css:'))};`).join('\n'),resolveDir:root,loader:'css'},outfile:path.join(stage,'assets',name),bundle:true,write:false,metafile:true,logLevel:'silent',publicPath:manifest.config.assetBase,assetNames:'[name]-[hash]',loader:Object.fromEntries(['.png','.jpg','.jpeg','.svg','.gif','.webp','.avif','.woff','.woff2','.ttf'].map(ext=>[ext,'file'])),plugins:[modules.plugin(true)]};
       const result=await bundle(options);recordDevDependencies(state,options,result);
-      for(const output of result.outputFiles){const temporary=output.path+'.'+randomUUID()+'.tmp';try{await writeFile(temporary,output.contents);await rename(temporary,output.path);}finally{await rm(temporary,{force:true});}}
+      await overlay.recordBundle(name,result);
     }
     const compiled=await modules.mappings();
     if(compiled.some(value=>!manifest.devStyles.modules.some(previous=>previous.file===value.file&&previous.mapping===value.mapping))){await rm(stage,{recursive:true,force:true});return fallback('css-module-exports');}
@@ -51,7 +53,8 @@ export async function tryDevCssUpdate({root,source,destination,manifest,changed,
       for(const module of updated)if(files.includes(module.file))for(const file of module.watchFiles)if(!files.includes(file))files.push(file);
       dependencies.set(name,files);
     }
-    const buildId=randomUUID(),baseClient=manifest.devStyles.baseClient||manifest.devClient,next={...manifest,buildId,devSequence:sequence,devClient:manifest.config.assetBase+'/dev-manifest-'+buildId+'.json',outputDirectory:stage,devStyles:{baseClient,bundles:plans,dependencies:[...dependencies],modules:updated}};
+    const assets=await overlay.finish();
+    const buildId=randomUUID(),baseClient=manifest.devStyles.baseClient||manifest.devClient,next={...manifest,buildId,devSequence:sequence,devClient:manifest.config.assetBase+'/dev-manifest-'+buildId+'.json',outputDirectory:stage,devStyles:{baseClient,overlay:assets,bundles:plans,dependencies:[...dependencies],modules:updated}};
     // Keep route invalidation conservative as CSS imports are added or removed.
     // Unchanged routes retain their original dependency arrays.
     next.devDependencies=(manifest.devDependencies||[]).map(route=>{
@@ -66,7 +69,10 @@ export async function tryDevCssUpdate({root,source,destination,manifest,changed,
       }
       return {...route,files:[...files]};
     });
-    const old=JSON.parse(await readFile(path.join(source,'assets',path.basename(manifest.devClient)),'utf8'));
+    let old;
+    try{old=JSON.parse(await readFile(path.join(source,'assets',path.basename(manifest.devClient)),'utf8'));}
+    catch(error){if(error.code==='ENOENT'||error instanceof SyntaxError)throw new StyleOverlayFallback('missing-style-manifest');throw error;}
+    if(!Array.isArray(old?.pages)||old.pages.some(page=>!Array.isArray(page.css))||old.app&&(!Array.isArray(old.app.css)||!Array.isArray(old.app.routes)||old.app.routes.some(route=>!Array.isArray(route.css))))throw new StyleOverlayFallback('invalid-style-manifest');
     old.buildId=buildId;
     const changedNames=new Set(selected.map(([name])=>name));
     const revise=urls=>urls.map(url=>changedNames.has(path.posix.basename(url.split('?')[0]))?url.split('?')[0]+'?v='+buildId:url);
@@ -74,12 +80,8 @@ export async function tryDevCssUpdate({root,source,destination,manifest,changed,
     for(const page of old.pages)page.css=revise(page.css);if(old.app){old.app.css=revise(old.app.css);for(const route of old.app.routes||[]){route.css=revise(route.css);if(route.cssScopes)route.cssScopes=reviseScopes(route.cssScopes);}}
     next.routes=next.routes.map(route=>({...route,css:revise(route.css||[]),...(route.cssScopes?{cssScopes:reviseScopes(route.cssScopes)}:{})}));
     await writeFile(path.join(stage,'assets',path.basename(next.devClient)),JSON.stringify(old));
-    const protectedNames=new Set([path.basename(baseClient),path.basename(next.devClient)]),history=[];
-    for(const name of await readdir(path.join(stage,'assets')))if(/^dev-manifest-.*\.json$/.test(name)&&!protectedNames.has(name)){const info=await stat(path.join(stage,'assets',name));history.push({name,size:info.size,time:info.mtimeMs});}
-    history.sort((a,b)=>b.time-a.time);let bytes=0;
-    for(let i=0;i<history.length;i++){bytes+=history[i].size;if(i>=32||bytes>4*1024*1024)await rm(path.join(stage,'assets',history[i].name));}
     const temporary=path.join(stage,'manifest.'+buildId+'.tmp');await writeFile(temporary,JSON.stringify(next));await rename(temporary,path.join(stage,'manifest.json'));
-    await rm(path.join(stage,'build-output.json'));await writeBuildOutput(stage,next);
+    await writeBuildOutput(stage,next);
     return next;
-  }catch(error){await rm(stage,{recursive:true,force:true});throw error;}
+  }catch(error){if(overlay)await rm(stage,{recursive:true,force:true});if(error instanceof StyleOverlayFallback)return fallback(error.code);throw error;}
 }