@dxtmisha/wiki 0.39.7 → 0.39.8

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

@@ -1,139 +1,89 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/vi/functional-basic/Classes/GeoPhone - Mặt nạ số điện thoại'/>
+<Meta title='@dxtmisha/vi/functional-basic/Classes/GeoPhone - Mặt nạ điện thoại'/>
 
 # Lớp GeoPhone
 
-Lớp chuyên biệt để lưu trữ và xử lý các mặt nạ số điện thoại quốc tế. Nó cung cấp một hệ thống mạnh mẽ để xác định thông tin vị trí địa lý của quốc gia từ các chuỗi số điện thoại, định dạng số thô thành các đặc tả mặt nạ địa phương và quản lý bản đồ mã điện thoại quốc tế dựa trên cấu trúc cây tiền tố (prefix-tree).
+Lớp chuyên biệt để lưu trữ và xử lý mặt nạ số điện thoại quốc tế. Cung cấp cơ chế xác định quốc gia theo chuỗi số điện thoại, định dạng số thô thành mặt nạ được bản địa hóa và quản lý bản đồ mã điện thoại phức tạp dựa trên cây tiền tố (Trie). Lớp này được tích hợp chặt chẽ với dữ liệu địa lý `Geo`, cho phép tự động xác định mặt nạ dựa trên ngôn ngữ hiện tại của người dùng hoặc mã quốc gia được cung cấp.
 
-Lớp này tích hợp sâu với dữ liệu địa lý `Geo` để cung cấp khả năng tự động phân giải mặt nạ dựa trên vùng locale hiện tại của người dùng hoặc các mã quốc gia cụ thể.
+## Tính năng chính
 
-## Các tính năng chính
+- **Khớp tự động** — Tự động xác định quốc gia và mẫu mặt nạ phù hợp thông qua tìm kiếm đệ quy trong cây tiền tố.
+- **Tối ưu hóa cây tiền tố** — Sử dụng cấu trúc `map` chuyên biệt (Trie) để tìm kiếm hiệu suất cao.
+- **Bình thường hóa thông minh** — Tự động xử lý các biến thể quay số khu vực như số 0 ở đầu hoặc tiền tố quốc gia.
+- **Định dạng tiêu chuẩn** — Chuyển đổi các chuỗi số thô thành định dạng dễ đọc.
 
-- **Tự động khớp (Auto Mapping)** — Tự động phân giải quốc gia và mẫu mặt nạ phù hợp một cách động thông qua tra cứu cây tiền tố đệ quy.
-- **Tối ưu hóa Cây Tiền tố (Prefix Tree)** — Sử dụng cấu trúc `map` chuyên biệt (Prefix Tree) để tìm kiếm hiệu quả và hiệu suất cao trên các kế hoạch đánh số quốc tế.
-- **Chuẩn hóa Thông minh** — Tự động xử lý các biến thể quay số theo vùng, chẳng hạn như số 0 ở đầu hoặc các tiền tố quốc gia (ví dụ: số '8' của Nga).
-- **Định dạng Chuẩn hóa** — Chuyển đổi các chuỗi số thô thành các định dạng điện thoại dễ đọc, phù hợp với các tiêu chuẩn viễn thông quốc tế.
+## Cách sử dụng cơ bản
 
-## Các phương thức Tìm kiếm
-
-### `getByPhone`
-
-Phương thức định danh chính phân tích một chuỗi số điện thoại để trích xuất thông tin địa lý và mặt nạ đánh số phù hợp nhất.
-
-**Tham số:**
-- `phone: string` — Số điện thoại mục tiêu cần phân tích (chấp nhận các chuỗi thô hoặc đã được định dạng một phần).
-
-**Trả về:** `GeoPhoneMapInfo` — Một đối tượng cấu trúc chứa mục `GeoPhoneMap` khớp được và phần số đã được chuẩn hóa của điện thoại.
+Bạn có thể sử dụng các phương thức tĩnh của lớp để xác định nhanh quốc gia theo số điện thoại hoặc định dạng.
 
 ```javascript
 import { GeoPhone } from '@dxtmisha/functional-basic'
 
+// Xác định quốc gia theo số điện thoại
 const info = GeoPhone.getByPhone('84901234567')
-// trả về:
-// { 
-//   item: { info: { phone: 84, ... }, mask: ['+84 ** **** ****'], ... },
-//   phone: '901234567' 
-// }
-```
-
-### `get`
-
-Truy xuất siêu dữ liệu điện thoại đã địa phương hóa được liên kết với một mã quốc gia cụ thể.
-
-**Tham số:**
-- `code: string` — Mã quốc gia tiêu chuẩn ISO 3166 (ví dụ: `'VN'`, `'RU'`, `'US'`).
+console.log(info.item?.value) // 'VN'
 
