@dxtmisha/wiki 0.39.7 → 0.56.0

package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.ru.mdx

@@ -1,28 +1,31 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/ru/functional-basic/Functions/executeFunction - Выполнение функции или возврат значения'/>
+<Meta title='@dxtmisha/ru/functional-basic/Functions/executeFunction - Выполнить функцию или вернуть значение'/>
 
 # `executeFunction`
 
-Утилита, которая проверяет переданный аргумент. Если аргумент является функцией, он выполняется, и функция возвращает результат этого выполнения. В противном случае, переданный аргумент возвращается как есть (без изменений).
+Универсальная утилита для обработки аргументов, которые могут быть как статическим значением, так и функцией. Если переданный аргумент является функцией, `executeFunction` выполняет его с указанными аргументами и возвращает результат. В противном случае возвращается сам аргумент.
 
-Это полезно для параметров, которые могут быть как статическим значением, так и функцией, вычисляющей это значение по требованию (например, для ленивых вычислений или значений по умолчанию).
+Этот паттерн крайне эффективен для реализации «ленивых» вычислений, динамических значений по умолчанию или свойств конфигурации, которые могут быть как фиксированными, так и вычисляемыми.
 
 **Параметры:**
-- `callback: T | FunctionArgs<any, T>` — Значение любого типа или функция, возвращающая значение типа `T`.
+- `callback: T | ((...args: any[]) => T)` — Значение для обработки. Может быть литералом или функцией, возвращающей тип `T`.
+- `...args: any[]` (опционально) — Аргументы, которые будут переданы в функцию, если `callback` является вызываемым.
 
 **Возвращает:**
-`T` — Результат выполнения функции или переданное значение.
+`T` — Результат выполнения функции или само исходное значение.
 
 ```typescript
 import { executeFunction } from '@dxtmisha/functional-basic'
 
-// Передаем статическое значение
+// 1. Обработка статического значения
 console.log(executeFunction('Привет')) // 'Привет'
 
-// Передаем функцию
-const lazyValue = () => {
-  return 'Загружено лениво'
-}
-console.log(executeFunction(lazyValue)) // 'Загружено лениво'
+// 2. Динамическое выполнение
+const getLabel = (prefix: string) => `${prefix}: Текст`
+console.log(executeFunction(getLabel, 'Админ')) // 'Админ: Текст'
+
+// 3. Гибкая логика вызова
+const value = Math.random() > 0.5 ? 'Статика' : () => 'Вычислено'
+console.log(executeFunction(value)) // 'Статика' или 'Вычислено'
 ```

package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.vi.mdx

@@ -4,12 +4,13 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 # `executeFunction`
 
-Tiện ích kiểm tra đối số được cung cấp. Nếu đối số đó là một hàm, nó sẽ thực thi hàm và trả về kết quả của hàm đó. Trong trường hợp ngược lại, nó đơn giản trả về đối số đầu vào (giữ nguyên).
+Một tiện ích linh hoạt được thiết kế để xử lý các đối số có thể là giá trị tĩnh hoặc hàm. Nếu đối số được cung cấp là một hàm, `executeFunction` sẽ gọi hàm đó với các đối số đã chỉ định và trả về kết quả. Nếu không, nó sẽ trả về chính đối số đó.
 
-Điều này rất hữu ích cho các tham số có thể linh hoạt chấp nhận một giá trị tĩnh hoặc một hàm tính toán giá trị đó theo yêu cầu (ví dụ như khởi tạo chậm/lazy evaluation hoặc giá trị mặc định động).
+Mô hình này rất hiệu quả để triển khai tính toán lười biếng (lazy evaluation), các giá trị mặc định động hoặc các thuộc tính cấu hình có thể cố định hoặc được tính toán.
 
 **Tham số:**
-- `callback: T | FunctionArgs<any, T>` — Giá trị của bất kỳ loại nào, hoặc một hàm trả về giá trị kiểu `T`.
+- `callback: T | ((...args: any[]) => T)` — Giá trị cần xử lý. Có thể là một giá trị cụ thể hoặc một hàm trả về kiểu `T`.
+- `...args: any[]` (tùy chọn) — Các đối số được truyền vào hàm nếu `callback` có thể gọi được.
 
 **Trả về:**
 `T` — Kết quả của việc thực thi hàm hoặc chính giá trị ban đầu.
@@ -17,12 +18,14 @@ Tiện ích kiểm tra đối số được cung cấp. Nếu đối số đó l
 ```typescript
 import { executeFunction } from '@dxtmisha/functional-basic'
 
-// Truyền một giá trị tĩnh
+// 1. Xử lý giá trị tĩnh
 console.log(executeFunction('Xin chào')) // 'Xin chào'
 
-// Truyền một hàm
-const lazyValue = () => {
-  return 'Được tải lazy'
-}
-console.log(executeFunction(lazyValue)) // 'Được tải lazy'
+// 2. Thực thi động
+const getLabel = (prefix: string) => `${prefix}: Nhãn động`
+console.log(executeFunction(getLabel, 'Admin')) // 'Admin: Nhãn động'
+
+// 3. Logic điều kiện trong cuộc gọi
+const value = Math.random() > 0.5 ? 'Tĩnh' : () => 'Đã tính toán'
+console.log(executeFunction(value)) // 'Tĩnh' hoặc 'Đã tính toán'
 ```

package/src/media/functional/functional-basic/functions/executePromise/executePromise.en.mdx

@@ -4,29 +4,30 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 # `executePromise`
 
-A utility that safely executes a function and/or awaits the resolution of an asynchronous result (Promise).
+A robust utility for safely executing and awaiting results from flexible sources. It handles synchronous values, Promises, and functions (both synchronous and asynchronous) by ensuring the final result is always resolved and returned as a Promise.
 
-Under the hood, it uses the `executeFunction` utility. If passed a function returning a Promise, `executePromise` executes it and waits for the `Promise` to resolve. If a synchronous value or a regular function returning a synchronous value is passed, the utility immediately returns that result.
+Under the hood, it leverages `executeFunction` to resolve callables and then ensures that if the result is a `Promise`, it is properly awaited.
 
 **Parameters:**
-- `callback: (() => Promise<T>) | (() => T) | T` — A value, a `Promise`, or a function capable of returning a `Promise` or a plain value.
+- `callback: ((...args: any[]) => Promise<T>) | ((...args: any[]) => T) | T` — The source to execute or resolve.
+- `...args: any[]` (optional) — Arguments to pass to the function if `callback` is callable.
 
 **Returns:**
-`Promise<T>` — A promise resolving to the provided or computed value.
+`Promise<T>` — A promise that resolves to the final computed or provided value.
 
 ```typescript
 import { executePromise } from '@dxtmisha/functional-basic'
 
-// With an async function
-const fetchData = async () => {
-  return await fetch('/api/data').then(res => res.json())
+// 1. Awaiting an async function
+const fetchData = async (id: number) => {
+  return await fetch(`/api/user/${id}`).then(res => res.json())
 }
-const result1 = await executePromise(fetchData)
+const user = await executePromise(fetchData, 123)
 
-// With a synchronous function
-const staticData = () => 'Sync data'
-const result2 = await executePromise(staticData)
+// 2. Handling a synchronous function
+const getName = () => 'John Doe'
+const name = await executePromise(getName) // returns Promise resolving to 'John Doe'
 
-// With a static value
-const result3 = await executePromise('Data')
+// 3. Resolving a static value
+const result = await executePromise('Immediate Data')
 ```

package/src/media/functional/functional-basic/functions/executePromise/executePromise.ru.mdx

@@ -1,32 +1,33 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/ru/functional-basic/Functions/executePromise - Выполнение Promise или функции'/>
+<Meta title='@dxtmisha/ru/functional-basic/Functions/executePromise - Выполнить Promise или функцию'/>
 
 # `executePromise`
 
-Утилита, которая безопасно выполняет функцию и/или дожидается разрешения асинхронного результата (Promise).
+Надежная утилита для безопасного выполнения и ожидания результатов из различных источников. Она обрабатывает синхронные значения, промисы (Promises) и функции (как синхронные, так и асинхронные), гарантируя, что конечный результат всегда будет разрешен и возвращен в виде промиса.
 
-Внутри используется функция `executeFunction`. Если передан аргумент в виде функции возвращающей промис, `executePromise` выполнит эту функцию и дождётся выполнения `Promise`. Если будет передано синхронное значение или обычная функция, возвращающая синхронное значение, утилита сразу вернёт этот результат.
+Внутренне она использует `executeFunction` для вызова функций, а затем проверяет, является ли результат промисом, чтобы дождаться его завершения.
 
 **Параметры:**
-- `callback: (() => Promise<T>) | (() => T) | T` — Значение, `Promise` или функция, способная вернуть `Promise` или обычное значение.
+- `callback: ((...args: any[]) => Promise<T>) | ((...args: any[]) => T) | T` — Источник для выполнения или разрешения.
+- `...args: any[]` (опционально) — Аргументы, которые будут переданы в функцию, если `callback` является вызываемым.
 
 **Возвращает:**
-`Promise<T>` — Промис, разрешающийся в переданное или вычисленное значение.
+`Promise<T>` — Промис, разрешающийся финальным вычисленным или предоставленным значением.
 
 ```typescript
 import { executePromise } from '@dxtmisha/functional-basic'
 
-// С асинхронной функцией
-const fetchData = async () => {
-  return await fetch('/api/data').then(res => res.json())
+// 1. Ожидание асинхронной функции
+const fetchData = async (id: number) => {
+  return await fetch(`/api/user/${id}`).then(res => res.json())
 }
-const result1 = await executePromise(fetchData)
+const user = await executePromise(fetchData, 123)
 
-// С обычной функцией
-const staticData = () => 'Синхронные данные'
-const result2 = await executePromise(staticData)
+// 2. Обработка синхронной функции
+const getName = () => 'Иван Иванов'
+const name = await executePromise(getName) // возвращает Promise, разрешающийся в 'Иван Иванов'
 
-// Со статическим значением
-const result3 = await executePromise('Данные')
+// 3. Разрешение статического значения
+const result = await executePromise('Мгновенные данные')
 ```

package/src/media/functional/functional-basic/functions/executePromise/executePromise.vi.mdx

@@ -4,29 +4,30 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 # `executePromise`
 
-Một tiện ích thực thi an toàn một hàm và/hoặc chờ đợi kết quả bất đồng bộ (Promise) được hoàn thành.
+Một tiện ích mạnh mẽ để thực thi và chờ đợi kết quả từ các nguồn linh hoạt một cách an toàn. Nó xử lý các giá trị đồng bộ, Promise và các hàm (cả đồng bộ và bất đồng bộ) bằng cách đảm bảo kết quả cuối cùng luôn được giải quyết và trả về dưới dạng Promise.
 
-Bản chất bên trong, nó sử dụng tiện ích `executeFunction`. Nếu truyền vào một hàm trả về một Promise, `executePromise` sẽ thực thi hàm đó và đợi `Promise` hoàn thành. Nếu truyền vào một giá trị đồng bộ hoặc một hàm thông thường trả về giá trị đồng bộ, tiện ích sẽ trả về ngay kết quả đó.
+Bên dưới, nó tận dụng `executeFunction` để thực thi các hàm và sau đó đảm bảo rằng nếu kết quả là một `Promise`, nó sẽ được chờ đợi (await) đúng cách.
 
 **Tham số:**
-- `callback: (() => Promise<T>) | (() => T) | T` — Một giá trị, một `Promise`, hoặc một hàm có thể trả về một `Promise` hoặc một giá trị thông thường.
+- `callback: ((...args: any[]) => Promise<T>) | ((...args: any[]) => T) | T` — Nguồn để thực thi hoặc giải quyết.
+- `...args: any[]` (tùy chọn) — Các đối số được truyền vào hàm nếu `callback` có thể gọi được.
 
 **Trả về:**
