@blotch/rsbuild-plugin-angular-lynx 22.2.1 → 22.2.3

package/dist/index.js

@@ -1,23 +1,29 @@
 /*! LICENSE: index.js.LICENSE.txt */
 import node_fs, { existsSync } from "node:fs";
-import node_path, { join, resolve } from "node:path";
-import { DiagnosticModes, createAngularCompilation } from "@angular/build/src/tools/angular/compilation";
-import { JavaScriptTransformer } from "@angular/build/src/tools/javascript-transformer";
-import { createHash } from "node:crypto";
-import { fileURLToPath } from "node:url";
-import { availableParallelism } from "node:os";
-import node_assert from "node:assert";
-import { access, constants } from "node:fs/promises";
-import { workspaces } from "@angular-devkit/core";
-import { NodeJsSyncHost } from "@angular-devkit/core/node";
+import node_path, { join, resolve as external_node_path_resolve } from "node:path";
 import { CSSPlugins, LynxEncodePlugin, LynxTemplatePlugin, WebEncodePlugin } from "@lynx-js/template-webpack-plugin";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
 import { RuntimeWrapperWebpackPlugin } from "@lynx-js/runtime-wrapper-webpack-plugin";
 import { RuntimeGlobals } from "@lynx-js/webpack-runtime-globals";
 import tiny_invariant from "tiny-invariant";
-import node_http from "node:http";
-import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";
+import { createHash } from "node:crypto";
+import { availableParallelism } from "node:os";
+import { workspaces } from "@angular-devkit/core";
+import { NodeJsSyncHost } from "@angular-devkit/core/node";
+import { access, constants } from "node:fs/promises";
 import * as __rspack_external_typescript from "typescript";
 import * as __rspack_external_node_path_c5b9b54f from "node:path";