-**Trả về:** `GeoPhoneValue | undefined` — Siêu dữ liệu thô của quốc gia, hoặc `undefined` nếu không tìm thấy trong bộ dữ liệu.
-
-```javascript
-GeoPhone.get('VN') 
-// { phone: 84, within: 0, mask: ['+** ** **** ****'], value: 'VN' }
+// Định dạng theo mặt nạ
+const formatted = GeoPhone.toMask('901234567', ['+** (***) ***-***'])
+console.log(formatted) // '+84 (901) 234-567'
 ```
 
-### `getByCode`
-
-Phương thức truy xuất mở rộng trả về dữ liệu mặt nạ đầy đủ bao gồm cả nút cây tìm kiếm cho một mã quốc gia nhất định.
-
-**Tham số:**
-- `code: string` — Chuỗi mã quốc gia mục tiêu.
-
-**Trả về:** `GeoPhoneMap | undefined` — Đối tượng nút bản đồ đầy đủ cho mã được yêu cầu.
-
-```javascript
-GeoPhone.getByCode('US')
-// { info: { phone: 1, ... }, mask: ['1 (***) ***-****'], ... }
-```
+## Các phương thức
 
-## Các phương thức Truy cập Dữ liệu
+### Thông tin
 
-- `getList(): GeoPhoneValue[]` — Trả về danh sách phẳng đầy đủ, đã được sắp xếp của tất cả siêu dữ liệu điện thoại quốc tế đã đăng ký.
-- `getMap(): Record<string, GeoPhoneMap>` — Trả về nút gốc của cây tiền tố nội bộ được sử dụng để định danh số điện thoại tốc độ cao.
+- `getList(): GeoPhoneValue[]` — Trả về danh sách phẳng đầy đủ, đã được sắp xếp của tất cả dữ liệu meta điện thoại quốc tế.
+- `getMap(): Record<string, GeoPhoneMap>` — Trả về nút gốc của cây tiền tố nội bộ được sử dụng để tìm kiếm.
 
-## Các phương thức Định dạng & Tiện ích
+### Lựa chọn
 
-### `toMask`
+- `get(code: string): GeoPhoneValue | undefined` — Lấy dữ liệu meta điện thoại liên kết với một mã quốc gia cụ thể.
+- `getByPhone(phone: string): GeoPhoneMapInfo` — Phân tích chuỗi số điện thoại để trích xuất thông tin và mặt nạ phù hợp.
+- `getByCode(code: string): GeoPhoneMap | undefined` — Trả về thông tin mặt nạ đầy đủ cho một mã nhất định.
 
-Chuyển đổi một chuỗi số điện thoại thô thành phiên bản đã được định dạng dựa trên một tập hợp các mặt nạ cụ thể.
+### Phụ trợ
 
-**Tham số:**
-- `phone: string` — Đầu vào số thô.
-- `masks?: string[]` — Một mảng các chuỗi mặt nạ hợp lệ để lặp qua nhằm tìm kiếm sự phù hợp.
+- `toMask(phone: string, masks?: string[]): string | undefined` — Chuyển đổi chuỗi số điện thoại thô thành phiên bản đã định dạng.
+- `removeZero(phone: string): string` — Bình thường hóa biểu diễn nội bộ của số bằng cách loại bỏ các số 0 ở đầu hoặc điều chỉnh tiền tố khu vực.
 
