@dxtmisha/wiki 0.25.1 → 0.39.2

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

@@ -0,0 +1,120 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Classes/Icons - Quản lý Biểu tượng'/>
+
+# Lớp Icons
+
+Một lớp tĩnh để quản lý registry biểu tượng (icon) của ứng dụng. Cung cấp cơ chế đăng ký, tải chậm (lazy loading) và truy xuất SVG icon. Các icon được lưu trữ trong đối tượng `window` toàn cục để có thể truy cập từ nhiều phiên bản của thư viện.
+
+## Tính năng chính
+
+- **Registry toàn cục** — Sử dụng `window.__UI_ICON` để lưu trữ icon, đảm bảo registry duy nhất dù có nhiều phiên bản.
+- **Tải chậm (Lazy Loading)** — Phương thức `addLoad` đánh dấu icon là "đang tải"; `get` sẽ chờ cho đến khi nó xuất hiện.
+- **Kiểu linh hoạt** — Một icon có thể là chuỗi, `Promise`, hoặc hàm trả về `Promise`.
+- **URL tự động** — Icon có tiền tố `@` được chuyển thành URL đầy đủ dựa trên `url` cơ sở.
+
+## Khởi tạo
+
+Lớp này là tĩnh và không yêu cầu khởi tạo đối tượng. URL cơ sở được cấu hình qua `setUrl`.
+
+```javascript
+import { Icons } from '@dxtmisha/functional-basic'
+
+// Thay đổi đường dẫn cơ sở đến icon
+Icons.setUrl('/assets/svg/')
+```
+
+## Phương thức
+
+### Đăng ký icon
+
+- `add(index: string, file: IconsItem): void` — Đăng ký icon theo tên. `file` có thể là chuỗi đường dẫn, `Promise`, hoặc hàm factory.
+- `addLoad(index: string): void` — Đánh dấu icon là "đang tải" (marker `--LOAD--`). `get` sẽ chờ cho đến khi icon có mặt.
+- `addGlobal(index: string, file: string): void` — Đăng ký icon với URL toàn cục (URL cơ sở + `file`).
+- `addByList(list: Record<string, IconsItem>): void` — Đăng ký hàng loạt icon từ một đối tượng.
+
+### Truy xuất icon
+
+- `async get(index: string, url?: string, wait?: number): Promise<string>` — Trả về nội dung hoặc đường dẫn của icon theo tên. Nếu icon đang "tải", sẽ chờ cho đến khi xuất hiện (mặc định 3 phút).
+- `is(index: string): boolean` — Kiểm tra xem icon đã được đăng ký chưa.
+- `getNameList(): string[]` — Trả về danh sách tên của tất cả icon đã đăng ký.
+- `getUrlGlobal(): string` — Trả về URL cơ sở hiện tại của icon.
+
+### Cấu hình
+
+- `setUrl(url: string): void` — Thay đổi đường dẫn cơ sở để lưu trữ icon.
+- `setConfig(config: IconsConfig): void` — Cập nhật cấu hình biểu tượng (URL và/hoặc danh sách biểu tượng).
+
+## Hệ thống tải
+
+Lớp `Icons` hỗ trợ cơ chế chờ bất đồng bộ. Điều này cho phép bạn yêu cầu một biểu tượng trước khi nó thực sự được tải hoặc đăng ký trong hệ thống.
+
+1.  **Đăng ký chờ**: Sử dụng phương thức `addLoad(name)`, một biểu tượng được đánh dấu bằng ký hiệu đặc biệt `--LOAD--`. Điều này thông báo cho hệ thống biết rằng biểu tượng sẽ có sẵn sau đó.
+2.  **Quá trình chờ**: Nếu gọi `get(name)` cho một biểu tượng đang ở trạng thái tải, phương thức sẽ không trả về lỗi mà thay vào đó sẽ chuyển sang chế độ chờ. Nó sẽ kiểm tra registry sau mỗi 320 ms.
+3.  **Hoàn tất**: Ngay khi biểu tượng được thêm qua `add(name, ...)`, tất cả các lệnh gọi `get` đang chờ sẽ tự động hoàn tất và trả về nội dung của biểu tượng đó.
+
+Cơ chế này rất quan trọng đối với các hệ thống phân tán, nơi các thành phần có thể yêu cầu tài nguyên trước khi cơ sở dữ liệu truyền thông hoàn tất quá trình khởi tạo.
+
+## Các loại dữ liệu (Types)
+
+### `IconsItem`
+Định nghĩa của một biểu tượng (icon). Có thể là:
+- `string` — Nội dung SVG thô hoặc đường dẫn đến tệp SVG.
+- `Promise<string>` — Một promise giải quyết thành nội dung SVG (hữu ích cho việc import động).
+- `() => Promise<string>` — Một hàm factory trả về một promise (hữu ích cho việc tải lười khi cần thiết).
+
+### `IconsConfig`
+Đối tượng cấu hình cho phương thức `setConfig`:
+- `url?: string` — URL cơ sở để lưu trữ biểu tượng.
+- `list?: Record<string, IconsItem>` — Danh sách các biểu tượng cần đăng ký.
+
+## Ví dụ sử dụng
+
+### Đăng ký và sử dụng biểu tượng
+```javascript
+import { Icons } from '@dxtmisha/functional-basic'
+
+// Đăng ký dưới dạng chuỗi
+Icons.add('arrow', '<svg>...</svg>')
+
+// Đăng ký qua Promise (import động)
+Icons.add('user', import('./icons/user.svg'))
+
+// Đăng ký qua hàm factory
+Icons.add('star', () => import('./icons/star.svg'))
+
+// Lấy dữ liệu
+const svgContent = await Icons.get('arrow')
+
+// Cấu hình hàng loạt qua setConfig
+Icons.setConfig({
+  url: '/custom-icons/',
+  list: {
+    check: '<svg>...</svg>',
+    error: () => import('./icons/error.svg')
+  }
+})
+```
+
+### Đăng ký hàng loạt
+```javascript
+Icons.addByList({
+  home: '<svg>...</svg>',
+  search: () => import('./icons/search.svg'),
+  bell: import('./icons/bell.svg')
+})
+```
+
+### Tải lười (Lazy Loading)
+```javascript
+// Đánh dấu là đang tải
+Icons.addLoad('dynamic-icon')
+
+// Tải và đăng ký sau đó
+fetch('/api/icons/dynamic').then(res => res.text()).then(svg => {
+  Icons.add('dynamic-icon', svg)
+})
+
+// get() sẽ đợi cho đến khi biểu tượng xuất hiện trong sổ đăng ký
+const svg = await Icons.get('dynamic-icon')
+```

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

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Classes/Loading - Global Loading'/>
+
+# Loading Class
+
+A static class for managing global loading state (uses `LoadingInstance`). Uses a counter: loading is active as long as at least one process is showing it. Notifies listeners via the custom `ui-loading` event.
+
+## Key Features
+
+- **Nesting Counter** — multiple parallel `show()` calls are handled correctly: loading hides only after the same number of `hide()` calls.
+- **Global Event** — when state changes, a `ui-loading` event is dispatched on the `window` object.
+- **Listener Registration** — subscribe to state changes from any component via `registrationEvent`.
+
+## State Management
+
+- `is(): boolean` — returns `true` if loading is active (counter > 0).
+- `get(): number` — returns the current counter value.
+- `show(): void` — increments the counter by 1, notifies listeners.
+- `hide(): void` — decrements the counter by 1. Ignored if counter is already 0.
+
+## Event Subscription
+
+### `registrationEvent`
+
+Registers a listener for loading state changes. Works through the native `ui-loading` event on the `window` object.
+
+**Parameters:**
+- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — handler function receiving `event.detail.loading: boolean`.
+- `element?: ElementOrString<HTMLElement>` — optional DOM element trigger: the listener automatically stops when the element is removed from the DOM.
+
+### `unregistrationEvent`
+
+Unregisters a listener previously added via `registrationEvent`.
+
+**Parameters:**
+- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — the handler function used during registration.
+- `element?: ElementOrString<HTMLElement>` — the DOM element used during registration.
+
+## LoadingInstance
+The `LoadingInstance` class can be used to create a separate instance for tracking loading.
+
+## Example
+
+```javascript
+import { Loading } from '@dxtmisha/functional-basic'
+
+Loading.registrationEvent((event) => {
+  console.log('Loading:', event.detail.loading) // true or false
+})
+
+Loading.show()  // counter = 1
+Loading.show()  // counter = 2
+Loading.hide()  // counter = 1
+Loading.hide()  // counter = 0 → event: { loading: false }
+```

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

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Classes/Loading - Глобальная загрузка'/>
+
+# Класс Loading
+
+Статичный класс для управления глобальным состоянием загрузки (использует `LoadingInstance`). Использует счётчик: загрузка активна, пока хотя бы один процесс её отображает. Оповещает слушателей через кастомное событие `ui-loading`.
+
+## Ключевые особенности
+
+- **Счётчик вложенности** — несколько параллельных вызовов `show()` корректно обрабатываются: загрузка скроется только после одинакового числа вызовов `hide()`.
+- **Глобальное событие** — при изменении состояния диспетчеризуется событие `ui-loading` на объекте `window`.
+- **Регистрация слушателей** — через `registrationEvent` можно подписаться на изменения состояния из любого компонента.
+
+## Управление состоянием
+
+- `is(): boolean` — возвращает `true`, если загрузка активна (счётчик > 0).
+- `get(): number` — возвращает текущее значение счётчика.
+- `show(): void` — увеличивает счётчик на 1, оповещает слушателей.
+- `hide(): void` — уменьшает счётчик на 1. Если счётчик уже 0 — игнорируется.
+
+## Подписка на события
+
+### `registrationEvent`
+
+Регистрирует слушателя изменений состояния загрузки. Работает через нативное событие `ui-loading` на объекте `window`.
+
+**Параметры:**
+- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — функция-обработчик, получающая `event.detail.loading: boolean`.
+- `element?: ElementOrString<HTMLElement>` — DOM-элемент-триггер: при его удалении из DOM слушатель автоматически останавливается.
+
+### `unregistrationEvent`
+
+Отменяет регистрацию слушателя, добавленного через `registrationEvent`.
+
+**Параметры:**
+- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — функция-обработчик, которая была использована при регистрации.
+- `element?: ElementOrString<HTMLElement>` — DOM-элемент, который был использован при регистрации.
+
+## LoadingInstance
+Класс `LoadingInstance` можно использовать для создания отдельного экземпляра для отслеживания загрузки.
+
+## Пример
+
+```javascript
+import { Loading } from '@dxtmisha/functional-basic'
+
+Loading.registrationEvent((event) => {
+  console.log('Загрузка:', event.detail.loading) // true или false
+})
+
+Loading.show()  // счётчик = 1
+Loading.show()  // счётчик = 2
+Loading.hide()  // счётчик = 1
+Loading.hide()  // счётчик = 0 → событие: { loading: false }
+```

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

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Classes/Loading - Tải toàn cục'/>
+
+# Lớp Loading
+
+Lớp tĩnh để quản lý trạng thái tải toàn cục (sử dụng `LoadingInstance`). Sử dụng bộ đếm: tải đang hoạt động khi ít nhất một tiến trình đang hiển thị nó. Thông báo cho các listener qua sự kiện tùy chỉnh `ui-loading`.
+
+## Các tính năng chính
+
+- **Bộ đếm lồng nhau** — nhiều lần gọi `show()` song song được xử lý chính xác: tải chỉ ẩn sau số lần gọi `hide()` tương ứng.
+- **Sự kiện toàn cục** — khi trạng thái thay đổi, sự kiện `ui-loading` được phát trên đối tượng `window`.
+- **Đăng ký listener** — đăng ký theo dõi thay đổi từ bất kỳ component nào qua `registrationEvent`.
+
+## Quản lý trạng thái
+
+- `is(): boolean` — trả về `true` nếu tải đang hoạt động (bộ đếm > 0).
+- `get(): number` — trả về giá trị hiện tại của bộ đếm.
+- `show(): void` — tăng bộ đếm lên 1, thông báo cho các listener.
+- `hide(): void` — giảm bộ đếm đi 1. Bỏ qua nếu bộ đếm đã bằng 0.
+
+## Đăng ký sự kiện
+
+### `registrationEvent`
+
+Đăng ký listener cho các thay đổi trạng thái tải. Hoạt động thông qua sự kiện `ui-loading` trên đối tượng `window`.
+
+**Tham số:**
+- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — hàm xử lý nhận `event.detail.loading: boolean`.
+- `element?: ElementOrString<HTMLElement>` — phần tử DOM tùy chọn: listener tự động dừng khi phần tử bị xóa khỏi DOM.
+
+### `unregistrationEvent`
+
+Hủy đăng ký listener đã được thêm trước đó qua `registrationEvent`.
+
+**Tham số:**
+- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — hàm xử lý đã sử dụng khi đăng ký.
+- `element?: ElementOrString<HTMLElement>` — phần tử DOM đã sử dụng khi đăng ký.
+
+## LoadingInstance
+Lớp `LoadingInstance` có thể được sử dụng để tạo một thực thể (instance) riêng biệt để theo dõi quá trình tải.
+
+## Ví dụ
+
+```javascript
+import { Loading } from '@dxtmisha/functional-basic'
+
+Loading.registrationEvent((event) => {
+  console.log('Đang tải:', event.detail.loading) // true hoặc false
+})
+
+Loading.show()  // bộ đếm = 1
+Loading.show()  // bộ đếm = 2
+Loading.hide()  // bộ đếm = 1
+Loading.hide()  // bộ đếm = 0 → sự kiện: { loading: false }
+```

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

