From 1ac922af7a7cab2733b58540d6ed5cad78a25412 Mon Sep 17 00:00:00 2001
From: dangreen <danon0404@gmail.com>
Date: Fri, 29 May 2026 13:33:41 +0400
Subject: [PATCH] docs: intl

---
 packages/intl/README.md                       |   1 +
 packages/next-router/README.md                |   6 +-
 packages/svelte-kit/README.md                 |  15 +-
 website/astro.config.js                       |   6 +
 .../content/docs/examples/rick-and-morty.mdx  |  10 +-
 .../content/docs/integrations/next-router.mdx |  21 +-
 .../src/content/docs/integrations/next.mdx    |  15 +-
 .../docs/integrations/preact-router.mdx       |   8 +-
 .../content/docs/integrations/preact-ssr.mdx  |  30 +-
 .../docs/integrations/react-router.mdx        |   8 +-
 .../content/docs/integrations/react-ssr.mdx   |  30 +-
 .../content/docs/integrations/svelte-kit.mdx  |  16 +-
 .../docs/integrations/svelte-router.mdx       |   8 +-
 .../content/docs/integrations/svelte-ssr.mdx  |  30 +-
 website/src/content/docs/intl/api.mdx         | 440 ++++++++++++++++++
 .../src/content/docs/intl/core-concepts.mdx   | 243 ++++++++++
 website/src/content/docs/intl/index.mdx       | 101 ++++
 website/src/content/docs/intl/ssr.mdx         |  90 ++++
 website/src/content/docs/platform/web.mdx     |  26 ++
 website/src/content/docs/router/advanced.mdx  |   5 +-
 website/src/content/docs/ssr/cookies.mdx      |   6 +-
 website/src/content/docs/ssr/index.mdx        |  33 +-
 website/src/content/docs/ssr/locale.mdx       |   8 +-
 23 files changed, 1061 insertions(+), 95 deletions(-)
 create mode 100644 website/src/content/docs/intl/api.mdx
 create mode 100644 website/src/content/docs/intl/core-concepts.mdx
 create mode 100644 website/src/content/docs/intl/index.mdx
 create mode 100644 website/src/content/docs/intl/ssr.mdx

diff --git a/packages/intl/README.md b/packages/intl/README.md
index 6324fc76..150ef01e 100644
--- a/packages/intl/README.md
+++ b/packages/intl/README.md
@@ -31,6 +31,7 @@ A lightweight internationalization library for Nano Kit applications.
 - **Type-safe**. Message schemes are checked against translation data.
 - **Composable**. Build messages from small formats like `text`, `params`, `plural`, `match`, and `number`.
 - **Tree-shakeable**. Import only the formats your app uses.
+- **SSR-ready**. Use `@nano_kit/query` for cached translation loading and dehydration.
 
 ## Installation
 
diff --git a/packages/next-router/README.md b/packages/next-router/README.md
index 1d222e92..6dc05c3e 100644
--- a/packages/next-router/README.md
+++ b/packages/next-router/README.md
@@ -151,17 +151,15 @@ Use `virtualNavigation` and `dehydrate` in `getServerSideProps` to prefetch data
 // pages/characters.tsx
 import type { GetServerSideProps } from 'next'
 import { dehydrate, provide } from '@nano_kit/store'
-import { Location$, Navigation$, virtualNavigation } from '@nano_kit/router'
+import { LocationNavigation$, virtualNavigation } from '@nano_kit/router'
 import { routes } from '@/stores/router'
 import { CharactersPage, Stores$ } from '@/ui/pages/Characters'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const [$location, navigation] = virtualNavigation(context.resolvedUrl, routes)
   const dehydrated = await dehydrate(
     Stores$,
     [
-      provide(Location$, $location),
-      provide(Navigation$, navigation)
+      provide(LocationNavigation$, virtualNavigation(context.resolvedUrl, routes))
     ]
   )
 
diff --git a/packages/svelte-kit/README.md b/packages/svelte-kit/README.md
index e19fbd32..877f0d95 100644
--- a/packages/svelte-kit/README.md
+++ b/packages/svelte-kit/README.md
@@ -45,8 +45,7 @@ If your stores use navigation, set up server navigation once in the root server
 // src/routes/+layout.server.ts
 import { provide } from '@nano_kit/store'
 import {
-  Location$,
-  Navigation$,
+  LocationNavigation$,
   serverNavigation,
   setDehydrationContext
 } from '@nano_kit/svelte-kit'