-**Trả về:** `string | undefined` — Chuỗi đã được định dạng cho người dùng, hoặc `undefined` nếu không có độ dài mặt nạ nào khớp với đầu vào.
-
-```javascript
-GeoPhone.toMask('901234567', ['+** ** **** ****']) 
-// '+84 90 1234 567'
-```
-
-### `removeZero`
-
-Chuẩn hóa biểu diễn số nội bộ bằng cách loại bỏ các số 0 ở đầu hoặc sửa các tiền tố quay số vùng để đảm bảo logic tìm kiếm nhất quán.
-
-**Tham số:**
-- `phone: string` — Chuỗi số điện thoại đầu vào.
-
-**Trả về:** `string` — Chuỗi số đã được chuẩn hóa.
-
-```javascript
-GeoPhone.removeZero('0901234567')  // '901234567'
-GeoPhone.removeZero('89001234567') // '9001234567'
-```
-
-## Các đối tượng GeoPhone
+## Kiểu dữ liệu
 
 ### `GeoPhoneValue`
 Cấu trúc siêu dữ liệu cơ bản cho cấu hình điện thoại của mỗi quốc gia:
-- `phone: number` — Mã quay số (ví dụ: `84`).
-- `within: number` — Mã quy tắc quay số nội bộ.
-- `mask: string[]` — Mảng các mẫu mặt nạ.
-- `value: string` — Định danh quốc gia.
+- `phone: number` — Mã điện thoại quốc gia (ví dụ: `84`).
+- `within: number` — Mã quy tắc gọi nội bộ (dùng để chọn ký tự đặc biệt trong mặt nạ).
+- `mask: string[]` — Mảng các mẫu mặt nạ được gán cho quốc gia.
+- `value: string` — Mã định danh quốc gia (ISO 3166).
 
 ### `GeoPhoneMap`
-Một nút trong cây tiền tố nội bộ:
-- `items: GeoPhoneValue[]` — Danh sách các mục thuộc nhánh này.
-- `info: GeoPhoneValue | undefined` — Giá trị khớp tại nút số cụ thể này.
-- `next: Record<string, GeoPhoneMap>` — Con trỏ đến các chữ số tiếp theo trong cây.
+Một nút trong cây tiền tố nội bộ (Trie) được sử dụng để tìm kiếm:
+- `items: GeoPhoneValue[]` — Danh sách tất cả các mục có sẵn trong nhánh này của cây.
+- `info: GeoPhoneValue | undefined` — Dữ liệu meta điện thoại nếu nút hiện tại là một mã đầy đủ.
+- `value: string | undefined` — Mã định danh quốc gia cho nút này.
+- `mask: string[]` — Mảng các mặt nạ với các ký tự nội bộ đã được thay thế (`~`, `=`, `$`).
+- `maskFull: string[]` — Mặt nạ đầy đủ bao gồm cả mã quốc tế.
+- `next: Record<string, GeoPhoneMap>` — Con trỏ đến các chữ số tiếp theo trong cây tìm kiếm.
+
+### `GeoPhoneMapInfo`
+Kết quả của phương thức tìm kiếm `getByPhone`:
+- `item?: GeoPhoneMap` — Nút cây tìm thấy với thông tin quốc gia và mặt nạ.
+- `phone?: string` — Phần còn lại của số sau khi tách mã quốc gia.
 
 ## Ví dụ
 
+### Logic ký tự nội bộ (Within)
+Logic nội bộ của lớp sẽ thay thế dấu "sao" đầu tiên trong mặt nạ bằng một ký tự đặc biệt tùy thuộc vào quy tắc khu vực:
+- `~` — cho Nga (mã nội bộ 8).
+- `=` — cho các khu vực mặc định/khác (ví dụ: Việt Nam, Hoa Kỳ).
+
+```javascript
+const mapInfo = GeoPhone.getByCode('RU')
+console.log(mapInfo.mask[0]) // '~ (***) ***-**-**'
+```
+
+### Nhiều mặt nạ
 ```javascript
-import { GeoPhone } from '@dxtmisha/functional'
-
-// 1. Định danh quốc gia bằng số điện thoại
-const lookup = GeoPhone.getByPhone('+84901234567')
-if (lookup.item) {
-    console.log('Quốc gia:', lookup.item.value) // 'VN'
-    console.log('Mặt nạ chính:', lookup.item.mask[0])
-}
-
-// 2. Định dạng thủ công
-const formatted = GeoPhone.toMask('442071234567', ['+** (**) **** ****'])
-console.log(formatted) // '+44 (20) 7123 4567'
-
-// 3. Chuẩn hóa đầu vào để tìm kiếm
-const rawInput = '0084901234567'
-const normalized = GeoPhone.removeZero(rawInput.replace(/^00/, ''))
-console.log(normalized) // '84901234567'
+const masks = ['+** (***) ***-***', '+** (***) ***-**-**']
+console.log(GeoPhone.toMask('84901234567', masks)) // 11 số -> '+84 (901) 234-567'
 ```

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

