diff --git a/.env.example b/.env.example
index 56b55dbade..c5a3a49171 100644
--- a/.env.example
+++ b/.env.example
@@ -8,6 +8,6 @@
 # Absolute path to the root of the docs source repository.
 # This directory must contain en/components/toc.yml and en/components/*.md
 #
-# Windows example:   DOCS_SOURCE_PATH=C:/Repos/docs/igniteui-docfx
-# macOS/Linux:       DOCS_SOURCE_PATH=/home/user/repos/igniteui-docfx
+# Windows example:   DOCS_SOURCE_PATH=C:/Repos/docs/my-docs-source
+# macOS/Linux:       DOCS_SOURCE_PATH=/home/user/repos/my-docs-source
 DOCS_SOURCE_PATH=
diff --git a/astro.config.ts b/astro.config.ts
index 636cc04321..c8530eefcf 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -1,132 +1,17 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import { buildSidebarFromToc, siteMetaIntegration } from './src/integration';
-import { getPlatformHead } from './src/platform';
-import path from 'node:path';
-import { loadEnv } from 'vite';
-
-// Load .env into process.env — Vite/Astro does this for the browser bundle
-// but NOT for astro.config.ts itself, so we do it explicitly here.
-const env = loadEnv('', process.cwd(), '');
-Object.assign(process.env, env);
-
 // ---------------------------------------------------------------------------
-// Source paths — set via DOCS_SOURCE_PATH env var.
-// For local development copy .env.example to .env and set an absolute path:
-//   DOCS_SOURCE_PATH=C:/Repos/docs/igniteui-docfx   (Windows)
-//   DOCS_SOURCE_PATH=/home/user/repos/igniteui-docfx  (macOS/Linux)
+// Root astro.config.ts — NOT used for production builds.
+//
+// The actual docs sites are built via:
+//   docs/angular/astro.config.ts   → Angular docs
+//   docs/xplat/astro.config.ts     → React / Blazor / Web Components docs
+//
+// Both call createDocsSite() from src/integration.ts which assembles the
+// full Astro configuration (plugins, sidebar, head entries, etc.).
+//
+// This file exists only so Astro tooling (language server, CLI) has a
+// valid config when opened from the repo root.
 // ---------------------------------------------------------------------------
 
-if (!process.env.DOCS_SOURCE_PATH) {
-  throw new Error(
-    '[docs-template] DOCS_SOURCE_PATH env var is required. ' +
-    'Copy .env.example to .env and set an absolute path to the docs source repo root.'
-  );
-}
-
-const SOURCE_ROOT = path.resolve(process.env.DOCS_SOURCE_PATH);
-const COMPONENTS = path.join(SOURCE_ROOT, 'en/components');
-const TOC_PATH = path.join(SOURCE_ROOT, 'en/components/toc.yml');
-
-process.env.DOCS_SOURCE_PATH = COMPONENTS;
-
-const sidebar = buildSidebarFromToc({
-  tocPath: TOC_PATH,
-  docsDir: COMPONENTS,
-  exclude: [
-    /^grids_templates\//i,
-    /^style-guide\.md$/i,
-    /^themes\/sass\/presets\//i,
-    /^themes\.md$/i,
-  ],
-});
+import { defineConfig } from 'astro/config';
 