+const ANGULAR_CLI_CONTEXT = Symbol.for('@blotch/rsbuild-plugin-angular-lynx:angular-cli-context');
+const ANGULAR_CLI_CONTEXT_PLUGIN_NAME = 'lynx:angular-cli-context';
+const pluginAngularCliContext = (context)=>({
+        name: ANGULAR_CLI_CONTEXT_PLUGIN_NAME,
+        enforce: 'pre',
+        setup: (api)=>{
+            api.expose(ANGULAR_CLI_CONTEXT, context);
+        }
+    });
+const getAngularCliContext = (api)=>api.useExposed(ANGULAR_CLI_CONTEXT);
 const TYPESCRIPT_FILE = /\.[cm]?tsx?$/;
 const readFileVersion = (file)=>node_fs.statSync(file, {
         throwIfNoEntry: false
@@ -64,17 +70,572 @@ const createAngularRebuildCoordinator = ({ compile, getFileVersion = readFileVer
                     pendingFiles.add(file);
                 }
             }
-            const run = queue.then(runCompile);
-            queue = run.catch(()=>{});
-            await run;
-            const lastSeen = environmentGenerations.get(environmentName);
-            environmentGenerations.set(environmentName, generation);
-            const outdated = new Set();
-            if (void 0 === lastSeen) return outdated;
-            for (const [file, outputGeneration] of outputGenerations)if (outputGeneration > lastSeen) outdated.add(file);
-            return outdated;
-        }
-    };
+            const run = queue.then(runCompile);
+            queue = run.catch(()=>{});
+            await run;
+            const lastSeen = environmentGenerations.get(environmentName);
+            environmentGenerations.set(environmentName, generation);
+            const outdated = new Set();
+            if (void 0 === lastSeen) return outdated;
+            for (const [file, outputGeneration] of outputGenerations)if (outputGeneration > lastSeen) outdated.add(file);
+            return outdated;
+        }
+    };
+};
+const LAYERS = {
+    BACKGROUND: 'background',
+    MAIN_THREAD: 'main'
+};
+const applyLayers = (api)=>{
+    api.modifyBundlerChain((chain)=>{
+        for (const [layer, target, isMainThread] of [
+            [
+                LAYERS.BACKGROUND,
+                'es2015',
+                false
+            ],
+            [
+                LAYERS.MAIN_THREAD,
+                'es2019',
+                true
+            ]
+        ])chain.module.rule("typescript").oneOf(layer).issuerLayer(layer).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
+            jsc: {
+                target,
+                parser: {
+                    syntax: "typescript"
+                },
+                transform: {
+                    optimizer: {
+                        simplify: false,
+                        globals: {
+                            vars: {
+                                __MAIN_THREAD__: String(isMainThread)
+                            }
+                        }
+                    }
+                }
+            }
+        }).end();
+    });
+};
+const createLynxProcessEvalResultRuntimeModule = (webpack)=>class extends webpack.RuntimeModule {
+        constructor(){
+            super('Lynx process eval result', webpack.RuntimeModule.STAGE_ATTACH);
+        }
+        generate() {
+            const chunk = this.chunk;
+            const compilation = this.compilation;
+            if (!chunk || !compilation) return '';
+            const chunkGroup = chunk._groupsIterable?.[0];
+            const modules = compilation.chunkGraph?.getChunkModules(chunk) ?? [];
+            modules.sort((a, b)=>{
+                const aIdx = chunkGroup?.getModulePreOrderIndex(a) ?? 0;
+                const bIdx = chunkGroup?.getModulePreOrderIndex(b) ?? 0;
+                return aIdx - bIdx;
+            });
+            const sortedIds = modules.map((m)=>compilation.chunkGraph.getModuleId(m)).filter((id)=>null != id);
+            const moduleOrder = JSON.stringify(sortedIds);
+            return `
+${RuntimeGlobals.lynxProcessEvalResult} = function (result, schema) {
+  var chunk = result && result(schema);
+  if (chunk && chunk.ids && chunk.modules) {
+    ${webpack.RuntimeGlobals.externalInstallChunk}(chunk);
+    var moduleOrder = ${moduleOrder};
+    for (var i = 0; i < moduleOrder.length; i++) {
+      if (chunk.modules[moduleOrder[i]]) {
+        ${webpack.RuntimeGlobals.require}(moduleOrder[i]);
+      }
+    }
+    return chunk;
+  }
+  return chunk
+}
+`;
+        }
+    };
+class AngularWebpackPlugin {
+    options;
+    constructor(options){
+        this.options = options;
+    }
+    static defaultOptions = Object.freeze({
+        disableCreateSelectorQueryIncompatibleWarning: false,
+        firstScreenSyncTiming: 'immediately',
+        enableSSR: false,
+        isWeb: false,
+        mainThreadChunks: [],
+        extractStr: false,
+        experimental_isLazyBundle: false
+    });
+    apply(compiler) {
+        const options = Object.assign({}, AngularWebpackPlugin.defaultOptions, this.options);
+        if (options.enableSSR && 'jsReady' !== options.firstScreenSyncTiming) options.firstScreenSyncTiming = 'jsReady';
+        const { DefinePlugin, EnvironmentPlugin } = compiler.webpack;
+        new EnvironmentPlugin({
+            DEBUG: null
+        }).apply(compiler);
+        new DefinePlugin({
+            __DEV__: JSON.stringify('development' === compiler.options.mode),
+            __PROFILE__: JSON.stringify('development' === compiler.options.mode),
+            __EXTRACT_STR__: JSON.stringify(Boolean(options.extractStr)),
+            __FIRST_SCREEN_SYNC_TIMING__: JSON.stringify(options.firstScreenSyncTiming),
+            __ENABLE_SSR__: JSON.stringify(options.enableSSR),
+            __WEB__: JSON.stringify(Boolean(options.isWeb)),
+            __DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__: JSON.stringify(options.disableCreateSelectorQueryIncompatibleWarning)
+        }).apply(compiler);
+        compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation)=>{
+            const onceForChunkSet = new WeakSet();
+            compilation.hooks.runtimeRequirementInTree.for(compiler.webpack.RuntimeGlobals.ensureChunkHandlers).tap('VanillaWebpackPlugin', (chunk, runtimeRequirements)=>{
+                runtimeRequirements.add(RuntimeGlobals.lynxProcessEvalResult);
+            });
+            compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.lynxProcessEvalResult).tap('VanillaWebpackPlugin', (chunk)=>{
+                if (onceForChunkSet.has(chunk)) return;
+                onceForChunkSet.add(chunk);
+                const LynxProcessEvalResultRuntimeModule = createLynxProcessEvalResultRuntimeModule(compiler.webpack);
+                compilation.addRuntimeModule(chunk, new LynxProcessEvalResultRuntimeModule());
+            });
+            compilation.hooks.processAssets.tap({
+                name: this.constructor.name,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+            }, ()=>{
+                for (const name of options.mainThreadChunks ?? [])this.#updateMainThreadInfo(compilation, name);
+                for (const cg of compilation.chunkGroups.filter((cg)=>!cg.isInitial()).filter((cg)=>cg.origins.every((origin)=>origin.module?.layer === LAYERS.MAIN_THREAD))){
+                    const files = cg.getFiles();
+                    for (const name of files.filter((name)=>name.endsWith('.js')))this.#updateMainThreadInfo(compilation, name);
+                }
+            });
+            {
+                const { ConcatSource } = compiler.webpack.sources;
+                const mainThreadChunkSet = new Set(options.mainThreadChunks ?? []);
+                compilation.hooks.processAssets.tap({
+                    name: `${this.constructor.name}:threadGlobals`,
+                    stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+                }, ()=>{
+                    this.#markMainThreadHotUpdates(compilation, mainThreadChunkSet);
+                    for (const [name] of Object.entries(compilation.assets).filter(([n])=>n.endsWith('.js') && !compilation.getAsset(n)?.info.hotModuleReplacement)){
+                        const isMainThread = mainThreadChunkSet.has(name) || compilation.getAsset(name)?.info['lynx:main-thread'] === true;
+                        const prefix = `globalThis["__MAIN_THREAD__"]=${isMainThread};`;
+                        compilation.updateAsset(name, (old)=>new ConcatSource(prefix, old));
+                    }
+                    if (!options.experimental_isLazyBundle) for (const name of options.mainThreadChunks ?? []){
+                        const asset = compilation.getAsset(name);
+                        if (!asset) continue;
+                        const source = asset.source.source().toString();
+                        const useStrictPrefix = /^(['"])use strict\1;?/.test(source) ? "'use strict';" : '';
+                        compilation.updateAsset(name, (old)=>new ConcatSource(`${useStrictPrefix}var globDynamicComponentEntry=globDynamicComponentEntry||'__Card__';`, old));
+                    }
+                });
+            }
+            const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
+            const { ConcatSource } = compiler.webpack.sources;
+            hooks.beforeEncode.tap(this.constructor.name, (args)=>{
+                const { encodeData } = args;
+                encodeData.sourceContent.config = {
+                    ...encodeData.sourceContent.config,
+                    enableCSSInlineVariables: true
+                };
+                if (!encodeData.lepusCode.root) return args;
+                if ('card' === encodeData.sourceContent.appType) return args;
+                compilation.updateAsset(encodeData.lepusCode.root.name, (old)=>new ConcatSource(`\
+(function (globDynamicComponentEntry) {
+  const module = { exports: {} }
+  const exports = module.exports
+`, old, `
+  ;return module.exports
+})`));
+                return args;
+            });
+        });
+    }
+    #markMainThreadHotUpdates(compilation, mainThreadChunkSet) {
+        for (const chunk of compilation.chunks){
+            const files = [
+                ...chunk.files
+            ];
+            if (files.some((file)=>mainThreadChunkSet.has(file) || !compilation.getAsset(file)?.info.hotModuleReplacement && compilation.getAsset(file)?.info['lynx:main-thread'])) {
+                for (const file of files)if (file.endsWith('.js') && compilation.getAsset(file)?.info.hotModuleReplacement) this.#updateMainThreadInfo(compilation, file);
+            }
+        }
+    }
+    #updateMainThreadInfo(compilation, name) {
+        const asset = compilation.getAsset(name);
+        tiny_invariant(asset, `Should have main thread asset ${name}`);
+        compilation.updateAsset(asset.name, asset.source, {
+            ...asset.info,
+            'lynx:main-thread': true
+        });
+    }
+}
+const S_LYNX_CONFIG = Symbol.for('@lynx-js/rsbuild-plugin:config');
+const PLUGIN_NAME_TEMPLATE = 'lynx:template';
+const PLUGIN_NAME_RUNTIME_WRAPPER = 'lynx:runtime-wrapper';
+const PLUGIN_NAME_ANGULAR = 'lynx:angular';
+const RULE_BACKGROUND_MODULES = 'lynx:background-modules';
+const PLUGIN_NAME_CSS_HOT_UPDATE = 'lynx:css-hot-update';
+const BLUR_VIEW_STYLESHEET = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './styles/blur-view.css');
+const HMR_BACKGROUND_CLIENT = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/hmr-background.js');
+const HMR_MAIN_THREAD_CLIENT = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/hmr-main-thread.js');
+const CSS_HOT_UPDATE = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/css-hot-update.cjs');
+const CSS_EXTRACT_HOT_UPDATE = /css-extract-webpack-plugin[\\/]runtime[\\/]hotModuleReplacement\.cjs$/;
+const resolveReloadApp = ()=>createRequire(createRequire(import.meta.url).resolve('@lynx-js/rsbuild-plugin')).resolve('@lynx-js/webpack-dev-transport/reloadApp');
+const applyEntry = (api, options, backgroundEntries, appEntries)=>{
+    const { customCSSInheritanceList, debugInfoOutside, defaultDisplayLinear, defaultOverflowVisible, enableA11y, enableAccessibilityElement, enableCSSInheritance, enableCSSInvalidation, enableCSSSelector, enableNewGesture, enableRemoveCSSScope, removeDescendantSelectorScope, targetSdkVersion } = options;
+    api.modifyBundlerChain((chain, { environment, isDev, rspack })=>{
+        const lynxConfig = api.useExposed(S_LYNX_CONFIG);
+        if (!lynxConfig) throw new Error('No Lynx config exposed. `pluginLynx` has to be applied for the Lynx build engine to be configured.');
+        const isLynx = 'lynx' === environment.name;
+        const isWeb = 'web' === environment.name;
+        const { hmr, liveReload } = environment.config.dev ?? {};
+        const enabledHMR = isDev && !isWeb && false !== hmr;
+        const enabledLiveReload = isDev && !isWeb && false !== liveReload;
+        const entries = chain.entryPoints.entries() ?? {};
+        chain.entryPoints.clear();
+        const preEntry = new Set(environment.config.source.preEntry);
+        const mainThreadChunks = [];
+        for (const [entryName, entryPoint] of Object.entries(entries)){
+            const { imports: entryImports } = getChunks(entryName, entryPoint.values());
+            const mainThreadImports = isLynx ? [
+                BLUR_VIEW_STYLESHEET,
+                ...entryImports
+            ] : entryImports;
+            const backgroundImports = [
+                ...entryImports.filter((entryImport)=>preEntry.has(entryImport)),
+                backgroundEntries.fileFor(environment.name, entryName)
+            ];
+            for (const entryImport of entryImports)if (entryImport.startsWith('.') || node_path.isAbsolute(entryImport)) appEntries.add(node_path.resolve(api.context.rootPath, entryImport));
+            const templateFilename = lynxConfig.resolveBundleFilename({
+                entryName,
+                platform: environment.name
+            });
+            const lazyBundleFilename = lynxConfig.resolveLazyBundleFilename({
+                platform: environment.name
+            });
+            const mainThreadEntry = `${entryName}__main-thread`;
+            const mainThreadName = node_path.posix.join(`${entryName}/main-thread.js`);
+            const backgroundEntry = entryName;
+            const backgroundThreadName = node_path.posix.join(`${entryName}/background-thread.js`);
+            mainThreadChunks.push(mainThreadName);
+            chain.entry(mainThreadEntry).add({
+                layer: LAYERS.MAIN_THREAD,
+                import: mainThreadImports,
+                filename: mainThreadName
+            }).when(enabledHMR, (entry)=>{
+                entry.prepend({
+                    layer: LAYERS.MAIN_THREAD,
+                    import: HMR_MAIN_THREAD_CLIENT
+                });
+            }).end();
+            chain.entry(backgroundEntry).add({
+                layer: LAYERS.BACKGROUND,
+                import: backgroundImports,
+                filename: backgroundThreadName
+            }).when(enabledHMR, (entry)=>{
+                entry.prepend({
+                    layer: LAYERS.BACKGROUND,
+                    import: HMR_BACKGROUND_CLIENT
+                });
+            }).when(enabledHMR || enabledLiveReload, (entry)=>{
+                entry.prepend({
+                    layer: LAYERS.BACKGROUND,
+                    import: '@lynx-js/webpack-dev-transport/client'
+                });
+            }).end();
+            chain.plugin(`${PLUGIN_NAME_TEMPLATE}-${entryName}`).use(LynxTemplatePlugin, [
+                {
+                    filename: templateFilename,
+                    ...lazyBundleFilename ? {
+                        lazyBundleFilename
+                    } : {},
+                    intermediate: lynxConfig.resolveIntermediateDir({
+                        entryName
+                    }),
+                    chunks: [
+                        mainThreadEntry,
+                        backgroundEntry
+                    ],
+                    cssPlugins: [
+                        CSSPlugins.parserPlugins.removeFunctionWhiteSpace()
+                    ],
+                    customCSSInheritanceList,
+                    debugInfoOutside,
+                    defaultDisplayLinear,
+                    defaultOverflowVisible,
+                    enableAccessibilityElement,
+                    enableCSSInheritance,
+                    enableCSSInvalidation,
+                    enableCSSSelector,
+                    enableNewGesture,
+                    enableRemoveCSSScope,
+                    removeDescendantSelectorScope,
+                    targetSdkVersion,
+                    enableA11y
+                }
+            ]).end();
+        }
+        chain.module.rule(RULE_BACKGROUND_MODULES).issuerLayer(LAYERS.BACKGROUND).test((file)=>backgroundEntries.isBackgroundModule(file)).sideEffects(true);
+        if (enabledHMR) {
+            chain.resolve.alias.set('@lynx-js/webpack-dev-transport/reloadApp', resolveReloadApp());
+            chain.plugin(PLUGIN_NAME_CSS_HOT_UPDATE).use(rspack.NormalModuleReplacementPlugin, [
+                CSS_EXTRACT_HOT_UPDATE,
+                CSS_HOT_UPDATE
+            ]).end();
+        }
+        if (isLynx) {
+            chain.plugin(PLUGIN_NAME_RUNTIME_WRAPPER).use(RuntimeWrapperWebpackPlugin, [
+                {
+                    injectVars (vars) {
+                        return vars.map((name)=>{
+                            if ('Component' === name) return '__Component';
+                            return name;
+                        });
+                    },
+                    targetSdkVersion,
+                    test: /^(?!.*main-thread(?:\.[A-Fa-f0-9]*)?\.js$).*\.js$/
+                }
+            ]).end();
+            chain.plugin(`${LynxEncodePlugin.name}`).use(LynxEncodePlugin, [
+                {}
+            ]).end();
+        }
+        if (isWeb) chain.plugin(`${WebEncodePlugin.name}`).use(WebEncodePlugin, []).end();
+        chain.plugin(PLUGIN_NAME_ANGULAR).after(PLUGIN_NAME_TEMPLATE).use(AngularWebpackPlugin, [
+            {
+                mainThreadChunks,
+                enableSSR: options.enableSSR,
+                isWeb
+            }
+        ]);
+    });
+};
+const getChunks = (entryName, entryValue)=>{
+    const chunks = [
+        entryName
+    ];
+    const imports = [];
+    for (const item of entryValue){
+        if ('string' == typeof item) {
+            imports.push(item);
+            continue;
+        }
+        if (Array.isArray(item)) {
+            imports.push(...imports);
+            continue;
+        }
+        const { dependOn } = item;
+        if (Array.isArray(item.import)) imports.push(...item.import);
+        else imports.push(item.import);
+        if (dependOn) if ('string' == typeof dependOn) chunks.unshift(dependOn);
+        else chunks.unshift(...dependOn);
+    }
+    return {
+        chunks,
+        imports
+    };
+};
+const BYTES_IN_KILOBYTE = 1000;
+const calculateBytes = (input, baseline, factor = 1)=>{
+    const matches = input.trim().match(/^(\d+(?:\.\d+)?)[ \t]*(%|[kmg]?b)?$/i);
+    if (!matches) return NaN;
+    const baselineBytes = baseline && calculateBytes(baseline) || 0;
+    let value = Number(matches[1]);
+    switch(matches[2]?.toLowerCase()){
+        case '%':
+            value = baselineBytes * value / 100;
+            break;
+        case 'kb':
+            value *= BYTES_IN_KILOBYTE;
+            break;
+        case 'mb':
+            value *= BYTES_IN_KILOBYTE * BYTES_IN_KILOBYTE;
+            break;
+        case 'gb':
+            value *= BYTES_IN_KILOBYTE * BYTES_IN_KILOBYTE * BYTES_IN_KILOBYTE;
+            break;
+    }
+    if (0 === baselineBytes) return value;
+    return baselineBytes + value * factor;
+};
+const calculateThresholds = (budget)=>{
+    const thresholds = [];
+    if (budget.maximumWarning) thresholds.push({
+        limit: calculateBytes(budget.maximumWarning, budget.baseline, 1),
+        type: 'maximum',
+        severity: 'warning'
+    });
+    if (budget.maximumError) thresholds.push({
+        limit: calculateBytes(budget.maximumError, budget.baseline, 1),
+        type: 'maximum',
+        severity: 'error'
+    });
+    if (budget.minimumWarning) thresholds.push({
+        limit: calculateBytes(budget.minimumWarning, budget.baseline, -1),
+        type: 'minimum',
+        severity: 'warning'
+    });
+    if (budget.minimumError) thresholds.push({
+        limit: calculateBytes(budget.minimumError, budget.baseline, -1),
+        type: 'minimum',
+        severity: 'error'
+    });
+    if (budget.warning) thresholds.push({
+        limit: calculateBytes(budget.warning, budget.baseline, -1),
+        type: 'minimum',
+        severity: 'warning'
+    }, {
+        limit: calculateBytes(budget.warning, budget.baseline, 1),
+        type: 'maximum',
+        severity: 'warning'
+    });
+    if (budget.error) thresholds.push({
+        limit: calculateBytes(budget.error, budget.baseline, -1),
+        type: 'minimum',
+        severity: 'error'
+    }, {
+        limit: calculateBytes(budget.error, budget.baseline, 1),
+        type: 'maximum',
+        severity: 'error'
+    });
+    return thresholds;
+};
+const formatSize = (size)=>{
+    if (size <= 0) return '0 bytes';
+    const abbreviations = [
+        'bytes',
+        'kB',
+        'MB',
+        'GB'
+    ];
+    const index = Math.floor(Math.log(size) / Math.log(BYTES_IN_KILOBYTE));
+    const roundedSize = size / Math.pow(BYTES_IN_KILOBYTE, index);
+    const fractionDigits = 0 === index ? 0 : 2;
+    return `${roundedSize.toFixed(fractionDigits)} ${abbreviations[index]}`;
+};
+const checkThresholds = (thresholds, size, label)=>thresholds.flatMap(({ limit, type, severity })=>{
+        if ('maximum' === type) return size <= limit ? [] : [
+            {
+                severity,
+                label,
+                message: `${label} exceeded maximum budget. Budget ${formatSize(limit)} was not met by ${formatSize(size - limit)} with a total of ${formatSize(size)}.`
+            }
+        ];
+        return size >= limit ? [] : [
+            {
+                severity,
+                label,
+                message: `${label} failed to meet minimum budget. Budget ${formatSize(limit)} was not met by ${formatSize(limit - size)} with a total of ${formatSize(size)}.`
+            }
+        ];
+    });
+const sum = (sizes)=>sizes.reduce((total, { size })=>total + size, 0);
+const calculateSizes = (budget, assets, componentStyles)=>{
+    switch(budget.type){
+        case 'initial':
+            {
+                const bundles = assets.filter((asset)=>void 0 !== asset.entryName);
+                return bundles.map((asset)=>({
+                        size: asset.size,
+                        label: 1 === bundles.length ? 'bundle initial' : `bundle initial (${asset.entryName})`
+                    }));
+            }
+        case 'bundle':
+            return budget.name ? [
+                {
+                    size: sum(assets.filter((asset)=>asset.entryName === budget.name)),
+                    label: budget.name
+                }
+            ] : [];
+        case 'all':
+            return [
+                {
+                    size: sum(assets),
+                    label: 'total'
+                }
+            ];
+        case 'allScript':
+            return [
+                {
+                    size: sum(assets),
+                    label: "total scripts"
+                }
+            ];
+        case 'any':
+        case 'anyScript':
+            return assets.map((asset)=>({
+                    size: asset.size,
+                    label: asset.name
+                }));
+        case 'anyComponentStyle':
+            return componentStyles.map((style)=>({
+                    ...style
+                }));
+        default:
+            return [];
+    }
+};
+const checkBudgets = (budgets, output)=>budgets.flatMap((budget)=>calculateSizes(budget, output.assets, output.componentStyles).flatMap(({ size, label })=>checkThresholds(calculateThresholds(budget), size, label)));
+const PLUGIN_NAME = 'lynx:angular:budgets';
+const MAIN_THREAD_ENTRY_SUFFIX = '__main-thread';
+const toBudgetError = (failure)=>{
+    const error = new Error(failure.message);
+    error.name = 'error' === failure.severity ? 'AngularBudgetError' : 'AngularBudgetWarning';
+    error.hideStack = true;
+    return error;
+};
+const bundleEntryName = (chunkGroups, entrypoints)=>chunkGroups.map((chunkGroup)=>chunkGroup.name).find((name)=>!!name && entrypoints.has(name) && !name.endsWith(MAIN_THREAD_ENTRY_SUFFIX));
+const collectBudgetAssets = (assets, entryBundles, intermediateDir)=>assets.filter(({ name, info })=>/\.(bundle|js)$/.test(name) && !info.hotModuleReplacement && !(intermediateDir && name.startsWith(`${intermediateDir}/`))).map(({ name, source })=>{
+        const entryName = entryBundles.get(name);
+        return {
+            name,
+            size: source.size(),
+            ...void 0 === entryName ? {} : {
+                entryName
+            }
+        };
+    });
+class AngularBudgetsPlugin {
+    #options;
+    constructor(options){
+        this.#options = options;
+    }
+    apply(compiler) {
+        const { budgets, componentStyleSizes, intermediateDir } = this.#options;
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation)=>{
+            const entryBundles = new Map();
+            LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation).beforeEmit.tap(PLUGIN_NAME, (args)=>{
+                const entryName = bundleEntryName(args.chunkGroups, compilation.entrypoints);
+                if (void 0 !== entryName) entryBundles.set(args.outputName, entryName);
+                return args;
+            });
+            compilation.hooks.processAssets.tap({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT + 2
+            }, ()=>{
+                const failures = checkBudgets(budgets, {
+                    assets: collectBudgetAssets(compilation.getAssets(), entryBundles, intermediateDir),
+                    componentStyles: [
+                        ...componentStyleSizes.values()
+                    ]
+                });
+                for (const failure of failures)('error' === failure.severity ? compilation.errors : compilation.warnings).push(toBudgetError(failure));
+            });
+        });
+    }
+}
+const applyBudgets = (api, { budgets, componentStyleSizes, underAngularCli })=>{
+    if (0 === budgets.length) return;
+    if (!underAngularCli && 'dev' === api.context.action) return;
+    api.modifyBundlerChain((chain, { environment })=>{
+        if ('lynx' !== environment.name) return;
+        const lynxConfig = api.useExposed(S_LYNX_CONFIG);
+        chain.plugin(PLUGIN_NAME).use(AngularBudgetsPlugin, [
+            {
+                budgets,
+                componentStyleSizes,
+                intermediateDir: lynxConfig?.resolveIntermediateDir()
+            }
+        ]);
+    });
 };
 const injectLynxSchema = (source)=>{
     if (source.includes('CUSTOM_ELEMENTS_SCHEMA') || source.includes('NO_ERRORS_SCHEMA')) return source;
@@ -115,68 +676,411 @@ const buildLynxSchemaSourceFileCache = (tsconfig, shouldInclude = ()=>true)=>{
         fileNames
     };
 };
+const componentStyleSizeKey = (containingFile, stylesheetKey)=>`${containingFile}#${stylesheetKey}`;
+const forgetComponentStyleSizes = (componentStyleSizes, containingFile)=>{
+    const prefix = componentStyleSizeKey(containingFile, '');
+    for (const key of componentStyleSizes.keys())if (key.startsWith(prefix)) componentStyleSizes.delete(key);
+};
+const createTransformStylesheet = (params)=>{
+    const { basePath, componentStyleSizes } = params;
+    return async (data, containingFile, stylesheetFile, order, className)=>{
+        const key = componentStyleSizeKey(containingFile, stylesheetFile ?? `__inline_${order}`);
+        if (componentStyleSizes && (className || !componentStyleSizes.has(key))) componentStyleSizes.set(key, {
+            label: node_path.relative(basePath, stylesheetFile ?? containingFile).replace(/\\/g, '/'),
+            size: Buffer.byteLength(data)
+        });
+        return data;
+    };
+};
 const generateComponentScopeId = (className, containingFile)=>{
     const hash = createHash('sha256').update(`${className}|${containingFile}`).digest('hex').slice(0, 10);
     return `l${hash}`;
 };