@@ -4,7 +4,9 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 # Hash Class
 
-A static class for managing data stored in the URL hash (`#`). It automatically synchronizes application state with the URL — every `set` call updates the browser's hash string, while the `hashchange` event refreshes the internal state.
+A static facade class for managing data stored in the URL hash (`#`). It delegates execution to the `HashInstance` class, providing centralized access and state isolation (e.g., for SSR).
+
+It automatically synchronizes application state with the URL — every `set` call updates the browser's hash string, while the `hashchange` event refreshes the internal state.
 
 ## Key Features
 
@@ -12,10 +14,11 @@ A static class for managing data stored in the URL hash (`#`). It automatically
 - **Reactivity via Watchers** — The `addWatch` method allows subscribing to changes on a specific variable.
 - **Auto-initialization** — When the page loads, data is automatically read from the URL.
 - **Smart Typing** — Values are deserialized from a string: numbers, booleans, and objects are restored to their original types.
+- **SSR Isolation** — `ServerStorage` ensures a unique data instance for each request on the server.
 
 ## Initialization
 
-The class is static and initializes automatically on page load — reading the current URL hash string.
+The class is static and initializes automatically upon the first access.
 
 ```javascript
 // URL: https://myapp.com/#page=2;filter=active
@@ -28,11 +31,19 @@ const filter = Hash.get('filter') // 'active' (string)
 
 ## Methods
 
-- `get<T>(name: string, defaultValue?: T | (() => T)): T` — Returns the value of a hash variable. If the value doesn't exist, it is set using `defaultValue` (which can be a function).
-- `set<T>(name: string, callback: T | (() => T)): void` — Sets a variable's value and updates the URL hash. If the value hasn't changed, no update occurs.
-- `addWatch<T>(name: string, callback: (value: T) => void): void` — Subscribes to changes for a specific hash variable.
-- `removeWatch<T>(name: string, callback: (value: T) => void): void` — Unsubscribes from changes for a specific variable.
-- `reload(): void` — Reads the current URL hash and synchronizes it with the internal state.
+### Instance
+- `static getItem(): HashInstance` — Returns the current `HashInstance` (isolated for the current request).
+
+### Reading and Writing
+- `static get<T>(name: string, defaultValue?: T | (() => T)): T` — Returns the value of a hash variable.
+- `static set<T>(name: string, callback: T | (() => T)): void` — Sets a variable's value and updates the URL hash.
+
+### Watchers
+- `static addWatch<T>(name: string, callback: (value: T) => void): void` — Subscribes to changes for a specific hash variable.
+- `static removeWatch<T>(name: string, callback: (value: T) => void): void` — Unsubscribes from changes for a specific variable.
+
+### Management
+- `static reload(): void` — Forces synchronization of the state with the current URL hash.
 
 ## Examples
 

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

@@ -4,7 +4,9 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 # Класс Hash
 
-Статический класс для управления данными, которые хранятся в URL-хэше (`#`). Автоматически синхронизирует состояние приложения с URL — каждый вызов `set` обновляет строку хэша в браузере, а событие `hashchange` обновляет внутреннее состояние.
+Статический класс-фасад для управления данными, которые хранятся в URL-хэше (`#`). Он делегирует выполнение классу `HashInstance`, обеспечивая централизованный доступ и изоляцию состояния (например, при SSR).
+
+Автоматически синхронизирует состояние приложения с URL — каждый вызов `set` обновляет строку хэша в браузере, а событие `hashchange` обновляет внутреннее состояние.
 
 ## Ключевые особенности
 
@@ -12,10 +14,11 @@ import {Meta} from '@storybook/addon-docs/blocks'
 - **Реактивность через watchers** — Метод `addWatch` позволяет подписаться на изменение конкретной переменной.
 - **Авто-инициализация** — При загрузке страницы данные автоматически считываются из URL.
 - **Умный тип** — Значения десериализуются из строки: числа, булевые значения и объекты восстанавливаются.
+- **SSR-изоляция** — Через `ServerStorage` обеспечивается уникальный экземпляр данных для каждого запроса на сервере.
 
 ## Инициализация
 
-Класс является статическим и инициализируется автоматически при загрузке страницы — считывает текущую строку хэша URL.
+Класс является статическим и инициализируется автоматически при первом обращении.
 
 ```javascript
 // URL: https://myapp.com/#page=2;filter=active
@@ -28,11 +31,19 @@ const filter = Hash.get('filter') // 'active' (string)
 
 ## Методы
 
-- `get<T>(name: string, defaultValue?: T | (() => T)): T` — Возвращает значение переменной из хэша. Если значения нет, устанавливает его через `defaultValue` (может быть функцией).
-- `set<T>(name: string, callback: T | (() => T)): void` — Устанавливает значение переменной и обновляет URL-хэш. Если значение не изменилось, обновление не происходит.
-- `addWatch<T>(name: string, callback: (value: T) => void): void` — Подписывается на изменение конкретной переменной в хэше.
-- `removeWatch<T>(name: string, callback: (value: T) => void): void` — Отписывается от изменений конкретной переменной.
-- `reload(): void` — Считывает текущий URL-хэш и синхронизирует с ним внутреннее состояние.
+### Экземпляр
+- `static getItem(): HashInstance` — Возвращает текущий экземпляр `HashInstance` (изолированный для текущего запроса).
+
+### Чтение и запись
+- `static get<T>(name: string, defaultValue?: T | (() => T)): T` — Возвращает значение переменной из хэша.
+- `static set<T>(name: string, callback: T | (() => T)): void` — Устанавливает значение переменной и обновляет URL-хэш.
+
+### Наблюдение (Watchers)
+- `static addWatch<T>(name: string, callback: (value: T) => void): void` — Подписывается на изменение переменной.
+- `static removeWatch<T>(name: string, callback: (value: T) => void): void` — Отписывается от изменений.
+
+### Управление
+- `static reload(): void` — Принудительно синхронизирует состояние с текущим URL-хэшем.
 
 ## Примеры
 

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

@@ -4,7 +4,9 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 # Lớp Hash
 
-Một lớp tĩnh để quản lý dữ liệu được lưu trữ trong URL hash (`#`). Tự động đồng bộ hóa trạng thái ứng dụng với URL — mỗi lần gọi `set` sẽ cập nhật chuỗi hash trên trình duyệt, và sự kiện `hashchange` sẽ làm mới trạng thái nội bộ.
+Một lớp facade tĩnh để quản lý dữ liệu được lưu trữ trong URL hash (`#`). Nó ủy quyền thực thi cho lớp `HashInstance`, cung cấp khả năng truy cập tập trung и cách ly trạng thái (ví dụ: cho SSR).
+
+Nó tự động đồng bộ hóa trạng thái ứng dụng với URL — mỗi lần gọi `set` sẽ cập nhật chuỗi hash trên trình duyệt, và sự kiện `hashchange` sẽ làm mới trạng thái nội bộ.
 
 ## Tính năng chính
 
@@ -12,10 +14,11 @@ Một lớp tĩnh để quản lý dữ liệu được lưu trữ trong URL has
 - **Phản hồi qua Watcher** — Phương thức `addWatch` cho phép đăng ký theo dõi thay đổi của một biến cụ thể.
 - **Tự động khởi tạo** — Khi tải trang, dữ liệu được tự động đọc từ URL.
 - **Phân tích kiểu thông minh** — Giá trị được giải mã từ chuỗi: số, boolean và đối tượng được khôi phục về kiểu gốc.
+- **Cách ly SSR** — `ServerStorage` đảm bảo mỗi yêu cầu trên máy chủ có một phiên bản dữ liệu riêng.
 
 ## Khởi tạo
 