-// https://astro.build/config
-export default defineConfig({
-  site: 'localhost:4321',
-  trailingSlash: 'never',
-  compressHTML: true,
-  build: {
-    assets: '_assets',
-  },
-  vite: {
-    css: {
-      preprocessorOptions: {
-        scss: {
-          loadPaths: [path.join(process.cwd(), 'node_modules')],
-          silenceDeprecations: ['if-function'],
-        },
-      },
-    },
-  },
-  integrations: [
-    starlight({
-      title: 'Ignite UI for Angular',
-      logo: {
-        src: './public/favicon.svg',
-      },
-      social: [
-        { icon: 'github', label: 'GitHub', href: 'https://github.com/IgniteUI/igniteui-angular' },
-      ],
-      sidebar,
-      // Prepend the packaged theme entry so consuming projects get the theme.
-      customCss: [
-        './src/styles/ig-theme.scss',
-      ],
-      head: [
-        // Platform CDN assets — driven by platform below
-        ...getPlatformHead('angular', 'en'),
-        // Angular-specific Ignite UI component bundle (repo-specific, not in shared registry)
-        // { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://www.infragistics.com/products/ignite-ui-angular/angular/bundles/igniteui.f5cfb48022e69dd66658.css' } },
-        // highlight.js for code-tab syntax highlighting inside code-view widgets
-        { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css' } },
-        { tag: 'script', attrs: { src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js', defer: true } },
-      ],
-      editLink: {
-        baseUrl: 'https://github.com/IgniteUI/igniteui-docfx/edit/master/en/components/',
-      },
-      components: {
-        PageFrame: './src/components/overrides/CustomPageFrame.astro',
-        Head: './src/components/overrides/Head.astro',
-        Header: './src/components/overrides/Header.astro',
-        Footer: './src/components/overrides/Footer.astro',
-        MobileTableOfContents: './src/components/overrides/MobileTableOfContents.astro',
-        Sidebar: './src/components/overrides/Sidebar/Sidebar.astro',
-        PageSidebar: './src/components/overrides/PageSidebar.astro',
-      },
-      expressiveCode: {
-        themes: ['dark-plus'],
-      }
-    }),
-    siteMetaIntegration({
-      title: 'Ignite UI for Angular',
-      platform: 'angular',
-      description:
-        'Complete reference documentation for Ignite UI for Angular — a Material-based ' +
-        'UI component library including Data Grid, Charts, Gauges, Calendars, and more.',
-      docsDir: COMPONENTS,
-      sidebar,
-      head: [
-        ...getPlatformHead('angular', 'en'),
-        { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css' } },
-        { tag: 'script', attrs: { src: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js', defer: true } },
-      ],
-      productLinks: [
-        { label: 'Angular',        href: '#', platform: 'angular' },
-        { label: 'React',          href: '#', platform: 'react' },
-        { label: 'Blazor',         href: '#', platform: 'blazor' },
-        { label: 'Web Components', href: '#', platform: 'web-components' },
-      ],
-    }),
-    mdx(),
-    staticImagesIntegration(IMAGES),
-  ],
-  markdown: {
-    remarkPlugins: [
-      (await import('./src/plugins/remark-docfx')).remarkDocfx,
-    ],
-    rehypePlugins: [
-      (await import('./src/plugins/remark-docfx')).rehypeCodeView,
-    ],
-  },
-});
+export default defineConfig({});
diff --git a/docs/angular/astro.config.ts b/docs/angular/astro.config.ts
index c13b8885f5..7ad23c613f 100644
--- a/docs/angular/astro.config.ts
+++ b/docs/angular/astro.config.ts
@@ -74,9 +74,6 @@ export default createDocsSite({
 		docsDir: componentsDocsDir,
 	},
 	sidebar: { exclude: [/^internal\//] },
-	starlight: {
-		// logo: { src: './public/favicon.svg' },
-	},
 	integrations: [mdx()],
 	// Expose @/ alias so MDX files can import Sample.astro and peer components.
 	// @xplat-images resolves xplat-sourced MDX image imports to the angular images dir.
diff --git a/docs/angular/package.json b/docs/angular/package.json
index 9f396a5e3b..6e0eeb929f 100644
--- a/docs/angular/package.json
+++ b/docs/angular/package.json
@@ -3,9 +3,6 @@
   "type": "module",
   "version": "1.0.0",
   "scripts": {
-    "sync:en": "node scripts/sync-docfx.mjs --lang=en",
-    "sync:jp": "node scripts/sync-docfx.mjs --lang=jp",
-    "sync:kr": "node scripts/sync-docfx.mjs --lang=kr",
     "generate": "node scripts/generate.mjs",
     "generate:en": "node scripts/generate.mjs --lang=en",
     "generate:jp": "node scripts/generate.mjs --lang=jp",
@@ -40,7 +37,7 @@
   "dependencies": {
     "astro": "^6.1.6",
     "docs-template": "file:../../",
-    "igniteui-astro-components": "0.0.5",
+    "igniteui-astro-components": "0.0.8",
     "sharp": "^0.34.2"
   },
   "devDependencies": {
diff --git a/docs/angular/src/env.d.ts b/docs/angular/src/env.d.ts
index d072f07e4c..247311d29f 100644
--- a/docs/angular/src/env.d.ts
+++ b/docs/angular/src/env.d.ts
@@ -1,22 +1 @@
-declare module 'virtual:docs-template/site-meta' {
-	export const title: string;
-	export const description: string;
-	export const sidebar: { label: string; slug?: string; items?: unknown[] }[];
-	export const mode: 'dev' | 'staging' | 'prod';
-	export const trailingSlash: 'always' | 'never' | 'ignore';
-}
-
-declare module 'virtual:docs-template/nav-html' {
-	export const platform: 'igniteui' | 'angular' | 'react' | 'blazor' | 'web-components' | 'slingshot' | 'appbuilder' | null;
-	export const navLang: string;
-	export const prefetched: boolean;
-	export const headerHtml: string;
-	export const uiFooterHtml: string;
-	export const footerHtml: string;
-	export const abPrefetched: boolean;
-	export const abHeaderHtml: string;
-	export const abFooterHtml: string;
-	export const abFooterUtilsHtml: string;
-	export const abFooterCopyrightHtml: string;
-	export const abContactSalesHtml: string;
-}
\ No newline at end of file
+/// <reference path="../node_modules/docs-template/src/virtual-modules.d.ts" />
\ No newline at end of file
diff --git a/docs/xplat/astro.config.ts b/docs/xplat/astro.config.ts
index 87fe21a14b..75e6f9da98 100644
--- a/docs/xplat/astro.config.ts
+++ b/docs/xplat/astro.config.ts
@@ -354,9 +354,6 @@ export default createDocsSite({
             href: mode === 'production' ? `${PROD_HOST}${b}` : `${STAGING_HOST}${b}`,
             platform: key,
         })),
-    starlight: {
-        logo: { src: './public/favicon.svg' },
-    },
     integrations: [mdx()],
     vite: {
         plugins: [vitePluginPlatformTokens()],
diff --git a/docs/xplat/package.json b/docs/xplat/package.json
index 23757d3c3f..c73deec660 100644
--- a/docs/xplat/package.json
+++ b/docs/xplat/package.json
@@ -67,7 +67,7 @@
   "dependencies": {
     "astro": "^6.1.6",
     "docs-template": "file:../../",
-    "igniteui-astro-components": "0.0.5",
+    "igniteui-astro-components": "0.0.8",
     "sharp": "^0.34.2"
   },
   "devDependencies": {
diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx
index 800745f1fd..e70ff5ab60 100644
--- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx
@@ -922,11 +922,7 @@ $custom-theme: grid-theme(
 
 ### サンプル
 
-<code-view style="height:505px"
-           no-theming
-           data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-styling" >
-</code-view>
+<Sample src="/hierarchical-grid/hierarchical-grid-styling" height={505} alt="Hierarchical Grid Styling" />
 
 <DocsAside type="note" title="注">
 サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。
diff --git a/package-lock.json b/package-lock.json
index a1a3cfcf18..ff162d523c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@astrojs/check": "^0.9.8",
         "@astrojs/mdx": ">=5",
         "gray-matter": "^4.0.3",
-        "igniteui-astro-components": "0.0.5",
+        "igniteui-astro-components": "0.0.8",
         "js-yaml": "^4.1.1",
         "jsdom": "^29.0.1",
         "pagefind": "^1.5.2"
@@ -44,7 +44,7 @@
       "dependencies": {
         "astro": "^6.1.6",
         "docs-template": "file:../../",
-        "igniteui-astro-components": "0.0.5",
+        "igniteui-astro-components": "0.0.8",
         "sharp": "^0.34.2"
       },
       "devDependencies": {
@@ -79,7 +79,7 @@
       "dependencies": {
         "astro": "^6.1.6",
         "docs-template": "file:../../",
-        "igniteui-astro-components": "0.0.5",
+        "igniteui-astro-components": "0.0.8",
         "sharp": "^0.34.2"
       },
       "devDependencies": {
@@ -172,13 +172,13 @@
       }
     },
     "node_modules/@astrojs/language-server": {
-      "version": "2.16.8",
-      "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-2.16.8.tgz",
-      "integrity": "sha512-yg1pZF6hs9FaKr2fgXMOGbW7pDLgFexFjuhWilPAc8VybTU+WSnbfbhYaUL1exm6dAK4sM3aKXGcfVwss+HXbg==",
+      "version": "2.16.9",
+      "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-2.16.9.tgz",
+      "integrity": "sha512-L9kddTg+ZSO3X0Pwfx0ZPO+Z+eSSq0/39jXRyIkHzcBICzusdn2T464R4P6K0WcDZ6pMkLlFpuGS73u1pOnMSw==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^2.13.1",
-        "@astrojs/yaml2ts": "^0.2.3",
+        "@astrojs/yaml2ts": "^0.2.4",
         "@jridgewell/sourcemap-codec": "^1.5.5",
         "@volar/kit": "~2.4.28",
         "@volar/language-core": "~2.4.28",
@@ -297,14 +297,14 @@
       }
     },
     "node_modules/@astrojs/ts-plugin": {
-      "version": "1.10.8",
-      "resolved": "https://registry.npmjs.org/@astrojs/ts-plugin/-/ts-plugin-1.10.8.tgz",
-      "integrity": "sha512-fispa3VB/bRozjeLb8SqsnEWOIX8AIbDM9+yX2WTIhkIgO7axcstQYmfc6Oq0ZYRWQfLqdsW4CKxeClNcJ35tA==",
+      "version": "1.10.9",
+      "resolved": "https://registry.npmjs.org/@astrojs/ts-plugin/-/ts-plugin-1.10.9.tgz",
+      "integrity": "sha512-2pNc9EMXJcvYsmjQahYyqOiUNN9hMzgnxgIE/fZBLJAeOxPeOCSMa6BdngwV+bMgZDJcUSfC3qFt3+9abuUxtQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^2.13.1",
-        "@astrojs/yaml2ts": "^0.2.3",
+        "@astrojs/yaml2ts": "^0.2.4",
         "@jridgewell/sourcemap-codec": "^1.5.5",
         "@volar/language-core": "~2.4.28",
         "@volar/typescript": "~2.4.28",
@@ -313,12 +313,12 @@
       }
     },
     "node_modules/@astrojs/yaml2ts": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@astrojs/yaml2ts/-/yaml2ts-0.2.3.tgz",
-      "integrity": "sha512-PJzRmgQzUxI2uwpdX2lXSHtP4G8ocp24/t+bZyf5Fy0SZLSF9f9KXZoMlFM/XCGue+B0nH/2IZ7FpBYQATBsCg==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@astrojs/yaml2ts/-/yaml2ts-0.2.4.tgz",
+      "integrity": "sha512-8oddpOae35pJsXPQXhTkM0ypfKPskVsh2bCxRtbf7e+/Epw2nReakFYpLKjZMEr75CsoF203PMnCocpfz0s69A==",
       "license": "MIT",
       "dependencies": {
-        "yaml": "^2.8.2"
+        "yaml": "^2.8.3"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -2563,13 +2563,13 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.0.2.tgz",
-      "integrity": "sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.1.0.tgz",
+      "integrity": "sha512-jLJtSJeuFffqX6/inRE1zqU5aFv2hrszvYgq3OjbAgFRZiWv7abKMDdQzYxuSDfmUPQozZvI/kuy6VMTvnvqTQ==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/primitive": "4.0.2",
-        "@shikijs/types": "4.0.2",
+        "@shikijs/primitive": "4.1.0",
+        "@shikijs/types": "4.1.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4",
         "hast-util-to-html": "^9.0.5"
@@ -2579,26 +2579,26 @@
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.0.2.tgz",
-      "integrity": "sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.1.0.tgz",
+      "integrity": "sha512-YquhawCUgaBfhsS72e2Y/dI59gCBNPHu3fEO/tvLaXrTssxZrY5ddjtNLTwndrMgPo8b3IscE+xoICDzpTmlFQ==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.0.2",
+        "@shikijs/types": "4.1.0",
         "@shikijs/vscode-textmate": "^10.0.2",
-        "oniguruma-to-es": "^4.3.4"
+        "oniguruma-to-es": "^4.3.6"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.0.2.tgz",
-      "integrity": "sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.1.0.tgz",
+      "integrity": "sha512-axLpjVs45YBvvINa+dJF+NPW+KtFkNXsFr4SDw2BMj9GdeMnGxVB9PQb2xXlJYovslt/nz6giedAyOANkfc7hg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.0.2",
+        "@shikijs/types": "4.1.0",
         "@shikijs/vscode-textmate": "^10.0.2"
       },
       "engines": {
@@ -2606,24 +2606,24 @@
       }
     },
     "node_modules/@shikijs/langs": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.0.2.tgz",
-      "integrity": "sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.1.0.tgz",
+      "integrity": "sha512-nwOMruEkbgdZfQ/b8CgpNBVOpvG1k0N5tbmgiFeqsan401+x3ILqlzZJowSla4Agmq4hG2Uf2wh5jLTEhR8VSg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.0.2"
+        "@shikijs/types": "4.1.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/primitive": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.0.2.tgz",
-      "integrity": "sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.1.0.tgz",
+      "integrity": "sha512-zx2/2Uwj2q9X3KSyYREEhXO23xBw5WUhP4orK2lE4r+t9JGITmEe0JH+wPmJhqHpOT2bRRs6lAL945+LDvOAGw==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.0.2",
+        "@shikijs/types": "4.1.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4"
       },
@@ -2632,21 +2632,21 @@
       }
     },
     "node_modules/@shikijs/themes": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.0.2.tgz",
-      "integrity": "sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.1.0.tgz",
+      "integrity": "sha512-emCcTnUM7yO2wltYbaxm+yLvcCI4+h8XBKc4KmJ7EZUXoSGjcCHifkI//R4OFit9ewpg7H2/9tjOuXrT2v/Knw==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.0.2"
+        "@shikijs/types": "4.1.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.0.2.tgz",
-      "integrity": "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.1.0.tgz",
+      "integrity": "sha512-3EQWX54fMpniOrDblzAhiwiJwpiTMW6+B9DWyUd9ska483tbayFYuw47UxwuPknI31bKnySfVQ/QW+jFL4rFdA==",
       "license": "MIT",
       "dependencies": {
         "@shikijs/vscode-textmate": "^10.0.2",
@@ -2739,9 +2739,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "25.8.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.8.0.tgz",
-      "integrity": "sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ==",
+      "version": "25.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.0.tgz",
+      "integrity": "sha512-AOQwYUNolgy3VosiRqXrACUXTN8nJUtPl7FJXMqZVyxiiCLhQuG3jXKvCS1ALr+Y2OmZhzzLVlYPEqJaiqkaJQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3047,9 +3047,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.3.tgz",
-      "integrity": "sha512-wvLIZQYbBZt6U8gyflBW4SLBypaqdwLZUH93rT3oT53cmQ0bTGubvMAGjqBRoheOYzYcTJZtW6czztzbu4kQ5g==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.5.tgz",
+      "integrity": "sha512-gU+4KedkbTuVgz7YoVAN+9Ftnq0GaYwejxK2NbqDzB0M9dWd0f3kXZBuaM9hzbchRFoRAJfJjFtdX9LK6Ir7ZA==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^4.0.0",
@@ -4265,9 +4265,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/fast-wrap-ansi": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.0.tgz",
-      "integrity": "sha512-rLV8JHxTyhVmFYhBJuMujcrHqOT2cnO5Zxj37qROj23CP39GXubJRBUFF0z8KFK77Uc0SukZUf7JZhsVEQ6n8w==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.2.tgz",
+      "integrity": "sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==",
       "license": "MIT",
       "dependencies": {
         "fast-string-width": "^3.0.2"
@@ -4839,9 +4839,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.12.18",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.18.tgz",
-      "integrity": "sha512-RWzP96k/yv0PQfyXnWjs6zot20TqfpfsNXhOnev8d1InAxubW93L11/oNUc3tQqn2G0bSdAOBpX+2uDFHV7kdQ==",
+      "version": "4.12.21",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.21.tgz",
+      "integrity": "sha512-uV63apnb0kyPtAUwoWgaGh9HyIFcv8lgmzPZSiTBQAFOFGIzka5EZ1dZocmGnn0XdX0+XTqJ6Tqv7selMuGLRQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4921,9 +4921,9 @@
       }
     },
     "node_modules/igniteui-astro-components": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/igniteui-astro-components/-/igniteui-astro-components-0.0.5.tgz",
-      "integrity": "sha512-w3F4Pl0UkJBUIQFP/0PlEj6sfBUg2Yyt1sJpczc9w+l3ErteLl2IqPKTdKV7FHEqUmXfZoczn/AT+lVMmn2WiA==",
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/igniteui-astro-components/-/igniteui-astro-components-0.0.8.tgz",
+      "integrity": "sha512-mJtRQaBIU4wGPpsbcWjtbhGSDXUJD2hMKLC4XvSL/sRqcXbRK3y6vFXTZ1XwMULgyB31hi9tVEsO10TYGdtyJw==",
       "license": "MIT",
       "workspaces": [
         "playground"
@@ -4932,7 +4932,6 @@
         "@fontsource-variable/instrument-sans": "^5.2.8",
         "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "igniteui-webcomponents": "^7.1.3",
-        "js-yaml": "^4.1.0",
         "jsdom": "^29.0.1"
       },
       "engines": {
@@ -5860,9 +5859,9 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "11.3.6",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.6.tgz",
-      "integrity": "sha512-Gf/KoL3C/MlI7Bt0PGI9I+TeTC/I6r/csU58N4BSNc4lppLBeKsOdFYkK+dX0ABDUMJNfCHTyPpzwwO21Awd3A==",
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.4.0.tgz",
+      "integrity": "sha512-W+R+kFL4HgVxONq2bhXPi3bGpzGe/yEhVOp233qw9wCRtgncJ15P3bC+e4zZMu4Cq7d+WAJjXGW0uUkifhcatA==",
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": "20 || >=22"
@@ -7212,9 +7211,9 @@
       }
     },
     "node_modules/p-queue": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-9.2.0.tgz",
-      "integrity": "sha512-dWgLE8AH0HjQ9fe74pUkKkvzzYT18Inp4zra3lKHnnwqGvcfcUBrvF2EAVX+envufDNBOzpPq/IBUONDbI7+3g==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-9.3.0.tgz",
+      "integrity": "sha512-7NED7xhQ74Ngp4JP/2e0VZHp7vSWfJfqeiR92jPgxsz6m0Se4P03YoTKa9dDXyZ3r6P616gUXttrB6nnHYKang==",
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "^5.0.4",
@@ -7391,9 +7390,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
-      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -7410,7 +7409,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -7476,9 +7475,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
+      "version": "6.15.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
+      "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -8503,17 +8502,17 @@
       }
     },
     "node_modules/shiki": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.0.2.tgz",
-      "integrity": "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.1.0.tgz",
+      "integrity": "sha512-l/ABZPUR5v70jI10EzqfMS/I96vjSGv2y0ihUV+WYFzv0EfvW4s54m0Lg8wCrrL+2IkwBzFTuxkZjPf8b2NX9Q==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "4.0.2",
-        "@shikijs/engine-javascript": "4.0.2",
-        "@shikijs/engine-oniguruma": "4.0.2",
-        "@shikijs/langs": "4.0.2",
-        "@shikijs/themes": "4.0.2",
-        "@shikijs/types": "4.0.2",
+        "@shikijs/core": "4.1.0",
+        "@shikijs/engine-javascript": "4.1.0",
+        "@shikijs/engine-oniguruma": "4.1.0",
+        "@shikijs/langs": "4.1.0",
+        "@shikijs/themes": "4.1.0",
+        "@shikijs/types": "4.1.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4"
       },
diff --git a/package.json b/package.json
index 6dfcad5256..0476e67f5d 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "@astrojs/check": "^0.9.8",
     "@astrojs/mdx": ">=5",
     "gray-matter": "^4.0.3",
-    "igniteui-astro-components": "0.0.5",
+    "igniteui-astro-components": "0.0.8",
     "js-yaml": "^4.1.1",
     "jsdom": "^29.0.1",
     "pagefind": "^1.5.2"
diff --git a/src/components/ThemingWidget.astro b/src/components/ThemingWidget.astro
index 8549120fa5..5bfca0dfbd 100644
--- a/src/components/ThemingWidget.astro
+++ b/src/components/ThemingWidget.astro
@@ -2,15 +2,11 @@
 /**
  * ThemingWidget
  *
- * Renders the `<igniteui-theming-widget>` web component. Mirrors the
- * behaviour from igniteui-docfx-template:
- *   template/partials/themeselect*.tmpl.partial
- *   src/app/handlers/theming.ts
+ * Renders the `<igniteui-theming-widget>` web component.
  *
  * Behaviour:
  *   - `themeApiUrl` and `widgetVersion` are resolved from environment.json at
- *     build time via the `virtual:docs-template/nav-html` virtual module
- *     (same step as the header/footer prefetch in siteMetaIntegration).
+ *     build time via the `virtual:docs-template/nav-html` virtual module.
  *   - Renders nothing when `themeApiUrl` is unavailable.
  *   - The widget container starts hidden and is revealed client-side only
  *     when at least one themeable `<iframe>` is found on the page.
@@ -87,9 +83,9 @@ const lang = language === 'jp' ? 'ja' : undefined;
     }
 
     // ── Replay theme into a newly loaded iframe ──────────────────────────────
-    // Mirrors docfx's onSampleIframeContentLoaded: when an iframe finishes
-    // loading we immediately push the persisted themeStyle into it so samples
-    // that loaded after a theme was already selected pick it up.
+    // When an iframe finishes loading we immediately push the persisted
+    // themeStyle into it so samples that loaded after a theme was already
+    // selected pick it up.
     function onIframeLoad(e: Event) {
       const iframe = e.target as HTMLIFrameElement;
       if (iframe.classList.contains('no-theming')) return;
diff --git a/src/content.config.ts b/src/content.config.ts
index 9381a24c26..b7b72b449e 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -5,7 +5,7 @@ import { z } from 'astro/zod';
 import { createDocsCollection } from './content-helper.ts';
 
 // TODO: remove these template-specific exclusions once the source repos add
-// proper Starlight frontmatter to these files (no `title` → fail schema).
+// proper frontmatter to these files (no `title` → fail schema).
 export const collections = {
   docs: createDocsCollection(process.env.DOCS_SOURCE_PATH, {
     exclude: [
diff --git a/src/integration.ts b/src/integration.ts
index 1c5422061a..36073e03c4 100644
--- a/src/integration.ts
+++ b/src/integration.ts
@@ -1,7 +1,7 @@
 /**
  * integration.ts
  *
- * Shared configuration helpers for Astro + Starlight docs sites.
+ * Shared configuration helpers for Astro docs sites.
  * All functions are independently usable; `createDocsSite` is the
  * convenience wrapper that composes them all.
  *
@@ -13,7 +13,7 @@
  *     site:  'https://my-org.github.io/my-docs',
  *     title: 'My Library',
  *     description: 'Reference docs for My Library.',
- *     platform: 'angular',   // drives CDN head entries + nav prefetch
+ *     platform: 'angular',   // drives CDN head entries
  *     navLang: 'en',         // 'en' | 'jp' | 'kr'
  *     source: {
  *       tocPath:  './my-docs/toc.yml',
@@ -23,10 +23,6 @@
  *     head: [                                   // extra <head> entries after platform ones
  *       { tag: 'link', attrs: { rel: 'stylesheet', href: '...' } },
  *     ],
- *     // Extra Starlight options (logo, social, editLink, customCss, …)
- *     starlight: {
- *       logo: { src: './public/favicon.svg' },
- *     },
  *     // Extra Astro options (markdown, image, build, …)
  *     markdown: { remarkPlugins: [] },
  *   });
@@ -40,7 +36,6 @@
  *   export default defineConfig({
  *     integrations: [
  *       siteMetaIntegration({ title: 'My Library', description: 'Reference docs.' }),
- *       starlight({ sidebar }),
  *     ],
  *   });
  *
@@ -62,21 +57,19 @@ import {
     type LlmsMeta, type LlmsSet, type SidebarItem,
 } from './llms.ts';
 import { buildSidebarFromToc } from './sidebar';
-import { getNavConfig, getPlatformHead } from './platform';
+import { getPlatformHead } from './platform';
 import type { HeadEntry, PlatformKey, NavLang } from './platform.ts';
-import { JSDOM } from 'jsdom';
-import { remarkDocfx, rehypeCodeView } from './plugins/remark-docfx';
+import { remarkEnvVars } from './plugins/remark-env-vars';
+import { remarkMdLinks } from './plugins/remark-md-links';
+import { remarkHtmlTransforms } from './plugins/remark-html-transforms';
 
 /** Build / deployment mode. Drives env-var `DOCS_BUILD_MODE`. */
 export type DocsMode = 'development' | 'staging' | 'production';
 
-/** Module-level cache so the nav URL is fetched at most once per build. */
-let _navHtmlCache: string | null = null;
-
 /**
  * Read `themeApiUrl` and `themingWidgetVersion` from the project's
- * environment.json at build time. Mirrors the lookup order in remark-docfx.ts
- * so both always resolve from the same file.
+ * environment.json at build time. Uses the same lookup order as the
+ * remark plugin so both always resolve from the same file.
  */
 function readThemingEnv(sourcePath: string | undefined, envKey: string): {
     themeApiUrl: string;
@@ -105,80 +98,6 @@ function readThemingEnv(sourcePath: string | undefined, envKey: string): {
     }
 }
 
-/**
- * Strip all <script> tags from an HTML string.
- * The nav HTML fetched from infragistics.com / appbuilder.dev may contain
- * inline or external scripts that don't belong in the docs page (e.g.
- * staging.appbuilder.dev references in the IG nav).  Platform-specific
- * scripts are already injected cleanly via getPlatformHead().
- */
-function stripScripts(html: string): string {
-    const dom = new JSDOM(html);
-    const { document } = dom.window;
-
-    document.querySelectorAll('script').forEach((el) => {
-        el.remove();
-    });
-
-    return document.body.innerHTML;
-}
-
-/**
- * Rewrite root-relative href/src/action attributes in nav HTML to absolute
- * URLs using the given base origin (e.g. 'https://www.infragistics.com').
- *
- * Without this, links like href="/products/ignite-ui" resolve against the
- * local dev-server origin and Astro's client-side router intercepts them,
- * logging 404 warnings for every nav-bar link the user hovers or clicks.
- */
-function absolutifyNavUrls(html: string, baseOrigin: string): string {
-    return html
-        .replace(/(href|src|action)="(\/)([^"]*)"/g, `$1="${baseOrigin}/$3"`)
-        .replace(/(href|src|action)='(\/)([^']*)'/g, `$1='${baseOrigin}/$3'`);
-}
-
-/**
- * Nesting-aware outer-HTML extractor.
- * Finds the first tag whose opening tag matches `openPattern` and returns
- * the complete element including its closing tag.
- *
- * @param html - Full HTML string to search.
- * @param openPattern - Regex source for the opening tag (no flags).
- */
-function extractOuterHtml(html: string, openPattern: string): string {
-    const openRe = new RegExp(openPattern, 'i');
-    const tagRe = /<\/?([a-z][a-z0-9]*)[^>]*>/gi;
-
-    let tagName: string | null = null;
-    let depth = 0;
-    let startIdx = -1;
-
-    let m: RegExpExecArray | null;
-    while ((m = tagRe.exec(html)) !== null) {
-        const full = m[0];
-        const name = m[1].toLowerCase();
-        const isSelfClose = full.endsWith('/>');
-        const isClose = full.startsWith('</');
-
-        if (tagName === null) {
-            if (openRe.test(full)) {
-                tagName = name;
-                startIdx = m.index;
-                depth = isSelfClose ? 0 : 1;
-                if (depth === 0) return full;
-            }
-            continue;
-        }
-
-        if (name !== tagName) continue;
-        if (isSelfClose) continue;
-        if (isClose) { depth--; if (depth === 0) return html.slice(startIdx, tagRe.lastIndex); }
-        else depth++;
-    }
-
-    return '';
-}
-
 // ---------------------------------------------------------------------------
 // Site meta virtual module
 // ---------------------------------------------------------------------------
@@ -214,10 +133,6 @@ export interface SiteMetaOptions {
      * module and rendered by `MainLayout.astro`.
      */
     head?: HeadEntry[];
-    /** @deprecated Use `platform` instead. */
-    prefetchNav?: boolean;
-    /** @deprecated Use `platform: 'appbuilder'` instead. */
-    prefetchAppBuilderNav?: boolean;
 }
 
 /**
@@ -259,8 +174,6 @@ export function siteMetaIntegration({
     llmsSets = [],
     productLinks = [],
     head = [],
-    prefetchNav = false,
-    prefetchAppBuilderNav = false,
 }: SiteMetaOptions = {} as SiteMetaOptions): AstroIntegration {
     const llmsMetaMap = docsDir
         ? buildLlmsMetaMap(docsDir, sidebar ?? [])
@@ -272,17 +185,8 @@ export function siteMetaIntegration({
     const navVirtualId = 'virtual:docs-template/nav-html';
     const navResolvedId = '\0' + navVirtualId;
 
-    // Resolve effective platform: explicit `platform` option wins; fall back to
-    // deprecated boolean flags for backwards compatibility.
-    const effectivePlatform: PlatformKey | null =
-        platform ??
-        (prefetchAppBuilderNav ? 'appbuilder' : null) ??
-        (prefetchNav ? 'angular' : null);
-
-    const { navType, navUrl } = getNavConfig(effectivePlatform, navLang);
-
     // Navigation buckets for this platform — stripped from ancestor paths during label generation.
-    const broadSections = getBroadSectionsForPlatform(effectivePlatform);
+    const broadSections = getBroadSectionsForPlatform(platform ?? null);
     // Captured from astro:config:done; used to generate llms.txt content.
     let configuredSite = '';
     let configuredTrailingSlash: string = 'ignore';
@@ -340,18 +244,16 @@ export function siteMetaIntegration({
                                 if (id === virtualId) return resolvedId;
                                 if (id === navVirtualId) return navResolvedId;
                             },
-                            async load(id: string) {
+                            load(id: string) {
                                 if (id === resolvedId) return `export const title = ${JSON.stringify(title)};
 export const sidebar = ${JSON.stringify(sidebar ?? [])};
 export const productLinks = ${JSON.stringify(productLinks)};
 export const headEntries = ${JSON.stringify(head ?? [])};
 export const trailingSlash = ${JSON.stringify(configuredTrailingSlash)};
+export const navLang = ${JSON.stringify(navLang)};
 `;
                                 if (id !== navResolvedId) return;
 
-                                // Return cached module code — fetched at most once per build.
-                                if (_navHtmlCache) return _navHtmlCache;
-
                                 // ── Theming env ──────────────────────────────────────────────
                                 const envKey = process.env.DOCS_ENV ?? process.env.NODE_ENV ?? 'production';
                                 const { themeApiUrl, widgetVersion } = readThemingEnv(process.env.DOCS_SOURCE_PATH, envKey);
@@ -359,93 +261,11 @@ export const trailingSlash = ${JSON.stringify(configuredTrailingSlash)};
                                     ? `https://cdn-na.infragistics.com/igniteui/theming-widget/${widgetVersion}/igniteui-theming-widget.js`
                                     : '';
 
-                                let headerHtml = '';
-                                let uiFooterHtml = '';
-                                let footerHtml = '';
-
-                                // ── IG nav prefetch ──────────────────────────────────────────
-                                if (navType === 'infragistics' && navUrl) {
-                                    try {
-                                        const res = await fetch(navUrl, {
-                                            credentials: 'omit',
-                                            signal: AbortSignal.timeout(15_000),
-                                        });
-                                        if (res.ok) {
-                                            const html = await res.text();
-                                            const igBase = navLang === 'jp' ? 'https://jp.infragistics.com' : 'https://www.infragistics.com';
-                                            headerHtml = absolutifyNavUrls(stripScripts(extractOuterHtml(html, '<header[^>]+id="header"')), igBase);
-                                            uiFooterHtml = absolutifyNavUrls(stripScripts(extractOuterHtml(html, '<footer[^>]+class="[^"]*\\bui-footer\\b')), igBase);
-                                            footerHtml = absolutifyNavUrls(stripScripts(extractOuterHtml(html, '<footer[^>]+id="footer"')), igBase);
-                                            // Strip the hello-bar promotional strip
-                                            headerHtml = headerHtml.replace(
-                                                /<div[^>]+id="hello-bar"[\s\S]*?<\/div>\s*/i, ''
-                                            );
-                                        } else {
-                                            console.warn(`[docs-template] Navigation fetch returned ${res.status} — falling back to empty markup.`);
-                                        }
-                                    } catch (err: unknown) {
-                                        console.warn(`[docs-template] Could not fetch navigation HTML: ${(err as Error).message} — falling back to empty markup.`);
-                                    }
-                                }
-
-                                // ── AppBuilder nav prefetch ──────────────────────────────────
-                                let abHeaderHtml = '';
-                                let abFooterHtml = '';
-                                let abFooterUtilsHtml = '';
-                                let abFooterCopyrightHtml = '';
-                                let abContactSalesHtml = '';
-
-                                if (navType === 'appbuilder' && navUrl) {
-                                    try {
-                                        const abRes = await fetch(navUrl, {
-                                            credentials: 'omit',
-                                            signal: AbortSignal.timeout(15_000),
-                                        });
-                                        if (abRes.ok) {
-                                            const abRaw = await abRes.text();
-                                            // Endpoint may return JSON { header, footer } or a full HTML page.
-                                            let parsed = false;
-                                            try {
-                                                const data = JSON.parse(abRaw) as { header?: string; footer?: string };
-                                                if (data.header || data.footer) {
-                                                    abHeaderHtml = data.header ?? '';
-                                                    abFooterHtml = data.footer ?? '';
-                                                    parsed = true;
-                                                }
-                                            } catch { /* not JSON — fall through to HTML extraction */ }
-
-                                            if (!parsed) {
-                                                abHeaderHtml = extractOuterHtml(abRaw, '<header');
-                                                abFooterHtml = extractOuterHtml(abRaw, '<footer');
-                                                abFooterUtilsHtml = extractOuterHtml(abRaw, '<[a-z][a-z0-9]*[^>]+class="[^"]*\\bfooter-utils\\b');
-                                                abFooterCopyrightHtml = extractOuterHtml(abRaw, '<[a-z][a-z0-9]*[^>]+class="[^"]*\\bfooter-copyright\\b');
-                                                abContactSalesHtml = extractOuterHtml(abRaw, '<[a-z][a-z0-9]*[^>]+id="contactSales"');
-                                            }
-                                        } else {
-                                            console.warn(`[docs-template] AppBuilder nav fetch returned ${abRes.status} — falling back to runtime loading.`);
-                                        }
-                                    } catch (err: unknown) {
-                                        console.warn(`[docs-template] Could not prefetch AppBuilder navigation: ${(err as Error).message} — falling back to runtime loading.`);
-                                    }
-                                }
-
-                                _navHtmlCache = [
-                                    `export const platform = ${JSON.stringify(effectivePlatform ?? null)};`,
-                                    `export const navLang = ${JSON.stringify(navLang)};`,
+                                return [
+                                    `export const platform = ${JSON.stringify(platform ?? null)};`,
                                     `export const themeApiUrl = ${JSON.stringify(themeApiUrl)};`,
                                     `export const widgetScriptSrc = ${JSON.stringify(widgetScriptSrc)};`,
-                                    `export const prefetched = ${JSON.stringify(!!headerHtml)};`,
-                                    `export const headerHtml = ${JSON.stringify(headerHtml)};`,
-                                    `export const uiFooterHtml = ${JSON.stringify(uiFooterHtml)};`,
-                                    `export const footerHtml = ${JSON.stringify(footerHtml)};`,
-                                    `export const abPrefetched = ${JSON.stringify(!!abHeaderHtml)};`,
-                                    `export const abHeaderHtml = ${JSON.stringify(abHeaderHtml)};`,
-                                    `export const abFooterHtml = ${JSON.stringify(abFooterHtml)};`,
-                                    `export const abFooterUtilsHtml = ${JSON.stringify(abFooterUtilsHtml)};`,
-                                    `export const abFooterCopyrightHtml = ${JSON.stringify(abFooterCopyrightHtml)};`,
-                                    `export const abContactSalesHtml = ${JSON.stringify(abContactSalesHtml)};`,
                                 ].join('\n');
-                                return _navHtmlCache;
                             },
                         }],
                     },
