diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml
index cdc7a9025584..5a42d15998d3 100644
--- a/.github/workflows/visual-tests-demos.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -1212,6 +1212,16 @@ jobs:
       working-directory: apps/demos
       run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz
 
+    # All three frameworks now bundle production-style via csp-bundle.js
+    # (esbuild + per-framework AOT plugin where applicable). Angular uses
+    # @angular/build/private's createCompilerPlugin under the hood — see
+    # apps/demos/utils/server/csp-bundle-angular.js. Pages load orders of
+    # magnitude faster than the old SystemJS dev path and the CSP profile
+    # matches production (no inline scripts, no 'unsafe-eval').
+    - name: Bundle demos for CSP check
+      working-directory: apps/demos
+      run: node utils/server/csp-bundle.js --framework=${{ matrix.FRAMEWORK }}
+
     - name: Start CSP Server
       run: node apps/demos/utils/server/csp-server.js 8080 &
 
@@ -1219,6 +1229,7 @@ jobs:
       working-directory: apps/demos
       env:
         CSP_FRAMEWORKS: ${{ matrix.FRAMEWORK }}
+        CSP_USE_BUNDLED: '1'
         CHROME_PATH: google-chrome-stable
       run: node utils/server/csp-check.js
 
diff --git a/apps/demos/.gitignore b/apps/demos/.gitignore
index 82d6e6478557..dcb7efcf5094 100644
--- a/apps/demos/.gitignore
+++ b/apps/demos/.gitignore
@@ -34,6 +34,13 @@ Demos/**/tsconfig.json
 publish-demos
 
 csp-reports
+csp-bundled-demos
+
+# Scratch artifacts produced by utils/server/csp-bundle-angular.js. The script
+# cleans these up after a successful run, but a SIGKILL / power loss may leave
+# them behind — ignoring keeps them out of `git status`.
+utils/server/.csp-bundle-angular-*
+Demos/**/.csp-bundle-angular-patched.*.ts
 
 .angular
 angular.json
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html
index 51222cb55272..1ab1fb54a1df 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html
@@ -6,7 +6,6 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html
index 51222cb55272..1ab1fb54a1df 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html
@@ -6,7 +6,6 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
diff --git a/apps/demos/package.json b/apps/demos/package.json
index 47579b7e76db..f540ca2faa4d 100644
--- a/apps/demos/package.json
+++ b/apps/demos/package.json
@@ -20,7 +20,7 @@
         "@angular/cli": "~21.1.5",
         "@angular/common": "~21.1.0",
         "@angular/compiler": "~21.2.0",
-        "@angular/compiler-cli": "~21.1.0",
+        "@angular/compiler-cli": "~21.2.0",
         "@angular/core": "~21.2.4",
         "@angular/forms": "~21.1.0",
         "@angular/platform-browser": "~21.1.0",