@@ -0,0 +1,95 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Classes/Meta - SEO Meta Tag Management'/>
+
+# Meta Class
+
+A unified facade for managing all document meta tags. Extends `MetaManager` and combines standard HTML tags, Open Graph (`MetaOg`), and Twitter Card (`MetaTwitter`) into a single interface.
+
+## Key Features
+
+- **Single Management Point** — one object manages `<title>`, `name` meta tags, `og:*`, and `twitter:*`.
+- **Synchronization** — `setTitle`, `setImage`, `setCanonical`, and `setSiteName` automatically update corresponding tags in all three systems.
+- **Title Suffix** — built-in support for automatically appending site name to the page title.
+- **SSR Compatibility** — `html()` generates full HTML of all tags.
+
+## Initialization
+
+To create a meta-data management object, call the `new Meta()` constructor.
+
+**Features:**
+- **Automation** — the constructor automatically initializes registries for standard HTML, Open Graph, and Twitter Card tags.
+- **Integration** — immediately creates internal `MetaOg` and `MetaTwitter` instances.
+
+```javascript
+import { Meta } from '@dxtmisha/functional-basic'
+
+const meta = new Meta()
+```
+
+## Getters
+
+- `getTitle(): string` — page title without suffix.
+- `getKeywords(): string` — `keywords` meta tag.
+- `getDescription(): string` — `description` meta tag.
+- `getImage(): string` — image URL from Open Graph.
+- `getCanonical(): string` — canonical URL.
+- `getRobots(): MetaRobots` — `robots` meta tag.
+- `getAuthor(): string` — `author` meta tag.
+- `getSiteName(): string` — site name from Open Graph.
+- `getLocale(): string` — locale from Open Graph.
+- `getOg(): MetaOg` — direct access to the `MetaOg` instance.
+- `getTwitter(): MetaTwitter` — direct access to the `MetaTwitter` instance.
+
+## Setters
+
+All setters return `this` for method chaining.
+
+- `setTitle(title: string)` — sets `document.title` (with suffix), `og:title`, and `twitter:title` simultaneously.
+- `setKeywords(keywords: string | string[])` — accepts a string or array; arrays are joined with commas.
+- `setDescription(description: string)` — sets `<meta name="description">`.
+- `setImage(image: string)` — sets `og:image` and `twitter:image` simultaneously.
+- `setCanonical(canonical: string)` — sets `<meta name="canonical">`, `og:url`, and `twitter:url` simultaneously.
+- `setRobots(robots: MetaRobots)` — sets `<meta name="robots">` (`'index, follow'`, `'noindex, nofollow'`, etc.).
+- `setAuthor(author: string)` — sets `<meta name="author">`.
+- `setSiteName(siteName: string)` — sets `og:site_name` and `twitter:site` simultaneously.
+- `setLocale(locale: string)` — sets `og:locale` (format: `'en_US'`).
+- `setSuffix(suffix?: string)` — title suffix. `setTitle('Article')` + `setSuffix('Site')` → `'Article - Site'`.
+
+## HTML Generation
+
+### `html(): string`
+
+Generates the full HTML string of all meta tags: standard + Open Graph + Twitter Card. Used for SSR.
+
+```javascript
+const meta = new Meta()
+meta.setTitle('Article').setDescription('Description').setImage('https://example.com/img.jpg')
+
+const html = meta.html()
+// <meta name="description" content="Description">
+// <meta property="og:title" content="Article">
+// <meta property="og:image" content="https://example.com/img.jpg">
+// <meta name="twitter:title" content="Article">
+// ...
+```
+
+## Example
+
+```javascript
+import { Meta } from '@dxtmisha/functional-basic'
+
+const meta = new Meta()
+meta.setSuffix('My Site')
+
+meta
+  .setTitle('How to Use Vue 3')
+  .setDescription('A comprehensive guide to Vue 3')
+  .setKeywords(['vue', 'javascript', 'typescript'])
+  .setImage('https://example.com/images/vue.jpg')
+  .setCanonical('https://example.com/articles/vue-3')
+  .setRobots('index, follow')
+  .setAuthor('John Smith')
+  .setSiteName('My Site')
+  .setLocale('en_US')
+```

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