@@ -662,11 +482,10 @@ export interface CreateDocsSiteOptions {
         exclude?: RegExp[];
     };
     /**
-     * Platform identifier. Drives CDN styles/scripts injected into `<head>`
-     * and the build-time nav prefetch endpoint.
+     * Platform identifier. Drives CDN styles/scripts injected into `<head>`.
      */
     platform?: PlatformKey | null;
-    /** Locale for the nav prefetch URL. */
+    /** Locale for the nav bar. */
     navLang?: NavLang;
     /**
      * Extra `<head>` entries appended after the platform entries.
@@ -691,17 +510,12 @@ export interface CreateDocsSiteOptions {
     productLinks?: ProductLink[];
     /** Extra Astro integrations appended after the built-in ones. */
     integrations?: AstroIntegration[];
-    /**
-     * @deprecated Starlight has been removed. This option is ignored.
-     * Use `head` for extra head entries and `integrations` for extra integrations.
-     */
-    starlight?: Record<string, unknown>;
     /** Any remaining keys are spread into `defineConfig` (markdown, image, build, …). */
     [key: string]: unknown;
 }
 
 /**
- * Creates a complete Astro config for a standard Starlight docs site.
+ * Creates a complete Astro config for a docs site.
  *
  * All individual helpers (`buildSidebarFromToc`, `siteMetaIntegration`)
  * remain independently importable for cases that need finer control.
@@ -740,7 +554,7 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs
     if (!process.env.DOCS_ENV) {
         process.env.DOCS_ENV = mode;
     }
-    // Expose the platform so remark-docfx can set data-platform on widgets it generates.
+    // Expose the platform so the remark plugin can set data-platform on widgets it generates.
     if (platform) {
         process.env.DOCS_PLATFORM = platform;
     }
@@ -801,11 +615,12 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs
         markdown: {
             ...(astroExtra as any).markdown,
             remarkPlugins: [
-                remarkDocfx,
+                remarkEnvVars,
+                remarkMdLinks,
+                remarkHtmlTransforms,
                 ...((astroExtra as any).markdown?.remarkPlugins ?? []),
             ],
             rehypePlugins: [
-                rehypeCodeView,
                 ...((astroExtra as any).markdown?.rehypePlugins ?? []),
             ],
         },
diff --git a/src/lib/sidebar/types.ts b/src/lib/sidebar/types.ts
index 9a8e238c2e..5f06eacfa5 100644
--- a/src/lib/sidebar/types.ts
+++ b/src/lib/sidebar/types.ts
@@ -1,36 +1,15 @@
 /**
- * Sidebar data types — shared between the build-time TOC builder
- * (`src/sidebar.ts`) and the runtime sidebar components
- * (`src/components/sidebar/*`).
+ * Sidebar data types — re-exported from `igniteui-astro-components` so the
+ * producer (this repo's `buildSidebarFromToc`) and consumer (the package's
+ * `DocsSidebar` renderer) always agree on the shape.
  *
- * Single source of truth, no duplication.
+ * Do not duplicate these types locally; keep this file as a thin re-export.
  */
 
