@intlayer/docs 9.1.3 → 9.3.0

package/docs/uk/formatters.md

@@ -49,37 +49,6 @@ author: aymericzip
 
 <TOC/>
 
-## Огляд
-
-Intlayer надає набір легких хелперів, побудованих поверх рідних API `Intl`, а також кешований обгорток `Intl`, щоб уникнути повторного створення важких форматерів. Ці утиліти повністю враховують локаль і можуть використовуватися з основного пакета `intlayer`.
-
-### Імпорт
-
-```ts
-import {
-  Intl,
-  number,
-  percentage,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-} from "intlayer";
-```
-
-If you are using React, hooks are also available; see `react-intlayer/format`.
-
 ## Cached Intl
 
 The exported `Intl` is a thin, cached wrapper around the global `Intl`. It memoizes instances of `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, and `PluralRules`, which avoids rebuilding the same formatter repeatedly.
@@ -116,51 +85,6 @@ pluralRules.select(1); // "one"
 pluralRules.select(2); // "інше"
 ```
 
-### `Intl.DisplayNames`
-
-Для локалізованих назв мов, регіонів, валют та писемностей:
-
-```ts
-import { Intl } from "intlayer";
-
-const languageNames = new Intl.DisplayNames("en", { type: "language" });
-languageNames.of("fr"); // "французька"
-
-const regionNames = new Intl.DisplayNames("fr", { type: "region" });
-regionNames.of("US"); // "Сполучені Штати"
-```
-
-### `Intl.Collator`
-
-Для порівняння рядків та сортування з урахуванням локалі:
-
-```ts
-import { Intl } from "intlayer";
-
-const collator = new Intl.Collator("de", {
-  sensitivity: "base",
-  numeric: true,
-});
-
-const words = ["äpfel", "zebra", "100", "20"];
-words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
-```
-
-### `Intl.PluralRules`
-
-Для визначення форм множини в різних локалях:
-
-```ts
-import { Intl } from "intlayer";
-
-const pluralRules = new Intl.PluralRules("ar");
-pluralRules.select(0); // "нуль"
-pluralRules.select(1); // "один"
-pluralRules.select(2); // "два"
-pluralRules.select(3); // "кілька"
-pluralRules.select(11); // "багато"
-```
-
 ## Утиліти локалей
 
 ### `getLocaleName(displayLocale, targetLocale?)`
@@ -178,22 +102,6 @@ getLocaleName("de", "es"); // іспанською: "alemán"
 - **displayLocale**: Локаль, для якої потрібно отримати назву
 - **targetLocale**: Локаль, в якій відображається назва (за замовчуванням displayLocale)
 
-### `getLocaleFromPath(inputUrl)`
-
-Витягує сегмент локалі з URL або шляху:
-
-```ts
-import { getLocaleFromPath } from "intlayer";
-
-getLocaleFromPath("/en/dashboard"); // "en"
-getLocaleFromPath("/fr/dashboard"); // "fr"
-getLocaleFromPath("/dashboard"); // "en" (default locale)
-getLocaleFromPath("https://example.com/es/about"); // "es"
-```
-
-- **inputUrl**: Повний рядок URL або шлях (pathname) для обробки
-- **returns**: Виявлена локаль або локаль за замовчуванням, якщо локаль не знайдена
-
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
 Генерує локалізований URL для поточної локалі:
@@ -212,21 +120,6 @@ getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); //
 - **defaultLocale**: Необов'язкова локаль за замовчуванням (за замовчуванням, сконфігурована локаль за замовчуванням)
 - **prefixDefault**: Чи додавати префікс для локалі за замовчуванням (за замовчуванням, сконфігуроване значення)
 
-### `getHTMLTextDir(locale?)`
-
-Повертає напрямок тексту для локалі:
-
-```ts
-import { getHTMLTextDir } from "intlayer";
-
-getHTMLTextDir("en-US"); // повертає "ltr"
-getHTMLTextDir("ar"); // повертає "rtl"
-getHTMLTextDir("he"); // повертає "rtl"
-```
-
-- **locale**: Локаль, для якої потрібно отримати напрямок тексту (за замовчуванням, поточна локаль)
-- **повертає**: `"ltr"`, `"rtl"`, або `"auto"`
-
 ### `getContent(node, nodeProps, locale?)`
 
 Перетворює вузол контенту за допомогою всіх доступних плагінів (translation, enumeration, insertion тощо):
@@ -281,25 +174,6 @@ number("1000000", { locale: "fr" }); // "1 000 000"
 number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
-### `percentage(value, options?)`
-
-Форматує число у рядок відсотків.
-
-Поведінка: значення більше за 1 інтерпретується як повні відсотки та нормалізується (наприклад, `25` → `25%`, `0.25` → `25%`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-Приклади:
-
-```ts
-import { percentage } from "intlayer";
-
-percentage(0.25); // "25%"
-percentage(25); // "25%"
-percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
-```
-
 ### `currency(value, options?)`
 
 Форматує значення як локалізовану валюту. За замовчуванням `USD` з двома знаками після коми.
@@ -317,23 +191,6 @@ currency(1234.5, { currency: "EUR" }); // "€1,234.50"
 currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
-### `date(date, optionsOrPreset?)`
-
-Форматує значення дати/часу за допомогою `Intl.DateTimeFormat`.
-
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` або один із пресетів:
-  - Presets: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
-Приклади:
-
-```ts
-import { date } from "intlayer";
-
-date(new Date(), "short"); // наприклад: "08/02/25, 14:30"
-date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
-```
-
 ### `relativeTime(from, to = new Date(), options?)`
 
 Форматує відносний час між двома моментами за допомогою `Intl.RelativeTimeFormat`.
@@ -375,21 +232,9 @@ units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 к
 units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (залежить від локалі)
 ```
 
-### `compact(value, options?)`
-
-Форматує число з використанням компактної нотації (наприклад, `1.2K`, `1M`).
+## Vanilla JS / Node.js Formatters
 
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (використовує `notation: 'compact'` під капотом)
-
-Приклади:
-
-```ts
-import { compact } from "intlayer";
-
-compact(1200); // результат: "1.2K"
-compact("1000000", { locale: "fr", compactDisplay: "long" }); // результат: "1 million"
-```
+Для контекстів без фреймворку імпортуйте форматери безпосередньо з `intlayer`. Зверніть увагу, що ви повинні передати locale вручну.
 
 ### `list(values, options?)`
 
@@ -410,6 +255,114 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
+### Функції форматування
+
+#### `number(value, options?)`
+
+Форматує числове значення з врахуванням локалі для групування та десяткових знаків.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+number(123456.789); // "123,456.789" (in en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
+```
+
+#### `percentage(value, options?)`
+
+Форматує число як рядок відсотка. Значення більше 1 нормалізуються (наприклад, `25` → `25%`, `0.25` → `25%`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
+```
+
+#### `currency(value, options?)`
+
+Форматує значення як локалізовану валюту. За замовчуванням використовує `USD`.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Common: `currency`, `currencyDisplay` (`"symbol" | "code" | "name"`)
+
+```ts
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+```
+
+#### `date(date, optionsOrPreset?)`
+
+Форматує значення дати/часу.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` або preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+```ts
+date(new Date(), "short"); // наприклад, "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
+
+#### `relativeTime(from, to?, options?)`
+
+Форматує відносний час між двома моментами.
+
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (за замовчуванням `new Date()`)
+- **options**: `{ locale?, unit?, numeric?, style? }`
+
+```ts
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "через 3 дні"
+
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 години тому"
+```
+
+#### `units(value, options?)`
+
+Форматує числове значення з одиницею виміру.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Common: `unit` (e.g., `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+
+```ts
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"
+```
+
+#### `compact(value, options?)`
+
+Форматує число за допомогою компактного запису.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+#### `list(values, options?)`
+
+Форматує масив у локалізований рядок списку.
+
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Поширені: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
+
+```ts
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+```
+
 ## Cached Intl
 
 Експортований `Intl` з `intlayer` — це кешований wrapper навколо глобального `Intl`. Він мемоізує екземпляри форматерів (`NumberFormat`, `DateTimeFormat` тощо), щоб уникнути їхнього повторного створення та поліпшити продуктивність.
@@ -440,11 +393,19 @@ pluralRules.select(2); // "other"
 
 ### Додаткові функції Intl
 
-## Примітки
+#### `Intl.DisplayNames`
 
-- Усі утиліти приймають вхідні значення як `string`; всередині вони приводяться до чисел або дат.
-- Якщо локаль не вказана, за замовчуванням використовується налаштована вами `internationalization.defaultLocale`.
-- Ці утиліти, тонкі обгортки; для просунутого форматування передавайте стандартні опції `Intl`.
+Для локалізованих назв мов, регіонів, валют та письмових систем:
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
 
 #### `Intl.Collator`
 
@@ -491,33 +452,15 @@ getLocaleName("en", "fr"); // "anglais"
 getLocaleName("de", "es"); // "alemán"
 ```
 
-## Точки входу та повторні експорти (`@index.ts`)
-
-Форматери містяться в core-пакеті і реекспортуються з пакетів вищого рівня, щоб зробити імпорти зручними в різних середовищах виконання:
+### `getLocaleLang(locale?)`
 
-Приклади:
+Витягує код мови з рядка локалі:
 
 ```ts
-// Код додатку (рекомендовано)
-import {
-  number,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  Intl,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-} from "intlayer";
+import { getLocaleLang } from "intlayer";
+
+getLocaleLang("en-US"); // "en"
+getLocaleLang("fr-CA"); // "fr"
 ```
 
 ### `getLocaleFromPath(inputUrl)`

package/docs/uk/intlayer_CMS.md

@@ -247,6 +247,158 @@ bun x intlayer dictionary push -d my-first-dictionary-key --env production
 
 Потім ви зможете переглядати та керувати своїм словником у [Intlayer CMS](https://app.intlayer.org/content).
 
+## Програмний доступ за допомогою `@intlayer/api` SDK
+
+Крім CLI і візуального редактора, Intlayer поставляється з типізованим SDK у пакеті [`@intlayer/api`](https://www.npmjs.com/package/@intlayer/api). Це дозволяє вам розглядати CMS як **headless content database**: ви можете отримувати проекти, отримувати словники та безпосередньо змінювати їх з вашого власного додатку, скриптів або CI pipeline.
+
+SDK обробляє автентифікацію за вас. Доки ваші `clientId` і `clientSecret` доступні (у вашій конфігурації Intlayer або середовищі), він автоматично отримує та оновлює OAuth2 access token та підписує кожен запит.
+
+### Установка
+
+```bash packageManager="npm"
+npm install @intlayer/api
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/api
+```
+
+```bash packageManager="bun"
+bun add @intlayer/api
+```
+
+### Як це працює: authenticator + endpoints
+
+SDK розділений на **два окремі імпорти** навмисне, щоб зберегти ваш bundle компактним:
+
+1. `createIntlayerCMS` — створює легкий **authenticator**. Він містить лише облікові дані та керований токен доступу; він нічого не знає про будь-який конкретний домен.
+2. `dictionaryEndpoint`, `projectEndpoint`, … — привʼязки **endpoint** для кожного домену, кожна імпортується з власного підпапки (`@intlayer/api/dictionary`, `@intlayer/api/project`, …). Ви передаєте authenticator потрібному вам endpoint.
+
+Оскільки кожний endpoint імпортується окремо, ваш bundle містить лише домени, які ви насправді використовуєте — імпортування `dictionaryEndpoint` ніколи не потягне за собою project, AI або будь-який інший клієнт домену.
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+// Конфігурація є необов'язковою: якщо її опущено, облікові дані читаються з
+// `@intlayer/config/built`, що розв'язує змінні середовища INTLAYER_CLIENT_ID та
+// INTLAYER_CLIENT_SECRET.
+export const cmsAuthenticator = createIntlayerCMS();
+```
+
+> [!WARNING]
+> Облікові дані CMS (`clientId` / `clientSecret`) надають **доступ до запису** вашого контенту. Завжди створюйте authenticator лише на **серверній стороні** (server actions, route handlers, scripts, CI). Ніколи не імпортуйте його в код на стороні клієнта та не розкривайте ваші облікові дані браузеру.
+
+Якщо ви воліте не покладатися на конфігурацію на етапі збирання, передайте облікові дані явно:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+export const cmsAuthenticator = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    // Необов'язково, для самостійно розміщених backend:
+    // backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+});
+```
+
+> Отримайте свої облікові дані, створивши новий ключ доступу в [Intlayer Dashboard - Projects](https://app.intlayer.org/projects).
+
+### Завантажити проекти
+
+```typescript fileName="projects.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { projectEndpoint } from "@intlayer/api/project";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Список проектів, доступних з вашими облікові даними
+const { data: projects } =
+  await projectEndpoint(cmsAuthenticator).getProjects();
+
+// Читання агрегованих інформацій про локалізацію вибраного проекту
+const { data: insights } =
+  await projectEndpoint(cmsAuthenticator).getProjectInsights();
+```
+
+### Отримання словників
+
+```typescript fileName="read-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Список усіх віддалених словників проекту
+const { data: dictionaries } =
+  await dictionaryEndpoint(cmsAuthenticator).getDictionaries();
+
+// Або отримайте один словник за ключем
+const { data: dictionary } = await dictionaryEndpoint(
+  cmsAuthenticator
+).getDictionary("my-first-dictionary-key");
+```
+
+### Отправка та оновлення словників
+
+Використовуйте CMS як базу даних для запису вмісту назад:
+
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Створення нового словника
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// Upsert пакету словників (створення або оновлення в одному викликі)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// Оновлення існуючого словника
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
+> Порада: повторно використовуйте прив'язану endpoint, щоб уникнути повторень:
+>
+> ```typescript codeFormat="typescript"
+> const dictionary = dictionaryEndpoint(cmsAuthenticator);
+> await dictionary.pushDictionaries([myDictionary]);
+> const { data } = await dictionary.getDictionaries();
+> ```
+
+### Вилучення одного методу
+
+Кожен метод endpoint уже автентифікований та самостійний (він має власну обробку токена), тому ви можете вилучити один і передавати його навколо — наприклад, щоб інжектувати його як залежність:
+
+```typescript fileName="push.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const dictionary = dictionaryEndpoint(createIntlayerCMS());
+
+// Уже автентифіковано — автоматично оновлює токен при кожному виклику
+export const pushDictionaries = dictionary.pushDictionaries;
+
+// Використання
+await pushDictionaries([{ key: "home", content: { title: "Home" } }]);
+```
+
 ## Live Sync
 
 Live Sync дозволяє вашому застосунку відображати зміни контенту з CMS під час виконання. Немає потреби у перебудові або повторному розгортанні. Коли увімкнено, оновлення передаються на сервер Live Sync, який оновлює словники, які читає ваш застосунок.

package/docs/uk/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
-title: "Angular 21 i18n - Повний посібник з перекладу вашого застосунку"
-description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Angular 21. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
+title: "Angular 22 i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Angular 22. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -13,8 +13,8 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-21-template
-applicationShowcase: https://intlayer-angular-21-template.vercel.app/
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-22-template
+applicationShowcase: https://intlayer-angular-22-template.vercel.app/
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -31,7 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Перекладіть ваш вебсайт Angular 21 (Vite) за допомогою Intlayer | Інтернаціоналізація (i18n)
+# Перекладіть ваш вебсайт Angular 22 (Vite) за допомогою Intlayer | Інтернаціоналізація (i18n)
 
 ## Зміст
 
@@ -94,7 +94,7 @@ Intlayer оптимізовано для ідеальної роботи з Angu
   <Tab label="Код" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-22-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - Як інтернаціоналізувати ваш додаток за допомогою Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -105,7 +105,7 @@ Intlayer оптимізовано для ідеальної роботи з Angu
   <Tab label="Демо" value="demo">
 
 <iframe
-  src="https://intlayer-angular-21-template.vercel.app/"
+  src="https://intlayer-angular-22-template.vercel.app/"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -115,7 +115,7 @@ Intlayer оптимізовано для ідеальної роботи з Angu
   </Tab>
 </Tabs>
 
-Перегляньте [Шаблон Додатку](https://github.com/aymericzip/intlayer-angular-21-template) на GitHub.
+Перегляньте [Шаблон Додатку](https://github.com/aymericzip/intlayer-angular-22-template) на GitHub.
 
 <Steps>
 
@@ -203,7 +203,7 @@ export default config;
 
 <Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Angular">
 
-Щоб інтегрувати Intlayer з Angular CLI, вам потрібно використовувати кастомний збирач. У цьому посібнику передбачається, що ви використовуєте Vite/esbuild (за замовчуванням для проєктів Angular 21).
+Щоб інтегрувати Intlayer з Angular CLI, вам потрібно використовувати кастомний збирач. У цьому посібнику передбачається, що ви використовуєте Vite/esbuild (за замовчуванням для проєктів Angular 22).
 
 Спершу змініть ваш `angular.json` для використання користувацького esbuild. Оновіть конфігурації `build` та `serve`:
 

package/docs/uk/intlayer_with_nextjs_14.md

@@ -42,32 +42,7 @@ history:
 author: aymericzip
 ---
 
-# Перекладіть ваш сайт на Next.js 14 та App Router за допомогою Intlayer | Інтернаціоналізація (i18n)
-
-<Tabs defaultTab="code">
-  <Tab label="Код" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-14-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Демонстрація CodeSandbox. Як інтернаціоналізувати ваш додаток за допомогою Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Демо" value="demo">
-
-<iframe
-  src="https://intlayer-next-14-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Демо - intlayer-next-14-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
+# Перекладіть ваш веб-сайт Next.js 14 та App Router за допомогою Intlayer | Інтернаціоналізація (i18n)
 
 ## Зміст