-`Promise<T>` — Một promise sẽ được hoàn thành với giá trị được cung cấp hoặc được tính toán.
+`Promise<T>` — Một promise giải quyết thành giá trị cuối cùng được tính toán hoặc được cung cấp.
 
 ```typescript
 import { executePromise } from '@dxtmisha/functional-basic'
 
-// Với hàm async
-const fetchData = async () => {
-  return await fetch('/api/data').then(res => res.json())
+// 1. Chờ đợi một hàm bất đồng bộ
+const fetchData = async (id: number) => {
+  return await fetch(`/api/user/${id}`).then(res => res.json())
 }
-const result1 = await executePromise(fetchData)
+const user = await executePromise(fetchData, 123)
 
-// Với hàm đồng bộ
-const staticData = () => 'Dữ liệu đồng bộ'
-const result2 = await executePromise(staticData)
+// 2. Xử lý một hàm đồng bộ
+const getName = () => 'John Doe'
+const name = await executePromise(getName) // trả về Promise giải quyết thành 'John Doe'
 
-// Với giá trị tĩnh
-const result3 = await executePromise('Dữ liệu')
+// 3. Giải quyết một giá trị tĩnh
+const result = await executePromise('Dữ liệu tức thời')
 ```

package/src/media/functional/functional-basic/functions/forEach/forEach.en.mdx

@@ -19,7 +19,7 @@ The function performs the specified function once for each element in the object
 The function is a universal tool for iterating over various data structures and collecting results into an array.
 
 **Features:**
-- **Type Support** — works with `Array`, `Map`, and standard `Object`.
+- **Type Support** — works with `Array`, `Map`, `Set`, and standard `Object`.
 - **Result Collection** — unlike the standard `forEach`, this function collects the values returned from the `callback` into a new array.
 - **Undefined Filtering** — by default, all `undefined` values (e.g., if the callback returned nothing for an element) are filtered out of the resulting array.
 - **saveUndefined Parameter** — if `true` is passed as the third argument, the array will preserve all results, including `undefined`.

package/src/media/functional/functional-basic/functions/forEach/forEach.ru.mdx

@@ -19,7 +19,7 @@ import { Meta } from '@storybook/addon-docs/blocks'
 Функция является универсальным инструментом для перебора различных структур данных и сбора результатов в массив.
 
 **Особенности:**
-- **Поддержка типов** — работает с `Array`, `Map` и обычными объектами (`Object`).
+- **Поддержка типов** — работает с `Array`, `Map`, `Set` и обычными объектами (`Object`).
 - **Сбор результатов** — в отличие от стандартного `forEach`, эта функция собирает значения, возвращаемые из `callback`, в новый массив.
 - **Фильтрация undefined** — по умолчанию все значения `undefined` (например, если callback ничего не вернул для элемента) отфильтровываются из итогового массива.
 - **Параметр saveUndefined** — если передать `true` третьим аргументом, массив сохранит все результаты, включая `undefined`.

package/src/media/functional/functional-basic/functions/forEach/forEach.vi.mdx

@@ -19,7 +19,7 @@ Hàm thực hiện chức năng được chỉ định một lần cho mỗi ph
 Hàm này là một công cụ vạn năng để lặp qua các cấu trúc dữ liệu khác nhau và thu thập kết quả vào một mảng.
 
 **Tính năng:**
-- **Hỗ trợ kiểu dữ liệu** — hoạt động với `Array`, `Map` và các đối tượng thông thường (`Object`).
+- **Hỗ trợ kiểu dữ liệu** — hoạt động với `Array`, `Map`, `Set` và các đối tượng thông thường (`Object`).
 - **Thu thập kết quả** — khác với `forEach` tiêu chuẩn, hàm này thu thập các giá trị được trả về từ `callback` vào một mảng mới.
 - **Lọc undefined** — theo mặc định, tất cả các giá trị `undefined` (ví dụ: nếu callback không trả về gì cho một phần tử) sẽ bị lọc bỏ khỏi mảng kết quả.
 - **Tham số saveUndefined** — nếu truyền `true` làm đối số thứ ba, mảng sẽ giữ lại tất cả các kết quả, bao gồm cả `undefined`.

package/src/media/functional/functional-basic/functions/frame/frame.en.mdx

@@ -6,12 +6,15 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 A utility that cyclically calls `requestAnimationFrame` to perform frame-by-frame animation in the browser.
 
