@dxtmisha/wiki 0.39.7 → 0.56.0

package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.vi.mdx

@@ -2,122 +2,70 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 <Meta title='@dxtmisha/vi/functional-basic/Classes/ErrorCenterInstance - Thực thể lỗi'/>
 
-# ErrorCenterInstance
+# Lớp ErrorCenterInstance
 
-Một lớp để quản lý việc lưu trữ và xử lý lỗi trong một thực thể (instance) cụ thể. Nó cung cấp logic cốt lõi để duy trì một danh mục các nguyên nhân gây lỗi và điều phối các thông báo thông qua một trình quản lý xử lý.
-
-Trong khi `ErrorCenter` cung cấp một lớp tĩnh toàn cục, `ErrorCenterInstance` có thể được sử dụng trực tiếp để theo dõi lỗi tách biệt hoặc các hệ thống quản lý lỗi tùy chỉnh.
+`ErrorCenterInstance` là động cơ chính của hệ thống lỗi. Nó kết hợp một sổ đăng ký nguyên nhân và một trình quản lý xử lý. Bạn có thể tạo các thực thể độc lập của lớp này cho các phần khác nhau của ứng dụng để cô lập logic xử lý lỗi của chúng.
 
 ## Các tính năng chính
 
-- **Lưu trữ tách biệt** — Duy trì danh sách các nguyên nhân lỗi cục bộ riêng biệt với trạng thái toàn cầu.
-- **Hợp nhất dữ liệu** — Tự động bổ sung thông tin nhãn và thông báo đã đăng ký cho các lỗi được kích hoạt.
-- **Ủy quyền xử lý** — Sử dụng một `ErrorCenterHandler` riêng để thực thi các hàm gọi lại.
-- **Nguyên nhân định nghĩa trước** — Có thể được khởi tạo với một danh sách các nguyên nhân lỗi mặc định.
-- **Chainable API** — Hỗ trợ cấu hình linh hoạt để thêm nguyên nhân và trình xử lý.
-
-## Các phương thức kiểm tra
-
-- `has(code: string, group?: string): boolean` — Kiểm tra xem một nguyên nhân lỗi có tồn tại trong bộ lưu trữ không.
-- `get(code: string, group?: string): ErrorCenterCauseItem | undefined` — Truy xuất đối tượng nguyên nhân lỗi đã lưu trữ.
-
-## Cấu hình
-
-- `add(cause: ErrorCenterCauseItem): this` — Thêm một nguyên nhân lỗi duy nhất vào bộ lưu trữ.
-- `addList(causes: ErrorCenterCauseList): this` — Thêm một danh sách các nguyên nhân lỗi.
-- `addHandler(group: ErrorCenterGroup, handler: ErrorCenterHandlerCallback): this` — Đăng ký một trình xử lý cho nhóm cụ thể.
-- `addHandlerList(handlers: ErrorCenterHandlerList): this` — Đăng ký một loạt các trình xử lý.
-
-## Các phương thức hành động
+- **Kho lưu trữ cô lập** — duy trì một danh sách cục bộ các nguyên nhân lỗi.
+- **Hợp nhất thông minh** — tự động bổ sung dữ liệu lỗi dựa trên hệ thống ưu tiên.
+- **Ủy quyền xử lý** — sử dụng `ErrorCenterHandler` để kích hoạt các hàm callback.
+- **API nối chuỗi** — hỗ trợ nối chuỗi cuộc gọi để cấu hình.
 
-### `on`
+## Khởi tạo
 
-Kích hoạt xử lý lỗi. Nó tìm kiếm dữ liệu đã đăng ký cho mã lỗi đầu vào, hợp nhất dữ liệu đó với nguyên nhân `cause`, và chuyển nó cho trình xử lý nội bộ.
+Để tạo một thực thể, sử dụng constructor `ErrorCenterInstance(causes, handler)`.
 
 **Tham số:**