-const createTransformStylesheet = (params)=>{
-    const { basePath, scopedCssCacheDir, componentStylesCache, componentScopeIds, onStylesheetWritten } = params;
-    return async (data, containingFile, stylesheetFile, order, className)=>{
-        const resolvedClassName = className ?? 'Component';
-        const scopeId = generateComponentScopeId(resolvedClassName, containingFile);
-        let componentStyles = componentStylesCache.get(containingFile);
-        if (!componentStyles) {
-            componentStyles = {
-                imports: [],
-                inlineStyles: [],
-                scopeId,
-                processedFiles: new Map()
-            };
-            componentStylesCache.set(containingFile, componentStyles);
+const EMULATED = 0;
+const toLynxScopedCss = (css, scopeId)=>css.replaceAll('[_ngcontent-%COMP%]', `._ngcontent-${scopeId}`).replaceAll('[_nghost-%COMP%]', `._nghost-${scopeId}`).replaceAll('%COMP%', scopeId);
+const fillCssVarNamespace = (css)=>css.replaceAll('%NS%', '');
+const propertyName = (property)=>__rspack_external_typescript.isPropertyAssignment(property) && (__rspack_external_typescript.isIdentifier(property.name) || __rspack_external_typescript.isStringLiteral(property.name)) ? property.name.text : null;
+const isDefineComponentCall = (node)=>{
+    if (!__rspack_external_typescript.isCallExpression(node)) return false;
+    const callee = node.expression;
+    const name = __rspack_external_typescript.isPropertyAccessExpression(callee) ? callee.name.text : __rspack_external_typescript.isIdentifier(callee) ? callee.text : null;
+    return 'ɵɵdefineComponent' === name;
+};
+const extractComponentStyles = (code, fileName)=>{
+    if (!code.includes('ɵɵdefineComponent')) return {
+        code,
+        components: []
+    };
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, code, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.JS);
+    const components = [];
+    const removals = [];
+    const visit = (node)=>{
+        if (isDefineComponentCall(node)) {
+            const definition = node.arguments[0];
+            if (definition && __rspack_external_typescript.isObjectLiteralExpression(definition)) {
+                const properties = definition.properties;
+                const find = (name)=>properties.find((property)=>propertyName(property) === name);
+                const type = find('type')?.initializer;
+                const styles = find('styles');
+                const encapsulation = find('encapsulation')?.initializer;
+                if (type && __rspack_external_typescript.isIdentifier(type) && styles && __rspack_external_typescript.isArrayLiteralExpression(styles.initializer) && styles.initializer.elements.length > 0 && styles.initializer.elements.every(__rspack_external_typescript.isStringLiteralLike)) {
+                    const emulated = void 0 === encapsulation || __rspack_external_typescript.isNumericLiteral(encapsulation) && Number(encapsulation.text) === EMULATED;
+                    const scopeId = emulated ? generateComponentScopeId(type.text, fileName) : void 0;
+                    const stylesheets = styles.initializer.elements.map((element)=>{
+                        const css = fillCssVarNamespace(element.text);
+                        return scopeId ? toLynxScopedCss(css, scopeId) : css;
+                    });
+                    components.push({
+                        className: type.text,
+                        scopeId,
+                        stylesheets
+                    });
+                    const index = properties.indexOf(styles);
+                    const next = properties[index + 1];
+                    removals.push({
+                        start: styles.getStart(sourceFile),
+                        end: next ? next.getStart(sourceFile) : properties.hasTrailingComma ? properties.end : styles.end
+                    });
+                }
+            }
         }
-        const stylesheetKey = stylesheetFile ?? `__inline_${order}`;
-        const previousPath = componentStyles.processedFiles.get(stylesheetKey);
-        if (previousPath && !className) return '';
-        if (className || !componentScopeIds.has(containingFile)) componentScopeIds.set(containingFile, {
-            className: resolvedClassName,
-            scopeId
-        });
-        const scopedCss = data;
-        const writeIfChanged = (filePath, content)=>{
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let result = code;
+    for (const { start, end } of removals.sort((a, b)=>b.start - a.start))result = result.slice(0, start) + result.slice(end);
+    return {
+        code: result,
+        components
+    };
+};
+const writeModuleStylesheets = (params)=>{
+    const { basePath, cacheDir, fileName, components, onWritten } = params;
+    if (0 === components.length) return;
+    const prefix = node_path.relative(basePath, fileName).replace(/[/\\]/g, '__').replace(/\.[cm]?[jt]s$/, '');
+    const imports = [];
+    const scopes = [];
+    for (const { className, scopeId, stylesheets } of components){
+        stylesheets.forEach((css, index)=>{
+            const filePath = node_path.join(cacheDir, `${prefix}.${className}.${index}.css`);
+            let current;
             try {
-                if (node_fs.readFileSync(filePath, 'utf-8') === content) return;
-            } catch  {}
-            node_fs.writeFileSync(filePath, content);
-            onStylesheetWritten?.(filePath);
-        };
-        let scopedPath;
-        if (stylesheetFile) {
-            const relName = node_path.relative(basePath, stylesheetFile);
-            scopedPath = node_path.join(scopedCssCacheDir, `${relName.replace(/[/\\]/g, '__')}.__scoped_${scopeId}.css`);
-        } else {
-            const relDir = node_path.relative(basePath, node_path.dirname(containingFile));
-            scopedPath = node_path.join(scopedCssCacheDir, `${relDir.replace(/[/\\]/g, '__')}__inline_${resolvedClassName}_${order}.__scoped_${scopeId}.css`);
-        }
-        writeIfChanged(scopedPath, scopedCss);
-        if (previousPath) {
-            const idx = componentStyles.imports.indexOf(previousPath);
-            if (idx >= 0) componentStyles.imports[idx] = scopedPath;
-            else componentStyles.imports.push(scopedPath);
-            if (previousPath !== scopedPath) try {
-                node_fs.unlinkSync(previousPath);
+                current = node_fs.readFileSync(filePath, 'utf-8');
             } catch  {}
-        } else componentStyles.imports.push(scopedPath);
-        componentStyles.processedFiles.set(stylesheetKey, scopedPath);
-        return '';
+            if (current !== css) {
+                node_fs.writeFileSync(filePath, css);
+                onWritten?.(filePath);
+            }
+            imports.push(filePath);
+        });
+        if (scopeId) scopes.push({
+            className,
+            scopeId
+        });
+    }
+    return {
+        imports,
+        scopes
     };
 };
 const isLynxUnknownElementMessage = (text)=>(text?.includes('is not a known element') || text?.includes("isn't a known property of")) ?? false;
+const filterAngularDiagnostics = (diagnostics)=>({
+        errors: (diagnostics.errors ?? []).filter((message)=>!isLynxUnknownElementMessage(message.text)),
+        warnings: (diagnostics.warnings ?? []).filter((message)=>!isLynxUnknownElementMessage(message.text))
+    });
+const formatLocation = ({ file, line, column })=>{
+    if (!file) return;
+    if (void 0 === line) return file;
+    return `${file}:${line}:${(column ?? 0) + 1}`;
+};
+const formatCodeFrame = ({ line, column, length, lineText })=>{
+    if (void 0 === line || void 0 === lineText) return;
+    const gutter = `${line} | `;
+    const caretIndent = ' '.repeat(gutter.length - 2) + '| ';
+    const caret = ' '.repeat(column ?? 0) + '^'.repeat(Math.max(1, length ?? 1));
+    return `${gutter}${lineText}\n${caretIndent}${caret}`;
+};
+const toAngularDiagnosticError = (message, severity)=>{
+    const sections = [
+        message.text ?? 'Unknown Angular compiler diagnostic'
+    ];
+    const codeFrame = message.location && formatCodeFrame(message.location);
+    if (codeFrame) sections.push(codeFrame);
+    for (const note of message.notes ?? []){
+        const noteLocation = note.location && formatLocation(note.location);
+        sections.push([
+            noteLocation,
+            note.text
+        ].filter((part)=>part).join(': '));
+    }
+    const error = new Error(sections.join('\n\n'));
+    error.name = 'error' === severity ? 'AngularCompilerError' : 'AngularCompilerWarning';
+    const file = message.location && formatLocation(message.location);
+    if (file) error.file = file;
+    error.hideStack = true;
+    return error;
+};
+const PURE_CONSTRUCTORS = new Set([
+    'Map',
+    'Set',
+    'WeakMap',
+    'WeakSet'
+]);
+/**
+ * Wraps each top-level class with private or static members in a pure IIFE,
+ * so a bundler can drop the classes nothing uses.
+ *
+ * The background layer compiles to ES2015 (layers.ts), so SWC lowers private
+ * and static class fields. A class declaration keeps its own statement, but the
+ * class expressions that bundled libraries are written in (`var X = class
+ * {…}`) become a sequence that assigns each private field's `WeakMap` to an
+ * outer variable: `var X = (_a = new WeakMap(), class {…})`. The assignment
+ * counts as a side effect, so rspack keeps every such class, and every import
+ * it uses, even when nothing uses the class. The runtime's own classes are
+ * like that (it uses `#private` fields throughout), which kept Angular's
+ * renderer and change detection in the background bundle.
+ *
+ * Angular's build already wraps a class whose static members are Angular's
+ * own (`ɵcmp`, `ɵfac` and so on) in `/*#__PURE__*\/ (() => {…})()`; this does
+ * the same for the rest. Inside the IIFE, the lowering's assignments are local
+ * and the call is marked pure. A class whose static members could have side
+ * effects of their own (anything but literals, functions and new collections)
+ * is left alone.
+ *
+ * @param code - The module's code, before SWC lowers it (and, for a `.ts`
+ *   file, strips its types).
+ * @param filename - The module's path, for the parser.
+ * @returns The transformed code, or `code` itself when nothing applies.
+ */ const wrapPureClasses = (code, filename)=>{
+    if (!code.includes('class')) return code;
+    const sourceFile = __rspack_external_typescript.createSourceFile(filename, code, __rspack_external_typescript.ScriptTarget.Latest, true);
+    const edits = [];
+    const wrap = (classNode)=>{
+        edits.push({
+            start: classNode.getStart(sourceFile),
+            end: classNode.getStart(sourceFile),
+            text: '/*#__PURE__*/ (() => '
+        }, {
+            start: classNode.end,
+            end: classNode.end,
+            text: ')()'
+        });
+    };
+    for (const statement of sourceFile.statements){
+        if (__rspack_external_typescript.isVariableStatement(statement)) {
+            const [declaration, ...rest] = statement.declarationList.declarations;
+            const value = declaration?.initializer;
+            if (0 === rest.length && value && __rspack_external_typescript.isClassExpression(value) && isLoweredPureClass(value)) wrap(value);
+            continue;
+        }
+        if (__rspack_external_typescript.isClassDeclaration(statement) && statement.name && isLoweredPureClass(statement)) {
+            const modifiers = __rspack_external_typescript.getModifiers(statement) ?? [];
+            const isExport = modifiers.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.ExportKeyword);
+            const isDefault = modifiers.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.DefaultKeyword);
+            const name = statement.name.text;
+            const start = statement.getStart(sourceFile);
+            const classStart = statement.getChildren(sourceFile).find((child)=>child.kind === __rspack_external_typescript.SyntaxKind.ClassKeyword).getStart(sourceFile);
+            // `class X {}` becomes `let X = /*#__PURE__*/ (() => class X {})();`.
+            edits.push({
+                start,
+                end: classStart,
+                text: `${isExport && !isDefault ? 'export ' : ''}let ${name} = /*#__PURE__*/ (() => `
+            }, {
+                start: statement.end,
+                end: statement.end,
+                text: `)();${isDefault ? `\nexport { ${name} as default };` : ''}`
+            });
+        }
+    }
+    if (0 === edits.length) return code;
+    edits.sort((a, b)=>b.start - a.start);
+    let result = code;
+    for (const { start, end, text } of edits)result = result.slice(0, start) + text + result.slice(end);
+    return result;
+};
+const isLoweredPureClass = (node)=>{
+    if (__rspack_external_typescript.getDecorators(node)?.length) return false;
+    const heritage = node.heritageClauses?.find((clause)=>clause.token === __rspack_external_typescript.SyntaxKind.ExtendsKeyword);
+    const base = heritage?.types[0]?.expression;
+    if (base && !isPureReference(base)) return false;
+    let lowered = false;
+    for (const member of node.members){
+        if (__rspack_external_typescript.isClassStaticBlockDeclaration(member)) return false;
+        const isStatic = __rspack_external_typescript.getModifiers(member)?.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.StaticKeyword);
+        const isPrivate = member.name && __rspack_external_typescript.isPrivateIdentifier(member.name);
+        if (member.name && __rspack_external_typescript.isComputedPropertyName(member.name)) return false;
+        if (isStatic || isPrivate) lowered = true;
+        if (isStatic && __rspack_external_typescript.isPropertyDeclaration(member) && member.initializer && !isPure(member.initializer)) return false;
+    }
+    return lowered;
+};
+const isPureReference = (node)=>__rspack_external_typescript.isIdentifier(node) || __rspack_external_typescript.isPropertyAccessExpression(node) && isPureReference(node.expression);
+const isPure = (node)=>{
+    if (__rspack_external_typescript.isLiteralExpression(node) || __rspack_external_typescript.isNoSubstitutionTemplateLiteral(node) || __rspack_external_typescript.isIdentifier(node) || __rspack_external_typescript.isArrowFunction(node) || __rspack_external_typescript.isFunctionExpression(node) || node.kind === __rspack_external_typescript.SyntaxKind.TrueKeyword || node.kind === __rspack_external_typescript.SyntaxKind.FalseKeyword || node.kind === __rspack_external_typescript.SyntaxKind.NullKeyword) return true;
+    if (__rspack_external_typescript.isVoidExpression(node)) return isPure(node.expression);
+    if (__rspack_external_typescript.isParenthesizedExpression(node)) return isPure(node.expression);
+    if (__rspack_external_typescript.isPrefixUnaryExpression(node)) return isPure(node.operand);
+    if (__rspack_external_typescript.isArrayLiteralExpression(node)) return node.elements.every((element)=>!__rspack_external_typescript.isSpreadElement(element) && isPure(element));
+    if (__rspack_external_typescript.isObjectLiteralExpression(node)) return node.properties.every((property)=>__rspack_external_typescript.isPropertyAssignment(property) && !__rspack_external_typescript.isComputedPropertyName(property.name) && isPure(property.initializer));
+    return __rspack_external_typescript.isNewExpression(node) && __rspack_external_typescript.isIdentifier(node.expression) && PURE_CONSTRUCTORS.has(node.expression.text) && (node.arguments ?? []).every(isPure);
+};
 const seedCompilationSourceFiles = (compilation, sourceFileCache)=>{
     const { sourceFiles } = compilation;
     if (!(sourceFiles instanceof Map)) return false;
     for (const [fileName, sourceFile] of sourceFileCache)sourceFiles.set(fileName, sourceFile);
     return true;
 };