diff --git a/apps/demos/utils/server/csp-bundle-angular.js b/apps/demos/utils/server/csp-bundle-angular.js
new file mode 100644
index 000000000000..6eb0cc041d02
--- /dev/null
+++ b/apps/demos/utils/server/csp-bundle-angular.js
@@ -0,0 +1,916 @@
+/* eslint-disable global-require, import/no-dynamic-require */
+
+// Bundles every Angular demo into csp-bundled-demos/<Widget>/<Demo>/Angular/.
+//
+// Why this is a separate script from csp-bundle.js:
+//   * React/Vue bundling is a single esbuild call per demo with at most one
+//     framework plugin (`esbuild-plugin-vue3`). Angular needs AOT compilation,
+//     so we wire up `@angular/build/private`'s `createCompilerPlugin` plus a
+//     couple of project-specific shims (devextreme path redirect, asset
+//     symlinks for off-by-one component-CSS url() refs).
+//   * Keeping the Angular machinery here lets csp-bundle.js stay small and
+//     framework-neutral; csp-bundle.js delegates to this file when invoked
+//     with --framework=Angular.
+//
+// Run directly:
+//   node apps/demos/utils/server/csp-bundle-angular.js
+// or via the unified entry:
+//   node apps/demos/utils/server/csp-bundle.js --framework=Angular
+
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+const esbuild = require('esbuild');
+
+const DEMOS_APP_ROOT = path.resolve(__dirname, '..', '..');
+const REPO_ROOT = path.resolve(DEMOS_APP_ROOT, '..', '..');
+const SRC_DEMOS_DIR = path.join(DEMOS_APP_ROOT, 'Demos');
+const OUT_ROOT = path.join(DEMOS_APP_ROOT, 'csp-bundled-demos');
+const NODE_MODULES = path.join(DEMOS_APP_ROOT, 'node_modules');
+const FRAMEWORK = 'Angular';
+
+const CONCURRENCY = (() => {
+  const fromEnv = parseInt(process.env.CSP_BUNDLE_CONCURRENCY, 10);
+  if (fromEnv > 0) return fromEnv;
+  return Math.max(8, (os.cpus() || []).length - 1);
+})();
+
+const BATCH_SIZE = (() => {
+  const fromEnv = parseInt(process.env.CSP_BUNDLE_BATCH_SIZE, 10);
+  if (fromEnv > 0) return fromEnv;
+  return 16;
+})();
+
+const BATCH_CONCURRENCY = (() => {
+  const fromEnv = parseInt(process.env.CSP_BUNDLE_BATCH_CONCURRENCY, 10);
+  if (fromEnv > 0) return fromEnv;
+  return 1;
+})();
+
+// Same env knobs as csp-bundle.js — optional substring filter for local
+// smoke tests, e.g. CSP_BUNDLE_FILTER=Common/FormsOverview.
+const FILTER = (process.env.CSP_BUNDLE_FILTER || '').trim();
+
+const SHARED_TSCONFIG_TEMPLATE = path.join(__dirname, 'tsconfig.csp-bundle-angular.json');
+const GENERATED_TSCONFIG_DIR = path.join(__dirname, '.csp-bundle-angular-tsconfigs');
+
+// Demos with real bugs in their templates / component code that Angular AOT's
+// template type-checker catches but JIT (SystemJS dev path) silently accepts.
+// We can't silence template type errors via `@ts-nocheck` (the .ngtypecheck.ts
+// virtual file is a separate compilation unit). These should be fixed at the
+// demo-source level; until then they're skipped so the bundle pipeline can
+// finish cleanly and the rest of the demos make it into the CSP check.
+const KNOWN_BROKEN_DEMOS = new Set([
+  // Property access errors in .html bindings (wrong field name / typos):
+  'ActionSheet/PopoverMode', // TS2339 Property 'id' does not exist on type 'Contact'
+  'Chat/MessageEditing', // TS2551 'alloUpdatingLabel' (typo) → 'allowUpdating'
+  'DataGrid/CustomizeKeyboardNavigation', // TS2551 'editOnkeyPress' (typo) → 'editOnKeyPress'
+  'Scheduler/DragAndDrop', // TS2339 Property 'id' does not exist on type 'Task'
+  'TreeList/CustomizeKeyboardNavigation', // same 'editOnkeyPress' typo as DataGrid
+  // (click) / (event) bindings passing more args than the handler accepts:
+  'Charts/AreaSelectionZooming', // TS2554 Expected 0 arguments, but got 1
+  'FileUploader/ChunkUpload', // TS2554
+  'LoadIndicator/Overview', // TS2554
+  'SpeechToText/Overview', // TS2554
+  'Stepper/FormIntegration', // TS2554
+  'TreeList/MultipleRowSelection', // TS2554
+  // Iterating an Object as if it were iterable:
+  'Form/Grouping', // TS2488 Type 'Object' has no [Symbol.iterator]
+  'Form/ItemCustomization', // TS2488
+  // Template references a non-existent component property:
+  'Localization/UsingIntl', // TS2339 Property 'auto' (plus JSON-related, see below)
+  'Localization/UsingGlobalize', // TS2339 Property 'auto'
+]);
+
+// @angular/build is transitive via @angular-devkit/build-angular (present in
+// apps/demos/package.json). Resolve through it to play nicely with pnpm.
+function resolveAngularBuildPrivate() {
+  const buildAngularPkg = require.resolve('@angular-devkit/build-angular/package.json', {
+    paths: [DEMOS_APP_ROOT],
+  });
+  const buildAngularDir = path.dirname(buildAngularPkg);
+  return require(require.resolve('@angular/build/private', { paths: [buildAngularDir] }));
+}
+
+// ngc refuses tsconfigs with empty `files` and empty `include` (TS18002). Per
+// demo we write a sibling tsconfig that extends the shared template and lists
+// the demo entry in `files`. Sanitized slug in the filename keeps concurrent
+// workers from stomping on each other.
+function writeTsconfig(name, entryPaths) {
+  fs.mkdirSync(GENERATED_TSCONFIG_DIR, { recursive: true });
+  const slug = name.replace(/[\\/]/g, '__').replace(/[^a-zA-Z0-9_.-]/g, '_');
+  const dest = path.join(GENERATED_TSCONFIG_DIR, `${slug}.tsconfig.json`);
+  // Path resolution in `extends` is relative to the file the field is in, so
+  // we point at the template via a relative ../-walk.
+  const extendsRel = path
+    .relative(path.dirname(dest), SHARED_TSCONFIG_TEMPLATE)
+    .split(path.sep)
+    .join('/');
+  const config = {
+    extends: extendsRel,
+    files: entryPaths.map((entryPath) => path.relative(path.dirname(dest), entryPath).split(path.sep).join('/')),
+  };
+  fs.writeFileSync(dest, `${JSON.stringify(config, null, 2)}\n`);
+  return dest;
+}
+
+function writeDemoTsconfig(entryPath) {
+  return writeTsconfig(path.relative(REPO_ROOT, entryPath), [entryPath]);
+}
+
+// Bundled demos load all scripts/styles externally — no inline blocks, no
+// SystemJS — so csp-server.js (cspMiddleware) keeps them on the strict
+// production CSP without a nonce. Component CSS still gets injected as
+// <style> at runtime by Angular, though; if that breaks under strict CSP
+// we'll need to add an Angular bundled-nonce path in csp-server.js to stamp
+// `ngCspNonce` on <demo-app> the same way the SystemJS dev path does.
+function buildHtml({ jsFiles, cssFiles }) {
+  const cssLinks = [
+    '<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />',
+    ...cssFiles.map((f) => `<link rel="stylesheet" type="text/css" href="./${f}" />`),
+  ].join('\n    ');
+  const scripts = jsFiles
+    .map((f) => `<script src="./${f}" type="module"></script>`)
+    .join('\n    ');
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    ${cssLinks}
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <demo-app>Loading...</demo-app>
+    </div>
+    ${scripts}
+  </body>
+</html>
+`;
+}
+
+// Angular demos use `app/app.component.ts` as both component declaration AND
+// bootstrap entry (the file ends with a `bootstrapApplication(...)` call).
+function findAngularEntry(srcDir) {
+  const candidate = path.join(srcDir, 'app', 'app.component.ts');
+  if (fs.existsSync(candidate)) return candidate;
+  // Fallback: some demos may use main.ts. Keep this open for future cases.
+  for (const name of ['main.ts', 'index.ts']) {
+    const p = path.join(srcDir, name);
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+function findDemos() {
+  const out = [];
+  const skipped = [];
+  if (!fs.existsSync(SRC_DEMOS_DIR)) return { out, skipped };
+
+  const widgets = fs.readdirSync(SRC_DEMOS_DIR, { withFileTypes: true }).filter((w) => w.isDirectory());
+  for (const widget of widgets) {
+    const widgetDir = path.join(SRC_DEMOS_DIR, widget.name);
+    const demos = fs.readdirSync(widgetDir, { withFileTypes: true }).filter((d) => d.isDirectory());
+    for (const demo of demos) {
+      const key = `${widget.name}/${demo.name}`;
+      const fwDir = path.join(widgetDir, demo.name, FRAMEWORK);
+      const matchesFilter = !FILTER || key.includes(FILTER);
+      if (matchesFilter && fs.existsSync(path.join(fwDir, 'index.html'))) {
+        const entry = findAngularEntry(fwDir);
+        if (entry) {
+          if (KNOWN_BROKEN_DEMOS.has(key)) {
+            skipped.push({ widget: widget.name, name: demo.name });
+          } else {
+            out.push({ widget: widget.name, name: demo.name, srcDir: fwDir, entry });
+          }
+        }
+      }
+    }
+  }
+  return { out, skipped };
+}
+
+// ---- CSS asset shim infrastructure ----
+//
+// Demo CSS files reference assets like `../../../../images/petersmith.png`.
+// Those paths assume the CSS is consumed inline (injected into the page via a
+// runtime <style> element), so the browser resolves them relative to the
+// document URL — which for an Angular demo is `Angular/index.html`, four
+// levels above `apps/demos/`. Under AOT bundling Angular's CSS resource
+// plugin resolves url() relative to the CSS file location, and Angular demos
+// keep their component CSS one directory deeper (`Angular/app/app.component.css`),
+// so the same `../../../../` falls one level short and the asset is "missing".
+//
+// `fileReplacements` only swaps .ts/.js files in @angular/build — not .css
+// resources — so patching the CSS content doesn't help. Instead, for each
+// url() that the Angular CSS plugin would expect to find at the "wrong"
+// location, we create a symlink at that location pointing to the real asset.
+// Shims are computed once globally so concurrent demo builds share them and
+// teardown happens once at the end.
+const ASSET_EXT_RE = /\.(png|jpe?g|gif|svg|webp|ico|avif)(\?[^)'"\s]*)?$/i;
+const URL_RE = /url\(\s*(['"]?)([^)'"]+?)\1\s*\)/g;
+
+function rescueAssetPath(cssFile, urlSpec) {
+  if (path.isAbsolute(urlSpec) || /^[a-z]+:/i.test(urlSpec)) return null;
+  const direct = path.resolve(path.dirname(cssFile), urlSpec);
+  if (fs.existsSync(direct)) return direct;
+  const tail = urlSpec.replace(/^(\.\.[\\/])+/, '');
+  let dir = path.dirname(cssFile);
+  while (dir !== path.dirname(dir)) {
+    const candidate = path.join(dir, tail);
+    if (fs.existsSync(candidate)) return candidate;
+    dir = path.dirname(dir);
+  }
+  return null;
+}
+
+const STYLE_URLS_RE = /styleUrls\s*:\s*\[([^\]]*)\]/g;
+const STYLE_URL_ITEM_RE = /['"`]([^'"`]+)['"`]/g;
+function discoverComponentStyleFiles(tsFiles) {
+  const result = new Set();
+  for (const tsFile of tsFiles) {
+    if (fs.existsSync(tsFile)) {
+      const src = fs.readFileSync(tsFile, 'utf8');
+      for (const m of src.matchAll(STYLE_URLS_RE)) {
+        for (const item of m[1].matchAll(STYLE_URL_ITEM_RE)) {
+          // SystemJS-era demos write paths like `.${modulePrefix}/app.component.css`.
+          // `modulePrefix` is only non-empty under SystemJS runtime; under AOT
+          // the partial evaluator treats `window` as undefined and the path
+          // collapses to `./app.component.css`. We mirror that here by dropping
+          // the `${...}` placeholder (and only the placeholder — keep the slash).
+          const cleaned = item[1].includes('${') ? item[1].replace(/\$\{[^}]+\}/g, '') : item[1];
+          result.add(path.resolve(path.dirname(tsFile), cleaned));
+        }
+      }
+    }
+  }
+  return Array.from(result);
+}
+
+// Build a global list of (wrongPath -> realPath) shims across all demos.
+// Deduplicated by wrongPath, so two demos pointing at the same broken-ish
+// asset only produce one symlink.
+function computeGlobalShims(allCssFiles) {
+  const seen = new Map(); // wrongPath -> { rescued }
+  for (const cssFile of allCssFiles) {
+    if (fs.existsSync(cssFile)) {
+      const src = fs.readFileSync(cssFile, 'utf8');
+      for (const m of src.matchAll(URL_RE)) {
+        const spec = m[2];
+        if (ASSET_EXT_RE.test(spec)) {
+          const wrongPath = path.resolve(path.dirname(cssFile), spec);
+          if (!fs.existsSync(wrongPath) && !seen.has(wrongPath)) {
+            const rescued = rescueAssetPath(cssFile, spec);
+            if (rescued) {
+              seen.set(wrongPath, { rescued });
+            }
+          }
+        }
+      }
+    }
+  }
+  return Array.from(seen.entries()).map(([wrongPath, v]) => ({ wrongPath, rescued: v.rescued }));
+}
+
+function installShims(shims) {
+  const installed = [];
+  for (const { wrongPath, rescued } of shims) {
+    const createdDirs = [];
+    let dir = path.dirname(wrongPath);
+    const toCreate = [];
+    while (!fs.existsSync(dir)) {
+      toCreate.push(dir);
+      dir = path.dirname(dir);
+    }
+    for (const d of toCreate.reverse()) {
+      fs.mkdirSync(d);
+      createdDirs.push(d);
+    }
+    try {
+      fs.symlinkSync(rescued, wrongPath);
+    } catch (err) {
+      if (err.code !== 'EEXIST') throw err;
+    }
+    installed.push({ link: wrongPath, createdDirs });
+  }
+  return installed;
+}
+
+function removeShims(installed) {
+  for (const { link, createdDirs } of installed) {
+    try { fs.unlinkSync(link); } catch { /* already gone */ }
+    for (const d of createdDirs) {
+      try {
+        if (fs.readdirSync(d).length === 0) fs.rmdirSync(d);
+      } catch { /* not ours */ }
+    }
+  }
+}
+
+// ---- SystemJS-style templateUrl / styleUrls patcher ----
+//
+// Demo components use SystemJS-era template paths:
+//   templateUrl: `.${modulePrefix}/app.component.html`
+//   templateUrl: `.${modulePrefix}/vehicle-card/vehicle-card.component.html`
+//
+// Under SystemJS the JIT loader resolved these relative to the document URL,
+// so the `/app` prefix and the sub-folder name combined to land on the real
+// file. Under Angular AOT the path is resolved relative to the .ts file,
+// which makes both forms wrong:
+//   * Root component at app/app.component.ts: `./app/app.component.html`
+//     looks for app/app/app.component.html (doubled).
+//   * Sub-component at app/<sub>/<sub>.component.ts:
+//     `./<sub>/<sub>.component.html` looks for app/<sub>/<sub>/<sub>.html
+//     (also doubled).
+//
+// In every demo the actual .html lives next to the .ts as a sibling with the
+// same basename, so the AOT-correct path is always `./<basename>.html` (and
+// the same for styleUrls). Patch each component .ts to that form and use
+// fileReplacements so the Angular compiler reads the patched copy.
+//
+// The patched .ts is written as a sibling of the original (under a dotted
+// scratch name) so its own relative imports (`./app.service`, `../shared/...`)
+// and template/style resources resolve exactly as the original would. Writing
+// to a separate scratch directory breaks those relative paths.
+const PATCHED_TS_PREFIX = '.csp-bundle-angular-patched.';
+const TEMPLATE_URL_RE = /templateUrl\s*:\s*([`'"])([^`'"]+)\1/g;
+const STYLE_URLS_INLINE_RE = /styleUrls\s*:\s*\[\s*([`'"])([^`'"]+)\1\s*\]/g;
+const allPatchedTsFiles = new Set();
+
+function aotRelativeFor(tsFile, originalSpec) {
+  // The original spec embeds the SystemJS `${modulePrefix}` plus the dir name.
+  // The real resource is a sibling of the .ts with the same basename.
+  const ext = path.extname(originalSpec);
+  if (!ext) return null;
+  const tsBase = path.basename(tsFile, '.ts');
+  return `./${tsBase}${ext}`;
+}
+
+function patchedSiblingPath(tsFile) {
+  return path.join(path.dirname(tsFile), `${PATCHED_TS_PREFIX}${path.basename(tsFile)}`);
+}
+
+function patchComponentTs(tsFile) {
+  if (!fs.existsSync(tsFile)) return null;
+  const original = fs.readFileSync(tsFile, 'utf8');
+  let patched = original;
+  patched = patched.replace(TEMPLATE_URL_RE, (match, _quote, spec) => {
+    if (!spec.includes('${') && !spec.includes('/')) return match;
+    const fixed = aotRelativeFor(tsFile, spec);
+    if (!fixed) return match;
+    return `templateUrl: '${fixed}'`;
+  });
+  patched = patched.replace(STYLE_URLS_INLINE_RE, (match, _quote, spec) => {
+    if (!spec.includes('${') && !spec.includes('/')) return match;
+    const fixed = aotRelativeFor(tsFile, spec);
+    if (!fixed) return match;
+    return `styleUrls: ['${fixed}']`;
+  });
+  // Always prepend `@ts-nocheck` so JIT-era demo code (whose strict typing was
+  // never enforced) compiles cleanly under AOT. Template type-checks run on a
+  // separate .ngtypecheck.ts file so this only silences component-code errors,
+  // not template ones — but that's still the majority of failures.
+  patched = `// @ts-nocheck\n${patched}`;
+  const dest = patchedSiblingPath(tsFile);
+  fs.writeFileSync(dest, patched);
+  allPatchedTsFiles.add(dest);
+  return dest;
+}
+
+function cleanupPatchedTsFiles() {
+  for (const f of allPatchedTsFiles) {
+    try { fs.unlinkSync(f); } catch { /* already gone */ }
+  }
+  allPatchedTsFiles.clear();
+}
+
+// Recursively delete any .csp-bundle-angular-patched.*.ts in the demos tree.
+// Safety net for files left behind by a crashed previous run — normal exit is
+// covered by cleanupPatchedTsFiles() in main()'s finally block.
+function sweepStalePatchedTsFiles(rootDir) {
+  if (!fs.existsSync(rootDir)) return;
+  for (const entry of fs.readdirSync(rootDir, { withFileTypes: true })) {
+    const full = path.join(rootDir, entry.name);
+    if (entry.isDirectory()) {
+      sweepStalePatchedTsFiles(full);
+    } else if (entry.isFile() && entry.name.startsWith(PATCHED_TS_PREFIX)) {
+      try { fs.unlinkSync(full); } catch { /* race */ }
+    }
+  }
+}
+
+// Walk the demo's `app/` subtree (recursive — a few demos nest sub-components
+// in their own folders) and collect every .ts file. We patch all of them: the
+// patcher both normalizes templateUrl/styleUrls *and* prepends `@ts-nocheck`,
+// so non-component files (app.service.ts, app.module.ts, …) need it too.
+// Excludes pre-existing patch siblings so re-runs are idempotent.
+function findDemoTsFiles(rootDir) {
+  const out = [];
+  function walk(dir) {
+    if (!fs.existsSync(dir)) return;
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) { walk(full); } else if (
+        entry.isFile()
+        && /\.ts$/.test(entry.name)
+        && !entry.name.endsWith('.d.ts')
+        && !entry.name.startsWith(PATCHED_TS_PREFIX)
+      ) {
+        out.push(full);
+      }
+    }
+  }
+  walk(rootDir);
+  return out;
+}
+
+// ---- anti-forgery bare-import alias ----
+//
+// SystemJS demos map the bare specifier `anti-forgery` to
+// shared/anti-forgery/fetch-override.js via config.js. esbuild has no such
+// mapping; provide it explicitly so demos that import it (CardView/Webhooks/…)
+// don't fail to resolve.
+const ANTI_FORGERY_PATH = path.join(DEMOS_APP_ROOT, 'shared', 'anti-forgery', 'fetch-override.js');
+const antiForgeryPlugin = {
+  name: 'csp-bundle-angular:anti-forgery',
+  setup(build) {
+    build.onResolve({ filter: /^anti-forgery$/ }, () => ({ path: ANTI_FORGERY_PATH }));
+  },
+};
+
+// ---- devextreme path redirect plugin ----
+//
+// `apps/demos/node_modules/devextreme` only exposes `bundles/` + package.json
+// (that's all `gulp bundles` produces). The actual CJS modules live in
+// `packages/devextreme/artifacts/transpiled-esm-npm/cjs/`. The SystemJS dev
+// config maps `'devextreme': 'npm:devextreme/cjs'` at runtime; this plugin
+// does the same redirect at bundle time so devextreme-angular's fesm2022
+// bundles can resolve their `import 'devextreme/ui/form'` calls.
+const DEVEXTREME_CJS_ROOT = path.join(
+  REPO_ROOT, 'packages', 'devextreme', 'artifacts', 'transpiled-esm-npm', 'cjs',
+);
+const devextremeRedirectPlugin = {
+  name: 'csp-bundle-angular:devextreme-cjs-redirect',
+  setup(build) {
+    build.onResolve({ filter: /^devextreme(\/.*)?$/ }, (args) => {
+      const sub = args.path === 'devextreme' ? '' : args.path.slice('devextreme/'.length);
+      // Order matters: try the path as-is first (for explicit extensions like
+      // `.json` from localization message imports), then fall through to the
+      // implicit .js / index.js / .mjs forms used by everything else.
+      const candidates = sub
+        ? [
+          path.join(DEVEXTREME_CJS_ROOT, sub),
+          path.join(DEVEXTREME_CJS_ROOT, `${sub}.js`),
+          path.join(DEVEXTREME_CJS_ROOT, sub, 'index.js'),
+          path.join(DEVEXTREME_CJS_ROOT, `${sub}.mjs`),
+        ]
+        : [path.join(DEVEXTREME_CJS_ROOT, 'index.js')];
+      for (const candidate of candidates) {
+        if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+          return { path: candidate };
+        }
+      }
+      return null;
+    });
+  },
+};
+
+// `devextreme-angular/ui/<snake_case>` shim. devextreme-angular's npm dist
+// uses kebab-case (`ui/html-editor`) but several demos still import using the
+// snake_case form (`ui/html_editor`) that the SystemJS config used to accept.
+// Re-resolve to the kebab equivalent so AOT compilation finds the type.
+const devextremeAngularSnakeCasePlugin = {
+  name: 'csp-bundle-angular:devextreme-angular-snake-case',
+  setup(build) {
+    build.onResolve({ filter: /^devextreme-angular\/ui\/[^/]+(\/.*)?$/ }, (args) => {
+      const rest = args.path.slice('devextreme-angular/ui/'.length);
+      const [name, ...tail] = rest.split('/');
+      if (!name.includes('_')) return null;
+      const kebab = name.replace(/_/g, '-');
+      const remapped = ['devextreme-angular', 'ui', kebab, ...tail].join('/');
+      return build.resolve(remapped, {
+        kind: args.kind,
+        importer: args.importer,
+        resolveDir: args.resolveDir,
+      });
+    });
+  },
+};
+
+// `devextreme-dist/*` — VectorMap demos pull static map data (world.js, usa.js,
+// …) from devextreme-dist/js/vectormap-data/. Same monorepo split as
+// devextreme: the symlinked dist package is near-empty, real data lives at
+// packages/devextreme/artifacts/js/. SystemJS dev demos load these via a
+// <script> tag rather than module import, but the ESM/CJS import in the
+// Angular sources expects a node_modules resolution.
+const DEVEXTREME_ARTIFACTS_JS = path.join(REPO_ROOT, 'packages', 'devextreme', 'artifacts', 'js');
+const devextremeDistRedirectPlugin = {
+  name: 'csp-bundle-angular:devextreme-dist-redirect',
+  setup(build) {
+    build.onResolve({ filter: /^devextreme-dist\/js\/.+$/ }, (args) => {
+      const sub = args.path.slice('devextreme-dist/js/'.length);
+      const candidates = [
+        path.join(DEVEXTREME_ARTIFACTS_JS, sub),
+        path.join(DEVEXTREME_ARTIFACTS_JS, `${sub}.js`),
+      ];
+      for (const candidate of candidates) {
+        if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+          return { path: candidate };
+        }
+      }
+      return null;
+    });
+  },
+};
+
+// SystemJS quirks carried over from the dev configs. Two patterns:
+//   * `npm:foo/bar` — alias for `node_modules/foo/bar`. Strip prefix and
+//     re-resolve.
+//   * `<spec>!json` — SystemJS plugin-json loader hint. Strip suffix and load
+//     the resolved file via the JSON loader.
+//   * `globalize/<sub>` — globalize sub-modules live at
+//     node_modules/globalize/dist/globalize/<sub>.js, not at the package root.
+const GLOBALIZE_BASE = path.join(REPO_ROOT, 'node_modules', 'globalize', 'dist', 'globalize');
+const systemJsQuirksPlugin = {
+  name: 'csp-bundle-angular:systemjs-quirks',
+  setup(build) {
+    build.onResolve({ filter: /^globalize\/[^/]+$/ }, (args) => {
+      const sub = args.path.slice('globalize/'.length);
+      const candidates = [
+        path.join(GLOBALIZE_BASE, `${sub}.js`),
+        path.join(NODE_MODULES, 'globalize', 'dist', 'globalize', `${sub}.js`),
+      ];
+      for (const candidate of candidates) {
+        if (fs.existsSync(candidate)) return { path: candidate };
+      }
+      return null;
+    });
+
+    build.onResolve({ filter: /(^npm:)|(!json$)/ }, async (args) => {
+      let spec = args.path;
+      const forceJson = spec.endsWith('!json');
+      if (forceJson) spec = spec.slice(0, -'!json'.length);
+      if (spec.startsWith('npm:')) spec = spec.slice('npm:'.length);
+
+      const resolved = await build.resolve(spec, {
+        kind: args.kind,
+        importer: args.importer,
+        resolveDir: args.resolveDir,
+        pluginData: { cspBundleAngularResolved: true },
+      });
+      if (resolved.errors.length > 0) return resolved;
+
+      if (forceJson) {
+        return { path: resolved.path, namespace: 'csp-bundle-angular-force-json' };
+      }
+      return { path: resolved.path, external: resolved.external };
+    });
+
+    build.onLoad({ filter: /.*/, namespace: 'csp-bundle-angular-force-json' }, (args) => ({
+      contents: fs.readFileSync(args.path, 'utf8'),
+      loader: 'json',
+    }));
+  },
+};
+
+// Polyfill entry — Angular needs zone.js loaded before bootstrapApplication.
+// One virtual entry per demo build keeps the polyfills bundle alongside the
+// app bundle (so the index.html only needs to load two scripts).
+const POLYFILLS_VIRTUAL_ENTRY = 'csp-bundle-angular:polyfills';
+const polyfillsVirtualPlugin = {
+  name: 'csp-bundle-angular:polyfills',
+  setup(build) {
+    build.onResolve({ filter: new RegExp(`^${POLYFILLS_VIRTUAL_ENTRY}$`) }, () => ({
+      path: POLYFILLS_VIRTUAL_ENTRY,
+      namespace: 'csp-bundle-angular-polyfills',
+    }));
+    build.onLoad({ filter: /.*/, namespace: 'csp-bundle-angular-polyfills' }, () => ({
+      contents: "import 'zone.js';\n",
+      loader: 'ts',
+      resolveDir: DEMOS_APP_ROOT,
+    }));
+  },
+};
+
+function makeCompilerPlugin(createCompilerPlugin, tsconfig, fileReplacements) {
+  return createCompilerPlugin(
+    {
+      tsconfig,
+      sourcemap: false,
+      jit: false,
+      advancedOptimizations: false,
+      incremental: false,
+      fileReplacements,
+    },
+    {
+      workspaceRoot: DEMOS_APP_ROOT,
+      optimization: false,
+      inlineFonts: false,
+      sourcemap: false,
+      outputNames: { bundles: '[name]', media: 'media/[name]' },
+      target: ['es2022'],
+      inlineStyleLanguage: 'css',
+      cacheOptions: { enabled: false, path: '', basePath: DEMOS_APP_ROOT },
+    },
+  );
+}
+
+function prepareDemo(demo) {
+  // Patch every *.component.ts in this demo so its templateUrl/styleUrls use
+  // sibling-relative paths instead of the SystemJS-era `.${modulePrefix}/<...>`
+  // form. fileReplacements lets ngc read the patched copies for imported files
+  // via resolveModuleNames. The entry file is added to the Program directly via
+  // tsconfig.files, which bypasses resolveModuleNames — so for the entry we
+  // point both tsconfig.files AND the esbuild entryPoint at the patched copy.
+  const fileReplacements = {};
+  for (const tsFile of findDemoTsFiles(path.join(demo.srcDir, 'app'))) {
+    const patched = patchComponentTs(tsFile);
+    if (patched) fileReplacements[tsFile] = patched;
+  }
+  const effectiveEntry = fileReplacements[demo.entry] || demo.entry;
+  return { ...demo, effectiveEntry, fileReplacements };
+}
+
+function sortJsFiles(jsFiles) {
+  return jsFiles.sort((a, b) => {
+    if (a === 'polyfills.js') return -1;
+    if (b === 'polyfills.js') return 1;
+    return a.localeCompare(b);
+  });
+}
+
+function mergeFileReplacements(demos) {
+  return Object.assign({}, ...demos.map((demo) => demo.fileReplacements || {}));
+}
+
+function entryNameForDemo(demo, name) {
+  return [demo.widget, demo.name, FRAMEWORK, name].join('/');
+}
+
+function chunk(items, size) {
+  const out = [];
+  for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size));
+  return out;
+}
+
+function makeBuildOptions({
+  entryPoints,
+  outdir,
+  tsconfig,
+  fileReplacements,
+  createCompilerPlugin,
+}) {
+  return {
+    entryPoints,
+    outdir,
+    bundle: true,
+    format: 'esm',
+    platform: 'browser',
+    target: 'es2022',
+    mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
+    conditions: ['es2020', 'es2015', 'module'],
+    loader: {
+      '.png': 'dataurl',
+      '.jpg': 'dataurl',
+      '.jpeg': 'dataurl',
+      '.gif': 'dataurl',
+      '.svg': 'dataurl',
+    },
+    define: {
+      'process.env.NODE_ENV': '"production"',
+      ngJitMode: 'false',
+    },
+    minify: false,
+    sourcemap: false,
+    logLevel: 'silent',
+    metafile: true,
+    plugins: [
+      polyfillsVirtualPlugin,
+      antiForgeryPlugin,
+      systemJsQuirksPlugin,
+      devextremeAngularSnakeCasePlugin,
+      devextremeDistRedirectPlugin,
+      devextremeRedirectPlugin,
+      makeCompilerPlugin(createCompilerPlugin, tsconfig, fileReplacements),
+    ],
+    resolveExtensions: ['.ts', '.mjs', '.js'],
+    absWorkingDir: DEMOS_APP_ROOT,
+    nodePaths: [NODE_MODULES],
+  };
+}
+
+async function bundleDemo(demo, createCompilerPlugin) {
+  const prepared = demo.effectiveEntry ? demo : prepareDemo(demo);
+  const destDir = path.join(OUT_ROOT, prepared.widget, prepared.name, FRAMEWORK);
+  fs.mkdirSync(destDir, { recursive: true });
+
+  const effectiveEntry = prepared.effectiveEntry;
+  const tsconfig = writeDemoTsconfig(effectiveEntry);
+
+  let result;
+  try {
+    result = await esbuild.build(makeBuildOptions({
+      entryPoints: { bundle: effectiveEntry, polyfills: POLYFILLS_VIRTUAL_ENTRY },
+      outdir: destDir,
+      tsconfig,
+      fileReplacements: prepared.fileReplacements || {},
+      createCompilerPlugin,
+    }));
+  } catch (err) {
+    return { ok: false, reason: (err && err.message) || String(err) };
+  }
+
+  const outputs = Object.keys((result.metafile && result.metafile.outputs) || {});
+  const jsFiles = sortJsFiles(outputs.filter((o) => o.endsWith('.js')).map((o) => path.basename(o)));
+  const cssFiles = outputs.filter((o) => o.endsWith('.css')).map((o) => path.basename(o));
+  if (jsFiles.length === 0) return { ok: false, reason: 'no JS output produced' };
+
+  fs.writeFileSync(path.join(destDir, 'index.html'), buildHtml({ jsFiles, cssFiles }));
+  return { ok: true };
+}
+
+async function bundleDemoBatch(batch, createCompilerPlugin) {
+  const entryPoints = {};
+  const entryPaths = [];
+  for (const demo of batch) {
+    entryPoints[entryNameForDemo(demo, 'bundle')] = demo.effectiveEntry;
+    entryPoints[entryNameForDemo(demo, 'polyfills')] = POLYFILLS_VIRTUAL_ENTRY;
+    entryPaths.push(demo.effectiveEntry);
+  }
+
+  const tsconfig = writeTsconfig(`batch-${batch[0].widget}-${batch[0].name}-${batch.length}-${Date.now()}`, entryPaths);
+  const fileReplacements = mergeFileReplacements(batch);
+  try {
+    await esbuild.build(makeBuildOptions({
+      entryPoints,
+      outdir: OUT_ROOT,
+      tsconfig,
+      fileReplacements,
+      createCompilerPlugin,
+    }));
+  } catch (err) {
+    return { ok: false, reason: (err && err.message) || String(err) };
+  }
+
+  for (const demo of batch) {
+    const destDir = path.join(OUT_ROOT, demo.widget, demo.name, FRAMEWORK);
+    const cssFiles = ['bundle.css'].filter((file) => fs.existsSync(path.join(destDir, file)));
+    const jsFiles = sortJsFiles(['polyfills.js', 'bundle.js'].filter((file) => fs.existsSync(path.join(destDir, file))));
+    if (jsFiles.length === 0) {
+      return { ok: false, reason: `no JS output produced for ${demo.widget}/${demo.name}` };
+    }
+    fs.writeFileSync(path.join(destDir, 'index.html'), buildHtml({ jsFiles, cssFiles }));
+  }
+
+  return { ok: true };
+}
+
+async function runPool(items, concurrency, fn) {
+  let nextIndex = 0;
+  async function worker() {
+    while (nextIndex < items.length) {
+      const i = nextIndex;
+      nextIndex += 1;
+      await fn(items[i], i);
+    }
+  }
+  const workerCount = Math.max(1, Math.min(concurrency || 1, items.length));
+  await Promise.all(Array.from({ length: workerCount }, worker));
+}
+
+async function main() {
+  console.log(`Framework: ${FRAMEWORK}`);
+  console.log(`Concurrency: ${CONCURRENCY}`);
+  console.log(`Batch size: ${BATCH_SIZE}`);
+  console.log(`Batch concurrency: ${BATCH_CONCURRENCY}`);
+  console.log(`Source: ${SRC_DEMOS_DIR}`);
+  console.log(`Output: ${OUT_ROOT}`);
+  if (FILTER) console.log(`Filter: ${FILTER}`);
+  console.log('');
+
+  // Wipe previous Angular output; leave React/Vue subtrees alone so a
+  // concurrent per-framework run doesn't trash sibling outputs.
+  if (fs.existsSync(OUT_ROOT)) {
+    const existingWidgets = fs.readdirSync(OUT_ROOT, { withFileTypes: true }).filter((w) => w.isDirectory());
+    for (const widget of existingWidgets) {
+      const widgetPath = path.join(OUT_ROOT, widget.name);
+      const existingDemos = fs.readdirSync(widgetPath, { withFileTypes: true }).filter((d) => d.isDirectory());
+      for (const demo of existingDemos) {
+        const fwDir = path.join(widgetPath, demo.name, FRAMEWORK);
+        if (fs.existsSync(fwDir)) fs.rmSync(fwDir, { recursive: true, force: true });
+      }
+    }
+  }
+  fs.mkdirSync(OUT_ROOT, { recursive: true });
+  if (fs.existsSync(GENERATED_TSCONFIG_DIR)) {
+    fs.rmSync(GENERATED_TSCONFIG_DIR, { recursive: true, force: true });
+  }
+  // Sweep stale .csp-bundle-angular-patched.*.ts left in demo source dirs from
+  // a previous crashed run (cleanup-on-exit can't catch SIGKILL/power loss).
+  sweepStalePatchedTsFiles(SRC_DEMOS_DIR);
+
+  const { createCompilerPlugin } = resolveAngularBuildPrivate();
+
+  const { out: demos, skipped } = findDemos();
+  console.log(`Discovered ${demos.length + skipped.length} ${FRAMEWORK} demo(s) — ${demos.length} to bundle, ${skipped.length} skipped (KNOWN_BROKEN_DEMOS)\n`);
+  if (skipped.length > 0) {
+    for (const s of skipped) console.log(`  • skipping ${s.widget}/${s.name}`);
+    console.log('');
+  }
+  if (demos.length === 0) {
+    console.log('Nothing to bundle.');
+    return;
+  }
+
+  const allCssFiles = discoverComponentStyleFiles(demos.map((d) => d.entry));
+  const shims = computeGlobalShims(allCssFiles);
+  console.log(`Component CSS files: ${allCssFiles.length}`);
+  console.log(`Asset shims to install: ${shims.length}`);
+  let installed = [];
+  try {
+    installed = installShims(shims);
+  } catch (err) {
+    removeShims(installed);
+    console.error('Failed to install asset shims:', err.message);
+    process.exit(1);
+  }
+
+  let ok = 0;
+  let fail = 0;
+  const failures = [];
+  const t0 = Date.now();
+
+  try {
+    const preparedDemos = demos.map(prepareDemo);
+    if (BATCH_SIZE === 1) {
+      await runPool(preparedDemos, CONCURRENCY, async (demo, i) => {
+        const idx = i + 1;
+        const res = await bundleDemo(demo, createCompilerPlugin);
+        if (res.ok) {
+          ok += 1;
+          if (idx % 25 === 0 || idx === demos.length) {
+            console.log(`  [${idx}/${demos.length}] bundled (${ok} ok / ${fail} fail)`);
+          }
+        } else {
+          fail += 1;
+          failures.push({ ...demo, reason: res.reason });
+          console.log(`  ❌ [${idx}/${demos.length}] ${demo.widget}/${demo.name} — ${res.reason}`);
+        }
+      });
+    } else {
+      const batches = chunk(preparedDemos, BATCH_SIZE);
+
+      await runPool(batches, BATCH_CONCURRENCY, async (batch, batchIndex) => {
+        const firstIndex = batchIndex * BATCH_SIZE;
+        const lastIndex = Math.min(firstIndex + batch.length, demos.length);
+        const res = await bundleDemoBatch(batch, createCompilerPlugin);
+        if (res.ok) {
+          ok += batch.length;
+          if (lastIndex % 25 === 0 || lastIndex === demos.length || batch.length > 1) {
+            console.log(`  [${lastIndex}/${demos.length}] bundled (${ok} ok / ${fail} fail)`);
+          }
+          return;
+        }
+
+        console.log(`  ⚠️ batch [${firstIndex + 1}-${lastIndex}/${demos.length}] failed — retrying demos individually`);
+        await runPool(batch, CONCURRENCY, async (demo, i) => {
+          const idx = firstIndex + i + 1;
+          const single = await bundleDemo(demo, createCompilerPlugin);
+          if (single.ok) {
+            ok += 1;
+            if (idx % 25 === 0 || idx === demos.length) {
+              console.log(`  [${idx}/${demos.length}] bundled (${ok} ok / ${fail} fail)`);
+            }
+          } else {
+            fail += 1;
+            failures.push({ ...demo, reason: single.reason || res.reason });
+            console.log(`  ❌ [${idx}/${demos.length}] ${demo.widget}/${demo.name} — ${single.reason || res.reason}`);
+          }
+        });
+      });
+    }
+  } finally {
+    removeShims(installed);
+    cleanupPatchedTsFiles();
+  }
+
+  const dt = ((Date.now() - t0) / 1000).toFixed(1);
+  console.log(`\nDone in ${dt}s — ok=${ok} fail=${fail}`);
+
+  if (fail > 0) {
+    console.log('\nFailed demos:');
+    for (const f of failures) console.log(`  ${f.widget}/${f.name} — ${f.reason}`);
+    process.exitCode = 1;
+  }
+}
+
+if (require.main === module) {
+  main().catch((err) => {
+    console.error('csp-bundle-angular failed:', err);
+    process.exit(1);
+  });
+}
+
+module.exports = { main };
diff --git a/apps/demos/utils/server/csp-bundle.js b/apps/demos/utils/server/csp-bundle.js
new file mode 100644
index 000000000000..909e6cbb5b9f
--- /dev/null
+++ b/apps/demos/utils/server/csp-bundle.js
@@ -0,0 +1,330 @@
+// Builds production-style bundles of React/Vue demos for CSP-check.
+//
+// Rationale: the dev `index.html` of framework demos loads SystemJS +
+// plugin-typescript/babel + @vue/compiler-sfc and transpiles sources in the
+// browser. This dev loader needs CSP relaxations ('unsafe-eval', 'unsafe-inline'
+// styles) that production builds never need. CSP-check should validate the
+// production CSP profile, so we pre-bundle each demo with esbuild and let
+// csp-check.js navigate to the bundled HTML instead.
+//
+// Output: apps/demos/csp-bundled-demos/<Widget>/<Name>/<Framework>/index.html
+// Currently supports: React, Vue (esbuild + esbuild-plugin-vue3).
+// Angular is intentionally out of scope — `ng build` per demo is too slow
+// for a per-PR check; Angular CSP-check still uses the SystemJS path.
+
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+const esbuild = require('esbuild');
+
+const FRAMEWORK_ARG = (process.argv.find((a) => a.startsWith('--framework=')) || '').split('=')[1];
+const FRAMEWORK = FRAMEWORK_ARG || process.env.CSP_FRAMEWORKS || 'React';
+
+const SUPPORTED = ['React', 'Vue', 'Angular'];
+if (!SUPPORTED.includes(FRAMEWORK)) {
+  console.log(`csp-bundle: framework ${FRAMEWORK} is not supported (only ${SUPPORTED.join(', ')}). Nothing to do.`);
+  process.exit(0);
+}
+
+// Angular has its own bundler (esbuild + @angular/build/private's AOT plugin)
+// — see csp-bundle-angular.js for the rationale. Delegate to it instead of
+// running the React/Vue esbuild pipeline below.
+const IS_ANGULAR = FRAMEWORK === 'Angular';
+
+const DEMOS_APP_ROOT = path.join(__dirname, '..', '..');
+const SRC_DEMOS_DIR = path.join(DEMOS_APP_ROOT, 'Demos');
+const OUT_ROOT = path.join(DEMOS_APP_ROOT, 'csp-bundled-demos');
+const NODE_MODULES = path.join(DEMOS_APP_ROOT, 'node_modules');
+
+const CONCURRENCY = (() => {
+  const fromEnv = parseInt(process.env.CSP_BUNDLE_CONCURRENCY, 10);
+  if (fromEnv > 0) return fromEnv;
+  return Math.max(2, (os.cpus() || []).length - 1);
+})();
+
+function findDemos() {
+  const out = [];
+  if (!fs.existsSync(SRC_DEMOS_DIR)) return out;
+
+  // Optional substring filter for local smoke tests: CSP_BUNDLE_FILTER=Button/Icons
+  const filter = (process.env.CSP_BUNDLE_FILTER || '').trim();
+
+  const widgets = fs.readdirSync(SRC_DEMOS_DIR, { withFileTypes: true })
+    .filter((w) => w.isDirectory());
+  for (const widget of widgets) {
+    const widgetDir = path.join(SRC_DEMOS_DIR, widget.name);
+    const demos = fs.readdirSync(widgetDir, { withFileTypes: true })
+      .filter((d) => d.isDirectory());
+    for (const demo of demos) {
+      const fwDir = path.join(widgetDir, demo.name, FRAMEWORK);
+      const matchesFilter = !filter || `${widget.name}/${demo.name}`.includes(filter);
+      if (matchesFilter && fs.existsSync(path.join(fwDir, 'index.html'))) {
+        out.push({ widget: widget.name, name: demo.name, srcDir: fwDir });
+      }
+    }
+  }
+  return out;
+}
+
+function findEntry(srcDir) {
+  for (const candidate of ['index.tsx', 'index.ts', 'index.jsx', 'index.js']) {
+    const p = path.join(srcDir, candidate);
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+// Some demos `import 'foo.css'` against files that don't exist (carried over
+// from SystemJS configs). Silently treat such imports as empty CSS so the
+// bundle build doesn't fail on them.
+const ignoreMissingCssPlugin = {
+  name: 'csp-bundle:ignore-missing-css',
+  setup(build) {
+    build.onResolve({ filter: /\.css$/ }, (args) => {
+      const fullPath = path.resolve(args.resolveDir, args.path);
+      if (!fs.existsSync(fullPath)) {
+        return { path: fullPath, namespace: 'csp-bundle-empty-css' };
+      }
+      return null;
+    });
+    build.onLoad({ filter: /.*/, namespace: 'csp-bundle-empty-css' }, () => ({
+      contents: '',
+      loader: 'css',
+    }));
+  },
+};
+
+// Demo sources and devextreme internals carry over SystemJS-specific idioms
+// that esbuild does not understand natively:
+//   * `npm:<pkg>/path` — SystemJS path alias for `node_modules/`.
+//   * `<spec>!json`     — SystemJS plugin-json loader hint.
+//   * `anti-forgery`    — SystemJS map from demos' config.js to a fixed shared
+//                         fetch override under apps/demos/shared/anti-forgery/.
+//   * `globalize/<sub>` — SystemJS package map points globalize to
+//                         node_modules/globalize/dist/globalize/, but the
+//                         package on disk has them under dist/globalize/.
+// This plugin rewrites those import specifiers so esbuild can resolve them
+// the same way the SystemJS dev loader does at runtime.
+const ANTI_FORGERY_PATH = path.join(DEMOS_APP_ROOT, 'shared', 'anti-forgery', 'fetch-override.js');
+const GLOBALIZE_BASE = path.join(NODE_MODULES, 'globalize', 'dist', 'globalize');
+
+const systemJsQuirksPlugin = {
+  name: 'csp-bundle:systemjs-quirks',
+  setup(build) {
+    build.onResolve({ filter: /^anti-forgery$/ }, () => ({ path: ANTI_FORGERY_PATH }));
+
+    build.onResolve({ filter: /^globalize\/[^/]+$/ }, (args) => {
+      const sub = args.path.slice('globalize/'.length);
+      const full = path.join(GLOBALIZE_BASE, `${sub}.js`);
+      if (fs.existsSync(full)) return { path: full };
+      return null;
+    });
+
+    // `npm:foo/bar` -> `foo/bar`; trailing `!json` -> stripped, JSON loader forced.
+    build.onResolve({ filter: /(^npm:)|(!json$)/ }, async (args) => {
+      let spec = args.path;
+      const forceJson = spec.endsWith('!json');
+      if (forceJson) spec = spec.slice(0, -'!json'.length);
+      if (spec.startsWith('npm:')) spec = spec.slice('npm:'.length);
+
+      const resolved = await build.resolve(spec, {
+        kind: args.kind,
+        importer: args.importer,
+        resolveDir: args.resolveDir,
+        pluginData: { cspBundleResolved: true },
+      });
+      if (resolved.errors.length > 0) return resolved;
+
+      if (forceJson) {
+        return { path: resolved.path, namespace: 'csp-bundle-force-json' };
+      }
+      return { path: resolved.path, external: resolved.external };
+    });
+
+    build.onLoad({ filter: /.*/, namespace: 'csp-bundle-force-json' }, (args) => ({
+      contents: fs.readFileSync(args.path, 'utf8'),
+      loader: 'json',
+    }));
+  },
+};
+
+let vuePlugin = null;
+if (FRAMEWORK === 'Vue') {
+  // eslint-disable-next-line global-require
+  const mod = require('esbuild-plugin-vue3');
+  const factory = typeof mod === 'function' ? mod : (mod.default || mod);
+  vuePlugin = factory();
+}
+
+const SHARED_OPTIONS = {
+  bundle: true,
+  minify: false,
+  format: 'iife',
+  loader: {
+    '.js': 'jsx',
+    '.png': 'dataurl',
+    '.jpg': 'dataurl',
+    '.jpeg': 'dataurl',
+    '.gif': 'dataurl',
+    '.svg': 'dataurl',
+  },
+  alias: {
+    react: path.join(NODE_MODULES, 'react'),
+    'react-dom': path.join(NODE_MODULES, 'react-dom'),
+    // SystemJS demo configs alias bare 'globalize' to dist/globalize.js
+    // (the browser build), not the package's node-main.js default.
+    globalize: path.join(NODE_MODULES, 'globalize', 'dist', 'globalize.js'),
+  },
+  define: {
+    'process.env.NODE_ENV': '"production"',
+    __VUE_OPTIONS_API__: 'true',
+    __VUE_PROD_DEVTOOLS__: 'false',
+  },
+  logLevel: 'silent',
+  plugins: [systemJsQuirksPlugin, ignoreMissingCssPlugin, ...(vuePlugin ? [vuePlugin] : [])],
+};
+
+function buildHtml({ jsFile, cssFiles }) {
+  const cssLinks = [
+    '<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />',
+    ...cssFiles.map((f) => `<link rel="stylesheet" type="text/css" href="./${f}" />`),
+  ].join('\n    ');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    ${cssLinks}
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+    <script src="./${jsFile}"></script>
+  </body>
+</html>
+`;
+}
+
+async function bundleDemo(demo) {
+  const entry = findEntry(demo.srcDir);
+  if (!entry) return { ok: false, reason: 'no entry point (index.tsx|ts|jsx|js)' };
+
+  const destDir = path.join(OUT_ROOT, demo.widget, demo.name, FRAMEWORK);
+  fs.mkdirSync(destDir, { recursive: true });
+
+  let result;
+  try {
+    result = await esbuild.build({
+      ...SHARED_OPTIONS,
+      entryPoints: [entry],
+      outdir: destDir,
+      entryNames: 'bundle',
+      assetNames: 'bundle',
+      metafile: true,
+    });
+  } catch (err) {
+    return { ok: false, reason: (err && err.message) || String(err) };
+  }
+
+  const outputs = Object.keys(result.metafile && result.metafile.outputs ? result.metafile.outputs : {});
+  const jsFiles = outputs.filter((o) => o.endsWith('.js')).map((o) => path.basename(o));
+  const cssFiles = outputs.filter((o) => o.endsWith('.css')).map((o) => path.basename(o));
+
+  if (jsFiles.length === 0) return { ok: false, reason: 'no JS output produced' };
+
+  // Standalone styles.css that the dev demo references separately (React).
+  const stylesSrc = path.join(demo.srcDir, 'styles.css');
+  if (cssFiles.length === 0 && fs.existsSync(stylesSrc)) {
+    const dest = path.join(destDir, 'styles.css');
+    fs.copyFileSync(stylesSrc, dest);
+    cssFiles.push('styles.css');
+  }
+
+  fs.writeFileSync(
+    path.join(destDir, 'index.html'),
+    buildHtml({ jsFile: jsFiles[0], cssFiles }),
+  );
+
+  return { ok: true };
+}
+
+async function runPool(items, concurrency, fn) {
+  let nextIndex = 0;
+  async function worker() {
+    while (nextIndex < items.length) {
+      const i = nextIndex;
+      nextIndex += 1;
+      await fn(items[i], i);
+    }
+  }
+  const workerCount = Math.max(1, Math.min(concurrency || 1, items.length));
+  await Promise.all(Array.from({ length: workerCount }, worker));
+}
+
+async function main() {
+  console.log(`Framework: ${FRAMEWORK}`);
+  console.log(`Concurrency: ${CONCURRENCY}`);
+  console.log(`Source: ${SRC_DEMOS_DIR}`);
+  console.log(`Output: ${OUT_ROOT}\n`);
+
+  // Wipe only this framework's previous output so concurrent per-framework runs
+  // (or a local re-bundle) don't stomp on each other's outputs.
+  if (fs.existsSync(OUT_ROOT)) {
+    const existingWidgets = fs.readdirSync(OUT_ROOT, { withFileTypes: true })
+      .filter((w) => w.isDirectory());
+    for (const widget of existingWidgets) {
+      const existingDemos = fs.readdirSync(path.join(OUT_ROOT, widget.name), { withFileTypes: true })
+        .filter((d) => d.isDirectory());
+      for (const demo of existingDemos) {
+        const fwDir = path.join(OUT_ROOT, widget.name, demo.name, FRAMEWORK);
+        if (fs.existsSync(fwDir)) fs.rmSync(fwDir, { recursive: true, force: true });
+      }
+    }
+  }
+  fs.mkdirSync(OUT_ROOT, { recursive: true });
+
+  const demos = findDemos();
+  console.log(`Discovered ${demos.length} ${FRAMEWORK} demo(s)\n`);
+
+  let ok = 0;
+  let fail = 0;
+  const failures = [];
+  const t0 = Date.now();
+
+  await runPool(demos, CONCURRENCY, async (demo, i) => {
+    const idx = i + 1;
+    const res = await bundleDemo(demo);
+    if (res.ok) {
+      ok += 1;
+      if (idx % 25 === 0 || idx === demos.length) {
+        console.log(`  [${idx}/${demos.length}] bundled (${ok} ok / ${fail} fail)`);
+      }
+    } else {
+      fail += 1;
+      failures.push({ ...demo, reason: res.reason });
+      console.log(`  ❌ [${idx}/${demos.length}] ${demo.widget}/${demo.name} — ${res.reason}`);
+    }
+  });
+
+  const dt = ((Date.now() - t0) / 1000).toFixed(1);
+  console.log(`\nDone in ${dt}s — ok=${ok} fail=${fail}`);
+
+  if (fail > 0) {
+    console.log('\nFailed demos:');
+    for (const f of failures) {
+      console.log(`  ${f.widget}/${f.name} — ${f.reason}`);
+    }
+    process.exitCode = 1;
+  }
+}
+
+const entrypoint = IS_ANGULAR ? require('./csp-bundle-angular').main : main;
+
+entrypoint().catch((err) => {
+  console.error('csp-bundle failed:', err);
+  process.exit(1);
+});
diff --git a/apps/demos/utils/server/csp-check.js b/apps/demos/utils/server/csp-check.js
index 480b96a8c91b..ad110b0a8cad 100644
--- a/apps/demos/utils/server/csp-check.js
+++ b/apps/demos/utils/server/csp-check.js
@@ -1,7 +1,8 @@
-const { execFile, execFileSync } = require('child_process');
+const { execFileSync, spawn } = require('child_process');
 const { join } = require('path');
+const os = require('os');
 const {
-  readdirSync, existsSync, writeFileSync, mkdirSync,
+  readdirSync, existsSync, readFileSync, writeFileSync, mkdirSync,
 } = require('fs');
 const http = require('http');
 
@@ -9,7 +10,25 @@ const DEMO_ROOT = join(__dirname, '..', '..');
 const REPORT_DIR = join(DEMO_ROOT, 'csp-reports');
 const SERVER_URL = process.env.CSP_SERVER_URL || 'http://localhost:8080';
 const FRAMEWORK = (process.env.CSP_FRAMEWORKS || 'jQuery').trim();
-const CONCURRENCY = parseInt(process.env.CSP_CONCURRENCY, 10) || 10;
+
+// When set, look for pre-built demo bundles under apps/demos/csp-bundled-demos
+// (produced by csp-bundle.js) instead of the SystemJS dev demos under
+// apps/demos/Demos. Each bundled page loads orders of magnitude faster
+// because there is no in-browser TS/Vue/Babel transpile step.
+const USE_BUNDLED = process.env.CSP_USE_BUNDLED === '1' || process.env.CSP_USE_BUNDLED === 'true';
+
+const DEFAULT_CONCURRENCY = (USE_BUNDLED || FRAMEWORK === 'jQuery') ? 15 : 8;
+const parsedConcurrency = parseInt(process.env.CSP_CONCURRENCY, 10);
+
+const CONCURRENCY = parsedConcurrency > 0 ? parsedConcurrency : DEFAULT_CONCURRENCY;
+
+const CSP_LISTENER_SOURCE = readFileSync(
+  join(__dirname, '..', 'visual-tests', 'inject', 'csp-listener.js'),
+  'utf8',
+);
+
+const RENDER_DEADLINE_MS = 30000;
+const SETTLE_MS = 300;
 
 function findChrome() {
   const candidates = [
@@ -40,8 +59,81 @@ function findChrome() {
 
 const CHROME_PATH = findChrome();
 
+const DEBUG_PORT = 20222;
+const delay = (ms) => new Promise((resolve) => { setTimeout(resolve, ms); });
+
+let browserChild = null;
+let browserCdp = null;
+
+function openCdp(wsUrl) {
+  const ws = new WebSocket(wsUrl);
+  const pending = new Map();
+  let msgId = 0;
+
+  ws.addEventListener('message', ({ data }) => {
+    const msg = JSON.parse(data);
+    const cb = pending.get(msg.id);
+    if (cb) {
+      pending.delete(msg.id);
+      cb(msg.result);
+    }
+  });
+
+  return {
+    ready: new Promise((resolve, reject) => {
+      ws.addEventListener('open', () => resolve());
+      ws.addEventListener('error', reject);
+    }),
+    send(method, params) {
+      msgId += 1;
+      const id = msgId;
+      return new Promise((resolve) => {
+        pending.set(id, resolve);
+        ws.send(JSON.stringify({ id, method, params: params ?? {} }));
+      });
+    },
+    onError(fn) { ws.addEventListener('error', fn); },
+    close() { try { ws.close(); } catch { /* already closed */ } },
+  };
+}
+
+async function startBrowser() {
+  browserChild = spawn(CHROME_PATH, [
+    '--headless=new',
+    '--no-sandbox',
+    '--disable-gpu',
+    '--disable-dev-shm-usage',
+    '--disable-software-rasterizer',
+    '--no-first-run',
+    '--no-default-browser-check',
+    `--remote-debugging-port=${DEBUG_PORT}`,
+    `--user-data-dir=${join(os.tmpdir(), 'csp-chrome-shared')}`,
+  ], { stdio: 'ignore' });
+  const info = await waitForDebugger(DEBUG_PORT);
+  browserCdp = openCdp(info.webSocketDebuggerUrl);
+  await browserCdp.ready;
+}
+
+function stopBrowser() {
+  if (browserCdp) browserCdp.close();
+  try { browserChild.kill('SIGKILL'); } catch { /* already dead */ }
+}
+
+async function waitForDebugger(port, maxWaitMs = 15000) {
+  const deadline = Date.now() + maxWaitMs;
+  while (Date.now() < deadline) {
+    try {
+      return await httpRequest(`http://127.0.0.1:${port}/json/version`);
+    } catch {
+      await delay(200);
+    }
+  }
+  throw new Error(`Chrome debugger did not start on port ${port}`);
+}
+
 function findDemos() {
-  const demosDir = join(DEMO_ROOT, 'Demos');
+  const demosDirName = USE_BUNDLED ? 'csp-bundled-demos' : 'Demos';
+  const demosDir = join(DEMO_ROOT, demosDirName);
   const result = [];
 
   if (!existsSync(demosDir)) {
@@ -63,7 +155,7 @@ function findDemos() {
       const fwDir = join(widgetDir, demo.name, FRAMEWORK);
       if (existsSync(join(fwDir, 'index.html'))) {
         result.push({
-          url: `${SERVER_URL}/apps/demos/Demos/${widget.name}/${demo.name}/${FRAMEWORK}/`,
+          url: `${SERVER_URL}/apps/demos/${demosDirName}/${widget.name}/${demo.name}/${FRAMEWORK}/`,
           widget: widget.name,
           demo: demo.name,
           framework: FRAMEWORK,
@@ -75,29 +167,57 @@ function findDemos() {
   return result;
 }
 
-function visitPage(url) {
-  return new Promise((resolve, reject) => {
-    const child = execFile(CHROME_PATH, [
-      '--headless=new',
-      '--no-sandbox',
-      '--disable-gpu',
-      '--disable-software-rasterizer',
-      '--disable-dev-shm-usage',
-      '--dump-dom',
-      '--virtual-time-budget=2000',
-      '--window-size=100,100',
-      url,
-    ], { timeout: 50000, killSignal: 'SIGKILL' }, (error) => {
-      if (error && error.killed) {
-        reject(new Error(`Chrome timed out for ${url}`));
-      } else {
-        resolve();
-      }
-    });
-    child.on('error', (err) => {
-      reject(new Error(`Failed to launch Chrome at "${CHROME_PATH}": ${err.message}`));
+async function collectViolations(tab, url) {
+  await tab.ready;
+  await tab.send('Page.enable');
+  await tab.send('Runtime.enable');
+  await tab.send('Page.addScriptToEvaluateOnNewDocument', { source: CSP_LISTENER_SOURCE });
+  await tab.send('Page.navigate', { url });
+
+  const deadline = Date.now() + RENDER_DEADLINE_MS;
+  while (Date.now() < deadline) {
+    const evalRes = await tab.send('Runtime.evaluate', {
+      expression: "!!document.querySelector('.dx-widget')",
+      returnByValue: true,
     });
+    if (evalRes && evalRes.result && evalRes.result.value) break;
+    await delay(250);
+  }
+
+  await delay(SETTLE_MS);
+
+  const res = await tab.send('Runtime.evaluate', {
+    expression: 'JSON.stringify(window.__cspViolations || [])',
+    returnByValue: true,
   });
+  const raw = res && res.result && res.result.value;
+  const all = raw ? JSON.parse(raw) : [];
+
+  const seen = new Set();
+  return all.filter((v) => {
+    const key = `${v.effectiveDirective || v.violatedDirective}|${v.blockedURI}|${v.sourceFile}|${v.lineNumber}|${v.columnNumber}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+async function visitPage(url) {
+  const { targetId } = await browserCdp.send('Target.createTarget', { url: 'about:blank' });
+  const tab = openCdp(`ws://127.0.0.1:${DEBUG_PORT}/devtools/page/${targetId}`);
+
+  try {
+    return await Promise.race([
+      collectViolations(tab, url),
+      new Promise((resolve, reject) => {
+        tab.onError(() => reject(new Error(`Chrome WebSocket error for ${url}`)));
+      }),
+      delay(RENDER_DEADLINE_MS + 10000).then(() => { throw new Error(`Timed out loading ${url}`); }),
+    ]);
+  } finally {
+    tab.close();
+    await browserCdp.send('Target.closeTarget', { targetId });
+  }
 }
 
 function httpRequest(url, method) {
@@ -127,8 +247,9 @@ async function runPool(items, concurrency, fn) {
       await fn(items[i], i);
     }
   }
+  const workerCount = Math.max(1, Math.min(concurrency || 1, items.length));
   const workers = [];
-  for (let w = 0; w < Math.min(concurrency, items.length); w += 1) {
+  for (let w = 0; w < workerCount; w += 1) {
     workers.push(worker());
   }
   await Promise.all(workers);
@@ -138,6 +259,7 @@ async function main() {
   console.log(`Chrome: ${CHROME_PATH}`);
   console.log(`Server: ${SERVER_URL}`);
   console.log(`Framework: ${FRAMEWORK}`);
+  console.log(`Source: ${USE_BUNDLED ? 'csp-bundled-demos (production-style)' : 'Demos (SystemJS dev)'}`);
   console.log(`Concurrency: ${CONCURRENCY}\n`);
 
   const demos = findDemos();
@@ -150,42 +272,42 @@ async function main() {
 
   let totalViolations = 0;
   let demosWithViolations = 0;
+  let demosVisited = 0;
   const allViolations = [];
 
-  await httpRequest(`${SERVER_URL}/csp-violations`, 'DELETE');
+  await startBrowser();
 
-  await runPool(demos, CONCURRENCY, async (demo, i) => {
-    const idx = i + 1;
-    const snapshot = await httpRequest(`${SERVER_URL}/csp-violations`);
-    const since = snapshot.lastId || 0;
+  try {
+    await runPool(demos, CONCURRENCY, async (demo, i) => {
+      const idx = i + 1;
+      demosVisited += 1;
 
-    try {
-      await visitPage(demo.url);
-    } catch (err) {
-      console.log(`  ⚠️ [${idx}/${demos.length}] ${demo.widget}/${demo.demo}/${demo.framework} — ${err.message}`);
-      return;
-    }
+      let violations;
+      try {
+        violations = await visitPage(demo.url);
+      } catch (err) {
+        console.log(`  ⚠️ [${idx}/${demos.length}] ${demo.widget}/${demo.demo}/${demo.framework} — ${err.message}`);
+        return;
+      }
 
-    const result = await httpRequest(`${SERVER_URL}/csp-violations?since=${since}`);
-    const violations = (result.violations || []).filter(
-      (v) => v.documentUri === demo.url || v.documentUri === `${demo.url}index.html`,
-    );
-
-    if (violations.length > 0) {
-      demosWithViolations += 1;
-      totalViolations += violations.length;
-
-      console.log(`  ❌ [${idx}/${demos.length}] ${demo.widget}/${demo.demo}/${demo.framework} — ${violations.length} violation(s)`);
-      for (const v of violations) {
-        const blocked = v.blockedUri || 'N/A';
-        const directive = v.effectiveDirective || v.violatedDirective || '?';
-        console.log(`       ${directive}: ${blocked}`);
-        allViolations.push({ ...v, framework: FRAMEWORK });
+      if (violations.length > 0) {
+        demosWithViolations += 1;
+        totalViolations += violations.length;
+
+        console.log(`  ❌ [${idx}/${demos.length}] ${demo.widget}/${demo.demo}/${demo.framework} — ${violations.length} violation(s)`);
+        for (const v of violations) {
+          const blocked = v.blockedURI || 'N/A';
+          const directive = v.effectiveDirective || v.violatedDirective || '?';
+          console.log(`       ${directive}: ${blocked}`);
+          allViolations.push({ ...v, framework: FRAMEWORK });
+        }
+      } else {
+        console.log(`  ✅ [${idx}/${demos.length}] ${demo.widget}/${demo.demo}/${demo.framework}`);
       }
-    } else {
-      console.log(`  ✅ [${idx}/${demos.length}] ${demo.widget}/${demo.demo}/${demo.framework}`);
-    }
-  });
+    });
+  } finally {
+    stopBrowser();
+  }
 
   const reportFile = join(REPORT_DIR, `csp-violations-${FRAMEWORK.toLowerCase()}.jsonl`);
 
@@ -197,10 +319,16 @@ async function main() {
 
   console.log(`\n${'='.repeat(60)}`);
   console.log(`Framework: ${FRAMEWORK}`);
-  console.log(`Demos checked: ${demos.length}`);
+  console.log(`Demos checked: ${demosVisited}/${demos.length}`);
   console.log(`Demos with violations: ${demosWithViolations}`);
   console.log(`Total violations: ${totalViolations}`);
 
+  if (demosVisited < demos.length) {
+    console.log(`\n❌ Only ${demosVisited}/${demos.length} demos were visited — the run is incomplete.`);
+    process.exitCode = 1;
+    return;
+  }
+
   if (totalViolations > 0) {
     console.log(`\n⚠️  ${totalViolations} CSP violation(s) detected in ${demosWithViolations} demo(s)`);
     console.log(`Report: ${reportFile}`);
diff --git a/apps/demos/utils/server/csp-server.js b/apps/demos/utils/server/csp-server.js
index 79e3b800f4ec..8d55214ca3be 100644
--- a/apps/demos/utils/server/csp-server.js
+++ b/apps/demos/utils/server/csp-server.js
@@ -2,9 +2,8 @@
 
 const crypto = require('crypto');
 const express = require('express');
-const cookieParser = require('cookie-parser');
 const { join, resolve } = require('path');
-const { readFileSync, readdirSync } = require('fs');
+const { readFileSync } = require('fs');
 const RateLimit = require('express-rate-limit');
 
 const root = join(__dirname, '..', '..', '..', '..');
@@ -34,18 +33,17 @@ const CSP_DEMO_ALLOWLIST = {
   'Button/Icons': {
     'font-src': ['https://maxcdn.bootstrapcdn.com'],
   },
-  'CardView/WebAPIService': {
-    'img-src': ['data:'],
-  },
   // Azure Maps SDK: inline styles, blob workers, data: images,
-  // and font glyphs from atlas.microsoft.com
+  // and font glyphs from atlas.microsoft.com.
+  // style-src-elem needs 'self' (for <link> stylesheets) + 'unsafe-inline'
+  // (Atlas Maps SDK injects <style> elements at runtime on all frameworks).
   Map: {
     'script-src': ['https://atlas.microsoft.com'],
-    'style-src': ["'unsafe-inline'"],
     'connect-src': ['https://atlas.microsoft.com'],
     'worker-src': ['blob:'],
     'img-src': ['data:'],
     'font-src': ['https://atlas.microsoft.com'],
+    'style-src-elem': ["'self'", "'unsafe-inline'"],
   },
   'DataGrid/CollaborativeEditing': {
     'connect-src': ['wss://js.devexpress.com'],
@@ -65,54 +63,50 @@ const CSP_DEMO_ALLOWLIST = {
   'Scheduler/SignalRService': {
     'connect-src': ['wss://js.devexpress.com'],
   },
-  'DataGrid/Cell': {
-    'img-src': ['data:'],
-  },
-  // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh. Cannot move to a separate file or index.js
-  'DataGrid/AIColumns': {
-    'script-src': ["'unsafe-inline'"],
-    'connect-src': ['https://public-api.devexpress.com'],
-  },
+  // 'CardView/WebAPIService': {
+  //   'img-src': ['data:'],
+  // },
   'DataGrid/ExcelJSExportImages': {
     'img-src': ['data:'],
   },
-  'DataGrid/InfiniteScrolling': {
-    'img-src': ['data:'],
-  },
-  'DataGrid/LocalReordering': {
-    'img-src': ['data:'],
-  },
+  // 'DataGrid/InfiniteScrolling': {
+  //   'img-src': ['data:'],
+  // },
+  // 'DataGrid/LocalReordering': {
+  //   'img-src': ['data:'],
+  // },
   'DataGrid/PDFExportImages': {
     'img-src': ['data:'],
   },
-  'DataGrid/RemoteCRUDOperations': {
-    'img-src': ['data:'],
-  },
-  'DataGrid/RemoteGrouping': {
-    'img-src': ['data:'],
-  },
-  'DataGrid/RemoteReordering': {
-    'img-src': ['data:'],
-  },
-  'DataGrid/RemoteVirtualScrolling': {
-    'img-src': ['data:'],
-  },
+  // 'DataGrid/RemoteCRUDOperations': {
+  //   'img-src': ['data:'],
+  // },
+  // 'DataGrid/RemoteGrouping': {
+  //   'img-src': ['data:'],
+  // },
+  // 'DataGrid/RemoteReordering': {
+  //   'img-src': ['data:'],
+  // },
+  // 'DataGrid/RemoteVirtualScrolling': {
+  //   'img-src': ['data:'],
+  // },
   'DataGrid/VirtualScrolling': {
     'img-src': ['data:'],
   },
-  'DataGrid/WebAPIService': {
-    'img-src': ['data:'],
-  },
+  // 'DataGrid/WebAPIService': {
+  //   'img-src': ['data:'],
+  // },
+  // 'TreeList/FocusedRow': {
+  //   'img-src': ['data:'],
+  // },
+  // 'TreeList/WebAPIService': {
+  //   'img-src': ['data:'],
+  // },
   Gantt: {
     'img-src': ['data:'],
   },
   Diagram: {
     'img-src': ['data:'],
-  },
-  Drawer: {
-    'font-src': ['https://maxcdn.bootstrapcdn.com'],
-  },
-  FilterBuilder: {
     'font-src': ['https://maxcdn.bootstrapcdn.com'],
   },
   FileManager: {
@@ -121,12 +115,6 @@ const CSP_DEMO_ALLOWLIST = {
   'Resizable/Overview': {
     'img-src': ['data:'],
   },
-  'SelectBox/Grouping': {
-    'font-src': ['https://maxcdn.bootstrapcdn.com'],
-  },
-  'SelectBox/SearchAndEditing': {
-    'font-src': ['https://maxcdn.bootstrapcdn.com'],
-  },
   'Scheduler/GoogleCalendarIntegration': {
     'connect-src': ['https://www.googleapis.com'],
   },
@@ -136,30 +124,16 @@ const CSP_DEMO_ALLOWLIST = {
   'ScrollView/Overview': {
     'img-src': ['data:'],
   },
-  'Slider/Overview': {
-    'font-src': ['https://maxcdn.bootstrapcdn.com'],
-  },
-  'Sortable/Customization': {
-    'font-src': ['https://maxcdn.bootstrapcdn.com'],
-  },
-  'TagBox/Grouping': {
-    'font-src': ['https://maxcdn.bootstrapcdn.com'],
-  },
-  // AI demos use inline <script type="module"> to import OpenAI SDK from esm.sh. Cannot move to a separate file or index.js
-  'TreeList/AIColumns': {
-    'connect-src': ['https://public-api.devexpress.com'],
-    'script-src': ["'unsafe-inline'"],
-  },
-  'TreeList/BatchEditing': {
+  'Common/FormsOverview': {
     'img-src': ['data:'],
   },
-  'TreeList/CellEditing': {
+  'Scheduler/Overview': {
     'img-src': ['data:'],
   },
-  'TreeList/FixedAndStickyColumns': {
+  'TreeList/BatchEditing': {
     'img-src': ['data:'],
   },
-  'TreeList/FocusedRow': {
+  'TreeList/CellEditing': {
     'img-src': ['data:'],
   },
   'TreeList/MultipleSorting': {
@@ -168,58 +142,144 @@ const CSP_DEMO_ALLOWLIST = {
   'TreeList/SearchPanel': {
     'img-src': ['data:'],
   },
-  'TreeList/WebAPIService': {
-    'img-src': ['data:'],
-  },
   'TreeList/Overview': {
     'img-src': ['data:'],
   },
-  // globalize/message.js uses new Function() internally
-  'Localization/UsingGlobalize': {
-    'script-src': ["'unsafe-eval'"],
-  },
-  // AI demo: inline <script type="module"> for OpenAI SDK + eval() used by the SDK
-  'Form/SmartPaste': {
-    'script-src': ["'unsafe-inline'", "'unsafe-eval'"],
-  },
-  // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
-  'HtmlEditor/AITextEditing': {
-    'script-src': ["'unsafe-inline'"],
-  },
-  // Inline <script type="module"> to import remark/rehype from esm.sh
-  'HtmlEditor/MarkdownSupport': {
-    'script-src': ["'unsafe-inline'"],
-  },
-  // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
-  'Chat/AIAndChatbotIntegration': {
-    'script-src': ["'unsafe-inline'"],
-  },
 };
 
 // Framework-specific overrides (e.g. Font Awesome loaded only in React/Vue demos)
 const CSP_FRAMEWORK_ALLOWLIST = {
+  jQuery: {
+    FilterBuilder: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
+    // globalize/message.js uses new Function() internally
+    'Localization/UsingGlobalize': {
+      'script-src': ["'unsafe-eval'"],
+    },
+    // Inline <script type="module"> to import remark/rehype from esm.sh
+    'HtmlEditor/MarkdownSupport': {
+      'script-src': ["'unsafe-inline'"],
+    },
+    // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh. Cannot move to a separate file or index.js
+    'DataGrid/AIAssistant': {
+      'script-src': ["'unsafe-inline'"],
+    },
+    // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh. Cannot move to a separate file or index.js
+    'DataGrid/AIColumns': {
+      'script-src': ["'unsafe-inline'"],
+      'connect-src': ['https://public-api.devexpress.com'],
+    },
+    // AI demo: inline <script type="module"> for OpenAI SDK + eval() used by the SDK
+    'Form/SmartPaste': {
+      'script-src': ["'unsafe-inline'", "'unsafe-eval'"],
+    },
+    // AI demos use inline <script type="module"> to import OpenAI SDK from esm.sh. Cannot move to a separate file or index.js
+    'TreeList/AIColumns': {
+      'connect-src': ['https://public-api.devexpress.com'],
+      'script-src': ["'unsafe-inline'"],
+    },
+    // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
+    'HtmlEditor/AITextEditing': {
+      'script-src': ["'unsafe-inline'"],
+    },
+    // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
+    'Chat/AIAndChatbotIntegration': {
+      'script-src': ["'unsafe-inline'"],
+    },
+    // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
+    'Chat/MessageStreaming': {
+      'script-src': ["'unsafe-inline'"],
+    },
+    // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
+    'Chat/PromptSuggestions': {
+      'script-src': ["'unsafe-inline'"],
+    },
+    'DataGrid/Cell': {
+      'img-src': ['data:'],
+    },
+    'TreeList/FixedAndStickyColumns': {
+      'img-src': ['data:'],
+    },
+  },
+  Angular: {
+    FilterBuilder: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
+  },
   React: {
+    'Slider/Overview': {
+      'font-src': ['https://maxcdn.bootstrapcdn.com'],
+    },
+    'Sortable/Customization': {
+      'font-src': ['https://maxcdn.bootstrapcdn.com'],
+    },
+    'TagBox/Grouping': {
+      'font-src': ['https://maxcdn.bootstrapcdn.com'],
+    },
+    'SelectBox/Grouping': {
+      'font-src': ['https://maxcdn.bootstrapcdn.com'],
+    },
+    'SelectBox/SearchAndEditing': {
+      'font-src': ['https://maxcdn.bootstrapcdn.com'],
+    },
     Calendar: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     CheckBox: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     'DateRangeBox/Overview': { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
-    Diagram: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     Form: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     'Lookup/Templates': { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
+    // globalize/message.js uses new Function() internally — needed even in bundled mode
+    // (in SystemJS mode this was covered globally via the nonce + 'unsafe-eval' path)
+    'Localization/UsingGlobalize': { 'script-src': ["'unsafe-eval'"] },
   },
   Vue: {
+    'SelectBox/Grouping': {
+      'font-src': ['https://maxcdn.bootstrapcdn.com'],
+    },
     Calendar: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     CheckBox: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
-    Diagram: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     Form: { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
     'Lookup/Templates': { 'font-src': ['https://maxcdn.bootstrapcdn.com'] },
+    'TreeList/FixedAndStickyColumns': {
+      'img-src': ['data:'],
+    },
+    // globalize/message.js uses new Function() internally — needed even in bundled mode
+    'Localization/UsingGlobalize': { 'script-src': ["'unsafe-eval'"] },
   },
 };
 
+// Framework-wide style-src handling for runtime style injection.
+// jQuery/React load demo CSS via an external <link> and stay strict.
+// Vue's in-browser SFC loader (dx-systemjs-vue-browser) injects component CSS as
+// an inline <style> and cannot set a nonce, so it requires 'unsafe-inline'.
+// Angular injects component CSS as <style> too, but reads the CSP nonce from the
+// root element's ngCspNonce attribute — handled below by adding the nonce to
+// style-src instead of relaxing it.
+// These relaxations only apply to the SystemJS dev demos; the production-style
+// bundles (csp-bundled-demos) precompile templates and never need them.
+const CSP_FRAMEWORK_DEFAULTS = {
+  Vue: { 'style-src': ["'unsafe-inline'"] },
+};
+
+// Allowlist entries that exist only because of the SystemJS dev loader (Font
+// Awesome shipped via inline component CSS in Vue/React SFC-style demos, etc.).
+// When serving production-style bundles these relaxations are dropped — the
+// bundled CSS is emitted as an external file under 'self'.
+const SYSTEMJS_ONLY_FRAMEWORK_KEYS = {
+  React: ['FilterBuilder', 'Slider/Overview', 'Sortable/Customization', 'TagBox/Grouping',
+    'SelectBox/Grouping', 'SelectBox/SearchAndEditing', 'Calendar', 'CheckBox',
+    'DateRangeBox/Overview', 'Form', 'Lookup/Templates'],
+  Vue: ['SelectBox/Grouping', 'Calendar', 'CheckBox', 'Form',
+    'Lookup/Templates', 'TreeList/FixedAndStickyColumns'],
+  Angular: ['FilterBuilder', 'Map'],
+};
+
 function generateNonce() {
   return crypto.randomBytes(16).toString('base64');
 }
 
-function buildCspHeader(demoKey, nonce, framework) {
+function isSystemJsOnlyEntry(framework, key) {
+  const list = SYSTEMJS_ONLY_FRAMEWORK_KEYS[framework];
+  return !!(list && list.includes(key));
+}
+
+function buildCspHeader(demoKey, nonce, framework, isBundled) {
   const directives = {};
   for (const [key, values] of Object.entries(CSP_BASE_DIRECTIVES)) {
     directives[key] = [...values];
@@ -227,17 +287,32 @@ function buildCspHeader(demoKey, nonce, framework) {
 
   if (nonce) {
     directives['script-src'].push(`'nonce-${nonce}'`);
-    // Allow scripts dynamically created by nonced scripts (e.g. SystemJS module evaluation)
     directives['script-src'].push("'strict-dynamic'");
+    directives['script-src'].push("'unsafe-eval'");
+
+    // Angular reads this nonce from the root element's ngCspNonce attribute and
+    // applies it to the <style> elements it injects for component styles.
+    if (framework === 'Angular') {
+      directives['style-src'].push(`'nonce-${nonce}'`);
+    }
   }
 
   const widgetKey = demoKey && demoKey.split('/')[0];
   const frameworkList = framework && CSP_FRAMEWORK_ALLOWLIST[framework];
+
+  // Bundled (production-style) demos never need the SystemJS-only relaxations
+  // from the *framework* allowlist (e.g. Font Awesome font-src injected via
+  // inline component CSS in SFC-style demos). CSP_DEMO_ALLOWLIST entries are
+  // framework-neutral (third-party SDKs like Atlas Maps, Globalize, etc.) and
+  // must always apply regardless of bundling mode.
+  const allowFrameworkEntry = (key) => !(isBundled && isSystemJsOnlyEntry(framework, key));
+
   const allowlists = [
+    !isBundled && framework && CSP_FRAMEWORK_DEFAULTS[framework],
     demoKey && CSP_DEMO_ALLOWLIST[demoKey],
     widgetKey && CSP_DEMO_ALLOWLIST[widgetKey],
-    frameworkList && demoKey && frameworkList[demoKey],
-    frameworkList && widgetKey && frameworkList[widgetKey],
+    frameworkList && demoKey && allowFrameworkEntry(demoKey) && frameworkList[demoKey],
+    frameworkList && widgetKey && allowFrameworkEntry(widgetKey) && frameworkList[widgetKey],
   ].filter(Boolean);
 
   for (const allowlist of allowlists) {
@@ -256,28 +331,31 @@ function buildCspHeader(demoKey, nonce, framework) {
   return parts.join('; ');
 }
 
-function getDemoKey(url) {
-  const match = url.match(/\/Demos\/([^/]+)\/([^/]+)\//);
-  return match ? `${match[1]}/${match[2]}` : null;
-}
+const DEMO_PATH_RE = /\/(?:Demos|csp-bundled-demos)\/([^/]+)\/([^/]+)\/([^/]+)/;
 
-function getFramework(url) {
-  const match = url.match(/\/Demos\/[^/]+\/[^/]+\/([^/]+)/);
-  return match ? match[1] : null;
+function parseDemoPath(url) {
+  const match = url.match(DEMO_PATH_RE);
+  if (!match) return { demoKey: null, framework: null, isBundled: false };
+  return {
+    demoKey: `${match[1]}/${match[2]}`,
+    framework: match[3],
+    isBundled: url.includes('/csp-bundled-demos/'),
+  };
 }
 
 function cspMiddleware(req, res, next) {
-  const demoKey = getDemoKey(req.path);
-  const framework = getFramework(req.path);
+  const { demoKey, framework, isBundled } = parseDemoPath(req.path);
 
-  // Angular, React & Vue demos use inline <script> for SystemJS — allow via nonce
-  const needsNonce = framework === 'Angular' || framework === 'React' || framework === 'Vue';
+  // SystemJS dev demos boot via inline <script> blocks — allow them via nonce.
+  // Bundled demos load only external scripts/styles, so 'self' is enough.
+  const needsNonce = !isBundled
+    && (framework === 'Angular' || framework === 'React' || framework === 'Vue');
   const nonce = needsNonce ? generateNonce() : null;
   if (nonce) {
     res.locals.cspNonce = nonce;
   }
 
-  res.setHeader('Content-Security-Policy', buildCspHeader(demoKey, nonce, framework));
+  res.setHeader('Content-Security-Policy-Report-Only', buildCspHeader(demoKey, nonce, framework, isBundled));
   next();
 }
 
@@ -343,23 +421,19 @@ const demoIndexHandler = (request, response) => {
     return;
   }
 
-  const cookieTheme = request.cookies['dx-demo-theme'];
-  const cssDirectory = join(root, 'node_modules', 'devextreme', 'dist', 'css');
-  let availableThemes = [];
-  try {
-    availableThemes = readdirSync(cssDirectory).filter((f) => /^dx\.(?!common).*\.css$/i.test(f));
-  } catch { /* css directory may not exist */ }
-
-  if (cookieTheme && availableThemes.includes(cookieTheme)) {
-    fileContent = fileContent.replace('dx.light.css', cookieTheme);
-  }
-
   // Inject nonce into all <script> tags for Angular/React/Vue demos.
   // 'strict-dynamic' in CSP ignores 'self', so <script src> tags also need the nonce.
   // 'strict-dynamic' propagates trust to scripts dynamically created by SystemJS.
   const { cspNonce } = response.locals;
   if (cspNonce) {
     fileContent = fileContent.replace(/<script(?=\s|>)/g, `<script nonce="${cspNonce}"`);
+
+    // Angular reads ngCspNonce from its root element and stamps the same nonce on
+    // the <style> elements it injects for component styles, so they satisfy a
+    // nonce-based style-src without needing 'unsafe-inline'.
+    if (approach === 'Angular') {
+      fileContent = fileContent.replace(/<demo-app(?=[\s>])/, `<demo-app ngCspNonce="${cspNonce}"`);
+    }
   }
 
   response.set('Content-Type', 'text/html');
@@ -367,12 +441,11 @@ const demoIndexHandler = (request, response) => {
 };
 
 const app = express();
-app.use(cookieParser());
 app.use(cspMiddleware);
 
 const demoIndexLimiter = RateLimit({
   windowMs: 15 * 60 * 1000,
-  max: 100,
+  max: 10000,
 });
 
 app.post('/csp-report', cspReportHandler);
@@ -386,7 +459,7 @@ app.use(express.static(root, { index: [indexFileName] }));
 
 const server = app.listen(port, host, () => {
   console.log(`CSP Demo server listening on http://${host}:${port}`);
-  console.log('CSP Report-Only mode enabled');
+  console.log('CSP report-only mode enabled');
   console.log('  Report endpoint: POST /csp-report');
   console.log('  View violations: GET /csp-violations');
   console.log('  Clear violations: DELETE /csp-violations');
diff --git a/apps/demos/utils/server/tsconfig.csp-bundle-angular.json b/apps/demos/utils/server/tsconfig.csp-bundle-angular.json
new file mode 100644
index 000000000000..679456e580d5
--- /dev/null
+++ b/apps/demos/utils/server/tsconfig.csp-bundle-angular.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": false,
+    "strict": false,
+    "noImplicitAny": false,
+    "baseUrl": "../../",
+    "paths": {
+      "@angular/*": ["node_modules/@angular/*"],
+      "devextreme": ["../../packages/devextreme/artifacts/transpiled-esm-npm/cjs/index"],
+      "devextreme/*": ["../../packages/devextreme/artifacts/transpiled-esm-npm/cjs/*"],
+      "devextreme-dist/*": ["../../packages/devextreme/artifacts/*"],
+      "globalize/*": ["../../node_modules/globalize/dist/globalize/*"],
+      "anti-forgery": ["shared/anti-forgery/fetch-override.js"]
+    },
+    "types": []
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "full",
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictTemplates": false,
+    "strictInjectionParameters": false,
+    "fullTemplateTypeCheck": false,
+    "strictInputTypes": false,
+    "strictInputAccessModifiers": false,
+    "strictNullInputTypes": false,
+    "strictAttributeTypes": false,
+    "strictSafeNavigationTypes": false,
+    "strictDomLocalRefTypes": false,
+    "strictOutputEventTypes": false,
+    "strictDomEventTypes": false,
+    "strictContextGenerics": false,
+    "strictLiteralTypes": false
+  },
+  "files": [],
+  "include": []
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7f2ca9675a8..91413e734bf7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -395,7 +395,7 @@ importers:
     dependencies:
       '@angular-devkit/build-angular':
         specifier: ~21.1.0
-        version: 21.1.5(rm2xoa4cqfh6drpqdbzbfe4rte)
+        version: 21.1.5(ppcial3wykctvmpwaiidmjiddu)
       '@angular/animations':
         specifier: ~21.1.0
         version: 21.1.6(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.15.1))
@@ -409,8 +409,8 @@ importers:
         specifier: ~21.2.0
         version: 21.2.9
       '@angular/compiler-cli':
-        specifier: ~21.1.0
-        version: 21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3)
+        specifier: ~21.2.0
+        version: 21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3)
       '@angular/core':
         specifier: ~21.2.4
         version: 21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.15.1)
@@ -2381,7 +2381,7 @@ importers:
         version: 10.2.4
       ng-packagr:
         specifier: '>=19.0.0'
-        version: 21.2.3(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@4.9.5))(tslib@2.8.1)(typescript@4.9.5)
+        version: 21.2.3(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@4.9.5))(tslib@2.8.1)(typescript@4.9.5)
       normalize-path:
         specifier: 3.0.0
         version: 3.0.0
@@ -2869,13 +2869,13 @@ packages:
       typescript:
         optional: true
 
-  '@angular/compiler-cli@21.1.6':
-    resolution: {integrity: sha512-0JU2cBDMSB4hU4KwDS2ThrkGh+Njf8Yfm11CKR0NWbHGwW1xHa7whlcpUzX/USqL+FNGXQ75R0fOcZrT86YvrA==}
+  '@angular/compiler-cli@21.2.15':
+    resolution: {integrity: sha512-/MU7OA9d/e9P5SthR+N6JJObBmzcGsgNQaeQ2YfSUnU0lCRVQweTWwxLFDbfU6UX8MZFWB6pdI57zod8r5kXUw==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
-      '@angular/compiler': 21.1.6
-      typescript: '>=5.9 <6.0'
+      '@angular/compiler': 21.2.15
+      typescript: '>=5.9 <6.1'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -18366,14 +18366,14 @@ snapshots:
       - webpack-cli
       - yaml
 
-  '@angular-devkit/build-angular@21.1.5(rm2xoa4cqfh6drpqdbzbfe4rte)':
+  '@angular-devkit/build-angular@21.1.5(ppcial3wykctvmpwaiidmjiddu)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2101.5(chokidar@5.0.0)
       '@angular-devkit/build-webpack': 0.2101.5(chokidar@5.0.0)(webpack-dev-server@5.2.4(tslib@2.8.1)(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2)))(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2))
       '@angular-devkit/core': 21.1.5(chokidar@5.0.0)
-      '@angular/build': 21.1.5(vfnshjjpoh2gsy4vj4zufa55ji)
-      '@angular/compiler-cli': 21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3)
+      '@angular/build': 21.1.5(njcwhkboirhgdmrrwe46434yzq)
+      '@angular/compiler-cli': 21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3)
       '@babel/core': 7.28.5
       '@babel/generator': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
@@ -18384,7 +18384,7 @@ snapshots:
       '@babel/preset-env': 7.28.5(@babel/core@7.28.5)
       '@babel/runtime': 7.28.4
       '@discoveryjs/json-ext': 0.6.3
-      '@ngtools/webpack': 21.1.5(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3))(typescript@5.9.3)(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2))
+      '@ngtools/webpack': 21.1.5(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3))(typescript@5.9.3)(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2))
       ansi-colors: 4.1.3
       autoprefixer: 10.4.23(postcss@8.5.10)
       babel-loader: 10.0.0(@babel/core@7.28.5)(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2))
@@ -18431,7 +18431,7 @@ snapshots:
       esbuild: 0.27.2
       jest: 29.7.0(@types/node@20.19.37)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(@types/node@20.19.37)(typescript@5.9.3))
       karma: 6.4.4
-      ng-packagr: 21.2.3(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3))(tslib@2.8.1)(typescript@5.9.3)
+      ng-packagr: 21.2.3(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3))(tslib@2.8.1)(typescript@5.9.3)
     transitivePeerDependencies:
       - '@angular/compiler'
       - '@emnapi/core'
@@ -18706,12 +18706,12 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@21.1.5(vfnshjjpoh2gsy4vj4zufa55ji)':
+  '@angular/build@21.1.5(njcwhkboirhgdmrrwe46434yzq)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2101.5(chokidar@5.0.0)
       '@angular/compiler': 21.2.9
-      '@angular/compiler-cli': 21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3)
+      '@angular/compiler-cli': 21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3)
       '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-split-export-declaration': 7.24.7
@@ -18746,7 +18746,7 @@ snapshots:
       karma: 6.4.4
       less: 4.4.2
       lmdb: 3.4.4
-      ng-packagr: 21.2.3(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3))(tslib@2.8.1)(typescript@5.9.3)
+      ng-packagr: 21.2.3(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3))(tslib@2.8.1)(typescript@5.9.3)
       postcss: 8.5.10
     transitivePeerDependencies:
       - '@emnapi/core'
@@ -18902,15 +18902,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@4.9.5)':
+  '@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@4.9.5)':
     dependencies:
       '@angular/compiler': 21.2.9
-      '@babel/core': 7.28.5
+      '@babel/core': 7.29.0
       '@jridgewell/sourcemap-codec': 1.5.5
       chokidar: 5.0.0
       convert-source-map: 1.9.0
       reflect-metadata: 0.2.2
-      semver: 7.7.4
+      semver: 7.8.0
       tslib: 2.8.1
       yargs: 18.0.0
     optionalDependencies:
@@ -18918,15 +18918,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3)':
+  '@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3)':
     dependencies:
       '@angular/compiler': 21.2.9
-      '@babel/core': 7.28.5
+      '@babel/core': 7.29.0
       '@jridgewell/sourcemap-codec': 1.5.5
       chokidar: 5.0.0
       convert-source-map: 1.9.0
       reflect-metadata: 0.2.2
-      semver: 7.7.4
+      semver: 7.8.0
       tslib: 2.8.1
       yargs: 18.0.0
     optionalDependencies:
@@ -23485,9 +23485,9 @@ snapshots:
       typescript: 5.8.3
       webpack: 5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.28.0)
 
-  '@ngtools/webpack@21.1.5(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3))(typescript@5.9.3)(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2))':
+  '@ngtools/webpack@21.1.5(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3))(typescript@5.9.3)(webpack@5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.27.2))':
     dependencies:
-      '@angular/compiler-cli': 21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3)
+      '@angular/compiler-cli': 21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3)
       typescript: 5.9.3
       webpack: 5.105.0(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.25.0)
 
@@ -35875,10 +35875,10 @@ snapshots:
     optionalDependencies:
       rollup: 4.59.0
 
-  ng-packagr@21.2.3(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@4.9.5))(tslib@2.8.1)(typescript@4.9.5):
+  ng-packagr@21.2.3(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@4.9.5))(tslib@2.8.1)(typescript@4.9.5):
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@angular/compiler-cli': 21.1.6(@angular/compiler@21.2.9)(typescript@4.9.5)
+      '@angular/compiler-cli': 21.2.15(@angular/compiler@21.2.9)(typescript@4.9.5)
       '@rollup/plugin-json': 6.1.0(rollup@4.59.0)
       '@rollup/wasm-node': 4.60.2
       ajv: 8.18.0
@@ -35904,10 +35904,10 @@ snapshots:
     optionalDependencies:
       rollup: 4.59.0
 
-  ng-packagr@21.2.3(@angular/compiler-cli@21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3))(tslib@2.8.1)(typescript@5.9.3):
+  ng-packagr@21.2.3(@angular/compiler-cli@21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3))(tslib@2.8.1)(typescript@5.9.3):
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@angular/compiler-cli': 21.1.6(@angular/compiler@21.2.9)(typescript@5.9.3)
+      '@angular/compiler-cli': 21.2.15(@angular/compiler@21.2.9)(typescript@5.9.3)
       '@rollup/plugin-json': 6.1.0(rollup@4.59.0)
       '@rollup/wasm-node': 4.60.2
       ajv: 8.18.0