diff --git a/.github/workflows/pr-storybook-deploy-manual.yml b/.github/workflows/pr-storybook-deploy-manual.yml
index 78a0e73bdb25..1e8b4232112b 100644
--- a/.github/workflows/pr-storybook-deploy-manual.yml
+++ b/.github/workflows/pr-storybook-deploy-manual.yml
@@ -85,6 +85,17 @@ jobs:
         run: |
           pnpx nx build devextreme-react-storybook
 
+      - name: Build playground (static)
+        if: inputs.action == 'deploy'
+        run: |
+          cd packages/devextreme
+          pnpm run build:playground
+
+      - name: Copy playground into Storybook output
+        if: inputs.action == 'deploy'
+        run: |
+          cp -r packages/devextreme/dist/playground apps/react-storybook/storybook-static/playground
+
       - name: Deploy/remove PR preview
         uses: rossjrw/pr-preview-action@ffa7509e91a3ec8dfc2e5536c4d5c1acdf7a6de9 # v1.8.1
         with:
diff --git a/packages/devextreme/build/vite-plugin-demo-html.ts b/packages/devextreme/build/vite-plugin-demo-html.ts
new file mode 100644
index 000000000000..fa05ad743368
--- /dev/null
+++ b/packages/devextreme/build/vite-plugin-demo-html.ts
@@ -0,0 +1,255 @@
+import fs from 'fs';
+import path from 'path';
+import type { PluginOption, ViteDevServer } from 'vite';
+
+const demosRoot = path.resolve(__dirname, '../../../apps/demos/Demos');
+const demosImagesRoot = path.resolve(__dirname, '../../../apps/demos/images');
+const demosDataRoot = path.resolve(__dirname, '../../../apps/demos/data');
+const demosSharedRoot = path.resolve(__dirname, '../../../apps/demos/shared');
+const mustacheRoot = path.resolve(__dirname, '../../../apps/demos/node_modules/mustache');
+const vectormapDataRoot = path.resolve(__dirname, '../artifacts/js/vectormap-data');
+const menuMetaPath = path.resolve(__dirname, '../../../apps/demos/menuMeta.json');
+
+type DemoEntry = { title: string; name: string; files: string[] };
+type DemosMap = Record<string, DemoEntry[]>;
+
+const DEMO_FILE_EXTENSIONS = ['.html', '.js', '.css', '.json'];
+
+function getDemoFiles(jqueryDir: string): string[] {
+    if (!fs.existsSync(jqueryDir)) return [];
+    return fs.readdirSync(jqueryDir)
+        .filter((f) => DEMO_FILE_EXTENSIONS.includes(path.extname(f)))
+        .sort();
+}
+
+function buildDemosMap(): DemosMap {
+    const result: DemosMap = {};
+    const menuMeta: unknown[] = JSON.parse(fs.readFileSync(menuMetaPath, 'utf-8'));
+
+    function traverse(groups: unknown[]): void {
+        for (const group of groups as Array<{ Groups?: unknown[]; Demos?: Array<{ Title: string; Name: string; Widget?: string }> }>) {
+            if (group.Demos) {
+                for (const demo of group.Demos) {
+                    if (!demo.Widget || !demo.Name) continue;
+                    const jqueryDir = path.join(demosRoot, demo.Widget, demo.Name, 'jQuery');
+                    if (!fs.existsSync(path.join(jqueryDir, 'index.html'))) continue;
+                    if (!result[demo.Widget]) result[demo.Widget] = [];
+                    result[demo.Widget].push({ title: demo.Title, name: demo.Name, files: getDemoFiles(jqueryDir) });
+                }
+            }
+            if (group.Groups) traverse(group.Groups);
+        }
+    }
+
+    traverse(menuMeta);
+    return result;
+}
+
+function transformDemoHtml(html: string): string {
+    const relativeScripts: string[] = [];
+
+    const scriptRe = /<script\s+src="([^"]+)"\s*><\/script>/gi;
+    let m: RegExpExecArray | null;
+    while ((m = scriptRe.exec(html)) !== null) {
+        if (!m[1].includes('node_modules')) {
+            relativeScripts.push(m[1]);
+        }
+    }
+
+    const loaderScript = `<script type="module">
+  import '/demo-init.ts';
+  const srcs = ${JSON.stringify(relativeScripts)};
+  for (const src of srcs) {
+    await new Promise((resolve) => {
+      const s = document.createElement('script');
+      s.src = src;
+      s.onload = resolve;
+      document.body.appendChild(s);
+    });
+  }
+</script>`;
+
+    return html
+        .replace(/<script[^>]+node_modules[^>]*><\/script>/gi, '')
+        .replace(/<link[^>]+devextreme-dist[^>]*>/gi, '')
+        .replace(/<script\s+src="(?!http)[^"]*\.js"[^>]*><\/script>/gi, '')
+        .replace(/<\/body>/, `${loaderScript}\n</body>`)
+        .replace(/<head>/, `<head>\n  <script type="module" src="/@vite/client"></script>`);
+}
+
+function transformDemoHtmlForBuild(html: string, existingFiles?: Set<string>): string {
+    const relativeScripts: string[] = [];
+
+    const scriptRe = /<script\s+src="([^"]+)"\s*><\/script>/gi;
+    let m: RegExpExecArray | null;
+    while ((m = scriptRe.exec(html)) !== null) {
+        const src = m[1];
+        if (src.includes('node_modules')) {
+            const vmMatch = src.match(/\/vectormap-data\/([^"]+)/);
+            if (vmMatch) {
+                relativeScripts.push(`../../../vectormap-data/${vmMatch[1]}`);
+                continue;
+            }
+            const mustacheMatch = src.match(/\/mustache\/(mustache(?:\.min)?\.js)/);
+            if (mustacheMatch) {
+                relativeScripts.push(`../../../mustache/${mustacheMatch[1]}`);
+                continue;
+            }
+        } else if (!existingFiles || existingFiles.has(path.basename(src))) {
+            relativeScripts.push(src);
+        }
+    }
+
+    const indexIdx = relativeScripts.indexOf('index.js');
+    if (indexIdx !== -1) {
+        relativeScripts.splice(indexIdx, 1);
+        relativeScripts.push('index.js');
+    }
+
+    const loaderScript = `<script type="module">
+  import '../../../demo-init.js';
+  const srcs = ${JSON.stringify(relativeScripts)};
+  for (const src of srcs) {
+    await new Promise((resolve) => {
+      const s = document.createElement('script');
+      s.src = src;
+      s.onload = resolve;
+      document.body.appendChild(s);
+    });
+  }
+</script>`;
+
+    return html
+        .replace(/<script[^>]+node_modules[^>]*><\/script>/gi, '')
+        .replace(/<link[^>]+(devextreme-dist|node_modules)[^>]*>/gi, '')
+        .replace(/<script\s+src="(?!http)[^"]*\.js"[^>]*><\/script>/gi, '')
+        .replace(/<\/body>/, `${loaderScript}\n</body>`)
+        .replaceAll('../../../../', '../../../');
+}
+
+function serveFile(res: import('http').ServerResponse, filePath: string): boolean {
+    if (!fs.existsSync(filePath)) return false;
+    const ext = path.extname(filePath);
+    const contentTypes: Record<string, string> = {
+        '.html': 'text/html; charset=utf-8',
+        '.js': 'application/javascript; charset=utf-8',
+        '.css': 'text/css; charset=utf-8',
+        '.json': 'application/json; charset=utf-8',
+        '.png': 'image/png',
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
+        '.webp': 'image/webp',
+    };
+    const content = fs.readFileSync(filePath);
+    res.setHeader('Content-Type', contentTypes[ext] ?? 'application/octet-stream');
+    res.end(ext === '.html' ? transformDemoHtml(content.toString('utf-8')) : content);
+    return true;
+}
+
+export default function demoHtmlPlugin(): PluginOption {
+    const demosMap = buildDemosMap();
+    const VIRTUAL_ID = 'virtual:demos-meta';
+    const RESOLVED_ID = `\0${VIRTUAL_ID}`;
+    let isBuild = false;
+
+    return {
+        name: 'devextreme-demo-html',
+
+        configResolved(config: { command: string }) {
+            isBuild = config.command === 'build';
+        },
+
+        resolveId(id: string) {
+            if (id === VIRTUAL_ID) return RESOLVED_ID;
+            return null;
+        },
+
+        load(id: string) {
+            if (id === RESOLVED_ID) {
+                const root = isBuild ? '' : demosRoot;
+                return `export default ${JSON.stringify({ demosRoot: root, demos: demosMap })}`;
+            }
+            return null;
+        },
+
+        writeBundle(options: { dir?: string }) {
+            const outDir = options.dir ?? 'dist';
+            const demosOut = path.join(outDir, 'demos');
+
+            if (fs.existsSync(demosImagesRoot)) {
+                fs.cpSync(demosImagesRoot, path.join(outDir, 'images'), { recursive: true });
+            }
+            if (fs.existsSync(demosDataRoot)) {
+                fs.cpSync(demosDataRoot, path.join(outDir, 'data'), { recursive: true });
+            }
+            if (fs.existsSync(demosSharedRoot)) {
+                fs.cpSync(demosSharedRoot, path.join(outDir, 'shared'), { recursive: true });
+            }
+            if (fs.existsSync(vectormapDataRoot)) {
+                fs.cpSync(vectormapDataRoot, path.join(outDir, 'vectormap-data'), { recursive: true });
+            }
+            if (fs.existsSync(mustacheRoot)) {
+                fs.mkdirSync(path.join(outDir, 'mustache'), { recursive: true });
+                const mustacheFile = path.join(mustacheRoot, 'mustache.min.js');
+                if (fs.existsSync(mustacheFile)) {
+                    fs.copyFileSync(mustacheFile, path.join(outDir, 'mustache', 'mustache.min.js'));
+                }
+            }
+
+            for (const [widget, demos] of Object.entries(demosMap)) {
+                for (const { name } of demos) {
+                    const jqueryDir = path.join(demosRoot, widget, name, 'jQuery');
+                    if (!fs.existsSync(jqueryDir)) continue;
+
+                    const demoOut = path.join(demosOut, widget, name);
+                    fs.mkdirSync(demoOut, { recursive: true });
+
+                    for (const file of fs.readdirSync(jqueryDir)) {
+                        const src = path.join(jqueryDir, file);
+                        const dest = path.join(demoOut, file);
+                        const ext = path.extname(file);
+                        if (ext === '.html') {
+                            const existingFiles = new Set(fs.readdirSync(jqueryDir));
+                            fs.writeFileSync(dest, transformDemoHtmlForBuild(fs.readFileSync(src, 'utf-8'), existingFiles));
+                        } else if (ext === '.js' || ext === '.css') {
+                            fs.writeFileSync(dest, fs.readFileSync(src, 'utf-8').replaceAll('../../../../', '../../../'));
+                        } else {
+                            fs.copyFileSync(src, dest);
+                        }
+                    }
+                }
+            }
+        },
+
+        configureServer(server: ViteDevServer) {
+            server.watcher.add(path.join(demosRoot, '**', 'jQuery', '*.{js,css,html}'));
+
+            server.middlewares.use('/images', (req, res, next) => {
+                const filePath = path.join(demosImagesRoot, decodeURIComponent(req.url ?? '/'));
+                if (serveFile(res, filePath)) return;
+                next();
+            });
+
+            server.middlewares.use('/demos', (req, res, next) => {
+                const urlPath = decodeURIComponent(req.url ?? '/');
+                const segments = urlPath.replace(/^\//, '').split('/').filter(Boolean);
+
+                if (segments.length < 2) { next(); return; }
+
+                const [widget, name, ...rest] = segments;
+                const jqueryDir = path.join(demosRoot, widget, name, 'jQuery');
+
+                if (rest.length === 0 || urlPath.endsWith('/')) {
+                    if (serveFile(res, path.join(jqueryDir, 'index.html'))) return;
+                } else {
+                    const file = rest.join('/');
+                    if (serveFile(res, path.join(jqueryDir, file))) return;
+                }
+
+                next();
+            });
+        },
+    };
+}
diff --git a/packages/devextreme/build/vite-plugin-devextreme.ts b/packages/devextreme/build/vite-plugin-devextreme.ts
new file mode 100644
index 000000000000..eb7d9d2e87f1
--- /dev/null
+++ b/packages/devextreme/build/vite-plugin-devextreme.ts
@@ -0,0 +1,194 @@
+import { transformAsync } from '@babel/core';
+import type { PluginOption } from 'vite';
+
+function removeCjsExportsAssignments(): unknown {
+  return {
+    visitor: {
+      ExpressionStatement(path: {
+        node: { expression: { type: string; operator?: string; left?: { type: string; object?: { type: string; name?: string } } } };
+        remove: () => void;
+      }) {
+        const { expression } = path.node;
+        if (
+          expression.type === 'AssignmentExpression'
+          && expression.operator === '='
+          && expression.left?.type === 'MemberExpression'
+          && expression.left.object?.type === 'Identifier'
+          && expression.left.object.name === 'exports'
+        ) {
+          path.remove();
+        }
+      },
+    },
+  };
+}
+function removeUninitializedClassFields(): unknown {
+  return {
+    visitor: {
+      ClassProperty(path: { node: { value: unknown }; remove: () => void }) {
+        if (path.node.value === null || path.node.value === undefined) {
+          path.remove();
+        }
+      },
+    },
+  };
+}
+
+function moveFieldInitializersToConstructor(): unknown {
+  return {
+    visitor: {
+      Class(path: {
+        node: {
+          body: { body: unknown[] };
+          superClass?: unknown;
+        };
+      }) {
+        const body = path.node.body.body;
+
+        type CtorParam = { type: string; name?: string; left?: { name?: string } };
+        type CtorBodyStmt = {
+          type: string;
+          expression?: {
+            type: string;
+            callee?: { type: string };
+            operator?: string;
+            left?: { type: string; object?: { type: string }; property?: { name: string } };
+            right?: { type: string; name?: string };
+          };
+        };
+        type ClassMember = {
+          type: string;
+          kind?: string;
+          key?: { name: string };
+          value?: unknown;
+          static?: boolean;
+          params?: CtorParam[];
+          body?: { body: CtorBodyStmt[] };
+        };
+
+        const fieldsToMove: ClassMember[] = [];
+        const remaining: unknown[] = [];
+
+        for (const member of body as ClassMember[]) {
+          if (
+            member.type === 'ClassProperty'
+            && member.value != null
+            && !member.static
+          ) {
+            fieldsToMove.push(member);
+          } else {
+            remaining.push(member);
+          }
+        }
+
+        if (fieldsToMove.length === 0) return;
+
+        const ctor = (remaining as ClassMember[]).find(
+          (m) => m.type === 'ClassMethod' && m.kind === 'constructor',
+        );
+
+        if (!ctor) return;
+
+        const assignments = fieldsToMove.map((field) => ({
+          type: 'ExpressionStatement',
+          expression: {
+            type: 'AssignmentExpression',
+            operator: '=',
+            left: {
+              type: 'MemberExpression',
+              object: { type: 'ThisExpression' },
+              property: { type: 'Identifier', name: field.key!.name },
+              computed: false,
+            },
+            right: field.value,
+          },
+        }));
+
+        const ctorBody = ctor.body!.body;
+
+        const paramNames = new Set(
+          (ctor.params ?? []).map((p) => p.name ?? p.left?.name).filter(Boolean),
+        );
+
+        const superCallIdx = ctorBody.findIndex(
+          (stmt) => stmt.type === 'ExpressionStatement'
+            && stmt.expression?.type === 'CallExpression'
+            && stmt.expression?.callee?.type === 'Super',
+        );
+
+        let insertIdx = superCallIdx !== -1 ? superCallIdx + 1 : 0;
+
+        while (insertIdx < ctorBody.length) {
+          const stmt = ctorBody[insertIdx];
+          if (
+            stmt.type === 'ExpressionStatement'
+            && stmt.expression?.type === 'AssignmentExpression'
+            && stmt.expression.operator === '='
+            && stmt.expression.left?.type === 'MemberExpression'
+            && stmt.expression.left.object?.type === 'ThisExpression'
+            && stmt.expression.right?.type === 'Identifier'
+            && paramNames.has(stmt.expression.right.name)
+          ) {
+            insertIdx += 1;
+          } else {
+            break;
+          }
+        }
+
+        ctorBody.splice(insertIdx, 0, ...assignments);
+
+        path.node.body.body = remaining;
+      },
+    },
+  };
+}
+
+export default function devextremeInfernoPlugin(): PluginOption {
+  return {
+    name: 'devextreme-inferno',
+    enforce: 'pre',
+
+    async transform(code: string, id: string) {
+      if (!/\.[jt]sx?$/.test(id) || id.includes('node_modules')) {
+        return null;
+      }
+
+      const isTSX = id.endsWith('.tsx');
+      const isTS = id.endsWith('.ts') || isTSX;
+
+      const plugins: unknown[] = [];
+
+      if (isTS) {
+        plugins.push([
+          '@babel/plugin-transform-typescript',
+          {
+            isTSX,
+            allExtensions: true,
+            allowDeclareFields: true,
+            optimizeConstEnums: true,
+          },
+        ]);
+      }
+
+      plugins.push(
+        removeCjsExportsAssignments,
+        removeUninitializedClassFields,
+        moveFieldInitializersToConstructor,
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        'babel-plugin-inferno',
+      );
+
+      const result = await transformAsync(code, {
+        filename: id,
+        plugins,
+        sourceMaps: true,
+      });
+
+      if (!result?.code) {
+        return null;
+      }
+
+      return { code: result.code, map: result.map };
+    },
+  };
+}
diff --git a/packages/devextreme/eslint.config.mjs b/packages/devextreme/eslint.config.mjs
index b971ed40dfaa..e148c46f5d32 100644
--- a/packages/devextreme/eslint.config.mjs
+++ b/packages/devextreme/eslint.config.mjs
@@ -41,6 +41,7 @@ export default [
             'themebuilder-scss/src/data/metadata/*',
             'js/bundles/dx.custom.js',
             'testing/jest/utils/transformers/*',
+            'vite.config.ts',
             '**/ts/',
             'js/common/core/localization/cldr-data/*',
             'js/common/core/localization/default_messages.js',
diff --git a/packages/devextreme/js/__internal/scheduler/utils/resource_manager/resource_manager.ts b/packages/devextreme/js/__internal/scheduler/utils/resource_manager/resource_manager.ts
index 98a66f5c01f7..5dc2eea7c483 100644
--- a/packages/devextreme/js/__internal/scheduler/utils/resource_manager/resource_manager.ts
+++ b/packages/devextreme/js/__internal/scheduler/utils/resource_manager/resource_manager.ts
@@ -15,17 +15,23 @@ import { groupResources } from './group_utils';
 import type { GroupLeaf, GroupNode } from './types';
 
 export class ResourceManager {
-  public resources: ResourceLoader[] = [];
+  public resources: ResourceLoader[];
 
-  public resourceById: Record<string, ResourceLoader> = {};
+  public resourceById: Record<string, ResourceLoader>;
 
-  public groups: string[] = [];
+  public groups: string[];
 
-  public groupsLeafs: GroupLeaf[] = [];
+  public groupsLeafs: GroupLeaf[];
 
-  public groupsTree: GroupNode[] = [];
+  public groupsTree: GroupNode[];
 
   constructor(config: ResourceConfig[]) {
+    this.resources = [];
+    this.resourceById = {};
+    this.groups = [];
+    this.groupsLeafs = [];
+    this.groupsTree = [];
+
     config?.filter(getResourceIndex)
       .forEach((item) => {
         const loader = new ResourceLoader(item);
diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_virtual_scrolling.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_virtual_scrolling.ts
index 55523a568f96..75d95cbf125f 100644
--- a/packages/devextreme/js/__internal/scheduler/workspaces/m_virtual_scrolling.ts
+++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_virtual_scrolling.ts
@@ -338,17 +338,22 @@ export class VirtualScrollingDispatcher {
 }
 
 class VirtualScrollingBase {
-  _state = this.defaultState;
+  _state: any;
 
-  viewportSize = this.options.viewportSize;
+  viewportSize: number;
 
-  _itemSize = this.options.itemSize;
+  _itemSize: number;
 
-  _position = -1;
+  _position: number;
 
-  _itemSizeChanged = false;
+  _itemSizeChanged: boolean;
 
   constructor(public options: any) {
+    this._state = this.defaultState;
+    this.viewportSize = options.viewportSize;
+    this._itemSize = options.itemSize;
+    this._position = -1;
+    this._itemSizeChanged = false;
     this.updateState(0);
   }
 
diff --git a/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts b/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
index e73e8e921c34..97b1dff5524e 100644
--- a/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
+++ b/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
@@ -60,33 +60,39 @@ export interface DataAdapterOptions {
 SearchBoxController.setEditorClass(TextBox);
 
 class DataAdapter {
-  options: DataAdapterOptions = {
-    dataAccessors: {} as DataAccessors,
-    items: [],
-    multipleSelection: true,
-    recursiveSelection: false,
-    recursiveExpansion: false,
-    rootValue: 0,
-    searchValue: '',
-    dataType: 'tree',
-    searchMode: 'contains',
-    dataConverter: new HierarchicalDataConverter(),
-    onNodeChanged: noop,
-    sort: null,
-    disabledNodeSelectionMode: 'recursiveAndAll',
-  };
+  options: DataAdapterOptions;
 
-  _disabledNodesKeys: ItemKey[] = [];
+  _disabledNodesKeys: ItemKey[];
 
-  _selectedNodesKeys: ItemKey[] = [];
+  _selectedNodesKeys: ItemKey[];
 
-  _expandedNodesKeys: ItemKey[] = [];
+  _expandedNodesKeys: ItemKey[];
 
-  _dataStructure: (InternalNode | null)[] = [];
+  _dataStructure: (InternalNode | null)[];
 
-  _initialDataStructure: (InternalNode | null)[] = [];
+  _initialDataStructure: (InternalNode | null)[];
 
   constructor(options: DataAdapterOptions) {
+    this.options = {
+      dataAccessors: {} as DataAccessors,
+      items: [],
+      multipleSelection: true,
+      recursiveSelection: false,
+      recursiveExpansion: false,
+      rootValue: 0,
+      searchValue: '',
+      dataType: 'tree',
+      searchMode: 'contains',
+      dataConverter: new HierarchicalDataConverter(),
+      onNodeChanged: noop,
+      sort: null,
+      disabledNodeSelectionMode: 'recursiveAndAll',
+    };
+    this._disabledNodesKeys = [];
+    this._selectedNodesKeys = [];
+    this._expandedNodesKeys = [];
+    this._dataStructure = [];
+    this._initialDataStructure = [];
     extend(this.options, options);
     this.options.dataConverter.setDataAccessors(this.options.dataAccessors);
 
diff --git a/packages/devextreme/package.json b/packages/devextreme/package.json
index 4a3b326af28e..4cca05c5feaa 100644
--- a/packages/devextreme/package.json
+++ b/packages/devextreme/package.json
@@ -69,9 +69,13 @@
     "@babel/core": "7.29.0",
     "@babel/eslint-parser": "catalog:",
     "@babel/parser": "7.29.0",
+    "@babel/plugin-proposal-decorators": "7.23.9",
+    "@babel/plugin-transform-class-properties": "7.23.3",
     "@babel/plugin-transform-modules-commonjs": "7.28.6",
     "@babel/plugin-transform-runtime": "7.29.0",
+    "@babel/plugin-transform-typescript": "7.23.6",
     "@babel/preset-env": "7.29.0",
+    "@babel/preset-typescript": "7.23.3",
     "@devextreme-generator/angular": "3.0.12",
     "@devextreme-generator/build-helpers": "3.0.12",
     "@devextreme-generator/core": "3.0.12",
@@ -211,6 +215,8 @@
     "uuid": "9.0.1",
     "vinyl": "2.2.1",
     "vinyl-named": "1.1.0",
+    "@playwright/test": "^1.50.0",
+    "vite": "^7.1.3",
     "webpack": "5.105.4",
     "webpack-stream": "7.0.0",
     "yaml": "2.5.0",
@@ -246,6 +252,9 @@
     "validate-ts": "gulp validate-ts",
     "validate-declarations": "dx-tools validate-declarations --sources ./js --exclude \"js/(renovation|__internal|.eslintrc.js)\" --compiler-options \"{ \\\"typeRoots\\\": [] }\"",
     "testcafe-in-docker": "docker build -f ./testing/testcafe/docker/Dockerfile -t testcafe-testing . && docker run -it testcafe-testing",
+    "dev:playground": "vite",
+    "build:playground": "vite build",
+    "test:playground": "playwright test --config playground/playwright.config.ts",
     "test-jest": "cross-env NODE_OPTIONS='--expose-gc' jest --no-coverage --runInBand --selectProjects jsdom-tests",
     "test-jest:watch": "jest --watch",
     "test-jest:node": "jest --no-coverage --runInBand --selectProjects node-tests",
diff --git a/packages/devextreme/playground/catalog.ts b/packages/devextreme/playground/catalog.ts
new file mode 100644
index 000000000000..6d59cf638142
--- /dev/null
+++ b/packages/devextreme/playground/catalog.ts
@@ -0,0 +1,412 @@
+import '../js/integration/jquery';
+import { setLicenseCheckSkipCondition } from '../js/__internal/core/license/license_validation';
+import $ from 'jquery';
+import { registry } from './widgets/registry';
+import type { WidgetInit } from './widgets/registry';
+import { setupThemeSelector } from './newThemeSelector';
+import type { WidgetId } from './widget-ids';
+import demosMeta from 'virtual:demos-meta';
+
+const { demosRoot, demos: demosMap } = demosMeta;
+
+setLicenseCheckSkipCondition();
+
+const RECENTS_KEY = 'dx-playground-recents';
+const PINNED_KEY = 'dx-playground-pinned';
+const PINNED_DEMOS_KEY = 'dx-playground-pinned-demos';
+const RECENT_DEMOS_KEY = 'dx-playground-recent-demos';
+const MAX_RECENTS = 5;
+const MAX_RECENT_DEMOS = 20;
+
+interface PinnedDemo { widget: string; name: string; title: string }
+interface RecentDemo { widget: string; name: string }
+
+const widgetGroups: { label: string; ids: WidgetId[] }[] = [
+    {
+        label: 'Grids',
+        ids: ['dataGrid', 'cardView', 'treeList', 'filterBuilder', 'sortable', 'draggable'],
+    },
+    {
+        label: 'Scheduler',
+        ids: ['scheduler', 'pivotGrid', 'pivotGridFieldChooser', 'pagination', 'gantt', 'recurrenceEditor'],
+    },
+    {
+        label: 'Editors',
+        ids: [
+            'autocomplete', 'calendar', 'chat', 'checkBox', 'colorBox', 'dateBox', 'dateRangeBox',
+            'dropDownBox', 'dropDownButton', 'fileUploader', 'htmlEditor', 'loadPanel', 'lookup',
+            'map', 'numberBox', 'popover', 'popup', 'progressBar', 'radioGroup', 'rangeSlider',
+            'selectBox', 'slider', 'switch', 'tagBox', 'textArea', 'textBox', 'toast', 'tooltip',
+            'validationGroup', 'validationSummary', 'validator',
+        ],
+    },
+    {
+        label: 'Navigation',
+        ids: [
+            'accordion', 'actionSheet', 'box', 'button', 'buttonGroup', 'contextMenu', 'diagram',
+            'drawer', 'fileManager', 'form', 'gallery', 'list', 'loadIndicator', 'menu', 'multiView',
+            'resizable', 'responsiveBox', 'scrollView', 'speedDialAction', 'splitter', 'stepper',
+            'tabPanel', 'tabs', 'tileView', 'toolbar', 'treeView',
+            'barGauge', 'bullet', 'chart', 'circularGauge', 'funnel', 'linearGauge', 'pieChart',
+            'polarChart', 'rangeSelector', 'sankey', 'sparkline', 'treeMap', 'vectorMap',
+        ],
+    },
+];
+
+function getPinned(): WidgetId[] {
+    try {
+        return JSON.parse(localStorage.getItem(PINNED_KEY) ?? '[]') as WidgetId[];
+    } catch {
+        return [];
+    }
+}
+
+function isPinned(id: WidgetId): boolean {
+    return getPinned().includes(id);
+}
+
+function togglePin(id: WidgetId): void {
+    const pinned = getPinned();
+    const idx = pinned.indexOf(id);
+    if (idx === -1) {
+        pinned.push(id);
+    } else {
+        pinned.splice(idx, 1);
+    }
+    localStorage.setItem(PINNED_KEY, JSON.stringify(pinned));
+    renderPinned();
+    buildNav($('#search').val() as string);
+}
+
+function getPinnedDemos(): PinnedDemo[] {
+    try {
+        return JSON.parse(localStorage.getItem(PINNED_DEMOS_KEY) ?? '[]') as PinnedDemo[];
+    } catch {
+        return [];
+    }
+}
+
+function isDemoPinned(widget: string, name: string): boolean {
+    return getPinnedDemos().some((d) => d.widget === widget && d.name === name);
+}
+
+function toggleDemoPin(widget: string, name: string, title: string): void {
+    const demos = getPinnedDemos();
+    const idx = demos.findIndex((d) => d.widget === widget && d.name === name);
+    if (idx === -1) {
+        demos.push({ widget, name, title });
+    } else {
+        demos.splice(idx, 1);
+    }
+    localStorage.setItem(PINNED_DEMOS_KEY, JSON.stringify(demos));
+    renderPinned();
+}
+
+function renderPinned(): void {
+    const $section = $('#pinned-section');
+    const $list = $('#pinned-list');
+    const pinned = getPinned().filter((id) => registry[id]);
+    const pinnedDemos = getPinnedDemos();
+
+    $list.empty();
+
+    if (pinned.length === 0 && pinnedDemos.length === 0) {
+        $section.hide();
+        return;
+    }
+
+    $section.show();
+
+    const currentHash = location.hash.slice(1);
+
+    pinned.forEach((id) => {
+        const entry = registry[id];
+        const $li = $('<li class="pinned-item">').appendTo($list);
+        $('<a>').attr('href', `#${id}`).text(entry.label).toggleClass('active', id === currentHash).appendTo($li);
+        $('<button class="btn-unpin" title="Unpin">×</button>')
+            .on('click', (e) => { e.preventDefault(); togglePin(id); })
+            .appendTo($li);
+    });
+
+    pinnedDemos.forEach(({ widget, name, title }) => {
+        const hash = `demo/${widget}/${name}`;
+        const $li = $('<li class="pinned-item pinned-demo">').appendTo($list);
+        $('<a>').attr('href', `#${hash}`).toggleClass('active', currentHash === hash)
+            .html(`<span class="pinned-demo-badge">${widget}</span>${title}`)
+            .appendTo($li);
+        $('<button class="btn-unpin" title="Unpin">×</button>')
+            .on('click', (e) => { e.preventDefault(); toggleDemoPin(widget, name, title); })
+            .appendTo($li);
+    });
+}
+
+function getRecentDemos(): RecentDemo[] {
+    try {
+        return JSON.parse(localStorage.getItem(RECENT_DEMOS_KEY) ?? '[]') as RecentDemo[];
+    } catch {
+        return [];
+    }
+}
+
+function pushRecentDemo(widget: string, name: string): void {
+    const recents = getRecentDemos().filter((d) => !(d.widget === widget && d.name === name));
+    recents.unshift({ widget, name });
+    localStorage.setItem(RECENT_DEMOS_KEY, JSON.stringify(recents.slice(0, MAX_RECENT_DEMOS)));
+}
+
+function getDemoChipColors(widget: string, name: string): { borderColor: string; color: string; background: string } {
+    const idx = getRecentDemos().findIndex((d) => d.widget === widget && d.name === name);
+    if (idx === -1) {
+        return { borderColor: 'hsl(217, 8%, 78%)', color: 'hsl(217, 8%, 58%)', background: '#fff' };
+    }
+    const t = idx / Math.max(MAX_RECENT_DEMOS - 1, 1);
+    const s = Math.round(78 - t * 58);
+    const borderL = Math.round(54 + t * 18);
+    const textL = Math.round(34 + t * 18);
+    const bgL = Math.round(95 + t * 3);
+    return {
+        borderColor: `hsl(217, ${s}%, ${borderL}%)`,
+        color: `hsl(217, ${s}%, ${textL}%)`,
+        background: `hsl(217, ${s}%, ${bgL}%)`,
+    };
+}
+
+function getRecents(): WidgetId[] {
+    try {
+        return JSON.parse(localStorage.getItem(RECENTS_KEY) ?? '[]') as WidgetId[];
+    } catch {
+        return [];
+    }
+}
+
+function pushRecent(id: WidgetId): void {
+    const recents = getRecents().filter((r) => r !== id);
+    recents.unshift(id);
+    localStorage.setItem(RECENTS_KEY, JSON.stringify(recents.slice(0, MAX_RECENTS)));
+    renderRecents();
+}
+
+function deleteRecent(id: WidgetId): void {
+    const recents = getRecents().filter((r) => r !== id);
+    localStorage.setItem(RECENTS_KEY, JSON.stringify(recents));
+    renderRecents();
+}
+
+function renderRecents(): void {
+    const $section = $('#recents-section');
+    const $list = $('#recents-list');
+    const recents = getRecents().filter((id) => registry[id]);
+
+    $list.empty();
+
+    if (recents.length === 0) {
+        $section.hide();
+        return;
+    }
+
+    $section.show();
+
+    const currentId = location.hash.slice(1);
+
+    recents.forEach((id) => {
+        const entry = registry[id];
+        const $li = $('<li class="recent-item">').appendTo($list);
+        $('<a>').attr('href', `#${id}`).text(entry.label).toggleClass('active', id === currentId).appendTo($li);
+        $('<button class="btn-remove-recent" title="Remove">×</button>')
+            .on('click', (e) => {
+                e.preventDefault();
+                deleteRecent(id);
+            })
+            .appendTo($li);
+    });
+}
+
+function buildNav(filter: string): void {
+    const $nav = $('#groups-nav');
+    $nav.empty();
+    const lc = filter.toLowerCase();
+    const currentHash = location.hash.slice(1);
+
+    widgetGroups.forEach((group) => {
+        const matching = group.ids.filter((id) => {
+            if (!registry[id]) return false;
+            if (!lc) return true;
+            const widgetMatches = registry[id].label.toLowerCase().includes(lc) || id.toLowerCase().includes(lc);
+            const demoMatches = (demosMap[getWidgetName(id as WidgetId)] ?? []).some(
+                (d) => d.title.toLowerCase().includes(lc) || d.name.toLowerCase().includes(lc),
+            );
+            return widgetMatches || demoMatches;
+        });
+
+        if (matching.length === 0) return;
+
+        const $details = $('<details>').attr('open', '').appendTo($nav);
+        $('<summary class="group-summary">').text(group.label).appendTo($details);
+        const $ul = $('<ul class="group-list">').appendTo($details);
+
+        matching.forEach((id) => {
+            const $li = $('<li>').appendTo($ul);
+            $('<a>')
+                .attr('href', `#${id}`)
+                .text(registry[id].label)
+                .toggleClass('active', id === currentHash)
+                .appendTo($li);
+            $('<button class="btn-pin" title="Pin">')
+                .text('◈')
+                .toggleClass('pinned', isPinned(id))
+                .on('click', (e) => {
+                    e.preventDefault();
+                    togglePin(id);
+                })
+                .appendTo($li);
+
+            if (lc) {
+                const widgetName = getWidgetName(id as WidgetId);
+                const widgetMatches = registry[id].label.toLowerCase().includes(lc) || id.toLowerCase().includes(lc);
+                const matchingDemos = (demosMap[widgetName] ?? []).filter(
+                    (d) => d.title.toLowerCase().includes(lc) || d.name.toLowerCase().includes(lc),
+                );
+                if (!widgetMatches && matchingDemos.length > 0) {
+                    const $demos = $('<ul class="demo-search-results">').appendTo($li);
+                    matchingDemos.forEach((d) => {
+                        const hash = `demo/${widgetName}/${d.name}`;
+                        $('<li>').append(
+                            $('<a class="demo-search-link">')
+                                .attr('href', `#${hash}`)
+                                .toggleClass('active', currentHash === hash)
+                                .text(d.title),
+                        ).appendTo($demos);
+                    });
+                }
+            }
+        });
+    });
+}
+
+function setActiveLink(id: string): void {
+    $('#groups-nav a, #recents-list a, #pinned-list a').removeClass('active');
+    $(`#groups-nav a[href="#${CSS.escape(id)}"], #recents-list a[href="#${CSS.escape(id)}"], #pinned-list a[href="#${CSS.escape(id)}"]`).addClass('active');
+}
+
+const $header = $('#header');
+const $container = $('#container');
+
+function getWidgetName(id: WidgetId): string {
+    return registry[id].label.replace(/\s/g, '');
+}
+
+function renderDemoLinks(id: WidgetId): void {
+    const widgetName = getWidgetName(id);
+    const demos = demosMap[widgetName] ?? [];
+    if (demos.length === 0) return;
+
+    const $section = $('<div class="demo-list">').appendTo($container);
+    $('<div class="demo-list-caption">').text('Official Demos').appendTo($section);
+    const $chips = $('<div class="demo-chips">').appendTo($section);
+
+    demos.forEach(({ title, name }) => {
+        const colors = getDemoChipColors(widgetName, name);
+        $('<a class="demo-chip">')
+            .attr('href', `#demo/${widgetName}/${name}`)
+            .text(title)
+            .css({ borderColor: colors.borderColor, color: colors.color, background: colors.background })
+            .appendTo($chips);
+    });
+}
+
+function loadWidget(id: string): void {
+    const entry = registry[id as WidgetId];
+    if (!entry) return;
+
+    setActiveLink(id);
+    $header.text(entry.label);
+    $container.empty();
+
+    const $el = $('<div>').appendTo($container);
+    (entry.init as WidgetInit)($el);
+
+    renderDemoLinks(id as WidgetId);
+
+    pushRecent(id as WidgetId);
+    setActiveLink(id);
+}
+
+function loadDemo(widget: string, name: string): void {
+    const entry = demosMap[widget]?.find((d) => d.name === name);
+    const title = entry?.title ?? name;
+
+    $header.empty();
+    $('<a class="demo-back">').attr('href', `#${findWidgetId(widget) ?? ''}`).text(`← ${widget}`).appendTo($header);
+    $('<span class="demo-header-title">').text(`\u00a0\u00a0${title}`).appendTo($header);
+    $('<button class="btn-pin-demo-header" title="Pin demo">')
+        .text('◈')
+        .toggleClass('pinned', isDemoPinned(widget, name))
+        .on('click', function () {
+            toggleDemoPin(widget, name, title);
+            $(this).toggleClass('pinned', isDemoPinned(widget, name));
+        })
+        .appendTo($header);
+
+    $container.empty();
+
+    if (demosRoot && entry?.files.length) {
+        const jqueryDir = `${demosRoot}/${widget}/${name}/jQuery`;
+        const $bar = $('<div class="demo-files-bar">').appendTo($container);
+        $('<span class="demo-files-label">').text('Source:').appendTo($bar);
+        entry.files.forEach((file) => {
+            $('<a class="demo-file-link">')
+                .attr('href', `vscode://file/${jqueryDir}/${file}`)
+                .text(file)
+                .appendTo($bar);
+        });
+    }
+
+    $('<iframe>')
+        .attr('src', `demos/${widget}/${name}/`)
+        .css({ width: '100%', border: 'none', display: 'block', flex: '1' })
+        .appendTo($container);
+
+    pushRecentDemo(widget, name);
+    renderPinned();
+}
+
+function findWidgetId(widgetName: string): WidgetId | undefined {
+    return Object.keys(registry).find(
+        (id) => registry[id as WidgetId].label.replace(/\s/g, '') === widgetName,
+    ) as WidgetId | undefined;
+}
+
+$('#search').on('input', function () {
+    buildNav((this as HTMLInputElement).value);
+});
+
+window.addEventListener('hashchange', () => {
+    const hash = location.hash.slice(1);
+    if (hash.startsWith('demo/')) {
+        const parts = hash.split('/');
+        loadDemo(parts[1], parts[2]);
+    } else {
+        loadWidget(hash);
+    }
+});
+
+setupThemeSelector('theme-selector').then(() => {
+    buildNav('');
+    renderPinned();
+    renderRecents();
+
+    const hash = location.hash.slice(1);
+    if (hash.startsWith('demo/')) {
+        const parts = hash.split('/');
+        loadDemo(parts[1], parts[2]);
+        return;
+    }
+
+    if (hash && registry[hash as WidgetId]) {
+        loadWidget(hash);
+    } else {
+        const lastRecent = getRecents()[0];
+        const target = lastRecent ?? widgetGroups[0].ids[0];
+        location.hash = target;
+    }
+});
diff --git a/packages/devextreme/playground/demo-init.ts b/packages/devextreme/playground/demo-init.ts
new file mode 100644
index 000000000000..7e26409a3d70
--- /dev/null
+++ b/packages/devextreme/playground/demo-init.ts
@@ -0,0 +1,182 @@
+import jq from 'jquery';
+import '../js/integration/jquery';
+import { setLicenseCheckSkipCondition } from '../js/__internal/core/license/license_validation';
+import { patchAspNetCreateStore, setupFakeSignalR } from './fake-server';
+import ArrayStore from '../js/data/array_store';
+import CustomStore from '../js/data/custom_store';
+import DataSource from '../js/data/data_source';
+import query from '../js/data/query';
+import notify from '../js/ui/notify';
+import * as dialog from '../js/ui/dialog';
+import * as localization from '../js/localization';
+import * as timeZoneUtils from '../js/time_zone_utils';
+import config from '../js/core/config';
+import setTemplateEngine from '../js/core/set_template_engine';
+import { Guid } from '../js/__internal/core/m_guid';
+import {
+    getPalette,
+    registerPalette,
+    currentPalette,
+    generateColors,
+} from '../js/viz/palette';
+import repaintFloatingActionButton from '../js/ui/speed_dial_action/repaint_floating_action_button';
+import Ajax from '../js/core/utils/ajax';
+import RemoteFileSystemProvider from '../js/file_management/remote_provider';
+import { registerPattern, registerGradient } from '../js/common/charts';
+
+(window as any).$ = (window as any).jQuery = jq;
+
+const AspNet = {
+    createStore(options: any) {
+        return new CustomStore({
+            key: options.key,
+            load: (loadOptions: any) => Ajax.sendRequest({
+                url: options.loadUrl,
+                method: 'GET',
+                data: loadOptions,
+                dataType: 'json',
+            }),
+            insert: options.insertUrl ? (values: any) => Ajax.sendRequest({
+                url: options.insertUrl,
+                method: 'POST',
+                data: JSON.stringify(values),
+                contentType: 'application/json',
+                dataType: 'json',
+            }) : undefined,
+            update: options.updateUrl ? (key: any, values: any) => Ajax.sendRequest({
+                url: options.updateUrl,
+                method: 'PUT',
+                data: JSON.stringify({ key, values }),
+                contentType: 'application/json',
+                dataType: 'json',
+            }) : undefined,
+            remove: options.deleteUrl ? (key: any) => Ajax.sendRequest({
+                url: options.deleteUrl,
+                method: 'DELETE',
+                data: JSON.stringify(key),
+                contentType: 'application/json',
+                dataType: 'json',
+            }) : undefined,
+        });
+    },
+    sendRequest: (options: any) => Ajax.sendRequest(options),
+};
+
+patchAspNetCreateStore(AspNet);
+setupFakeSignalR();
+
+(window as any).DevExpress = {
+    config,
+    setTemplateEngine,
+    data: { ArrayStore, CustomStore, DataSource, query, Guid, AspNet },
+    ui: { notify, dialog, repaintFloatingActionButton },
+    localization,
+    utils: { getTimeZones: timeZoneUtils.getTimeZones, ajax: Ajax },
+    viz: { getPalette, registerPalette, currentPalette, generateColors, map: { sources: {} } },
+    fileManagement: { RemoteFileSystemProvider },
+    common: { charts: { registerPattern, registerGradient } },
+};
+
+import '../js/ui/accordion';
+import '../js/ui/card_view';
+import '../js/ui/action_sheet';
+import '../js/ui/autocomplete';
+import '../js/ui/box';
+import '../js/ui/button';
+import '../js/ui/button_group';
+import '../js/ui/calendar';
+import '../js/ui/chat';
+import '../js/ui/check_box';
+import '../js/ui/color_box';
+import '../js/ui/context_menu';
+import '../js/ui/data_grid';
+import '../js/ui/date_box';
+import '../js/ui/date_range_box';
+import '../js/ui/diagram';
+import '../js/ui/draggable';
+import '../js/ui/drawer';
+import '../js/ui/drop_down_box';
+import '../js/ui/drop_down_button';
+import '../js/ui/file_manager';
+import '../js/ui/file_uploader';
+import '../js/ui/filter_builder';
+import '../js/ui/form';
+import '../js/ui/gallery';
+import '../js/ui/gantt';
+import '../js/ui/html_editor';
+import '../js/ui/list';
+import '../js/ui/load_indicator';
+import '../js/ui/load_panel';
+import '../js/ui/lookup';
+import '../js/ui/map';
+import '../js/ui/menu';
+import '../js/ui/multi_view';
+import '../js/ui/number_box';
+import '../js/ui/pagination';
+import '../js/ui/pivot_grid';
+import '../js/ui/pivot_grid_field_chooser';
+import '../js/ui/popover';
+import '../js/ui/popup';
+import '../js/ui/progress_bar';
+import '../js/ui/radio_group';
+import '../js/ui/range_slider';
+import '../js/ui/recurrence_editor';
+import '../js/ui/resizable';
+import '../js/ui/responsive_box';
+import '../js/ui/scheduler';
+import '../js/ui/scroll_view';
+import '../js/ui/select_box';
+import '../js/ui/slider';
+import '../js/ui/sortable';
+import '../js/ui/speed_dial_action';
+import '../js/ui/splitter';
+import '../js/ui/stepper';
+import '../js/ui/switch';
+import '../js/ui/tab_panel';
+import '../js/ui/tabs';
+import '../js/ui/tag_box';
+import '../js/ui/text_area';
+import '../js/ui/text_box';
+import '../js/ui/tile_view';
+import '../js/ui/toast';
+import '../js/ui/toolbar';
+import '../js/ui/tooltip';
+import '../js/ui/tree_list';
+import '../js/ui/tree_view';
+import '../js/ui/validation_group';
+import '../js/ui/validation_summary';
+import '../js/ui/validator';
+import '../js/viz/bar_gauge';
+import '../js/viz/bullet';
+import '../js/viz/chart';
+import '../js/viz/circular_gauge';
+import '../js/viz/funnel';
+import '../js/viz/linear_gauge';
+import '../js/viz/pie_chart';
+import '../js/viz/polar_chart';
+import '../js/viz/range_selector';
+import '../js/viz/sankey';
+import '../js/viz/sparkline';
+import '../js/viz/tree_map';
+import '../js/viz/vector_map';
+
+setLicenseCheckSkipCondition();
+
+const themeLoaders = import.meta.glob('../artifacts/css/dx.*.css', { query: '?url', import: 'default' });
+const themeId = localStorage.getItem('currentThemeId');
+const themeKey = themeId
+    ? Object.keys(themeLoaders).find((p) => p.includes(`dx.${themeId}.css`))
+    : Object.keys(themeLoaders)[0];
+
+if (themeKey) {
+    const rawUrl = await (themeLoaders[themeKey] as () => Promise<string>)();
+    const url = new URL(rawUrl, import.meta.url).href;
+    await new Promise<void>((resolve) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = url;
+        link.onload = () => resolve();
+        link.onerror = () => resolve();
+        document.head.appendChild(link);
+    });
+}
diff --git a/packages/devextreme/playground/env.d.ts b/packages/devextreme/playground/env.d.ts
new file mode 100644
index 000000000000..32bcc8e01c46
--- /dev/null
+++ b/packages/devextreme/playground/env.d.ts
@@ -0,0 +1,6 @@
+declare module 'virtual:demos-meta' {
+    interface DemoEntry { title: string; name: string; files: string[] }
+    interface DemosMeta { demosRoot: string; demos: Record<string, DemoEntry[]> }
+    const demosMeta: DemosMeta;
+    export default demosMeta;
+}
diff --git a/packages/devextreme/playground/fake-server.ts b/packages/devextreme/playground/fake-server.ts
new file mode 100644
index 000000000000..3199fe53d875
--- /dev/null
+++ b/packages/devextreme/playground/fake-server.ts
@@ -0,0 +1,262 @@
+import CustomStore from '../js/data/custom_store';
+
+const MOCK_BASE = 'https://js.devexpress.com/Demos/NetCore/';
+
+// ---- Banner ----
+
+function showBanner(): void {
+    if (document.getElementById('dx-fake-server-banner')) return;
+    const el = document.createElement('div');
+    el.id = 'dx-fake-server-banner';
+    el.style.cssText = [
+        'position:fixed;top:0;left:0;right:0;z-index:99999',
+        'background:#fff3cd;border-bottom:2px solid #e6a817',
+        'color:#664d03;padding:5px 16px',
+        'font:12px/1.6 -apple-system,BlinkMacSystemFont,sans-serif',
+        'text-align:center;pointer-events:none',
+    ].join(';');
+    el.innerHTML = '&#9888;&nbsp;<b>Simulated server</b> &mdash; data is generated locally and changes are not persisted.';
+    document.body.appendChild(el);
+}
+
+// ---- Mock data ----
+
+const CUSTOMERS_LOOKUP = [
+    { Value: 'ALFKI', Text: 'Alfreds Futterkiste' },
+    { Value: 'ANATR', Text: 'Ana Trujillo' },
+    { Value: 'ANTON', Text: 'Antonio Moreno' },
+    { Value: 'AROUT', Text: 'Around the Horn' },
+    { Value: 'BERGS', Text: 'Berglunds snabbköp' },
+    { Value: 'BLAUS', Text: 'Blauer See Delikatessen' },
+    { Value: 'BONAP', Text: "Bon app'" },
+    { Value: 'BOTTM', Text: 'Bottom-Dollar Markets' },
+    { Value: 'BSBEV', Text: "B's Beverages" },
+    { Value: 'CACTU', Text: 'Cactus Comidas para llevar' },
+];
+
+const SHIPPERS_LOOKUP = [
+    { Value: 1, Text: 'Speedy Express' },
+    { Value: 2, Text: 'United Package' },
+    { Value: 3, Text: 'Federal Shipping' },
+];
+
+const COUNTRIES = ['Germany', 'France', 'UK', 'USA', 'Brazil', 'Canada', 'Australia', 'Japan', 'Mexico', 'Spain'];
+
+const ORDERS: any[] = Array.from({ length: 50 }, (_, i) => ({
+    OrderID: 10000 + i,
+    CustomerID: CUSTOMERS_LOOKUP[i % CUSTOMERS_LOOKUP.length].Value,
+    OrderDate: new Date(2021, i % 12, (i % 28) + 1),
+    Freight: Math.round(((i * 17.3 + 12.5) % 2000) * 100) / 100,
+    ShipCountry: COUNTRIES[i % COUNTRIES.length],
+    ShipVia: (i % 3) + 1,
+}));
+
+const ORDER_DETAILS: any[] = Array.from({ length: 80 }, (_, i) => ({
+    OrderID: 10000 + (i % 50),
+    ProductName: ['Widget A', 'Widget B', 'Gadget Pro', 'Device X', 'Component Y'][i % 5],
+    UnitPrice: Math.round(((i * 4.7 + 5) % 200) * 100) / 100,
+    Quantity: (i % 20) + 1,
+    Discount: (i % 5) * 0.05,
+}));
+
+const TASK_EMPLOYEES = [
+    { ID: 1, Name: 'John Heart' },
+    { ID: 2, Name: 'Samantha Bright' },
+    { ID: 3, Name: 'Arthur Miller' },
+    { ID: 4, Name: 'Robert Reagan' },
+    { ID: 5, Name: 'Greta Sims' },
+];
+
+const TASKS: any[] = [
+    { Task_ID: 1, Task_Subject: 'Software Development', Task_Status: 'In Progress', Task_Priority: 'High', Task_Assigned_Employee_ID: 1, Task_Start_Date: '2021-04-01T00:00:00', Task_Due_Date: '2021-04-30T00:00:00', Task_Completion: 0.35, Task_Parent_ID: null, Has_Items: true },
+    { Task_ID: 2, Task_Subject: 'Planning', Task_Status: 'Completed', Task_Priority: 'Normal', Task_Assigned_Employee_ID: 1, Task_Start_Date: '2021-04-01T00:00:00', Task_Due_Date: '2021-04-05T00:00:00', Task_Completion: 1, Task_Parent_ID: 1, Has_Items: false },
+    { Task_ID: 3, Task_Subject: 'Back-end Development', Task_Status: 'In Progress', Task_Priority: 'High', Task_Assigned_Employee_ID: 2, Task_Start_Date: '2021-04-05T00:00:00', Task_Due_Date: '2021-04-20T00:00:00', Task_Completion: 0.6, Task_Parent_ID: 1, Has_Items: false },
+    { Task_ID: 4, Task_Subject: 'Front-end Development', Task_Status: 'In Progress', Task_Priority: 'High', Task_Assigned_Employee_ID: 3, Task_Start_Date: '2021-04-10T00:00:00', Task_Due_Date: '2021-04-25T00:00:00', Task_Completion: 0.4, Task_Parent_ID: 1, Has_Items: false },
+    { Task_ID: 5, Task_Subject: 'Testing', Task_Status: 'Not Started', Task_Priority: 'Urgent', Task_Assigned_Employee_ID: 4, Task_Start_Date: '2021-04-25T00:00:00', Task_Due_Date: '2021-04-30T00:00:00', Task_Completion: 0, Task_Parent_ID: 1, Has_Items: false },
+    { Task_ID: 6, Task_Subject: 'Design', Task_Status: 'Completed', Task_Priority: 'Normal', Task_Assigned_Employee_ID: 5, Task_Start_Date: '2021-04-01T00:00:00', Task_Due_Date: '2021-04-10T00:00:00', Task_Completion: 1, Task_Parent_ID: null, Has_Items: false },
+    { Task_ID: 7, Task_Subject: 'Infrastructure', Task_Status: 'Deferred', Task_Priority: 'Low', Task_Assigned_Employee_ID: 2, Task_Start_Date: '2021-04-15T00:00:00', Task_Due_Date: '2021-04-30T00:00:00', Task_Completion: 0.1, Task_Parent_ID: null, Has_Items: true },
+    { Task_ID: 8, Task_Subject: 'Server Setup', Task_Status: 'Deferred', Task_Priority: 'Low', Task_Assigned_Employee_ID: 2, Task_Start_Date: '2021-04-15T00:00:00', Task_Due_Date: '2021-04-22T00:00:00', Task_Completion: 0, Task_Parent_ID: 7, Has_Items: false },
+    { Task_ID: 9, Task_Subject: 'DB Configuration', Task_Status: 'Deferred', Task_Priority: 'Low', Task_Assigned_Employee_ID: 3, Task_Start_Date: '2021-04-20T00:00:00', Task_Due_Date: '2021-04-30T00:00:00', Task_Completion: 0, Task_Parent_ID: 7, Has_Items: false },
+    { Task_ID: 10, Task_Subject: 'Documentation', Task_Status: 'Not Started', Task_Priority: 'Normal', Task_Assigned_Employee_ID: 5, Task_Start_Date: '2021-04-25T00:00:00', Task_Due_Date: '2021-04-30T00:00:00', Task_Completion: 0, Task_Parent_ID: null, Has_Items: false },
+];
+
+const APPOINTMENTS: any[] = [
+    { AppointmentId: 1, Text: 'Website Redesign', StartDate: '2021-04-27T09:00:00Z', EndDate: '2021-04-27T11:30:00Z', AllDay: false, Description: 'Plan the new website layout' },
+    { AppointmentId: 2, Text: 'Book Flights', StartDate: '2021-04-27T12:00:00Z', EndDate: '2021-04-27T13:00:00Z', AllDay: false, Description: '' },
+    { AppointmentId: 3, Text: 'Install New Router', StartDate: '2021-04-27T14:30:00Z', EndDate: '2021-04-27T15:30:00Z', AllDay: false, Description: '' },
+    { AppointmentId: 4, Text: 'Prepare Sales Presentation', StartDate: '2021-04-28T09:00:00Z', EndDate: '2021-04-28T12:00:00Z', AllDay: false, Description: 'Q2 results' },
+    { AppointmentId: 5, Text: 'Team Meeting', StartDate: '2021-04-28T14:00:00Z', EndDate: '2021-04-28T15:00:00Z', AllDay: false, Description: '' },
+    { AppointmentId: 6, Text: 'Code Review', StartDate: '2021-04-29T10:00:00Z', EndDate: '2021-04-29T12:00:00Z', AllDay: false, Description: '' },
+    { AppointmentId: 7, Text: 'Deploy to Production', StartDate: '2021-04-30T09:00:00Z', EndDate: '2021-04-30T11:00:00Z', AllDay: false, Description: '' },
+];
+
+const DIAGRAM_EMPLOYEES: any[] = [
+    { ID: 1, FullName: 'John Heart', Prefix: 'Mr.', Title: 'CEO', City: 'Los Angeles', State: 'CA', HireDate: '1995-01-15', HeadID: null },
+    { ID: 2, FullName: 'Samantha Bright', Prefix: 'Dr.', Title: 'COO', City: 'Los Angeles', State: 'CA', HireDate: '2004-05-24', HeadID: 1 },
+    { ID: 3, FullName: 'Arthur Miller', Prefix: 'Mr.', Title: 'CTO', City: 'Denver', State: 'CO', HireDate: '2011-02-01', HeadID: 1 },
+    { ID: 4, FullName: 'Robert Reagan', Prefix: 'Mr.', Title: 'CMO', City: 'Bentonville', State: 'AR', HireDate: '2005-06-28', HeadID: 1 },
+    { ID: 5, FullName: 'Greta Sims', Prefix: 'Ms.', Title: 'HR Manager', City: 'Los Angeles', State: 'CA', HireDate: '2009-04-14', HeadID: 2 },
+    { ID: 6, FullName: 'Brett Wade', Prefix: 'Mr.', Title: 'IT Manager', City: 'Atlanta', State: 'GA', HireDate: '2009-03-06', HeadID: 3 },
+    { ID: 7, FullName: 'Sandra Johnson', Prefix: 'Mrs.', Title: 'Controller', City: 'Los Angeles', State: 'CA', HireDate: '2005-05-11', HeadID: 2 },
+    { ID: 8, FullName: 'Kevin Carter', Prefix: 'Mr.', Title: 'Sr. Developer', City: 'San Jose', State: 'CA', HireDate: '2009-09-11', HeadID: 6 },
+    { ID: 9, FullName: 'Cynthia Stanwick', Prefix: 'Ms.', Title: 'Sr. Developer', City: 'San Jose', State: 'CA', HireDate: '2008-03-24', HeadID: 6 },
+    { ID: 10, FullName: 'Kent Nelson', Prefix: 'Mr.', Title: 'Jr. Developer', City: 'Atlanta', State: 'GA', HireDate: '2012-07-09', HeadID: 6 },
+];
+
+const COLLABORATIVE_ROWS: any[] = Array.from({ length: 20 }, (_, i) => ({
+    ID: i + 1,
+    Name: `Item ${i + 1}`,
+    Value: Math.round(Math.random() * 1000),
+    Status: ['Active', 'Inactive', 'Pending'][i % 3],
+}));
+
+// ---- SignalR mock data ----
+
+const STOCKS = ['MSFT', 'AAPL', 'GOOGL', 'AMZN', 'META', 'TSLA', 'NVDA', 'AMD', 'INTC', 'IBM', 'ORCL', 'SAP', 'CRM', 'ADBE', 'SNOW']
+    .map((symbol, i) => {
+        const base = 80 + i * 23.7;
+        return { symbol, price: base, change: 0, percentChange: 0, dayOpen: base, dayMin: base * 0.97, dayMax: base * 1.03, lastUpdate: new Date() };
+    });
+
+function generateChartTicks(): any[] {
+    const ticks = [];
+    const now = Date.now();
+    let price = 150;
+    for (let i = 200; i >= 0; i--) {
+        price += (Math.sin(i * 0.3) + (Math.random() - 0.5)) * 1.5;
+        ticks.push({ date: new Date(now - i * 10000).toISOString(), price: Math.round(price * 100) / 100, volume: Math.floor(Math.random() * 10000 + 1000) });
+    }
+    return ticks;
+}
+
+const CHART_TICKS = generateChartTicks();
+
+// ---- URL → data mapping ----
+
+function getStoreData(loadUrl: string, method: string): any[] | null {
+    if (loadUrl.includes('/DataGridWebApi/Orders')) return ORDERS;
+    if (loadUrl.includes('/DataGridWebApi/CustomersLookup')) return CUSTOMERS_LOOKUP;
+    if (loadUrl.includes('/DataGridWebApi/ShippersLookup')) return SHIPPERS_LOOKUP;
+    if (loadUrl.includes('/DataGridWebApi/OrderDetails')) return ORDER_DETAILS;
+    if (loadUrl.includes('/TreeListTasks/Tasks')) return TASKS;
+    if (loadUrl.includes('/TreeListTasks/TaskEmployees')) return TASK_EMPLOYEES;
+    if (loadUrl.includes('/SchedulerData') || loadUrl.includes('/SchedulerSignalR')) return APPOINTMENTS;
+    if (loadUrl.includes('/DiagramEmployees/Employees')) return DIAGRAM_EMPLOYEES;
+    if (loadUrl.includes('/DataGridCollaborativeEditing')) return COLLABORATIVE_ROWS;
+    if (method === 'INSERT' || method === 'UPDATE' || method === 'DELETE') return [];
+    return null;
+}
+
+function isMockUrl(url: string): boolean {
+    return url.startsWith(MOCK_BASE);
+}
+
+// ---- Override AspNet.createStore ----
+
+export function patchAspNetCreateStore(AspNet: any): void {
+    const orig = AspNet.createStore.bind(AspNet);
+    AspNet.createStore = function (options: any) {
+        const loadUrl: string = options.loadUrl ?? options.url ?? '';
+        if (!isMockUrl(loadUrl)) return orig(options);
+
+        showBanner();
+
+        const data = getStoreData(loadUrl, 'LOAD');
+        if (data === null) return orig(options);
+
+        return new CustomStore({
+            key: options.key,
+            load() {
+                return Promise.resolve({ data: [...data], totalCount: data.length });
+            },
+            insert(values: any) {
+                const maxId = data.reduce((m: any, r: any) => Math.max(m, r[options.key] ?? 0), 0);
+                const item = { [options.key]: maxId + 1, ...values };
+                data.push(item);
+                return Promise.resolve(item);
+            },
+            update(key: any, values: any) {
+                const idx = data.findIndex((r: any) => r[options.key] === key);
+                if (idx !== -1) Object.assign(data[idx], values);
+                return Promise.resolve(data[idx]);
+            },
+            remove(key: any) {
+                const idx = data.findIndex((r: any) => r[options.key] === key);
+                if (idx !== -1) data.splice(idx, 1);
+                return Promise.resolve();
+            },
+        });
+    };
+}
+
+// ---- Fake signalR ----
+
+class FakeHubConnection {
+    private _url: string;
+    private _handlers = new Map<string, (...args: any[]) => void>();
+    private _timers: ReturnType<typeof setInterval>[] = [];
+
+    constructor(url: string) {
+        this._url = url;
+    }
+
+    on(event: string, handler: (...args: any[]) => void): void {
+        this._handlers.set(event, handler);
+    }
+
+    async invoke(method: string): Promise<any> {
+        if (this._url.includes('liveUpdateSignalRHub') && method === 'getAllStocks') {
+            return [...STOCKS];
+        }
+        if (this._url.includes('stockTickDataHub') && method === 'getAllData') {
+            return [...CHART_TICKS];
+        }
+        return null;
+    }
+
+    async start(): Promise<void> {
+        showBanner();
+
+        if (this._url.includes('liveUpdateSignalRHub')) {
+            this._timers.push(setInterval(() => {
+                const stock = STOCKS[Math.floor(Math.random() * STOCKS.length)];
+                const delta = (Math.random() - 0.48) * stock.price * 0.005;
+                stock.price = Math.round((stock.price + delta) * 10000) / 10000;
+                stock.change = Math.round((stock.price - stock.dayOpen) * 10000) / 10000;
+                stock.percentChange = Math.round((stock.change / stock.dayOpen) * 1000000) / 10000;
+                stock.dayMin = Math.min(stock.dayMin, stock.price);
+                stock.dayMax = Math.max(stock.dayMax, stock.price);
+                stock.lastUpdate = new Date();
+                this._handlers.get('updateStockPrice')?.({ ...stock });
+            }, 400));
+        }
+
+        if (this._url.includes('stockTickDataHub')) {
+            this._timers.push(setInterval(() => {
+                const last = CHART_TICKS[CHART_TICKS.length - 1];
+                const delta = (Math.random() - 0.48) * 2;
+                const tick = { date: new Date().toISOString(), price: Math.round((last.price + delta) * 100) / 100, volume: Math.floor(Math.random() * 10000 + 1000) };
+                CHART_TICKS.push(tick);
+                this._handlers.get('updateStockPrice')?.({ ...tick });
+            }, 1000));
+        }
+    }
+
+    async stop(): Promise<void> {
+        this._timers.forEach(clearInterval);
+        this._timers = [];
+    }
+}
+
+export function setupFakeSignalR(): void {
+    (window as any).signalR = {
+        HubConnectionBuilder: class {
+            private _url = '';
+            withUrl(url: string) { this._url = url; return this; }
+            configureLogging() { return this; }
+            build() { return new FakeHubConnection(this._url); }
+        },
+        HttpTransportType: { WebSockets: 1, LongPolling: 4, ServerSentEvents: 2 },
+        LogLevel: { None: 0, Debug: 1, Information: 2, Warning: 3, Error: 4, Critical: 5 },
+    };
+}
diff --git a/packages/devextreme/playground/index.html b/packages/devextreme/playground/index.html
new file mode 100644
index 000000000000..2c18c04b7e9b
--- /dev/null
+++ b/packages/devextreme/playground/index.html
@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevExtreme Playground</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body { display: flex; height: 100vh; font-family: sans-serif; }
+
+        #sidebar {
+            width: 230px;
+            min-width: 230px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            border-right: 1px solid #ddd;
+            background: #f9f9f9;
+        }
+        #sidebar h2 {
+            padding: 10px 12px 6px;
+            font-size: 11px;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid #e8e8e8;
+            flex-shrink: 0;
+        }
+
+        #theme-selector {
+            margin: 6px 8px 0;
+            padding: 4px 6px;
+            font-size: 12px;
+            border: 1px solid #ddd;
+            background: #fff;
+            border-radius: 4px;
+            flex-shrink: 0;
+        }
+
+        #search {
+            margin: 6px 8px;
+            padding: 5px 8px;
+            font-size: 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #fff;
+            outline: none;
+            flex-shrink: 0;
+        }
+        #search:focus { border-color: #0d6efd; }
+
+        #sidebar-scroll {
+            flex: 1;
+            overflow-y: auto;
+            padding-bottom: 8px;
+        }
+
+        #recents-section { border-bottom: 1px solid #e8e8e8; padding-bottom: 4px; margin-bottom: 4px; }
+        .section-label {
+            padding: 6px 12px 2px;
+            font-size: 10px;
+            font-weight: 600;
+            color: #aaa;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        #recents-list { list-style: none; padding: 0; }
+        .recent-item {
+            display: flex;
+            align-items: center;
+        }
+        .recent-item a {
+            flex: 1;
+            display: block;
+            padding: 4px 12px;
+            font-size: 12px;
+            color: #555;
+            text-decoration: none;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .recent-item a:hover { background: #efefef; color: #222; }
+        .recent-item a.active { background: #0d6efd; color: #fff; }
+        .btn-remove-recent {
+            flex-shrink: 0;
+            padding: 0 8px;
+            height: 100%;
+            min-height: 24px;
+            background: none;
+            border: none;
+            color: #bbb;
+            cursor: pointer;
+            font-size: 14px;
+            line-height: 1;
+        }
+        .btn-remove-recent:hover { color: #e53e3e; }
+
+        #groups-nav details { }
+        .group-summary {
+            padding: 6px 12px;
+            font-size: 11px;
+            font-weight: 600;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            cursor: pointer;
+            user-select: none;
+            list-style: none;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .group-summary::-webkit-details-marker { display: none; }
+        .group-summary::before {
+            content: '▾';
+            font-size: 10px;
+            color: #bbb;
+            transition: transform 0.15s;
+        }
+        details:not([open]) .group-summary::before { transform: rotate(-90deg); }
+        .group-summary:hover { color: #555; }
+
+        #pinned-section { border-bottom: 1px solid #e8e8e8; padding-bottom: 4px; margin-bottom: 4px; }
+        #pinned-list { list-style: none; padding: 0; }
+        .pinned-item {
+            display: flex;
+            align-items: center;
+        }
+        .pinned-item a {
+            flex: 1;
+            display: block;
+            padding: 4px 8px 4px 10px;
+            font-size: 12px;
+            color: #555;
+            text-decoration: none;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .pinned-item a::before {
+            content: '◈';
+            font-size: 9px;
+            color: #888;
+            margin-right: 5px;
+            vertical-align: middle;
+        }
+        .pinned-item a:hover { background: #efefef; color: #222; }
+        .pinned-item a.active { background: #0d6efd; color: #fff; }
+        .pinned-item a.active::before { color: rgba(255,255,255,0.7); }
+        .pinned-demo-badge {
+            display: inline-block;
+            font-size: 9px;
+            font-weight: 600;
+            color: #888;
+            background: #eee;
+            border-radius: 3px;
+            padding: 1px 4px;
+            margin-right: 5px;
+            vertical-align: middle;
+            text-transform: none;
+            letter-spacing: 0;
+        }
+        .pinned-item.pinned-demo a::before { content: '▶'; font-size: 8px; }
+        .pinned-item a.active .pinned-demo-badge { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.2); }
+        .btn-unpin {
+            flex-shrink: 0;
+            padding: 0 8px;
+            height: 100%;
+            min-height: 24px;
+            background: none;
+            border: none;
+            color: #bbb;
+            cursor: pointer;
+            font-size: 14px;
+            line-height: 1;
+        }
+        .btn-unpin:hover { color: #e53e3e; }
+
+        .group-list { list-style: none; padding: 0; margin-bottom: 4px; }
+        .group-list li {
+            display: flex;
+            align-items: center;
+        }
+        .group-list li a {
+            flex: 1;
+            display: block;
+            padding: 4px 12px 4px 20px;
+            font-size: 12px;
+            color: #444;
+            text-decoration: none;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .group-list li a:hover { background: #efefef; color: #111; }
+        .group-list li a.active { background: #0d6efd; color: #fff; }
+        .btn-pin {
+            flex-shrink: 0;
+            padding: 0 7px;
+            height: 100%;
+            min-height: 24px;
+            background: none;
+            border: none;
+            color: #ccc;
+            cursor: pointer;
+            font-size: 11px;
+            line-height: 1;
+            opacity: 0;
+            transition: opacity 0.1s;
+        }
+        .group-list li:hover .btn-pin { opacity: 1; }
+        .btn-pin:hover { color: #666; }
+        .btn-pin.pinned { color: #888; opacity: 1; }
+
+        #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+        #header { padding: 12px 20px; border-bottom: 1px solid #ddd; font-size: 16px; font-weight: 600; color: #333; display: flex; align-items: center; }
+        #container { flex: 1; padding: 20px; overflow: auto; }
+        #container:has(iframe) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+
+        .demo-files-bar {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 5px 12px;
+            background: #f5f5f5;
+            border-bottom: 1px solid #e0e0e0;
+            flex-shrink: 0;
+            flex-wrap: wrap;
+        }
+        .demo-files-label {
+            font-size: 11px;
+            color: #999;
+            font-weight: 500;
+            margin-right: 2px;
+        }
+        .demo-file-link {
+            font-size: 11px;
+            color: #555;
+            text-decoration: none;
+            padding: 2px 8px;
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            font-family: monospace;
+        }
+        .demo-file-link:hover { background: #0d6efd; color: #fff; border-color: #0d6efd; }
+
+        .demo-list { margin-top: 20px; border-top: 1px solid #eee; padding-top: 14px; }
+        .demo-list-caption { font-size: 11px; font-weight: 600; color: #aaa;
+                             text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
+        .demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+        .demo-chip {
+            display: inline-block;
+            padding: 4px 12px; border-radius: 12px;
+            font-size: 12px; text-decoration: none; color: #444;
+            border: 1px solid #ddd;
+            transition: opacity 0.15s;
+        }
+        .demo-chip:hover { background: #0d6efd !important; color: #fff !important; border-color: #0d6efd !important; }
+
+        .demo-back { font-size: 13px; font-weight: 400; color: #0d6efd; text-decoration: none; }
+        .demo-back:hover { text-decoration: underline; }
+        .demo-header-title { font-size: 16px; font-weight: 600; color: #333; }
+        .btn-pin-demo-header {
+            margin-left: 8px;
+            background: none; border: none; cursor: pointer;
+            font-size: 14px; color: #ccc; padding: 0 4px;
+            vertical-align: middle;
+            transition: color 0.1s;
+        }
+        .btn-pin-demo-header:hover { color: #666; }
+        .btn-pin-demo-header.pinned { color: #888; }
+
+        .demo-search-results {
+            list-style: none;
+            padding: 0;
+            margin: 1px 0 2px 20px;
+        }
+        .demo-search-link {
+            display: block;
+            padding: 2px 12px 2px 8px;
+            font-size: 11px;
+            color: #0d6efd;
+            text-decoration: none;
+            border-left: 2px solid #dce8ff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .demo-search-link:hover { background: #f0f5ff; border-left-color: #0d6efd; }
+        .demo-search-link.active { background: #0d6efd; color: #fff; border-left-color: #0d6efd; }
+        .group-list li:has(.demo-search-results) { flex-wrap: wrap; }
+        .group-list li:has(.demo-search-results) > a,
+        .group-list li:has(.demo-search-results) > button { flex-shrink: 0; }
+        .group-list li:has(.demo-search-results) > .demo-search-results { width: 100%; }
+    </style>
+</head>
+<body class="dx-viewport">
+    <div id="sidebar">
+        <h2>DevExtreme</h2>
+        <select id="theme-selector"></select>
+        <input id="search" type="search" placeholder="Search widgets &amp; demos…">
+        <div id="sidebar-scroll">
+            <div id="pinned-section" style="display:none">
+                <div class="section-label">Pinned</div>
+                <ul id="pinned-list"></ul>
+            </div>
+            <div id="recents-section" style="display:none">
+                <div class="section-label">Recent</div>
+                <ul id="recents-list"></ul>
+            </div>
+            <nav id="groups-nav"></nav>
+        </div>
+    </div>
+    <div id="main">
+        <div id="header">Select a widget</div>
+        <div id="container"></div>
+    </div>
+    <script type="module" src="./catalog.ts"></script>
+</body>
+</html>
diff --git a/packages/devextreme/playground/newThemeSelector.ts b/packages/devextreme/playground/newThemeSelector.ts
new file mode 100644
index 000000000000..8ef0fd8b2bcd
--- /dev/null
+++ b/packages/devextreme/playground/newThemeSelector.ts
@@ -0,0 +1,87 @@
+const themeKey = 'currentThemeId';
+
+const themeLoaders = import.meta.glob('../artifacts/css/dx.*.css', { as: 'url' });
+
+const themeList = Object.keys(themeLoaders).map((path) => {
+  const match = path.match(/dx\.(.+)\.css$/);
+  return match ? match[1] : null;
+}).filter(Boolean) as string[];
+
+function groupThemes(themes: string[]) {
+  const groups: Record<string, string[]> = {};
+  themes.forEach((theme) => {
+    const [group] = theme.split('.');
+    const groupName = group.charAt(0).toUpperCase() + group.slice(1);
+    if (!groups[groupName]) groups[groupName] = [];
+    groups[groupName].push(theme);
+  });
+  return groups;
+}
+
+const groupedThemes = groupThemes(themeList);
+
+function initThemes(dropDownList: HTMLSelectElement) {
+  Object.entries(groupedThemes).forEach(([group, themes]) => {
+    const parent = document.createElement('optgroup');
+    parent.label = group;
+
+    themes.forEach((theme) => {
+      const child = document.createElement('option');
+      child.value = theme;
+      child.text = theme.replaceAll('.', ' ');
+      parent.appendChild(child);
+    });
+
+    dropDownList.appendChild(parent);
+  });
+}
+
+function loadThemeCss(themeId: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const oldLink = document.getElementById('theme-stylesheet');
+    if (oldLink) oldLink.remove();
+
+    const key = Object.keys(themeLoaders).find((p) => p.includes(`dx.${themeId}.css`));
+    if (!key) {
+      reject(new Error(`Theme not found: ${themeId}`));
+      return;
+    }
+
+    themeLoaders[key]().then((cssUrl: string) => {
+      const link = document.createElement('link');
+      link.id = 'theme-stylesheet';
+      link.rel = 'stylesheet';
+      link.href = cssUrl;
+
+      link.onload = () => resolve();
+      link.onerror = () => reject(new Error(`Failed to load theme: ${themeId}`));
+
+      document.head.appendChild(link);
+    });
+  });
+}
+
+export function setupThemeSelector(selectorId: string): Promise<void> {
+  return new Promise((resolve) => {
+    const dropDownList = document.querySelector<HTMLSelectElement>(`#${selectorId}`);
+    if (!dropDownList) {
+      resolve();
+      return;
+    }
+
+    initThemes(dropDownList);
+
+    const savedTheme = window.localStorage.getItem(themeKey) || themeList[0];
+    dropDownList.value = savedTheme;
+
+    loadThemeCss(savedTheme).then(() => {
+      dropDownList.addEventListener('change', () => {
+        const newTheme = dropDownList.value;
+        window.localStorage.setItem(themeKey, newTheme);
+        loadThemeCss(newTheme);
+      });
+
+      resolve();
+    });
+  });
+}
diff --git a/packages/devextreme/playground/playwright.config.ts b/packages/devextreme/playground/playwright.config.ts
new file mode 100644
index 000000000000..847a3d07429f
--- /dev/null
+++ b/packages/devextreme/playground/playwright.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+    testDir: './tests',
+    use: {
+        baseURL: 'http://localhost:3000',
+    },
+    webServer: {
+        command: 'pnpm run dev:playground',
+        port: 3000,
+        reuseExistingServer: true,
+    },
+});
diff --git a/packages/devextreme/playground/scheduler-example.ts b/packages/devextreme/playground/scheduler-example.ts
new file mode 100644
index 000000000000..2f61302a0962
--- /dev/null
+++ b/packages/devextreme/playground/scheduler-example.ts
@@ -0,0 +1,35 @@
+import '../js/integration/jquery';
+import '../js/ui/scheduler';
+import $ from 'jquery';
+import { setupThemeSelector } from './newthemeSelector';
+
+const dataSource = [
+    {
+        text: "Meeting with John",
+        startDate: new Date(2024, 0, 10, 9, 0),
+        endDate: new Date(2024, 0, 10, 10, 30),
+    },
+    {
+        text: "Conference Call",
+        startDate: new Date(2024, 0, 10, 14, 0),
+        endDate: new Date(2024, 0, 10, 15, 0),
+    },
+    {
+        text: "Team Building Event",
+        startDate: new Date(2024, 0, 11, 10, 0),
+        endDate: new Date(2024, 0, 11, 17, 0),
+    },
+];
+
+window.addEventListener('load', () =>
+  setupThemeSelector('theme-selector').then(() => {
+    $('#container').dxScheduler({
+        dataSource,
+        views: ['day', 'week', 'workWeek', 'month'],
+        currentView: 'week',
+        currentDate: new Date(2024, 0, 10),
+        startDayHour: 8,
+        endDayHour: 18,
+        height: 600,
+    });
+}));
diff --git a/packages/devextreme/playground/tests/scheduler-demos.spec.ts b/packages/devextreme/playground/tests/scheduler-demos.spec.ts
new file mode 100644
index 000000000000..ef3f0e609044
--- /dev/null
+++ b/packages/devextreme/playground/tests/scheduler-demos.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+const schedulerDemos = [
+    'Overview', 'BasicViews', 'SimpleArray', 'Agenda', 'Timelines',
+    'GroupingByResources', 'GroupByDate', 'RecurringAppointments', 'Editing',
+    'DragAndDrop', 'ResolveTimeConflicts', 'AppointmentOverlapping',
+    'AppointmentCountPerCell', 'CustomViewDuration', 'IndividualViewsCustomization',
+    'CellTemplates', 'Templates', 'CurrentTimeIndicator', 'AllDayPanelMode',
+    'VirtualScrolling', 'TimeZonesSupport', 'Resources', 'Toolbar',
+    'ContextMenu', 'Adaptability', 'WorkShifts',
+];
+
+for (const name of schedulerDemos) {
+    test(`Scheduler/${name}`, async ({ page }) => {
+        const errors: string[] = [];
+        page.on('console', (msg) => { if (msg.type() === 'error') errors.push(msg.text()); });
+        page.on('pageerror', (err) => errors.push(err.message));
+
+        await page.goto(`/demos/Scheduler/${name}/`);
+        await page.waitForTimeout(2000);
+
+        expect(errors, `Errors in Scheduler/${name}:\n${errors.join('\n')}`).toHaveLength(0);
+    });
+}
diff --git a/packages/devextreme/playground/tests/smoke.spec.ts b/packages/devextreme/playground/tests/smoke.spec.ts
new file mode 100644
index 000000000000..7f15123eadc6
--- /dev/null
+++ b/packages/devextreme/playground/tests/smoke.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+import { widgetIds } from '../widget-ids';
+
+for (const widgetId of widgetIds) {
+    test(`${widgetId} renders without console errors`, async ({ page }) => {
+        const errors: string[] = [];
+        page.on('console', (msg) => { if (msg.type() === 'error') errors.push(msg.text()); });
+        page.on('pageerror', (err) => errors.push(err.message));
+
+        await page.goto(`/#${widgetId}`);
+        await page.waitForTimeout(800);
+
+        expect(errors, `Console errors for ${widgetId}: ${errors.join('\n')}`).toHaveLength(0);
+    });
+}
diff --git a/packages/devextreme/playground/tests/static-demos.spec.ts b/packages/devextreme/playground/tests/static-demos.spec.ts
new file mode 100644
index 000000000000..a045345eea9b
--- /dev/null
+++ b/packages/devextreme/playground/tests/static-demos.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+const menuMetaPath = path.resolve(__dirname, '../../../../apps/demos/menuMeta.json');
+const distRoot = path.resolve(__dirname, '../../dist/playground/demos');
+const BASE = 'http://localhost:4001';
+
+interface DemoEntry { widget: string; name: string }
+
+function collectDemos(): DemoEntry[] {
+    const menuMeta: unknown[] = JSON.parse(fs.readFileSync(menuMetaPath, 'utf-8'));
+    const demos: DemoEntry[] = [];
+    function traverse(groups: unknown[]): void {
+        for (const g of groups as Array<{ Demos?: Array<{ Widget?: string; Name?: string }>; Groups?: unknown[] }>) {
+            if (g.Demos) {
+                for (const d of g.Demos) {
+                    if (d.Widget && d.Name) {
+                        const exists = fs.existsSync(path.join(distRoot, d.Widget, d.Name, 'index.html'));
+                        if (exists) demos.push({ widget: d.Widget, name: d.Name });
+                    }
+                }
+            }
+            if (g.Groups) traverse(g.Groups);
+        }
+    }
+    traverse(menuMeta);
+    return demos;
+}
+
+const demos = collectDemos();
+
+for (const { widget, name } of demos) {
+    test(`${widget}/${name}`, async ({ page }) => {
+        const errors: string[] = [];
+        page.on('console', (msg) => { if (msg.type() === 'error') errors.push(msg.text()); });
+        page.on('pageerror', (err) => errors.push(err.message));
+
+        await page.goto(`${BASE}/demos/${widget}/${name}/`);
+        await page.waitForTimeout(1000);
+
+        expect(errors, `${errors.join('\n')}`).toHaveLength(0);
+    });
+}
diff --git a/packages/devextreme/playground/widget-ids.ts b/packages/devextreme/playground/widget-ids.ts
new file mode 100644
index 000000000000..a6fd23798895
--- /dev/null
+++ b/packages/devextreme/playground/widget-ids.ts
@@ -0,0 +1,21 @@
+export const widgetIds = [
+    'accordion', 'actionSheet', 'autocomplete', 'barGauge', 'box',
+    'bullet', 'button', 'buttonGroup', 'calendar', 'cardView', 'chat', 'checkBox',
+    'chart', 'circularGauge', 'colorBox', 'contextMenu', 'dataGrid',
+    'dateBox', 'dateRangeBox', 'diagram', 'draggable', 'drawer',
+    'dropDownBox', 'dropDownButton', 'fileManager', 'fileUploader',
+    'filterBuilder', 'form', 'funnel', 'gallery', 'gantt',
+    'htmlEditor', 'linearGauge', 'list', 'loadIndicator', 'loadPanel',
+    'lookup', 'map', 'menu', 'multiView', 'numberBox', 'pagination',
+    'pieChart', 'pivotGrid', 'pivotGridFieldChooser', 'polarChart',
+    'popover', 'popup', 'progressBar', 'radioGroup', 'rangeSelector',
+    'rangeSlider', 'recurrenceEditor', 'resizable', 'responsiveBox',
+    'sankey', 'scheduler', 'scrollView', 'selectBox', 'slider',
+    'sortable', 'sparkline', 'speedDialAction', 'splitter', 'stepper',
+    'switch', 'tabPanel', 'tabs', 'tagBox', 'textArea', 'textBox',
+    'tileView', 'toast', 'toolbar', 'tooltip', 'treeList', 'treeMap',
+    'treeView', 'validationGroup', 'validationSummary', 'validator',
+    'vectorMap',
+] as const;
+
+export type WidgetId = typeof widgetIds[number];
diff --git a/packages/devextreme/playground/widgets/registry.ts b/packages/devextreme/playground/widgets/registry.ts
new file mode 100644
index 000000000000..9b60c1990071
--- /dev/null
+++ b/packages/devextreme/playground/widgets/registry.ts
@@ -0,0 +1,793 @@
+import type { WidgetId } from '../widget-ids';
+import $ from 'jquery';
+
+import '../../js/ui/accordion';
+import '../../js/ui/action_sheet';
+import '../../js/ui/autocomplete';
+import '../../js/ui/box';
+import '../../js/ui/button';
+import '../../js/ui/button_group';
+import '../../js/ui/calendar';
+import '../../js/ui/card_view';
+import '../../js/ui/chat';
+import '../../js/ui/check_box';
+import '../../js/ui/color_box';
+import '../../js/ui/context_menu';
+import '../../js/ui/data_grid';
+import '../../js/ui/date_box';
+import '../../js/ui/date_range_box';
+import '../../js/ui/diagram';
+import '../../js/ui/draggable';
+import '../../js/ui/drawer';
+import '../../js/ui/drop_down_box';
+import '../../js/ui/drop_down_button';
+import '../../js/ui/file_manager';
+import '../../js/ui/file_uploader';
+import '../../js/ui/filter_builder';
+import '../../js/ui/form';
+import '../../js/ui/gallery';
+import '../../js/ui/gantt';
+import '../../js/ui/html_editor';
+import '../../js/ui/list';
+import '../../js/ui/load_indicator';
+import '../../js/ui/load_panel';
+import '../../js/ui/lookup';
+import '../../js/ui/map';
+import '../../js/ui/menu';
+import '../../js/ui/multi_view';
+import '../../js/ui/number_box';
+import '../../js/ui/pagination';
+import '../../js/ui/pivot_grid';
+import '../../js/ui/pivot_grid_field_chooser';
+import '../../js/ui/popover';
+import '../../js/ui/popup';
+import '../../js/ui/progress_bar';
+import '../../js/ui/radio_group';
+import '../../js/ui/range_slider';
+import '../../js/ui/recurrence_editor';
+import '../../js/ui/resizable';
+import '../../js/ui/responsive_box';
+import '../../js/ui/scheduler';
+import '../../js/ui/scroll_view';
+import '../../js/ui/select_box';
+import '../../js/ui/slider';
+import '../../js/ui/sortable';
+import '../../js/ui/speed_dial_action';
+import '../../js/ui/splitter';
+import '../../js/ui/stepper';
+import '../../js/ui/switch';
+import '../../js/ui/tab_panel';
+import '../../js/ui/tabs';
+import '../../js/ui/tag_box';
+import '../../js/ui/text_area';
+import '../../js/ui/text_box';
+import '../../js/ui/tile_view';
+import '../../js/ui/toast';
+import '../../js/ui/toolbar';
+import '../../js/ui/tooltip';
+import '../../js/ui/tree_list';
+import '../../js/ui/tree_view';
+import '../../js/ui/validation_group';
+import '../../js/ui/validation_summary';
+import '../../js/ui/validator';
+import '../../js/viz/bar_gauge';
+import '../../js/viz/bullet';
+import '../../js/viz/chart';
+import '../../js/viz/circular_gauge';
+import '../../js/viz/funnel';
+import '../../js/viz/linear_gauge';
+import '../../js/viz/pie_chart';
+import '../../js/viz/polar_chart';
+import '../../js/viz/range_selector';
+import '../../js/viz/sankey';
+import '../../js/viz/sparkline';
+import '../../js/viz/tree_map';
+import '../../js/viz/vector_map';
+
+export type WidgetInit = ($el: JQuery) => void;
+
+interface RegistryEntry {
+    label: string;
+    init: WidgetInit;
+}
+
+const apptData = [
+    { text: 'Meeting', startDate: new Date(2024, 0, 10, 9, 0), endDate: new Date(2024, 0, 10, 10, 30) },
+    { text: 'Conference Call', startDate: new Date(2024, 0, 10, 14, 0), endDate: new Date(2024, 0, 10, 15, 0) },
+];
+
+const gridData = [
+    { id: 1, name: 'Alice', city: 'London', age: 32 },
+    { id: 2, name: 'Bob', city: 'Paris', age: 25 },
+    { id: 3, name: 'Carol', city: 'Berlin', age: 41 },
+];
+
+const chartData = [
+    { arg: 'Jan', val: 30 }, { arg: 'Feb', val: 50 }, { arg: 'Mar', val: 40 },
+    { arg: 'Apr', val: 70 }, { arg: 'May', val: 60 }, { arg: 'Jun', val: 80 },
+];
+
+const treeData = [
+    { id: 1, parentId: 0, text: 'Documents' },
+    { id: 2, parentId: 1, text: 'Reports' },
+    { id: 3, parentId: 1, text: 'Notes' },
+    { id: 4, parentId: 0, text: 'Images' },
+];
+
+const dx = ($el: JQuery) => $el as any;
+
+export const registry: Record<WidgetId, RegistryEntry> = {
+    accordion: {
+        label: 'Accordion',
+        init: ($el) => dx($el).dxAccordion({ dataSource: ['Item 1', 'Item 2', 'Item 3'], width: 400 }),
+    },
+    actionSheet: {
+        label: 'ActionSheet',
+        init: ($el) => {
+            const $btn = $('<div>').appendTo($el);
+            dx($btn).dxButton({
+                text: 'Show ActionSheet',
+                onClick: () => dx($('<div>').appendTo($el)).dxActionSheet({
+                    title: 'Actions',
+                    items: [{ text: 'Action 1' }, { text: 'Action 2' }],
+                    visible: true,
+                    target: $btn,
+                }),
+            });
+        },
+    },
+    autocomplete: {
+        label: 'Autocomplete',
+        init: ($el) => dx($el).dxAutocomplete({ dataSource: ['Alice', 'Bob', 'Carol', 'Dave'], placeholder: 'Type a name...' }),
+    },
+    barGauge: {
+        label: 'BarGauge',
+        init: ($el) => dx($el).dxBarGauge({ values: [0.3, 0.6, 0.9], startValue: 0, endValue: 1, height: 300 }),
+    },
+    box: {
+        label: 'Box',
+        init: ($el) => dx($el).dxBox({
+            direction: 'row',
+            height: 100,
+            items: [
+                { html: '<div style="background:#e8e8e8;padding:10px">Box 1</div>', ratio: 1 },
+                { html: '<div style="background:#d0d0d0;padding:10px">Box 2</div>', ratio: 1 },
+            ],
+        }),
+    },
+    bullet: {
+        label: 'Bullet',
+        init: ($el) => dx($el).dxBullet({ value: 65, startScaleValue: 0, endScaleValue: 100, target: 80, height: 60, width: 400 }),
+    },
+    button: {
+        label: 'Button',
+        init: ($el) => dx($el).dxButton({ text: 'Click me', type: 'default', stylingMode: 'contained' }),
+    },
+    buttonGroup: {
+        label: 'ButtonGroup',
+        init: ($el) => dx($el).dxButtonGroup({
+            items: [{ text: 'Left' }, { text: 'Center' }, { text: 'Right' }],
+            selectionMode: 'single',
+            selectedItemKeys: ['Center'],
+            keyExpr: 'text',
+        }),
+    },
+    calendar: {
+        label: 'Calendar',
+        init: ($el) => dx($el).dxCalendar({ value: new Date(), width: 280 }),
+    },
+    cardView: {
+        label: 'CardView',
+        init: ($el) => dx($el).dxCardView({
+            dataSource: [
+                { id: 1, name: 'Alice', city: 'London', age: 32 },
+                { id: 2, name: 'Bob', city: 'Paris', age: 25 },
+                { id: 3, name: 'Carol', city: 'Berlin', age: 41 },
+            ],
+            keyExpr: 'id',
+            columns: ['name', 'city', 'age'],
+            height: 400,
+        }),
+    },
+    chat: {
+        label: 'Chat',
+        init: ($el) => dx($el).dxChat({ height: 400, items: [] }),
+    },
+    checkBox: {
+        label: 'CheckBox',
+        init: ($el) => dx($el).dxCheckBox({ text: 'Enable feature', value: true }),
+    },
+    chart: {
+        label: 'Chart',
+        init: ($el) => dx($el).dxChart({
+            dataSource: chartData,
+            series: [{ argumentField: 'arg', valueField: 'val', type: 'bar' }],
+            height: 300,
+        }),
+    },
+    circularGauge: {
+        label: 'CircularGauge',
+        init: ($el) => dx($el).dxCircularGauge({ value: 65, height: 300, rangeContainer: { ranges: [] } }),
+    },
+    colorBox: {
+        label: 'ColorBox',
+        init: ($el) => dx($el).dxColorBox({ value: '#0d6efd', width: 200 }),
+    },
+    contextMenu: {
+        label: 'ContextMenu',
+        init: ($el) => {
+            $('<div id="ctx-target" style="padding:20px;background:#eee;border:1px dashed #999">Right-click here</div>').appendTo($el);
+            dx($('<div>').appendTo($el)).dxContextMenu({
+                target: '#ctx-target',
+                items: [{ text: 'Copy' }, { text: 'Paste' }, { text: 'Delete' }],
+            });
+        },
+    },
+    dataGrid: {
+        label: 'DataGrid',
+        init: ($el) => dx($el).dxDataGrid({
+            dataSource: gridData,
+            keyExpr: 'id',
+            columns: ['name', 'city', 'age'],
+            showBorders: true,
+        }),
+    },
+    dateBox: {
+        label: 'DateBox',
+        init: ($el) => dx($el).dxDateBox({ value: new Date(), type: 'date', width: 220 }),
+    },
+    dateRangeBox: {
+        label: 'DateRangeBox',
+        init: ($el) => dx($el).dxDateRangeBox({
+            startDate: new Date(2024, 0, 1),
+            endDate: new Date(2024, 0, 31),
+            width: 400,
+        }),
+    },
+    diagram: {
+        label: 'Diagram',
+        init: ($el) => dx($el).dxDiagram({ height: 400 }),
+    },
+    draggable: {
+        label: 'Draggable',
+        init: ($el) => {
+            const $box = $('<div style="width:100px;height:100px;background:#0d6efd;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:4px">Drag me</div>').appendTo($el);
+            dx($box).dxDraggable({ boundary: $el });
+        },
+    },
+    drawer: {
+        label: 'Drawer',
+        init: ($el) => {
+            $el.css({ height: '300px', position: 'relative' });
+            const $content = $('<div style="padding:16px"><p>Main content area</p></div>');
+            dx($el).dxDrawer({
+                opened: true,
+                template: () => $('<div style="width:200px;padding:16px;background:#f5f5f5">Drawer panel</div>'),
+                contentTemplate: () => $content,
+                height: 300,
+            });
+        },
+    },
+    dropDownBox: {
+        label: 'DropDownBox',
+        init: ($el) => dx($el).dxDropDownBox({
+            dataSource: ['Alice', 'Bob', 'Carol'],
+            value: 'Alice',
+            width: 300,
+        }),
+    },
+    dropDownButton: {
+        label: 'DropDownButton',
+        init: ($el) => dx($el).dxDropDownButton({
+            text: 'Options',
+            items: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
+        }),
+    },
+    fileManager: {
+        label: 'FileManager',
+        init: ($el) => dx($el).dxFileManager({ height: 400 }),
+    },
+    fileUploader: {
+        label: 'FileUploader',
+        init: ($el) => dx($el).dxFileUploader({ multiple: false, accept: '*', uploadMode: 'useButton' }),
+    },
+    filterBuilder: {
+        label: 'FilterBuilder',
+        init: ($el) => dx($el).dxFilterBuilder({
+            fields: [
+                { dataField: 'name', caption: 'Name' },
+                { dataField: 'age', caption: 'Age', dataType: 'number' },
+            ],
+        }),
+    },
+    form: {
+        label: 'Form',
+        init: ($el) => dx($el).dxForm({
+            formData: { name: 'Alice', email: 'alice@example.com', age: 32 },
+            items: [
+                { dataField: 'name', label: { text: 'Name' } },
+                { dataField: 'email', label: { text: 'Email' } },
+                { dataField: 'age', label: { text: 'Age' }, editorType: 'dxNumberBox' },
+            ],
+            width: 400,
+        }),
+    },
+    funnel: {
+        label: 'Funnel',
+        init: ($el) => dx($el).dxFunnel({
+            dataSource: [
+                { argument: 'Leads', value: 100 },
+                { argument: 'Prospects', value: 60 },
+                { argument: 'Customers', value: 30 },
+            ],
+            argumentField: 'argument',
+            valueField: 'value',
+            height: 300,
+        }),
+    },
+    gallery: {
+        label: 'Gallery',
+        init: ($el) => dx($el).dxGallery({
+            dataSource: ['Item 1', 'Item 2', 'Item 3'],
+            height: 200,
+            width: 400,
+            itemTemplate: (item: string) => $(`<div style="display:flex;align-items:center;justify-content:center;height:100%;background:#eee;font-size:18px">${item}</div>`),
+        }),
+    },
+    gantt: {
+        label: 'Gantt',
+        init: ($el) => dx($el).dxGantt({
+            tasks: {
+                dataSource: [
+                    { id: 1, parentId: 0, title: 'Project', start: new Date(2024, 0, 1), end: new Date(2024, 0, 31), progress: 50 },
+                    { id: 2, parentId: 1, title: 'Task 1', start: new Date(2024, 0, 1), end: new Date(2024, 0, 15), progress: 70 },
+                ],
+            },
+            height: 300,
+        }),
+    },
+    htmlEditor: {
+        label: 'HtmlEditor',
+        init: ($el) => dx($el).dxHtmlEditor({
+            value: '<p>Hello <b>world</b>!</p>',
+            height: 200,
+            toolbar: { items: ['bold', 'italic', 'underline'] },
+        }),
+    },
+    linearGauge: {
+        label: 'LinearGauge',
+        init: ($el) => dx($el).dxLinearGauge({ value: 65, height: 100 }),
+    },
+    list: {
+        label: 'List',
+        init: ($el) => dx($el).dxList({
+            dataSource: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
+            height: 250,
+        }),
+    },
+    loadIndicator: {
+        label: 'LoadIndicator',
+        init: ($el) => {
+            $el.css({ display: 'flex', alignItems: 'center', gap: '12px' });
+            dx($('<div>').appendTo($el)).dxLoadIndicator({ visible: true });
+            $('<span>Loading...</span>').appendTo($el);
+        },
+    },
+    loadPanel: {
+        label: 'LoadPanel',
+        init: ($el) => {
+            $('<div id="lp-target" style="height:200px;background:#f0f0f0;display:flex;align-items:center;justify-content:center">Content area</div>').appendTo($el);
+            dx($('<div>').appendTo($el)).dxLoadPanel({
+                visible: true,
+                showIndicator: true,
+                showPane: true,
+                shading: false,
+                position: { of: '#lp-target' },
+                container: $el,
+            });
+        },
+    },
+    lookup: {
+        label: 'Lookup',
+        init: ($el) => dx($el).dxLookup({
+            dataSource: ['Alice', 'Bob', 'Carol', 'Dave'],
+            value: 'Alice',
+            width: 250,
+        }),
+    },
+    map: {
+        label: 'Map',
+        init: ($el) => dx($el).dxMap({
+            center: { lat: 40.7128, lng: -74.006 },
+            zoom: 10,
+            height: 300,
+            width: '100%',
+            provider: 'google',
+        }),
+    },
+    menu: {
+        label: 'Menu',
+        init: ($el) => dx($el).dxMenu({
+            dataSource: [
+                { text: 'File', items: [{ text: 'New' }, { text: 'Open' }, { text: 'Save' }] },
+                { text: 'Edit', items: [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }] },
+                { text: 'View' },
+            ],
+        }),
+    },
+    multiView: {
+        label: 'MultiView',
+        init: ($el) => dx($el).dxMultiView({
+            dataSource: [
+                { html: '<div style="padding:20px;background:#e8f4fd">View 1 content</div>' },
+                { html: '<div style="padding:20px;background:#fdecea">View 2 content</div>' },
+                { html: '<div style="padding:20px;background:#e8fde8">View 3 content</div>' },
+            ],
+            height: 150,
+        }),
+    },
+    numberBox: {
+        label: 'NumberBox',
+        init: ($el) => dx($el).dxNumberBox({ value: 42, min: 0, max: 100, showSpinButtons: true, width: 180 }),
+    },
+    pagination: {
+        label: 'Pagination',
+        init: ($el) => dx($el).dxPagination({ pageCount: 10, pageIndex: 0, pageSize: 10, itemCount: 100 }),
+    },
+    pieChart: {
+        label: 'PieChart',
+        init: ($el) => dx($el).dxPieChart({
+            dataSource: [
+                { arg: 'Apples', val: 35 },
+                { arg: 'Oranges', val: 25 },
+                { arg: 'Bananas', val: 20 },
+                { arg: 'Grapes', val: 20 },
+            ],
+            series: [{ argumentField: 'arg', valueField: 'val' }],
+            height: 300,
+        }),
+    },
+    pivotGrid: {
+        label: 'PivotGrid',
+        init: ($el) => dx($el).dxPivotGrid({
+            dataSource: {
+                fields: [
+                    { dataField: 'region', area: 'row' },
+                    { dataField: 'product', area: 'column' },
+                    { dataField: 'amount', area: 'data', summaryType: 'sum' },
+                ],
+                store: [
+                    { region: 'North', product: 'A', amount: 100 },
+                    { region: 'South', product: 'B', amount: 200 },
+                    { region: 'North', product: 'B', amount: 150 },
+                ],
+            },
+            height: 300,
+        }),
+    },
+    pivotGridFieldChooser: {
+        label: 'PivotGridFieldChooser',
+        init: ($el) => {
+            const dataSource = { fields: [{ dataField: 'name' }, { dataField: 'age' }], store: gridData } as any;
+            dx($el).dxPivotGridFieldChooser({ dataSource, height: 300 });
+        },
+    },
+    polarChart: {
+        label: 'PolarChart',
+        init: ($el) => dx($el).dxPolarChart({
+            dataSource: chartData,
+            series: [{ argumentField: 'arg', valueField: 'val', type: 'line' }],
+            height: 300,
+        }),
+    },
+    popover: {
+        label: 'Popover',
+        init: ($el) => {
+            const $btn = $('<div style="display:inline-block">').appendTo($el);
+            dx($btn).dxButton({ text: 'Show Popover', onClick: () => dx($pop).dxPopover('show') });
+            const $pop = $('<div>').appendTo($el);
+            dx($pop).dxPopover({ target: $btn, content: 'Hello from popover!' });
+        },
+    },
+    popup: {
+        label: 'Popup',
+        init: ($el) => {
+            const $btn = $('<div style="display:inline-block">').appendTo($el);
+            const $pop = $('<div>').appendTo($el);
+            dx($pop).dxPopup({ title: 'Info', contentTemplate: () => '<p>Popup content</p>', visible: false, width: 300, height: 200 });
+            dx($btn).dxButton({ text: 'Show Popup', onClick: () => dx($pop).dxPopup('show') });
+        },
+    },
+    progressBar: {
+        label: 'ProgressBar',
+        init: ($el) => dx($el).dxProgressBar({ value: 65, min: 0, max: 100, width: 300 }),
+    },
+    radioGroup: {
+        label: 'RadioGroup',
+        init: ($el) => dx($el).dxRadioGroup({
+            dataSource: ['Option A', 'Option B', 'Option C'],
+            value: 'Option A',
+        }),
+    },
+    rangeSelector: {
+        label: 'RangeSelector',
+        init: ($el) => dx($el).dxRangeSelector({
+            scale: { startValue: 0, endValue: 100, tickInterval: 10 },
+            sliderMarker: { visible: true },
+            value: [20, 70],
+            height: 120,
+        }),
+    },
+    rangeSlider: {
+        label: 'RangeSlider',
+        init: ($el) => dx($el).dxRangeSlider({ min: 0, max: 100, start: 20, end: 70, width: 300 }),
+    },
+    recurrenceEditor: {
+        label: 'RecurrenceEditor',
+        init: ($el) => dx($el).dxRecurrenceEditor({ value: 'FREQ=WEEKLY;BYDAY=MO,WE,FR' }),
+    },
+    resizable: {
+        label: 'Resizable',
+        init: ($el) => {
+            const $box = $('<div style="background:#e8f4fd;padding:16px;border:1px solid #90caf9">Resize me</div>').appendTo($el);
+            dx($box).dxResizable({ width: 200, height: 100, minWidth: 100, minHeight: 60 });
+        },
+    },
+    responsiveBox: {
+        label: 'ResponsiveBox',
+        init: ($el) => dx($el).dxResponsiveBox({
+            rows: [{ ratio: 1 }],
+            cols: [{ ratio: 1 }, { ratio: 1 }],
+            items: [
+                { html: '<div style="background:#eee;padding:10px">Left</div>', location: { row: 0, col: 0 } },
+                { html: '<div style="background:#ddd;padding:10px">Right</div>', location: { row: 0, col: 1 } },
+            ],
+            height: 80,
+        }),
+    },
+    sankey: {
+        label: 'Sankey',
+        init: ($el) => dx($el).dxSankey({
+            dataSource: [
+                { source: 'A', target: 'X', weight: 10 },
+                { source: 'A', target: 'Y', weight: 5 },
+                { source: 'B', target: 'X', weight: 7 },
+                { source: 'B', target: 'Y', weight: 8 },
+            ],
+            height: 300,
+        }),
+    },
+    scheduler: {
+        label: 'Scheduler',
+        init: ($el) => dx($el).dxScheduler({
+            dataSource: apptData,
+            views: ['week'],
+            currentView: 'week',
+            currentDate: new Date(2024, 0, 10),
+            startDayHour: 8,
+            endDayHour: 18,
+            height: 500,
+        }),
+    },
+    scrollView: {
+        label: 'ScrollView',
+        init: ($el) => dx($el).dxScrollView({
+            width: 300,
+            height: 150,
+            content: () => $('<div style="height:400px;padding:12px">Scrollable content<br/>'.repeat(10) + '</div>'),
+        }),
+    },
+    selectBox: {
+        label: 'SelectBox',
+        init: ($el) => dx($el).dxSelectBox({
+            dataSource: ['Apple', 'Banana', 'Cherry'],
+            value: 'Apple',
+            width: 220,
+        }),
+    },
+    slider: {
+        label: 'Slider',
+        init: ($el) => dx($el).dxSlider({ min: 0, max: 100, value: 40, width: 300 }),
+    },
+    sortable: {
+        label: 'Sortable',
+        init: ($el) => {
+            const $list = $('<div>').appendTo($el);
+            ['Item 1', 'Item 2', 'Item 3', 'Item 4'].forEach((t) => {
+                $(`<div style="padding:8px 12px;margin:4px 0;background:#f0f0f0;border:1px solid #ddd;cursor:grab;user-select:none">${t}</div>`).appendTo($list);
+            });
+            dx($list).dxSortable({ filter: 'div' });
+        },
+    },
+    sparkline: {
+        label: 'Sparkline',
+        init: ($el) => dx($el).dxSparkline({
+            dataSource: [{ val: 4 }, { val: 8 }, { val: 6 }, { val: 9 }, { val: 5 }, { val: 7 }],
+            valueField: 'val',
+            type: 'bar',
+            width: 200,
+            height: 40,
+        }),
+    },
+    speedDialAction: {
+        label: 'SpeedDialAction',
+        init: ($el) => {
+            $el.css({ position: 'relative', height: '200px', background: '#f5f5f5' });
+            dx($('<div>').appendTo($el)).dxSpeedDialAction({ label: 'Add', icon: 'plus' });
+        },
+    },
+    splitter: {
+        label: 'Splitter',
+        init: ($el) => dx($el).dxSplitter({
+            items: [
+                { html: '<div style="padding:12px">Left pane</div>' },
+                { html: '<div style="padding:12px">Right pane</div>' },
+            ],
+            orientation: 'horizontal',
+            height: 200,
+        }),
+    },
+    stepper: {
+        label: 'Stepper',
+        init: ($el) => dx($el).dxStepper({
+            items: [{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }],
+            selectedIndex: 0,
+        }),
+    },
+    switch: {
+        label: 'Switch',
+        init: ($el) => dx($el).dxSwitch({ value: true, switchedOnText: 'ON', switchedOffText: 'OFF' }),
+    },
+    tabPanel: {
+        label: 'TabPanel',
+        init: ($el) => dx($el).dxTabPanel({
+            dataSource: [
+                { title: 'Tab 1', html: '<p style="padding:12px">Content of Tab 1</p>' },
+                { title: 'Tab 2', html: '<p style="padding:12px">Content of Tab 2</p>' },
+                { title: 'Tab 3', html: '<p style="padding:12px">Content of Tab 3</p>' },
+            ],
+            height: 150,
+        }),
+    },
+    tabs: {
+        label: 'Tabs',
+        init: ($el) => dx($el).dxTabs({
+            dataSource: [{ text: 'Home' }, { text: 'Products' }, { text: 'About' }],
+            selectedIndex: 0,
+        }),
+    },
+    tagBox: {
+        label: 'TagBox',
+        init: ($el) => dx($el).dxTagBox({
+            dataSource: ['Angular', 'React', 'Vue', 'jQuery'],
+            value: ['React', 'Vue'],
+            width: 350,
+        }),
+    },
+    textArea: {
+        label: 'TextArea',
+        init: ($el) => dx($el).dxTextArea({
+            value: 'Some text here...',
+            height: 100,
+            width: 300,
+        }),
+    },
+    textBox: {
+        label: 'TextBox',
+        init: ($el) => dx($el).dxTextBox({ value: 'Hello world', width: 250, showClearButton: true }),
+    },
+    tileView: {
+        label: 'TileView',
+        init: ($el) => dx($el).dxTileView({
+            dataSource: [
+                { text: 'Tile 1', color: '#e3f2fd' },
+                { text: 'Tile 2', color: '#fce4ec' },
+                { text: 'Tile 3', color: '#e8f5e9' },
+                { text: 'Tile 4', color: '#fff3e0' },
+            ],
+            itemTemplate: (item: { text: string; color: string }) =>
+                $(`<div style="background:${item.color};display:flex;align-items:center;justify-content:center;height:100%">${item.text}</div>`),
+            baseItemHeight: 80,
+            baseItemWidth: 120,
+            height: 200,
+        }),
+    },
+    toast: {
+        label: 'Toast',
+        init: ($el) => {
+            const $btn = $('<div style="display:inline-block">').appendTo($el);
+            const $toast = $('<div>').appendTo($el);
+            dx($toast).dxToast({ message: 'Hello from Toast!', type: 'success', displayTime: 2000 });
+            dx($btn).dxButton({ text: 'Show Toast', onClick: () => dx($toast).dxToast('show') });
+        },
+    },
+    toolbar: {
+        label: 'Toolbar',
+        init: ($el) => dx($el).dxToolbar({
+            items: [
+                { widget: 'dxButton', options: { text: 'New', icon: 'plus' }, location: 'before' },
+                { widget: 'dxButton', options: { text: 'Save', icon: 'save' }, location: 'before' },
+                { widget: 'dxTextBox', options: { placeholder: 'Search...' }, location: 'after' },
+            ],
+        }),
+    },
+    tooltip: {
+        label: 'Tooltip',
+        init: ($el) => {
+            const $target = $('<div id="tt-target" style="display:inline-block;padding:10px;background:#e3f2fd;border-radius:4px">Hover me</div>').appendTo($el);
+            dx($('<div>').appendTo($el)).dxTooltip({
+                target: $target,
+                content: 'This is a tooltip!',
+                showEvent: 'mouseenter',
+                hideEvent: 'mouseleave',
+            });
+        },
+    },
+    treeList: {
+        label: 'TreeList',
+        init: ($el) => dx($el).dxTreeList({
+            dataSource: treeData,
+            keyExpr: 'id',
+            parentIdExpr: 'parentId',
+            columns: [{ dataField: 'text', caption: 'Name' }],
+            showBorders: true,
+            height: 250,
+        }),
+    },
+    treeMap: {
+        label: 'TreeMap',
+        init: ($el) => dx($el).dxTreeMap({
+            dataSource: [
+                { name: 'A', value: 40 },
+                { name: 'B', value: 25 },
+                { name: 'C', value: 20 },
+                { name: 'D', value: 15 },
+            ],
+            valueField: 'value',
+            labelField: 'name',
+            height: 300,
+        }),
+    },
+    treeView: {
+        label: 'TreeView',
+        init: ($el) => dx($el).dxTreeView({
+            dataSource: treeData,
+            keyExpr: 'id',
+            parentIdExpr: 'parentId',
+            displayExpr: 'text',
+            height: 250,
+        }),
+    },
+    validationGroup: {
+        label: 'ValidationGroup',
+        init: ($el) => {
+            const $group = $('<div>').appendTo($el);
+            dx($group).dxValidationGroup({});
+            const $tb = $('<div style="margin-bottom:8px">').appendTo($group);
+            dx($tb).dxTextBox({ placeholder: 'Required field' });
+            dx($('<div>').appendTo($group)).dxValidator({ validationRules: [{ type: 'required', message: 'This field is required' }], adapter: { getValue: () => dx($tb).dxTextBox('option', 'value') } });
+            dx($('<div>').appendTo($group)).dxButton({ text: 'Validate', validationGroup: $group, useSubmitBehavior: false, onClick: () => { dx($group).dxValidationGroup('validate'); } });
+        },
+    },
+    validationSummary: {
+        label: 'ValidationSummary',
+        init: ($el) => {
+            dx($el).dxValidationSummary({});
+        },
+    },
+    validator: {
+        label: 'Validator',
+        init: ($el) => {
+            const $tb = $('<div>').appendTo($el);
+            dx($tb).dxTextBox({ placeholder: 'Enter email' });
+            dx($('<div>').appendTo($el)).dxValidator({
+                validationRules: [{ type: 'email', message: 'Enter a valid email' }],
+                adapter: { getValue: () => dx($tb).dxTextBox('option', 'value') },
+            });
+        },
+    },
+    vectorMap: {
+        label: 'VectorMap',
+        init: ($el) => dx($el).dxVectorMap({ height: 300 }),
+    },
+};
diff --git a/packages/devextreme/vite.config.ts b/packages/devextreme/vite.config.ts
new file mode 100644
index 000000000000..10ce8c5c08a5
--- /dev/null
+++ b/packages/devextreme/vite.config.ts
@@ -0,0 +1,43 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import devextremeInferno from './build/vite-plugin-devextreme';
+import demoHtmlPlugin from './build/vite-plugin-demo-html';
+
+export default defineConfig({
+  root: './playground',
+  base: './',
+  plugins: [devextremeInferno(), demoHtmlPlugin()],
+  esbuild: false,
+  server: {
+    port: 3000,
+    fs: {
+      allow: ['..', '.', '../..'],
+    },
+    hmr: true,
+  },
+  resolve: {
+    alias: {
+      'core': path.resolve(__dirname, './js/core'),
+      'common': path.resolve(__dirname, './js/common'),
+      'data': path.resolve(__dirname, './js/data'),
+      'ui': path.resolve(__dirname, './js/ui'),
+      '@js': path.resolve(__dirname, './js'),
+      '@ts': path.resolve(__dirname, './js/__internal'),
+      '__internal': path.resolve(__dirname, './js/__internal'),
+    },
+  },
+  build: {
+    outDir: path.resolve(__dirname, 'dist/playground'),
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        catalog: path.resolve(__dirname, 'playground/index.html'),
+        'demo-init': path.resolve(__dirname, 'playground/demo-init.ts'),
+      },
+      output: {
+        entryFileNames: (chunk) =>
+          chunk.name === 'demo-init' ? 'demo-init.js' : 'assets/[name]-[hash].js',
+      },
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 944a73db8472..bceb8ba9c022 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1370,15 +1370,27 @@ importers:
       '@babel/parser':
         specifier: 7.29.0
         version: 7.29.0
+      '@babel/plugin-proposal-decorators':
+        specifier: 7.23.9
+        version: 7.23.9(@babel/core@7.29.0)
+      '@babel/plugin-transform-class-properties':
+        specifier: 7.23.3
+        version: 7.23.3(@babel/core@7.29.0)
       '@babel/plugin-transform-modules-commonjs':
         specifier: 7.28.6
         version: 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-transform-runtime':
         specifier: 7.29.0
         version: 7.29.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript':
+        specifier: 7.23.6
+        version: 7.23.6(@babel/core@7.29.0)
       '@babel/preset-env':
         specifier: 7.29.0
         version: 7.29.0(@babel/core@7.29.0)
+      '@babel/preset-typescript':
+        specifier: 7.23.3
+        version: 7.23.3(@babel/core@7.29.0)
       '@devextreme-generator/angular':
         specifier: 3.0.12
         version: 3.0.12(5o33rugezaoatweidwz7xw6yie)
@@ -1409,6 +1421,9 @@ importers:
       '@jest/globals':
         specifier: 29.7.0
         version: 29.7.0
+      '@playwright/test':
+        specifier: ^1.50.0
+        version: 1.58.2
       '@stylistic/eslint-plugin':
         specifier: 'catalog:'
         version: 5.10.0(eslint@9.39.4(jiti@2.6.1))
@@ -1796,6 +1811,9 @@ importers:
       vinyl-named:
         specifier: 1.1.0
         version: 1.1.0
+      vite:
+        specifier: ^7.1.3
+        version: 7.3.0(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.97.1)(terser@5.46.0)(yaml@2.5.0)
       webpack:
         specifier: 5.105.4
         version: 5.105.4(@swc/core@1.15.3)
@@ -3076,6 +3094,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/plugin-proposal-decorators@7.23.9':
+    resolution: {integrity: sha512-hJhBCb0+NnTWybvWq2WpbCYDOcflSbx0t+BYP65e5R9GVnukiDTi+on5bFkk4p7QGuv190H6KfNiV9Knf/3cZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-proposal-decorators@7.25.9':
     resolution: {integrity: sha512-smkNLL/O1ezy9Nhy4CNosc4Va+1wo5w4gzSZeLe6y6dM4mmHfYOCPolXQPHQxonZCF+ZyebxN9vqOolkYrSn5g==}
     engines: {node: '>=6.9.0'}
@@ -3274,8 +3298,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-properties@7.25.9':
-    resolution: {integrity: sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==}
+  '@babel/plugin-transform-class-properties@7.23.3':
+    resolution: {integrity: sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -3634,6 +3658,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-typescript@7.23.6':
+    resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-typescript@7.28.5':
     resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
     engines: {node: '>=6.9.0'}
@@ -3705,6 +3735,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/preset-typescript@7.23.3':
+    resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/preset-typescript@7.28.5':
     resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
     engines: {node: '>=6.9.0'}
@@ -5866,6 +5902,11 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
@@ -11205,6 +11246,11 @@ packages:
     os: [darwin]
     deprecated: Upgrade to fsevents v2 to mitigate potential security issues
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -15070,6 +15116,16 @@ packages:
     resolution: {integrity: sha512-+KD8hJtqQMYoTuL1bbGOqxb4z+nZkTAwVdNtWwe8Tc2xNbEmdJYIYoc6Qt0uF55e6YW6KuTHw1DjQ18gMhzepw==}
     engines: {node: '>=16.0.0'}
 
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   plimit-lit@1.6.1:
     resolution: {integrity: sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==}
     engines: {node: '>=12'}
@@ -20000,7 +20056,7 @@ snapshots:
 
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
 
   '@babel/helper-compilation-targets@7.28.6':
     dependencies:
@@ -20018,7 +20074,7 @@ snapshots:
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/helper-replace-supers': 7.28.6(@babel/core@7.26.10)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -20031,7 +20087,7 @@ snapshots:
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.5)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -20044,7 +20100,7 @@ snapshots:
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.6)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -20057,7 +20113,7 @@ snapshots:
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -20171,8 +20227,8 @@ snapshots:
 
   '@babel/helper-member-expression-to-functions@7.28.5':
     dependencies:
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -20230,7 +20286,7 @@ snapshots:
 
   '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
@@ -20277,7 +20333,7 @@ snapshots:
       '@babel/core': 7.26.10
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -20286,7 +20342,7 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -20295,7 +20351,7 @@ snapshots:
       '@babel/core': 7.28.6
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -20304,14 +20360,14 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -20328,8 +20384,8 @@ snapshots:
   '@babel/helper-wrap-function@7.28.3':
     dependencies:
       '@babel/template': 7.28.6
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -20501,6 +20557,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-proposal-decorators@7.23.9(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/plugin-syntax-decorators': 7.25.9(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -20974,7 +21039,7 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-class-properties@7.25.9(@babel/core@7.29.0)':
+  '@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
@@ -22208,6 +22273,16 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-transform-typescript@7.23.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -22661,6 +22736,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/preset-typescript@7.23.3(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/preset-typescript@7.28.5(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -24934,8 +25020,8 @@ snapshots:
   '@nx/js@22.4.5(@babel/traverse@7.29.0)(@swc/core@1.15.3)(nx@22.4.5(@swc/core@1.15.3))':
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-proposal-decorators': 7.23.9(@babel/core@7.29.0)
+      '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.29.0)
       '@babel/plugin-transform-runtime': 7.29.0(@babel/core@7.29.0)
       '@babel/preset-env': 7.29.0(@babel/core@7.29.0)
       '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
@@ -25766,6 +25852,10 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
   '@popperjs/core@2.11.8': {}
 
   '@preact/signals-core@1.8.0': {}
@@ -26470,7 +26560,7 @@ snapshots:
 
   '@types/babel__traverse@7.20.6':
     dependencies:
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
 
   '@types/babel__traverse@7.28.0':
     dependencies:
@@ -33045,6 +33135,9 @@ snapshots:
       nan: 2.22.0
     optional: true
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -36087,7 +36180,7 @@ snapshots:
       '@babel/generator': 7.28.6
       '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.29.0)
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
       '@jest/expect-utils': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
@@ -36112,7 +36205,7 @@ snapshots:
       '@babel/generator': 7.28.6
       '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.29.0)
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
       '@jest/expect-utils': 30.2.0
       '@jest/get-type': 30.1.0
       '@jest/snapshot-utils': 30.2.0
@@ -38899,6 +38992,14 @@ snapshots:
       pvutils: 1.1.5
       tslib: 2.8.1
 
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   plimit-lit@1.6.1:
     dependencies:
       queue-lit: 1.5.2
@@ -39372,8 +39473,8 @@ snapshots:
   react-docgen@7.1.1:
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
@@ -39387,8 +39488,8 @@ snapshots:
   react-docgen@8.0.2:
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
@@ -41894,12 +41995,12 @@ snapshots:
   testcafe@3.7.2:
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.29.0)
+      '@babel/plugin-proposal-decorators': 7.23.9(@babel/core@7.29.0)
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.0)
       '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.0)
       '@babel/plugin-transform-async-generator-functions': 7.26.8(@babel/core@7.29.0)
       '@babel/plugin-transform-async-to-generator': 7.25.9(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.29.0)
+      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-transform-class-static-block': 7.26.0(@babel/core@7.29.0)
       '@babel/plugin-transform-exponentiation-operator': 7.27.1(@babel/core@7.29.0)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.0)
@@ -43393,12 +43494,31 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.1
 
+  vite@7.3.0(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.97.1)(terser@5.46.0)(yaml@2.5.0):
+    dependencies:
+      esbuild: 0.27.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.8
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.12.8
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      less: 4.4.2
+      lightningcss: 1.30.2
+      sass: 1.97.1
+      sass-embedded: 1.93.3
+      terser: 5.46.0
+      yaml: 2.5.0
+
   vite@7.3.0(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
-      postcss: 8.5.6
+      postcss: 8.5.8
       rollup: 4.59.0
       tinyglobby: 0.2.15
     optionalDependencies: