huuma-ui-i18n

name	huuma-ui-i18n
description	Adding translations and multilingual routing to a Huuma UI app with setupI18n, useI18n middleware, and the T component.

Huuma UI i18n

Use this skill when the agent is adding translations, multilingual routing, or locale-dependent text in a Huuma UI app.

Setup

• Configure i18n with setupI18n(options) from @huuma/ui/i18n.
• Install the i18n middleware with useI18n() from @huuma/ui/i18n/middleware so URLs are prefixed with /<lang>.
• Define languages, default language, and translation dictionaries. See the README "Internationalization (i18n)" section for a full setupI18n + useI18n example.

URL structure

• All localized URLs must lead with /<lang>.
• Requests without a language prefix may be redirected or throw, depending on middleware configuration.
• Route definitions in app/ are language-agnostic; the language prefix is handled by middleware.

Translations

• Server components use $t() or <T name="key" />.
• Islands use $t, $activeLang, and $languages.
• Nested keys are dot-separated: name="a.b.c" resolves a.b.c in the dictionary.
• Interpolation uses {{param}} syntax: <T name="greeting" props={{ name: "World" }} />.

Active language

• $activeLang gives the current language.
• $languages gives the configured languages.
• Use these in UI to render language switchers or conditional content.

Dangerously inner HTML

• Some variants support a dangerouslyInnerHTML prop for raw HTML translations.
• Use only when the translation content is trusted, to avoid XSS.

Files to reference

• @huuma/ui/i18n — core i18n API (setupI18n, T, $t, $activeLang, $languages). Inspect with deno doc jsr:@huuma/ui/i18n.
• @huuma/ui/i18n/middleware — language-prefix middleware (useI18n). Inspect with deno doc jsr:@huuma/ui/i18n/middleware.

Things to check

• useI18n middleware is registered before localized routes are served.
• Translation keys match the dictionary structure.
• URL helpers ($url, $route) respect the active language prefix.
• Client-side language switching triggers the expected navigation/re-render.