+const IN_PLACE_FIELDS = new Set([
+    'template',
+    'templateUrl',
+    'styles',
+    'styleUrl',
+    'styleUrls'
+]);
+const hotUpdatesEnabled = (environment)=>'web' !== environment.name && 'development' === environment.config.mode && environment.config.dev?.hmr !== false;
+const hot_updates_hash = (text)=>createHash('sha1').update(text).digest('hex').slice(0, 16);
+const isComponentDecorator = (decorator)=>{
+    const call = decorator.expression;
+    if (!__rspack_external_typescript.isCallExpression(call)) return false;
+    const callee = call.expression;
+    const name = __rspack_external_typescript.isPropertyAccessExpression(callee) ? callee.name.text : __rspack_external_typescript.isIdentifier(callee) ? callee.text : void 0;
+    return 'Component' === name;
+};
+const hotUpdateSignature = (source, fileName)=>{
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, source, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.TS);
+    const removals = [];
+    const visit = (node)=>{
+        if (__rspack_external_typescript.isDecorator(node) && isComponentDecorator(node)) {
+            const metadata = node.expression.arguments[0];
+            if (metadata && __rspack_external_typescript.isObjectLiteralExpression(metadata)) {
+                for (const property of metadata.properties)if (__rspack_external_typescript.isPropertyAssignment(property) && (__rspack_external_typescript.isIdentifier(property.name) || __rspack_external_typescript.isStringLiteral(property.name)) && IN_PLACE_FIELDS.has(property.name.text)) removals.push({
+                    start: property.initializer.getStart(sourceFile),
+                    end: property.initializer.end
+                });
+            }
+        }
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let rest = source;
+    for (const { start, end } of removals.reverse())rest = rest.slice(0, start) + rest.slice(end);
+    return hot_updates_hash(rest);
+};
+const componentClassNames = (code, fileName)=>{
+    if (!code.includes('ɵɵdefineComponent')) return [];
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, code, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.JS);
+    const topLevelClasses = new Set(sourceFile.statements.filter(__rspack_external_typescript.isClassDeclaration).flatMap((statement)=>statement.name ? [
+            statement.name.text
+        ] : []));
+    const names = [];
+    const visit = (node)=>{
+        if (__rspack_external_typescript.isCallExpression(node) && (__rspack_external_typescript.isPropertyAccessExpression(node.expression) ? node.expression.name.text : __rspack_external_typescript.isIdentifier(node.expression) ? node.expression.text : void 0) === 'ɵɵdefineComponent') {
+            const definition = node.arguments[0];
+            const type = definition && __rspack_external_typescript.isObjectLiteralExpression(definition) ? definition.properties.find((property)=>__rspack_external_typescript.isPropertyAssignment(property) && __rspack_external_typescript.isIdentifier(property.name) && 'type' === property.name.text)?.initializer : void 0;
+            if (type && __rspack_external_typescript.isIdentifier(type) && topLevelClasses.has(type.text) && !names.includes(type.text)) names.push(type.text);
+        }
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return names;
+};
+const ACCEPT = 'ɵɵangularLynxHmrAccept';
+const addHotAccept = (code, { components, signature, compiled })=>{
+    const list = `[${components.join(', ')}]`;
+    return `${code}
+import { ɵhmrAccept as ${ACCEPT} } from '@blotch/angular-lynx';
+if (import.meta.webpackHot) {
+  ${list} = ${ACCEPT}(import.meta.webpackHot, ${list}, ${JSON.stringify(signature)}, ${JSON.stringify(hot_updates_hash(compiled))});
+}
+`;
+};
+const addEntryHotAccept = (code)=>`${code}
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}
+`;
+const RUNTIME_MODULE = '@blotch/angular-lynx';
+const TAGGED_CALLS = new Set([
+    'backgroundFn',
+    'createMainThreadRef'
+]);
+const TAGGED_CLASSES = new Set([
+    'MainThreadRef'
+]);
+const transformCrossThread = (code, filename, options)=>{
+    const calls = findModuleLevelCalls(code, filename);
+    if (0 === calls.length) return code;
+    const fileKey = keyForFile(filename, options.root);
+    const edits = [];
+    calls.forEach((node, index)=>{
+        const edit = tagEdit(node, JSON.stringify(`${fileKey}:${index}`), code);
+        if (edit) edits.push(edit);
+    });
+    edits.sort((a, b)=>b.start - a.start);
+    let result = code;
+    for (const { start, end, text } of edits)result = result.slice(0, start) + text + result.slice(end);
+    return result;
+};
+const definesCrossThreadValues = (code, filename)=>findModuleLevelCalls(code, filename).length > 0;
+const findModuleLevelCalls = (code, filename)=>{
+    if (!code.includes(RUNTIME_MODULE) || !code.includes('backgroundFn') && !code.includes('MainThreadRef')) return [];
+    const sourceFile = __rspack_external_typescript.createSourceFile(filename, code, __rspack_external_typescript.ScriptTarget.Latest, true);
+    const runtime = runtimeBindings(sourceFile);
+    const calls = [];
+    const visit = (node, topLevel)=>{
+        if (topLevel && (__rspack_external_typescript.isCallExpression(node) && isRuntimeReference(node.expression, runtime, TAGGED_CALLS) || __rspack_external_typescript.isNewExpression(node) && isRuntimeReference(node.expression, runtime, TAGGED_CLASSES))) calls.push(node);
+        const childTopLevel = topLevel && !__rspack_external_typescript.isFunctionLike(node) && !__rspack_external_typescript.isClassLike(node);
+        __rspack_external_typescript.forEachChild(node, (child)=>visit(child, childTopLevel));
+    };
+    visit(sourceFile, true);
+    return calls;
+};
+const tagEdit = (node, id, code)=>{
+    const args = node.arguments ?? __rspack_external_typescript.factory.createNodeArray();
+    if (args.length > 1 || args.some(__rspack_external_typescript.isSpreadElement)) return;
+    if (1 === args.length) return {
+        start: args[0].end,
+        end: args[0].end,
+        text: `, ${id}`
+    };
+    const close = node.getEnd() - 1;
+    if (')' !== code[close]) return;
+    return {
+        start: close,
+        end: close,
+        text: `undefined, ${id}`
+    };
+};
+const runtimeBindings = (sourceFile)=>{
+    const named = new Map();
+    const namespaces = new Set();
+    for (const statement of sourceFile.statements){
+        if (!__rspack_external_typescript.isImportDeclaration(statement) || !__rspack_external_typescript.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== RUNTIME_MODULE) continue;
+        const bindings = statement.importClause?.namedBindings;
+        if (bindings) {
+            if (__rspack_external_typescript.isNamespaceImport(bindings)) {
+                namespaces.add(bindings.name.text);
+                continue;
+            }
+            for (const element of bindings.elements)named.set(element.name.text, (element.propertyName ?? element.name).text);
+        }
+    }
+    return {
+        named,
+        namespaces
+    };
+};
+const isRuntimeReference = (expression, runtime, exports)=>{
+    if (__rspack_external_typescript.isIdentifier(expression)) {
+        const imported = runtime.named.get(expression.text);
+        return void 0 !== imported && exports.has(imported);
+    }
+    return __rspack_external_typescript.isPropertyAccessExpression(expression) && __rspack_external_typescript.isIdentifier(expression.expression) && runtime.namespaces.has(expression.expression.text) && exports.has(expression.name.text);
+};
+const keyForFile = (filename, root)=>{
+    const relative = node_path.relative(root, filename).split(node_path.sep).join('/');
+    return createHash('sha1').update(relative).digest('hex').slice(0, 10);
+};
 const MAIN_THREAD_DIRECTIVE = 'main thread';
 const MAIN_THREAD_DIRECTIVE_ALT = 'main-thread';
 const transformWorklets = (code, filename)=>{
@@ -223,10 +1127,10 @@ const isAlreadyWrapped = (node)=>{
     return false;
 };
 const buildTransformedCode = (params)=>{
-    const { resourcePath, componentStyles, scopeInfo } = params;
+    const { resourcePath, stylesheets, root, hot } = params;
     let code = params.code;
-    if (componentStyles) {
-        const { imports } = componentStyles;
+    if (stylesheets) {
+        const { imports } = stylesheets;
         let importsString = '';
         for(let i = 0; i < imports.length; ++i){
             let relativeImport = node_path.relative(node_path.dirname(resourcePath), imports[i]);
@@ -235,8 +1139,19 @@ const buildTransformedCode = (params)=>{
         }
         code = importsString + code;
     }
-    if (scopeInfo) code += `\n;${scopeInfo.className}.ɵcmp.id = '${scopeInfo.scopeId}';\n`;
-    return transformWorklets(code, resourcePath);
+    for (const { className, scopeId } of stylesheets?.scopes ?? [])code += `\n;${className}.ɵcmp.id = '${scopeId}';\n`;
+    const transformed = transformCrossThread(transformWorklets(code, resourcePath), resourcePath, {
+        root
+    });
+    if (!hot) return transformed;
+    if (hot.entry) return addEntryHotAccept(transformed);
+    const components = componentClassNames(params.code, resourcePath);
+    if (0 === components.length) return transformed;
+    return addHotAccept(transformed, {
+        components,
+        signature: hotUpdateSignature(hot.source(), resourcePath),
+        compiled: params.code
+    });
 };
 const applyAngularConfig = (api, buildOptions)=>{
     const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
@@ -253,9 +1168,9 @@ const applyAngularConfig = (api, buildOptions)=>{
         ];
         else config.source.preEntry ??= [];
         config.source.preEntry.push(node_path.resolve(__dirname, './polyfills'));
-        if (buildOptions.i18n.hasDefinedSourceLocale) config.source.preEntry.push('@angular/localize/init');
-        const polyfills = buildOptions.polyfills;
-        if (polyfills) config.source.preEntry.push(...polyfills);
+        const polyfills = buildOptions.polyfills ?? [];
+        if (buildOptions.i18n.hasDefinedSourceLocale && !polyfills.some((polyfill)=>polyfill.startsWith('@angular/localize'))) config.source.preEntry.push('@angular/localize/init');
+        config.source.preEntry.push(...polyfills);
         config.source.preEntry.push(...buildOptions.styles);
         config.source.tsconfigPath = buildOptions.tsconfig;
         config.source.define ??= {};
@@ -264,12 +1179,85 @@ const applyAngularConfig = (api, buildOptions)=>{
         if (isProd) config.source.define.ngDevMode = false;
     });
 };
+const build_internals_require = createRequire(import.meta.url);
+const angularBuildRoot = node_path.dirname(build_internals_require.resolve('@angular/build/package.json'));
+const loadAngularBuildInternal = (subpath)=>build_internals_require(node_path.join(angularBuildRoot, subpath));
+const { createAngularCompilation: createAngularCompilation, DiagnosticModes: DiagnosticModes } = loadAngularBuildInternal('src/tools/angular/compilation');
+const { JavaScriptTransformer: JavaScriptTransformer } = loadAngularBuildInternal("src/tools/javascript-transformer");
+const { ComponentStylesheetBundler: ComponentStylesheetBundler } = loadAngularBuildInternal('src/tools/esbuild/angular/component-stylesheets');
 const isPresent = (variable)=>'string' == typeof variable && '' !== variable;
 const isDisabled = (variable)=>'0' === variable || 'false' === variable.toLowerCase();
 const maxWorkersVariable = process.env.NG_BUILD_MAX_WORKERS;
 const maxWorkers = isPresent(maxWorkersVariable) ? +maxWorkersVariable : Math.min(4, Math.max(availableParallelism() - 1, 1));
 const typeCheckingVariable = process.env.NG_BUILD_TYPE_CHECK;
 const useTypeChecking = !isPresent(typeCheckingVariable) || !isDisabled(typeCheckingVariable);
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */ const findUp = (names, from)=>{
+    const namesList = Array.isArray(names) ? names : [
+        names
+    ];
+    const root = __rspack_external_node_path_c5b9b54f.parse(from).root;
+    let currentDir = from;
+    while(currentDir && currentDir !== root){
+        for (const name of namesList){
+            const p = __rspack_external_node_path_c5b9b54f.join(currentDir, name);
+            if (existsSync(p)) return p;
+        }
+        currentDir = __rspack_external_node_path_c5b9b54f.dirname(currentDir);
+    }
+    return null;
+};
+const configNames = [
+    'angular.json',
+    '.angular.json'
+];
+const getAngularWorkspace = async (from = process.cwd())=>{
+    const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
+    const workspaceFile = findUp(configNames, from);
+    if (!workspaceFile) throw new Error("couldn't find workspace file");
+    const { workspace } = await workspaces.readWorkspace(workspaceFile, host);
+    return {
+        basePath: node_path.dirname(workspaceFile),
+        workspace
+    };
+};
+const findProjectByPath = (workspace, location, basePath)=>{
+    const isInside = (base, potential)=>{
+        const absoluteBase = node_path.resolve(basePath, base);
+        const absolutePotential = node_path.resolve(basePath, potential);
+        const relativePotential = node_path.relative(absoluteBase, absolutePotential);
+        if (!relativePotential.startsWith('..') && !node_path.isAbsolute(relativePotential)) return true;
+        return false;
+    };
+    const projects = Array.from(workspace.projects).map(([name, project])=>[
+            project.root,
+            name
+        ]).filter((tuple)=>isInside(tuple[0], location)).sort((a, b)=>b[0].length - a[0].length);
+    if (0 === projects.length) return null;
+    if (projects.length > 1) {
+        const found = new Set();
+        const sameRoots = projects.filter((v)=>{
+            if (!found.has(v[0])) {
+                found.add(v[0]);
+                return false;
+            }
+            return true;
+        });
+        if (sameRoots.length > 0) return null;
+    }
+    return projects[0][1];
+};
+const getProjectByCwd = (workspace, basePath)=>{
+    if (1 === workspace.projects.size) return Array.from(workspace.projects.keys())[0];
+    const project = findProjectByPath(workspace, process.cwd(), basePath);
+    if (project) return project;
+    return null;
+};
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -291,7 +1279,7 @@ const normalizeCacheOptions = (projectMetadata, workspaceRoot)=>{
             cacheEnabled = !isCI;
             break;
     }
-    const cacheBasePath = resolve(workspaceRoot, path);
+    const cacheBasePath = external_node_path_resolve(workspaceRoot, path);
     return {
         enabled: cacheEnabled,
         basePath: cacheBasePath,
@@ -338,29 +1326,37 @@ const normalizeOptimization = (optimization = true)=>{
     };
 };
 const readTarget = (project, target = 'build')=>project.targets.get(target);
-const readBuildOptions = async (project, basePath, configurationName)=>{
-    const workspaceRoot = basePath;
+const resolveIndexPath = (index, project, workspaceRoot)=>{
+    if ('boolean' == typeof index) return;
+    if ('string' == typeof index) return node_path.join(workspaceRoot, index);
+    if (index && 'object' == typeof index) return node_path.join(workspaceRoot, index.input);
+    const sourceRoot = project.sourceRoot ?? node_path.join(project.root ?? '', 'src');
+    return node_path.join(workspaceRoot, sourceRoot, 'index.html');
+};
+const resolveOutputPath = (outputPath, workspaceRoot)=>{
+    if ('string' == typeof outputPath) return node_path.join(workspaceRoot, outputPath);
+    if (outputPath && 'object' == typeof outputPath) return node_path.join(workspaceRoot, outputPath.base);
+};
+const readBuildTargetOptions = (project, configurationName)=>{
     const target = readTarget(project);
     if (!target) throw new Error("couldn't find target");
     const resolvedConfigurationName = configurationName ?? target.defaultConfiguration;
-    const buildOptions = target?.options;
-    if (!buildOptions) throw new Error(`No build options found for the "${configurationName ?? 'build'}" target in angular.json. Make sure the target has an "options" section with at least "browser", "tsConfig", and "index" defined.`);
-    const configurations = target.configurations;
-    if (configurations) {
-        for(const name in configurations)if (name === resolvedConfigurationName) {
-            Object.assign(buildOptions, {
-                ...configurations[name]
-            });
-            break;
-        }
-    }
-    node_assert(!!buildOptions, 'build options is undefined');
+    const buildOptions = target.options;
+    if (!buildOptions) throw new Error(`No build options found for the "${configurationName ?? 'build'}" target in angular.json. Make sure the target has an "options" section with at least "browser" and "tsConfig" defined.`);
+    return {
+        ...buildOptions,
+        ...resolvedConfigurationName ? target.configurations?.[resolvedConfigurationName] : void 0
+    };
+};
+const readBuildOptions = async (project, basePath, configurationName)=>normalizeBuildOptions(readBuildTargetOptions(project, configurationName), project, basePath);
+const normalizeBuildOptions = async (buildOptions, project, basePath)=>{
+    const workspaceRoot = basePath;
     const aot = buildOptions.aot ?? true;
     const tsconfig = node_path.join(workspaceRoot, buildOptions.tsConfig);
     const optimizationOptions = normalizeOptimization(buildOptions.optimization);
     const sourcemapOptions = normalizeSourceMaps(buildOptions.sourceMap ?? false);
     const browser = node_path.join(workspaceRoot, buildOptions.browser);
-    const index = node_path.join(workspaceRoot, buildOptions.index);
+    const index = resolveIndexPath(buildOptions.index, project, workspaceRoot);
     let polyfills = buildOptions.polyfills;
     polyfills = void 0 === polyfills || Array.isArray(polyfills) ? polyfills : [
         polyfills
@@ -387,7 +1383,7 @@ const readBuildOptions = async (project, basePath, configurationName)=>{
     const cacheOptions = normalizeCacheOptions(buildOptions.projectMetadata, workspaceRoot);
     const inlineStyleLanguage = buildOptions.inlineStyleLanguage;
     const styles = (buildOptions.styles ?? []).map((stylePath)=>node_path.join(workspaceRoot, stylePath));
-    const outputPath = node_path.join(workspaceRoot, buildOptions.outputPath);
+    const outputPath = resolveOutputPath(buildOptions.outputPath, workspaceRoot);
     const i18n = normalizeI18nOptions(project.extensions['i18n']);
     const i18nMissingTranslation = buildOptions.i18nMissingTranslation ?? 'warning';
     const normalizedOptions = {
@@ -408,7 +1404,8 @@ const readBuildOptions = async (project, basePath, configurationName)=>{
         outputHashing,
         styles,
         i18n,
-        i18nMissingTranslation
+        i18nMissingTranslation,
+        budgets: buildOptions.budgets ?? []
     };
     return normalizedOptions;
 };
@@ -432,73 +1429,20 @@ const normalizeI18nOptions = (raw)=>{
         hasDefinedSourceLocale
     };
 };
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */ const findUp = (names, from)=>{
-    const namesList = Array.isArray(names) ? names : [
-        names
-    ];
-    const root = __rspack_external_node_path_c5b9b54f.parse(from).root;
-    let currentDir = from;
-    while(currentDir && currentDir !== root){
-        for (const name of namesList){
-            const p = __rspack_external_node_path_c5b9b54f.join(currentDir, name);
-            if (existsSync(p)) return p;
-        }
-        currentDir = __rspack_external_node_path_c5b9b54f.dirname(currentDir);
-    }
-    return null;
-};
-const configNames = [
-    'angular.json',
-    '.angular.json'
-];
-const findWorkspaceFile = ()=>findUp(configNames, process.cwd());
-const getAngularWorkspace = async ()=>{
-    const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
-    const workspaceFile = findWorkspaceFile();
-    if (!workspaceFile) throw new Error("couldn't find workspace file");
-    const { workspace } = await workspaces.readWorkspace(workspaceFile, host);
+const resolvePrimaryBuild = async ({ workspace, basePath, pages, cli })=>{
+    let projectName;
+    if (pages) {
+        const candidates = 'all' === pages ? Array.from(workspace.projects.entries()).filter(([, project])=>'application' === project.extensions['projectType']).map(([name])=>name) : pages;
+        projectName = cli && candidates.includes(cli.project) ? cli.project : candidates[0] ?? null;
+    } else projectName = cli?.project ?? getProjectByCwd(workspace, basePath);
+    if (!projectName) throw new Error("couldn't find the project");
+    const project = workspace.projects.get(projectName);
+    if (!project) throw new Error(`Project "${projectName}" not found in workspace`);
+    const buildOptions = cli?.project === projectName ? await normalizeBuildOptions(cli.buildOptions, project, basePath) : await readBuildOptions(project, basePath);
     return {
-        basePath: node_path.dirname(workspaceFile),
-        workspace
-    };
-};
-const findProjectByPath = (workspace, location, basePath)=>{
-    const isInside = (base, potential)=>{
-        const absoluteBase = node_path.resolve(basePath, base);
-        const absolutePotential = node_path.resolve(basePath, potential);
-        const relativePotential = node_path.relative(absoluteBase, absolutePotential);
-        if (!relativePotential.startsWith('..') && !node_path.isAbsolute(relativePotential)) return true;
-        return false;
-    };
-    const projects = Array.from(workspace.projects).map(([name, project])=>[
-            project.root,
-            name
-        ]).filter((tuple)=>isInside(tuple[0], location)).sort((a, b)=>b[0].length - a[0].length);
-    if (0 === projects.length) return null;
-    if (projects.length > 1) {
-        const found = new Set();
-        const sameRoots = projects.filter((v)=>{
-            if (!found.has(v[0])) {
-                found.add(v[0]);
-                return false;
-            }
-            return true;
-        });
-        if (sameRoots.length > 0) return null;
-    }
-    return projects[0][1];
-};
-const getProjectByCwd = (workspace, basePath)=>{
-    if (1 === workspace.projects.size) return Array.from(workspace.projects.keys())[0];
-    const project = findProjectByPath(workspace, process.cwd(), basePath);
-    if (project) return project;
-    return null;
+        projectName,
+        buildOptions
+    };
 };
 const resolvePages = (workspace, basePath, pages)=>{
     const projectNames = 'all' === pages ? Array.from(workspace.projects.entries()).filter(([, def])=>'application' === def.extensions['projectType']).map(([name])=>name) : pages;
@@ -744,8 +1688,9 @@ const reportLynxDiagnostics = (diagnostics)=>{
         for (const w of cssWarnings)console.warn(`  ${w.message}`);
     }
 };
-const applyAngularRules = async (api, pluginOptions)=>{
-    const { basePath, workspace } = await getAngularWorkspace();
+const applyAngularRules = async (api, pluginOptions, backgroundEntries, appEntries)=>{
+    const cli = getAngularCliContext(api);
+    const { basePath, workspace } = await getAngularWorkspace(cli?.workspaceRoot);
     if (pluginOptions.pages) {
         const pages = resolvePages(workspace, basePath, pluginOptions.pages);
         api.modifyRsbuildConfig((config)=>{
@@ -756,12 +1701,19 @@ const applyAngularRules = async (api, pluginOptions)=>{
                 ]));
         });
     }
-    const primaryProjectName = pluginOptions.pages ? (Array.isArray(pluginOptions.pages) ? pluginOptions.pages[0] : Array.from(workspace.projects.entries()).find(([, def])=>'application' === def.extensions['projectType'])?.[0]) ?? null : getProjectByCwd(workspace, basePath);
-    if (!primaryProjectName) throw new Error("couldn't find the project");
-    const projectDefinition = workspace.projects.get(primaryProjectName);
-    if (!projectDefinition) throw new Error(`Project "${primaryProjectName}" not found in workspace`);
-    const buildOptions = await readBuildOptions(projectDefinition, basePath);
+    const { buildOptions } = await resolvePrimaryBuild({
+        workspace,
+        basePath,
+        pages: pluginOptions.pages,
+        cli
+    });
     applyAngularConfig(api, buildOptions);
+    const componentStyleSizes = new Map();
+    applyBudgets(api, {
+        budgets: buildOptions.budgets,
+        componentStyleSizes,
+        underAngularCli: void 0 !== cli
+    });
     const sourcemap = !!(!!buildOptions.sourcemapOptions.scripts && (buildOptions.sourcemapOptions.hidden ? 'external' : true));
     const thirdPartySourcemaps = buildOptions.sourcemapOptions.vendor;
     const advancedOptimizations = buildOptions.advancedOptimizations;
@@ -776,21 +1728,23 @@ const applyAngularRules = async (api, pluginOptions)=>{
     const tsconfig = buildOptions.tsconfig;
     const compilation = await createAngularCompilation(false, aot);
     const typeScriptFileCache = new Map();
-    const scopedCssCacheDir = node_path.join(basePath, 'node_modules', '.cache', 'angular-lynx-css');
-    node_fs.mkdirSync(scopedCssCacheDir, {
+    const componentCssCacheDir = node_path.join(basePath, 'node_modules', '.cache', 'angular-lynx-css');
+    node_fs.mkdirSync(componentCssCacheDir, {
         recursive: true
     });
-    const componentStylesCache = new Map();
-    const componentScopeIds = new Map();
+    const moduleStylesheets = new Map();
     let componentResourceDependencies = new Map();
     const writtenStylesheets = new Set();
     let knownSourceFiles = new Set();
+    const backgroundModules = new Set();
+    let angularInputs = new Set();
+    let angularDiagnostics = {
+        errors: [],
+        warnings: []
+    };
     const transformStylesheet = createTransformStylesheet({
         basePath,
-        scopedCssCacheDir,
-        componentStylesCache,
-        componentScopeIds,
-        onStylesheetWritten: (filePath)=>writtenStylesheets.add(filePath)
+        componentStyleSizes
     });
     const compileAngular = async (changedFiles)=>{
         const { sourceFileCache, fileNames } = buildLynxSchemaSourceFileCache(tsconfig, changedFiles && ((file)=>changedFiles.has(node_path.normalize(file)) || !knownSourceFiles.has(file)));
@@ -826,30 +1780,50 @@ const applyAngularRules = async (api, pluginOptions)=>{
         try {
             for (const { filename, contents } of (await compilation.emitAffectedFiles())){
                 const file = node_path.normalize(filename);
-                if (typeScriptFileCache.get(file) !== contents) changedOutputs.add(file);
-                typeScriptFileCache.set(file, contents);
+                const { code, components } = extractComponentStyles('string' == typeof contents ? contents : Buffer.from(contents).toString(), file);
+                const stylesheets = writeModuleStylesheets({
+                    basePath,
+                    cacheDir: componentCssCacheDir,
+                    fileName: file,
+                    components,
+                    onWritten: (filePath)=>writtenStylesheets.add(filePath)
+                });
+                if (stylesheets) moduleStylesheets.set(file, stylesheets);
+                else moduleStylesheets.delete(file);
+                if (typeScriptFileCache.get(file) !== code) {
+                    changedOutputs.add(file);
+                    if (definesCrossThreadValues(code, file)) backgroundModules.add(file);
+                    else backgroundModules.delete(file);
+                }
+                typeScriptFileCache.set(file, code);
             }
         } catch (error) {
             throw new Error(`Angular failed to emit compiled output for "${tsconfig}". Original error: ${error instanceof Error ? error.stack ?? error.message : String(error)}`);
         }
         for (const file of writtenStylesheets)changedOutputs.add(file);
-        for (const file of changedFiles ?? [])if (!node_fs.existsSync(file)) typeScriptFileCache.delete(file);
+        for (const file of changedFiles ?? [])if (!node_fs.existsSync(file)) {
+            typeScriptFileCache.delete(file);
+            backgroundModules.delete(file);
+            moduleStylesheets.delete(file);
+            forgetComponentStyleSizes(componentStyleSizes, file);
+        }
         reportLynxDiagnostics([
             ...scanCompiledOutputForHtmlElements(typeScriptFileCache),
             ...scanCompiledOutputForStructuralIssues(typeScriptFileCache),
             ...scanSourcesForUnsupportedPatterns(fileNames),
             ...scanSourcesForUnsupportedCss(fileNames)
         ]);
-        const diagnostics = await compilation.diagnoseFiles(useTypeChecking ? DiagnosticModes.All : DiagnosticModes.All & ~DiagnosticModes.Semantic);
-        const actionableErrors = diagnostics.errors?.filter((e)=>!isLynxUnknownElementMessage(e.text));
-        const actionableWarnings = diagnostics.warnings?.filter((w)=>!isLynxUnknownElementMessage(w.text));
-        if (actionableErrors?.length || actionableWarnings?.length) console.log({
-            errors: actionableErrors,
-            warnings: actionableWarnings
-        });
+        angularDiagnostics = filterAngularDiagnostics(await compilation.diagnoseFiles(useTypeChecking ? DiagnosticModes.All : DiagnosticModes.All & ~DiagnosticModes.Semantic));
+        const inputFiles = result.referencedFiles.map((file)=>node_path.normalize(file));
+        angularInputs = new Set([
+            ...inputFiles,
+            ...[
+                ...componentResourceDependencies.values()
+            ].flat()
+        ]);
         return {
             changedOutputs,
-            inputFiles: result.referencedFiles.map((file)=>node_path.normalize(file))
+            inputFiles
         };
     };
     const coordinator = createAngularRebuildCoordinator({
@@ -861,425 +1835,293 @@ const applyAngularRules = async (api, pluginOptions)=>{
             compiler
         ];
         for (const environmentCompiler of compilers)if (environmentCompiler.name) compilersByEnvironment.set(environmentCompiler.name, environmentCompiler);
+        compilers[0]?.hooks.thisCompilation.tap('lynx:angular:diagnostics', (rspackCompilation)=>{
+            rspackCompilation.errors.push(...angularDiagnostics.errors.map((message)=>toAngularDiagnosticError(message, 'error')));
+            rspackCompilation.warnings.push(...angularDiagnostics.warnings.map((message)=>toAngularDiagnosticError(message, 'warning')));
+        });
     });
     let compilationClosed = false;
     api.onBeforeEnvironmentCompile(async ({ environment, isWatch })=>{
         const compiler = compilersByEnvironment.get(environment.name);
-        const outdatedFiles = await coordinator.prepare(environment.name, [
+        const changedFiles = [
             ...compiler?.modifiedFiles ?? [],
             ...compiler?.removedFiles ?? []
-        ]);
-        if (compiler && outdatedFiles.size > 0) compiler.modifiedFiles = new Set([
+        ];
+        const outdatedFiles = await coordinator.prepare(environment.name, changedFiles);
+        const changedEntries = backgroundEntries.update(environment.name, {
+            appModules: backgroundModules,
+            watch: isWatch,
+            rebuilt: outdatedFiles.size > 0 || changedFiles.some((file)=>!angularInputs.has(node_path.normalize(file)) && !backgroundEntries.isEntryFile(file))
+        });
+        if (compiler && outdatedFiles.size + changedEntries.length > 0) compiler.modifiedFiles = new Set([
             ...compiler.modifiedFiles ?? [],
-            ...outdatedFiles
+            ...outdatedFiles,
+            ...changedEntries
         ]);
         if (!isWatch && !compilationClosed) {
             compilationClosed = true;
             await compilation.close?.();
         }
     });
-    api.transform({
-        test: /\.[cm]?[jt]sx?$/
-    }, async (context)=>{
-        const isJs = /\.[cm]?js$/.test(context.resourcePath);
-        if (isJs) {
-            const contents = await javascriptTransformer.transformData(context.resourcePath, context.code, {
-                skipLinker: false,
-                sideEffects: ()=>Promise.resolve(false)
-            });
-            return {
-                code: transformWorklets(Buffer.from(contents).toString(), context.resourcePath)
-            };
-        }
-        const content = typeScriptFileCache.get(context.resourcePath);
-        if (!content) throw new Error(`No compiled output found for ${context.resourcePath}`);
-        for (const dependency of componentResourceDependencies.get(context.resourcePath) ?? [])context.addDependency(dependency);
-        const code = 'string' == typeof content ? content : Buffer.from(content).toString();
-        return {
-            code: buildTransformedCode({
-                code,
-                resourcePath: context.resourcePath,
-                componentStyles: componentStylesCache.get(context.resourcePath),
-                scopeInfo: componentScopeIds.get(context.resourcePath)
-            })
-        };
-    });
-};
-const LAYERS = {
-    BACKGROUND: 'background',
-    MAIN_THREAD: 'main'
-};
-const applyLayers = (api)=>{
-    api.modifyBundlerChain((chain)=>{
-        chain.module.rule("typescript").oneOf(LAYERS.BACKGROUND).layer(LAYERS.BACKGROUND).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
-            jsc: {
-                target: 'es2015',
-                parser: {
-                    syntax: "typescript"
-                }
-            }
-        }).end();
-        chain.module.rule("typescript").oneOf(LAYERS.MAIN_THREAD).layer(LAYERS.MAIN_THREAD).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
-            jsc: {
-                target: 'es2019',
-                parser: {
-                    syntax: "typescript"
-                }
-            }
-        }).end();
-    });
-};
-const applyCSS = (api, options)=>{
-    const { enableRemoveCSSScope, enableCSSSelector, enableCSSInvalidation, targetSdkVersion } = options;
-    api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
-            output: {
-                injectStyles: false
-            }
-        }));
-    const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
-    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment })=>{
-        const { CssExtractRspackPlugin } = await import("@lynx-js/css-extract-webpack-plugin");
-        const removeLightningCSS = (rule)=>{
-            if (rule.uses.has(CHAIN_ID.USE.LIGHTNINGCSS) && 'lynx' === environment.name) rule.uses.delete(CHAIN_ID.USE.LIGHTNINGCSS);
-        };
-        const cssRules = [
-            CHAIN_ID.RULE.CSS,
-            CHAIN_ID.RULE.SASS,
-            CHAIN_ID.RULE.LESS,
-            CHAIN_ID.RULE.STYLUS
-        ];
-        for (const ruleName of cssRules.filter((rule)=>chain.module.rules.has(rule))){
-            const rule = chain.module.rule(ruleName);
-            const mainRuleName = ruleName === CHAIN_ID.RULE.CSS ? CHAIN_ID.ONE_OF.CSS_MAIN : ruleName;
-            const mainRule = rule.oneOf(mainRuleName);
-            const parentRuleEntries = rule.entries();
-            removeLightningCSS(mainRule);
-            mainRule.issuerLayer(LAYERS.BACKGROUND).use(CHAIN_ID.USE.MINI_CSS_EXTRACT).loader(CssExtractRspackPlugin.loader).end();
-            const uses = mainRule.uses.entries() ?? {};
-            const ruleEntries = mainRule.entries();
-            const cssLoader = uses[CHAIN_ID.USE.CSS];
-            if (!cssLoader) continue;
-            const cssLoaderRule = cssLoader.entries();
-            const mainThreadLayerRule = chain.module.rule(`${ruleName}:${LAYERS.MAIN_THREAD}`).test(parentRuleEntries.test).merge(ruleEntries).issuerLayer(LAYERS.MAIN_THREAD);
-            if (void 0 !== parentRuleEntries.dependency) mainThreadLayerRule.merge({
-                dependency: parentRuleEntries.dependency
-            });
-            mainThreadLayerRule.use(CHAIN_ID.USE.IGNORE_CSS).loader(node_path.resolve(__dirname, './loaders/ignore-css-loader')).end().uses.merge(uses).delete(CHAIN_ID.USE.MINI_CSS_EXTRACT).delete(CHAIN_ID.USE.LIGHTNINGCSS).delete(CHAIN_ID.USE.CSS).end().use(CHAIN_ID.USE.CSS).after(CHAIN_ID.USE.IGNORE_CSS).merge(cssLoaderRule).options(normalizeCssLoaderOptions(cssLoaderRule.options, true)).end();
-        }
-        for (const ruleName of cssRules.filter((rule)=>chain.module.rules.has(rule))){
-            const inlineRuleName = ruleName === CHAIN_ID.RULE.CSS ? CHAIN_ID.ONE_OF.CSS_INLINE : `${ruleName}-inline`;
-            removeLightningCSS(chain.module.rule(ruleName).oneOf(inlineRuleName));
-        }
-        if ('lynx' === environment.name && chain.module.rules.has(CHAIN_ID.RULE.FONT)) {
-            const fontRule = chain.module.rule(CHAIN_ID.RULE.FONT);
-            fontRule.oneOfs.clear();
-            fontRule.type('asset/inline');
-        }
-        chain.plugin(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT).tap(([options])=>[
-                {
-                    ...options,
-                    enableRemoveCSSScope,
-                    enableCSSSelector,
-                    enableCSSInvalidation,
-                    targetSdkVersion,
-                    cssPlugins: [
-                        CSSPlugins.parserPlugins.removeFunctionWhiteSpace()
-                    ]
-                }
-            ]).init((_, args)=>new CssExtractRspackPlugin(...args)).end().end();
-        chain.module.when(void 0 === enableRemoveCSSScope, (module)=>module.rule('lynx.css.scoped').test(/\.css$/).resourceQuery({
-                and: [
-                    /cssId/,
-                    {
-                        not: /common/
-                    }
-                ]
-            }).sideEffects(false));
-    });
-};
-const normalizeCssLoaderOptions = (options, exportOnlyLocals)=>{
-    if (options.modules && exportOnlyLocals) {
-        let { modules } = options;
-        modules = true === modules ? {
-            exportOnlyLocals: true
-        } : 'string' == typeof modules ? {
-            mode: modules,
-            exportOnlyLocals: true
-        } : {
-            ...modules,
-            exportOnlyLocals: true
-        };
-        return {
-            ...options,
-            modules
-        };
-    }
-    return options;
-};
-const createLynxProcessEvalResultRuntimeModule = (webpack)=>class extends webpack.RuntimeModule {
-        constructor(){
-            super('Lynx process eval result', webpack.RuntimeModule.STAGE_ATTACH);
-        }
-        generate() {
-            const chunk = this.chunk;
-            const compilation = this.compilation;
-            if (!chunk || !compilation) return '';
-            const chunkGroup = chunk._groupsIterable?.[0];
-            const modules = compilation.chunkGraph?.getChunkModules(chunk) ?? [];
-            modules.sort((a, b)=>{
-                const aIdx = chunkGroup?.getModulePreOrderIndex(a) ?? 0;
-                const bIdx = chunkGroup?.getModulePreOrderIndex(b) ?? 0;
-                return aIdx - bIdx;
-            });
-            const sortedIds = modules.map((m)=>compilation.chunkGraph.getModuleId(m)).filter((id)=>null != id);
-            const moduleOrder = JSON.stringify(sortedIds);
-            return `
-${RuntimeGlobals.lynxProcessEvalResult} = function (result, schema) {
-  var chunk = result && result(schema);
-  if (chunk && chunk.ids && chunk.modules) {
-    ${webpack.RuntimeGlobals.externalInstallChunk}(chunk);
-    var moduleOrder = ${moduleOrder};
-    for (var i = 0; i < moduleOrder.length; i++) {
-      if (chunk.modules[moduleOrder[i]]) {
-        ${webpack.RuntimeGlobals.require}(moduleOrder[i]);
-      }
-    }
-    return chunk;
-  }
-  return chunk
-}
-`;
-        }
-    };
-class AngularWebpackPlugin {
-    options;
-    constructor(options){
-        this.options = options;
-    }
-    static defaultOptions = Object.freeze({
-        disableCreateSelectorQueryIncompatibleWarning: false,
-        firstScreenSyncTiming: 'immediately',
-        enableSSR: false,
-        isWeb: false,
-        mainThreadChunks: [],
-        extractStr: false,
-        experimental_isLazyBundle: false
-    });
-    apply(compiler) {
-        const options = Object.assign({}, AngularWebpackPlugin.defaultOptions, this.options);
-        if (options.enableSSR && 'jsReady' !== options.firstScreenSyncTiming) options.firstScreenSyncTiming = 'jsReady';
-        const { DefinePlugin, EnvironmentPlugin } = compiler.webpack;
-        new EnvironmentPlugin({
-            DEBUG: null
-        }).apply(compiler);
-        new DefinePlugin({
-            __DEV__: JSON.stringify('development' === compiler.options.mode),
-            __PROFILE__: JSON.stringify('development' === compiler.options.mode),
-            __EXTRACT_STR__: JSON.stringify(Boolean(options.extractStr)),
-            __FIRST_SCREEN_SYNC_TIMING__: JSON.stringify(options.firstScreenSyncTiming),
-            __ENABLE_SSR__: JSON.stringify(options.enableSSR),
-            __WEB__: JSON.stringify(Boolean(options.isWeb)),
-            __DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__: JSON.stringify(options.disableCreateSelectorQueryIncompatibleWarning)
-        }).apply(compiler);
-        compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation)=>{
-            const onceForChunkSet = new WeakSet();
-            compilation.hooks.runtimeRequirementInTree.for(compiler.webpack.RuntimeGlobals.ensureChunkHandlers).tap('VanillaWebpackPlugin', (chunk, runtimeRequirements)=>{
-                runtimeRequirements.add(RuntimeGlobals.lynxProcessEvalResult);
-            });
-            compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.lynxProcessEvalResult).tap('VanillaWebpackPlugin', (chunk)=>{
-                if (onceForChunkSet.has(chunk)) return;
-                onceForChunkSet.add(chunk);
-                const LynxProcessEvalResultRuntimeModule = createLynxProcessEvalResultRuntimeModule(compiler.webpack);
-                compilation.addRuntimeModule(chunk, new LynxProcessEvalResultRuntimeModule());
-            });
-            compilation.hooks.processAssets.tap({
-                name: this.constructor.name,
-                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
-            }, ()=>{
-                for (const name of options.mainThreadChunks ?? [])this.#updateMainThreadInfo(compilation, name);
-                for (const cg of compilation.chunkGroups.filter((cg)=>!cg.isInitial()).filter((cg)=>cg.origins.every((origin)=>origin.module?.layer === LAYERS.MAIN_THREAD))){
-                    const files = cg.getFiles();
-                    for (const name of files.filter((name)=>name.endsWith('.js')))this.#updateMainThreadInfo(compilation, name);
-                }
-            });
-            {
-                const { ConcatSource } = compiler.webpack.sources;
-                const mainThreadChunkSet = new Set(options.mainThreadChunks ?? []);
-                compilation.hooks.processAssets.tap({
-                    name: `${this.constructor.name}:threadGlobals`,
-                    stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
-                }, ()=>{
-                    for (const [name] of Object.entries(compilation.assets).filter(([n])=>n.endsWith('.js'))){
-                        const isMainThread = mainThreadChunkSet.has(name);
-                        const prefix = `globalThis["__MAIN_THREAD__"]=${isMainThread};`;
-                        compilation.updateAsset(name, (old)=>new ConcatSource(prefix, old));
-                    }
-                    if (!options.experimental_isLazyBundle) for (const name of options.mainThreadChunks ?? []){
-                        const asset = compilation.getAsset(name);
-                        if (!asset) continue;
-                        const source = asset.source.source().toString();
-                        const useStrictPrefix = /^(['"])use strict\1;?/.test(source) ? "'use strict';" : '';
-                        compilation.updateAsset(name, (old)=>new ConcatSource(`${useStrictPrefix}var globDynamicComponentEntry=globDynamicComponentEntry||'__Card__';`, old));
-                    }
-                });
-            }
-            const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
-            const { ConcatSource } = compiler.webpack.sources;
-            hooks.beforeEncode.tap(this.constructor.name, (args)=>{
-                const { encodeData } = args;
-                encodeData.sourceContent.config = {
-                    ...encodeData.sourceContent.config,
-                    enableCSSInlineVariables: true
-                };
-                if (!encodeData.lepusCode.root) return args;
-                if ('card' === encodeData.sourceContent.appType) return args;
-                compilation.updateAsset(encodeData.lepusCode.root.name, (old)=>new ConcatSource(`\
-(function (globDynamicComponentEntry) {
-  const module = { exports: {} }
-  const exports = module.exports
-`, old, `
-  ;return module.exports
-})`));
-                return args;
+    const transformModule = async (context, background)=>{
+        const hot = hotUpdatesEnabled(context.environment);
+        const isJs = /\.[cm]?js$/.test(context.resourcePath);
+        if (isJs) {
+            const contents = await javascriptTransformer.transformData(context.resourcePath, context.code, {
+                skipLinker: false,
+                sideEffects: ()=>Promise.resolve(false)
+            });
+            const code = transformCrossThread(transformWorklets(Buffer.from(contents).toString(), context.resourcePath), context.resourcePath, {
+                root: api.context.rootPath
             });
+            if (!background) return {
+                code
+            };
+            const wrapped = wrapPureClasses(code, context.resourcePath);
+            return {
+                code: hot && backgroundEntries.isEntryFile(context.resourcePath) ? addEntryHotAccept(wrapped) : wrapped
+            };
+        }
+        const content = typeScriptFileCache.get(context.resourcePath);
+        if (!content) throw new Error(`No compiled output found for ${context.resourcePath}`);
+        for (const dependency of componentResourceDependencies.get(context.resourcePath) ?? [])context.addDependency(dependency);
+        const code = buildTransformedCode({
+            code: 'string' == typeof content ? content : Buffer.from(content).toString(),
+            resourcePath: context.resourcePath,
+            stylesheets: moduleStylesheets.get(context.resourcePath),
+            root: api.context.rootPath,
+            hot: hot && !background ? {
+                entry: appEntries.has(node_path.normalize(context.resourcePath)),
+                source: ()=>node_fs.readFileSync(context.resourcePath, 'utf-8')
+            } : void 0
         });
+        if (!background) return {
+            code
+        };
+        return {
+            code: wrapPureClasses(Buffer.from(await javascriptTransformer.transformData(context.resourcePath, code, {
+                skipLinker: true,
+                sideEffects: ()=>Promise.resolve(false)
+            })).toString(), context.resourcePath)
+        };
+    };
+    api.transform({
+        test: /\.[cm]?[jt]sx?$/,
+        issuerLayer: LAYERS.MAIN_THREAD
+    }, (context)=>transformModule(context, false));
+    api.transform({
+        test: /\.[cm]?[jt]sx?$/,
+        issuerLayer: LAYERS.BACKGROUND
+    }, (context)=>transformModule(context, true));
+};
+const background_entry_RUNTIME_MODULE = '@blotch/angular-lynx';
+const createBackgroundEntries = ({ rootPath, findLibraryModules = findLibraryBackgroundModules })=>{
+    const cacheDir = node_path.join(rootPath, 'node_modules', '.cache', 'angular-lynx', 'background-entries');
+    const files = new Map();
+    let libraryModules;
+    const getLibraryModules = ()=>libraryModules ??= findLibraryModules(rootPath);
+    let modules = new Set();
+    const rebuilds = new Map();
+    return {
+        fileFor: (environmentName, entryName)=>{
+            const file = node_path.join(cacheDir, environmentName, `${entryName}.js`);
+            let environmentFiles = files.get(environmentName);
+            if (!environmentFiles) {
+                environmentFiles = new Set();
+                files.set(environmentName, environmentFiles);
+            }
+            environmentFiles.add(file);
+            if (!node_fs.existsSync(file)) writeIfChanged(file, renderBackgroundEntry({
+                modules: []
+            }));
+            return file;
+        },
+        isBackgroundModule: (file)=>modules.has(file),
+        isEntryFile: (file)=>[
+                ...files.values()
+            ].some((environmentFiles)=>environmentFiles.has(file)),
+        update: (environmentName, { appModules, watch, rebuilt })=>{
+            modules = new Set([
+                ...getLibraryModules(),
+                ...[
+                    ...appModules
+                ].sort()
+            ]);
+            const rebuild = (rebuilds.get(environmentName) ?? 0) + (watch && rebuilt ? 1 : 0);
+            rebuilds.set(environmentName, rebuild);
+            const contents = renderBackgroundEntry({
+                modules: [
+                    ...modules
+                ],
+                rebuild: watch ? rebuild : void 0
+            });
+            return [
+                ...files.get(environmentName) ?? []
+            ].filter((file)=>writeIfChanged(file, contents));
+        }
+    };
+};
+const renderBackgroundEntry = ({ modules, rebuild })=>{
+    const lines = [
+        "// The background thread's entry, generated by",
+        '// @blotch/rsbuild-plugin-angular-lynx (see background-entry.ts there).',
+        '// Angular runs on the main thread only, so the background thread loads the',
+        '// runtime and the modules that call backgroundFn(), createMainThreadRef()',
+        '// or new MainThreadRef() at module level.',
+        `import { ɵstartBackgroundThread } from '${background_entry_RUNTIME_MODULE}';`,
+        ...modules.map((file)=>`import ${JSON.stringify(file)};`),
+        'ɵstartBackgroundThread();'
+    ];
+    if (void 0 !== rebuild) lines.push(`// Rebuild ${rebuild}`);
+    return `${lines.join('\n')}\n`;
+};
+const writeIfChanged = (file, contents)=>{
+    if (node_fs.existsSync(file) && node_fs.readFileSync(file, 'utf8') === contents) return false;
+    node_fs.mkdirSync(node_path.dirname(file), {
+        recursive: true
+    });
+    node_fs.writeFileSync(file, contents);
+    return true;
+};
+const JS_FILE = /\.[cm]?js$/;
+const findLibraryBackgroundModules = (rootPath)=>{
+    const found = new Set();
+    const visited = new Set();
+    const visit = (packageDir, isApp)=>{
+        const manifest = readManifest(packageDir);
+        if (!manifest) return;
+        const names = new Set([
+            ...Object.keys(manifest.dependencies ?? {}),
+            ...Object.keys(manifest.optionalDependencies ?? {}),
+            ...Object.keys(manifest.peerDependencies ?? {}),
+            ...isApp ? Object.keys(manifest.devDependencies ?? {}) : []
+        ]);
+        names.delete(background_entry_RUNTIME_MODULE);
+        for (const name of names){
+            const dependencyDir = resolvePackageDir(name, packageDir);
+            if (!dependencyDir || visited.has(dependencyDir)) continue;
+            visited.add(dependencyDir);
+            const dependency = readManifest(dependencyDir);
+            if (dependency && dependsOnRuntime(dependency)) {
+                for (const file of listJsFiles(dependencyDir))if (definesCrossThreadValues(node_fs.readFileSync(file, 'utf8'), file)) found.add(file);
+            }
+            visit(dependencyDir, false);
+        }
+    };
+    visit(rootPath, true);
+    return [
+        ...found
+    ].sort();
+};
+const readManifest = (packageDir)=>{
+    try {
+        return JSON.parse(node_fs.readFileSync(node_path.join(packageDir, 'package.json'), 'utf8'));
+    } catch  {
+        return;
     }
-    #updateMainThreadInfo(compilation, name) {
-        const asset = compilation.getAsset(name);
-        tiny_invariant(asset, `Should have main thread asset ${name}`);
-        compilation.updateAsset(asset.name, asset.source, {
-            ...asset.info,
-            'lynx:main-thread': true
-        });
+};
+const dependsOnRuntime = (manifest)=>[
+        manifest.dependencies,
+        manifest.optionalDependencies,
+        manifest.peerDependencies
+    ].some((dependencies)=>dependencies?.[background_entry_RUNTIME_MODULE] !== void 0);
+const resolvePackageDir = (name, fromDir)=>{
+    for(let dir = fromDir;; dir = node_path.dirname(dir)){
+        const candidate = node_path.join(dir, 'node_modules', name);
+        if (node_fs.existsSync(node_path.join(candidate, 'package.json'))) return node_fs.realpathSync(candidate);
+        if (node_path.dirname(dir) === dir) return;
     }
-}
-const S_LYNX_CONFIG = Symbol.for('@lynx-js/rsbuild-plugin:config');
-const PLUGIN_NAME_TEMPLATE = 'lynx:template';
-const PLUGIN_NAME_RUNTIME_WRAPPER = 'lynx:runtime-wrapper';
-const PLUGIN_NAME_ANGULAR = 'lynx:angular';
-const applyEntry = (api, options)=>{
-    const { customCSSInheritanceList, debugInfoOutside, defaultDisplayLinear, enableAccessibilityElement, enableCSSInheritance, enableCSSInvalidation, enableCSSSelector, enableNewGesture, enableRemoveCSSScope, removeDescendantSelectorScope, targetSdkVersion } = options;
-    api.modifyBundlerChain((chain, { environment, isDev })=>{
-        const lynxConfig = api.useExposed(S_LYNX_CONFIG);
-        if (!lynxConfig) throw new Error('No Lynx config exposed. `pluginLynx` has to be applied for the Lynx build engine to be configured.');
-        const isLynx = 'lynx' === environment.name;
-        const isWeb = 'web' === environment.name;
-        const { hmr, liveReload } = environment.config.dev ?? {};
-        const enabledHMR = isDev && !isWeb && false !== hmr;
-        const enabledLiveReload = isDev && !isWeb && false !== liveReload;
-        const entries = chain.entryPoints.entries() ?? {};
-        chain.entryPoints.clear();
-        const mainThreadChunks = [];
-        for (const [entryName, entryPoint] of Object.entries(entries)){
-            const { imports } = getChunks(entryName, entryPoint.values());
-            const templateFilename = lynxConfig.resolveBundleFilename({
-                entryName,
-                platform: environment.name
+};
+const listJsFiles = (packageDir)=>node_fs.readdirSync(packageDir, {
+        recursive: true,
+        encoding: 'utf8'
+    }).filter((file)=>JS_FILE.test(file) && !file.split(node_path.sep).includes('node_modules')).map((file)=>node_path.join(packageDir, file));
+const applyCSS = (api, options)=>{
+    const { enableRemoveCSSScope, enableCSSSelector, enableCSSInvalidation, targetSdkVersion } = options;
+    api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
+            output: {
+                injectStyles: false
+            }
+        }));
+    const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
+    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment })=>{
+        const { CssExtractRspackPlugin } = await import("@lynx-js/css-extract-webpack-plugin");
+        const removeLightningCSS = (rule)=>{
+            if (rule.uses.has(CHAIN_ID.USE.LIGHTNINGCSS) && 'lynx' === environment.name) rule.uses.delete(CHAIN_ID.USE.LIGHTNINGCSS);
+        };
+        const cssRules = [
+            CHAIN_ID.RULE.CSS,
+            CHAIN_ID.RULE.SASS,
+            CHAIN_ID.RULE.LESS,
+            CHAIN_ID.RULE.STYLUS
+        ];
+        for (const ruleName of cssRules.filter((rule)=>chain.module.rules.has(rule))){
+            const rule = chain.module.rule(ruleName);
+            const mainRuleName = ruleName === CHAIN_ID.RULE.CSS ? CHAIN_ID.ONE_OF.CSS_MAIN : ruleName;
+            const mainRule = rule.oneOf(mainRuleName);
+            const parentRuleEntries = rule.entries();
+            removeLightningCSS(mainRule);
+            mainRule.issuerLayer(LAYERS.MAIN_THREAD).use(CHAIN_ID.USE.MINI_CSS_EXTRACT).loader(CssExtractRspackPlugin.loader).end();
+            const uses = mainRule.uses.entries() ?? {};
+            const ruleEntries = mainRule.entries();
+            const cssLoader = uses[CHAIN_ID.USE.CSS];
+            if (!cssLoader) continue;
+            const cssLoaderRule = cssLoader.entries();
+            const backgroundLayerRule = chain.module.rule(`${ruleName}:${LAYERS.BACKGROUND}`).test(parentRuleEntries.test).merge(ruleEntries).issuerLayer(LAYERS.BACKGROUND);
+            if (void 0 !== parentRuleEntries.dependency) backgroundLayerRule.merge({
+                dependency: parentRuleEntries.dependency
             });
-            const mainThreadEntry = `${entryName}__main-thread`;
-            const mainThreadName = node_path.posix.join(`${entryName}/main-thread.js`);
-            const backgroundEntry = entryName;
-            const backgroundThreadName = node_path.posix.join(`${entryName}/background-thread.js`);
-            mainThreadChunks.push(mainThreadName);
-            chain.entry(mainThreadEntry).add({
-                layer: LAYERS.MAIN_THREAD,
-                import: imports,
-                filename: mainThreadName
-            }).end();
-            chain.entry(backgroundEntry).add({
-                layer: LAYERS.BACKGROUND,
-                import: imports,
-                filename: backgroundThreadName
-            }).when(enabledHMR, (entry)=>{
-                entry.prepend({
-                    layer: LAYERS.BACKGROUND,
-                    import: '@rspack/core/hot/dev-server'
-                });
-            }).when(enabledHMR || enabledLiveReload, (entry)=>{
-                entry.prepend({
-                    layer: LAYERS.BACKGROUND,
-                    import: '@lynx-js/webpack-dev-transport/client'
-                });
-            }).end();
-            chain.plugin(`${PLUGIN_NAME_TEMPLATE}-${entryName}`).use(LynxTemplatePlugin, [
-                {
-                    filename: templateFilename,
-                    intermediate: lynxConfig.resolveIntermediateDir({
-                        entryName
-                    }),
-                    chunks: [
-                        mainThreadEntry,
-                        backgroundEntry
-                    ],
-                    cssPlugins: [
-                        CSSPlugins.parserPlugins.removeFunctionWhiteSpace()
-                    ],
-                    customCSSInheritanceList,
-                    debugInfoOutside,
-                    defaultDisplayLinear,
-                    enableAccessibilityElement,
-                    enableCSSInheritance,
-                    enableCSSInvalidation,
-                    enableCSSSelector,
-                    enableNewGesture,
-                    enableRemoveCSSScope,
-                    removeDescendantSelectorScope,
-                    targetSdkVersion,
-                    enableA11y: true
-                }
-            ]).end();
+            backgroundLayerRule.use(CHAIN_ID.USE.IGNORE_CSS).loader(node_path.resolve(__dirname, './loaders/ignore-css-loader')).end().uses.merge(uses).delete(CHAIN_ID.USE.MINI_CSS_EXTRACT).delete(CHAIN_ID.USE.LIGHTNINGCSS).delete(CHAIN_ID.USE.CSS).end().use(CHAIN_ID.USE.CSS).after(CHAIN_ID.USE.IGNORE_CSS).merge(cssLoaderRule).options(normalizeCssLoaderOptions(cssLoaderRule.options, true)).end();
         }
-        if (isLynx) {
-            chain.plugin(PLUGIN_NAME_RUNTIME_WRAPPER).use(RuntimeWrapperWebpackPlugin, [
+        for (const ruleName of cssRules.filter((rule)=>chain.module.rules.has(rule))){
+            const inlineRuleName = ruleName === CHAIN_ID.RULE.CSS ? CHAIN_ID.ONE_OF.CSS_INLINE : `${ruleName}-inline`;
+            removeLightningCSS(chain.module.rule(ruleName).oneOf(inlineRuleName));
+        }
+        if (chain.module.rules.has(CHAIN_ID.RULE.FONT)) {
+            const fontRule = chain.module.rule(CHAIN_ID.RULE.FONT);
+            fontRule.oneOfs.clear();
+            fontRule.type('asset/inline');
+        }
+        chain.plugin(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT).tap(([options])=>[
                 {
-                    injectVars (vars) {
-                        return vars.map((name)=>{
-                            if ('Component' === name) return '__Component';
-                            return name;
-                        });
-                    },
+                    ...options,
+                    enableRemoveCSSScope,
+                    enableCSSSelector,
+                    enableCSSInvalidation,
                     targetSdkVersion,
-                    test: /^(?!.*main-thread(?:\.[A-Fa-f0-9]*)?\.js$).*\.js$/
+                    cssPlugins: [
+                        CSSPlugins.parserPlugins.removeFunctionWhiteSpace()
+                    ]
                 }
-            ]).end();
-            chain.plugin(`${LynxEncodePlugin.name}`).use(LynxEncodePlugin, [
-                {}
-            ]).end();
-        }
-        if (isWeb) chain.plugin(`${WebEncodePlugin.name}`).use(WebEncodePlugin, []).end();
-        chain.plugin(PLUGIN_NAME_ANGULAR).after(PLUGIN_NAME_TEMPLATE).use(AngularWebpackPlugin, [
-            {
-                mainThreadChunks,
-                enableSSR: options.enableSSR,
-                isWeb
-            }
-        ]);
+            ]).init((_, args)=>new CssExtractRspackPlugin(...args)).end().end();
+        chain.module.when(void 0 === enableRemoveCSSScope, (module)=>module.rule('lynx.css.scoped').test(/\.css$/).resourceQuery({
+                and: [
+                    /cssId/,
+                    {
+                        not: /common/
+                    }
+                ]
+            }).sideEffects(false));
     });
 };
-const getChunks = (entryName, entryValue)=>{
-    const chunks = [
-        entryName
-    ];
-    const imports = [];
-    for (const item of entryValue){
-        if ('string' == typeof item) {
-            imports.push(item);
-            continue;
-        }
-        if (Array.isArray(item)) {
-            imports.push(...imports);
-            continue;
-        }
-        const { dependOn } = item;
-        if (Array.isArray(item.import)) imports.push(...item.import);
-        else imports.push(item.import);
-        if (dependOn) if ('string' == typeof dependOn) chunks.unshift(dependOn);
-        else chunks.unshift(...dependOn);
+const normalizeCssLoaderOptions = (options, exportOnlyLocals)=>{
+    if (options.modules && exportOnlyLocals) {
+        let { modules } = options;
+        modules = true === modules ? {
+            exportOnlyLocals: true
+        } : 'string' == typeof modules ? {
+            mode: modules,
+            exportOnlyLocals: true
+        } : {
+            ...modules,
+            exportOnlyLocals: true
+        };
+        return {
+            ...options,
+            modules
+        };
     }
-    return {
-        chunks,
-        imports
-    };
+    return options;
 };
 const applyGenerator = (api)=>{
     api.modifyBundlerChain({
@@ -1291,6 +2133,21 @@ const applyGenerator = (api)=>{
         }
     });
 };
+const applyResolve = (api)=>{
+    api.modifyRspackConfig((config)=>{
+        const resolve = config.resolve ??= {};
+        const conditions = (resolve.conditionNames ?? []).filter((condition)=>'require' !== condition);
+        if (!conditions.includes('module')) conditions.splice(conditions.indexOf('import') + 1, 0, 'module');
+        resolve.byDependency = {
+            ...resolve.byDependency,
+            esm: {
+                ...resolve.byDependency?.['esm'],
+                conditionNames: conditions
+            }
+        };
+    });
+};
+const DEV_LOGS_PATH = '/__dev_logs';
 const RESET = '\x1b[0m';
 const GRAY = '\x1b[90m';
 const RED = '\x1b[31m';
@@ -1325,7 +2182,9 @@ const formatArg = (arg)=>{
     if ('string' == typeof arg) return arg;
     if ('object' == typeof arg && 'Error' === arg.__type) {
         const err = arg;
-        return err.stack || `${err.name}: ${err.message}`;
+        const header = err.message ? `${err.name}: ${err.message}` : err.name;
+        if (!err.stack) return header;
+        return err.stack.startsWith(header) ? err.stack : `${header}\n${err.stack}`;
     }
     try {
         return JSON.stringify(arg, null, 2);
@@ -1333,28 +2192,19 @@ const formatArg = (arg)=>{
         return String(arg);
     }
 };
-let logFile = null;
-let logFilePath = '';
-const getLogFilePath = ()=>logFilePath;
-const ensureLogFile = ()=>{
-    if (!logFile) {
-        logFilePath = node_path.resolve(process.cwd(), '.dev-logs');
-        logFile = node_fs.createWriteStream(logFilePath, {
-            flags: 'w'
-        });
-    }
-    return logFile;
-};
-const writeLog = (entry)=>{
-    const stream = ensureLogFile();
+const writeLog = (stream, entry)=>{
     const color = LEVEL_COLORS[entry.level] || WHITE;
     const label = LEVEL_LABELS[entry.level] || entry.level.toUpperCase();
     const time = formatTimestamp(entry.timestamp);
     const args = entry.args.map(formatArg).join(' ');
     stream.write(`${GRAY}${time}${RESET} ${color}${label}${RESET} ${args}\n`);
 };
-const createDevLoggerMiddleware = ()=>(req, res, next)=>{
-        if ('OPTIONS' === req.method && '/__dev_logs' === req.url) {
+const createDevLoggerMiddleware = (logFilePath)=>{
+    const logFile = node_fs.createWriteStream(logFilePath, {
+        flags: 'w'
+    });
+    return (req, res, next)=>{
+        if ('OPTIONS' === req.method && req.url === DEV_LOGS_PATH) {
             res.writeHead(204, {
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Allow-Methods': 'POST, OPTIONS',
@@ -1363,7 +2213,7 @@ const createDevLoggerMiddleware = ()=>(req, res, next)=>{
             res.end();
             return;
         }
-        if ('POST' !== req.method || '/__dev_logs' !== req.url) return void next();
+        if ('POST' !== req.method || req.url !== DEV_LOGS_PATH) return void next();
         let body = '';
         req.on('data', (chunk)=>{
             body += chunk.toString();
@@ -1375,22 +2225,21 @@ const createDevLoggerMiddleware = ()=>(req, res, next)=>{
             res.end();
             try {
                 const { logs } = JSON.parse(body);
-                for (const entry of logs)writeLog(entry);
+                for (const entry of logs)writeLog(logFile, entry);
             } catch  {}
         });
     };
-const LOG_PORT_OFFSET = 1;
+};
+const FALLBACK_ORIGIN = 'http://localhost:3000';
 const applyDevLogger = (api)=>{
     api.modifyRspackConfig((rspackConfig)=>{
         if ('development' !== rspackConfig.mode) return rspackConfig;
         const publicPath = rspackConfig.output?.publicPath;
-        let logUrl = '';
+        let origin = FALLBACK_ORIGIN;
         if ('string' == typeof publicPath && publicPath.startsWith('http')) try {
-            const parsed = new URL(publicPath);
-            const logPort = Number(parsed.port || 80) + LOG_PORT_OFFSET;
-            logUrl = `${parsed.protocol}//${parsed.hostname}:${logPort}/__dev_logs`;
+            origin = new URL(publicPath).origin;
         } catch  {}
-        if (!logUrl) logUrl = `http://localhost:${3000 + LOG_PORT_OFFSET}/__dev_logs`;
+        const logUrl = `${origin}${DEV_LOGS_PATH}`;
         rspackConfig.plugins = rspackConfig.plugins || [];
         rspackConfig.plugins.push({
             name: 'lynx:angular:dev-logger-define',
@@ -1403,22 +2252,12 @@ const applyDevLogger = (api)=>{
         });
         return rspackConfig;
     });
-    api.onAfterStartDevServer(({ port })=>{
-        const logPort = port + LOG_PORT_OFFSET;
-        const middleware = createDevLoggerMiddleware();
-        const server = node_http.createServer((req, res)=>{
-            middleware(req, res, ()=>{
-                res.writeHead(404);
-                res.end();
-            });
-        });
-        server.listen(logPort, '0.0.0.0', ()=>{
-            console.log(`[dev-logger] Log server on :${logPort} → tail -f ${getLogFilePath()}`);
-        });
-        server.on('error', (err)=>{
-            if ('EADDRINUSE' === err.code) server.listen(logPort + 1, '0.0.0.0');
-            else console.warn('[dev-logger] Failed to start log server:', err.message);
-        });
+    const logFilePath = node_path.resolve(process.cwd(), '.dev-logs');
+    api.onBeforeStartDevServer(({ server })=>{
+        server.middlewares.use(createDevLoggerMiddleware(logFilePath));
+    });
+    api.onAfterStartDevServer(()=>{
+        console.log(`[dev-logger] LynxLogger output: tail -f ${logFilePath}`);
     });
 };
 const applySplitChunksRule = (api, options)=>{
@@ -1432,8 +2271,7 @@ const applySplitChunksRule = (api, options)=>{
         });
         return config;
     });
-    api.modifyRspackConfig((rspackConfig, { environment })=>{
-        if ('lynx' !== environment.name) return rspackConfig;
+    api.modifyRspackConfig((rspackConfig)=>{
         rspackConfig.output = rspackConfig.output ?? {};
         if (!options.experimental_isLazyBundle) rspackConfig.output.asyncChunks = false;
         if (!rspackConfig.optimization) return rspackConfig;
@@ -1455,16 +2293,28 @@ const TAILWIND_CONFIG_FILES = [
     'tailwind.config.mjs',
     'tailwind.config.cjs'
 ];
+const isTailwind = (plugin)=>'function' == typeof plugin ? 'tailwindcss' === plugin.name : plugin?.postcssPlugin === 'tailwindcss';
 const applyTailwind = (api)=>{
     const configFile = findUp(TAILWIND_CONFIG_FILES, process.cwd());
     if (!configFile) return;
-    pluginTailwindCSS({
-        config: configFile,
-        exclude: [
-            /[\\/]node_modules[\\/]/
-        ]
-    }).setup(api);
+    api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
+            tools: {
+                postcss: ({ postcssOptions }, { addPlugins })=>{
+                    if ('object' == typeof postcssOptions && postcssOptions.plugins?.some(isTailwind)) return;
+                    const tailwindcss = createRequire(configFile)('tailwindcss');
+                    addPlugins(tailwindcss({
+                        config: configFile
+                    }));
+                }
+            }
+        }));
 };
+const DEPRECATED_OPTIONS = [
+    'enableICU',
+    'enableParallelElement',
+    'pipelineSchedulerConfig'
+];
+const deprecatedOptionsIn = (options)=>DEPRECATED_OPTIONS.filter((name)=>options?.[name] !== void 0);
 const normalizeOptions = (options)=>{
     const defaultOptions = {
         customCSSInheritanceList: void 0,
@@ -1474,37 +2324,43 @@ const normalizeOptions = (options)=>{
         enableCSSInheritance: false,
         enableCSSInvalidation: false,
         enableCSSSelector: true,
-        enableICU: false,
         enableNewGesture: true,
-        enableParallelElement: true,
         defaultDisplayLinear: true,
         enableRemoveCSSScope: false,
         enableSSR: false,
         pages: void 0,
-        pipelineSchedulerConfig: 0x00010000,
         targetSdkVersion: '3.2',
         defaultOverflowVisible: true,
         removeDescendantSelectorScope: false,
         experimental_isLazyBundle: false
     };
-    return Object.assign(defaultOptions, options);
+    const normalized = Object.assign(defaultOptions, options);
+    for (const name of DEPRECATED_OPTIONS)delete normalized[name];
+    return normalized;
 };
 const pluginAngularLynx = (options)=>({
         name: 'lynx:angular',
         pre: [
-            'lynx:rsbuild:plugin-api'
+            'lynx:rsbuild:plugin-api',
+            ANGULAR_CLI_CONTEXT_PLUGIN_NAME
         ],
         setup: async (api)=>{
+            for (const name of deprecatedOptionsIn(options))api.logger.warn(`pluginAngularLynx(): the \`${name}\` option has no effect and will be removed in a future release. Remove it from your config.`);
             const normalizedOptions = normalizeOptions(options);
+            const backgroundEntries = createBackgroundEntries({
+                rootPath: api.context.rootPath
+            });
             applyCSS(api, normalizedOptions);
             applyTailwind(api);
-            applyEntry(api, normalizedOptions);
+            const appEntries = new Set();
+            applyEntry(api, normalizedOptions, backgroundEntries, appEntries);
             applyLayers(api);
-            const angularRules = applyAngularRules(api, normalizedOptions);
+            applyResolve(api);
+            const angularRules = applyAngularRules(api, normalizedOptions, backgroundEntries, appEntries);
             applyGenerator(api);
             applySplitChunksRule(api, normalizedOptions);
             applyDevLogger(api);
             await angularRules;
         }
     });
-export { pluginAngularLynx };
+export { pluginAngularCliContext, pluginAngularLynx };