From d8c84650ba975df38d9f6eb44769ab4f14e33344 Mon Sep 17 00:00:00 2001
From: Alex Lavrov <36633600+alexslavr@users.noreply.github.com>
Date: Thu, 17 Sep 2026 16:38:01 +0400
Subject: [PATCH 1/4] chore: update wrapper regeneration instructions and
 clarify public API change process

---
 .github/copilot-instructions.md               | 10 +--
 .../public-api-wrappers.instructions.md       | 64 +++++++++++++++++
 .../wrapper-angular.instructions.md           | 72 +++++++++++++++++++
 .../wrapper-react.instructions.md             | 70 ++++++++++++++++++
 .../instructions/wrapper-vue.instructions.md  | 62 ++++++++++++++++
 .github/prompts/update-wrappers.prompt.md     | 41 +++++++++++
 CLAUDE.md                                     | 21 +++---
 7 files changed, 324 insertions(+), 16 deletions(-)
 create mode 100644 .github/instructions/public-api-wrappers.instructions.md
 create mode 100644 .github/instructions/wrapper-angular.instructions.md
 create mode 100644 .github/instructions/wrapper-react.instructions.md
 create mode 100644 .github/instructions/wrapper-vue.instructions.md
 create mode 100644 .github/prompts/update-wrappers.prompt.md

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index abfb6134970c..d78250b6f372 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -183,7 +183,7 @@ pnpm nx clean:artifacts devextreme        # build artifacts only
 ```
 packages/
   devextreme/                       # core library: ui/, viz/, core/, data/, __internal/
-  devextreme-{angular,react,vue}/   # framework wrappers (generated)
+  devextreme-{angular,react,vue}/   # framework wrappers (hand/AI-maintained)
   devextreme-scss/                  # SCSS themes
   devextreme-themebuilder/          # theme builder
   devextreme-metadata/              # metadata for wrapper generation
@@ -209,14 +209,14 @@ clean (`devextreme-nx-infra-plugin:clean` preserving CSS and npm metadata) → l
 
 - Use `pnpm nx <target> <project>` rather than raw npm scripts so Nx caching and the dependency graph stay correct.
 - Build before testing: `pnpm nx build:dev devextreme`; QUnit and TestCafe both require an up-to-date build.
-- Run `pnpm run regenerate-all` after editing wrapper generators, TypeScript declarations, or `devextreme-internal-tools`.
-- Edit source files only under `packages/devextreme/js/**`, `packages/devextreme-scss/scss/**`, and `packages/devextreme-metadata/**`.
+- The Angular/React/Vue wrappers are maintained by hand (with AI agents), not regenerated from metadata. When public API in `packages/devextreme/js/{ui,viz}/**/*.d.ts` changes, update all three wrappers in the same PR following `.github/instructions/wrapper-{angular,react,vue}.instructions.md` and `.github/instructions/public-api-wrappers.instructions.md`.
+- Edit source files under `packages/devextreme/js/**`, `packages/devextreme-scss/scss/**`, `packages/devextreme-metadata/**`, and the wrapper `packages/devextreme-{angular,react,vue}/src/**` (except each package's `src/core/**`).
 - Match the Node and pnpm versions declared in `package.json` (`engines`, `packageManager`); mismatched versions cause CI failure.
 - Set `DEVEXTREME_TEST_CI=true` for test-mode builds and `BUILD_TEST_INTERNAL_PACKAGE=true` for wrapper test prep.
 
 ## Constraints
 
-- NEVER edit generated wrappers under `packages/devextreme-{angular,react,vue}/src/` (templates excepted); update the generators and run `pnpm run regenerate-all` instead.
+- The wrappers under `packages/devextreme-{angular,react,vue}/src/` are maintained by hand — keep them in sync with the public API per the wrapper instructions; NEVER edit each package's `src/core/**` (hand-written base classes) to accommodate a single component.
 - NEVER hand-edit `packages/devextreme/js/__internal/core/localization/{default_messages.ts,cldr-data/**}`; regenerate via the localization executor.
 - NEVER run `pnpm install` without `--frozen-lockfile`; use `pnpm install --frozen-lockfile` to match CI.
 
@@ -224,7 +224,7 @@ clean (`devextreme-nx-infra-plugin:clean` preserving CSS and npm metadata) → l
 
 - Always install with `pnpm install --frozen-lockfile`; never plain `pnpm install`.
 - Build before test: `pnpm nx build:dev devextreme`.
-- Generated wrappers under `packages/devextreme-{angular,react,vue}/src/` are read-only — modify generators and run `pnpm run regenerate-all`.
+- Wrappers under `packages/devextreme-{angular,react,vue}/src/` are hand/AI-maintained — update them per the wrapper instructions when public API changes; leave each `src/core/**` alone.
 - Prefer `pnpm nx <target>` over direct npm scripts for caching.
 - Consult @.github/instructions/ for file-specific coding rules before editing.
 
diff --git a/.github/instructions/public-api-wrappers.instructions.md b/.github/instructions/public-api-wrappers.instructions.md
new file mode 100644
index 000000000000..c56fa466e999
--- /dev/null
+++ b/.github/instructions/public-api-wrappers.instructions.md
@@ -0,0 +1,64 @@
+---
+applyTo: "**/packages/devextreme/js/{ui,viz}/**/*.d.ts"
+---
+
+# Public API changes must be propagated to the framework wrappers
+
+The Angular, React, and Vue wrappers are **no longer regenerated** from
+`devextreme-metadata` / `devextreme-internal-tools`. They are maintained by hand (with the
+help of local AI agents). This means **every public API change in a wrapped component's
+`.d.ts` must be applied, in the same pull request, to all three wrappers**.
+
+This file applies to the public API surface (`js/ui/**/*.d.ts`, `js/viz/**/*.d.ts`). Use it
+both when editing the API and when reviewing an API change.
+
+## What counts as a wrapper-affecting change
+
+A change to any of the following in a component's options interface (e.g. `dxButtonOptions`,
+its `Properties` alias, or a nested option type such as `dxDataGridColumn`) affects the
+wrappers:
+
+- **Options** — a property added, removed, renamed, or retyped on the options interface.
+- **Events** — an `onX` callback added, removed, renamed, or whose event type changed.
+- **Event types** — a `*Event` type (e.g. `ClickEvent`) whose shape changed.
+- **Nested option types** — a collection/object option type (e.g. `columns`, `items`,
+  `toolbar`) added, removed, renamed, or restructured.
+- **Template options** — a `template` option added or removed.
+
+Purely internal changes (implementation in `js/__internal/**`, JSDoc-only edits that do not
+change types or names) do **not** require a wrapper change.
+
+## Where each change lands in the wrappers
+
+| Public API element | Angular | React | Vue |
+|---|---|---|---|
+| Option `foo?: T` | `@Input() get foo()/set foo()` in `ui/<comp>/index.ts` | field in the component's options type (`IXOptions`) | entry in `props` (correct runtime type + `PropType<T>`) and `emits` `update:foo` |
+| Event `onX?: (e: XEvent) => void` | `@Output() onX: EventEmitter<XEvent>` + `{ subscribe, emit }` entry | narrowed field in `IXOptionsNarrowedEvents` + entry in `independentEvents` | `onX` prop typed `Function as PropType<(e: XEvent) => void>` |
+| Nested option type | do **not** edit `ui/nested/**` (deprecated, removed in a parallel PR) | `NestedOption` config component | configuration component via `prepareConfigurationComponentConfig` |
+| Template option | template input | entry in `templateProps` | `template` prop |
+
+The per-framework anatomy and rules live in
+[wrapper-angular.instructions.md](./wrapper-angular.instructions.md),
+[wrapper-react.instructions.md](./wrapper-react.instructions.md), and
+[wrapper-vue.instructions.md](./wrapper-vue.instructions.md).
+
+## Reviewer checklist
+
+When a PR changes a wrapped component's public `.d.ts`, verify and comment inline if any is
+missing:
+
+1. **Completeness** — every added, removed, or renamed option/event is reflected in
+   **all three** wrappers (`devextreme-angular/src`, `devextreme-react/src`,
+   `devextreme-vue/src`). A change present in one or two wrappers but not the third is a
+   defect — flag the missing wrapper(s) by name.
+2. **Type fidelity** — the wrapper carries the same type as the API (including union
+   members, generics, and the correct Vue runtime type + `PropType`).
+3. **Breaking changes** — explicitly label these as **breaking** in a review comment:
+   - an option or event **removed** or **renamed**;
+   - an option/event **type narrowed** or otherwise changed incompatibly;
+   - a nested option type removed or restructured.
+   Confirm the wrappers reflect the same removal/rename so they stay in sync; do not let a
+   breaking API change land with stale wrapper surface.
+
+Only comment on the wrappers and the API contract. Do not propose regenerating the wrappers
+or restoring the metadata pipeline — that workflow is retired.
diff --git a/.github/instructions/wrapper-angular.instructions.md b/.github/instructions/wrapper-angular.instructions.md
new file mode 100644
index 000000000000..1967d75ff38e
--- /dev/null
+++ b/.github/instructions/wrapper-angular.instructions.md
@@ -0,0 +1,72 @@
+---
+applyTo: "**/packages/devextreme-angular/src/**"
+---
+
+# Maintaining the DevExtreme Angular wrapper by hand
+
+The files under `packages/devextreme-angular/src/` are **no longer generated**. Edit them
+directly to keep them in sync with the public API in
+`packages/devextreme/js/{ui,viz}/**/*.d.ts`. See
+[public-api-wrappers.instructions.md](./public-api-wrappers.instructions.md) for when a
+wrapper change is required and what the reviewer checks.
+
+## Do not edit
+
+- `packages/devextreme-angular/src/core/**` — hand-written base classes
+  (`DxComponent`, `NestedOptionHost`, template/integration modules). Never change these to
+  accommodate a single component.
+- `packages/devextreme-angular/src/ui/nested/**` — the legacy nested option components
+  ("old nesteds"). This folder is **deprecated and being removed in a parallel PR**. Do not
+  add, edit, or reference files here, even when a nested/collection option changes.
+
+## Component file anatomy (`ui/<component>/index.ts`)
+
+Use the widget's options interface (e.g. `dxButtonOptions` and its `WidgetOptions` base) as
+the source of truth. A component file contains, in order:
+
+1. **Imports** — Angular symbols (`Component`, `Input`, `Output`, `EventEmitter`,
+   `NgModule`, `OnDestroy`, …), `type` imports of the event types and enum/union types from
+   `devextreme/ui/<widget>` and `devextreme/common`, the default widget import
+   (`import DxButton from 'devextreme/ui/button'`), and base classes from
+   `devextreme-angular/core`.
+2. **`@Component` decorator** — `selector: 'dx-<name>'`, `template` (`<ng-content>` for
+   container widgets, empty otherwise), `imports: [ DxIntegrationModule ]`, and the standard
+   `providers` (`DxTemplateHost`, `WatcherHelper`, `NestedOptionHost`).
+3. **Class** `Dx<Name>Component extends DxComponent implements OnDestroy` with
+   `instance: Dx<Name> = null;`.
+4. **One `@Input()` getter/setter pair per option**, in the same order as the options
+   interface (including inherited `WidgetOptions`/`DOMComponentOptions`):
+   ```ts
+   @Input()
+   get text(): string { return this._getOption('text'); }
+   set text(value: string) { this._setOption('text', value); }
+   ```
+   The getter/setter type must match the option's type exactly (keep `| undefined` and
+   union members).
+5. **Events** — one `@Output()` per `onX` callback, named exactly as the option and typed
+   with the event type:
+   ```ts
+   @Output() onClick: EventEmitter<ClickEvent>;
+   ```
+6. **Two-way binding outputs** — one `@Output() <option>Change: EventEmitter<T>;` for **every**
+   `@Input` option (type matches the input).
+7. **Constructor** — calls `this._createEventEmitters([...])` with one entry per emitter:
+   `{ subscribe: '<widgetEventName>', emit: 'on<Event>' }` for events (the widget event name
+   is the `onX` name without the `on` prefix, camelCased: `onClick` → `click`) and
+   `{ emit: '<option>Change' }` for every option.
+8. **`_createInstance(element, options)`** — returns `new Dx<Name>(element, options)`.
+9. **`ngOnDestroy()`** — `this._destroyWidget();`.
+10. **`@NgModule`** exporting the component (and `DxTemplateModule`).
+11. **Types reexport** — `import type * as Dx<Name>Types from "devextreme/ui/<widget>_types"; export { Dx<Name>Types };`
+
+## Applying an API change
+
+- **Option added** → add the `@Input` getter/setter, its `<option>Change` output, and the
+  `{ emit: '<option>Change' }` entry in `_createEventEmitters`.
+- **Option removed/renamed** → remove/rename all three (input, change output, emitter entry).
+- **Event added** → add the `@Output() onX`, and a `{ subscribe, emit }` entry.
+- **Nested/collection option** → do **not** touch `ui/nested/**` (deprecated, see "Do not
+  edit"). Leave nested option handling to the parallel removal PR.
+
+Keep import lists, option order, and emitter order aligned with the options interface so
+diffs stay reviewable.
diff --git a/.github/instructions/wrapper-react.instructions.md b/.github/instructions/wrapper-react.instructions.md
new file mode 100644
index 000000000000..014aa5f580ab
--- /dev/null
+++ b/.github/instructions/wrapper-react.instructions.md
@@ -0,0 +1,70 @@
+---
+applyTo: "**/packages/devextreme-react/src/**"
+---
+
+# Maintaining the DevExtreme React wrapper by hand
+
+The files under `packages/devextreme-react/src/` are **no longer generated**. Edit them
+directly to keep them in sync with the public API in
+`packages/devextreme/js/{ui,viz}/**/*.d.ts`. See
+[public-api-wrappers.instructions.md](./public-api-wrappers.instructions.md) for when a
+wrapper change is required and what the reviewer checks.
+
+## Do not edit
+
+- `packages/devextreme-react/src/core/**` — hand-written base
+  (`Component as BaseComponent`, `NestedOption`, `NestedComponentMeta`, `IHtmlOptions`,
+  `ComponentRef`). Never change these for a single component.
+
+## Component file anatomy (`<component>.ts`)
+
+The widget's `Properties` type (alias of `dx<Widget>Options`) is the source of truth.
+
+1. **`"use client"`** directive on line 1, then React imports (`memo`, `forwardRef`,
+   `useImperativeHandle`, `useRef`, `useMemo`, …), the default widget import and its
+   `Properties` (`import dxButton, { Properties } from "devextreme/ui/button"`), the base
+   (`Component as BaseComponent`, `IHtmlOptions`, `ComponentRef`, and `NestedOption`/
+   `NestedComponentMeta` if there are nested options), and `type` imports of the event types.
+2. **`ReplaceFieldTypes`** helper (copied verbatim).
+3. **`I<Name>OptionsNarrowedEvents`** — one field per `onX` event, typed
+   `((e: XEvent) => void)`, so the wrapper exposes the concrete event type.
+4. **`I<Name>Options`** — `React.PropsWithChildren<ReplaceFieldTypes<Properties,
+   I<Name>OptionsNarrowedEvents> & IHtmlOptions & { render?...; component?... }>` (template
+   props included only if the widget has a `template`).
+5. **`<Name>Ref`** interface exposing `instance: () => dx<Widget>`.
+6. **Component** — `memo(forwardRef((props, ref) => { … }))`. Inside:
+   - `useImperativeHandle` returning `{ instance() { return baseRef.current?.getInstance(); } }`;
+   - `useMemo` arrays describing widget behavior, each derived from the API:
+     - `independentEvents` — the list of every `onX` event name;
+     - `subscribableOptions` / `defaults` — for two-way–bindable options (`defaultX` maps to `x`);
+     - `expectedChildren` — nested option components (`{ optionName, isCollectionItem }`);
+     - `templateProps` — `{ tmplOption, render, component }` per `template` option;
+   - `React.createElement(BaseComponent<…>, { WidgetClass: dx<Widget>, ref: baseRef, …arrays, ...props })`.
+7. **Exports** — `export default <Name>;`, `export { <Name>, I<Name>Options, <Name>Ref };`,
+   then `import type * as <Name>Types from 'devextreme/ui/<widget>_types'; export { <Name>Types };`.
+
+## Nested option components (config components)
+
+For each nested/object option, a config component is defined and exported:
+```ts
+const _componentColumn = (props: IColumnProps) =>
+  React.createElement(NestedOption<IColumnProps>, {
+    ...props,
+    elementDescriptor: { OptionName: "columns", /* ExpectedChildren for deeper nesting */ },
+  });
+const Column = Object.assign<typeof _componentColumn, NestedComponentMeta>(_componentColumn, {
+  componentType: "option",
+});
+```
+`OptionName` is the parent option; `isCollectionItem: true` (in the owner's
+`expectedChildren`) marks array options.
+
+## Applying an API change
+
+- **Option added** → it flows in through `Properties`; add it to `subscribableOptions`/
+  `defaults` only if it is two-way bindable, and to `templateProps` if it is a template.
+- **Event added/removed/renamed** → update `I<Name>OptionsNarrowedEvents` and the
+  `independentEvents` array.
+- **Nested option added/changed** → add/update the `_component*` + `Object.assign` export and
+  the owner's `expectedChildren` entry.
+- **Type change** → the concrete event/enum type imports must be updated to match.
diff --git a/.github/instructions/wrapper-vue.instructions.md b/.github/instructions/wrapper-vue.instructions.md
new file mode 100644
index 000000000000..f4f7d5f08be1
--- /dev/null
+++ b/.github/instructions/wrapper-vue.instructions.md
@@ -0,0 +1,62 @@
+---
+applyTo: "**/packages/devextreme-vue/src/**"
+---
+
+# Maintaining the DevExtreme Vue wrapper by hand
+
+The files under `packages/devextreme-vue/src/` are **no longer generated**. Edit them
+directly to keep them in sync with the public API in
+`packages/devextreme/js/{ui,viz}/**/*.d.ts`. See
+[public-api-wrappers.instructions.md](./public-api-wrappers.instructions.md) for when a
+wrapper change is required and what the reviewer checks.
+
+## Do not edit
+
+- `packages/devextreme-vue/src/core/**` — hand-written base
+  (`prepareComponentConfig`, `prepareConfigurationComponentConfig`, component/config
+  helpers). Never change these for a single component.
+
+## Component file anatomy (`<component>.ts`)
+
+The widget's `Properties` type (alias of `dx<Widget>Options`) is the source of truth.
+
+1. **Imports** — `PropType` and `defineComponent` from `vue`, `prepareComponentConfig` from
+   `./core/index`, the default widget import and `Properties`
+   (`import Button, { Properties } from "devextreme/ui/button"`), the event types from
+   `devextreme/ui/<widget>`, and any enum/union types from `devextreme/common`.
+2. **`AccessibleOptions`** — `Pick<Properties, "opt1" | "opt2" | …>` listing every exposed
+   option and event, followed by `interface Dx<Name> extends AccessibleOptions { readonly instance?: <Widget>; }`.
+3. **`componentConfig`** object:
+   - **`props`** — one entry per option, mapped to the Vue runtime type:
+     - `string` → `String`; `boolean` → `Boolean`; `number` → `Number`;
+     - `number | string` → `[Number, String]`; object → `Object as PropType<T>`;
+     - union/enum → `String as PropType<ButtonType | string>`;
+     - callback → `Function as PropType<((e: XEvent) => void)>`;
+     - `template` → `{}`.
+   - **`emits`** — `"update:<prop>": null` for **every** prop (plus widget read-only
+     subscribable options such as `"update:isActive"`), enabling `v-model:prop`.
+   - **`computed.instance`** returning `(this as any).$_instance`.
+   - **`beforeCreate`** setting `$_WidgetClass = <Widget>` and `$_hasAsyncTemplate = true`
+     (when the widget has templates).
+4. **`prepareComponentConfig(componentConfig);`** then
+   `const Dx<Name> = defineComponent(componentConfig);`.
+5. **Exports** — `export default Dx<Name>;`, `export { Dx<Name> };`, then
+   `import type * as Dx<Name>Types from "devextreme/ui/<widget>_types"; export { Dx<Name>Types };`.
+
+## Nested option components (configuration components)
+
+Nested/object options are separate configuration components whose config is finalized with
+`prepareConfigurationComponentConfig(...)` (instead of `prepareComponentConfig`). Each
+declares its own `props`/`emits` and identifies its parent option name; collection options
+are marked as such in the base config. Keep these in sync with the nested option types.
+
+## Applying an API change
+
+- **Option added** → add it to `AccessibleOptions`, to `props` (with the correct runtime
+  type + `PropType`), and add `"update:<prop>": null` to `emits`.
+- **Option removed/renamed** → remove/rename it in all three places.
+- **Event added/removed/renamed** → update `AccessibleOptions`, the `props` entry
+  (`Function as PropType<...>`), and the `emits` entry.
+- **Nested option added/changed** → add/update the configuration component and the parent's
+  wiring.
+- **Type change** → update the event/enum type imports and the `PropType<...>` to match.
diff --git a/.github/prompts/update-wrappers.prompt.md b/.github/prompts/update-wrappers.prompt.md
new file mode 100644
index 000000000000..ecc3ef14925b
--- /dev/null
+++ b/.github/prompts/update-wrappers.prompt.md
@@ -0,0 +1,41 @@
+---
+mode: agent
+description: Propagate a DevExtreme public API change into the Angular, React, and Vue wrappers.
+---
+
+# Update the framework wrappers after a public API change
+
+Use this when a wrapped component's public API changed in
+`packages/devextreme/js/{ui,viz}/**/*.d.ts` and the Angular/React/Vue wrappers must be
+brought back in sync. The wrappers are maintained by hand — do **not** run the retired
+`regenerate-all` / metadata pipeline.
+
+Follow the anatomy and rules in:
+- [.github/instructions/public-api-wrappers.instructions.md](../instructions/public-api-wrappers.instructions.md)
+- [.github/instructions/wrapper-angular.instructions.md](../instructions/wrapper-angular.instructions.md)
+- [.github/instructions/wrapper-react.instructions.md](../instructions/wrapper-react.instructions.md)
+- [.github/instructions/wrapper-vue.instructions.md](../instructions/wrapper-vue.instructions.md)
+
+## Steps
+
+1. **Identify the change.** For the changed component's `.d.ts`, diff the options interface
+   (e.g. `dxButtonOptions` / `Properties`), its events (`onX` + `*Event` types), and nested
+   option types. List every option/event/type that was **added, removed, renamed, or
+   retyped**, and flag removals/renames/incompatible retypes as **breaking**.
+2. **Locate the wrapper files** for the same component in each package:
+   - Angular: `packages/devextreme-angular/src/ui/<component>/index.ts` (+ `ui/nested/*`)
+   - React: `packages/devextreme-react/src/<component>.ts`
+   - Vue: `packages/devextreme-vue/src/<component>.ts`
+3. **Apply the change in all three wrappers**, using each framework's mapping:
+   - Angular: `@Input` getter/setter, `<option>Change` output, `_createEventEmitters` entry;
+     `@Output() onX` for events.
+   - React: `Properties` flows automatically; update `I<Name>OptionsNarrowedEvents`,
+     `independentEvents`, `subscribableOptions`/`defaults`, `templateProps`, nested
+     `_component*`/`expectedChildren` as needed.
+   - Vue: `AccessibleOptions` `Pick`, `props` (correct runtime type + `PropType`), and
+     `emits` `update:<prop>`.
+   Keep option/event order and imports aligned with the `.d.ts`.
+4. **Do not touch** `src/core/**` in any wrapper package.
+5. **Verify.** From `packages/devextreme` run `pnpm run lint-dts` and, if reexports changed,
+   `pnpm run update-ts-reexports`. Type-check/build the affected wrapper package(s).
+6. **Report** the applied changes per framework and call out any breaking changes explicitly.
diff --git a/CLAUDE.md b/CLAUDE.md
index 57f24b7da5fb..ed99f238336d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -106,9 +106,9 @@ packages/
     js/data/            # Public entry points for data layer
     js/__internal/      # All implementation code lives here
       grids/            # Grid components (DataGrid, TreeList, etc.)
-  devextreme-angular/   # Angular wrapper (GENERATED — do not edit src/)
-  devextreme-react/     # React wrapper (GENERATED — do not edit src/)
-  devextreme-vue/       # Vue wrapper (GENERATED — do not edit src/)
+  devextreme-angular/   # Angular wrapper (hand/AI-maintained — do not edit src/core/)
+  devextreme-react/     # React wrapper (hand/AI-maintained — do not edit src/core/)
+  devextreme-vue/       # Vue wrapper (hand/AI-maintained — do not edit src/core/)
   devextreme-scss/      # SCSS themes
   devextreme-metadata/  # Metadata that drives wrapper generation
   testcafe-models/      # TestCafe page object models
@@ -124,21 +124,20 @@ The folders under `js/` (except `__internal/`) contain only the public API surfa
 
 ### Framework Wrappers
 
-Framework wrappers (`devextreme-angular/src/`, `devextreme-react/src/`, `devextreme-vue/src/`) are **entirely generated** — do not edit `src/` directly.
+Framework wrappers (`devextreme-angular/src/`, `devextreme-react/src/`, `devextreme-vue/src/`) are **maintained by hand** (with the help of local AI agents) — they are no longer regenerated from `devextreme-metadata` / `devextreme-internal-tools`.
 
-When updating public API in `js/ui/*.d.ts`, regenerate afterward:
+When updating public API in `js/{ui,viz}/**/*.d.ts`, apply the same change to all three wrappers in the same PR, then validate:
 ```bash
-pnpm run regenerate-all          # from repo root — requires .NET SDK 8.0.x
 cd packages/devextreme
-pnpm run update-ts-reexports
-pnpm run update-ts-bundle
+pnpm run update-ts-reexports   # if reexports changed
 pnpm run lint-dts
 ```
+Follow the per-framework anatomy and rules in `.github/instructions/wrapper-{angular,react,vue}.instructions.md`, and the propagation/breaking-change checklist in `.github/instructions/public-api-wrappers.instructions.md`. The reusable workflow lives in `.github/prompts/update-wrappers.prompt.md`.
 
 Do not edit directly:
-- `packages/devextreme-angular/src/**/*` (except templates)
-- `packages/devextreme-react/src/**/*` (except templates)
-- `packages/devextreme-vue/src/**/*` (except templates)
+- `packages/devextreme-angular/src/core/**`
+- `packages/devextreme-react/src/core/**`
+- `packages/devextreme-vue/src/core/**`
 - `packages/devextreme/js/__internal/core/localization/default_messages.ts`
 - `packages/devextreme/js/__internal/core/localization/cldr-data/**/*`
 

From 9d6fd7b4eb40bf2d92b4b6821eb1e271ad91d1f6 Mon Sep 17 00:00:00 2001
From: Alex Lavrov <36633600+alexslavr@users.noreply.github.com>
Date: Thu, 17 Sep 2026 16:47:24 +0400
Subject: [PATCH 2/4] chore: remove wrappers regeneration scripts and CI checks

---
 .github/copilot-instructions.md       |  3 +-
 .github/workflows/pr-filter-stubs.yml |  7 ----
 .github/workflows/ts_declarations.yml |  2 +-
 .github/workflows/wrapper_tests.yml   | 48 ---------------------------
 CLAUDE.md                             |  4 +--
 package.json                          |  4 ---
 6 files changed, 4 insertions(+), 64 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index d78250b6f372..08ad44a5cffe 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -168,8 +168,7 @@ pnpm nx run-many -t lint                  # all packages
 pnpm run lint                             # devextreme package: js, ts, dts, texts
 pnpm run lint-js -- --fix                 # auto-fix JS
 
-# Regenerate (after changes to generators, TS declarations, or devextreme-internal-tools)
-pnpm run regenerate-all
+# Regenerate TS reexports and bundle (after changes to public .d.ts)
 pnpm run update-ts-reexports              # from packages/devextreme
 pnpm run update-ts-bundle                 # from packages/devextreme
 
diff --git a/.github/workflows/pr-filter-stubs.yml b/.github/workflows/pr-filter-stubs.yml
index f99249d12996..d178f73ad25b 100644
--- a/.github/workflows/pr-filter-stubs.yml
+++ b/.github/workflows/pr-filter-stubs.yml
@@ -43,13 +43,6 @@ jobs:
     steps:
       - run: exit 1
   # wrapper_tests.yml
-  wrapper_tests1:
-    name: 'check-regenerate'
-    needs: [ stubChecksReady ]
-    if: false
-    runs-on: ubuntu-latest
-    steps:
-      - run: exit 1
   wrapper_tests2:
     name: 'test (angular)'
     needs: [ stubChecksReady ]
diff --git a/.github/workflows/ts_declarations.yml b/.github/workflows/ts_declarations.yml
index 9b1100a5719c..76372ce3fbf3 100644
--- a/.github/workflows/ts_declarations.yml
+++ b/.github/workflows/ts_declarations.yml
@@ -54,7 +54,7 @@ jobs:
         if ! diff $target.current $target -U 5 > $target.diff; then
             echo "FAIL: $target is outdated:"
             cat $target.diff | sed "1,2d"
-            echo "Execute 'pnpm run regenerate-all' to update dx.all.d.ts"
+            echo "Execute 'pnpm run regenerate' in packages/devextreme to update dx.all.d.ts"
             exit 1
         else
             echo "TS is up-to-date"
diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml
index d82f02a6634f..b24d05b1a1fb 100644
--- a/.github/workflows/wrapper_tests.yml
+++ b/.github/workflows/wrapper_tests.yml
@@ -96,54 +96,6 @@ jobs:
       - name: Build devextreme package
         run: pnpm exec nx build devextreme -c testing
 
-  check-regenerate:
-    runs-on: devextreme-shr2
-    timeout-minutes: 10
-
-    steps:
-      - name: Get sources
-        uses: actions/checkout@v6
-
-      - name: Use Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.node-version'
-
-      - uses: pnpm/action-setup@v6
-        with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v5
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-cache
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Generate wrappers
-        run: pnpm run regenerate-all
-
-      - name: Check generated code
-        shell: bash
-        run: |
-          git add . -N
-          changes=$(git diff --name-status HEAD -- packages/devextreme-angular/src packages/devextreme-react/src packages/devextreme-vue/src)
-          if [ -n "$changes" ]; then
-            echo "Generated code is outdated. The following files have uncommitted changes:"
-            echo "$changes";
-            echo "To update generated code, use "pnpm run regenerate-all" and commit changes."
-            exit 1
-          fi
-
   test:
     timeout-minutes: 30
     needs: build
diff --git a/CLAUDE.md b/CLAUDE.md
index ed99f238336d..a792803a7a7c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -186,11 +186,11 @@ Files under `**/localization/messages/**/*.json` are managed by a dedicated team
 | `default_workflow.yml` | `nx run-many -t lint,test` on most packages                           |
 | `lint.yml`             | TS, JS, .d.ts, text linting; checks generated reexports are up-to-date |
 | `build_all.yml`        | Full production build (requires .NET 8.0.x) — CI only                |
-| `wrapper_tests.yml`    | Angular/React/Vue wrapper tests + regeneration check                  |
+| `wrapper_tests.yml`    | Angular/React/Vue wrapper tests                                      |
 | `qunit_tests.yml`      | Legacy QUnit tests                                                    |
 | `testcafe_tests.yml`   | E2E accessibility and component tests                                 |
 
 **Common CI failure fixes:**
-- *"Generated code is outdated"* → run `pnpm run regenerate-all` from repo root
+- *"dx.all.d.ts is outdated"* → run `pnpm run regenerate` from `packages/devextreme`
 - *"Reexports outdated"* → run `pnpm run update-ts-reexports` from `packages/devextreme`
 - *Lint errors* → run `pnpm run lint-js -- --fix` or `pnpm run lint-ts -- --fix`
diff --git a/package.json b/package.json
index dd898f662cd5..3ec963ae33ab 100644
--- a/package.json
+++ b/package.json
@@ -7,13 +7,9 @@
     "devextreme:inject-descriptions-to-bundle": "dx-tools inject-descriptions --target-path ./packages/devextreme/ts/dx.all.d.ts --artifacts ./node_modules/devextreme-metadata/dist",
     "devextreme:inject-descriptions-to-modules": "dx-tools inject-descriptions --collapse-tags --sources ./packages/devextreme/js --artifacts ./node_modules/devextreme-metadata/dist",
     "devextreme:inject-descriptions": "npm run devextreme:inject-descriptions-to-bundle && npm run devextreme:inject-descriptions-to-modules",
-    "angular:regenerate": "nx regenerate devextreme-angular",
     "angular:inject-descriptions": "dx-tools inject-descriptions --sources ./packages/devextreme-angular/npm/dist --artifacts ./node_modules/devextreme-metadata/dist",
-    "react:regenerate": "nx regenerate devextreme-react",
     "react-storybook:start": "nx start devextreme-react-storybook",
     "tools": "dx-tools",
-    "vue:regenerate": "nx regenerate devextreme-vue",
-    "regenerate-all": "nx run-many -t regenerate",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
     "change-package-scope": "ts-node tools/scripts/change-package-scope.ts",

From 035ae18c699c81701e134808d130dea1a04203c9 Mon Sep 17 00:00:00 2001
From: Alex Lavrov <36633600+alexslavr@users.noreply.github.com>
Date: Fri, 18 Sep 2026 16:18:45 +0400
Subject: [PATCH 3/4] chore: add instructions for adding new component

---
 .../wrapper-angular.instructions.md           | 24 +++++++++++++++++++
 .../wrapper-react.instructions.md             | 13 ++++++++++
 .../instructions/wrapper-vue.instructions.md  | 13 ++++++++++
 3 files changed, 50 insertions(+)

diff --git a/.github/instructions/wrapper-angular.instructions.md b/.github/instructions/wrapper-angular.instructions.md
index 1967d75ff38e..61243bdeb679 100644
--- a/.github/instructions/wrapper-angular.instructions.md
+++ b/.github/instructions/wrapper-angular.instructions.md
@@ -19,6 +19,30 @@ wrapper change is required and what the reviewer checks.
   ("old nesteds"). This folder is **deprecated and being removed in a parallel PR**. Do not
   add, edit, or reference files here, even when a nested/collection option changes.
 
+## Adding a new component
+
+Fastest path: **clone the closest existing wrapper and rename**, rather than writing a file
+from scratch. For a plain Widget-based component copy `ui/load-indicator/index.ts`; for one
+with many options/events copy `ui/button/index.ts`; for a container with nested options copy
+`ui/sortable/` (the component plus its `nested/` folder).
+
+Files to create and register (keep every list alphabetical):
+
+- `packages/devextreme-angular/src/ui/<name>/index.ts` — the component (see anatomy below).
+- `packages/devextreme-angular/src/ui/<name>/ng-package.json` —
+  `{ "lib": { "entryFile": "index.ts" } }`.
+- `packages/devextreme-angular/src/index.ts` — add
+  `export { Dx<Name>Component, Dx<Name>Module } from 'devextreme-angular/ui/<name>';`.
+- `packages/devextreme-angular/src/ui/all.ts` — add the `import` **and** add `Dx<Name>Module`
+  to **both** the declarations and exports arrays (the two arrays are identical; anchor on the
+  neighboring entries to place it in each).
+- For a component with nested/object options, also create the `ui/<name>/nested/` folder
+  (cloning `ui/sortable/nested/` is the fastest way) and wire its module into the component's
+  `@NgModule` plus `export * from 'devextreme-angular/ui/<name>/nested';`.
+
+Do **not** create anything under `src/metadata/generated/**` — it is gitignored generated
+output, not source.
+
 ## Component file anatomy (`ui/<component>/index.ts`)
 
 Use the widget's options interface (e.g. `dxButtonOptions` and its `WidgetOptions` base) as
diff --git a/.github/instructions/wrapper-react.instructions.md b/.github/instructions/wrapper-react.instructions.md
index 014aa5f580ab..facf64c2bd1a 100644
--- a/.github/instructions/wrapper-react.instructions.md
+++ b/.github/instructions/wrapper-react.instructions.md
@@ -16,6 +16,19 @@ wrapper change is required and what the reviewer checks.
   (`Component as BaseComponent`, `NestedOption`, `NestedComponentMeta`, `IHtmlOptions`,
   `ComponentRef`). Never change these for a single component.
 
+## Adding a new component
+
+Fastest path: **clone the closest existing wrapper and rename**, rather than writing a file
+from scratch. For a plain Widget-based component copy `load-indicator.ts`; for one with a
+`template` copy `button.ts`; for a container with nested options copy `data-grid.ts` (it
+contains the nested config-component pattern).
+
+Files to create and register (keep every list alphabetical):
+
+- `packages/devextreme-react/src/<name>.ts` — the component (see anatomy below), including any
+  nested config components in the same file.
+- `packages/devextreme-react/src/index.ts` — add `export { <Name> } from "./<name>";`.
+
 ## Component file anatomy (`<component>.ts`)
 
 The widget's `Properties` type (alias of `dx<Widget>Options`) is the source of truth.
diff --git a/.github/instructions/wrapper-vue.instructions.md b/.github/instructions/wrapper-vue.instructions.md
index f4f7d5f08be1..32e2b165cf00 100644
--- a/.github/instructions/wrapper-vue.instructions.md
+++ b/.github/instructions/wrapper-vue.instructions.md
@@ -16,6 +16,19 @@ wrapper change is required and what the reviewer checks.
   (`prepareComponentConfig`, `prepareConfigurationComponentConfig`, component/config
   helpers). Never change these for a single component.
 
+## Adding a new component
+
+Fastest path: **clone the closest existing wrapper and rename**, rather than writing a file
+from scratch. For a plain Widget-based component copy `load-indicator.ts`; for one with a
+`template` copy `button.ts`; for a container with nested options copy `data-grid.ts` (it
+contains the configuration-component pattern).
+
+Files to create and register (keep every list alphabetical):
+
+- `packages/devextreme-vue/src/<name>.ts` — the component (see anatomy below), including any
+  configuration components in the same file.
+- `packages/devextreme-vue/src/index.ts` — add `export { Dx<Name> } from "./<name>";`.
+
 ## Component file anatomy (`<component>.ts`)
 
 The widget's `Properties` type (alias of `dx<Widget>Options`) is the source of truth.

From d77397d2feb892acc27e3bb794cbb9e6c8680ff9 Mon Sep 17 00:00:00 2001
From: Alex Lavrov <36633600+alexslavr@users.noreply.github.com>
Date: Fri, 18 Sep 2026 16:29:02 +0400
Subject: [PATCH 4/4] try to generate new component

---
 packages/devextreme-angular/src/index.ts      |   1 +
 packages/devextreme-angular/src/ui/all.ts     |   3 +
 .../src/ui/skeleton/index.ts                  | 432 ++++++++++++++++++
 .../src/ui/skeleton/nested/index.ts           |   1 +
 .../src/ui/skeleton/nested/ng-package.json    |   5 +
 .../ui/skeleton/nested/root-complex-option.ts |  82 ++++
 .../src/ui/skeleton/ng-package.json           |   5 +
 packages/devextreme-react/src/index.ts        |   1 +
 packages/devextreme-react/src/skeleton.ts     |  89 ++++
 packages/devextreme-vue/src/index.ts          |   1 +
 packages/devextreme-vue/src/skeleton.ts       | 124 +++++
 .../js/__internal/ui/skeleton/skeleton.ts     |   9 +
 packages/devextreme/js/ui/skeleton.d.ts       |  75 +++
 packages/devextreme/js/ui/skeleton.js         |   5 +
 packages/devextreme/js/ui/skeleton_types.d.ts |   6 +
 15 files changed, 839 insertions(+)
 create mode 100644 packages/devextreme-angular/src/ui/skeleton/index.ts
 create mode 100644 packages/devextreme-angular/src/ui/skeleton/nested/index.ts
 create mode 100644 packages/devextreme-angular/src/ui/skeleton/nested/ng-package.json
 create mode 100644 packages/devextreme-angular/src/ui/skeleton/nested/root-complex-option.ts
 create mode 100644 packages/devextreme-angular/src/ui/skeleton/ng-package.json
 create mode 100644 packages/devextreme-react/src/skeleton.ts
 create mode 100644 packages/devextreme-vue/src/skeleton.ts
 create mode 100644 packages/devextreme/js/__internal/ui/skeleton/skeleton.ts
 create mode 100644 packages/devextreme/js/ui/skeleton.d.ts
 create mode 100644 packages/devextreme/js/ui/skeleton.js
 create mode 100644 packages/devextreme/js/ui/skeleton_types.d.ts

diff --git a/packages/devextreme-angular/src/index.ts b/packages/devextreme-angular/src/index.ts
index 3624a2e345a9..d1757ab320a5 100644
--- a/packages/devextreme-angular/src/index.ts
+++ b/packages/devextreme-angular/src/index.ts
@@ -73,6 +73,7 @@ export { DxSankeyComponent, DxSankeyModule } from 'devextreme-angular/ui/sankey'
 export { DxSchedulerComponent, DxSchedulerModule } from 'devextreme-angular/ui/scheduler';
 export { DxScrollViewComponent, DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
 export { DxSelectBoxComponent, DxSelectBoxModule } from 'devextreme-angular/ui/select-box';
+export { DxSkeletonComponent, DxSkeletonModule } from 'devextreme-angular/ui/skeleton';
 export { DxSliderComponent, DxSliderModule } from 'devextreme-angular/ui/slider';
 export { DxSortableComponent, DxSortableModule } from 'devextreme-angular/ui/sortable';
 export { DxSparklineComponent, DxSparklineModule } from 'devextreme-angular/ui/sparkline';
diff --git a/packages/devextreme-angular/src/ui/all.ts b/packages/devextreme-angular/src/ui/all.ts
index 7cc6df9910ad..41649a64ac1f 100644
--- a/packages/devextreme-angular/src/ui/all.ts
+++ b/packages/devextreme-angular/src/ui/all.ts
@@ -57,6 +57,7 @@ import { DxSankeyModule } from 'devextreme-angular/ui/sankey';
 import { DxSchedulerModule } from 'devextreme-angular/ui/scheduler';
 import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
 import { DxSelectBoxModule } from 'devextreme-angular/ui/select-box';
+import { DxSkeletonModule } from 'devextreme-angular/ui/skeleton';
 import { DxSliderModule } from 'devextreme-angular/ui/slider';
 import { DxSortableModule } from 'devextreme-angular/ui/sortable';
 import { DxSparklineModule } from 'devextreme-angular/ui/sparkline';
@@ -143,6 +144,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxSchedulerModule,
     DxScrollViewModule,
     DxSelectBoxModule,
+    DxSkeletonModule,
     DxSliderModule,
     DxSortableModule,
     DxSparklineModule,
@@ -228,6 +230,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxSchedulerModule,
     DxScrollViewModule,
     DxSelectBoxModule,
+    DxSkeletonModule,
     DxSliderModule,
     DxSortableModule,
     DxSparklineModule,
diff --git a/packages/devextreme-angular/src/ui/skeleton/index.ts b/packages/devextreme-angular/src/ui/skeleton/index.ts
new file mode 100644
index 000000000000..0848986f3bc8
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/skeleton/index.ts
@@ -0,0 +1,432 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    TransferState,
+    Component,
+    NgModule,
+    ElementRef,
+    NgZone,
+    PLATFORM_ID,
+    Inject,
+
+    Input,
+    Output,
+    OnDestroy,
+    EventEmitter
+} from '@angular/core';
+
+
+import type { ContentReadyEvent, SkeletonComplexType } from 'devextreme/ui/skeleton';
+import type { EventInfo, InitializedEventInfo, ChangedOptionInfo } from 'devextreme/events';
+
+import DxSkeleton from 'devextreme/ui/skeleton';
+
+
+import {
+    DxComponent,
+    DxTemplateHost,
+    DxIntegrationModule,
+    DxTemplateModule,
+    NestedOptionHost,
+    WatcherHelper,
+} from 'devextreme-angular/core';
+
+import { DxoSkeletonRootComplexOptionModule } from 'devextreme-angular/ui/skeleton/nested';
+
+
+/**
+ * [descr:dxSkeleton]
+
+ */
+@Component({
+    selector: 'dx-skeleton',
+    template: '<ng-content></ng-content>',
+    host: { ngSkipHydration: 'true' },
+    imports: [ DxIntegrationModule ],
+    providers: [
+        DxTemplateHost,
+        WatcherHelper,
+        NestedOptionHost
+    ]
+})
+export class DxSkeletonComponent extends DxComponent implements OnDestroy {
+
+    instance: DxSkeleton = null;
+
+    /**
+     * [descr:WidgetOptions.accessKey]
+    
+     */
+    @Input()
+    get accessKey(): string | undefined {
+        return this._getOption('accessKey');
+    }
+    set accessKey(value: string | undefined) {
+        this._setOption('accessKey', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.activeStateEnabled]
+    
+     */
+    @Input()
+    get activeStateEnabled(): boolean {
+        return this._getOption('activeStateEnabled');
+    }
+    set activeStateEnabled(value: boolean) {
+        this._setOption('activeStateEnabled', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.disabled]
+    
+     */
+    @Input()
+    get disabled(): boolean {
+        return this._getOption('disabled');
+    }
+    set disabled(value: boolean) {
+        this._setOption('disabled', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.elementAttr]
+    
+     */
+    @Input()
+    get elementAttr(): Record<string, any> {
+        return this._getOption('elementAttr');
+    }
+    set elementAttr(value: Record<string, any>) {
+        this._setOption('elementAttr', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.focusStateEnabled]
+    
+     */
+    @Input()
+    get focusStateEnabled(): boolean {
+        return this._getOption('focusStateEnabled');
+    }
+    set focusStateEnabled(value: boolean) {
+        this._setOption('focusStateEnabled', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.height]
+    
+     */
+    @Input()
+    get height(): number | string | undefined {
+        return this._getOption('height');
+    }
+    set height(value: number | string | undefined) {
+        this._setOption('height', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.hint]
+    
+     */
+    @Input()
+    get hint(): string | undefined {
+        return this._getOption('hint');
+    }
+    set hint(value: string | undefined) {
+        this._setOption('hint', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.hoverStateEnabled]
+    
+     */
+    @Input()
+    get hoverStateEnabled(): boolean {
+        return this._getOption('hoverStateEnabled');
+    }
+    set hoverStateEnabled(value: boolean) {
+        this._setOption('hoverStateEnabled', value);
+    }
+
+
+    /**
+     * [descr:dxSkeletonOptions.rootComplexOption]
+    
+     */
+    @Input()
+    get rootComplexOption(): SkeletonComplexType {
+        return this._getOption('rootComplexOption');
+    }
+    set rootComplexOption(value: SkeletonComplexType) {
+        this._setOption('rootComplexOption', value);
+    }
+
+
+    /**
+     * [descr:dxSkeletonOptions.rootPrimitiveOption]
+    
+     */
+    @Input()
+    get rootPrimitiveOption(): number {
+        return this._getOption('rootPrimitiveOption');
+    }
+    set rootPrimitiveOption(value: number) {
+        this._setOption('rootPrimitiveOption', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.rtlEnabled]
+    
+     */
+    @Input()
+    get rtlEnabled(): boolean {
+        return this._getOption('rtlEnabled');
+    }
+    set rtlEnabled(value: boolean) {
+        this._setOption('rtlEnabled', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.tabIndex]
+    
+     */
+    @Input()
+    get tabIndex(): number {
+        return this._getOption('tabIndex');
+    }
+    set tabIndex(value: number) {
+        this._setOption('tabIndex', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.visible]
+    
+     */
+    @Input()
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.width]
+    
+     */
+    @Input()
+    get width(): number | string | undefined {
+        return this._getOption('width');
+    }
+    set width(value: number | string | undefined) {
+        this._setOption('width', value);
+    }
+
+    /**
+    
+     * [descr:dxSkeletonOptions.onContentReady]
+    
+    
+     */
+    @Output() onContentReady: EventEmitter<ContentReadyEvent>;
+
+    /**
+    
+     * [descr:dxSkeletonOptions.onDisposing]
+    
+    
+     */
+    @Output() onDisposing: EventEmitter<EventInfo<DxSkeleton>>;
+
+    /**
+    
+     * [descr:dxSkeletonOptions.onInitialized]
+    
+    
+     */
+    @Output() onInitialized: EventEmitter<InitializedEventInfo<DxSkeleton>>;
+
+    /**
+    
+     * [descr:dxSkeletonOptions.onOptionChanged]
+    
+    
+     */
+    @Output() onOptionChanged: EventEmitter<EventInfo<DxSkeleton> & ChangedOptionInfo>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() accessKeyChange: EventEmitter<string | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() activeStateEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() disabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() elementAttrChange: EventEmitter<Record<string, any>>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() focusStateEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() heightChange: EventEmitter<number | string | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() hintChange: EventEmitter<string | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() hoverStateEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() rootComplexOptionChange: EventEmitter<SkeletonComplexType>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() rootPrimitiveOptionChange: EventEmitter<number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() rtlEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() tabIndexChange: EventEmitter<number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() visibleChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() widthChange: EventEmitter<number | string | undefined>;
+
+
+
+
+    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,
+            _watcherHelper: WatcherHelper,
+            optionHost: NestedOptionHost,
+            transferState: TransferState,
+            @Inject(PLATFORM_ID) platformId: any) {
+
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
+
+        this._createEventEmitters([
+            { subscribe: 'contentReady', emit: 'onContentReady' },
+            { subscribe: 'disposing', emit: 'onDisposing' },
+            { subscribe: 'initialized', emit: 'onInitialized' },
+            { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { emit: 'accessKeyChange' },
+            { emit: 'activeStateEnabledChange' },
+            { emit: 'disabledChange' },
+            { emit: 'elementAttrChange' },
+            { emit: 'focusStateEnabledChange' },
+            { emit: 'heightChange' },
+            { emit: 'hintChange' },
+            { emit: 'hoverStateEnabledChange' },
+            { emit: 'rootComplexOptionChange' },
+            { emit: 'rootPrimitiveOptionChange' },
+            { emit: 'rtlEnabledChange' },
+            { emit: 'tabIndexChange' },
+            { emit: 'visibleChange' },
+            { emit: 'widthChange' }
+        ]);
+        optionHost.setHost(this);
+    }
+
+    protected _createInstance(element, options) {
+
+        return new DxSkeleton(element, options);
+    }
+
+
+    ngOnDestroy() {
+        this._destroyWidget();
+    }
+
+}
+
+@NgModule({
+  imports: [
+    DxSkeletonComponent,
+    DxoSkeletonRootComplexOptionModule,
+    DxIntegrationModule,
+    DxTemplateModule
+  ],
+  exports: [
+    DxSkeletonComponent,
+    DxoSkeletonRootComplexOptionModule,
+    DxTemplateModule
+  ]
+})
+export class DxSkeletonModule { }
+
+export * from 'devextreme-angular/ui/skeleton/nested';
+
+import type * as DxSkeletonTypes from "devextreme/ui/skeleton_types";
+export { DxSkeletonTypes };
diff --git a/packages/devextreme-angular/src/ui/skeleton/nested/index.ts b/packages/devextreme-angular/src/ui/skeleton/nested/index.ts
new file mode 100644
index 000000000000..a96af9e133a7
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/skeleton/nested/index.ts
@@ -0,0 +1 @@
+export * from './root-complex-option';
diff --git a/packages/devextreme-angular/src/ui/skeleton/nested/ng-package.json b/packages/devextreme-angular/src/ui/skeleton/nested/ng-package.json
new file mode 100644
index 000000000000..3360c83b3395
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/skeleton/nested/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/devextreme-angular/src/ui/skeleton/nested/root-complex-option.ts b/packages/devextreme-angular/src/ui/skeleton/nested/root-complex-option.ts
new file mode 100644
index 000000000000..6e2c6ecc950e
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/skeleton/nested/root-complex-option.ts
@@ -0,0 +1,82 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-skeleton-root-complex-option',
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [NestedOptionHost]
+})
+export class DxoSkeletonRootComplexOptionComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get prop1(): string {
+        return this._getOption('prop1');
+    }
+    set prop1(value: string) {
+        this._setOption('prop1', value);
+    }
+
+    @Input()
+    get prop2(): boolean {
+        return this._getOption('prop2');
+    }
+    set prop2(value: boolean) {
+        this._setOption('prop2', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'rootComplexOption';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  imports: [
+    DxoSkeletonRootComplexOptionComponent
+  ],
+  exports: [
+    DxoSkeletonRootComplexOptionComponent
+  ],
+})
+export class DxoSkeletonRootComplexOptionModule { }
diff --git a/packages/devextreme-angular/src/ui/skeleton/ng-package.json b/packages/devextreme-angular/src/ui/skeleton/ng-package.json
new file mode 100644
index 000000000000..3360c83b3395
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/skeleton/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/devextreme-react/src/index.ts b/packages/devextreme-react/src/index.ts
index b81c3370290a..d251f93c0552 100644
--- a/packages/devextreme-react/src/index.ts
+++ b/packages/devextreme-react/src/index.ts
@@ -57,6 +57,7 @@ export { Sankey } from "./sankey";
 export { Scheduler } from "./scheduler";
 export { ScrollView } from "./scroll-view";
 export { SelectBox } from "./select-box";
+export { Skeleton } from "./skeleton";
 export { Slider } from "./slider";
 export { Sortable } from "./sortable";
 export { Sparkline } from "./sparkline";
diff --git a/packages/devextreme-react/src/skeleton.ts b/packages/devextreme-react/src/skeleton.ts
new file mode 100644
index 000000000000..5da937e5978e
--- /dev/null
+++ b/packages/devextreme-react/src/skeleton.ts
@@ -0,0 +1,89 @@
+"use client"
+export { ExplicitTypes } from "devextreme/ui/skeleton";
+import * as React from "react";
+import { memo, forwardRef, useImperativeHandle, useRef, useMemo, ForwardedRef, Ref, ReactElement } from "react";
+import dxSkeleton, {
+    Properties
+} from "devextreme/ui/skeleton";
+
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
+import NestedOption from "./core/nested-option";
+
+import type { ContentReadyEvent } from "devextreme/ui/skeleton";
+
+type ReplaceFieldTypes<TSource, TReplacement> = {
+  [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
+}
+
+type ISkeletonOptionsNarrowedEvents = {
+  onContentReady?: ((e: ContentReadyEvent) => void);
+}
+
+type ISkeletonOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ISkeletonOptionsNarrowedEvents> & IHtmlOptions>
+
+interface SkeletonRef {
+  instance: () => dxSkeleton;
+}
+
+const Skeleton = memo(
+  forwardRef(
+    (props: React.PropsWithChildren<ISkeletonOptions>, ref: ForwardedRef<SkeletonRef>) => {
+      const baseRef = useRef<ComponentRef>(null);
+
+      useImperativeHandle(ref, () => (
+        {
+          instance() {
+            return baseRef.current?.getInstance();
+          }
+        }
+      ), []);
+
+      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onInitialized"]), []);
+
+      const expectedChildren = useMemo(() => ({
+        rootComplexOption: { optionName: "rootComplexOption", isCollectionItem: false }
+      }), []);
+
+      return (
+        React.createElement(BaseComponent<React.PropsWithChildren<ISkeletonOptions>>, {
+          WidgetClass: dxSkeleton,
+          ref: baseRef,
+          independentEvents,
+          expectedChildren,
+          ...props,
+        })
+      );
+    },
+  ),
+) as (props: React.PropsWithChildren<ISkeletonOptions> & { ref?: Ref<SkeletonRef> }) => ReactElement | null;
+
+
+// owners:
+// Skeleton
+type IRootComplexOptionProps = React.PropsWithChildren<{
+  prop1?: string;
+  prop2?: boolean;
+}>
+const _componentRootComplexOption = (props: IRootComplexOptionProps) => {
+  return React.createElement(NestedOption<IRootComplexOptionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "rootComplexOption",
+    },
+  });
+};
+
+const RootComplexOption = Object.assign<typeof _componentRootComplexOption, NestedComponentMeta>(_componentRootComplexOption, {
+  componentType: "option",
+});
+
+export default Skeleton;
+export {
+  Skeleton,
+  ISkeletonOptions,
+  SkeletonRef,
+  RootComplexOption,
+  IRootComplexOptionProps
+};
+import type * as SkeletonTypes from 'devextreme/ui/skeleton_types';
+export { SkeletonTypes };
diff --git a/packages/devextreme-vue/src/index.ts b/packages/devextreme-vue/src/index.ts
index 73e2983d1fa6..a28c7e70af26 100644
--- a/packages/devextreme-vue/src/index.ts
+++ b/packages/devextreme-vue/src/index.ts
@@ -56,6 +56,7 @@ export { DxSankey } from "./sankey";
 export { DxScheduler } from "./scheduler";
 export { DxScrollView } from "./scroll-view";
 export { DxSelectBox } from "./select-box";
+export { DxSkeleton } from "./skeleton";
 export { DxSlider } from "./slider";
 export { DxSortable } from "./sortable";
 export { DxSparkline } from "./sparkline";
diff --git a/packages/devextreme-vue/src/skeleton.ts b/packages/devextreme-vue/src/skeleton.ts
new file mode 100644
index 000000000000..d5d559bf9c5d
--- /dev/null
+++ b/packages/devextreme-vue/src/skeleton.ts
@@ -0,0 +1,124 @@
+import { PropType } from "vue";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/index";
+import Skeleton, { Properties } from "devextreme/ui/skeleton";
+import {
+ ContentReadyEvent,
+ SkeletonComplexType,
+} from "devextreme/ui/skeleton";
+import {
+ EventInfo,
+ InitializedEventInfo,
+ ChangedOptionInfo,
+} from "devextreme/events";
+
+type AccessibleOptions = Pick<Properties,
+  "accessKey" |
+  "activeStateEnabled" |
+  "disabled" |
+  "elementAttr" |
+  "focusStateEnabled" |
+  "height" |
+  "hint" |
+  "hoverStateEnabled" |
+  "onContentReady" |
+  "onDisposing" |
+  "onInitialized" |
+  "onOptionChanged" |
+  "rootComplexOption" |
+  "rootPrimitiveOption" |
+  "rtlEnabled" |
+  "tabIndex" |
+  "visible" |
+  "width"
+>;
+
+interface DxSkeleton extends AccessibleOptions {
+  readonly instance?: Skeleton;
+}
+
+const componentConfig = {
+  props: {
+    accessKey: String,
+    activeStateEnabled: Boolean,
+    disabled: Boolean,
+    elementAttr: Object as PropType<Record<string, any>>,
+    focusStateEnabled: Boolean,
+    height: [Number, String],
+    hint: String,
+    hoverStateEnabled: Boolean,
+    onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>,
+    onDisposing: Function as PropType<((e: EventInfo<Skeleton>) => void)>,
+    onInitialized: Function as PropType<((e: InitializedEventInfo<Skeleton>) => void)>,
+    onOptionChanged: Function as PropType<((e: EventInfo<Skeleton> & ChangedOptionInfo) => void)>,
+    rootComplexOption: Object as PropType<SkeletonComplexType>,
+    rootPrimitiveOption: Number,
+    rtlEnabled: Boolean,
+    tabIndex: Number,
+    visible: Boolean,
+    width: [Number, String]
+  },
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:accessKey": null,
+    "update:activeStateEnabled": null,
+    "update:disabled": null,
+    "update:elementAttr": null,
+    "update:focusStateEnabled": null,
+    "update:height": null,
+    "update:hint": null,
+    "update:hoverStateEnabled": null,
+    "update:onContentReady": null,
+    "update:onDisposing": null,
+    "update:onInitialized": null,
+    "update:onOptionChanged": null,
+    "update:rootComplexOption": null,
+    "update:rootPrimitiveOption": null,
+    "update:rtlEnabled": null,
+    "update:tabIndex": null,
+    "update:visible": null,
+    "update:width": null,
+  },
+  computed: {
+    instance(): Skeleton {
+      return (this as any).$_instance;
+    }
+  },
+  beforeCreate() {
+    (this as any).$_WidgetClass = Skeleton;
+    (this as any).$_hasAsyncTemplate = true;
+  }
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSkeleton = defineComponent(componentConfig);
+
+
+const DxRootComplexOptionConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:prop1": null,
+    "update:prop2": null,
+  },
+  props: {
+    prop1: String,
+    prop2: Boolean
+  }
+};
+
+prepareConfigurationComponentConfig(DxRootComplexOptionConfig);
+
+const DxRootComplexOption = defineComponent(DxRootComplexOptionConfig);
+
+(DxRootComplexOption as any).$_optionName = "rootComplexOption";
+
+export default DxSkeleton;
+export {
+  DxSkeleton,
+  DxRootComplexOption
+};
+import type * as DxSkeletonTypes from "devextreme/ui/skeleton_types";
+export { DxSkeletonTypes };
diff --git a/packages/devextreme/js/__internal/ui/skeleton/skeleton.ts b/packages/devextreme/js/__internal/ui/skeleton/skeleton.ts
new file mode 100644
index 000000000000..768ff2a51dc4
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/skeleton/skeleton.ts
@@ -0,0 +1,9 @@
+import registerComponent from '@js/core/component_registrator';
+import type { Properties } from '@js/ui/skeleton';
+import Widget from '@ts/core/widget/widget';
+
+class Skeleton extends Widget<Properties> { }
+
+registerComponent('dxSkeleton', Skeleton);
+
+export default Skeleton;
\ No newline at end of file
diff --git a/packages/devextreme/js/ui/skeleton.d.ts b/packages/devextreme/js/ui/skeleton.d.ts
new file mode 100644
index 000000000000..749a0f8d3fde
--- /dev/null
+++ b/packages/devextreme/js/ui/skeleton.d.ts
@@ -0,0 +1,75 @@
+import Widget, { WidgetOptions } from './widget/ui.widget';
+import { EventInfo } from '../events';
+
+/**
+ * @docid _ui_skeleton_ContentReadyEvent
+ * @public
+ * @type object
+ * @inherits EventInfo
+ */
+export type ContentReadyEvent = EventInfo<dxSkeleton>;
+
+/**
+ * @docid
+ * @public
+ */
+export type SkeletonComplexType = {
+    /**
+     * @docid
+     * @public
+     */
+    prop1: string;
+    /**
+     * @docid
+     * @public
+     */
+    prop2: boolean;
+};
+
+/**
+ * @docid
+ * @deprecated use Properties instead
+ * @namespace DevExpress.ui
+ * @public
+ */
+export interface dxSkeletonOptions extends WidgetOptions<dxSkeleton> {
+    /**
+     * @docid
+     * @public
+     */
+    rootPrimitiveOption?: number;
+    /**
+     * @docid
+     * @public
+     */
+    rootComplexOption?: SkeletonComplexType;
+}
+
+/**
+ * @docid
+ * @inherits Widget
+ * @namespace DevExpress.ui
+ * @public
+ */
+export default class dxSkeleton extends Widget<Properties> { }
+
+/** @public */
+export type Properties = dxSkeletonOptions;
+
+/** @public */
+export type ExplicitTypes = {
+    Properties: Properties;
+};
+
+/// #DEBUG
+/**
+ * @hidden
+ */
+type Events = {
+    /**
+     * @docid dxSkeletonOptions.onContentReady
+     * @type_function_param1 e:{ui/skeleton:ContentReadyEvent}
+     */
+    onContentReady?: ((e: ContentReadyEvent) => void);
+};
+/// #ENDDEBUG
\ No newline at end of file
diff --git a/packages/devextreme/js/ui/skeleton.js b/packages/devextreme/js/ui/skeleton.js
new file mode 100644
index 000000000000..96e299014aba
--- /dev/null
+++ b/packages/devextreme/js/ui/skeleton.js
@@ -0,0 +1,5 @@
+import Skeleton from '../__internal/ui/skeleton/skeleton';
+
+export default Skeleton;
+
+// STYLE skeleton
\ No newline at end of file
diff --git a/packages/devextreme/js/ui/skeleton_types.d.ts b/packages/devextreme/js/ui/skeleton_types.d.ts
new file mode 100644
index 000000000000..ce5a1e6bbfca
--- /dev/null
+++ b/packages/devextreme/js/ui/skeleton_types.d.ts
@@ -0,0 +1,6 @@
+export {
+  ContentReadyEvent,
+  SkeletonComplexType,
+  dxSkeletonOptions,
+  Properties,
+} from './skeleton';
\ No newline at end of file