-- `cause: ErrorCenterCauseItem` — Thông tin lỗi cần kích hoạt.
-
-**Trả về:** `this`
-
-## Các kiểu dữ liệu
-
-### `ErrorCenterCauseItem`
-
-Đối tượng chính được sử dụng để xác định nguyên nhân gây lỗi trong thực thể này.
+- `causes?: ErrorCenterCauseList` — danh sách nguyên nhân lỗi ban đầu.
+- `handler?: ErrorCenterHandler` — thực thể trình xử lý (nếu không được chỉ định, một thực thể mới sẽ được tạo).
 
-- `group?: ErrorCenterGroup` — danh mục/nhóm mà lỗi thuộc về.
-- `code: string` — mã định danh duy nhất cho lỗi.
-- `label?: string` — tên lỗi dễ đọc cho người dùng.
-- `message?: string` — mô tả chi tiết về lỗi.
-- `details?: any` — đối tượng tùy chọn cho các dữ liệu bổ sung.
-
-## Hướng dẫn: Quản lý nguyên nhân lỗi và bộ lắng nghe
-
-Sử dụng `ErrorCenterInstance` bao gồm ba bước chính: định nghĩa các nguyên nhân gây lỗi, thiết lập bộ lắng nghe (trình xử lý), và kích hoạt lỗi.
-
-### 1. Thêm nguyên nhân lỗi
-
-Các nguyên nhân gây lỗi hoạt động như một từ điển cho ứng dụng của bạn. Bằng cách đăng ký trước chúng, bạn đảm bảo rằng các nhãn và thông báo nhất quán được sử dụng trên toàn bộ nền tảng.
-
-```javascript
+```typescript
 import { ErrorCenterInstance } from '@dxtmisha/functional-basic'
 