-It's useful for creating smooth animations because the browser automatically optimizes the frame rate (typically 60 FPS) and pauses the animation when the tab is inactive. In non-DOM environments (such as SSR), `requestAnimationFrame` is not used, and the function executes the callback synchronously to prevent crashing.
+It's useful for creating smooth animations because the browser automatically optimizes the frame rate (typically 60 FPS) and pauses the animation when the tab is inactive.
+
+**SSR Behavior:**
+In non-DOM environments (such as SSR), `requestAnimationFrame` is not used. The function executes the `callback` once synchronously and immediately calls `end` (the loop via `next` is not started) to prevent stack overflow and thread blocking on the server.
 
 **Parameters:**
-- `callback: () => void` — The function to call when it's time to update your animation for the repaint.
-- `next?: () => boolean` — A condition function. If it returns `true`, the animation loop continues. If `false`, the loop stops.
-- `end?: () => void` — A callback function that is executed once the animation loop ends (when `next` returns `false`).
+- `callback: () => void` — The function to call to update your animation.
+- `next?: () => boolean` — A condition function. If it returns `true` (only in browser), the animation loop continues.
+- `end?: () => void` — A callback function that is executed once the animation loop ends.
 
 **Returns:**
 `void`

package/src/media/functional/functional-basic/functions/frame/frame.ru.mdx

@@ -6,12 +6,15 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 Утилита, которая циклически вызывает `requestAnimationFrame` для выполнения покадровой анимации в браузере.
 
-Она полезна для создания плавных анимаций, поскольку браузер самостоятельно оптимизирует частоту кадров (обычно 60 FPS) и не рисует анимацию, когда вкладка неактивна. В средах без DOM (например, SSR) `requestAnimationFrame` не используется, и функция просто запускает коллбэк синхронно.
+Она полезна для создания плавных анимаций, поскольку браузер самостоятельно оптимизирует частоту кадров (обычно 60 FPS) и не рисует анимацию, когда вкладка неактивна.
+
+**SSR поведение:**
+В средах без DOM (например, SSR) `requestAnimationFrame` не используется. Функция выполняет `callback` один раз синхронно и сразу вызывает `end` (цикл через `next` не запускается), чтобы предотвратить переполнение стека и блокировку потока на сервере.
 
 **Параметры:**
 - `callback: () => void` — Функция, которая отрисовывает или обновляет анимацию на каждом кадре.
-- `next?: () => boolean` — Функция-условие. Если она возвращает `true`, анимация продолжится в следующем кадре. Если `false` — цикл прерывается.
-- `end?: () => void` — Функция, которая будет вызвана один раз, когда `next` вернёт `false` (цикл анимации остановлен).
+- `next?: () => boolean` — Функция-условие. Если она возвращает `true` (только в браузере), анимация продолжится в следующем кадре.
+- `end?: () => void` — Функция, которая будет вызвана один раз, когда цикл анимации завершен.
 
 **Возвращает:**
 `void`

package/src/media/functional/functional-basic/functions/frame/frame.vi.mdx

@@ -6,12 +6,15 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 Tiện ích này sẽ gọi vòng lặp `requestAnimationFrame` để thực hiện hoạt ảnh theo từng khung hình (frame-by-frame) trong trình duyệt.
 
-Trình duyệt tự động tối ưu hóa tốc độ khung hình (thường là 60 FPS) và dừng hoạt ảnh khi tab không hoạt động, giúp hiển thị mượt mà. Trong các môi trường không có DOM (chẳng hạn như SSR), `requestAnimationFrame` sẽ không được sử dụng và hàm chỉ thực thi lệnh callback một lần đồng bộ.
+Trình duyệt tự động tối ưu hóa tốc độ khung hình (thường là 60 FPS) và dừng hoạt ảnh khi tab không hoạt động, giúp hiển thị mượt mà.
+
+**Hành vi trong SSR:**
+Trong các môi trường không có DOM (chẳng hạn như SSR), `requestAnimationFrame` sẽ không được sử dụng. Hàm thực thi `callback` một lần đồng bộ và gọi ngay lập tức hàm `end` (vòng lặp qua `next` không được bắt đầu) để ngăn chặn tràn ngăn xếp (stack overflow) và chặn luồng trên máy chủ (server thread blocking).
 
 **Tham số:**
