@intlayer/docs 9.5.4 → 9.5.5

package/docs/ar/packages/remix-intlayer/useDictionary.md

@@ -0,0 +1,95 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: توثيق خطاف useDictionary | remix-intlayer
+description: تعرّف على كيفية استخدام خطاف useDictionary في تطبيقات Remix 3 لتحليل كائنات القاموس وفقًا للغة الطلب الحالية.
+keywords:
+  - useDictionary
+  - dictionary
+  - remix
+  - remix-3
+  - Intlayer
+  - intlayer
+  - التدويل
+  - توثيق
+slugs:
+  - doc
+  - packages
+  - remix-intlayer
+  - useDictionary
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "توثيق أولي لخطاف useDictionary"
+author: aymericzip
+---
+
+# توثيق خطاف useDictionary
+
+يقوم خطاف `useDictionary` بتحويل كائن قاموس مستورد أو مضمن وإرجاع محتواه المحلل وفقًا للغة الطلب الحالية في تطبيقات Remix 3.
+
+على عكس `useIntlayer` الذي يبحث عن القواميس بواسطة مفتاحها النصي من سجل القواميس العام، يقبل `useDictionary` كائن القاموس مباشرة.
+
+## الاستخدام
+
+```ts fileName="src/views/home.ts"
+import { useDictionary } from "remix-intlayer";
+import homeContent from "./home.content";
+
+export const HomeView = () => {
+  const content = useDictionary(homeContent);
+
+  return `
+    <div>
+      <h1>${content.title}</h1>
+      <p>${content.subtitle}</p>
+    </div>
+  `;
+};
+```
+
+يمكنك أيضًا تمرير قواميس مضمنة محددة باستخدام `t()`:
+
+```ts
+import { useDictionary } from "remix-intlayer";
+import { t } from "intlayer";
+
+export const FooterView = () => {
+  const content = useDictionary({
+    key: "footer",
+    content: {
+      copyright: t({
+        ar: "جميع الحقوق محفوظة.",
+        en: "All rights reserved.",
+        fr: "Tous droits réservés.",
+        es: "Todos los derechos reservados.",
+      }),
+    },
+  });
+
+  return `<footer>${content.copyright}</footer>`;
+};
+```
+
+## المعاملات
+
+```ts
+useDictionary(dictionary, localeOrSelector?)
+```
+
+1. **`dictionary`**: كائن قاموس أو مجموعة قواميس مؤهلة.
+2. **`localeOrSelector`** (اختياري): لغة محددة أو كائن محدد (`{ item }`، `{ variant }`، مع `locale` اختياريًا). له الأولوية على لغة الطلب عند توفيره.
+
+## الوصف
+
+يقوم الخطاف بالمهام التالية:
+
+1. **اكتشاف اللغة**: يقرأ لغة الطلب النشطة من مخزن `AsyncLocalStorage` الذي تم إنشاؤه بواسطة البرمجية الوسيطة `intlayer()`.
+2. **تحليل المحتوى**: يقيّم الترجمات (`t()`)، والتعدادات، والشروط، والهياكل المتداخلة وفقًا للغة المحددة.
+3. **معالجة المحددات**: يطبق أي محددات عناصر أو متغيرات محددة في المعاملات.
+
+## المستندات ذات الصلة
+
+- [البرمجية الوسيطة `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/intlayerMiddleware.md)
+- [خطاف `useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/useIntlayer.md)
+- [خطاف `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/useLocale.md)

package/docs/ar/packages/remix-intlayer/useIntlayer.md

@@ -0,0 +1,94 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: توثيق خطاف useIntlayer | remix-intlayer
+description: تعرّف على كيفية استخدام خطاف useIntlayer في تطبيقات Remix 3 للوصول إلى المحتوى المترجم حسب المفتاح.
+keywords:
+  - useIntlayer
+  - dictionary
+  - remix
+  - remix-3
+  - Intlayer
+  - intlayer
+  - التدويل
+  - توثيق
+slugs:
+  - doc
+  - packages
+  - remix-intlayer
+  - useIntlayer
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "توثيق أولي لخطاف useIntlayer"
+author: aymericzip
+---
+
+# توثيق خطاف useIntlayer
+
+يتيح لك خطاف `useIntlayer` استرداد المحتوى المترجم من قاموس Intlayer حسب المفتاح في تطبيقات Remix 3.
+
+يقوم تلقائيًا بقراءة اللغة النشطة من سياق الطلب الحالي (عبر `AsyncLocalStorage`)، لذلك لا تحتاج إلى تمرير اللغة يدويًا عبر معالجات المسارات أو قوالب العرض أو المكونات.
+
+## الاستخدام
+
+### في معالجات المسارات
+
+```ts fileName="src/server.ts"
+import { createRouter } from "remix/router";
+import { intlayer, useIntlayer } from "remix-intlayer";
+
+const router = createRouter({
+  middleware: [intlayer()],
+});
+
+router.get("/api/welcome", () => {
+  const content = useIntlayer("home");
+
+  return Response.json({
+    title: content.title,
+    subtitle: content.subtitle,
+  });
+});
+```
+
+### في قوالب العرض والمكونات
+
+```tsx fileName="src/views/home.ts"
+import { useIntlayer } from "remix-intlayer";
+
+export const HomeView = () => {
+  const content = useIntlayer("home");
+
+  return `
+    <main>
+      <h1>${content.title}</h1>
+      <p>${content.subtitle}</p>
+    </main>
+  `;
+};
+```
+
+## المعاملات
+
+```ts
+useIntlayer(key, localeOrSelector?)
+```
+
+1. **`key`**: المفتاح الفريد للقاموس (كما هو محدد في ملفات تعريف `.content.ts`).
+2. **`localeOrSelector`** (اختياري): لغة محددة أو كائن محدد (`{ item }`، `{ variant }`، مع `locale` اختياريًا). عند تمريره، فإنه يتجاوز اللغة المكتشفة من سياق الطلب.
+
+## الوصف
+
+يقوم الخطاف بتنفيذ المهام التالية:
+
+1. **اكتشاف لغة السياق**: يكتشف اللغة الحالية من نطاق `AsyncLocalStorage` المرتبط بالطلب والذي أنشأته البرمجية الوسيطة `intlayer()`.
+2. **جلب القاموس**: يسترد القاموس المترجم مسبقًا المطابق للمفتاح المقدم.
+3. **معالجة الترجمات**: يحل الترجمات والتعدادات وعناصر markdown والمحتوى المشروط للغة المحددة.
+4. **معالجة الاحتياط (Fallback)**: إذا تم استدعاؤه خارج سياق طلب HTTP نشط (مثل المهام الخلفية أو اختبارات الوحدة بدون برمجية وسيطة)، فإنه يرجع تلقائيًا وبأمان إلى `defaultLocale` المكون.
+
+## المستندات ذات الصلة
+
+- [البرمجية الوسيطة `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/intlayerMiddleware.md)
+- [خطاف `useDictionary`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/useDictionary.md)
+- [خطاف `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/useLocale.md)

package/docs/ar/packages/remix-intlayer/useLocale.md

@@ -0,0 +1,104 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: توثيق خطاف useLocale | remix-intlayer
+description: تعرّف على كيفية استخدام خطاف useLocale في تطبيقات Remix 3 للحصول على لغة الطلب الحالية واللغة الافتراضية واللغات المتاحة.
+keywords:
+  - useLocale
+  - locale
+  - remix
+  - remix-3
+  - Intlayer
+  - intlayer
+  - التدويل
+  - توثيق
+slugs:
+  - doc
+  - packages
+  - remix-intlayer
+  - useLocale
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "توثيق أولي لخطاف useLocale"
+author: aymericzip
+---
+
+# توثيق خطاف useLocale
+
+يوفر خطاف `useLocale` من `remix-intlayer` إمكانية الوصول إلى لغة طلب HTTP قيد المعالجة حاليًا، بالإضافة إلى اللغة الافتراضية واللغات المتاحة التي تم تكوينها في المشروع.
+
+## الاستخدام
+
+في مكون Remix (على سبيل المثال محول اللغة):
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { type FC } from "react";
+import { Link } from "@remix-run/react";
+import { useLocale } from "remix-intlayer";
+import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, availableLocales } = useLocale();
+  const pathWithoutLocale = getPathWithoutLocale();
+
+  return (
+    <nav>
+      <ul>
+        {availableLocales.map((localeItem) => (
+          <li key={localeItem} className="p-1">
+            <Link
+              href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+              aria-current={localeItem === locale ? "page" : undefined}
+            >
+              {localeItem.toUpperCase()}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+```
+
+في معالج المسار:
+
+```ts fileName="src/server.ts"
+import { createRouter } from "remix/router";
+import { intlayer, useLocale } from "remix-intlayer";
+
+const router = createRouter({
+  middleware: [intlayer()],
+});
+
+router.get("/api/locale-info", () => {
+  const { locale, defaultLocale, availableLocales } = useLocale();
+
+  return Response.json({
+    locale,
+    defaultLocale,
+    availableLocales,
+  });
+});
+```
+
+## القيم المرجعة
+
+يُرجع الخطاف كائنًا من النوع `UseLocaleResult`:
+
+| الخاصية            | النوع               | الوصف                                                                |
+| ------------------ | ------------------- | -------------------------------------------------------------------- |
+| `locale`           | `DeclaredLocales`   | اللغة المحددة للطلب الحالي.                                          |
+| `defaultLocale`    | `DeclaredLocales`   | اللغة الافتراضية الاحتياطية التي تم تكوينها في `intlayer.config.ts`. |
+| `availableLocales` | `DeclaredLocales[]` | مصفوفة بجميع اللغات المتاحة المكونة في `intlayer.config.ts`.         |
+
+## الوصف
+
+1. **التعيين على مستوى الطلب**: في طلب نشط تديره البرمجية الوسيطة `intlayer()`، يقرأ `useLocale` اللغة المحددة من وحدة تخزين الطلب.
+2. **الاحتياط السلس (Fallback)**: إذا تم استدعاؤه خارج سياق الطلب (كما هو الحال أثناء نصوص التهيئة البرمجية أو مجموعات الاختبار)، فإنه يرجع افتراضيًا إلى `defaultLocale` المكون.
+
+## المستندات ذات الصلة
+
+- [البرمجية الوسيطة `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/intlayerMiddleware.md)
+- [خطاف `useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/useIntlayer.md)
+- [خطاف `useDictionary`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/remix-intlayer/useDictionary.md)

package/docs/ar/readme.md

@@ -199,7 +199,8 @@ const HomePage = () => {
   <li><a href="https://intlayer.org/doc/environment/create-react-app" rel=''>React CRA</a></li>
   <li><a href="https://intlayer.org/doc/environment/vite-and-react" rel=''>Vite + React</a></li>
   <li><a href="https://intlayer.org/doc/environment/vite-and-react" rel=''>Vite + React باستخدام المترجم</a></li>
-  <li><a href="https://intlayer.org/doc/environment/vite-and-react/compiler" rel=''>React-router-v7</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-react/react-router-v7" rel=''>React-router-v7</a></li>
+  <li><a href="https://intlayer.org/doc/environment/remix-3" rel=''>Remix 3</a></li>
   <li><a href="https://intlayer.org/doc/environment/tanstack-start" rel=''>Tanstack start</a>
     <ul>
       <li><a href="https://intlayer.org/doc/environment/tanstack-start/solid" rel=''>Solid</a></li>

package/docs/de/how_works_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-12
-updatedAt: 2026-08-30
+updatedAt: 2026-09-19
 title: Wie Intlayer funktioniert
 description: Erfahren Sie, wie Intlayer intern funktioniert. Verstehen Sie die Architektur und die Komponenten, die Intlayer leistungsstark machen.
 keywords:
@@ -135,49 +135,105 @@ Intlayer besteht aus mehreren Paketen, die jeweils eine spezifische Rolle im Üb
 
 Das `intlayer`-Paket wird in Anwendungen verwendet, um Inhalte in Inhaltsdateien zu deklarieren.
 
-### react-intlayer
+### Frontend-Frameworks
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
 Das `react-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in React-Anwendungen nutzbar zu machen.
 
-### next-intlayer
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
 
 Das `next-intlayer`-Paket wird als Schicht über `react-intlayer` verwendet, um Intlayer-Wörterbücher in Next.js-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, um Intlayer in einer Next.js-Umgebung zum Laufen zu bringen, wie Übersetzungsmiddleware, Routing oder die Konfiguration der Datei `next.config.js`.
 
-### vue-intlayer
+  </Tab>
+  <Tab label="Vue" value="vue">
 
 Das `vue-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Vue-Anwendungen nutzbar zu machen.
 
-### nuxt-intlayer
+  </Tab>
+  <Tab label="Nuxt" value="nuxt">
 
 Das `nuxt-intlayer`-Paket ist ein Nuxt-Modul, um Intlayer-Wörterbücher in Nuxt-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, damit Intlayer in einer Nuxt-Umgebung funktioniert, wie z. B. Übersetzungs-Middleware, Routing oder die Konfiguration der `nuxt.config.js`-Datei.
 
-### svelte-intlayer
+  </Tab>
+  <Tab label="Svelte" value="svelte">
 
 Das `svelte-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Svelte-Anwendungen nutzbar zu machen.
 
-### solid-intlayer (WIP)
+  </Tab>
+  <Tab label="Solid" value="solid">
 
 Das `solid-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Solid.js-Anwendungen nutzbar zu machen.
 
-### preact-intlayer
+  </Tab>
+  <Tab label="Preact" value="preact">
 
 Das `preact-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Preact-Anwendungen nutzbar zu machen.
 
-### angular-intlayer (WIP)
+  </Tab>
+  <Tab label="Angular" value="angular">
 
 Das `angular-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Angular-Anwendungen nutzbar zu machen.
 
-### express-intlayer
+  </Tab>
+  <Tab label="Astro" value="astro">
 
-Das `express-intlayer`-Paket wird verwendet, um Intlayer auf einem Express.js-Backend zu nutzen.
+Das `astro-intlayer`-Paket stellt die notwendigen Werkzeuge bereit, um Intlayer in Astro-Anwendungen zu integrieren. Es konfiguriert sprachenbasiertes Routing und die Verwaltung von Wörterbüchern.
+
+  </Tab>
+  <Tab label="Remix" value="remix">
+
+Das `remix-intlayer`-Paket stellt die notwendigen Werkzeuge bereit, um Intlayer in Remix-Anwendungen zu integrieren. Es konfiguriert sprachenbasiertes Routing, serverseitigen Kontext und die Verwaltung von Wörterbüchern.
 
-### react-native-intlayer
+  </Tab>
+  <Tab label="React Native" value="react-native">
 
 Das `react-native-intlayer`-Paket bietet Tools, die Plugins für Intlayer integrieren, um mit dem Metro-Bundler zu arbeiten.
 
-### lynx-intlayer
+  </Tab>
+  <Tab label="Lit" value="lit">
+
+Das `lit-intlayer`-Paket bietet Tools und Komponenten zur Interpretation und Verwendung von Intlayer-Wörterbüchern in Lit-Anwendungen.
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+Das `vanilla-intlayer`-Paket bietet Tools zur Integration von Intlayer in Vanilla-JavaScript-, HTML- oder PHP-Anwendungen.
+
+  </Tab>
+</Tabs>
+
+### Backend-Frameworks
+
+<Tabs group="backend">
+  <Tab label="Express" value="express">
+
+Das `express-intlayer`-Paket wird verwendet, um Intlayer auf einem Express.js-Backend zu nutzen.
+
+  </Tab>
+  <Tab label="Fastify" value="fastify">
+
+Das `fastify-intlayer`-Paket stellt ein Plugin für Fastify-Anwendungen bereit, um Internationalisierung zu unterstützen. Es erkennt die Locale des Benutzers und erweitert das Request-Objekt.
 
-Das `lynx-intlayer`-Paket bietet Tools, die Plugins für Intlayer integrieren, um mit dem Lynx-Bundler zu arbeiten.
+  </Tab>
+  <Tab label="Hono" value="hono">
+
+Das Paket `hono-intlayer` bietet eine Middleware für Hono-Anwendungen zur Handhabung der Internationalisierung. Sie erkennt die Sprache des Benutzers und füllt das Kontextobjekt.
+
+  </Tab>
+  <Tab label="Elysia" value="elysia">
+
+Das `elysia-intlayer`-Paket stellt ein Plugin für Elysia-Anwendungen bereit, um Internationalisierung zu unterstützen. Es erkennt die Locale des Benutzers und injiziert ein `intlayer`-Objekt in den Route-Kontext.
+
+  </Tab>
+  <Tab label="AdonisJS" value="adonis">
+
+Das Paket `adonis-intlayer` bietet eine Middleware für AdonisJS-Anwendungen zur Handhabung der Internationalisierung. Es erkennt die Locale des Benutzers und stellt Übersetzungsfunktionen bereit.
+
+  </Tab>
+</Tabs>
 
 ### vite-intlayer
 
@@ -187,6 +243,10 @@ Beinhaltet das Vite-Plugin zur Integration von Intlayer mit dem [Vite-Bundler](h
 
 Beinhaltet die `react-scripts-intlayer` Befehle und Plugins zur Integration von Intlayer in Anwendungen, die auf Create React App basieren. Diese Plugins basieren auf [craco](https://craco.js.org/) und enthalten zusätzliche Konfigurationen für den [Webpack](https://webpack.js.org/) Bundler.
 
+### eslint-plugin-intlayer
+
+Das `eslint-plugin-intlayer`-Paket bietet ESLint- und oxlint-Regeln, um unübersetzte Zeichenketten zu erkennen, Wörterbuchdefinitionen zu validieren und i18n-Best-Practices durchzusetzen.
+
 ### intlayer-editor
 
 Das `intlayer-editor` Paket wird verwendet, um die Nutzung des visuellen Editors zu ermöglichen. Dieses optionale Paket kann in Anwendungen installiert werden und wird vom `react-intlayer` Paket verwendet.  
@@ -220,6 +280,18 @@ Das `@intlayer/cli` Paket ist ein NPM-Paket, das verwendet wird, um Skripte im Z
 
 Das `@intlayer/mcp` Paket stellt einen MCP (Model Context Protocol) Server bereit, der KI-gestützte IDE-Unterstützung speziell für das Intlayer-Ökosystem liefert. Es lädt automatisch die Dokumentation und integriert sich in die Intlayer CLI.
 
+### @intlayer/lsp
+
+Das `@intlayer/lsp`-Paket bietet einen auf Intlayer zugeschnittenen Language Server Protocol (LSP)-Server. Es bringt IDE-Funktionen wie Gehe zu Definition, Referenzen finden, Hover-Vorschauen, Autovervollständigung von Wörterbuchschlüsseln und Diagnosewarnungen.
+
+### @intlayer/ai
+
+Das `@intlayer/ai`-Paket bietet SDK-Funktionen für Intlayer-Anwendungen, die automatisierte Übersetzungen und KI-gestützte Inhaltserstellung ermöglichen.
+
+### @intlayer/analytics
+
+Das `@intlayer/analytics`-Paket bietet Tools zum Sammeln von Metriken zu Inhaltsimpressionen, Seiten-/Locale- und Knotenebenen-Analysen und unterstützt A/B-Tests von Inhalten.
+
 ### @intlayer/dictionaries-entry
 
 Das `@intlayer/dictionaries-entry` Paket gibt den Einstiegspfad der Intlayer-Wörterbücher zurück: die zusammengeführten Wörterbücher aus dem Stammverzeichnis sowie die nicht zusammengeführten, Remote-, dynamischen und Fetch-Wörterbücher aus den Unterpfaden `/unmerged`, `/remote`, `/dynamic` und `/fetch`. Da eine Suche im Dateisystem vom Browser aus nicht möglich ist, kann der Einstiegspfad der Wörterbücher mit Bundlern wie Webpack oder Rollup nicht ermittelt werden. Das Paket und seine Unterpfade sind so konzipiert, dass sie als Aliase verwendet werden können, um eine Optimierung des Bundlings über verschiedene Bundler wie Vite, Webpack und Turbopack zu ermöglichen.

package/docs/de/intlayer_visual_editor.md

@@ -278,6 +278,13 @@ Der Editor zeigt Ihre Anwendung in einem iframe an, sodass Ihre Content Security
 
 Er ist für Entwicklung und Staging ausgelegt, wo ein Neubau nach einer Bearbeitung akzeptabel ist. Um Inhalte auf einer Live-Website ohne Deployment zu bearbeiten, verwenden Sie stattdessen das [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) und seine entfernten Wörterbücher.
 
+</Question>
+<Question title="Welche Auswirkungen hat der visuelle Editor auf die Performance? Ist er überdimensioniert, wenn ich ihn nicht benötige?">
+
+Der visuelle Editor von Intlayer verursacht **keine Kosten** für Ihre Anwendung, wenn er nicht eingerichtet ist. Die zusätzliche Logik wird nur geladen, wenn sie explizit aktiviert und benötigt wird.
+
+Selbst wenn er aktiviert ist, ist der Overhead extrem gering (+5 KB, wird nur bei Aktivierung dynamisch geladen), da der Großteil der Logik vom Server-Editor auf [app.intlayer.org](https://app.intlayer.org) oder über das Paket `intlayer-editor` verarbeitet wird. Wenn Sie lediglich eine einfache Übersetzungslösung ohne visuelle Bearbeitung benötigen, verursacht Intlayer keinerlei zusätzlichen Aufwand für Ihre App.
+
 </Question>
 <Question title="Ist der visuelle Editor kostenlos?">
 

package/docs/de/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-30
+updatedAt: 2026-09-19
 title: "Astro i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -18,6 +18,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "useIntlayer / useLocale Hooks und die Astro.locals Middleware zu astro-intlayer hinzugefügt"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -152,7 +155,7 @@ bun add intlayer astro-intlayer
   Das Kernpaket, das i18n-Tools für Konfigurationsmanagement, Übersetzungen, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **astro-intlayer**
-  Enthält das Astro-Integrations-Plugin, um Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) zu verbinden, sowie die Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+  Enthält das Astro-Integrations-Plugin zur Einbindung von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), eine Middleware, die das Gebietsschema jeder Anfrage in `Astro.locals.intlayer` auflöst, sowie die Hooks `useIntlayer` / `useDictionary` / `useLocale`. Derselbe Importpfad löst im `.astro`-Frontmatter zur Server-Implementierung und in `<script>`-Blöcken zur Client-Implementierung (unterstützt durch `vanilla-intlayer`) auf.
 
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
@@ -229,26 +232,28 @@ export default appContent;
 </Step>
 <Step number={5} title="Inhalt in Astro verwenden">
 
-Sie können die Wörterbücher direkt in Ihren `.astro`-Dateien verwenden, indem Sie die von `intlayer` exportierten Kern-Helfer nutzen.
+Verwenden Sie Ihre Wörterbücher in `.astro`-Dateien mit den von `astro-intlayer` exportierten Hooks. Sie teilen die Signaturen von `react-intlayer`: `useIntlayer("key")` gibt den Inhalt eines Wörterbuchs zurück und `useLocale()` das aktuelle Gebietsschema, ohne dass Argumente übergeben werden müssen.
+
+Das Gebietsschema stammt von der `astro-intlayer`-Middleware, die die Integration vor Ihrer eigenen `src/middleware.ts` registriert. Sie löst es für jede Anfrage auf, aus dem URL-Präfix, dann dem vom Client gespeicherten Gebietsschema (Cookie oder Header), dann `Accept-Language`, und speichert es in `Astro.locals.intlayer`. Vorgerenderte Seiten verwenden nur die URL, da sie einmal für jeden Besucher gerendert werden.
+
+Sie sollten auch SEO-Metadaten wie hreflang und kanonische Links zu jeder Seite hinzufügen und einen Sprachumschalter einbinden, damit Benutzer die Sprache wechseln können.
 
 ```astro fileName="src/pages/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   defaultLocale,
   localeMap,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import LocaleSwitcher from "../components/LocaleSwitcher.astro";
 
-// Get the current locale from the URL (e.g. /es/about -> 'es')
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+// Vom Middleware aufgelöstes Gebietsschema (z. B. /de/about -> 'de')
+const { locale } = useLocale();
 
-// Get the content for the 'app' dictionary
-const { title } = getIntlayer("app", locale);
+// Inhalt des 'app'-Wörterbuchs für dieses Gebietsschema
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -300,6 +305,8 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> `Astro.locals.intlayer` stellt auch `locale`, `defaultLocale` und `availableLocales` für Ihre eigenen Middlewares und Endpunkte bereit. Übergeben Sie ein Gebietsschema oder einen Selektor als zweites Argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), um das Anfrage-Gebietsschema für einen Aufruf zu überschreiben.
+
 </Step>
 <Step number={6} title="Lokalisiertes Routing">
 
@@ -324,44 +331,51 @@ Um Benutzern den Wechsel zwischen Sprachen zu ermöglichen, können Sie eine `Lo
 
 ```astro fileName="src/components/LocaleSwitcher.astro"
 ---
-import {
-  locales,
-  getLocaleName,
-  getLocalizedUrl,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  type LocalesValues,
-} from "intlayer";
+import { useLocale } from "astro-intlayer";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const { locale, availableLocales } = useLocale();
 const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ---
 
-<nav>
-  {
-    locales.map((localeItem) => (
-      <a
-        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
-        data-locale={localeItem}
-        aria-current={localeItem === locale ? "page" : undefined}
-      >
-        {getLocaleName(localeItem)}
-      </a>
-    ))
-  }
+<nav aria-label="Languages">
+  <ul>
+    {
+      availableLocales.map((localeItem) => (
+        <li key={localeItem} class="p-1">
+          <a
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            data-locale={localeItem}
+            aria-current={localeItem === locale ? "page" : undefined}
+          >
+            {getLocaleName(localeItem)}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </nav>
 
 <script>
-  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+  // Im Browser löst derselbe Import zur Client-Implementierung auf
+  import { useLocale } from "astro-intlayer";
+  import { getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  // Speichert die Auswahl im Locale-Cookie und navigiert dann zur lokalisierten URL
+  const { setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
+    },
+  });
 
   const localeLinks = document.querySelectorAll("[data-locale]");
 
   localeLinks.forEach((link) => {
-    link.addEventListener("click", (e) => {
+    link.addEventListener("click", (event) => {
       const locale = link.getAttribute("data-locale") as LocalesValues;
 
-      // Update the locale cookie
-      setLocaleInStorageClient(locale);
+      event.preventDefault();
+      setLocale(locale);
     });
   });
 </script>
@@ -371,6 +385,13 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
     display: flex;
     gap: 1rem;
   }
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: 0.5rem;
+  }
   a[aria-current="page"] {
     font-weight: bold;
     text-decoration: underline;
@@ -379,7 +400,10 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Hinweis zur Persistenz:**
-> Die Verwendung von `setLocaleInStorageClient` im clientseitigen Skript stellt sicher, dass die Sprachpräferenz des Benutzers in einem Cookie gespeichert wird. Dies ermöglicht es der Intlayer-Middleware, sich an die Auswahl zu erinnern und den Benutzer bei zukünftigen Besuchen automatisch auf seine bevorzugte Sprache umzuleiten.
+> `setLocale` aus dem clientseitigen `useLocale` speichert die Sprachpräferenz des Benutzers in einem Cookie. Dadurch kann sich die Intlayer-Middleware die Auswahl merken und den Benutzer bei zukünftigen Besuchen automatisch zu seiner bevorzugten Sprache weiterleiten.
+>
+> **Server- / Client-Interkompatibilität:**
+> `astro-intlayer` löst im Frontmatter (beim Lesen von `Astro.locals`) zu seinen Server-Hooks auf und in `<script>`-Blöcken sowie Inseln (Islands) zu den Client-Hooks von `vanilla-intlayer`, mit identischen Namen und Inhaltsstrukturen. `setLocale` und `onChange` wirken nur auf dem Client, rufen Sie dort einmal `installIntlayer()` auf, um den Client-Store zu initialisieren. `astro-intlayer/client` stellt den Client-Einstiegspunkt explizit bereit.
 
 </Step>
 <Step number={8} title="Sitemap und Robots.txt">