@@ -0,0 +1,95 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Classes/Meta - Управление SEO мета-тегами'/>
+
+# Класс Meta
+
+Унифицированный фасад для управления всеми мета-тегами документа. Наследует `MetaManager` и объединяет стандартные HTML-теги, Open Graph (`MetaOg`) и Twitter Card (`MetaTwitter`) в единый интерфейс.
+
+## Ключевые особенности
+
+- **Единая точка управления** — один объект управляет `<title>`, мета-тегами `name`, `og:*` и `twitter:*`.
+- **Синхронизация** — `setTitle`, `setImage`, `setCanonical` и `setSiteName` автоматически обновляют соответствующие теги во всех трёх системах.
+- **Суффикс заголовка** — поддержка автоматического добавления названия сайта к заголовку страницы.
+- **SSR-совместимость** — метод `html()` генерирует полный HTML всех тегов.
+
+## Инициализация
+
+Для создания объекта управления мета-данными вызовите конструктор `new Meta()`.
+
+**Особенности:**
+- **Автоматизация** — конструктор автоматически инициализирует реестры для стандартных HTML, Open Graph и Twitter Card тегов.
+- **Интеграция** — сразу создаёт внутренние экземпляры `MetaOg` и `MetaTwitter`.
+
+```javascript
+import { Meta } from '@dxtmisha/functional-basic'
+
+const meta = new Meta()
+```
+
+## Геттеры
+
+- `getTitle(): string` — заголовок страницы без суффикса.
+- `getKeywords(): string` — мета-тег `keywords`.
+- `getDescription(): string` — мета-тег `description`.
+- `getImage(): string` — URL изображения из Open Graph.
+- `getCanonical(): string` — канонический URL.
+- `getRobots(): MetaRobots` — мета-тег `robots`.
+- `getAuthor(): string` — мета-тег `author`.
+- `getSiteName(): string` — название сайта из Open Graph.
+- `getLocale(): string` — локаль из Open Graph.
+- `getOg(): MetaOg` — прямой доступ к экземпляру `MetaOg`.
+- `getTwitter(): MetaTwitter` — прямой доступ к экземпляру `MetaTwitter`.
+
+## Сеттеры
+
+Все сеттеры возвращают `this` для цепочки вызовов.
+
+- `setTitle(title: string)` — устанавливает `document.title` (с суффиксом), `og:title` и `twitter:title` одновременно.
+- `setKeywords(keywords: string | string[])` — принимает строку или массив; массив объединяется через запятую.
+- `setDescription(description: string)` — устанавливает `<meta name="description">`.
+- `setImage(image: string)` — устанавливает `og:image` и `twitter:image` одновременно.
+- `setCanonical(canonical: string)` — устанавливает `<meta name="canonical">`, `og:url` и `twitter:url` одновременно.
+- `setRobots(robots: MetaRobots)` — устанавливает `<meta name="robots">` (`'index, follow'`, `'noindex, nofollow'` и др.).
+- `setAuthor(author: string)` — устанавливает `<meta name="author">`.
+- `setSiteName(siteName: string)` — устанавливает `og:site_name` и `twitter:site` одновременно.
+- `setLocale(locale: string)` — устанавливает `og:locale` (формат: `'ru_RU'`).
+- `setSuffix(suffix?: string)` — суффикс заголовка. `setTitle('Статья')` + `setSuffix('Сайт')` → `'Статья - Сайт'`.
+
+## Генерация HTML
+
+### `html(): string`
+
+Генерирует полную HTML-строку всех мета-тегов: стандартных + Open Graph + Twitter Card. Используется для SSR.
+
+```javascript
+const meta = new Meta()
+meta.setTitle('Статья').setDescription('Описание').setImage('https://example.com/img.jpg')
+
+const html = meta.html()
+// <meta name="description" content="Описание">
+// <meta property="og:title" content="Статья">
+// <meta property="og:image" content="https://example.com/img.jpg">
+// <meta name="twitter:title" content="Статья">
+// ...
+```
+
+## Пример
+
+```javascript
+import { Meta } from '@dxtmisha/functional-basic'
+
+const meta = new Meta()
+meta.setSuffix('Мой Сайт')
+
+meta
+  .setTitle('Как использовать Vue 3')
+  .setDescription('Подробное руководство по Vue 3')
+  .setKeywords(['vue', 'javascript', 'typescript'])
+  .setImage('https://example.com/images/vue.jpg')
+  .setCanonical('https://example.com/articles/vue-3')
+  .setRobots('index, follow')
+  .setAuthor('Иван Иванов')
+  .setSiteName('Мой Сайт')
+  .setLocale('ru_RU')
+```

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