-- `callback: () => void` — Hàm được gọi khi đến thời điểm cập nhật hoạt ảnh cho lần vẽ lại tiếp theo.
-- `next?: () => boolean` — Hàm điều kiện. Nếu trả về `true`, vòng lặp hoạt ảnh tiếp tục. Nếu trả về `false`, vòng lặp dừng lại.
-- `end?: () => void` — Hàm được thực thi một lần khi vòng lặp hoạt ảnh dừng lại (nghĩa là `next` trả về false).
+- `callback: () => void` — Hàm được gọi để cập nhật hoạt ảnh.
+- `next?: () => boolean` — Hàm điều kiện. Nếu trả về `true` (chỉ trong trình duyệt), vòng lặp hoạt ảnh tiếp tục.
+- `end?: () => void` — Hàm được thực thi một lần khi vòng lặp hoạt ảnh kết thúc.
 
 **Trả về:**
 `void`

package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.en.mdx

@@ -0,0 +1,34 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Functions/getArrayHighlightMatch - Structured highlight matches'/>
+
+# `getArrayHighlightMatch`
+
+A utility for splitting a string into an array of objects for highlighting matches. Each object contains the `text` and a boolean `isMatch` indicating if it matches the search query. This is useful for UI frameworks like Vue or React to render highlighted text without using `v-html`.
+
+**Parameters:**
+- `value: string` — The initial string to process.
+- `search?: string` — The search string (supports space-separated multi-word search).
+
+**Returns:**
+`{ text: string, isMatch: boolean }[]` — An array of text segments with match status.
+
+<Source
+  language='typescript'
+  code={`
+import { getArrayHighlightMatch } from '@dxtmisha/functional-basic'
+
+const result = getArrayHighlightMatch('Hello world', 'hello')
+/*
+[
+  { text: 'Hello', isMatch: true },
+  { text: ' world', isMatch: false }
+]
+*/
+
+// Example in Vue template:
+// <template v-for="item in getArrayHighlightMatch(text, search)">
+//   <span :class="{ 'sys-highlight-match': item.isMatch }">{{ item.text }}</span>
+// </template>
+  `}
+/>

package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.ru.mdx

@@ -0,0 +1,34 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Functions/getArrayHighlightMatch - Структурированное выделение совпадений'/>
+
+# `getArrayHighlightMatch`
+
+Утилита для разделения строки на массив объектов для выделения совпадений. Каждый объект содержит `text` и логическое значение `isMatch`, указывающее, соответствует ли фрагмент поисковому запросу. Это полезно для UI-фреймворков (Vue, React), чтобы отрисовывать подсвеченный текст без использования `v-html`.
+
+**Параметры:**
+- `value: string` — Исходная строка для обработки.
+- `search?: string` — Строка поиска (поддерживает поиск по нескольким словам через пробел).
+
+**Возвращает:**
+`{ text: string, isMatch: boolean }[]` — Массив текстовых сегментов со статусом совпадения.
+
+<Source
+  language='typescript'
+  code={`
+import { getArrayHighlightMatch } from '@dxtmisha/functional-basic'
+
+const result = getArrayHighlightMatch('Привет мир', 'привет')
+/*
+[
+  { text: 'Привет', isMatch: true },
+  { text: ' мир', isMatch: false }
+]
+*/
+
+// Пример в шаблоне Vue:
+// <template v-for="item in getArrayHighlightMatch(text, search)">
+//   <span :class="{ 'sys-highlight-match': item.isMatch }">{{ item.text }}</span>
+// </template>
+  `}
+/>

package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.vi.mdx

