docs: title code blocks by their project files

Author: dangreen

todo.txt

@@ -1,9 +1,7 @@
 - tweak colors on the website
 - no-magic-numbers pain
-- correct sandbox for session example
 - inspect object copies
 - check === / !== undefined ? perf
-- complete guide
 
 ## Agera/Kida/Store
 

website/src/content/docs/articles/april-update.mdx

@@ -15,7 +15,7 @@ For React apps, [`@nano_kit/react-ssr`](/integrations/react-ssr) is the main new
 
 In practice, the setup starts with the plugin:
 
-```js
+```js title="vite.config.js"
 import ssr from '@nano_kit/react-ssr/vite-plugin'
 
 export default {
@@ -58,7 +58,7 @@ For production, it does not generate a complete HTTP server. You bring your own
 
 For example, a small Hono server can look like this:
 
-```js
+```js title="src/server.js"
 import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
 import { Hono } from 'hono'

website/src/content/docs/integrations/preact-ssr.mdx

@@ -118,7 +118,7 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.tsx',
   inject: {
@@ -131,7 +131,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.tsx',
   inject: {
@@ -144,7 +144,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.tsx',
   inject: {

website/src/content/docs/integrations/react-ssr.mdx

@@ -118,7 +118,7 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.ts',
   inject: {
@@ -131,7 +131,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.ts',
   inject: {
@@ -144,7 +144,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.ts',
   inject: {

website/src/content/docs/integrations/svelte-ssr.mdx

@@ -118,7 +118,7 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.ts',
   inject: {
@@ -131,7 +131,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.ts',
   inject: {
@@ -144,7 +144,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.ts',
   inject: {

website/src/content/docs/ssr/index.mdx

@@ -193,7 +193,7 @@ The SSR plugin can provide request-bound browser-like dependencies for stores th
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.js',
   inject: {
@@ -206,7 +206,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.js',
   inject: {
@@ -219,7 +219,7 @@ ssr({
 
 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
+```js title="vite.config.js"
 ssr({
   index: 'src/index.js',
   inject: {

website/src/content/docs/tutorial/api-services.mdx

@@ -9,7 +9,7 @@ As an app grows, API calls tend to spread. Every request repeats the same transp
 
 In our example, the stores are injectable factories now, but the API layer is still a set of standalone functions:
 
-```ts title="services/events.ts"
+```ts title="src/services/events.ts"
 export async function fetchEvent(slug: string) {
   const response = await fetch(`/api/events/${slug}`)
 
@@ -43,7 +43,7 @@ The class itself is the DI token. The first `inject(EventsService$)` call create
 
 The transport differs between the browser and the server, so it gets two implementations behind one interface. The browser one stays relative to the page origin:
 
-```ts title="services/api/api.client.ts"
+```ts title="src/services/api/api.client.ts"
 import { Injectable$ } from '@nano_kit/store'
 import type { ApiService$ } from './api'
 
@@ -66,7 +66,7 @@ export class ClientApiService$ extends Injectable$ implements ApiService$ {
 
 The server one targets the API origin directly:
 
-```ts title="services/api/api.server.ts"
+```ts title="src/services/api/api.server.ts"
 import { Injectable$ } from '@nano_kit/store'
 import type { ApiService$ } from './api'
 
@@ -91,7 +91,7 @@ export class ServerApiService$ extends Injectable$ implements ApiService$ {
 
 The interface and the token pick the implementation at build time:
 
-```ts title="services/api/api.ts"
+```ts title="src/services/api/api.ts"
 import { ClientApiService$ } from './api.client'
 import { ServerApiService$ } from './api.server'
 
@@ -104,7 +104,7 @@ export const ApiService$ = import.meta.env.SSR
   : ClientApiService$
 ```
 
-```ts title="services/api/index.ts"
+```ts title="src/services/api/index.ts"
 export * from './api'
 ```
 
@@ -116,7 +116,7 @@ This split is also where request context will live. The server implementation is
 
 The standalone functions become methods of `EventsService$`:
 
-```ts title="services/events.ts"
+```ts title="src/services/events.ts"
 import { Injectable$, inject } from '@nano_kit/store'
 import { ApiService$ } from './api'
 
@@ -143,7 +143,7 @@ export class EventsService$ extends Injectable$ {
 
 Stores inject the service instead of importing functions:
 
-```ts title="stores/events.ts"
+```ts title="src/stores/events.ts"
 export function EventsList$() {
   const eventsService = inject(EventsService$)
   const { infinite } = inject(Client$)

website/src/content/docs/tutorial/authentication.mdx

@@ -23,7 +23,7 @@ The cookie is HttpOnly, so the frontend never reads or writes it. The browser st
 
 Auth failures are part of the domain, so the service maps HTTP statuses to typed error codes:
 
-```ts title="services/user.types.ts"
+```ts title="src/services/user.types.ts"
 export const UserError = {
   Unauthenticated: 'UNAUTHENTICATED',
   LoginFailed: 'LOGIN_FAILED',
@@ -44,7 +44,7 @@ export interface LoginParams {
 }
 ```
 
-```ts title="services/user.ts"
+```ts title="src/services/user.ts"
 import { Injectable$, inject } from '@nano_kit/store'
 import { ApiService$ } from './api'
 import { type LoginParams, type User, UserError } from './user.types'
@@ -99,7 +99,7 @@ export class UserService$ extends Injectable$ {
 
 The session state is just a query: `GET /api/users/me` keyed as `UserKey`. For an anonymous visitor the query fails with `UserError.Unauthenticated`, and that error code *is* the "logged out" state.
 
-```ts title="stores/user.ts"
+```ts title="src/stores/user.ts"
 import { inject, onMountEffect } from '@nano_kit/store'
 import { keys, onSuccess, queryKey } from '@nano_kit/query'
 import { LocationNavigation$, Paths$ } from '@nano_kit/router'
@@ -175,7 +175,7 @@ The [`onMountEffect`](/store/advanced#onmounteffect-and-onmounteffectscope) bloc
 
 The `publicRoutes` set lives next to the routes:
 
-```ts title="stores/router.ts"
+```ts title="src/stores/router.ts"
 export const routes = {
   home: '/',
   login: '/login',
@@ -196,7 +196,7 @@ During SSR the same guard produces a real redirect: `navigation.replace` becomes
 
 The login page is a form wired to the `login` mutation:
 
-```tsx title="ui/pages/Login.tsx"
+```tsx title="src/ui/pages/Login.tsx"
 import type { FormEvent } from 'react'
 import { useInject, useSignal } from '@nano_kit/react'
 import { title } from '@nano_kit/react-router'
@@ -266,7 +266,7 @@ The error signal holds the typed code thrown by the service, and the page maps c
 
 The route table gets the new page:
 
-```tsx title="index.tsx"
+```tsx title="src/index.tsx"
 export const pages = [
   layout(Layout, [
     page('home', loadable(() => import('./ui/pages/Home'))),
@@ -279,7 +279,7 @@ export const pages = [
 
 The layout shows who is logged in. Including `$user` in the layout `Stores$` means SSR waits for the session before rendering, so the name appears in the first HTML response:
 
-```tsx title="ui/pages/Layout.tsx"
+```tsx title="src/ui/pages/Layout.tsx"
 export function Stores$() {
   const { $user } = inject(User$)
 
@@ -317,7 +317,7 @@ The renderer can provide the incoming request cookies to stores and services. Ad
 pnpm add @nano_kit/platform-web
 ```
 
-```ts
+```ts title="vite.config.ts"
 ssr({
   index: 'src/index.tsx',
   server: 'src/server.ts',
@@ -329,7 +329,7 @@ ssr({
 
 Now `CookieStore$` is injectable during SSR, and the server transport from the API services chapter gets its promised upgrade — it forwards the session cookie to the API:
 
-```ts title="services/api/api.server.ts"
+```ts title="src/services/api/api.server.ts"
 import { CookieStore$, serializeCookies } from '@nano_kit/platform-web'
 import { Injectable$, inject } from '@nano_kit/store'
 import type { ApiService$ } from './api'
@@ -390,7 +390,7 @@ See [SSR Cookies](/ssr/cookies) for the full picture of request-bound cookie sto
 
 With a session, RSVP stops being an anonymous counter. The API toggles attendance per user and returns a `going` flag, so `BoardEvent` grows one field:
 
-```ts
+```ts title="src/services/events.ts"
 export interface BoardEvent {
   /* ... */
   attendees: number
@@ -400,7 +400,7 @@ export interface BoardEvent {
 
 The optimistic update from the optimistic updates chapter becomes a toggle. Setting cache data returns a revert callback, so rolling back on error takes one line:
 
-```ts title="stores/events.ts"
+```ts title="src/stores/events.ts"
 export function RsvpEvent$() {
   const eventsService = inject(EventsService$)
   const { $user } = inject(User$)
@@ -435,7 +435,7 @@ export function RsvpEvent$() {
 
 A logged in user toggles `going` in both directions; an anonymous visitor still just adds a guest, so `going` stays `false` for them. The event page picks the button label from the flag:
 
-```tsx
+```tsx title="src/ui/pages/Event.tsx"
 <button
   type='button'
   disabled={rsvpLoading}

website/src/content/docs/tutorial/first-store.mdx

@@ -15,7 +15,7 @@ The first store will hold the filters, the loaded events, and the loading flag.
 pnpm add @nano_kit/store @nano_kit/react
 ```
 
-```ts
+```ts title="src/stores/events.ts"
 import { action, effect, mountable, onMount, signal } from '@nano_kit/store'
 import { type BoardEvent, type EventCategory, fetchEvents } from '#src/services/events'
 
@@ -58,7 +58,7 @@ Here the callback creates an [`effect`](/store/core-concepts#signals-and-effects
 
 Let's render that state with one React component:
 
-```tsx
+```tsx title="src/ui/pages/Home.tsx"
 import { useSignal } from '@nano_kit/react'
 import { $events, $loading, $q } from '#src/stores/events'
 

website/src/content/docs/tutorial/forms-and-mutations.mdx

@@ -9,15 +9,15 @@ Reading data is only half of a real app. At some point the user also needs to se
 
 In our example, that means a page for creating a new event. That page gets its own route:
 
-```ts
+```ts title="src/stores/router.ts"
 export const routes = {
   home: '/',
   newEvent: '/events/new',
   event: '/events/:slug'
 } as const
 ```
 
-```tsx
+```tsx title="src/index.tsx"
 import { page, router, useNavigationListenLinks, usePageSignal } from '@nano_kit/react-router'
 import { $location, navigation } from './stores/router'
 import Event from './ui/pages/Event'
@@ -47,7 +47,7 @@ Nano Kit solves that by combining store signals for local form values with query
 
 Form input values are local UI state, so plain store [`signal`](/store/core-concepts#signals-and-effects) values are enough. Derived values like validation errors and request payload can be computed from those signals.
 
-```ts
+```ts title="src/stores/newEvent.ts"
 import { action, computed, signal } from '@nano_kit/store'
 import { type EventCategory, type NewEventForm } from '#src/services/events'
 
@@ -103,7 +103,7 @@ export const resetNewEventForm = action(() => {
 
 The submit action is another mutation:
 
-```ts
+```ts title="src/stores/newEvent.ts"
 import { disabled, onSuccess } from '@nano_kit/query'
 import { not } from '@nano_kit/store'
 import { type BoardEvent, createEvent as createEventRequest } from '#src/services/events'