@intlayer/docs 9.4.0 → 9.4.2

package/docs/uk/analytics.md

@@ -103,6 +103,21 @@ export default config;
 
 Якщо ви самостійно розміщуєте (self-host) Intlayer, аналітика автоматично вказує на ваш власний екземпляр, оскільки вона використовує спільний `editor.backendURL`.
 
+### Виклик API з браузера
+
+Той самий токен підтримує невеликий клієнт без облікових даних, тож статичний сайт або SPA може читати вміст свого CMS під час виконання без сервера, без серверної дії (server action) і без жодного секрету в білді:
+
+```ts fileName="content.ts"
+import { createPublicClient } from "@intlayer/api/public";
+
+const client = createPublicClient();
+
+const keys = await client.getDictionaryKeys();
+const [navbar] = await client.getDictionaries(["navbar"]);
+```
+
+Він самостійно автентифікується на основі `editor.clientId`: обмін, кешування та оновлення токена обробляються внутрішньо. Області доступу (scopes) обмежують те, до чого він може дістатися: опублікований контент словників і збір аналітики. Усе інше (публікація словників, читання проєкту, витрачання кредитів ШІ) потребує справжніх облікових даних, а отже, сервера або авторизованого користувача.
+
 ### Як вимкнути
 
 Необов'язковий блок `analytics` налаштовує — або повністю вимикає — збір даних:
@@ -123,17 +138,6 @@ export default config;
 
 Видалення `@intlayer/analytics` має той самий ефект, що й `enabled: false`. Повний перелік полів дивіться в [довіднику з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-## Підтримка фреймворків
-
-Аналітика вбудована у спільний `IntlayerProvider` з `react-intlayer`, тому вона доступна вже сьогодні скрізь, де використовується цей провайдер:
-
-| Фреймворк                                                | Статус                                                                                                     |
-| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| React                                                    | ✅ Доступно                                                                                                |
-| Next.js (`next-intlayer`)                                | ✅ Доступно (через `react-intlayer`)                                                                       |
-| React Native / Expo (`react-native-intlayer`)            | ✅ Доступно (через `react-intlayer`)                                                                       |
-| Vue, Svelte, Angular, Solid, Preact, Lit, Astro, Vanilla | 🚧 Заплановано — той самий клієнт, прив'язки на рівні провайдера за зразком розгортання `@intlayer/editor` |
-
 ## Використання
 
 ### Автоматичне відстеження на рівні провайдера
@@ -145,6 +149,126 @@ export default config;
 - записує `page_view` при кожній зміні локалі,
 - запускає цикл очищення (flush) з інтервалом ~20 с і надсилає всі події, що залишилися, при розмонтуванні / закритті вкладки (через `navigator.sendBeacon`, з відкатом (fallback) на `fetch(..., { keepalive: true })`).
 
+Точка входу відрізняється залежно від фреймворку, але в кожному випадку це те саме місце, яке ви вже використовуєте для налаштування Intlayer, тож додавати нічого не потрібно:
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    `IntlayerProvider` монтує провайдер аналітики внутрішньо.
+
+    ```tsx fileName="App.tsx"
+    import { IntlayerProvider } from "react-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    `next-intlayer` повторно експортує `IntlayerProvider` з React, тому аналітика підключається так само.
+
+    ```tsx fileName="app/[locale]/layout.tsx"
+    import { IntlayerProvider } from "next-intlayer";
+
+    const LocaleLayout = ({ children }) => (
+      <IntlayerProvider>{children}</IntlayerProvider>
+    );
+
+    export default LocaleLayout;
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    Плагін `intlayer` реєструє хуки аналітики в життєвому циклі кореневого компонента.
+
+    ```javascript fileName="main.js"
+    import { createApp } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+
+    app.mount("#app");
+    ```
+
+    > У випадку з Nuxt пакет `nuxt-intlayer` встановлює плагін за вас: робити нічого не потрібно.
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    `setupIntlayer()` запускає аналітику з компонента, який налаштовує Intlayer.
+
+    ```svelte fileName="src/routes/[[locale=locale]]/+layout.svelte"
+    <script lang="ts">
+      import { setupIntlayer } from "svelte-intlayer";
+      import type { Snippet } from "svelte";
+
+      let { children, data }: { children: Snippet, data: LayoutData } = $props();
+
+      $effect(() => {
+        setupIntlayer(data.locale);
+      });
+    </script>
+
+    {@render children()}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    `IntlayerProvider` монтує провайдер аналітики внутрішньо.
+
+    ```tsx fileName="app.tsx"
+    import { IntlayerProvider } from "preact-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    `IntlayerProvider` монтує провайдер аналітики відкладено (lazy), тож цей чанк не потрапляє в критичний шлях завантаження.
+
+    ```tsx fileName="App.tsx"
+    import { IntlayerProvider } from "solid-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    `provideIntlayer()` вже включає `provideIntlayerAnalytics()`.
+
+    ```ts fileName="app.config.ts"
+    import { provideIntlayer } from "angular-intlayer";
+    import type { ApplicationConfig } from "@angular/core";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [provideIntlayer()],
+    };
+    ```
+
+    > Використовуйте `provideIntlayerAnalytics()` окремо лише якщо ви керуєте провайдерами індивідуально.
+
+  </Tab>
+</Tabs>
+
 ### Автоматичне відстеження на рівні вузла
 
 Щоразу, коли `useIntlayer` розв'язує фрагмент контенту для відображення, інтерпретатор повідомляє про подію `content_exposure` для цього точного `dictionaryKey` + шляху до ключа + локалі — знову ж таки, жодних змін у коді не потрібно. Повторні покази одного й того ж вузла в межах вікна очищення (flush window) об'єднуються в одну подію з лічильником (`count`), тому список, що перемальовується (re-render) 50 разів, не надсилає 50 подій.
@@ -153,29 +277,368 @@ export default config;
 
 Використовуйте `useConversion()`, щоб пов'язати мету з варіантом, який бачила сесія:
 
-```tsx fileName="CTAButton.tsx" codeFormat="tsx"
-import { useConversion } from "react-intlayer";
-
-const CTAButton = () => {
-  const trackConversion = useConversion();
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "react-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Почати
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="CTAButton.tsx"
+    "use client";
+
+    import { useConversion } from "next-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Почати
+        </button>
+      );
+    };
+    ```
+
+    > `useConversion` — це клієнтський хук: позначте компонент як `"use client"`.
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    ```vue fileName="CTAButton.vue"
+    <script setup lang="ts">
+    import { useConversion } from "vue-intlayer";
+
+    const trackConversion = useConversion();
+    </script>
+
+    <template>
+      <button
+        @click="
+          trackConversion({
+            experimentKey: 'homepage-hero',
+            variant: 'black_friday',
+            goal: 'cta_click',
+          })
+        "
+      >
+        Почати
+      </button>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    ```svelte fileName="CTAButton.svelte"
+    <script lang="ts">
+      import { useConversion } from "svelte-intlayer";
+
+      const trackConversion = useConversion();
+    </script>
 
-  return (
     <button
-      onClick={() =>
+      onclick={() =>
         trackConversion({
           experimentKey: "homepage-hero",
           variant: "black_friday",
           goal: "cta_click",
-        })
-      }
+        })}
     >
       Почати
     </button>
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "preact-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Почати
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "solid-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Почати
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    ```typescript fileName="cta-button.component.ts"
+    import { Component } from "@angular/core";
+    import { useConversion } from "angular-intlayer";
+
+    @Component({
+      selector: "app-cta-button",
+      template: `<button (click)="onClick()">Почати</button>`,
+    })
+    export class CtaButtonComponent {
+      private trackConversion = useConversion();
+
+      onClick() {
+        this.trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+### Розв'язання варіанту на стороні клієнта
+
+`useExperiment()` призначає сесії варіант і записує показ, який стає знаменником коефіцієнта конверсії. Показуйте піддерево, що залежить від варіанту, лише коли `isAssigned` дорівнює true, щоб жоден відвідувач не побачив короткий спалах контрольного варіанту до того, як призначення буде визначено:
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    `variant` — це звичайний рядок.
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "react-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    `variant` — це звичайний рядок. Призначення відбувається в браузері, тому компонент має бути клієнтським.
+
+    ```tsx fileName="Hero.tsx"
+    "use client";
+
+    import { useExperiment } from "next-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    `variant` та `isAssigned` — це `Ref`.
+
+    ```vue fileName="Hero.vue"
+    <script setup lang="ts">
+    import { useExperiment } from "vue-intlayer";
+    import HeroBanner from "./HeroBanner.vue";
+
+    const { variant, isAssigned } = useExperiment("homepage-hero", [
+      "default",
+      "black_friday",
+    ]);
+    </script>
+
+    <template>
+      <HeroBanner v-if="isAssigned" :variant="variant" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    `variant` та `isAssigned` — це стори (stores): читайте їх із префіксом `$`.
+
+    ```svelte fileName="Hero.svelte"
+    <script lang="ts">
+      import { useExperiment } from "svelte-intlayer";
+      import HeroBanner from "./HeroBanner.svelte";
+
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+    </script>
+
+    {#if $isAssigned}
+      <HeroBanner variant={$variant} />
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    `variant` — це звичайний рядок.
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "preact-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    `variant` та `isAssigned` — це `Accessor`: викликайте їх, щоб прочитати значення.
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "solid-intlayer";
+    import { Show } from "solid-js";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      return (
+        <Show when={isAssigned()}>
+          <HeroBanner variant={variant()} />
+        </Show>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    `variant` та `isAssigned` — це `Signal`: викликайте їх, щоб прочитати значення.
+
+    ```typescript fileName="hero.component.ts"
+    import { Component } from "@angular/core";
+    import { useExperiment } from "angular-intlayer";
+    import { HeroBannerComponent } from "./hero-banner.component";
+
+    @Component({
+      selector: "app-hero",
+      imports: [HeroBannerComponent],
+      template: `@if (experiment.isAssigned()) {
+        <app-hero-banner [variant]="experiment.variant()" />
+      }`,
+    })
+    export class HeroComponent {
+      experiment = useExperiment("homepage-hero", ["default", "black_friday"]);
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+Ваги (weights) необов'язкові — передайте одну на варіант, щоб змістити розподіл, наприклад `useExperiment("homepage-hero", ["default", "black_friday"], [9, 1])`.
+
+Далі дочірній компонент читає [Variant](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dynamic_dictionaries/variants.md) словника, який відповідає:
+
+```tsx fileName="HeroBanner.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export const HeroBanner = ({ variant }: { variant: string }) => {
+  const { headline, cta } = useIntlayer("hero-banner", { variant });
+
+  return (
+    <section>
+      <h1>{headline}</h1>
+      <a>{cta}</a>
+    </section>
   );
 };
 ```
 
-### Розв'язання варіанту на стороні клієнта
+> Читання варіанту в **дочірньому** компоненті — це те, що робить це працездатним поза React: у Vue, Svelte, Solid та Angular селектор, переданий у `useIntlayer`, захоплюється під час налаштування компонента, тому читання має відбуватися в компоненті, який монтується лише тоді, коли варіант уже відомий.
+
+Якщо експеримент охоплює цілу сторінку, а не окремий словник, підніміть варіант на провайдер замість цього — див. [Ambient variant](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dynamic_dictionaries/variants.md#ambient-variant). Кожен `useIntlayer` нижче тоді розв'язується відносно нього без змін у місці виклику.
+
+Якщо вам потрібне сире значення призначення поза компонентом, звертайтеся безпосередньо до клієнта:
 
 ```tsx fileName="useHeroVariant.ts" codeFormat="tsx"
 import { getGlobalAnalyticsClient } from "@intlayer/analytics/client";
@@ -187,6 +650,8 @@ const variant = client?.getVariant("homepage-hero", [
 ]);
 ```
 
+> `getVariant` лише призначає — він не записує показ (exposure). Надавайте перевагу `useExperiment()`, інакше коефіцієнт конверсії не матиме знаменника.
+
 ## Конфіденційність та продуктивність
 
 - **Анонімність за дизайном**: сесії ідентифікуються за id, що обертається (rotating id); сервер (backend) коли-небудь зберігає лише **SHA-256 хеш** цього id — ніколи сам id і ніколи IP-адресу.
@@ -236,6 +701,8 @@ const cms = createIntlayerCMS();
 const { data: audience } = await analyticsEndpoint(cms).getAudience(30);
 ```
 
+> **Лише на боці сервера.** `createIntlayerCMS()` автентифікується за допомогою `clientId` + `clientSecret`, і секрет ніколи не доступний у браузері: цей фрагмент коду виконував би неавтентифіковані запити, якби він там працював. Тримайте його в обробнику маршруту, серверній дії або скрипті.
+
 ## Корисні посилання
 
 - [Динамічні словники - Колекції та варіанти](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dynamic_dictionaries/index.md)

package/docs/uk/configuration.md

@@ -1122,3 +1122,101 @@ Intlayer підтримує широкий спектр провайдерів A
 | Поле      | Опис                                         | Тип                |
 | --------- | -------------------------------------------- | ------------------ |
 | `plugins` | Список плагінів Intlayer, які слід включити. | `IntlayerPlugin[]` |
+
+## Часто задавані запитання
+
+<FAQ>
+
+<Question title="Де повинен знаходитися файл intlayer.config.ts?">
+
+У кореневому каталозі проекту, поруч із `package.json`. Intlayer сканує робочий каталог і батьківські каталоги на наявність `intlayer.config.ts`, `intlayer.config.js`, `intlayer.config.mjs` або `intlayer.config.cjs`. Ви також можете передати власний шлях через прапорець `--config` у командах CLI.
+
+</Question>
+
+<Question title="Скільки i18n додає до розміру бандла?">
+
+Значно менше, ніж рішення на основі просторів імен (namespaces), оскільки сторінка ніколи не завантажує каталог, який вона не рендерить. Розмітка, що рендериться на сервері, отримує свій контент безпосередньо на сервері, а компілятор під час збирання замінює виклики `useIntlayer` точними записами словника, які використовує компонент, тому невикористані ключі та мови видаляються. [Динамічні словники](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dynamic_dictionaries/index.md) розділяють залишок за окремими локалями. У порівнянні зі звичними альтернативами Intlayer зменшує розмір бандла та сторінки до 50%. Див. [оптимізацію бандла](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md) та [бенчмарк](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/benchmark/index.md).
+
+</Question>
+
+<Question title="Чи можу я мігрувати з i18next, next-intl або react-i18next без переписування моїх компонентів?">
+
+Так, і для цього є два шляхи. Ви можете переносити контент поступово, користуючись [посібником з міграції з i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/migration_from_i18next_to_intlayer.md) або [посібником з міграції з next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/migration_from_next-intl_to_intlayer.md). Або ви можете повністю зберегти свій поточний API: [адаптери сумісності](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compat/index.md) надають абсолютно той самий інтерфейс, що й `i18next`, `react-i18next`, `next-intl`, `next-i18next`, `react-intl`, `use-intl`, `vue-i18n` та `Lingui`, але дані беруться зі словників Intlayer, завдяки чому змінюються лише імпорти, а код компонентів залишається незмінним.
+
+</Question>
+
+<Question title="Чи можу я зберігати мої існуючі JSON файли перекладів?">
+
+Так. [sync JSON плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-json.md) зберігає ваші файли `/messages/{locale}/{namespace}.json` як джерело істини та генерує словники Intlayer з них в обох напрямках. [sync PO плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-po.md) робить те ж саме для gettext каталогів, а [файли для окремих локалей](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/per_locale_file.md) дозволяють розділити контент за мовами замість групування локалей в один файл.
+
+</Question>
+
+<Question title="Чи потрібно переносити вміст ключ за ключем?">
+
+Ні. Запустіть `npx intlayer extract`, і Intlayer прочитає ваші файли, витягне призначені для користувача рядки і створить файл `.content` поруч із кожним компонентом, завдяки чому ви переглядаєте diff замість копіювання рядків у каталог вручну. Див. [команду extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md).
+
+Для повністю автоматизованого робочого процесу [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) робить те саме під час збирання у коді JSX, TSX, Vue та Svelte, генеруючи словники під час кожної зміни, тому вручну підтримувати ключі не потрібно. Оскільки він працює через статичний аналіз, динамічні рядки середовища виконання залишаються поза його досяжністю.
+
+</Question>
+
+<Question title="Які інструменти для редактора та AI агентів доступні?">
+
+П'ять інструментів, усі опціональні:
+
+- **[Розширення VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/vs_code_extension.md)**: перехід від ключа `useIntlayer` до файлу контенту, вилучення рядків із компонента та запуск build, fill, test, push і pull із палітри команд або вкладки Intlayer.
+- **[LSP сервер](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/lsp.md)**: та сама функціональність у будь-якому редакторі з підтримкою LSP, включно з переходом до визначення, переглядом перекладеного значення під час наведення та автодоповненням ключів. Також підтримує виклики `i18next`, `react-i18next`, `next-intl` та `use-intl`.
+- **[MCP сервер](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/mcp_server.md)**: надає документацію та CLI Intlayer для Cursor, VS Code, Claude Desktop, Claude Code та ChatGPT.
+- **[Навички агента (Agent skills)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/agent_skills.md)**: спеціалізовані навички `intlayer-config`, `intlayer-cli` та `intlayer-content`.
+- **[Плагін ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/eslint.md)**: правило `no-raw-text` відстежує жорстко закодовані рядки.
+
+</Question>
+
+<Question title="Як додати нову мову до мого додатку?">
+
+Додайте код локалі до масиву `internationalization.locales`, а потім запустіть `npx intlayer fill`, щоб автоматично перекласти наявний контент. Компілятор врахує нову мову під час наступного збирання.
+
+</Question>
+
+<Question title="Як видалити префікс локалі з моїх адрес URL?">
+
+Налаштуйте `routing.mode`. Значення `"no-prefix"` видаляє префікс для всіх мов, визначаючи локаль через cookie, заголовок або домен. Значення `"prefix-no-default"` (за замовчуванням) приховує префікс тільки для основної мови.
+
+</Question>
+
+<Question title="Чи можу я обслуговувати кожну мову з власного домену?">
+
+Так. Опція `routing.domains` прив'язує кожну локаль до хоста, наприклад `{ uk: 'example.ua', en: 'example.com' }`. Визначення за доменом має пріоритет над префіксами шляху, а `getMultilingualUrls` генерує повні адреси для `hreflang`.
+
+</Question>
+
+<Question title="Як визначається мова користувача?">
+
+Через `routing.storage`, де перелічені джерела за порядком пріоритету: зазвичай спочатку URL, далі cookie, потім заголовок `Accept-Language`, а в разі їх відсутності - мова за замовчуванням.
+
+</Question>
+
+<Question title="Що робить routing.enableProxy?">
+
+Керує проксі маршрутизації локалей - middleware, що обробляє префікси та редиректи. За замовчуванням проксі активне у режимах dev та production. Встановіть `false`, якщо керуєте адресами власноруч.
+
+</Question>
+
+<Question title="У чому різниця між importMode static, dynamic та fetch?">
+
+Значення `"static"` (за замовчуванням) імпортує словники статично, тому вони пакуються в бандл і читаються синхронно. `"dynamic"` завантажує словники асинхронно для кожної мови, полегшуючи початковий бандл. `"fetch"` отримує словники з сервера або CMS під час виконання.
+
+</Question>
+
+<Question title="Де встановити AI провайдера та ключ API для автоматичного перекладу?">
+
+У файлі конфігурації в секції `ai` або в командному рядку за допомогою прапорців `--provider`, `--model` та `--api-key`. Ключ залишається на вашому боці й ніколи не залишає вашого оточення. Див. [довідник конфігурації AI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
+
+</Question>
+
+<Question title="Чи потрібно перезапускати сервер розробки після зміни конфігурації?">
+
+Зазвичай ні. Watcher Intlayer відстежує файл `intlayer.config.ts`: під час збереження він перезавантажує налаштування та оновлює словники у фоновому режимі.
+
+</Question>
+
+</FAQ>