@@ -0,0 +1,35 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Functions/getArrayHighlightMatch - Làm nổi bật kết quả khớp dạng cấu trúc'/>
+
+# `getArrayHighlightMatch`
+
+Tiện ích để chia một chuỗi thành một mảng các đối tượng để làm nổi bật các kết quả khớp. Mỗi đối tượng chứa `text` và giá trị boolean `isMatch` cho biết đoạn văn bản đó có khớp với truy vấn tìm kiếm hay không. Điều này rất hữu ích cho các UI framework như Vue hoặc React để hiển thị văn bản được làm nổi bật mà không cần dùng `v-html`.
+
+**Tham số:**
+- `value: string` — Chuỗi ban đầu để xử lý.
+- `search?: string` — Chuỗi tìm kiếm (hỗ trợ tìm kiếm nhiều từ phân tách bằng dấu cách).
+
+**Trả về:**
+`{ text: string, isMatch: boolean }[]` — Một mảng các đoạn văn bản với trạng thái khớp.
+
+<Source
+  language='typescript'
+  code={`
+import { getArrayHighlightMatch } from '@dxtmisha/functional-basic'
+
+const result = getArrayHighlightMatch('Xin chào thế giới', 'chào')
+/*
+[
+  { text: 'Xin ', isMatch: false },
+  { text: 'chào', isMatch: true },
+  { text: ' thế giới', isMatch: false }
+]
+*/
+
+// Ví dụ trong Vue template:
+// <template v-for="item in getArrayHighlightMatch(text, search)">
+//   <span :class="{ 'sys-highlight-match': item.isMatch }">{{ item.text }}</span>
+// </template>
+  `}
+/>

package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.en.mdx

@@ -6,6 +6,8 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 Returns the current date in the specified format. The function is a wrapper around the `Datetime` class and allows you to quickly get a formatted string of the current time.
 
+> **Warning (SSR):** Using this function for rendering in SSR may lead to hydration mismatches because the time or time zone on the server may differ from the time on the client. It is recommended to use this function inside client-side hooks only (e.g., `onMounted` in Vue or `useEffect` in React).
+
 **Parameters:**
 - `format: GeoDate` — type of date format for output (default `'datetime'`). Supports values: `'date'`, `'time'`, `'datetime'`, `'full'`, and others.
 

package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.ru.mdx

@@ -6,6 +6,8 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 Возвращает текущую дату в указанном формате. Функция является оберткой над классом `Datetime` и позволяет быстро получить отформатированную строку текущего времени.
 
+> **Внимание (SSR):** Использование этой функции для отрисовки в SSR может привести к ошибкам гидратации, так как время или часовой пояс сервера могут отличаться от времени на стороне клиента. Рекомендуется использовать эту функцию только внутри хуков, выполняющихся на клиенте (например, `onMounted` в Vue или `useEffect` в React).
+
 **Параметры:**
 - `format: GeoDate` — тип формата даты вывода (по умолчанию `'datetime'`). Поддерживает значения: `'date'`, `'time'`, `'datetime'`, `'full'` и другие.
 

package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.vi.mdx

@@ -6,6 +6,8 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 Trả về ngày hiện tại theo định dạng được chỉ định. Hàm này là một wrapper bao quanh lớp `Datetime` và cho phép bạn nhanh chóng lấy chuỗi thời gian hiện tại đã được định dạng.
 
+> **Cảnh báo (SSR):** Việc sử dụng hàm này để render trong SSR có thể dẫn đến lỗi hydration mismatch vì thời gian hoặc múi giờ trên máy chủ có thể khác với thời gian trên máy khách. Khuyến khích chỉ sử dụng hàm này bên trong các hook phía máy khách (ví dụ: `onMounted` trong Vue hoặc `useEffect` trong React).
+
 **Tham số:**
 - `format: GeoDate` — loại định dạng ngày đầu ra (mặc định là `'datetime'`). Hỗ trợ các giá trị: `'date'`, `'time'`, `'datetime'`, `'full'` và các giá trị khác.
 

package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.en.mdx

@@ -0,0 +1,21 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Functions/getCurrentTime - Get current time'/>
+
+# `getCurrentTime`
+
+Returns the current time in milliseconds.
+
+> **Warning (SSR):** Using this function for rendering in SSR will almost certainly lead to hydration mismatches because the timestamp on the server will differ from the timestamp on the client.
+
+The function is a wrapper around `Date.now()` and allows you to quickly get a timestamp.
+
+**Returns:**
+Current time in milliseconds (number).
+
+```typescript
+import { getCurrentTime } from '@dxtmisha/functional-basic'
+
+const time = getCurrentTime()
+// Result: 1710498600000 (example)
+```