@@ -0,0 +1,95 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Classes/Meta - Quản lý thẻ meta SEO'/>
+
+# Lớp Meta
+
+Facade thống nhất để quản lý tất cả thẻ meta của tài liệu. Kế thừa `MetaManager` và kết hợp thẻ HTML tiêu chuẩn, Open Graph (`MetaOg`) và Twitter Card (`MetaTwitter`) vào một giao diện duy nhất.
+
+## Các tính năng chính
+
+- **Điểm quản lý duy nhất** — một đối tượng quản lý `<title>`, thẻ meta `name`, `og:*` và `twitter:*`.
+- **Đồng bộ hóa** — `setTitle`, `setImage`, `setCanonical`, `setSiteName` tự động cập nhật các thẻ tương ứng trong cả ba hệ thống.
+- **Hậu tố tiêu đề** — hỗ trợ tự động thêm tên trang web vào tiêu đề trang.
+- **Tương thích SSR** — `html()` tạo HTML đầy đủ của tất cả thẻ.
+
+## Khởi tạo
+
+Để tạo một đối tượng quản lý siêu dữ liệu (meta-data), hãy gọi hàm khởi tạo `new Meta()`.
+
+**Tính năng:**
+- **Tự động hóa** — hàm khởi tạo tự động khởi tạo registry cho các thẻ HTML tiêu chuẩn, Open Graph và Twitter Card.
+- **Tích hợp** — ngay lập tức tạo các instance `MetaOg` và `MetaTwitter` nội bộ.
+
+```javascript
+import { Meta } from '@dxtmisha/functional-basic'
+
+const meta = new Meta()
+```
+
+## Getter
+
+- `getTitle(): string` — tiêu đề trang không có hậu tố.
+- `getKeywords(): string` — thẻ meta `keywords`.
+- `getDescription(): string` — thẻ meta `description`.
+- `getImage(): string` — URL hình ảnh từ Open Graph.
+- `getCanonical(): string` — URL chính.
+- `getRobots(): MetaRobots` — thẻ meta `robots`.
+- `getAuthor(): string` — thẻ meta `author`.
+- `getSiteName(): string` — tên website từ Open Graph.
+- `getLocale(): string` — locale từ Open Graph.
+- `getOg(): MetaOg` — truy cập trực tiếp instance `MetaOg`.
+- `getTwitter(): MetaTwitter` — truy cập trực tiếp instance `MetaTwitter`.
+
+## Setter
+
+Tất cả setter trả về `this` để chuỗi phương thức.
+
+- `setTitle(title: string)` — đặt `document.title` (có hậu tố), `og:title` và `twitter:title` đồng thời.
+- `setKeywords(keywords: string | string[])` — nhận chuỗi hoặc mảng; mảng tự động nối bằng dấu phẩy.
+- `setDescription(description: string)` — đặt `<meta name="description">`.
+- `setImage(image: string)` — đặt `og:image` và `twitter:image` đồng thời.
+- `setCanonical(canonical: string)` — đặt `<meta name="canonical">`, `og:url` và `twitter:url` đồng thời.
+- `setRobots(robots: MetaRobots)` — đặt `<meta name="robots">` (`'index, follow'`, `'noindex, nofollow'`, v.v.).
+- `setAuthor(author: string)` — đặt `<meta name="author">`.
+- `setSiteName(siteName: string)` — đặt `og:site_name` và `twitter:site` đồng thời.
+- `setLocale(locale: string)` — đặt `og:locale` (định dạng: `'vi_VN'`).
+- `setSuffix(suffix?: string)` — hậu tố tiêu đề. `setTitle('Bài viết')` + `setSuffix('Trang web')` → `'Bài viết - Trang web'`.
+
+## Tạo HTML
+
+### `html(): string`
+
+Tạo chuỗi HTML đầy đủ của tất cả thẻ meta: tiêu chuẩn + Open Graph + Twitter Card. Dùng cho SSR.
+
+```javascript
+const meta = new Meta()
+meta.setTitle('Bài viết').setDescription('Mô tả').setImage('https://example.com/img.jpg')
+
+const html = meta.html()
+// <meta name="description" content="Mô tả">
+// <meta property="og:title" content="Bài viết">
+// <meta property="og:image" content="https://example.com/img.jpg">
+// <meta name="twitter:title" content="Bài viết">
+// ...
+```
+
+## Ví dụ
+
+```javascript
+import { Meta } from '@dxtmisha/functional-basic'
+
+const meta = new Meta()
+meta.setSuffix('Trang web của tôi')
+
+meta
+  .setTitle('Cách sử dụng Vue 3')
+  .setDescription('Hướng dẫn toàn diện về Vue 3')
+  .setKeywords(['vue', 'javascript', 'typescript'])
+  .setImage('https://example.com/images/vue.jpg')
+  .setCanonical('https://example.com/articles/vue-3')
+  .setRobots('index, follow')
+  .setAuthor('Nguyễn Văn An')
+  .setSiteName('Trang web của tôi')
+  .setLocale('vi_VN')
+```

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

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Classes/MetaManager - Meta Tag Management'/>
+
+# MetaManager Class
+
+A base generic class for synchronizing HTML document meta tags. Reads existing tags from the DOM on initialization and provides a unified interface for reading and writing them.
+
+This class is the parent of `MetaOg`, `MetaTwitter`, and `Meta`.
+
+## Initialization
+
+The class is **abstract**. You cannot create its instance directly using `new MetaManager()`. Instead, it must be extended.
+
+**Constructor Parameters (for descendants):**
+- `listMeta: T` — a list of meta tag names managed by this instance.
+- `isProperty?: boolean` — determines the attribute used: `true` for `property` (Open Graph), `false` for `name` (standard tags). Default: `false`.
+
+```typescript
+import { MetaManager } from '@dxtmisha/functional-basic'
+
+// Extension example
+class MyMeta extends MetaManager<string[]> {
+  constructor() {
+    super(['description', 'keywords'])
+  }
+}
+
+const myMeta = new MyMeta()
+```
+
+## Methods
+
+- `getListMeta(): T` — returns the list of managed tag names.
+- `get(name): string` — returns the content of a tag by name. Returns `''` if not set.
+- `getItems(): MetaList<T>` — returns an object with all tags: `{ [name]: content }`.
+- `set(name, content): this` — sets the tag in the DOM (creates if not found). Supports chaining.
+- `setByList(metaList): this` — sets multiple tags from an object. Supports chaining.
+
+## HTML Generation
+
+### `html(): string`
+
+Generates an HTML string for all managed tags that have content. Used for SSR.
+
+```javascript
+manager.set('description', 'My description').set('keywords', 'vue, typescript')
+
+manager.html()
+// '<meta name="description" content="My description"><meta name="keywords" content="vue, typescript">'
+```