@@ -54,11 +53,8 @@ import { routes } from '$lib/routes'
 import type { LayoutServerLoad } from './$types'
 
 export const load: LayoutServerLoad = () => {
-  const [location, navigation] = serverNavigation(routes)
-
   const contextRef = setDehydrationContext([
-    provide(Location$, location),
-    provide(Navigation$, navigation)
+    provide(LocationNavigation$, serverNavigation(routes))
   ])
 
   return {
@@ -74,8 +70,7 @@ Set up browser navigation and hydration in the root layout:
 <script lang="ts">
   import { provide } from '@nano_kit/store'
   import {
-    Location$,
-    Navigation$,
+    LocationNavigation$,
     Link,
     getKitNavigation,
     setHydrationContext
@@ -83,13 +78,11 @@ Set up browser navigation and hydration in the root layout:
   import { routes } from '$lib/routes'
 
   let { data, children } = $props()
-  const [location, navigation] = getKitNavigation(routes)
 
   setHydrationContext({
     fromRef: () => data.contextRef,
     context: [
-      provide(Location$, location),
-      provide(Navigation$, navigation)
+      provide(LocationNavigation$, getKitNavigation(routes))
     ]
   })
 </script>
diff --git a/website/astro.config.js b/website/astro.config.js
index 4252ed80..a05bc9f4 100644
--- a/website/astro.config.js
+++ b/website/astro.config.js
@@ -123,6 +123,12 @@ export default defineConfig({
             directory: 'router'
           }
         },
+        {
+          label: 'Internationalization',
+          autogenerate: {
+            directory: 'intl'
+          }
+        },
         {
           label: 'SSR',
           autogenerate: {
diff --git a/website/src/content/docs/examples/rick-and-morty.mdx b/website/src/content/docs/examples/rick-and-morty.mdx
index 4211ce48..db8cb3a7 100644
--- a/website/src/content/docs/examples/rick-and-morty.mdx
+++ b/website/src/content/docs/examples/rick-and-morty.mdx
@@ -5,7 +5,7 @@ sidebar:
   order: 4
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components'
+import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'
 
 This example shows a larger encyclopedia app built around routing, data loading, and server-side rendering.
 
@@ -49,8 +49,10 @@ Compare the tabs to see the same application model running with React SSR, Svelt
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/svelte-kit-nano_kit-ssr)
   </TabItem>
   <TabItem label='Next.js App Router' icon='vercel'>
+    <Aside type='caution'>This Next.js example may not always run correctly in the StackBlitz sandbox because of WebContainers runtime differences. If that happens, use the GitHub source locally.</Aside>
+
     <iframe
-      src='https://codesandbox.io/p/sandbox/github/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-app-nano_kit-ssr?embed=1&file=%2Fsrc%2Fapp%2Flayout.tsx'
+      src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-app-nano_kit-ssr?embed=1&file=src%2Fapp%2Flayout.tsx&view=both'
       loading='lazy'
       style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
       title='Rick and Morty Encyclopedia built with Next.js App Router and Nano Kit'
@@ -61,8 +63,10 @@ Compare the tabs to see the same application model running with React SSR, Svelt
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-app-nano_kit-ssr)
   </TabItem>
   <TabItem label='Next.js Pages Router' icon='vercel'>
+    <Aside type='caution'>This Next.js example may not always run correctly in the StackBlitz sandbox because of WebContainers runtime differences. If that happens, use the GitHub source locally.</Aside>
+
     <iframe
-      src='https://codesandbox.io/p/sandbox/github/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-pages-nano_kit-ssr?embed=1&file=%2Fsrc%2Fpages%2F_app.tsx'
+      src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-pages-nano_kit-ssr?embed=1&file=src%2Fpages%2F_app.tsx&view=both'
       loading='lazy'
       style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
       title='Rick and Morty Encyclopedia built with Next.js Pages Router and Nano Kit'
diff --git a/website/src/content/docs/integrations/next-router.mdx b/website/src/content/docs/integrations/next-router.mdx
index de12853d..fa672032 100644
--- a/website/src/content/docs/integrations/next-router.mdx
+++ b/website/src/content/docs/integrations/next-router.mdx
@@ -9,7 +9,7 @@ import { Tabs, TabItem, Code } from '@astrojs/starlight/components'
 
 The `@nano_kit/next-router` package provides Next.js integration for `@nano_kit/router`. It re-exports everything from `@nano_kit/react-router` and adds Next.js-specific navigation providers, a router-aware `Link`, and helpers for the Pages Router.
 
-For shared router APIs such as [`useLocation`](/integrations/react-router#uselocation), [`useNavigation`](/integrations/react-router#usenavigation), [`usePaths`](/integrations/react-router#usepaths), [`useListenLinks`](/integrations/react-router#usenavigationlistenlinks--uselistenlinks), see the [React Router integration](/integrations/react-router).
+For shared router APIs such as [`useLocation`](/integrations/react-router#uselocation), [`useNavigation`](/integrations/react-router#usenavigation), [`usePaths`](/integrations/react-router#usepaths), [`useListenLinks`](/integrations/react-router#usenavigationlistenlinks-uselistenlinks), see the [React Router integration](/integrations/react-router).
 
 ## Installation
 
@@ -45,7 +45,7 @@ The Next.js setup differs slightly between the App Router and the Pages Router.
 
 ### App Router
 
-Use `NextNavigation` in the root layout to create navigation for the current RSC request and provide `Location$` / `Navigation$` to client components.
+Use `NextNavigation` in the root layout to create navigation for the current RSC request and provide `LocationNavigation$` to client components. `Location$` and `Navigation$` are derived from this shared token.
 
 ```tsx
 import type { Metadata } from 'next'
@@ -137,17 +137,15 @@ For SSR data loading in `getServerSideProps`, create a virtual navigation for th
 ```tsx
 import type { GetServerSideProps } from 'next'
 import { dehydrate, provide } from '@nano_kit/store'
-import { Location$, Navigation$, virtualNavigation } from '@nano_kit/next-router'
+import { LocationNavigation$, virtualNavigation } from '@nano_kit/next-router'
 import { routes } from '@/stores/router'
 import CharactersPage, { Stores$ } from '@/ui/pages/Characters'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const [$location, navigation] = virtualNavigation(context.resolvedUrl, routes)
   const dehydrated = await dehydrate(
     Stores$,
     [
-      provide(Location$, $location),
-      provide(Navigation$, navigation)
+      provide(LocationNavigation$, virtualNavigation(context.resolvedUrl, routes))
     ]
   )
 
@@ -167,7 +165,7 @@ export default function Page() {
 
 ### `NextNavigation`
 
-`NextNavigation` is an async RSC component for the App Router. It creates navigation for the current request, provides `Location$` and `Navigation$`, and renders `NextNavigationProvider` on the client.
+`NextNavigation` is an async RSC component for the App Router. It creates navigation for the current request, provides `LocationNavigation$`, and renders `NextNavigationProvider` on the client.
 
 Server-side `navigation.push()` and `navigation.replace()` are mapped to Next.js redirects. The `prerenderable` prop skips [Next.js `connection()`](https://nextjs.org/docs/app/api-reference/functions/connection) and allows the route to stay statically prerenderable, but in that mode `searchParams` are not available during server render.
 
@@ -190,7 +188,7 @@ export default function Layout({ children }: {
 
 ### `NextNavigationProvider`
 
-`NextNavigationProvider` is the client-side provider used by the Pages Router and by `NextNavigation` after hydration. It creates an `InjectionContext` with `Location$` and `Navigation$` only when a fresh client navigation context is needed.
+`NextNavigationProvider` is the client-side provider used by the Pages Router and by `NextNavigation` after hydration. It creates an `InjectionContext` with `LocationNavigation$` only when a fresh client navigation context is needed.
 
 ```tsx
 import { NextNavigationProvider } from '@nano_kit/next-router'
@@ -234,8 +232,7 @@ These helpers are for the Pages Router.
 import type { GetServerSideProps } from 'next'
 import { InjectionContext, dehydrate, provide } from '@nano_kit/store'
 import {
-  Location$,
-  Navigation$,
+  LocationNavigation$,
   notFound,
   redirect,
   virtualNavigation
@@ -245,10 +242,8 @@ import { User$ } from '@/stores/user'
 import UserPage, { Stores$ } from '@/ui/pages/User'
 
 export const getServerSideProps: GetServerSideProps = async (nextContext) => {
-  const [$location, navigation] = virtualNavigation(nextContext.resolvedUrl, routes)
   const context = new InjectionContext([
-    provide(Location$, $location),
-    provide(Navigation$, navigation)
+    provide(LocationNavigation$, virtualNavigation(nextContext.resolvedUrl, routes))
   ])
   const dehydrated = await dehydrate(Stores$, context)
   const { $user } = context.get(User$)
diff --git a/website/src/content/docs/integrations/next.mdx b/website/src/content/docs/integrations/next.mdx
index ea514b71..02d592d4 100644
--- a/website/src/content/docs/integrations/next.mdx
+++ b/website/src/content/docs/integrations/next.mdx
@@ -208,17 +208,15 @@ If the page uses `@nano_kit/router`, create a virtual navigation for the current
 ```tsx
 import type { GetServerSideProps } from 'next'
 import { dehydrate, provide } from '@nano_kit/store'
-import { Location$, Navigation$, virtualNavigation } from '@nano_kit/next-router'
+import { LocationNavigation$, virtualNavigation } from '@nano_kit/next-router'
 import { routes } from '@/stores/router'
 import CharactersPage, { Stores$ } from '@/ui/pages/Characters'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const [$location, navigation] = virtualNavigation(context.resolvedUrl, routes)
   const dehydrated = await dehydrate(
     Stores$,
     [
-      provide(Location$, $location),
-      provide(Navigation$, navigation)
+      provide(LocationNavigation$, virtualNavigation(context.resolvedUrl, routes))
     ]
   )
 
@@ -240,7 +238,7 @@ If you want the Pages Router to behave like static dehydration in the App Router
 import type { GetServerSideProps } from 'next'
 import { dehydrate, provide } from '@nano_kit/store'
 import { isFlight } from '@nano_kit/react'
-import { Location$, Navigation$, virtualNavigation } from '@nano_kit/next-router'
+import { LocationNavigation$, virtualNavigation } from '@nano_kit/next-router'
 import { routes } from '@/stores/router'
 import CharactersPage, { Stores$ } from '@/ui/pages/Characters'
 
@@ -248,13 +246,10 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   let dehydrated
 
   if (!isFlight(context.req.headers)) {
-    const [$location, navigation] = virtualNavigation(context.resolvedUrl, routes)
-
     dehydrated = await dehydrate(
       Stores$,
       [
-        provide(Location$, $location),
-        provide(Navigation$, navigation)
+        provide(LocationNavigation$, virtualNavigation(context.resolvedUrl, routes))
       ]
     )
   }
@@ -279,4 +274,4 @@ Without `@nano_kit/router`, call `dehydrate(Stores$)` without navigation provide
 - `@nano_kit/next-router` is only needed when the app uses `@nano_kit/router` inside Next.js.
 - `@nano_kit/router` remains the place where routes, pages, layouts, and navigation logic are declared.
 
-If you need API-level details for [`NextNavigation`](/integrations/next-router#nextnavigation), [`NextNavigationProvider`](/integrations/next-router#nextnavigationprovider), [`Link`](/integrations/next-router#link), or Pages Router helpers such as [`redirect()`](/integrations/next-router#redirect--notfound) and [`notFound()`](/integrations/next-router#redirect--notfound), see [Next.js Router integration](/integrations/next-router).
+If you need API-level details for [`NextNavigation`](/integrations/next-router#nextnavigation), [`NextNavigationProvider`](/integrations/next-router#nextnavigationprovider), [`Link`](/integrations/next-router#link), or Pages Router helpers such as [`redirect()`](/integrations/next-router#redirect-notfound) and [`notFound()`](/integrations/next-router#redirect-notfound), see [Next.js Router integration](/integrations/next-router).
diff --git a/website/src/content/docs/integrations/preact-router.mdx b/website/src/content/docs/integrations/preact-router.mdx
index 1adba430..aa469c25 100644
--- a/website/src/content/docs/integrations/preact-router.mdx
+++ b/website/src/content/docs/integrations/preact-router.mdx
@@ -72,7 +72,7 @@ If you want to use DI-based setup, pass the router tokens through `InjectionCont
 import { render } from 'preact'
 import { provide } from '@nano_kit/store'
 import { InjectionContextProvider } from '@nano_kit/preact'
-import { App, browserNavigation, router, Location$, Navigation$, Page$, Pages$ } from '@nano_kit/preact-router'
+import { App, browserNavigation, router, LocationNavigation$, Page$, Pages$ } from '@nano_kit/preact-router'
 import { pages } from './pages'
 import { routes } from './routes'
 
@@ -84,15 +84,15 @@ declare module '@nano_kit/router' {
 }
 
 /* Create navigation and page accessor */
-const [$location, navigation] = browserNavigation(routes)
+const locationNavigation = browserNavigation(routes)
+const [$location] = locationNavigation
 const $page = router($location, pages)
 
 /* Render App with DI */
 render((
   <InjectionContextProvider
     context={[
-      provide(Location$, $location),
-      provide(Navigation$, navigation),
+      provide(LocationNavigation$, locationNavigation),
       provide(Page$, $page) // required for App component
     ]}
   >
diff --git a/website/src/content/docs/integrations/preact-ssr.mdx b/website/src/content/docs/integrations/preact-ssr.mdx
index 2d11482f..9f4fda22 100644
--- a/website/src/content/docs/integrations/preact-ssr.mdx
+++ b/website/src/content/docs/integrations/preact-ssr.mdx
@@ -88,7 +88,8 @@ import { Steps, Tabs, TabItem, Code, Aside } from '@astrojs/starlight/components
    app.get('*', async (req, res) => {
      const result = await renderer.render(req.url, {
        cookie: req.headers.cookie,
-       acceptLanguage: req.headers['accept-language']
+       acceptLanguage: req.headers['accept-language'],
+       userAgent: req.headers['user-agent']
      })
 
      if (result.setCookieHeaders) {
@@ -115,23 +116,40 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 ### `cookieStore`
 
-Use `cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
+Use `inject.cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
 
 ```js
 ssr({
   index: 'src/index.tsx',
-  cookieStore: true
+  inject: {
+    cookieStore: true
+  }
 })
 ```
 
 ### `browserLocale`
 
-Use `browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
+Use `inject.browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
 
 ```js
 ssr({
   index: 'src/index.tsx',
-  browserLocale: true
+  inject: {
+    browserLocale: true
+  }
+})
+```
+
+### `userAgent`
+
+Use `inject.userAgent: true` when the renderer should provide request-bound `UserAgent$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer reads the incoming `User-Agent` header, so universal stores can inject `UserAgent$` and read a user agent string on the server and in the browser.
+
+```js
+ssr({
+  index: 'src/index.tsx',
+  inject: {
+    userAgent: true
+  }
 })
 ```
 
@@ -154,7 +172,7 @@ class AppRenderer extends PreactRenderer {
 export const renderer = new AppRenderer({
   base: import.meta.env.BASE_URL,
   manifestPath: import.meta.env.MANIFEST,
-  cookieStore: import.meta.env.SSR_COOKIE_STORE,
+  inject: import.meta.env.SSR_INJECT,
   routes,
   pages
 })
diff --git a/website/src/content/docs/integrations/react-router.mdx b/website/src/content/docs/integrations/react-router.mdx
index 1b7dfb6b..20a88a03 100644
--- a/website/src/content/docs/integrations/react-router.mdx
+++ b/website/src/content/docs/integrations/react-router.mdx
@@ -72,7 +72,7 @@ If you want to use DI-based setup, pass the router tokens through `InjectionCont
 import { createRoot } from 'react-dom/client'
 import { provide } from '@nano_kit/store'
 import { InjectionContextProvider } from '@nano_kit/react'
-import { App, browserNavigation, router, Location$, Navigation$, Page$, Pages$ } from '@nano_kit/react-router'
+import { App, browserNavigation, router, LocationNavigation$, Page$, Pages$ } from '@nano_kit/react-router'
 import { pages } from './pages'
 import { routes } from './routes'
 
@@ -84,15 +84,15 @@ declare module '@nano_kit/router' {
 }
 
 /* Create navigation and page accessor */
-const [$location, navigation] = browserNavigation(routes)
+const locationNavigation = browserNavigation(routes)
+const [$location] = locationNavigation
 const $page = router($location, pages)
 
 /* Render App with DI */
 createRoot(document.getElementById('root')!).render(
   <InjectionContextProvider
     context={[
-      provide(Location$, $location),
-      provide(Navigation$, navigation),
+      provide(LocationNavigation$, locationNavigation),
       provide(Page$, $page) // required for App component
     ]}
   >
diff --git a/website/src/content/docs/integrations/react-ssr.mdx b/website/src/content/docs/integrations/react-ssr.mdx
index 482d5de6..1bda9ea5 100644
--- a/website/src/content/docs/integrations/react-ssr.mdx
+++ b/website/src/content/docs/integrations/react-ssr.mdx
@@ -88,7 +88,8 @@ import { Steps, Tabs, TabItem, Code, Aside } from '@astrojs/starlight/components
    app.get('*', async (req, res) => {
      const result = await renderer.render(req.url, {
        cookie: req.headers.cookie,
-       acceptLanguage: req.headers['accept-language']
+       acceptLanguage: req.headers['accept-language'],
+       userAgent: req.headers['user-agent']
      })
 
      if (result.setCookieHeaders) {
@@ -115,23 +116,40 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 ### `cookieStore`
 
-Use `cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
+Use `inject.cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
 
 ```js
 ssr({
   index: 'src/index.ts',
-  cookieStore: true
+  inject: {
+    cookieStore: true
+  }
 })
 ```
 
 ### `browserLocale`
 
-Use `browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
+Use `inject.browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
 
 ```js
 ssr({
   index: 'src/index.ts',
-  browserLocale: true
+  inject: {
+    browserLocale: true
+  }
+})
+```
+
+### `userAgent`
+
+Use `inject.userAgent: true` when the renderer should provide request-bound `UserAgent$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer reads the incoming `User-Agent` header, so universal stores can inject `UserAgent$` and read a user agent string on the server and in the browser.
+
+```js
+ssr({
+  index: 'src/index.ts',
+  inject: {
+    userAgent: true
+  }
 })
 ```
 
@@ -154,7 +172,7 @@ class AppRenderer extends ReactRenderer {
 export const renderer = new AppRenderer({
   base: import.meta.env.BASE_URL,
   manifestPath: import.meta.env.MANIFEST,
-  cookieStore: import.meta.env.SSR_COOKIE_STORE,
+  inject: import.meta.env.SSR_INJECT,
   routes,
   pages
 })
diff --git a/website/src/content/docs/integrations/svelte-kit.mdx b/website/src/content/docs/integrations/svelte-kit.mdx
index 9a28e10f..8a9ba6f7 100644
--- a/website/src/content/docs/integrations/svelte-kit.mdx
+++ b/website/src/content/docs/integrations/svelte-kit.mdx
@@ -136,7 +136,7 @@ The main SvelteKit integration point is store dehydration in `+page.server.ts` a
 
 ## Navigation
 
-Set up navigation only when stores or components use Nano Kit router dependencies such as `Location$`, `Navigation$`, `Link`, or typed route navigation.
+Set up navigation only when stores or components use Nano Kit router dependencies such as `Location$`, `Navigation$`, `Link`, or typed route navigation. Provide `LocationNavigation$` to set up both `Location$` and `Navigation$` at once.
 
 ### Server Navigation
 
@@ -146,8 +146,7 @@ In the root server layout, provide request navigation.
 // src/routes/+layout.server.ts
 import { provide } from '@nano_kit/store'
 import {
-  Location$,
-  Navigation$,
+  LocationNavigation$,
   serverNavigation,
   setDehydrationContext
 } from '@nano_kit/svelte-kit'
@@ -155,10 +154,8 @@ import { routes } from '$lib/stores/router'
 import type { LayoutServerLoad } from './$types'
 
 export const load: LayoutServerLoad = () => {
-  const [location, navigation] = serverNavigation(routes)
   const contextRef = setDehydrationContext([
-    provide(Location$, location),
-    provide(Navigation$, navigation)
+    provide(LocationNavigation$, serverNavigation(routes))
   ])
 
   return {
@@ -177,21 +174,18 @@ In the root layout component, provide browser navigation.
   import { provide } from '@nano_kit/store'
   import {
     Link,
-    Location$,
-    Navigation$,
+    LocationNavigation$,
     getKitNavigation,
     setHydrationContext
   } from '@nano_kit/svelte-kit'
   import { routes } from '$lib/stores/router'
 
   let { data, children } = $props()
-  const [location, navigation] = getKitNavigation(routes)
 
   setHydrationContext({
     fromRef: () => data.contextRef,
     context: [
-      provide(Location$, location),
-      provide(Navigation$, navigation)
+      provide(LocationNavigation$, getKitNavigation(routes))
     ]
   })
 </script>
diff --git a/website/src/content/docs/integrations/svelte-router.mdx b/website/src/content/docs/integrations/svelte-router.mdx
index 55ea87ce..101c080f 100644
--- a/website/src/content/docs/integrations/svelte-router.mdx
+++ b/website/src/content/docs/integrations/svelte-router.mdx
@@ -72,7 +72,7 @@ If you want to use DI-based setup, pass the router tokens through `setInjectionC
 ```svelte
 <script module lang="ts">
   import '@nano_kit/svelte'
-  import { App, browserNavigation, router, Location$, Navigation$, Page$, Pages$ } from '@nano_kit/svelte-router'
+  import { App, browserNavigation, router, LocationNavigation$, Page$, Pages$ } from '@nano_kit/svelte-router'
   import { pages } from './pages'
   import { routes } from './routes'
 
@@ -84,7 +84,8 @@ If you want to use DI-based setup, pass the router tokens through `setInjectionC
   }
 
   /* Create navigation and page accessor */
-  const [location, navigation] = browserNavigation(routes)
+  const locationNavigation = browserNavigation(routes)
+  const [location] = locationNavigation
   const page = router(location, pages)
 </script>
 
@@ -93,8 +94,7 @@ If you want to use DI-based setup, pass the router tokens through `setInjectionC
   import { setInjectionContext } from '@nano_kit/svelte'
 
   setInjectionContext([
-    provide(Location$, location),
-    provide(Navigation$, navigation),
+    provide(LocationNavigation$, locationNavigation),
     provide(Page$, page) // required for App component
   ])
 </script>
diff --git a/website/src/content/docs/integrations/svelte-ssr.mdx b/website/src/content/docs/integrations/svelte-ssr.mdx
index 74215d64..9e4c25bb 100644
--- a/website/src/content/docs/integrations/svelte-ssr.mdx
+++ b/website/src/content/docs/integrations/svelte-ssr.mdx
@@ -88,7 +88,8 @@ import { Steps, Tabs, TabItem, Code, Aside } from '@astrojs/starlight/components
    app.get('*', async (req, res) => {
      const result = await renderer.render(req.url, {
        cookie: req.headers.cookie,
-       acceptLanguage: req.headers['accept-language']
+       acceptLanguage: req.headers['accept-language'],
+       userAgent: req.headers['user-agent']
      })
 
      if (result.setCookieHeaders) {
@@ -115,23 +116,40 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 ### `cookieStore`
 
-Use `cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
+Use `inject.cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
 
 ```js
 ssr({
   index: 'src/index.ts',
-  cookieStore: true
+  inject: {
+    cookieStore: true
+  }
 })
 ```
 
 ### `browserLocale`
 
-Use `browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
+Use `inject.browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
 
 ```js
 ssr({
   index: 'src/index.ts',
-  browserLocale: true
+  inject: {
+    browserLocale: true
+  }
+})
+```
+
+### `userAgent`
+
+Use `inject.userAgent: true` when the renderer should provide request-bound `UserAgent$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer reads the incoming `User-Agent` header, so universal stores can inject `UserAgent$` and read a user agent string on the server and in the browser.
+
+```js
+ssr({
+  index: 'src/index.ts',
+  inject: {
+    userAgent: true
+  }
 })
 ```
 
@@ -154,7 +172,7 @@ class AppRenderer extends SvelteRenderer {
 export const renderer = new AppRenderer({
   base: import.meta.env.BASE_URL,
   manifestPath: import.meta.env.MANIFEST,
-  cookieStore: import.meta.env.SSR_COOKIE_STORE,
+  inject: import.meta.env.SSR_INJECT,
   routes,
   pages
 })
diff --git a/website/src/content/docs/intl/api.mdx b/website/src/content/docs/intl/api.mdx
new file mode 100644
index 00000000..baaaa83b
--- /dev/null
+++ b/website/src/content/docs/intl/api.mdx
@@ -0,0 +1,440 @@
+---
+title: API
+description: "Reference for @nano_kit/intl formats, helpers, and composition patterns."
+sidebar:
+  order: 3
+---
+
+This page describes the public building blocks exported by `@nano_kit/intl`: context helpers, message formats, translation utilities, and common composition patterns.
+
+## Context
+
+### `intl($locale, loader)`
+
+Creates an internationalization context with a bound `messages` method.
+
+```ts
+import { intl } from '@nano_kit/intl'
+
+const { messages, $loading, $error } = intl(
+  $locale,
+  loader
+)
+```
+
+The loader can return full translation data or load namespaces on demand.
+
+### `messages(namespace, scheme?)`
+
+Creates reactive messages for a namespace.
+
+```ts
+const [$t, $pending, $error] = messages('home', {
+  title: text(),
+  attendees: plural('count')
+})
+```
+
+## Basic Formats
+
+### `raw(fallback?)`
+
+Returns the input value as-is. Use it for objects, arrays, dictionaries, or values that do not need formatting.
+
+```ts
+const [$t] = messages('home', {
+  categories: raw<Record<string, string>>()
+})
+
+$t().categories?.conference
+```
+
+### `text(fallback?)`
+
+Formats string messages and optional string fallbacks.
+
+```ts
+const [$t] = messages('layout', {
+  title: text('Untitled')
+})
+
+$t().title
+// string | 'Untitled'
+```
+
+### `uppercase(format)`, `lowercase(format)`, `capitalize(format)`
+
+Transforms text formatter output with the active locale.
+
+```ts
+const [$t] = messages('home', {
+  title: capitalize(text())
+})
+
+$t().title
+// 'Hello'
+```
+
+## Parameterized Messages
+
+### `params(params, preformat?)`
+
+Replaces `{name}` placeholders with formatted values.
+
+```ts
+const [$t] = messages('home', {
+  greeting: params({
+    name: text()
+  })
+})
+
+$t().greeting({
+  name: 'Ada'
+})
+```
+
+`params` can preformat another formatter before replacing placeholders. That makes it possible to share parameters across nested formats.
+
+```ts
+const translations = {
+  home: {
+    mailbox: {
+      one: '{name} has {count} message',
+      other: '{name} has {count} messages'
+    }
+  }
+}
+
+const [$t] = messages('home', {
+  mailbox: params({
+    name: text()
+  }, plural('count', forms({
+    one: text(),
+    other: text()
+  })))
+})
+
+$t().mailbox({
+  name: 'Ada',
+  count: 2
+})
+// 'Ada has 2 messages'
+```
+
+## Callable Formatter Messages
+
+### `format(type)`
+
+Use `format()` when the message should format an application value instead of formatting a value from translation data. It binds another format to the current locale and returns a callable message.
+
+```ts
+const [$t] = messages('home', {
+  formatPrice: format(number({
+    style: 'currency',
+    currency: 'USD'
+  })),
+  eventDate: format(capitalize(datetime({
+    dateStyle: 'medium',
+    timeZone: 'UTC'
+  })))
+})
+
+$t().formatPrice(12)
+// '$12.00'
+
+$t().eventDate(new Date('2024-01-02T00:00:00.000Z'))
+// 'Jan 2, 2024'
+```
+
+This is useful for dates, numbers, and other UI values that come from app state.
+
+## Intl Formats
+
+Intl formats can be used inside `params(...)` for translated templates, or wrapped with `format(...)` when the value comes from runtime state, API data, or a database.
+
+### `number(fallback?, options?)`
+
+Formats numbers with `Intl.NumberFormat`.
+
+```ts
+const [$t] = messages('stats', {
+  formatCount: format(number({
+    maximumFractionDigits: 1
+  }))
+})
+
+$t().formatCount(1234.56)
+// '1,234.6'
+```
+
+### `datetime(fallback?, options?)`
+
+Formats `Date` or timestamp values with `Intl.DateTimeFormat`.
+
+```ts
+const [$t] = messages('event', {
+  formatDate: format(datetime({
+    dateStyle: 'medium',
+    timeZone: 'UTC'
+  }))
+})
+
+$t().formatDate(new Date('2024-01-02T00:00:00.000Z'))
+// 'Jan 2, 2024'
+```
+
+### `relativetime(fallback?, options?)`
+
+Formats relative time values with `Intl.RelativeTimeFormat`.
+
+```ts
+const [$t] = messages('event', {
+  formatStartsIn: format(relativetime({
+    unit: 'day',
+    numeric: 'auto'
+  }))
+})
+
+$t().formatStartsIn(1)
+// 'tomorrow'
+```
+
+### `duration(fallback?, options?)`
+
+Formats duration objects with `Intl.DurationFormat`.
+
+```ts
+const [$t] = messages('media', {
+  formatRuntime: format(duration({
+    style: 'short'
+  }))
+})
+
+$t().formatRuntime({
+  hours: 1,
+  minutes: 30
+})
+// '1 hr, 30 min'
+```
+
+### `list(fallback?, options?)`
+
+Formats string iterables with `Intl.ListFormat`.
+
+```ts
+const [$t] = messages('filters', {
+  formatTags: format(list({
+    type: 'conjunction'
+  }))
+})
+
+$t().formatTags(['react', 'ssr', 'signals'])
+// 'react, ssr, and signals'
+```
+
+### `range(format, fallback?, options?)`
+
+Formats ranges through an Intl formatter that supports `formatRange`.
+
+```ts
+const [$t] = messages('price', {
+  formatAmount: format(range(number, {
+    style: 'currency',
+    currency: 'USD'
+  }))
+})
+
+$t().formatAmount([1, 5])
+// '$1.00 – $5.00'
+```
+
+## Match And Plural
+
+### `plural(param, forms?)`
+
+Matches an LDML plural form with `Intl.PluralRules`. If `forms(...)` is omitted, `plural` reads forms directly from the translation input.
+
+```ts
+const [$t] = messages('home', {
+  attendees: plural('count')
+})
+
+$t().attendees({
+  count: 3
+})
+// '3 going'
+
+/* Also works with the value itself. */
+$t().attendees(3)
+// '3 going'
+```
+
+Use `forms(...)` when nested forms need their own formatters.
+
+```ts
+const [$t] = messages('home', {
+  attendees: plural('count', forms({
+    one: text('{count} attendee'),
+    other: text('{count} attendees')
+  }))
+})
+
+$t().attendees({
+  count: 1
+})
+// '1 attendee'
+```
+
+Exact numeric forms are checked before plural rules.
+
+```ts
+const [$t] = messages('home', {
+  guests: plural('count', forms({
+    0: text('No guests'),
+    one: text('{count} guest'),
+    other: text('{count} guests')
+  }))
+})
+
+$t().guests({
+  count: 0
+})
+// 'No guests'
+```
+
+### `match(param, cases?)`
+
+Matches a case by parameter value. If `cases(...)` is omitted, `match` reads cases directly from the translation input.
+
+```ts
+const [$t] = messages('invite', {
+  message: match('gender')
+})
+
+$t().message({
+  gender: 'female'
+})
+// 'She invited female.'
+
+/* Also works with the value itself. */
+$t().message('female')
+// 'She invited female.'
+```
+
+Use `cases(...)` when cases need their own formatters.
+
+```ts
+const [$t] = messages('account', {
+  status: match('status', cases({
+    active: text('Active {status}'),
+    disabled: text('Disabled {status}')
+  }))
+})
+
+$t().status({
+  status: 'active'
+})
+// 'Active active'
+```
+
+`match` can compose with `plural` when one case depends on another formatter.
+
+```ts
+const [$t] = messages('tasks', {
+  message: plural('count', forms({
+    one: match('gender'),
+    other: match('gender')
+  }))
+})
+
+$t().message({
+  gender: 'female',
+  count: 3
+})
+// 'She has 3 tasks'
+```
+
+`match` can also wrap `plural` when the translation shape starts with cases and nests forms inside them.
+
+```ts
+const [$t] = messages('tasks', {
+  message: match('gender', cases({
+    male: plural('count', forms({
+      one: text('He has one task'),
+      other: text('He has {count} tasks')
+    })),
+    female: plural('count', forms({
+      one: text('She has one task'),
+      other: text('She has {count} tasks')
+    }))
+  }))
+})
+
+$t().message({
+  gender: 'female',
+  count: 3
+})
+// 'She has 3 tasks'
+```
+
+## Rich Text
+
+### `rich(tags)` / `rich(fallback, tags)`
+
+Maps lightweight tags inside translated strings to rich chunks.
+
+```ts
+const [$t] = messages('docs', {
+  message: rich('Read <link>the docs</link>', {
+    link: chunks => <a href='/docs'>{chunks}</a>
+  })
+})
+
+$t().message
+// ['Read ', <a href='/docs'>the docs</a>]
+```
+
+### `markup(tags)` / `markup(fallback, tags)`
+
+Maps lightweight tags to strings.
+
+```ts
+const [$t] = messages('docs', {
+  message: markup('Read <strong>the docs</strong>', {
+    strong: chunks => `<strong>${chunks}</strong>`
+  })
+})
+
+$t().message
+// 'Read <strong>the docs</strong>'
+```
+
+## Utilities
+
+### `deflat(input, depth?)`
+
+Turns dotted object keys into nested objects.
+
+```ts
+const translations = deflat({
+  'layout.title': 'Event Board',
+  'home.title': 'Find your next frontend event',
+  'home.attendees.one': '{count} going',
+  'home.attendees.other': '{count} going'
+})
+```
+
+### `direction($locale)` and `getDirection(locale)`
+
+Use `direction($locale)` when the UI needs to react to left-to-right and right-to-left locales.
+
+```ts
+import { direction } from '@nano_kit/intl'
+
+const $dir = direction($locale)
+
+$dir()
+// 'ltr' or 'rtl'
+```
+
+`getDirection(locale)` is available for non-reactive code.
diff --git a/website/src/content/docs/intl/core-concepts.mdx b/website/src/content/docs/intl/core-concepts.mdx
new file mode 100644
index 00000000..2b79a8ee
--- /dev/null
+++ b/website/src/content/docs/intl/core-concepts.mdx
@@ -0,0 +1,243 @@
+---
+title: Core Concepts
+description: "Learn how @nano_kit/intl models translation data, namespaces, message schemes, and composable formats."
+sidebar:
+  order: 2
+---
+
+`@nano_kit/intl` has three main pieces:
+
+- **Translation data** - locale-specific objects grouped by namespace.
+- **Loaders** - full-data or namespace loaders that return translation data.
+- **Formats** - small functions that convert translation values into messages.
+
+## Translation Data
+
+Translations are plain locale-specific objects grouped by namespace. A namespace is usually a page, layout, feature, or shared block.
+
+```ts
+const en = {
+  layout: {
+    title: 'Event Board',
+    events: 'Events'
+  },
+  home: {
+    title: 'Find your next frontend event',
+    attendees: {
+      one: '{count} going',
+      other: '{count} going'
+    }
+  }
+}
+```
+
+If a translation pipeline exports flat dotted keys, use `deflat` to turn them into nested namespace objects.
+
+```ts
+import { deflat } from '@nano_kit/intl'
+
+const en = deflat({
+  'layout.title': 'Event Board',
+  'home.title': 'Find your next frontend event',
+  'home.attendees.one': '{count} going',
+  'home.attendees.other': '{count} going'
+})
+```
+
+When only nested namespace objects contain dotted keys, pass the depth where deflating should start.
+
+```ts
+const en = deflat({
+  home: {
+    'title': 'Find your next frontend event',
+    'attendees.one': '{count} going',
+    'attendees.other': '{count} going'
+  }
+}, 1)
+```
+
+## Namespaces
+
+A namespace is one translation object inside the full translation data.
+
+Use `messages(namespace, scheme)` to bind a namespace to the active locale:
+
+```ts
+const [$t] = messages('home', {
+  attendees: plural('count')
+})
+```
+
+## Full Data Loader
+
+A full-data loader returns the entire locale object. This is the easiest shape when translations are small, bundled, or loaded as one JSON file per locale.
+
+```ts
+import { resolved } from '@nano_kit/store'
+import { intl } from '@nano_kit/intl'
+
+export type SupportedLocale = 'en' | 'ru'
+
+export async function load(locale: SupportedLocale) {
+  return locale === 'en'
+    ? (await import('./en.json')).default
+    : (await import('./ru.json')).default
+}
+
+export type Translations = Awaited<ReturnType<typeof load>>
+
+const { messages, $loading, $error } = intl(
+  $locale,
+  resolved(() => load($locale()))
+)
+```
+
+With a full-data loader, `$loading` and `$error` describe the current locale data load.
+
+## Namespace Loader
+
+A namespace loader loads only the namespace requested by `messages()`. This is useful for code splitting translations by route or feature.
+
+```ts
+import { resolved } from '@nano_kit/store'
+import { intl } from '@nano_kit/intl'
+
+const { messages } = intl(
+  $locale,
+  namespace => resolved(() => load($locale(), namespace))
+)
+```
+
+With a namespace loader, the global `$loading` is settled because there is no single global translation request. Each `messages()` call returns its own `$pending` and `$error`.
+
+```ts
+const [$t, $pending, $error] = messages('home', {
+  title: text()
+})
+```
+
+## Typed Translation Data
+
+When the loader has a concrete return type, message types are inferred from translation data.
+
+```ts
+export type Translations = Awaited<ReturnType<typeof load>>
+
+const { messages } = intl(
+  $locale,
+  resolved(() => load($locale()))
+)
+
+const [$t] = messages('layout')
+
+$t().title
+// string | undefined
+```
+
+If only some messages need formatting, provide a partial scheme. Raw fields stay available from the inferred namespace type.
+
+```ts
+const [$t] = messages('home', {
+  attendees: plural('count'),
+  eventDate: format(datetime({
+    dateStyle: 'medium',
+    timeStyle: 'short'
+  }))
+})
+
+$t().title
+$t().attendees({ count: 25 })
+$t().eventDate(new Date())
+```
+
+## Anonymous Translation Data
+
+If translations are anonymous, for example `AnyTranslationData` from dynamically selected namespace JSON, TypeScript cannot infer concrete message fields. In this case the scheme becomes the source of message types.
+
+```ts
+import {
+  raw,
+  text,
+  plural
+} from '@nano_kit/intl'
+
+const { messages } = intl(
+  $locale,
+  namespace => resolved(() => load($locale(), namespace))
+)
+
+const [$t] = messages('home', {
+  title: text(),
+  categories: raw<Record<string, string>>(),
+  attendees: plural('count')
+})
+
+$t().title
+// string | undefined
+
+$t().categories?.conference
+// string | undefined
+```
+
+## Message Access
+
+`messages(namespace, scheme)` returns a tuple:
+
+```ts
+const [$t, $pending, $error] = messages('common', {
+  greeting: params({
+    name: text()
+  })
+})
+```
+
+Use `$t()` to read the whole namespace. Messages are also available as signal properties like `$t.$title`. For parameterized messages, `$t.key(params)` creates a computed signal. If params contain signals, the computed message subscribes to them.
+
+```ts
+$t().title
+$t.$title()
+
+$t().greeting({ name: 'Ada' })
+
+const $greeting = $t.greeting({
+  name: $name
+})
+
+$greeting()
+```
+
+## Message Schemes
+
+A scheme maps message keys to formats.
+
+```ts
+const [$t] = messages('event', {
+  pageTitle: params({
+    title: text()
+  }),
+  attendees: format(number()),
+  eventDate: format(capitalize(datetime({
+    dateStyle: 'full',
+    timeStyle: 'short'
+  })))
+})
+```
+
+Formats are checked against the translation value type when translation data is typed. For example, `datetime()` expects a `Date | number`, so using it directly for a string translation field is a type error.
+
+## Formats
+
+`@nano_kit/intl` exports small formats:
+
+- **`raw`** - returns the input value as-is.
+- **`text`** - string values and string fallbacks.
+- **`uppercase`**, **`lowercase`**, **`capitalize`** - locale-aware text transforms.
+- **`params`** - replaces `{name}` placeholders with formatted parameters.
+- **`number`**, **`datetime`**, **`relativetime`**, **`duration`**, **`list`** - wrappers around Intl formatters.
+- **`range`** - range formatting for date and number formatters.
+- **`format`** - turns a format into a callable message.
+- **`plural`** - selects an LDML plural form with `Intl.PluralRules`.
+- **`match`** - selects a case by parameter value.
+- **`rich`** and **`markup`** - map lightweight tags inside translated strings.
+
+See [API](/intl/api) for format signatures, callable formatter messages, and composition patterns.
diff --git a/website/src/content/docs/intl/index.mdx b/website/src/content/docs/intl/index.mdx
new file mode 100644
index 00000000..575b823c
--- /dev/null
+++ b/website/src/content/docs/intl/index.mdx
@@ -0,0 +1,101 @@
+---
+title: Getting Started
+description: "@nano_kit/intl is a small, reactive, and type-safe internationalization library for Nano Kit apps."
+sidebar:
+  order: 1
+---
+
+import { Tabs, TabItem, Code } from '@astrojs/starlight/components'
+
+`@nano_kit/intl` is a lightweight internationalization library for [@nano_kit/store](/store). It keeps translations reactive, lets message types flow from translation data, and composes small formatters instead of introducing a separate message syntax runtime.
+
+- **Reactive**. Locale changes update messages through [@nano_kit/store](/store) signals.
+- **Type-safe**. Message schemas are checked against translation namespace data.
+- **Composable**. Build messages from formats like `text`, `params`, `plural`, `match`, `number`, and `datetime`.
+- **Tree-shakeable**. Import only the formats your app uses.
+- **SSR-ready**. Use [@nano_kit/query](/query) for cached translation loading and dehydration.
+
+## Installation
+
+Install the package with [@nano_kit/store](/store):
+
+<Tabs syncKey='pkg'>
+  <TabItem label='pnpm' icon='pnpm'>
+    <Code frame='none' lang='bash' code='pnpm add @nano_kit/store @nano_kit/intl' />
+  </TabItem>
+  <TabItem label='Yarn' icon='seti:yarn'>
+    <Code frame='none' lang='bash' code='yarn add @nano_kit/store @nano_kit/intl' />
+  </TabItem>
+  <TabItem label='npm' icon='seti:npm'>
+    <Code frame='none' lang='bash' code='npm install @nano_kit/store @nano_kit/intl' />
+  </TabItem>
+</Tabs>
+
+## Quick Start
+
+For SPA-style apps or small demos, [`resolved`](/store/advanced/#async-state) is the simplest loader. It can return static data, a signal-derived value, or a promise.
+
+```ts
+import {
+  resolved,
+  signal
+} from '@nano_kit/store'
+import {
+  intl,
+  params,
+  plural,
+  text
+} from '@nano_kit/intl'
+
+const $locale = signal<'en' | 'de'>('en')
+
+const translations = {
+  en: {
+    common: {
+      title: 'Event Board',
+      greeting: 'Hello, {name}!',
+      unread: {
+        one: '{count} unread message',
+        other: '{count} unread messages'
+      }
+    }
+  },
+  de: {
+    common: {
+      title: 'Event Board',
+      greeting: 'Hallo, {name}!',
+      unread: {
+        one: '{count} ungelesene Nachricht',
+        other: '{count} ungelesene Nachrichten'
+      }
+    }
+  }
+}
+
+const { messages } = intl(
+  $locale,
+  resolved(() => translations[$locale()])
+)
+
+const [$t] = messages('common', {
+  greeting: params({
+    name: text()
+  }),
+  unread: plural('count')
+})
+
+$t().title
+// "Event Board"
+
+$t().greeting({
+  name: 'Ada'
+})
+// "Hello, Ada!"
+
+$t().unread({
+  count: 5
+})
+// "5 unread messages"
+
+$locale('de')
+```
diff --git a/website/src/content/docs/intl/ssr.mdx b/website/src/content/docs/intl/ssr.mdx
new file mode 100644
index 00000000..ff3de2bc
--- /dev/null
+++ b/website/src/content/docs/intl/ssr.mdx
@@ -0,0 +1,90 @@
+---
+title: SSR
+description: "Learn how to load @nano_kit/intl translations with @nano_kit/query during server rendering."
+sidebar:
+  order: 4
+---
+
+SSR apps should load translations through [@nano_kit/query](/query) so locale data can be preloaded before HTML is rendered and dehydrated into the SSR payload. Without that preload, the server can render fallback or wrong-locale messages and the client has to fix them after hydration.
+
+This page only covers the `@nano_kit/intl` side. Query client setup, SSR, and dehydration are covered in the [`@nano_kit/query` documentation](/query/ssr).
+
+## SSR Setup Example
+
+Here is an example of how to set up an `Intl$` DI store that loads translations with `@nano_kit/query` and combines them with SSR-aware locale detection and cookie storage. It usually combines:
+
+- `Locales$` from [SSR Locale](/ssr/locale) for request-bound language detection.
+- `CookieStore$` from [SSR Cookies](/ssr/cookies) for persisted locale selection.
+- `query(...)` for cached translation loading.
+- `intl($locale, loader)` for message access.
+
+```ts
+import { inject } from '@nano_kit/store'
+import { queryKey } from '@nano_kit/query'
+import { intl } from '@nano_kit/intl'
+import {
+  Locales$,
+  CookieStore$,
+  browserLocale,
+  cookieStored
+} from '@nano_kit/platform-web'
+import { Client$ } from './query'
+import {
+  type SupportedLocale,
+  type Translations,
+  load,
+  supportedLocales
+} from '../translations'
+
+const TranslationsKey = queryKey<[locale: SupportedLocale], Translations>('translations')
+
+export function Intl$() {
+  const locales = inject(Locales$)
+  const cookieStore = inject(CookieStore$)
+  const { query } = inject(Client$)
+  const $locale = cookieStored(cookieStore, {
+    name: 'locale',
+    path: '/',
+    sameSite: 'lax'
+  }, browserLocale(locales, supportedLocales, 'en'))
+  const {
+    messages,
+    $loading
+  } = intl(
+    $locale,
+    query(TranslationsKey, [$locale], load)
+  )
+
+  return {
+    supportedLocales,
+    messages,
+    $locale,
+    $loading
+  }
+}
+```
+
+...and then use `Intl$` on some app page:
+
+```ts
+/* ... */
+function Messages$() {
+  const { messages } = inject(Intl$)
+
+  return messages('event', {
+    /* ... */
+  })
+}
+
+export function Stores$() {
+  const [$t] = inject(Messages$)
+  const { $event } = inject(EventDetails$)
+
+  return [$t, $event]
+}
+/* ... */
+```
+
+In this setup, translations are loaded through [`query(...)`](/query/core-concepts/#query). The active locale is read from the [`locale` cookie](/platform/web/#cookies); when the cookie is missing, [`browserLocale(...)`](/platform/web/#locale) resolves it from the request `Accept-Language` header. [`intl(...)`](/intl/api/#intllocale-loader) then exposes [`messages`](/intl/api/#messagesnamespace-scheme), and each page or layout declares the messages it needs in a local `Messages$` store.
+
+For SSR preload, return `$t` from [`Stores$`](/router/ssr/#stores-data-dehydration) the same way you return regular data signals that should be awaited and dehydrated. This lets the renderer load translations before producing HTML, so the response already contains messages for the resolved locale.
diff --git a/website/src/content/docs/platform/web.mdx b/website/src/content/docs/platform/web.mdx
index 80164d82..de31fddf 100644
--- a/website/src/content/docs/platform/web.mdx
+++ b/website/src/content/docs/platform/web.mdx
@@ -328,3 +328,29 @@ const context = [
 ```
 
 `parseLocales` sorts languages by `q` quality and keeps declaration order when qualities are equal. Empty headers fall back to `{ language: 'en', languages: ['en'] }`.
+
+## User Agent
+
+Use `UserAgent$` when universal code needs the browser user agent string. In the browser it returns `navigator.userAgent`.
+
+```ts
+import { inject } from '@nano_kit/store'
+import { UserAgent$ } from '@nano_kit/platform-web'
+
+export function Device$() {
+  const userAgent = inject(UserAgent$)
+
+  return userAgent.includes('Mobile') ? 'mobile' : 'desktop'
+}
+```
+
+On the server, provide `UserAgent$` with the incoming `User-Agent` header.
+
+```ts
+import { provide } from '@nano_kit/store'
+import { UserAgent$ } from '@nano_kit/platform-web'
+
+const context = [
+  provide(UserAgent$, request.headers.get('user-agent') ?? '')
+]
+```
diff --git a/website/src/content/docs/router/advanced.mdx b/website/src/content/docs/router/advanced.mdx
index e5814c91..7bcd5fa2 100644
--- a/website/src/content/docs/router/advanced.mdx
+++ b/website/src/content/docs/router/advanced.mdx
@@ -347,8 +347,9 @@ The router provides global injection tokens for navigation state. Use them in st
 
 ### Tokens
 
-- **`Location$`** - provides the current location signal. Token itself doesn't have a default value — it should be provided to the context by the app.
-- **`Navigation$`** - provides the navigation API. Like `Location$`, it should be provided by the app.
+- **`LocationNavigation$`** - provides the current location signal and navigation API as one tuple. Provide this token when you want to set up both `Location$` and `Navigation$` at once.
+- **`Location$`** - provides the current location signal. Derived from `LocationNavigation$`.
+- **`Navigation$`** - provides the navigation API. Derived from `LocationNavigation$`.
 - **`Page$`** - provides the current page reference from the router. Should be provided by the app.
 - **`Pages$`** - provides the array of page definitions passed to the router. Should be provided by the app.
 - **`Paths$`** - provides typed path builder functions derived from the navigation. Depends on `Navigation$`.
diff --git a/website/src/content/docs/ssr/cookies.mdx b/website/src/content/docs/ssr/cookies.mdx
index e5bb460e..38fe1fd5 100644
--- a/website/src/content/docs/ssr/cookies.mdx
+++ b/website/src/content/docs/ssr/cookies.mdx
@@ -42,7 +42,9 @@ export default defineConfig({
     react(),
     ssr({
       index: 'src/index.tsx',
-      cookieStore: true
+      inject: {
+        cookieStore: true
+      }
     })
   ]
 })
@@ -51,7 +53,7 @@ export default defineConfig({
 The option makes the renderer create a `VirtualCookieStore` for each request and provide it through `CookieStore$`.
 
 <Aside>
-  `cookieStore: true` requires `@nano_kit/platform-web` to be installed. Keep the option disabled when the app does not read or write cookies during SSR.
+  `inject.cookieStore: true` requires `@nano_kit/platform-web` to be installed. Keep the option disabled when the app does not read or write cookies during SSR.
 </Aside>
 
 ## Direct Cookie Store Usage
diff --git a/website/src/content/docs/ssr/index.mdx b/website/src/content/docs/ssr/index.mdx
index 55190fa3..bb41474d 100644
--- a/website/src/content/docs/ssr/index.mdx
+++ b/website/src/content/docs/ssr/index.mdx
@@ -107,7 +107,7 @@ An adapter consists of three parts: a **renderer**, a **client entry**, and a **
    export const renderer = new FrameworkRenderer({
      base: import.meta.env.BASE_URL,
      manifestPath: import.meta.env.MANIFEST,
-     cookieStore: import.meta.env.SSR_COOKIE_STORE,
+     inject: import.meta.env.SSR_INJECT,
      routes,
      pages
    })
@@ -193,23 +193,40 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 #### `cookieStore`
 
-Use `cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
+Use `inject.cookieStore: true` when the renderer should provide a request-bound `CookieStore$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. See [SSR Cookies](/ssr/cookies) for the full setup, including store code and `Set-Cookie` forwarding.
 
 ```js
 ssr({
   index: 'src/index.js',
-  cookieStore: true
+  inject: {
+    cookieStore: true
+  }
 })
 ```
 
 #### `browserLocale`
 
-Use `browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
+Use `inject.browserLocale: true` when the renderer should provide request-bound `Locales$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer parses the incoming `Accept-Language` header with [`parseLocales`](/platform/web/#locale), so universal stores can inject `Locales$` and resolve the same locale shape on the server and in the browser. See [SSR Locale](/ssr/locale) for the full setup.
 
 ```js
 ssr({
   index: 'src/index.js',
-  browserLocale: true
+  inject: {
+    browserLocale: true
+  }
+})
+```
+
+#### `userAgent`
+
+Use `inject.userAgent: true` when the renderer should provide request-bound `UserAgent$` during SSR. This feature uses the optional peer package `@nano_kit/platform-web`, so install it in the app before enabling the option. The renderer reads the incoming `User-Agent` header, so universal stores can inject `UserAgent$` and read a user agent string on the server and in the browser.
+
+```js
+ssr({
+  index: 'src/index.js',
+  inject: {
+    userAgent: true
+  }
 })
 ```
 
@@ -225,7 +242,11 @@ For production, you need to write your own HTTP server that imports the renderer
 import { renderer } from './dist/renderer/index.js'
 
 app.get('*', async (req, res) => {
-  const result = await renderer.render(req.url, req.headers.cookie)
+  const result = await renderer.render(req.url, {
+    cookie: req.headers.cookie,
+    acceptLanguage: req.headers['accept-language'],
+    userAgent: req.headers['user-agent']
+  })
 
   if (result.setCookieHeaders) {
     res.setHeader('Set-Cookie', result.setCookieHeaders)
diff --git a/website/src/content/docs/ssr/locale.mdx b/website/src/content/docs/ssr/locale.mdx
index 09bedf42..26583fc9 100644
--- a/website/src/content/docs/ssr/locale.mdx
+++ b/website/src/content/docs/ssr/locale.mdx
@@ -42,7 +42,9 @@ export default defineConfig({
     react(),
     ssr({
       index: 'src/index.tsx',
-      browserLocale: true
+      inject: {
+        browserLocale: true
+      }
     })
   ]
 })
@@ -51,7 +53,7 @@ export default defineConfig({
 The option makes the renderer parse the incoming `Accept-Language` header and provide the result through `Locales$`.
 
 <Aside>
-  `browserLocale: true` requires `@nano_kit/platform-web` to be installed. Keep the option disabled when the app does not resolve locale during SSR.
+  `inject.browserLocale: true` requires `@nano_kit/platform-web` to be installed. Keep the option disabled when the app does not resolve locale during SSR.
 </Aside>
 
 ## Usage
@@ -105,7 +107,7 @@ app.get('*', async (req, res) => {
 })
 ```
 
-The Vite dev server passes this header automatically when `browserLocale: true` is enabled.
+The Vite dev server passes this header automatically when `inject.browserLocale: true` is enabled.
 
 ## Low-Level Usage