package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.ru.mdx

@@ -0,0 +1,21 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Functions/getCurrentTime - Получение текущего времени'/>
+
+# `getCurrentTime`
+
+Возвращает текущее время в миллисекундах.
+
+> **Внимание (SSR):** Использование этой функции для отрисовки в SSR практически наверняка приведет к ошибкам гидратации, так как временная метка (timestamp) сервера будет отличаться от метки на стороне клиента.
+
+Функция является оберткой над `new Date().getTime()` и позволяет быстро получить временную метку (timestamp).
+
+**Возвращает:**
+Текущее время в миллисекундах (number).
+
+```typescript
+import { getCurrentTime } from '@dxtmisha/functional-basic'
+
+const time = getCurrentTime()
+// Результат: 1710498600000 (пример)
+```

package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.vi.mdx

@@ -0,0 +1,21 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Functions/getCurrentTime - Lấy thời gian hiện tại'/>
+
+# `getCurrentTime`
+
+Trả về thời gian hiện tại tính bằng mili giây.
+
+> **Cảnh báo (SSR):** Việc sử dụng hàm này để render trong SSR gần như chắc chắn sẽ dẫn đến lỗi hydration mismatch vì dấu thời gian (timestamp) trên máy chủ sẽ khác với dấu thời gian trên máy khách.
+
+Hàm này là một wrapper bao quanh `Date.now()` và cho phép bạn nhanh chóng lấy dấu thời gian (timestamp).
+
+**Trả về:**
+Thời gian hiện tại tính bằng mili giây (number).
+
+```typescript
+import { getCurrentTime } from '@dxtmisha/functional-basic'
+
+const time = getCurrentTime()
+// Kết quả: 1710498600000 (ví dụ)
+```

package/src/media/functional/functional-basic/functions/getElementId/getElementId.en.mdx

@@ -23,10 +23,24 @@ const div = document.createElement('div')
 console.log(div.id) // ''
 
 const id = getElementId(div)
-console.log(id) // For example: 'id-123456'
-console.log(div.id) // 'id-123456' (assigned automatically)
+console.log(id) // For example: 'id-100000'
+console.log(div.id) // 'id-100000' (assigned automatically)
 
 // Using an additional selector
 const selector = getElementId(div, ' > span.active')
-console.log(selector) // '#id-123456 > span.active'
+console.log(selector) // '#id-100000 > span.active'
+```
+
+## `initGetElementId`
+
+Initializes the function for use in an SSR environment. This is necessary to ensure synchronization of generated IDs between the server and the client.
+
+When using **Vue 3.5+**, it is recommended to use the built-in `useId()` function.
+
+```typescript
+import { useId } from 'vue'
+import { initGetElementId } from '@dxtmisha/functional-basic'
+
+// Initialization (e.g., in a plugin or root component)
+initGetElementId(() => useId())
 ```

package/src/media/functional/functional-basic/functions/getElementId/getElementId.ru.mdx

@@ -23,10 +23,24 @@ const div = document.createElement('div')
 console.log(div.id) // ''
 
 const id = getElementId(div)
-console.log(id) // Например: 'id-123456'
-console.log(div.id) // 'id-123456' (назначился автоматически)
+console.log(id) // Например: 'id-100000'
+console.log(div.id) // 'id-100000' (назначился автоматически)
 
 // Использование дополнительного селектора
 const selector = getElementId(div, ' > span.active')
-console.log(selector) // '#id-123456 > span.active'
+console.log(selector) // '#id-100000 > span.active'
+```
+
+## `initGetElementId`
+
+Инициализирует функцию для работы в SSR-окружении. Это необходимо для обеспечения синхронности генерируемых ID между сервером и клиентом.
+
+При использовании **Vue 3.5+** рекомендуется использовать встроенную функцию `useId()`.
+
+```typescript
+import { useId } from 'vue'
+import { initGetElementId } from '@dxtmisha/functional-basic'
+
+// Инициализация (например, в плагине или в корневом компоненте)
+initGetElementId(() => useId())
 ```