-export type SidebarBadgeVariant =
-  | 'note'
-  | 'danger'
-  | 'success'
-  | 'caution'
-  | 'tip'
-  | 'default';
-
-export interface SidebarBadge {
-  text: string;
-  variant: SidebarBadgeVariant;
-}
-
-export interface SidebarLink {
-  label: string;
-  slug: string;
-  badge?: SidebarBadge;
-  attrs?: Record<string, string | number | boolean | undefined>;
-}
-
-export interface SidebarGroup {
-  label: string;
-  items: SidebarEntry[];
-  /** When `true`, the group is rendered closed by default. Defaults to open. */
-  collapsed?: boolean;
-}
-
-export type SidebarEntry = SidebarLink | SidebarGroup;
+export type {
+  SidebarEntry,
+  SidebarGroup,
+  SidebarLink,
+  SidebarBadge,
+  SidebarBadgeVariant,
+} from 'igniteui-astro-components/lib/sidebar/types';
diff --git a/src/platform.ts b/src/platform.ts
index 87f53e2f13..7de95e56e1 100644
--- a/src/platform.ts
+++ b/src/platform.ts
@@ -2,30 +2,24 @@
  * platform.ts
  *
  * Central registry of per-platform CDN assets (styles / scripts) and nav
- * endpoint configuration, ported from igniteui-docfx-template:
- *   - template/partials/head.tmpl.partial    (styles + AppBuilder init script)
- *   - template/partials/scripts.tmpl.partial (scripts per platform)
- *   - template/conceptual.html.primary.js   (platform flag derivation)
+ * endpoint configuration.
  *
  * Usage from astro.config.ts:
  *   import { getPlatformHead } from './src/platform.ts';