-Lớp này là tĩnh và khởi tạo tự động khi tải trang — đọc chuỗi hash URL hiện tại.
+Lớp này là tĩnh và khởi tạo tự động khi truy cập lần đầu.
 
 ```javascript
 // URL: https://myapp.com/#page=2;filter=active
@@ -28,11 +31,19 @@ const filter = Hash.get('filter') // 'active' (string)
 
 ## Phương thức
 
-- `get<T>(name: string, defaultValue?: T | (() => T)): T` — Trả về giá trị của biến hash. Nếu không có giá trị, nó được thiết lập qua `defaultValue` (có thể là hàm).
-- `set<T>(name: string, callback: T | (() => T)): void` — Thiết lập giá trị của biến và cập nhật URL hash. Nếu giá trị không thay đổi, không có cập nhật nào xảy ra.
-- `addWatch<T>(name: string, callback: (value: T) => void): void` — Đăng ký theo dõi thay đổi của một biến hash cụ thể.
-- `removeWatch<T>(name: string, callback: (value: T) => void): void` — Hủy đăng ký theo dõi thay đổi của một biến.
-- `reload(): void` — Đọc URL hash hiện tại và đồng bộ hóa với trạng thái nội bộ.
+### Phiên bản
+- `static getItem(): HashInstance` — Trả về phiên bản `HashInstance` hiện tại (được cách ly cho yêu cầu hiện tại).
+
+### Đọc и Ghi
+- `static get<T>(name: string, defaultValue?: T | (() => T)): T` — Trả về giá trị của biến hash.
+- `static set<T>(name: string, callback: T | (() => T)): void` — Thiết lập giá trị của biến и cập nhật URL hash.
+
+### Theo dõi (Watchers)
+- `static addWatch<T>(name: string, callback: (value: T) => void): void` — Đăng ký theo dõi thay đổi của một biến hash cụ thể.
+- `static removeWatch<T>(name: string, callback: (value: T) => void): void` — Hủy đăng ký theo dõi thay đổi của một biến.
+
+### Quản lý
+- `static reload(): void` — Ép buộc đồng bộ hóa trạng thái với URL hash hiện tại.
 
 ## Ví dụ
 

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

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Classes/HashInstance - URL Hash Instance'/>
+
+# HashInstance Class
+
+`HashInstance` is the core class that implements the logic for managing data in the URL hash. It provides state storage, mechanisms for subscribing to changes, and synchronization with the browser API.
+
+You can use this class directly if you need isolated hash management separate from the global `Hash` state.
+
+## Key Features
+
+- **Isolated State** — Stores its own set of hash variables.
+- **Chainable API** — Most methods return `this`, allowing for concise code.
+- **Automatic Synchronization** — Upon initialization, it reads data from the URL and subscribes to the `hashchange` event.
+- **SSR Compatibility** — Works safely in server-side environments using stubs for DOM APIs.
+
+## Initialization
+
+To create an instance, use the `HashInstance()` constructor.
+
+```typescript
+import { HashInstance } from '@dxtmisha/functional-basic'
+
+const myHash = new HashInstance()
+```
+
+## Methods
+
+### Reading and Writing
+- `get<T>(name: string, defaultValue?: T | (() => T)): T` — Returns the value of a variable. If it doesn't exist, sets `defaultValue` and returns it.
+- `set<T>(name: string, callback: T | (() => T)): this` — Updates the variable's value and synchronizes the URL.
+
+### Watchers
+- `addWatch<T>(name: string, callback: (value: T) => void): this` — Adds a handler for variable changes.
+- `removeWatch<T>(name: string, callback: (value: T) => void): this` — Removes a handler.
+
+### Management
+- `reload(): this` — Refreshes the internal state from the current URL hash.
+
+## Examples
+
+### Using an Isolated Instance
+```typescript
+const searchHash = new HashInstance()
+
+// Subscribe
+searchHash.addWatch('query', (q) => {
+  console.log('Search:', q)
+})
+
+// Set value (will update URL)
+searchHash.set('query', 'smartphones')
+```

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

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Classes/HashInstance - Экземпляр URL Hash'/>
+
+# Класс HashInstance
+
+`HashInstance` — это основной класс, реализующий логику управления данными в URL-хэше. Он обеспечивает хранение состояния, механизмы подписки на изменения и синхронизацию с браузерным API.
+
+Вы можете использовать этот класс напрямую, если вам требуется изолированное управление хэшем, отличное от глобального состояния `Hash`.
+
+## Ключевые особенности
+
+- **Изолированное состояние** — Хранит свой набор переменных хэша.
+- **Поддержка цепочки вызовов** — Большинство методов возвращают `this`, позволяя писать компактный код.
+- **Автоматическая синхронизация** — При инициализации считывает данные из URL и подписывается на событие `hashchange`.
+- **SSR-совместимость** — Безопасно работает в серверном окружении, используя заглушки для DOM API.
+
+## Инициализация
+
+Для создания экземпляра используйте конструктор `HashInstance()`.
+
+```typescript
+import { HashInstance } from '@dxtmisha/functional-basic'
+
+const myHash = new HashInstance()
+```
+
+## Методы
+
+### Чтение и запись
+- `get<T>(name: string, defaultValue?: T | (() => T)): T` — Возвращает значение переменной. Если её нет, устанавливает `defaultValue` и возвращает его.
+- `set<T>(name: string, callback: T | (() => T)): this` — Обновляет значение переменной и синхронизирует URL.
+
+### Наблюдение (Watchers)
+- `addWatch<T>(name: string, callback: (value: T) => void): this` — Добавляет обработчик изменения переменной.
+- `removeWatch<T>(name: string, callback: (value: T) => void): this` — Удаляет обработчик.
+
+### Управление
+- `reload(): this` — Обновляет внутреннее состояние из текущего URL-хэша.
+
+## Примеры
+
+### Использование изолированного экземпляра
+```typescript
+const searchHash = new HashInstance()
+
+// Подписка
+searchHash.addWatch('query', (q) => {
+  console.log('Поиск:', q)
+})
+
+// Установка значения (обновит URL)
+searchHash.set('query', 'smartphones')
+```

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

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Classes/HashInstance - Phiên bản URL Hash'/>
+
+# Lớp HashInstance
+
+`HashInstance` là lớp cốt lõi triển khai logic quản lý dữ liệu trong URL hash. Nó cung cấp khả năng lưu trữ trạng thái, các cơ chế để đăng ký theo dõi thay đổi và đồng bộ hóa với browser API.
+
+Bạn có thể sử dụng lớp này trực tiếp nếu cần quản lý hash riêng biệt, tách rời khỏi trạng thái `Hash` toàn cục.
+
+## Tính năng chính
+
+- **Trạng thái biệt lập** — Lưu trữ bộ biến hash riêng của nó.
+- **Chainable API** — Hầu hết các phương thức trả về `this`, cho phép viết mã ngắn gọn.
+- **Đồng bộ hóa tự động** — Khi khởi tạo, nó đọc dữ liệu từ URL và đăng ký sự kiện `hashchange`.
+- **Tương thích SSR** — Hoạt động an toàn trong môi trường máy chủ bằng cách sử dụng các bản giả cho DOM API.
+
+## Khởi tạo
+
+Để tạo một phiên bản, hãy sử dụng hàm khởi tạo `HashInstance()`.
+
+```typescript
+import { HashInstance } from '@dxtmisha/functional-basic'
+
+const myHash = new HashInstance()
+```
+
+## Phương thức
+
+### Đọc và Ghi
+- `get<T>(name: string, defaultValue?: T | (() => T)): T` — Trả về giá trị của một biến. Nếu nó không tồn tại, thiết lập `defaultValue` và trả về nó.
+- `set<T>(name: string, callback: T | (() => T)): this` — Cập nhật giá trị của biến và đồng bộ hóa URL.
+
+### Theo dõi (Watchers)
+- `addWatch<T>(name: string, callback: (value: T) => void): this` — Thêm bộ xử lý cho các thay đổi của biến.
+- `removeWatch<T>(name: string, callback: (value: T) => void): this` — Xóa bộ xử lý.
+
+### Quản lý
+- `reload(): this` — Làm mới trạng thái nội bộ từ URL hash hiện tại.
+
+## Ví dụ
+
+### Sử dụng một phiên bản biệt lập
+```typescript
+const searchHash = new HashInstance()
+
+// Đăng ký theo dõi
+searchHash.addWatch('query', (q) => {
+  console.log('Tìm kiếm:', q)
+})
+
+// Thiết lập giá trị (sẽ cập nhật URL)
+searchHash.set('query', 'smartphones')
+```

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

@@ -0,0 +1,78 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Classes/MetaStatic - Meta Tags Management (Static)'/>
+
+# Class MetaStatic
+
+The `MetaStatic` class is a **static entry point** for managing page meta tags, Open Graph (OG), and Twitter Card data. It acts as a static wrapper around a globally managed `Meta` instance, providing a clean singleton interface for SEO and social sharing management.
+
+## Key Features
+
+- **Static Interface** — Manage page titles, descriptions, and more without manual instantiation.
+- **Unified Management** — Automatically syncs titles and other information across standard meta, OG, and Twitter.
+- **SSR Isolation** — Uses `ServerStorage` to handle instance isolation during server-side rendering.
+- **Fluent API** — Support for method chaining in setter methods.
+
+## Methods
+
+### Access
+
+- `getItem(): Meta` — Returns the underlying `Meta` instance.
+- `getOg(): MetaOg` — Gets the MetaOg instance for advanced Open Graph operations.
+- `getTwitter(): MetaTwitter` — Gets the MetaTwitter instance for advanced Twitter Card operations.
+
+### Getters
+
+- `getTitle(): string` — Gets the current page title (without suffix).
+- `getDescription(): string` — Gets the current description meta tag.
+- `getKeywords(): string` — Gets the current keywords.
+- `getImage(): string` — Gets the image URL (from OG settings).
+- `getCanonical(): string` — Gets the canonical URL.
+- `getRobots(): MetaRobots` — Gets the current robots directive.
+- `getAuthor(): string` — Gets the author name.
+- `getSiteName(): string` — Gets the site name (from OG settings).
+- `getLocale(): string` — Gets the locale (from OG settings).
+
+### Setters
+
+All setter methods return `typeof MetaStatic` to support method chaining.
+
+- `setTitle(title: string): typeof MetaStatic` — Sets the page title and updates OG/Twitter titles.
+- `setDescription(description: string): typeof MetaStatic` — Sets the description meta tag.
+- `setKeywords(keywords: string | string[]): typeof MetaStatic` — Sets the keywords (string or array).
+- `setImage(image: string): typeof MetaStatic` — Sets the image for OG and Twitter.
+- `setCanonical(canonical: string): typeof MetaStatic` — Sets the canonical URL and updates OG/Twitter URLs.
+- `setRobots(robots: MetaRobots): typeof MetaStatic` — Sets the robots directive.
+- `setAuthor(author: string): typeof MetaStatic` — Sets the author meta tag.
+- `setSiteName(siteName: string): typeof MetaStatic` — Sets the site name for OG and Twitter.
+- `setLocale(locale: string): typeof MetaStatic` — Sets the locale for Open Graph.
+- `setSuffix(suffix?: string): typeof MetaStatic` — Sets a suffix (e.g., " | My Site") appended to titles.
+
+### Output
+
+- `html(): string` — Generates a complete string of HTML meta tags for all managed properties.
+
+## Architecture
+
+`MetaStatic` works as a **static proxy**. All calls are forwarded to an internal `Meta` instance managed via `ServerStorage`.
+
+### Request Isolation (SSR)
+
+By using `ServerStorage`, `MetaStatic` ensures that during Server-Side Rendering (SSR), meta information for one request does not leak into another. Each request gets its own isolated context.
+
+### Examples
+
+```typescript
+import { MetaStatic } from '@dxtmisha/functional-basic';
+
+MetaStatic
+  .setSuffix('My Online Store')
+  .setTitle('Summer Collection')
+  .setDescription('Explore our new arrivals.')
+  .setImage('https://example.com/cover.jpg')
+  .setLocale('en_US');
+
+console.log(MetaStatic.getTitle()); // "Summer Collection"
+document.title; // "Summer Collection - My Online Store"
+```
+