# Internationalisation (i18n)

Chativa uses [i18next](https://www.i18next.com/). The widget ships with **English (`en`)** and **Turkish (`tr`)**. Anything else you add at runtime.

## Set the active language

```ts
import { i18next } from "@chativa/ui";   // re-exported from @chativa/core
i18next.changeLanguage("tr");
```

Or declaratively, before mount:

```js
window.chativaSettings = { locale: "tr" };
```

All `LitElement` components that extend `I18nMixin` (every Chativa component does) re-render automatically when the language changes.

## Add a new language

```ts
import { i18next } from "@chativa/ui";

i18next.addResourceBundle("de", "translation", {
  header:    { title: "Chat", subtitle: "Wir sind hier" },
  input:     { placeholder: "Nachricht schreiben..." },
  commands:  { clear: { description: "Verlauf löschen" } },
});

i18next.changeLanguage("de");
```

## Override built-in strings

You can override any key in any language. Two formats are supported via `chativaSettings.i18n`:

### Per-language

```ts
window.chativaSettings = {
  i18n: {
    all: { header: { title: "Customer Care" } },     // applied to every language
    tr:  { header: { subtitle: "7/24 buradayız" } }, // tr-only override
  },
};
```

### Flat (applies to every registered language)

```ts
window.chativaSettings = {
  i18n: { header: { title: "Customer Care" } },
};
```

`applyGlobalSettings()` re-applies your overrides on `languageChanged`, so they survive runtime locale switches.

## In your own components

Extend `I18nMixin` and use the reactive `t()` method:

```ts
import { LitElement, html } from "lit";
import { I18nMixin } from "@chativa/core";

class HelpButton extends I18nMixin(LitElement) {
  render() {
    return html`<button>${this.t("commands.help.label")}</button>`;
  }
}
```

Or in slash commands / GenUI components — pass the **lazy** form so translations are read at execute time, not registration time:

```ts
registerCommand({
  name: "help",
  description: () => t("commands.help.description"),  // function → resolved later
  usage:       () => t("commands.help.usage"),
  execute({ args }) { /* ... */ },
});
```

See [`domain/ports/ISlashCommand.ts`](../packages/core/src/domain/ports/ISlashCommand.ts) → `resolveText()`.