- *   // inside starlight({ head: getPlatformHead('angular', 'en') })
+ *   // inside createDocsSite({ head: getPlatformHead('angular', 'en') })
  *
- * Usage from integration.ts:
- *   import { getNavConfig } from './platform.ts';
- *   const { navType, navUrl } = getNavConfig(platform, navLang);
  */
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-/** HTML tag names accepted by Starlight's `head` array. */
+/** HTML tag names accepted by the `head` array. */
 export type HeadTag =
     | 'title' | 'link' | 'style' | 'base'
     | 'meta' | 'script' | 'noscript' | 'template';
 
-/** Single entry in Starlight's `head` array — tag, attrs, optional content. */
+/** Single entry in the `head` array — tag, attrs, optional content. */
 export type HeadEntry = {
     tag: HeadTag;
     attrs?: Record<string, string | boolean | undefined>;
@@ -75,7 +69,7 @@ export interface NavConfig {
 // ---------------------------------------------------------------------------
 const IG_STYLES: HeadEntry[] = [
     // Bootstrap is wrapped in a CSS cascade layer so its global resets do not
-    // bleed into the Starlight theme. The layer priority order is declared at
+    // bleed into the site theme. The layer priority order is declared at
     // the top of ig-theme.scss via @layer bootstrap.
     // Note: @import layer() does not support the `integrity` SRI attribute.
     {
@@ -115,8 +109,8 @@ const APPBUILDER_STYLES: HeadEntry[] = [
     { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://staging.appbuilder.dev/wp-includes/css/dashicons.min.css', media: 'all' } },
     { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://staging.appbuilder.dev/wp-content/plugins/megamenu-pro/icons/genericons/genericons/genericons.css', media: 'all' } },
     { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://staging.appbuilder.dev/wp-content/plugins/megamenu-pro/icons/fontawesome6/css/all.min.css', media: 'all' } },
-    // Bootstrap v4.4 partials — wrapped in a CSS cascade layer so they don't
-    // override the Starlight theme. See @layer bootstrap in ig-theme.scss.
+    // Bootstrap v4.4 partials are wrapped in a CSS cascade layer so they don't
+    // override the site theme. See @layer bootstrap in ig-theme.scss.
     {
         tag: 'style',
         content: [
@@ -239,8 +233,8 @@ export const IGDOCS_PLATFORMS: Record<string, PlatformMeta> = {
 };
 
 /**
- * Returns an array of Starlight `head` entries for the given platform.
- * Pass the result directly to `starlight({ head: getPlatformHead(...) })`.
+ * Returns an array of `head` entries for the given platform.
+ * Pass the result directly to `createDocsSite({ head: getPlatformHead(...) })`.
  *
  * @param platform - Platform identifier.
  * @param lang - Locale — not currently used but kept for API completeness.
diff --git a/src/plugins/remark-docfx.ts b/src/plugins/remark-docfx.ts
deleted file mode 100644
index 8e1803997c..0000000000
--- a/src/plugins/remark-docfx.ts
+++ /dev/null
@@ -1,395 +0,0 @@
-/**
- * Remark plugin that transforms docfx-specific markdown syntax into
- * standard HTML / markdown that Starlight can render.
- *
- * Handles:
- * 1. {environment:...} variable substitution in text, links, and raw HTML
- * 2. <code-view> elements -> .ig-code-view placeholder divs (enhanced by code-view.js)
- * 3. <div class="divider--half"></div> -> <hr>
- * 4. Relative .md link rewriting for Astro trailing-slash URLs
- */
-
-import { visit } from 'unist-util-visit';
-import fs from 'node:fs';
-import path from 'node:path';
-
-// ENV is loaded lazily the first time replaceEnvVars() is called — NOT at
-// module load time.  Module-level code runs while the Astro config is being
-// evaluated, before createDocsSite() has had a chance to set DOCS_SOURCE_PATH.
-// Deferring the load ensures we read the correct environment.json for the
-// active project (Angular, Blazor, React, WC, …).
-let _ENV: Record<string, string> | null = null;
-let _envSourcePath: string | null = null; // tracks which DOCS_SOURCE_PATH was used
-
-const DOCCONFIG_PLATFORM_MAP: Record<string, string> = {
-  angular:          'Angular',
-  react:            'React',
-  'web-components': 'WebComponents',
-  blazor:           'Blazor',
-};
-
-function loadEnv(): Record<string, string> {
-  const currentPath = process.env.DOCS_SOURCE_PATH ?? null;
-  // Re-load if the source path changed (e.g. two projects built in the same process)
-  if (_ENV !== null && currentPath === _envSourcePath) return _ENV as Record<string, string>;
-  _envSourcePath = currentPath;
-  _ENV = null;
-
-  if (!process.env.DOCS_SOURCE_PATH) { _ENV = {}; return _ENV as Record<string, string>; }
-  const sourceRoot = path.resolve(process.env.DOCS_SOURCE_PATH);
-
-  // Search order:
-  //   1. {docsDir}/en/environment.json   — docfx repo layout
-  //   2. {docsDir}/environment.json      — flat layout
-  //   3. {docsDir}/../environment.json   — xplat layout: docsDir = dist/{P}/{lang}/components,
-  //                                        environment.json lives one level up
-  //   4. {docsDir}/../en/environment.json
-  const parent = path.dirname(sourceRoot);
-  const candidates = [
-    path.join(sourceRoot, 'en', 'environment.json'),
-    path.join(sourceRoot, 'environment.json'),
-    path.join(parent, 'environment.json'),
-    path.join(parent, 'en', 'environment.json'),
-  ];
-
-  const envPath = candidates.find(c => fs.existsSync(c));
-  if (!envPath) {
-    // Fallback: read samplesBrowsers from docConfig.json (no generate step needed).
-    // Mirrors the same fallback in src/lib/platform-context.ts getEnvVars().
-    try {
-      const envKey = process.env.DOCS_ENV ?? process.env.NODE_ENV ?? 'production';
-      const docConfigPlatform = DOCCONFIG_PLATFORM_MAP[process.env.DOCS_PLATFORM ?? ''] ?? '';
-      if (docConfigPlatform) {
-        const docConfig = JSON.parse(fs.readFileSync(path.resolve(process.cwd(), 'docConfig.json'), 'utf-8'));
-        const demosUrl: string =
-          docConfig[docConfigPlatform]?.samplesBrowsers?.[envKey] ??
-          docConfig[docConfigPlatform]?.samplesBrowsers?.['development'] ??
-          '';
-        _ENV = { dvDemosBaseUrl: demosUrl, demosBaseUrl: demosUrl, infragisticsBaseUrl: 'https://www.infragistics.com' };
-      } else {
-        _ENV = {};
-      }
-    } catch {
-      _ENV = {};
-    }
-    return _ENV;
-  }
-
-  try {
-    const envData = JSON.parse(fs.readFileSync(envPath, 'utf-8'));
-    // DOCS_ENV overrides explicitly (useful for staging builds).
-    // Otherwise fall back to NODE_ENV ('development' | 'production').
-    // Matches environment.json keys: development / staging / production.
-    const envKey = process.env.DOCS_ENV ?? process.env.NODE_ENV ?? 'production';
-    _ENV = envData[envKey] ?? envData.production ?? {};
-  } catch {
-    _ENV = {};
-  }
-
-  return _ENV as Record<string, string>;
-}
-
-const ENV_PATTERN = /\{environment:(\w+)\}/g;
-
-/**
- * Rewrite a relative .md link to a root-relative Astro URL.
- * Absolute, root-relative, fragment-only, and protocol links are left untouched.
- * @param url      - Raw link URL from the markdown AST.
- * @param filePath - Absolute path of the current .md file.
- * @param docsDir  - Absolute path to the docs root (DOCS_SOURCE_PATH).
- */
-function rewriteMdLink(url: string, filePath: string, docsDir: string): string {
-  if (!url) return url;
-  if (
-    url.startsWith('http://') || url.startsWith('https://') ||
-    url.startsWith('/') || url.startsWith('#') || url.startsWith('mailto:')
-  ) return url;
-
-  // Separate path from fragment / query-string suffix.
-  const hashIdx = url.indexOf('#');
-  const qIdx    = url.indexOf('?');
-  const splitAt = hashIdx !== -1 ? hashIdx : qIdx !== -1 ? qIdx : -1;
-  let mdPath = splitAt !== -1 ? url.slice(0, splitAt) : url;
-  const suffix = splitAt !== -1 ? url.slice(splitAt) : '';
-
-  if (!mdPath.endsWith('.md')) return url;
-
-  // Resolve the link relative to the current file's directory.
-  const fileDir     = path.dirname(filePath);
-  const resolved    = path.resolve(fileDir, mdPath);
-
-  // Compute the slug: path relative to docsDir, forward slashes, no .md extension.
-  const rel         = path.relative(docsDir, resolved).replace(/\\/g, '/');
-  const slug        = rel.endsWith('.md') ? rel.slice(0, -3) : rel;
-
-  // Return a URL with the site base prepended so links remain correct when
-  // the site is mounted at a sub-path (e.g. /docs-react-new/).
-  // DOCS_BASE is set by createDocsSite() in integration.ts; it is empty in dev mode.
-  const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, '');
-  return docsBase + '/' + slug.toLowerCase() + '/' + suffix;
-}
-
-export function replaceEnvVars(str: string): string {
-  if (!str || typeof str !== 'string') return str;
-  const env = loadEnv();
-  return str.replace(ENV_PATTERN, (_match, key) => env[key] ?? `{environment:${key}}`);
-}
-
-/**
- * Build the pre-rendered widget HTML shell (matches the Sample.astro structure).
- * Picked up at runtime by sample-widget.ts via `.code-view[data-platform]`.
- */
-function buildWidgetHtml(
-  src: string,
-  demosBase: string,
-  githubSrc: string,
-  height: string,
-  alt: string,
-  platform: string,
-): string {
-  const widgetId = 'cw' + src.replace(/[^a-z0-9]/gi, '-');
-  const tabId    = `${widgetId}-example`;
-  const safeAlt  = alt.replace(/"/g, '&quot;');
-  return (
-    `<div class="code-view" id="${widgetId}"` +
-    ` data-iframe-src="${src}"` +
-    (demosBase ? ` data-demos-base-url="${demosBase}"` : '') +
-    (githubSrc ? ` data-github-src="${githubSrc}"`    : '') +
-    ` data-platform="${platform}">` +
-    `<div class="code-view-navbar">` +
-    `<div class="code-view-tab code-view-tab--active" data-tab-id="${tabId}">EXAMPLE</div>` +
-    `<span class="fs-button-container" title="Expand to fullscreen"></span>` +
-    `</div>` +
-    `<div class="code-views-container">` +
-    `<div id="${tabId}" class="sample-container code-view-tab-content loading" style="height: ${height}">` +
-    `<iframe data-src="${src}" title="${safeAlt}" style="width: 100%; height: 100%;" frameborder="0" seamless=""></iframe>` +
-    `</div>` +
-    `</div>` +
-    `</div>`
-  );
-}
-
-/**
- * Transform <code-view ...> ... </code-view> raw HTML blocks into the
- * pre-rendered widget shell consumed by sample-widget.ts at runtime.
- */
-function transformCodeView(html: string): string {
-  return html.replace(
-    /<code-view\s+([\s\S]*?)>\s*(?:<\/code-view>)?/g,
-    (_match, attrs: string) => {
-      const stackblitzMatch = attrs.match(/stackblitz="([^"]*)"/);
-      const codesandboxMatch = attrs.match(/codesandbox="([^"]*)"/);
-      const srcMatch = attrs.match(/iframe-src="([^"]*)"/);
-      const demosBaseMatch = attrs.match(/data-demos-base-url="([^"]*)"/);
-      const githubSrcMatch = attrs.match(/github-src="([^"]*)"/);
-      const heightMatch = attrs.match(/style="height:\s*(\d+px)"/);
-      const altMatch = attrs.match(/alt="([^"]*)"/);
-      const height = heightMatch ? heightMatch[1] : '400px';
-      const alt = altMatch ? altMatch[1] : 'Demo';
-
-      // Explicit StackBlitz embed (stackblitz="<project-or-url>")
-      if (stackblitzMatch) {
-        const project = replaceEnvVars(stackblitzMatch[1]);
-        const embedUrl = project.startsWith('http')
-          ? project
-          : `https://stackblitz.com/edit/${project}?embed=1&file=src/app/app.component.ts`;
-        return `<iframe src="${embedUrl}" style="width:100%;height:${height};border:1px solid #e5e7eb;border-radius:8px;" title="${alt} (StackBlitz)" loading="lazy" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>`;
-      }
-
-      // Explicit CodeSandbox embed (codesandbox="<project-or-url>")
-      if (codesandboxMatch) {
-        const project = replaceEnvVars(codesandboxMatch[1]);
-        const embedUrl = project.startsWith('http')
-          ? project
-          : `https://codesandbox.io/embed/${project}?fontsize=14&hidenavigation=1&theme=light`;
-        return `<iframe src="${embedUrl}" style="width:100%;height:${height};border:1px solid #e5e7eb;border-radius:8px;" title="${alt} (CodeSandbox)" loading="lazy" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>`;
-      }
-
-      // Standard docfx code-view with iframe-src + data-demos-base-url.
-      // Output the pre-rendered widget shell; sample-widget.ts activates it at runtime.
-      if (srcMatch) {
-        const src = replaceEnvVars(srcMatch[1]);
-        if (!src || src.includes('{environment:')) return ''; // env var not resolved
-        const demosBaseUrl = demosBaseMatch ? replaceEnvVars(demosBaseMatch[1]) : '';
-        const githubSrc = githubSrcMatch ? githubSrcMatch[1] : '';
-        const platform = process.env.DOCS_PLATFORM || 'angular';
-        return buildWidgetHtml(src, demosBaseUrl, githubSrc, height, alt, platform);
-      }
-
-      return '';
-    }
-  );
-}
-
-/**
- * Transform <div class="divider--half"></div> into <hr>
- */
-function transformDividers(html: string): string {
-  return html.replace(/<div\s+class="divider--half"\s*>\s*<\/div>/g, '<hr/>');
-}
-
-function strVal(v: unknown): string {
-  return typeof v === 'string' ? v : Array.isArray(v) ? v.join(' ') : String(v ?? '');
-}
-
-/**
- * Rehype plugin — transforms <code-view> elements into the pre-rendered widget shell.
- *
- * Handles two HAST representations depending on what's in the pipeline:
- *
- * 1. `element` nodes (tagName === 'code-view') — produced when rehype-raw is
- *    present and re-parses raw HTML fragments into proper HAST elements.
- *
- * 2. `raw` string nodes — produced when rehype-raw is NOT in the pipeline
- *    (e.g. Astro content-collection .md files). In that case multiline
- *    <code-view> blocks are opaque raw strings; we run the same regex
- *    transformer used in the remark stage.
- */
-export function rehypeCodeView() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (tree: any) => {
-    // ── 1. element nodes (after rehype-raw) ──────────────────────────────────
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    visit(tree, 'element', (node: any) => {
-      if (node.tagName !== 'code-view') return;
-
-      const p = node.properties || {};
-
-      // HAST converts hyphenated attributes to camelCase via property-information.
-      const iframeSrc  = strVal(p.iframeSrc      ?? p['iframe-src']             ?? '');
-      const demosBase  = strVal(p.dataDemosBaseUrl ?? p['data-demos-base-url'] ?? '');
-      const githubSrc  = strVal(p.githubSrc      ?? p['github-src']             ?? '');
-      const styleStr   = strVal(p.style ?? '');
-      const alt        = strVal(p.alt   ?? 'Demo');
-
-      const src     = replaceEnvVars(iframeSrc);
-      const baseUrl = replaceEnvVars(demosBase);
-
-      if (!src || src.includes('{environment:')) return;
-
-      const heightMatch = styleStr.match(/height:\s*(\d+\s*px)/i);
-      const height   = heightMatch ? heightMatch[1].replace(/\s+/, '') : '400px';
-      const platform = process.env.DOCS_PLATFORM || 'angular';
-      const widgetId = 'cw' + src.replace(/[^a-z0-9]/gi, '-');
-      const tabId    = `${widgetId}-example`;
-
-      node.tagName = 'div';
-      node.properties = {
-        className:          ['code-view'],
-        id:                 widgetId,
-        'data-iframe-src':  src,
-        'data-platform':    platform,
-        ...(baseUrl   ? { 'data-demos-base-url': baseUrl }  : {}),
-        ...(githubSrc ? { 'data-github-src': githubSrc }    : {}),
-      };
-      node.children = [
-        {
-          type: 'element', tagName: 'div',
-          properties: { className: ['code-view-navbar'] },
-          children: [
-            {
-              type: 'element', tagName: 'div',
-              properties: { className: ['code-view-tab', 'code-view-tab--active'], 'data-tab-id': tabId },
-              children: [{ type: 'text', value: 'EXAMPLE' }],
-            },
-            {
-              type: 'element', tagName: 'span',
-              properties: { className: ['fs-button-container'], title: 'Expand to fullscreen' },
-              children: [],
-            },
-          ],
-        },
-        {
-          type: 'element', tagName: 'div',
-          properties: { className: ['code-views-container'] },
-          children: [
-            {
-              type: 'element', tagName: 'div',
-              properties: {
-                id: tabId,
-                className: ['sample-container', 'code-view-tab-content', 'loading'],
-                style: `height: ${height}`,
-              },
-              children: [
-                {
-                  type: 'element', tagName: 'iframe',
-                  properties: {
-                    'data-src': src,
-                    title: alt,
-                    style: 'width: 100%; height: 100%;',
-                    frameBorder: '0',
-                    seamless: '',
-                  },
-                  children: [],
-                },
-              ],
-            },
-          ],
-        },
-      ];
-    });
-
-    // ── 2. raw string nodes (no rehype-raw in pipeline) ──────────────────────
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    visit(tree, 'raw', (node: any) => {
-      if (!node.value || !node.value.includes('<code-view')) return;
-      const updated = transformCodeView(replaceEnvVars(node.value as string));
-      if (updated !== node.value) node.value = updated;
-    });
-  };
-}
-
-export function remarkDocfx() {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (tree: any, file: any) => {
-    const filePath = (file.path as string) ?? '';
-    const docsDir  = process.env.DOCS_SOURCE_PATH
-      ? path.resolve(process.env.DOCS_SOURCE_PATH)
-      : (filePath ? path.dirname(filePath) : '');
-    // 1. Walk the AST and replace environment variables in text/links/html
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    visit(tree, (node: any) => {
-      // Text nodes
-      if (node.type === 'text' && node.value) {
-        node.value = replaceEnvVars(node.value as string);
-      }
-
-      // Links
-      if (node.type === 'link' && node.url) {
-        node.url = replaceEnvVars(node.url as string);
-        node.url = rewriteMdLink(node.url as string, filePath, docsDir);
-        // Prepend DOCS_BASE to root-relative internal links that were not already
-        // rewritten by rewriteMdLink (e.g. bare /grids/grid/… links that skip
-        // the .md-only rewriter above).
-        const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, '');
-        if (
-          docsBase &&
-          (node.url as string).startsWith('/') &&
-          !(node.url as string).startsWith('//') &&
-          !(node.url as string).startsWith(docsBase + '/')
-        ) {
-          node.url = docsBase + (node.url as string);
-        }
-      }
-
-      // Images
-      if (node.type === 'image' && node.url) {
-        node.url = replaceEnvVars(node.url as string);
-        node.url = (node.url as string).replace(/^(\.\.\/)+images\//, '/images/');
-      }
-
-      // Code blocks — normalize language identifiers to lowercase
-      if (node.type === 'code' && node.lang) {
-        node.lang = (node.lang as string).toLowerCase();
-      }
-
-      // Inline HTML
-      if (node.type === 'html' && node.value) {
-        node.value = replaceEnvVars(node.value as string);
-        node.value = transformCodeView(node.value as string);
-        node.value = transformDividers(node.value as string);
-        node.value = (node.value as string).replace(/src="(\.\.\/)+images\//g, 'src="/images/');
-      }
-    });
-  };
-}
diff --git a/src/plugins/remark-env-vars.ts b/src/plugins/remark-env-vars.ts
new file mode 100644
index 0000000000..1ea9838e6e
--- /dev/null
+++ b/src/plugins/remark-env-vars.ts
@@ -0,0 +1,110 @@
+/**
+ * Remark plugin: environment variable substitution.
+ *
+ * Replaces `{environment:key}` tokens in markdown text, link URLs, image URLs,
+ * and inline HTML with values from the project's environment.json.
+ *
+ * Resolution order for environment.json:
+ *   1. {DOCS_SOURCE_PATH}/en/environment.json
+ *   2. {DOCS_SOURCE_PATH}/environment.json
+ *   3. {DOCS_SOURCE_PATH}/../environment.json
+ *   4. {DOCS_SOURCE_PATH}/../en/environment.json
+ *   5. Fallback: read demosBaseUrl from docConfig.json
+ *
+ * DOCS_ENV (or NODE_ENV) selects the env block: development | staging | production.
+ */
+
+import { visit } from 'unist-util-visit';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const ENV_PATTERN = /\{environment:(\w+)\}/g;
+
+const DOCCONFIG_PLATFORM_MAP: Record<string, string> = {
+  angular: 'Angular',
+  react: 'React',
+  'web-components': 'WebComponents',
+  blazor: 'Blazor',
+};
+
+// Lazy-loaded, cached per DOCS_SOURCE_PATH value.
+let _env: Record<string, string> | null = null;
+let _envSourcePath: string | null = null;
+
+function loadEnv(): Record<string, string> {
+  const currentPath = process.env.DOCS_SOURCE_PATH ?? null;
+  if (_env !== null && currentPath === _envSourcePath) return _env;
+  _envSourcePath = currentPath;
+  _env = null;
+
+  if (!currentPath) { _env = {}; return _env; }
+  const sourceRoot = path.resolve(currentPath);
+  const parent = path.dirname(sourceRoot);
+
+  const candidates = [
+    path.join(sourceRoot, 'en', 'environment.json'),
+    path.join(sourceRoot, 'environment.json'),
+    path.join(parent, 'environment.json'),
+    path.join(parent, 'en', 'environment.json'),
+  ];
+
+  const envPath = candidates.find(c => fs.existsSync(c));
+
+  if (!envPath) {
+    try {
+      const envKey = process.env.DOCS_ENV ?? process.env.NODE_ENV ?? 'production';
+      const platform = DOCCONFIG_PLATFORM_MAP[process.env.DOCS_PLATFORM ?? ''] ?? '';
+      if (platform) {
+        const configPath = path.resolve(process.cwd(), 'docConfig.json');
+        const docConfig = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+        const demosUrl: string =
+          docConfig[platform]?.samplesBrowsers?.[envKey] ??
+          docConfig[platform]?.samplesBrowsers?.['development'] ?? '';
+        _env = { dvDemosBaseUrl: demosUrl, demosBaseUrl: demosUrl, infragisticsBaseUrl: 'https://www.infragistics.com' };
+      } else {
+        _env = {};
+      }
+    } catch {
+      _env = {};
+    }
+    return _env;
+  }
+
+  try {
+    const data = JSON.parse(fs.readFileSync(envPath, 'utf-8'));
+    const envKey = process.env.DOCS_ENV ?? process.env.NODE_ENV ?? 'production';
+    _env = data[envKey] ?? data.production ?? {};
+  } catch {
+    _env = {};
+  }
+  return _env!;
+}
+
+/** Replace all `{environment:key}` tokens in a string. Exported for use by other modules. */
+export function replaceEnvVars(str: string): string {
+  if (!str || typeof str !== 'string') return str;
+  const env = loadEnv();
+  return str.replace(ENV_PATTERN, (_match, key) => env[key] ?? `{environment:${key}}`);
+}
+
+/** Remark plugin that substitutes `{environment:key}` tokens in the markdown AST. */
+export function remarkEnvVars() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (tree: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visit(tree, (node: any) => {
+      if (node.type === 'text' && node.value) {
+        node.value = replaceEnvVars(node.value);
+      }
+      if (node.type === 'link' && node.url) {
+        node.url = replaceEnvVars(node.url);
+      }
+      if (node.type === 'image' && node.url) {
+        node.url = replaceEnvVars(node.url);
+      }
+      if (node.type === 'html' && node.value) {
+        node.value = replaceEnvVars(node.value);
+      }
+    });
+  };
+}
diff --git a/src/plugins/remark-html-transforms.ts b/src/plugins/remark-html-transforms.ts
new file mode 100644
index 0000000000..701010ae78
--- /dev/null
+++ b/src/plugins/remark-html-transforms.ts
@@ -0,0 +1,32 @@
+/**
+ * Remark plugin: inline HTML transforms.
+ *
+ * Handles legacy HTML patterns in markdown content:
+ *   - `<div class="divider--half"></div>` → `<hr/>`
+ *   - Normalizes code block language identifiers to lowercase
+ */
+
+import { visit } from 'unist-util-visit';
+
+const DIVIDER_PATTERN = /<div\s+class="divider--half"\s*>\s*<\/div>/g;
+const IMG_SRC_PATTERN = /src="(\.\.\/)+images\//g;
+
+/** Remark plugin that transforms legacy HTML patterns in the AST. */
+export function remarkHtmlTransforms() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (tree: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visit(tree, (node: any) => {
+      // Inline HTML: divider → hr, relative img src → root-relative
+      if (node.type === 'html' && node.value) {
+        node.value = (node.value as string).replace(DIVIDER_PATTERN, '<hr/>');
+        node.value = (node.value as string).replace(IMG_SRC_PATTERN, 'src="/images/');
+      }
+
+      // Code blocks: normalize language to lowercase
+      if (node.type === 'code' && node.lang) {
+        node.lang = (node.lang as string).toLowerCase();
+      }
+    });
+  };
+}
diff --git a/src/plugins/remark-md-links.ts b/src/plugins/remark-md-links.ts
new file mode 100644
index 0000000000..8fe567d3f9
--- /dev/null
+++ b/src/plugins/remark-md-links.ts
@@ -0,0 +1,75 @@
+/**
+ * Remark plugin: rewrite relative .md links to Astro-compatible URLs.
+ *
+ * Transforms `[label](./some-page.md)` or `[label](../folder/page.md#section)`
+ * into root-relative URLs like `/products/.../some-page/` (with DOCS_BASE prepended).
+ *
+ * Also prepends DOCS_BASE to bare root-relative internal links (e.g. `/grids/grid/...`)
+ * that are already absolute but missing the site base path.
+ */
+
+import { visit } from 'unist-util-visit';
+import path from 'node:path';
+
+/**
+ * Resolve a relative .md link to an absolute Astro URL.
+ * Non-relative, non-.md, and external links are returned unchanged.
+ */
+function rewriteMdLink(url: string, filePath: string, docsDir: string): string {
+  if (!url) return url;
+  if (
+    url.startsWith('http://') || url.startsWith('https://') ||
+    url.startsWith('/') || url.startsWith('#') || url.startsWith('mailto:')
+  ) return url;
+
+  const hashIdx = url.indexOf('#');
+  const qIdx = url.indexOf('?');
+  const splitAt = hashIdx !== -1 ? hashIdx : qIdx !== -1 ? qIdx : -1;
+  let mdPath = splitAt !== -1 ? url.slice(0, splitAt) : url;
+  const suffix = splitAt !== -1 ? url.slice(splitAt) : '';
+
+  if (!mdPath.endsWith('.md')) return url;
+
+  const fileDir = path.dirname(filePath);
+  const resolved = path.resolve(fileDir, mdPath);
+  const rel = path.relative(docsDir, resolved).replace(/\\/g, '/');
+  const slug = rel.endsWith('.md') ? rel.slice(0, -3) : rel;
+
+  const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, '');
+  return docsBase + '/' + slug.toLowerCase() + '/' + suffix;
+}
+
+/** Remark plugin that rewrites relative .md links, prepends DOCS_BASE, and fixes relative image paths. */
+export function remarkMdLinks() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (tree: any, file: any) => {
+    const filePath = (file.path as string) ?? '';
+    const docsDir = process.env.DOCS_SOURCE_PATH
+      ? path.resolve(process.env.DOCS_SOURCE_PATH)
+      : (filePath ? path.dirname(filePath) : '');
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visit(tree, (node: any) => {
+      if (node.type === 'link' && node.url) {
+        node.url = rewriteMdLink(node.url as string, filePath, docsDir);
+
+        // Prepend DOCS_BASE to root-relative internal links not already prefixed.
+        const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, '');
+        if (
+          docsBase &&
+          (node.url as string).startsWith('/') &&
+          !(node.url as string).startsWith('//') &&
+          !(node.url as string).startsWith(docsBase + '/')
+        ) {
+          node.url = docsBase + (node.url as string);
+        }
+      }
+
+      // Rewrite relative `../images/` paths in markdown image nodes to root-relative `/images/`.
+      // Generated MDX files may contain relative image references that Vite cannot resolve.
+      if (node.type === 'image' && node.url) {
+        node.url = (node.url as string).replace(/^(\.\.\/)+images\//, '/images/');
+      }
+    });
+  };
+}
diff --git a/src/sidebar.ts b/src/sidebar.ts
index 279635e05e..4c79d86dea 100644
--- a/src/sidebar.ts
+++ b/src/sidebar.ts
@@ -1,7 +1,7 @@
 /**
  * sidebar.ts
  *
- * Builds an Astro Starlight sidebar from a YAML or JSON TOC file.
+ * Builds an Astro sidebar from a JSON TOC file.
  * Source-agnostic: consuming repos pass their own paths.
  *
  * Usage in a consuming repo's astro.config.ts:
@@ -9,7 +9,7 @@
  *   import { buildSidebarFromToc } from 'docs-template/sidebar';
  *
  *   const sidebar = buildSidebarFromToc({
- *     tocPath: './node_modules/my-docs-source/toc.yml',   // YAML or JSON
+ *     tocPath: './node_modules/my-docs-source/toc.json',
  *     docsDir: './node_modules/my-docs-source/en/components',
  *     // exclude: [/^internal\//],   // optional extra exclude patterns
  *   });
@@ -17,7 +17,6 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
-import * as yaml from 'js-yaml';
 import type { SidebarEntry, SidebarGroup, SidebarLink } from './lib/sidebar/types';
 
 // Re-export so consumers (astro.config.ts in child sites) can import the
@@ -102,16 +101,16 @@ function convertTocItem(
     if (item.href) {
         if (!docExists(docsDir, item.href, exclude)) return null;
         const entry: SidebarLink = { label: item.name, slug: hrefToSlug(item.href) };
-        // Status badge — only one slot available in Starlight, priority order:
-        if (item.new)          entry.badge = { text: 'New',     variant: 'new'     };
-        else if (item.preview) entry.badge = { text: 'Preview', variant: 'preview' };
-        else if (item.updated) entry.badge = { text: 'Updated', variant: 'updated' };
+        // Status badge — only one slot available, priority order:
+        if (item.new)          entry.badges = [{ text: 'New',     variant: 'new'     }];
+        else if (item.preview) entry.badges = [{ text: 'Preview', variant: 'preview' }];
+        else if (item.updated) entry.badges = [{ text: 'Updated', variant: 'updated' }];
         // Premium is rendered via data-premium attr so it can coexist with a
         // status badge (CSS ::after pseudo-element adds the star icon).
         if (item.premium) {
             entry.attrs = { 'data-premium': 'true' };
             // Only use the badge slot for premium when no status badge is shown.
-            if (!entry.badge) entry.badge = { text: 'Premium', variant: 'premium' };
+            if (!entry.badges) entry.badges = [{ text: 'Premium', variant: 'premium' }];
         }
         return entry;
     }
@@ -124,7 +123,7 @@ function convertTocItem(
 // ---------------------------------------------------------------------------
 
 export interface BuildSidebarFromTocOptions {
-    /** Absolute path to the TOC file (.yml or .json). */
+    /** Absolute path to the TOC file (.json). */
     tocPath: string;
     /** Absolute path to the Markdown docs directory. */
     docsDir: string;