-const myErrorCenter = new ErrorCenterInstance()
-
-// Đăng ký một nguyên nhân lỗi duy nhất
-myErrorCenter.add({
-  group: 'auth',
-  code: 'token_expired',
-  label: 'Phiên hết hạn',
-  message: 'Phiên đăng nhập của bạn đã hết hạn. Vui lòng đăng nhập lại.'
-})
-
-// Đăng ký nhiều nguyên nhân cùng lúc
-myErrorCenter.addList([
-  { group: 'api', code: '404', label: 'Không tìm thấy', message: 'Dữ liệu được yêu cầu không tồn tại.' },
-  { group: 'api', code: '500', label: 'Lỗi máy chủ', message: 'Đã có lỗi xảy ra trên máy chủ.' }
+const myErrorCenter = new ErrorCenterInstance([
+  { group: 'api', code: '404', label: 'Không tìm thấy' }
 ])
 ```
 
-### 2. Thêm bộ lắng nghe
+## Các phương thức
 
-Bộ lắng nghe (trình xử lý) là các hàm callback thực thi khi một lỗi cụ thể xảy ra. Bạn gán các bộ lắng nghe cho một nhóm (`group`) cụ thể để chúng chỉ phản ứng với các lỗi liên quan.
+### Hành động
+- `on(cause: ErrorCenterCauseItem): this` — Bắt đầu quá trình xử lý. Hợp nhất dữ liệu từ sổ đăng ký với dữ liệu đầu vào và chuyển nó cho trình xử lý.
 
-```javascript
-// Thêm bộ lắng nghe dành riêng cho nhóm "auth"
-myErrorCenter.addHandler('auth', (cause) => {
-  // Ví dụ: chuyển hướng đến trang đăng nhập hoặc hiển thị thông báo cảnh báo
-  console.log(`[LỖI XÁC THỰC] ${cause.label}: ${cause.message}`)
-})
+### Xác minh
+- `has(code: string, group?: string): boolean` — Tìm kiếm trong sổ đăng ký cục bộ.
+- `get(code: string, group?: string): ErrorCenterCauseItem | undefined` — Truy xuất dữ liệu từ sổ đăng ký.
 
-// Thêm bộ lắng nghe cho nhóm "api"
-myErrorCenter.addHandler('api', (cause) => {
-  // Ví dụ: hiển thị thông báo dạng toast
-  console.error(`[LỖI API ${cause.code}] ${cause.message}`)
-})
+### Cấu hình
+- `add(cause: ErrorCenterCauseItem): this` — Thêm một lỗi vào sổ đăng ký cục bộ.
+- `addList(causes: ErrorCenterCauseList): this` — Thêm lỗi hàng loạt.
+- `addHandler(group: ErrorCenterGroup, handler: ErrorCenterHandlerCallback): this` — Đăng ký một phản ứng cho nhóm.
+- `addHandlerList(handlers: ErrorCenterHandlerList): this` — Đăng ký hàng loạt các phản ứng.
 
-// Thêm bộ lắng nghe dự phòng toàn cục (bắt các lỗi không có trình xử lý cụ thể)
-myErrorCenter.addHandler(undefined, (cause) => {
-  console.warn(`[LỖI KHÔNG XÁC ĐỊNH]`, cause)
-})
-```
+## Các kiểu dữ liệu
+
+#### `ErrorCenterCauseItem`
+Đối tượng mô tả một lỗi cụ thể.
+- `group?: ErrorCenterGroup` — nhóm lỗi (ví dụ: 'api').
+- `code: string` — mã lỗi duy nhất.
+- `priority?: number` — mức độ ưu tiên (mặc định `500`). Được sử dụng trong quá trình hợp nhất dữ liệu.
+- `label?: string` — tiêu đề lỗi.
+- `message?: string` — mô tả lỗi.
+- `details?: any` — dữ liệu bổ sung.
 
-### 3. Kích hoạt lỗi
+#### `ErrorCenterHandlerCallback`
+- `(cause: ErrorCenterCauseItem) => void` — hàm xử lý.
 
-Khi một lỗi xảy ra trong ứng dụng của bạn, bạn kích hoạt quá trình xử lý bằng cách sử dụng phương thức `on`. Bạn chỉ cần cung cấp mã (`code`) và nhóm (`group`). `ErrorCenterInstance` sẽ tự động hợp nhất yêu cầu này với nhãn (`label`) và thông báo (`message`) đã đăng ký trước đó rồi mới truyền đến các bộ lắng nghe.
+## Ví dụ
 
-```javascript
-// Kích hoạt lỗi xác thực
-// Các bộ lắng nghe cho "auth" sẽ nhận được toàn bộ đối tượng ErrorCenterCauseItem
-myErrorCenter.on({
-  group: 'auth',
-  code: 'token_expired'
-})
+### Khởi tạo với một từ điển
+```typescript
+const myEC = new ErrorCenterInstance([
+  { group: 'db', code: 'connection_lost', label: 'DB không khả dụng' }
+]);
 
-// Kích hoạt một lỗi chưa đăng ký (sẽ rơi vào bộ lắng nghe của nhóm undefined)
-myErrorCenter.on({
-  group: 'database',
-  code: 'connection_lost',
-  message: 'Mất kết nối với CSDL.' // Bạn cũng có thể truyền dữ liệu trực tiếp
-})
+myEC.addHandler('db', (cause) => alert(cause.label));
+myEC.on({ group: 'db', code: 'connection_lost' });
 ```

package/src/media/functional/functional-basic/classes/EventItem/EventItem.en.mdx

@@ -4,31 +4,31 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 # EventItem Class
 
-A powerful wrapper for managing event listeners on DOM elements or the `window` object. This class simplifies the lifecycle of events (adding, removing, toggling), supports automatic DOM presence checks, and provides built-in optimization for heavy events like `resize` and `scroll`.
+A powerful wrapper for managing event listeners on DOM elements or the `window` object. The class simplifies working with the event lifecycle (add, remove, toggle), supports automatic checking of the element's presence in the DOM, and provides built-in optimization for heavy events such as `resize` and `scroll`.
 
 ## Key Features
 
-- **Lifecycle Management** — convenient `start`, `stop`, `toggle`, and `reset` methods for precise control over event listening.
-- **DOM Safety** — automatic `isInDom` check before executing the listener (can be configured with a control element).
-- **ResizeObserver Support** — built-in handling of the `resize` event for any HTML element using the modern API.
-- **Scroll Optimization** — special `scroll-sync` event type using `requestAnimationFrame` for high performance.
-- **Chaining and Flexibility** — support for method chaining and dynamic target, type, or listener replacement.
-- **Custom Data** — ability to pass and dispatch custom data via `CustomEvent`.
+- **Lifecycle Management** — convenient `start`, `stop`, `toggle`, and `reset` methods to control event listening.
+- **DOM Safety** — automatic `isInDom` check before executing the handler (a control element can be configured).
+- **ResizeObserver Support** — built-in handling of the `resize` event for any HTML elements via a modern API.
+- **Scroll Optimization** — a special `scroll-sync` event type using `requestAnimationFrame` for high performance.
+- **Chaining and Flexibility** — support for call chaining and dynamic changing of the target, type, or event handler.
+- **Custom Data** — the ability to pass and dispatch custom data via `CustomEvent`.
 
 ## Initialization
 
-To initialize the object, call the `EventItem(elementSelector, type, listener, options, detail)` constructor.
+To initialize the object, call the constructor `EventItem(elementSelector, type, listener, options, detail)`.
 
 ### Generic Constraints
 
 To ensure strict typing, the class supports the following generics:
-- `E extends ElementOrWindow` — The type of the element on which events are listened to.
-- `O extends Event` — The event object type.
-- `D extends Record<string, any>` — The structure for additional data.
+- `E extends ElementOrWindow` — The type of element on which events are listened.
+- `O extends Event` — The type of the event object.
+- `D extends Record<string, any>` — The structure of additional data.
 
 **Parameters:**
-- `elementSelector?: ElementOrString<E>` — the target element where the listener is attached.
-- `type: string | string[] = 'click'` — the event type, an array of types, or special types (`'resize'`, `'scroll-sync'`).
+- `elementSelector?: ElementOrString<E>` — the target element on which the listener is attached.
+- `type: string | string[] = 'click'` — event type, array of types, or special types (`'resize'`, `'scroll-sync'`).
 - `listener?: EventListenerDetail<O, D>` — the event handler function.
 - `options?: EventOptions` — standard `addEventListener` options.
 - `detail?: D` — custom data that will be available in the handler.
@@ -36,7 +36,7 @@ To ensure strict typing, the class supports the following generics:
 ```typescript
 import { EventItem } from '@dxtmisha/functional-basic'
 
-// 1. Simple initialization
+// 1. Basic initialization
 const myEvent = new EventItem(
   '.my-button', 
   'click', 
@@ -49,13 +49,13 @@ const customEvent = new EventItem<Window, MouseEvent, MyData>(
   window,
   'mousedown',
   (event, detail) => {
-    console.log('Window clicked, data ID:', detail?.id)
+    console.log('Window click, data ID:', detail?.id)
   },
   { passive: true },
   { id: 42 }
 )
 
-// 3. Activating listeners
+// 3. Activating listening
 myEvent.start()
 customEvent.start()
 ```
@@ -72,27 +72,48 @@ customEvent.start()
 All methods in this group support chaining and automatically call `reset()` if the event is active.
 
 - `setElement(elementSelector?: ElementOrString): this` — Changes the target element.
-- `setElementControl(elementSelector?: ElementOrString): this` — Sets a control element (if missing in DOM, the event won't trigger).
+- `setElementControl(elementSelector?: ElementOrString): this` — Sets the control element (if it is not in the DOM, the event will not fire).
 - `setType(type: string | string[]): this` — Changes the event type.
-- `setListener(listener: Function): this` — Changes the callback function.
-- `setOptions(options?: EventOptions): this` — Changes the listener options.
-- `setDetail(detail?: D): this` — Changes the custom detail data.
+- `setListener(listener: Function): this` — Changes the handler function.
+- `setOptions(options?: EventOptions): this` — Changes the listener parameters.
+- `setDetail(detail?: D): this` — Changes the custom event data.
 
-### Control
+### Management
 
-- `start(): this` — Starts listening for events.
-- `stop(): this` — Stops listening for events.
-- `toggle(activity: boolean): this` — Enables or disables listening based on the flag.
+- `start(): this` — Starts event listening.
+- `stop(): this` — Stops event listening.
+- `toggle(activity: boolean): this` — Enables or disables listening depending on the flag.
 - `reset(): this` — Restarts the event (useful after changing settings).
-- `dispatch(detail?: D): this` — Triggers the event on the target element with data transmission.
+- `dispatch(detail?: D): this` — Triggers the event on the target element with data transfer.
+
+## Types
+
+#### `ElementOrWindow`
+Element on which an event can be attached: `HTMLElement | Window`.
+
+#### `ElementOrString<E>`
+Type for passing an element or its selector: `E | string`.
+
+#### `EventListenerDetail<O, D>`
+Event listener function: `(event: O, detail?: D) => void`.
+
+#### `EventOptions`
+Listening options: `AddEventListenerOptions | boolean | undefined`.
+
+#### `EventActivityItem<E>`
+Internal interface for tracking active listeners.
+- `element: E | undefined` — Target element.
+- `type: string` — Event type.
+- `listener?: (event: any) => void` — Active function.
+- `observer?: ResizeObserver` — Observer instance (for `resize`).
 
 ## Special Events
 
 ### `resize`
-If the event type is set to `resize`, the class automatically uses `ResizeObserver` to track element size changes (even if it's not the `window`).
+If the event type is set to `resize`, the class automatically uses `ResizeObserver` to track changes in the size of the element (even if it is not `window`).
 
 ### `scroll-sync`
-A special type for optimized scrolling. It uses `requestAnimationFrame` internally, preventing redundant handler calls and improving performance.
+A special type for optimized scrolling. Internally uses `requestAnimationFrame`, preventing unnecessary handler calls and increasing performance.
 
 ## Examples
 
@@ -104,7 +125,7 @@ const tracker = new EventItem('.item-1', 'mousemove', (e) => {
 
 tracker.start()
 
-// ... later switch to another element
+// ... switch to another element later
 tracker.setElement('.item-2')
 ```
 

package/src/media/functional/functional-basic/classes/EventItem/EventItem.ru.mdx

@@ -86,6 +86,27 @@ customEvent.start()
 - `reset(): this` — Перезапускает событие (полезно после смены настроек).
 - `dispatch(detail?: D): this` — Вызывает событие на целевом элементе с передачей данных.
 
+## Типы
+
+#### `ElementOrWindow`
+Элемент, на котором может висеть событие: `HTMLElement | Window`.
+
+#### `ElementOrString<E>`
+Тип для передачи элемента или его селектора: `E | string`.
+
+#### `EventListenerDetail<O, D>`
+Функция-обработчик события: `(event: O, detail?: D) => void`.
+
+#### `EventOptions`
+Опции прослушивания: `AddEventListenerOptions | boolean | undefined`.
+
+#### `EventActivityItem<E>`
+Внутренний интерфейс для отслеживания активных слушателей.
+- `element: E | undefined` — Целевой элемент.
+- `type: string` — Тип события.
+- `listener?: (event: any) => void` — Активная функция.
+- `observer?: ResizeObserver` — Инстанс наблюдателя (для `resize`).
+
 ## Специальные события
 
 ### `resize`

package/src/media/functional/functional-basic/classes/EventItem/EventItem.vi.mdx

@@ -1,34 +1,34 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/vi/functional-basic/Classes/EventItem - Quản lý Sự kiện Nâng cao'/>
+<Meta title='@dxtmisha/vi/functional-basic/Classes/EventItem - Quản lý sự kiện nâng cao'/>
 
 # Lớp EventItem
 
-Một bộ khung (wrapper) mạnh mẽ để quản lý các trình lắng nghe sự kiện (event listeners) trên các phần tử DOM hoặc đối tượng `window`. Lớp này đơn giản hóa vòng đời của sự kiện (thêm, xóa, bật/tắt), hỗ trợ kiểm tra sự tồn tại của phần tử trong DOM và cung cấp các tối ưu hóa tích hợp cho các sự kiện nặng như `resize` và `scroll`.
+Một vỏ bọc mạnh mẽ để quản lý các trình lắng nghe sự kiện trên các phần tử DOM hoặc đối tượng `window`. Lớp này đơn giản hóa việc làm việc với vòng đời sự kiện (thêm, xóa, chuyển đổi), hỗ trợ tự động kiểm tra sự hiện diện của phần tử trong DOM và cung cấp tối ưu hóa tích hợp cho các sự kiện nặng như `resize` và `scroll`.
 
-## Tính năng chính
+## Các tính năng chính
 
-- **Quản lý vòng đời** — các phương thức `start`, `stop`, `toggle` và `reset` tiện lợi để kiểm soát chính xác việc lắng nghe sự kiện.
-- **An toàn DOM** — tự động kiểm tra `isInDom` trước khi thực hiện trình xử lý (có thể cấu hình phần tử kiểm soát).
-- **Hỗ trợ ResizeObserver** — xử lý tích hợp sự kiện `resize` cho bất kỳ phần tử HTML nào bằng API hiện đại.
-- **Tối ưu hóa cuộn** — loại sự kiện đặc biệt `scroll-sync` sử dụng `requestAnimationFrame` để đạt hiệu suất cao.
-- **Chuỗi lệnh và linh hoạt** — hỗ trợ chuỗi lệnh (chaining) và thay đổi động mục tiêu, loại hoặc trình xử lý sự kiện.
-- **Dữ liệu tùy chỉnh** — khả năng truyền và phát tán dữ liệu tùy chỉnh thông qua `CustomEvent`.
+- **Quản lý vòng đời** — các phương thức `start`, `stop`, `toggle` và `reset` thuận tiện để kiểm soát việc lắng nghe sự kiện.
+- **An toàn DOM** — tự động kiểm tra `isInDom` trước khi thực thi trình xử lý (có thể cấu hình phần tử điều khiển).
+- **Hỗ trợ ResizeObserver** — xử lý tích hợp sự kiện `resize` cho bất kỳ phần tử HTML nào thông qua API hiện đại.
+- **Tối ưu hóa cuộn** — kiểu sự kiện `scroll-sync` đặc biệt sử dụng `requestAnimationFrame` cho hiệu suất cao.
+- **Chaining và linh hoạt** — hỗ trợ nối chuỗi cuộc gọi và thay đổi động đích, kiểu hoặc trình xử lý sự kiện.
+- **Dữ liệu tùy chỉnh** — khả năng truyền và điều phối dữ liệu tùy chỉnh thông qua `CustomEvent`.
 
 ## Khởi tạo
 
-Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `EventItem(elementSelector, type, listener, options, detail)`.
+Để khởi tạo đối tượng, hãy gọi constructor `EventItem(elementSelector, type, listener, options, detail)`.
 
-### Ràng buộc Generic (Generic Constraints)
+### Các ràng buộc Generic (Generic Constraints)
 
-Để đảm bảo định kiểu nghiêm ngặt, lớp này hỗ trợ các generic sau:
-- `E extends ElementOrWindow` — Kiểu của phần tử nơi các sự kiện được lắng nghe.
-- `O extends Event` — Kiểu đối tượng sự kiện.
-- `D extends Record<string, any>` — Cấu trúc dữ liệu bổ sung.
+Để đảm bảo kiểu nghiêm ngặt, lớp hỗ trợ các generic sau:
+- `E extends ElementOrWindow` — Kiểu phần tử mà các sự kiện được lắng nghe.
+- `O extends Event` — Kiểu của đối tượng sự kiện.
+- `D extends Record<string, any>` — Cấu trúc của dữ liệu bổ sung.
 
 **Tham số:**
-- `elementSelector?: ElementOrString<E>` — phần tử đích nơi trình lắng nghe được gắn vào.
-- `type: string | string[] = 'click'` — loại sự kiện, một mảng các loại hoặc các loại đặc biệt (`'resize'`, `'scroll-sync'`).
+- `elementSelector?: ElementOrString<E>` — phần tử đích mà trình lắng nghe được đính kèm.
+- `type: string | string[] = 'click'` — kiểu sự kiện, mảng các kiểu hoặc các kiểu đặc biệt (`'resize'`, `'scroll-sync'`).
 - `listener?: EventListenerDetail<O, D>` — hàm xử lý sự kiện.
 - `options?: EventOptions` — các tùy chọn `addEventListener` tiêu chuẩn.
 - `detail?: D` — dữ liệu tùy chỉnh sẽ có sẵn trong trình xử lý.
@@ -36,63 +36,84 @@ Một bộ khung (wrapper) mạnh mẽ để quản lý các trình lắng nghe
 ```typescript
 import { EventItem } from '@dxtmisha/functional-basic'
 
-// 1. Khởi tạo đơn giản
+// 1. Khởi tạo cơ bản
 const myEvent = new EventItem(
   '.my-button', 
   'click', 
-  (event) => console.log('Sự kiện được kích hoạt:', event.type)
+  (event) => console.log('Sự kiện đã kích hoạt:', event.type)
 )
 
-// 2. Sử dụng generic để định kiểu nghiêm ngặt
+// 2. Sử dụng generic cho kiểu nghiêm ngặt
 interface MyData { id: number }
 const customEvent = new EventItem<Window, MouseEvent, MyData>(
   window,
   'mousedown',
   (event, detail) => {
-    console.log('Cửa sổ được nhấn, ID dữ liệu:', detail?.id)
+    console.log('Nhấp vào cửa sổ, ID dữ liệu:', detail?.id)
   },
   { passive: true },
   { id: 42 }
 )
 
-// 3. Kích hoạt trình lắng nghe
+// 3. Kích hoạt lắng nghe
 myEvent.start()
 customEvent.start()
 ```
 
-## Phương thức
+## Các phương thức
 
 ### Thông tin
 
-- `isActive(): boolean` — Kiểm tra xem việc lắng nghe sự kiện có đang hoạt động hay không.
-- `getElement(): E | undefined` — Trả về phần tử mục tiêu hiện tại.
+- `isActive(): boolean` — Kiểm tra xem việc lắng nghe sự kiện hiện có đang hoạt động hay không.
+- `getElement(): E | undefined` — Trả về phần tử đích hiện tại.
 
 ### Cấu hình (Setters)
 
-Tất cả các phương thức trong nhóm này đều hỗ trợ chuỗi lệnh và tự động gọi `reset()` nếu sự kiện đang hoạt động.
+Tất cả các phương thức trong nhóm này đều hỗ trợ nối chuỗi và tự động gọi `reset()` nếu sự kiện đang hoạt động.
 
-- `setElement(elementSelector?: ElementOrString): this` — Thay đổi phần tử mục tiêu.
-- `setElementControl(elementSelector?: ElementOrString): this` — Thiết lập phần tử kiểm soát (nếu thiếu trong DOM, sự kiện sẽ không kích hoạt).
-- `setType(type: string | string[]): this` — Thay đổi loại sự kiện.
+- `setElement(elementSelector?: ElementOrString): this` — Thay đổi phần tử đích.
+- `setElementControl(elementSelector?: ElementOrString): this` — Thiết lập phần tử điều khiển (nếu nó không có trong DOM, sự kiện sẽ không kích hoạt).
+- `setType(type: string | string[]): this` — Thay đổi kiểu sự kiện.
 - `setListener(listener: Function): this` — Thay đổi hàm xử lý.
-- `setOptions(options?: EventOptions): this` — Thay đổi các tùy chọn của trình lắng nghe.
-- `setDetail(detail?: D): this` — Thay đổi dữ liệu tùy chỉnh của sự kiện.
+- `setOptions(options?: EventOptions): this` — Thay đổi các tham số trình lắng nghe.
+- `setDetail(detail?: D): this` — Thay đổi dữ liệu sự kiện tùy chỉnh.
 
-### Điều khiển
+### Quản lý
 
-- `start(): this` — Bắt đầu lắng nghe các sự kiện.
-- `stop(): this` — Dừng lắng nghe các sự kiện.
-- `toggle(activity: boolean): this` — Bật hoặc tắt việc lắng nghe dựa trên cờ hiệu.
+- `start(): this` — Bắt đầu lắng nghe sự kiện.
+- `stop(): this` — Dừng lắng nghe sự kiện.
+- `toggle(activity: boolean): this` — Bật hoặc tắt lắng nghe tùy thuộc vào cờ.
 - `reset(): this` — Khởi động lại sự kiện (hữu ích sau khi thay đổi cài đặt).
-- `dispatch(detail?: D): this` — Kích hoạt sự kiện trên phần tử mục tiêu với việc truyền dữ liệu.
+- `dispatch(detail?: D): this` — Kích hoạt sự kiện trên phần tử đích với việc truyền dữ liệu.
+
+## Các kiểu dữ liệu
+
+#### `ElementOrWindow`
+Phần tử mà sự kiện có thể được đính kèm: `HTMLElement | Window`.
+
+#### `ElementOrString<E>`
+Kiểu để truyền một phần tử hoặc bộ chọn của nó: `E | string`.
+
+#### `EventListenerDetail<O, D>`
+Hàm lắng nghe sự kiện: `(event: O, detail?: D) => void`.
+
+#### `EventOptions`
+Các tùy chọn lắng nghe: `AddEventListenerOptions | boolean | undefined`.
+
+#### `EventActivityItem<E>`
+Giao diện nội bộ để theo dõi các trình lắng nghe đang hoạt động.
+- `element: E | undefined` — Phần tử đích.
+- `type: string` — Kiểu sự kiện.
+- `listener?: (event: any) => void` — Hàm đang hoạt động.
+- `observer?: ResizeObserver` — Thực thể observer (cho `resize`).
 
 ## Các sự kiện đặc biệt
 
 ### `resize`
-Nếu loại sự kiện được đặt là `resize`, lớp sẽ tự động sử dụng `ResizeObserver` để theo dõi các thay đổi kích thước của phần tử (ngay cả khi đó không phải là `window`).
+Nếu kiểu sự kiện được đặt thành `resize`, lớp sẽ tự động sử dụng `ResizeObserver` để theo dõi những thay đổi về kích thước của phần tử (ngay cả khi đó không phải là `window`).
 
 ### `scroll-sync`
-Một loại đặc biệt để tối ưu hóa việc cuộn. Nó sử dụng `requestAnimationFrame` nội bộ, ngăn chặn các cuộc gọi trình xử lý dư thừa và cải thiện hiệu suất.
+Một kiểu đặc biệt cho việc cuộn tối ưu hóa. Bên trong sử dụng `requestAnimationFrame`, ngăn chặn các cuộc gọi trình xử lý không cần thiết và tăng hiệu suất.
 
 ## Ví dụ
 
@@ -104,20 +125,20 @@ const tracker = new EventItem('.item-1', 'mousemove', (e) => {
 
 tracker.start()
 
-// ... sau đó chuyển sang phần tử khác
+// ... chuyển sang phần tử khác sau đó
 tracker.setElement('.item-2')
 ```
 
-### Sử dụng CustomEvent với Dữ liệu
+### Sử dụng CustomEvent với dữ liệu
 ```javascript
 const emitter = new EventItem(window, 'my-custom-event')
 
 emitter.setListener((e, detail) => {
-  console.log('Dữ liệu nhận được:', e.detail) // dữ liệu từ CustomEvent
+  console.log('Dữ liệu đã nhận:', e.detail) // dữ liệu từ CustomEvent
 })
 
 emitter.start()
 
-// Phát tán sự kiện
+// Điều phối sự kiện
 emitter.dispatch({ userId: 123, action: 'refresh' })
 ```