@@ -133,12 +132,12 @@ export interface BuildSidebarFromTocOptions {
 }
 
 /**
- * Reads a YAML or JSON TOC file and converts it to a Starlight sidebar array.
+ * Reads a JSON TOC file and converts it to a sidebar array.
  */
 export function buildSidebarFromToc({ tocPath, docsDir, exclude = [] }: BuildSidebarFromTocOptions): SidebarEntry[] {
     if (!tocPath || !fs.existsSync(tocPath)) return [];
     const tocRaw = fs.readFileSync(tocPath, 'utf-8');
-    const tocItems = tocPath.endsWith('.json') ? JSON.parse(tocRaw) : yaml.load(tocRaw) as TocItem[];
+    const tocItems: TocItem[] = JSON.parse(tocRaw);
 
     const sidebar: SidebarEntry[] = [];
     let currentGroup: SidebarGroup | null = null;
diff --git a/src/styles/ig-theme.scss b/src/styles/ig-theme.scss
index caaedaafbb..2a8a0d71aa 100644
--- a/src/styles/ig-theme.scss
+++ b/src/styles/ig-theme.scss
@@ -18,7 +18,7 @@ $ig-palette: palette(
 
 @include palette($ig-palette);
 
-// Starlight accent bridge — maps IG palette shades to Starlight accent vars
+// Accent bridge — maps IG palette shades to --sl-color-accent-* CSS vars
 [data-theme='light'] {
     --sl-color-accent-low:  var(--ig-primary-200);
     --sl-color-accent:      var(--ig-primary-500);
@@ -26,7 +26,7 @@ $ig-palette: palette(
 }
 
 // Dark mode — re-emit palette with lighter primary/secondary for legibility
-// on dark surfaces. Starlight writes [data-theme='dark'] on <html>.
+// on dark surfaces. The theme sets [data-theme='dark'] on <html>.
 [data-theme='dark'] {
     $ig-palette-dark: palette(
         $primary:   #4db8ff,
diff --git a/src/virtual-modules.d.ts b/src/virtual-modules.d.ts
index 04446d4002..4fb5dcf7cb 100644
--- a/src/virtual-modules.d.ts
+++ b/src/virtual-modules.d.ts
@@ -1,6 +1,7 @@
 declare module 'virtual:docs-template/site-meta' {
   export const sidebar: { label: string; slug?: string; items?: unknown[] }[];
   export const title: string;
+  export const navLang: import('./platform.ts').NavLang;
   /** Cross-product navigation links for the DocsSubHeader. */
   export const productLinks: Array<{
     label: string;
@@ -15,23 +16,12 @@ declare module 'virtual:docs-template/site-meta' {
   }>;
   /** Astro trailingSlash config value: 'always' | 'never' | 'ignore'. */
   export const trailingSlash: 'always' | 'never' | 'ignore';
+  /** Locale for the nav prefetch URL. Mirrors the value on `virtual:docs-template/nav-html`. */
+  export const navLang: NavLang;
 }
 
-import type { NavLang, NavTheme } from './platform.ts';
-
 declare module 'virtual:docs-template/nav-html' {
   export const platform: 'igniteui' | 'angular' | 'react' | 'blazor' | 'web-components' | 'slingshot' | 'appbuilder' | null;
-  export const navLang: NavLang;
   export const themeApiUrl: string;
   export const widgetScriptSrc: string;
-  export const prefetched: boolean;
-  export const headerHtml: string;
-  export const uiFooterHtml: string;
-  export const footerHtml: string;
-  export const abPrefetched: boolean;
-  export const abHeaderHtml: string;
-  export const abFooterHtml: string;
-  export const abFooterUtilsHtml: string;
-  export const abFooterCopyrightHtml: string;
-  export const abContactSalesHtml: string;
 }